From 5f0697473fa34a146a250f45b04660eec80f36a1 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Fri, 15 Mar 2019 08:31:29 +0100 Subject: [PATCH 1/2] compatible with chartjs 2.8.0 --- package-lock.json | 28 ++++++++++++++-------------- package.json | 2 +- src/controllers/boxplot.js | 6 +++--- src/controllers/violin.js | 6 +++--- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 775c658..941f530 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "chartjs-chart-box-and-violin-plot", - "version": "1.3.0", + "version": "1.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1507,27 +1507,27 @@ "dev": true }, "chart.js": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz", - "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==", + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz", + "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==", "requires": { "chartjs-color": "^2.1.0", "moment": "^2.10.2" } }, "chartjs-color": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", - "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz", + "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==", "requires": { - "chartjs-color-string": "^0.5.0", + "chartjs-color-string": "^0.6.0", "color-convert": "^0.5.3" } }, "chartjs-color-string": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", - "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", "requires": { "color-name": "^1.0.0" } @@ -7466,9 +7466,9 @@ "dev": true }, "moment": { - "version": "2.23.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz", - "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==" + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" }, "ms": { "version": "2.1.1", diff --git a/package.json b/package.json index 6a9730f..ae0fd17 100644 --- a/package.json +++ b/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": { diff --git a/src/controllers/boxplot.js b/src/controllers/boxplot.js index 769a9bf..1bb6fc8 100644 --- a/src/controllers/boxplot.js +++ b/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; diff --git a/src/controllers/violin.js b/src/controllers/violin.js index 8d20abc..7e840b0 100644 --- a/src/controllers/violin.js +++ b/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); From 5b1084dbd8f6ef667c69d8358c7e71cadefce4ad Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Fri, 15 Mar 2019 08:53:21 +0100 Subject: [PATCH 2/2] scriptable options --- README.md | 31 ++++++++++++++++++++++++++----- src/controllers/base.js | 15 +++++++++++++-- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fc1b086..5be91b5 100644 --- a/README.md +++ b/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 +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; } diff --git a/src/controllers/base.js b/src/controllers/base.js index 8bf9d8c..5c56775 100644 --- a/src/controllers/base.js +++ b/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) {