horizontal bar chart

Author: sgratzl

README.md

@@ -29,56 +29,54 @@ four new types: `boxplot`, `horizontalBoxplot`, `violin`, and `horizontalViolin`
 
 ```typescript
 interface IChartJSOptions {
-/**
- * Limit decimal digits by an optional config option
- **/
-  tooltipDecimals?: number;
-
   boxplot: {
-    /**
-     * statistic measure that should be used for computing the minimal data limit
-     * @default 'min'
-     */
-    minStats: 'min' | 'q1' | 'whiskerMin';
-
-    /**
-     * statistic measure that should be used for computing the maximal data limit
-     * @default 'max'
-     */
-    maxStats: 'max' | 'q3' | 'whiskerMax';
-
-    /**
-     * from the R doc: this determines how far the plot ‘whiskers’ extend out from
-     * the box. If coef is positive, the whiskers extend to the most extreme data
-     * point which is no more than coef times the length of the box away from the
-     * box. A value of zero causes the whiskers to extend to the data extremes
-     * @default 1.5
-     */
-    coef: number;
-
-    /**
-     * the method to compute the quantiles.
-     *
-     * 7, 'quantiles': the type-7 method as used by R 'quantiles' method.
-     * 'hinges' and 'fivenum': the method used by R 'boxplot.stats' method.
-     * 'linear': the interpolation method 'linear' as used by 'numpy.percentile' function
-     * 'lower': the interpolation method 'lower' as used by 'numpy.percentile' function
-     * 'higher': the interpolation method 'higher' as used by 'numpy.percentile' function
-     * 'nearest': the interpolation method 'nearest' as used by 'numpy.percentile' function
-     * 'midpoint': the interpolation method 'midpoint' as used by 'numpy.percentile' function
-     * @default 7
-     */
-    quantiles:
-      | 7
-      | 'quantiles'
-      | 'hinges'
-      | 'fivenum'
-      | 'linear'
-      | 'lower'
-      | 'higher'
-      | 'nearest'
-      | 'midpoint'
-      | ((sortedArr: number[]) => { min: number; q1: number; median: number; q3: number; max: number });
+    datasets: {
+      /**
+       * statistic measure that should be used for computing the minimal data limit
+       * @default 'min'
+       */
+      minStats: 'min' | 'q1' | 'whiskerMin';
+
+      /**
+       * statistic measure that should be used for computing the maximal data limit
+       * @default 'max'
+       */
+      maxStats: 'max' | 'q3' | 'whiskerMax';
+
+      /**
+       * from the R doc: this determines how far the plot ‘whiskers’ extend out from
+       * the box. If coef is positive, the whiskers extend to the most extreme data
+       * point which is no more than coef times the length of the box away from the
+       * box. A value of zero causes the whiskers to extend to the data extremes
+       * @default 1.5
+       */
+      coef: number;
+
+      /**
+       * the method to compute the quantiles.
+       *
+       * 7, 'quantiles': the type-7 method as used by R 'quantiles' method.
+       * 'hinges' and 'fivenum': the method used by R 'boxplot.stats' method.
+       * 'linear': the interpolation method 'linear' as used by 'numpy.percentile' function
+       * 'lower': the interpolation method 'lower' as used by 'numpy.percentile' function
+       * 'higher': the interpolation method 'higher' as used by 'numpy.percentile' function
+       * 'nearest': the interpolation method 'nearest' as used by 'numpy.percentile' function
+       * 'midpoint': the interpolation method 'midpoint' as used by 'numpy.percentile' function
+       * @default 7
+       */
+      quantiles:
+        | 7
+        | 'quantiles'
+        | 'hinges'
+        | 'fivenum'
+        | 'linear'
+        | 'lower'
+        | 'higher'
+        | 'nearest'
+        | 'midpoint'
+        | ((sortedArr: number[]) => { min: number; q1: number; median: number; q3: number; max: number });
+    };
+  };
 }
 ```
 

samples/fivenum.html

@@ -52,8 +52,10 @@
               display: true,
               text: 'Quantiles type 7',
             },
-            datasets: {
-              quantiles: 'quantiles',
+            boxplot: {
+              datasets: {
+                quantiles: 'quantiles',
+              },
             },
           },
         });
@@ -70,8 +72,10 @@
               display: true,
               text: 'Quantiles Fivenum',
             },
-            datasets: {
-              quantiles: 'fivenum',
+            boxplot: {
+              datasets: {
+                quantiles: 'fivenum',
+              },
             },
           },
         });

samples/horizontalBoxplot.html

@@ -61,7 +61,6 @@
               display: true,
               text: 'Chart.js Box Plot Chart',
             },
-            tooltipDecimals: 4,
           },
         });
       };

samples/violin.html

@@ -63,7 +63,6 @@
               display: true,
               text: 'Chart.js Violin Chart',
             },
-            tooltipDecimals: 3,
           },
         });
       };

samples/violinSingle.html

@@ -61,7 +61,6 @@
               display: true,
               text: 'Chart.js Violin Chart',
             },
-            tooltipDecimals: 3,
           },
         });
       };

src/bundle.js

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

src/controllers/base.js

@@ -1,5 +1,6 @@
 import { interpolateNumberArray } from '../animation';
 import { outlierPositioner, patchInHoveredOutlier } from '../tooltip';
+import { controllers } from 'chart.js';
 
 export const configKeys = [
   'outlierRadius',
@@ -42,6 +43,8 @@ export function baseDefaults() {
           },
         },
       },
+      minStats: 'min',
+      maxStats: 'max',
     },
     tooltips: {
       position: outlierPositioner.register().id,
@@ -51,3 +54,86 @@ export function baseDefaults() {
     },
   };
 }
+
+export class StatsBase extends controllers.bar {
+  getMinMax(scale, canStack) {
+    const bak = scale.axis;
+    const config = this._config;
+    scale.axis = config.minStats;
+    const min = super.getMinMax(scale, canStack).min;
+    scale.axis = config.maxStats;
+    const max = super.getMinMax(scale, canStack).max;
+    scale.axis = bak;
+    return { min, max };
+  }
+
+  parseArrayData(meta, data, start, count) {
+    const vScale = meta.vScale;
+    const iScale = meta.iScale;
+    const labels = iScale.getLabels();
+    const r = [];
+    for (let i = 0; i < count; i++) {
+      const index = i + start;
+      const parsed = {};
+      parsed[iScale.axis] = iScale.parse(labels[index], index);
+      const stats = this._parseStats(data[index], this._config);
+      if (stats) {
+        Object.assign(parsed, stats);
+        parsed[vScale.axis] = stats.median;
+      }
+      r.push(parsed);
+    }
+    return r;
+  }
+
+  _parseStats(_value, _config) {
+    // abstract
+    return {};
+  }
+
+  parseObjectData(meta, data, start, count) {
+    return this.parseArrayData(meta, data, start, count);
+  }
+
+  getLabelAndValue(index) {
+    const r = super.getLabelAndValue(index);
+    const vScale = this._cachedMeta.vScale;
+    const parsed = this.getParsed(index);
+    if (!vScale || !parsed) {
+      return r;
+    }
+    r.value = {
+      raw: parsed,
+      hoveredOutlierIndex: -1,
+    };
+    this._transformStats(r.value, parsed, (v) => vScale.getLabelForValue(v));
+    const s = this._toStringStats(r.value);
+    r.value.toString = function () {
+      // custom to string function for the 'value'
+      if (this.hoveredOutlierIndex >= 0) {
+        return `(outlier: ${this.outliers[this.hoveredOutlierIndex]})`;
+      }
+      return s;
+    };
+    return r;
+  }
+
+  _toStringStats(_b) {
+    // abstract
+    return '';
+  }
+
+  _transformStats(_target, _source, _mapper) {
+    // abstract
+  }
+
+  updateElement(rectangle, index, properties, mode) {
+    const reset = mode === 'reset';
+    const scale = this._cachedMeta.vScale;
+    const parsed = this.getParsed(index);
+    const base = scale.getBasePixel();
+    properties._datasetIndex = this.index;
+    this._transformStats(properties, parsed, (v) => (reset ? base : scale.getPixelForValue(v)));
+    super.updateElement(rectangle, index, properties, mode);
+  }
+}