simple boxplots

Author: sgratzl

samples/animation.html

@@ -51,13 +51,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            scales: {
-              x: {
-                // Specific to Bar Controller
-                categoryPercentage: 0.9,
-                barPercentage: 0.8,
-              },
-            },
           },
         });
       };

samples/datalimits.html

@@ -56,7 +56,7 @@
           display: true,
           text: 'Chart.js Box Plot Chart',
         },
-        boxplot: {
+        datasets: {
           minStats: 'min',
           maxStats: 'max',
         },

samples/vertical.html renamed to samples/default.html

@@ -39,7 +39,7 @@
             borderWidth: 1,
             data: samples.boxplots({ count: 7, random: random }),
             outlierColor: '#999999',
-            lowerColor: '#461e7d',
+            // lowerColor: '#461e7d',
           },
           {
             label: 'Dataset 2',
@@ -67,13 +67,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            scales: {
-              x: {
-                // Specific to Bar Controller
-                categoryPercentage: 0.9,
-                barPercentage: 0.8,
-              },
-            },
           },
         });
       };

samples/empty.html

@@ -51,13 +51,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            scales: {
-              x: {
-                // Specific to Bar Controller
-                categoryPercentage: 0.9,
-                barPercentage: 0.8,
-              },
-            },
           },
         });
       };

samples/fivenum.html

@@ -52,7 +52,7 @@
               display: true,
               text: 'Quantiles type 7',
             },
-            boxplot: {
+            datasets: {
               quantiles: 'quantiles',
             },
           },
@@ -70,14 +70,8 @@
               display: true,
               text: 'Quantiles Fivenum',
             },
-            scales: {
-              yAxes: [
-                {
-                  ticks: {
-                    quantiles: 'fivenum',
-                  },
-                },
-              ],
+            datasets: {
+              quantiles: 'fivenum',
             },
           },
         });

samples/mediancolor.html

@@ -52,13 +52,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            scales: {
-              x: {
-                // Specific to Bar Controller
-                categoryPercentage: 0.9,
-                barPercentage: 0.8,
-              },
-            },
           },
         });
       };

samples/minmax.html

@@ -47,13 +47,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            scales: {
-              x: {
-                // Specific to Bar Controller
-                categoryPercentage: 0.9,
-                barPercentage: 0.8,
-              },
-            },
           },
         });
       };

src/animation.js

@@ -0,0 +1,18 @@
+const interpolators = {
+  number(from, to, factor) {
+    if (from === to) {
+      return to;
+    }
+    return from + (to - from) * factor;
+  },
+};
+
+export function interpolateNumberArray(from, to, factor) {
+  if (typeof from === 'number' && typeof to === 'number') {
+    return interpolators.number(from, to, factor);
+  }
+  if (Array.isArray(from) && Array.isArray(to)) {
+    return from.map((f, i) => interpolators.number(f, to[i], factor));
+  }
+  return to;
+}

src/bundle.js

@@ -1,3 +1,5 @@
 export * from '.';
 
-// import {} from './controllers';
+import { BoxPlot } from './controllers';
+
+BoxPlot.register();

src/controllers/base.js

@@ -1,32 +1,25 @@
-import * as Chart from 'chart.js';
-
-export const verticalDefaults = {
-  scales: {
-    yAxes: [
-      {
-        type: 'arrayLinear',
-      },
-    ],
-  },
-};
-export const horizontalDefaults = {
-  scales: {
-    xAxes: [
-      {
-        type: 'arrayLinear',
-      },
-    ],
-  },
-};
+import {} from 'chart.js';
+import { interpolateNumberArray } from '../animation';
 
 export function toFixed(value) {
   const decimals = this._chart.config.options.tooltipDecimals; // inject number of decimals from config
   if (decimals == null || typeof decimals !== 'number' || decimals < 0) {
     return value;
   }
-  return Number.parseFloat(value).toFixed(decimals);
+  return value.toFixed(decimals);
 }
 
+export const baseDefaults = {
+  datasets: {
+    animation: {
+      numberArray: {
+        fn: interpolateNumberArray,
+        properties: ['outliers', 'items'],
+      },
+    },
+  },
+};
+
 const configKeys = [
   'outlierRadius',
   'itemRadius',
@@ -39,12 +32,9 @@ const configKeys = [
   'outlierHitRadius',
   'lowerColor',
 ];
-const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
+// const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
 
 const array = {
-  _elementOptions() {
-    return {};
-  },
   updateElement(elem, index, reset) {
     const dataset = this.getDataset();
     const custom = elem.custom || {};
@@ -76,23 +66,4 @@ const array = {
       r.items = container.items.map((d) => scale.getPixelForValue(Number(d)));
     }
   },
-  setHoverStyle(element) {
-    Chart.controllers.bar.prototype.setHoverStyle.call(this, element);
-
-    const dataset = this.chart.data.datasets[element._datasetIndex];
-    const index = element._index;
-    const custom = element.custom || {};
-    const model = element._model;
-    const getHoverColor = Chart.helpers.getHoverColor;
-    const resolve = Chart.helpers.options.resolve;
-
-    configKeys.forEach((item, i) => {
-      element.$previousStyle[item] = model[item];
-      const hoverKey = `hover${item.charAt(0).toUpperCase()}${item.slice(1)}`;
-      const modelValue = configKeyIsColor[i] && model[item] != null ? getHoverColor(model[item]) : model[item];
-      element._model[item] = resolve([custom[hoverKey], dataset[hoverKey], modelValue], undefined, index);
-    });
-  },
 };
-
-export default array;