merge develop

README.md

@@ -1,13 +1,14 @@
 # Chart.js Box and Violin Plot
 [![datavisyn][datavisyn-image]][datavisyn-url] [![NPM Package][npm-image]][npm-url] [![CircleCI][circleci-image]][circleci-url]
 
-Chart.js module for charting box and violin plots. **Works only with Chart.js ~2.7.x**
+Chart.js module for charting box and violin plots. **Works only with Chart.js >= 2.8.0**
 
 ![Box Plot](https://user-images.githubusercontent.com/4129778/42724341-9a6ec554-8770-11e8-99b5-626e34dafdb3.png)
 ![Violin Plot](https://user-images.githubusercontent.com/4129778/42724342-9a8dbb58-8770-11e8-9a30-3e69d07d3b79.png)
 
 
 ## Install
+
 ```bash
 npm install --save chart.js chartjs-chart-box-and-violin-plot
 ```
@@ -28,38 +29,52 @@ The boxplot element is called `boxandwhiskers`. The basic options are from the `
 interface IBaseStyling {
   /**
    * @default see rectangle
+   * @scriptable
+   * @indexable
    */
   backgroundColor: string;
 
   /**
    * @default see rectangle
+   * @scriptable
+   * @indexable
    */
   borderColor: string;
 
   /**
-     * @default null takes the current borderColor
-     */
+   * @default null takes the current borderColor
+   * @scriptable
+   * @indexable
+   */
   medianColor: string;
 
   /**
    * @default 1
+   * @scriptable
+   * @indexable
    */
   borderWidth: number;
 
   /**
    * radius used to render outliers
    * @default 2
+   * @scriptable
+   * @indexable
    */
   outlierRadius: number;
 
   /**
    * @default see rectangle.backgroundColor
+   * @scriptable
+   * @indexable
    */
   outlierColor: string;
 
   /**
    * radius used to render items
    * @default 0 so disabled
+   * @scriptable
+   * @indexable
    */
   itemRadius: number;
 
@@ -69,21 +84,27 @@ interface IBaseStyling {
    */
   itemStyle: 'circle'|'triangle'|'rect'|'rectRounded'|'rectRot'|'cross'|'crossRot'|'star'|'line'|'dash';
 
-  /*
+  /**
    * background color for items
    * @default see rectangle backgroundColor
+   * @scriptable
+   * @indexable
    */
   itemBackgroundColor: string;
 
-  /*
+  /**
    * border color for items
    * @default see rectangle backgroundColor
+   * @scriptable
+   * @indexable
    */
   itemBorderColor: string;
 
   /**
    * padding thst is added around the bounding box when computing a mouse hit
    * @default 1
+   * @scriptable
+   * @indexable
    */
   hitPadding: number;
 }

package.json

@@ -20,7 +20,7 @@
     "src/**/*.js"
   ],
   "dependencies": {
-    "chart.js": "~2.7.3",
+    "chart.js": "^2.8.0",
     "@sgratzl/science": "^2.0.0"
   },
   "devDependencies": {

src/controllers/base.js

@@ -27,8 +27,19 @@ const array = {
     const options = this._elementOptions();
 
     Chart.controllers.bar.prototype.updateElement.call(this, elem, index, reset);
-    ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding'].forEach((item) => {
-      elem._model[item] = custom[item] !== undefined ? custom[item] : Chart.helpers.valueAtIndexOrDefault(dataset[item], index, options[item]);
+    const resolve = Chart.helpers.options.resolve;
+
+    const keys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding'];
+    // Scriptable options
+    const context = {
+      chart: this.chart,
+      dataIndex: index,
+      dataset,
+      datasetIndex: this.index
+    };
+
+    keys.forEach((item) => {
+      elem._model[item] = resolve([custom[item], dataset[item], options[item]], context, index);
     });
   },
   _calculateCommonModel(r, data, container, scale) {

src/controllers/boxplot.js

@@ -34,8 +34,8 @@ const boxplot = {
   /**
    * @private
    */
-  updateElementGeometry(elem, index, reset) {
-    Chart.controllers.bar.prototype.updateElementGeometry.call(this, elem, index, reset);
+  _updateElementGeometry(elem, index, reset) {
+    Chart.controllers.bar.prototype._updateElementGeometry.call(this, elem, index, reset);
     elem._model.boxplot = this._calculateBoxPlotValuesPixels(this.index, index);
   },
 
@@ -44,7 +44,7 @@ const boxplot = {
    */
 
   _calculateBoxPlotValuesPixels(datasetIndex, index) {
-    const scale = this.getValueScale();
+    const scale = this._getValueScale();
     const data = this.chart.data.datasets[datasetIndex].data[index];
     if (!data) {
       return null;

src/controllers/violin.js

@@ -19,8 +19,8 @@ const controller = {
   /**
    * @private
    */
-  updateElementGeometry(elem, index, reset) {
-    Chart.controllers.bar.prototype.updateElementGeometry.call(this, elem, index, reset);
+  _updateElementGeometry(elem, index, reset) {
+    Chart.controllers.bar.prototype._updateElementGeometry.call(this, elem, index, reset);
     const custom = elem.custom || {};
     const options = this._elementOptions();
     elem._model.violin = this._calculateViolinValuesPixels(this.index, index, custom.points !== undefined ? custom.points : options.points);
@@ -31,7 +31,7 @@ const controller = {
    */
 
   _calculateViolinValuesPixels(datasetIndex, index, points) {
-    const scale = this.getValueScale();
+    const scale = this._getValueScale();
     const data = this.chart.data.datasets[datasetIndex].data[index];
     const violin = asViolinStats(data);