Merge pull request #7 from datavisyn/sgratzl/graded

Stefan Luger · web-flow · commit 85ee546b8213 · 2019-03-18T10:38:02.000+01:00
add array version + ts interfaces
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ Try the demo on [Codepen](https://codepen.io/sluger/pen/YjJKYy).
 npm install --save chart.js chartjs-plugin-error-bars
 ```
 
+
 ## Usage
 Datasets must define an `errorBars` object that contains the error bar property key (same as in the used scale) and values `plus` and `minus`. Plus values are always positive, and minus vice versa.
 
@@ -29,6 +30,29 @@ Datasets must define an `errorBars` object that contains the error bar property
         'May': {plus: 35, minus: -14},
         'June': {plus: 45, minus: -4}
       }, ...
+
+      /* or for graded error bars
+
+      errorBars: {
+        'February': [{plus: 15, minus: -34}, {plus: 10, minus: -26}],
+        'March': [{plus: 5, minus: -24}, {plus: 2, minus: -16}],
+        'May': [{plus: 35, minus: -14}, {plus: 7, minus: -7}],
+        'June': [{plus: 45, minus: -4}, {plus: 25, minus: -2}]
+      }, ...
+
+      */
+```
+
+corresponding TypeScript interface
+```ts
+interface IErrorBars {
+  [label: string]: IErrorBar | IErrorBar[];
+}
+
+interface IErrorBar {
+  plus: number;
+  minus: number;
+}
 ```
 
 *Hierarchical scale plugin usage:*
@@ -62,17 +86,23 @@ Find more [Samples](https://github.com/datavisyn/chartjs-plugin-error-bars/tree/
     plugins: {
       chartJsPluginErrorBars: {
         /**
-         * stroke color
+         * stroke color, or array of colors
          * @default: derived from borderColor
          */
         color: '#666',
 
         /**
-         * bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
+         * bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%), or array of such definition
          * @default 10
          */
         width: 10 | '10px' | '60%',
 
+        /**
+         * lineWidth as number, or as string with pixel (px) ending, or array of such definition
+         * @default 2
+         */
+        lineWidth: 2 | '2px',
+
         /**
          * whether to interpet the plus/minus values, relative to the value itself (default) or absolute
          * @default false
@@ -85,6 +115,16 @@ Find more [Samples](https://github.com/datavisyn/chartjs-plugin-error-bars/tree/
 }
 ```
 
+corresponding TypeScript interface
+```ts
+interface IChartJsPluginErrorBarsOptions {
+  color: string | string[];
+  width: (string | number) | (string | number)[];
+  lineWidth: (string | number) | (string | number)[];
+  absoluteValues: boolean;
+}
+```
+
 
 ## Building
 
diff --git a/samples/graded.html b/samples/graded.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Vertical Bar</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" type></script>
+  <script src="../build/Plugin.Errorbars.js"></script>
+  <style>
+    canvas {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+    }
+  </style>
+</head>
+
+<body>
+<div id="container" style="width: 75%;">
+  <canvas id="canvas"></canvas>
+</div>
+<script>
+  var color = Chart.helpers.color;
+  var barChartData = {
+    labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
+    datasets: [{
+      label: 'Dataset 1',
+      //backgroundColor: '#d95f02',
+      borderColor: '#d95f02',
+      borderWidth: 1,
+      data: [
+        50,
+        -5,
+        130,
+        -40
+      ],
+      errorBars: {
+        'Value': [{minus: 20, plus: 80}, {minus: 40, plus: 60}],
+        'Value 2': [{minus: -30, plus: 120}, {minus: -20, plus: 50}]
+      }
+    }]
+
+  };
+
+  window.onload = function () {
+    var ctx = document.getElementById("canvas").getContext("2d");
+    window.myBar = new Chart(ctx, {
+      type: 'bar',
+      data: barChartData,
+      options: {
+        responsive: true,
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
+          }]
+        },
+        legend: {
+          position: 'top',
+        },
+        title: {
+          display: true,
+          text: 'Chart.js Error Bars Plugin'
+        },
+        plugins: {
+          chartJsPluginErrorBars: {
+            width: '20%',
+            lineWidth: [2, 4],
+            color: ['#bcbddc', '#756bb1'],
+            absoluteValues: true
+            //color: 'darkgray'
+          }
+        }
+      },
+    });
+  };
+</script>
+</body>
+
+</html>
diff --git a/src/plugin.js b/src/plugin.js
@@ -8,11 +8,17 @@ const defaultOptions = {
    * @default: derived from borderColor
    */
   color: undefined,
+
   /**
    * with as number, or as string with pixel (px) ending, or as string with percentage (%) ending
    */
   width: 10,
 
+  /**
+   * lineWidth as number, or as string with pixel (px) ending, or array of such definition
+   */
+  lineWidth: 2,
+
   /**
    * whether the error values are given in absolute values or relative (default)
    */
@@ -68,12 +74,11 @@ const ErrorBarsPlugin = {
    * compute error bars width in pixel or percent
    * @param chart chartjs instance
    * @param horizontal orientation
-   * @param options plugin options
+   * @param width plugin option width
    * @returns {*} width in pixel as number
    * @private
    */
-  _computeWidth(chart, horizontal, options) {
-    const width = options.width;
+  _computeWidth(chart, horizontal, width) {
     let widthInPx = width;
 
     try {
@@ -102,7 +107,7 @@ const ErrorBarsPlugin = {
       console.error(e);
     } finally {
       if (Number.isNaN(widthInPx)) {
-        widthInPx = options.width;
+        widthInPx = width;
       }
     }
     return widthInPx;
@@ -119,9 +124,10 @@ const ErrorBarsPlugin = {
    * @param horizontal orientation
    * @private
    */
-  _drawErrorBar(ctx, model, plus, minus, color, width, horizontal) {
+  _drawErrorBar(ctx, model, plus, minus, color, lineWidth, width, horizontal) {
     ctx.save();
     ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
     ctx.beginPath();
     if (horizontal) {
       ctx.moveTo(minus, model.y - width / 2);
@@ -170,7 +176,10 @@ const ErrorBarsPlugin = {
     const horizontal = this._isHorizontal(chart);
     const vScale = horizontal ? chart.scales['x-axis-0'] : chart.scales['y-axis-0'];
 
-    const errorBarWidth = this._computeWidth(chart, horizontal, options);
+    const errorBarWidths = (Array.isArray(options.width) ? options.width : [options.width]).map((w) => this._computeWidth(chart, horizontal, w));
+    const errorBarLineWidths = Array.isArray(options.lineWidth) ? options.lineWidth : [options.lineWidth];
+    const errorBarColors = Array.isArray(options.color) ? options.color : [options.color];
+
 
     const ctx = chart.ctx;
     ctx.save();
@@ -182,7 +191,7 @@ const ErrorBarsPlugin = {
         if (!cur) {
           return;
         }
-        let hasLabelProperty = cur.hasOwnProperty(bar.label);
+        const hasLabelProperty = cur.hasOwnProperty(bar.label);
         let errorBarData = null;
 
         // common scale such as categorical
@@ -193,19 +202,27 @@ const ErrorBarsPlugin = {
           errorBarData = cur[bar.label.label];
         }
 
-        // error bar data for the barchart bar or point in linechart
-        if (errorBarData) {
-          const errorBarColor = options.color ? options.color : bar.color;
-          const value = vScale.getRightValue(bar.value);
+        if (!errorBarData) {
+          return;
+        }
+
+        const errorBars = Array.isArray(errorBarData) ? errorBarData : [errorBarData];
+        const value = vScale.getRightValue(bar.value);
 
-          const plusValue = options.absoluteValues ? Math.abs(errorBarData.plus) : (value + Math.abs(errorBarData.plus));
-          const minusValue = options.absoluteValues ? Math.abs(errorBarData.minus) : (value - Math.abs(errorBarData.minus));
+        errorBars.forEach((errorBar, ei) => {
+          // error bar data for the barchart bar or point in linechart
+          const errorBarColor = errorBarColors[ei % errorBarColors.length] ? errorBarColors[ei % errorBarColors.length] : bar.color;
+          const errorBarLineWidth = errorBarLineWidths[ei % errorBarLineWidths.length];
+          const errorBarWidth = errorBarWidths[ei % errorBarWidths.length];
+
+          const plusValue = options.absoluteValues ? errorBar.plus : (value + Math.abs(errorBar.plus));
+          const minusValue = options.absoluteValues ? errorBar.minus : (value - Math.abs(errorBar.minus));
 
           const plus = vScale.getPixelForValue(plusValue);
           const minus = vScale.getPixelForValue(minusValue);
 
-          this._drawErrorBar(ctx, bar, plus, minus, errorBarColor, errorBarWidth, horizontal);
-        }
+          this._drawErrorBar(ctx, bar, plus, minus, errorBarColor, errorBarLineWidth, errorBarWidth, horizontal);
+        });
       });
     });
 
