diff --git a/example/src/components/bar.js b/example/src/components/bar.js index c1d40d794..6293e6435 100644 --- a/example/src/components/bar.js +++ b/example/src/components/bar.js @@ -27,9 +27,7 @@ export default React.createClass({ data={data} width={100} height={50} - options={{ - maintainAspectRatio: false - }} + options={{}} /> ); diff --git a/example/src/components/bubble.js b/example/src/components/bubble.js index f4e45c92a..bf16c556a 100644 --- a/example/src/components/bubble.js +++ b/example/src/components/bubble.js @@ -1,6 +1,10 @@ import React from 'react'; import {Bubble} from 'react-chartjs-2'; +var randomScalingFactor = function() { + return Math.round(Math.random() * 100); +}; + const data = { labels: ['January'], datasets: [ @@ -23,11 +27,52 @@ const data = { pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, - data: [{x:10,y:20,r:5}] + data: [{ + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }, { + x: randomScalingFactor(), + y: randomScalingFactor(), + r: Math.abs(randomScalingFactor()) / 5, + }] } ] }; +const options = { + responsive: true, + plugins: { + title: { + display: true, + text: 'Chart.js Bubble Chart' + }, + tooltip: { + mode: 'point' + } + } +} + export default React.createClass({ displayName: 'BubbleExample', @@ -35,7 +80,7 @@ export default React.createClass({ return (

Bubble Example

- +
); } diff --git a/example/src/components/horizontalBar.js b/example/src/components/horizontalBar.js index 4f36ec535..d91893be0 100644 --- a/example/src/components/horizontalBar.js +++ b/example/src/components/horizontalBar.js @@ -16,6 +16,28 @@ const data = { ] }; +const options = { + indexAxis: 'y', + // Elements options apply to all of the options unless overridden in a dataset + // In this case, we are setting the border of each horizontal bar to be 2px wide + elements: { + bar: { + borderWidth: 2, + } + }, + responsive: true, + plugins: { + legend: { + display: true, + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Horizontal Bar Chart' + } + } +} + export default React.createClass({ displayName: 'BarExample', @@ -23,7 +45,7 @@ export default React.createClass({ return (

Horizontal Bar Example

- +
); } diff --git a/example/src/components/legend-options.js b/example/src/components/legend-options.js index acae3d8d3..be4f01b12 100644 --- a/example/src/components/legend-options.js +++ b/example/src/components/legend-options.js @@ -71,4 +71,4 @@ export default React.createClass({ ); } -}) \ No newline at end of file +}) diff --git a/example/src/components/mix.js b/example/src/components/mix.js index 902d97d87..bdcdc77f7 100644 --- a/example/src/components/mix.js +++ b/example/src/components/mix.js @@ -80,9 +80,9 @@ const options = { }; const plugins = [{ - afterDraw: (chartInstance, easing) => { - const ctx = chartInstance.chart.ctx; - ctx.fillText("This text drawn by a plugin", 100, 100); + afterDraw: (chart, easing) => { + const ctx = chart.ctx; + ctx.fillText("This text drawn by a plugin", 100, 100); } }]; diff --git a/example/src/components/polar.js b/example/src/components/polar.js index b60a07195..86c18fbb5 100644 --- a/example/src/components/polar.js +++ b/example/src/components/polar.js @@ -1,14 +1,18 @@ import React from 'react'; import {Polar} from 'react-chartjs-2'; +var randomScalingFactor = function() { + return Math.round(Math.random() * 100); +}; + const data = { datasets: [{ data: [ - 11, - 16, - 7, - 3, - 14 + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), ], backgroundColor: [ '#FF6384', diff --git a/example/src/components/scatter.js b/example/src/components/scatter.js index 3f5d14187..80a85f2c6 100644 --- a/example/src/components/scatter.js +++ b/example/src/components/scatter.js @@ -15,17 +15,9 @@ const data = { pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 2, - pointRadius: 1, + pointRadius: 5, pointHitRadius: 10, - data: [ - { x: 65, y: 75 }, - { x: 59, y: 49 }, - { x: 80, y: 90 }, - { x: 81, y: 29 }, - { x: 56, y: 36 }, - { x: 55, y: 25 }, - { x: 40, y: 18 }, - ] + data: generateData() } ] }; @@ -42,3 +34,17 @@ export default React.createClass({ ); } }); + +function generateData() { + var randomScalingFactor = function() { + return Math.round(Math.random() * 100); + }; + var data = []; + for (var i = 0; i < 7; i++) { + data.push({ + x: randomScalingFactor(), + y: randomScalingFactor() + }); + } + return data; +} diff --git a/package.json b/package.json index 898c1a675..131e1441c 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "brfs": "^2.0.2", "canvas": "^2.6.1", "chai": "^4.2.0", - "chart.js": "2.6.0", + "chart.js": "^3.0.0-beta.6", "cross-env": "^7.0.2", "css-loader": "^3.6.0", "debug": "^4.1.1", @@ -59,6 +59,8 @@ "rimraf": "^3.0.2", "rollup": "^2.22.1", "rollup-plugin-generate-html-template": "^1.7.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-serve": "^1.0.4", "rollup-plugin-uglify": "^6.0.4", "serve": "^11.3.2", "sinon": "^9.0.2", @@ -66,7 +68,7 @@ "webpack-dev-server": "^3.11.0" }, "peerDependencies": { - "chart.js": "^2.3", + "chart.js": "^3.0.0-beta.6", "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" }, @@ -82,7 +84,7 @@ "build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -o dist/react-chartjs-2.js", "build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -o dist/react-chartjs-2.min.js", "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min", - "examples": "rollup -c example/rollup.config.js", + "examples": "rollup -w -c example/rollup.config.js", "examples:clean": "rimraf example/dist", "examples:deploy": "npm run examples:clean && npm run examples && gh-pages -d example/dist", "start": "npm run examples", diff --git a/src/index.js b/src/index.js index 4d39fe9a5..53e8eaeaa 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,47 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Chart from 'chart.js'; +// import * as Chart from 'chart.js'; import isEqual from 'lodash/isEqual'; import keyBy from 'lodash/keyBy'; +import { + Chart, + LineController, + LineElement, + PointElement, + LinearScale, + Title, + CategoryScale, + DoughnutController, + ArcElement, + PieController, + BarController, + BarElement, + RadarController, + RadialLinearScale, + PolarAreaController, + BubbleController, + ScatterController, + Legend +} from 'chart.js' + +// Line +Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Legend); +// Doughnut +Chart.register(DoughnutController, ArcElement); +// Pie +Chart.register(PieController, ArcElement); +// Bar +Chart.register(BarController, BarElement); +// Horizontal bar was removed + +// Radar +Chart.register(RadarController, RadialLinearScale); +// Polar +Chart.register(PolarAreaController); +// Bubble +Chart.register(BubbleController); +// Scatter +Chart.register(ScatterController); const NODE_ENV = (typeof process !== 'undefined') && process.env && process.env.NODE_ENV; @@ -28,8 +67,10 @@ class ChartComponent extends React.Component { options: PropTypes.object, plugins: PropTypes.arrayOf(PropTypes.object), redraw: PropTypes.bool, - type: function(props, propName, componentName) { - if(!Chart.controllers[props[propName]]) { + type: function (props, propName, componentName) { + let type = props[propName]; + let types = ['line', 'bar', 'radar', 'doughnut', 'pie', 'polarArea', 'bubble', 'scatter', 'area']; + if (!types.includes(type)) { return new Error( 'Invalid chart type `' + props[propName] + '` supplied to' + ' `' + componentName + '`.' @@ -49,7 +90,21 @@ class ChartComponent extends React.Component { height: 150, width: 300, redraw: false, - options: {}, + options: { + responsive: true, + plugins: { + legend: { + display: true, + labels: { + usePointStyle: false + } + }, + title: { + display: true, + text: 'Normal Legend' + } + } + }, datasetKeyProvider: ChartComponent.getLabelAsKey } @@ -100,7 +155,7 @@ class ChartComponent extends React.Component { const nextData = this.transformDataProp(nextProps); - if( !isEqual(this.shadowDataProp, nextData)) { + if (!isEqual(this.shadowDataProp, nextData)) { return true; } @@ -114,8 +169,8 @@ class ChartComponent extends React.Component { } transformDataProp(props) { - const { data } = props; - if (typeof(data) == 'function') { + const {data} = props; + if (typeof (data) == 'function') { const node = this.element; return data(node); } else { @@ -138,7 +193,7 @@ class ChartComponent extends React.Component { ...data, datasets: data.datasets && data.datasets.map(set => { return { - ...set + ...set }; }) }; @@ -187,7 +242,7 @@ class ChartComponent extends React.Component { if (!this.chartInstance) return; if (options) { - this.chartInstance.options = Chart.helpers.configMerge(this.chartInstance.options, options); + this.chartInstance.options = {...this.chartInstance.options, ...options}; } // Pipe datasets to chart instance datasets enabling @@ -210,11 +265,11 @@ class ChartComponent extends React.Component { if (current && current.type === next.type && next.data) { // Be robust to no data. Relevant for other update mechanisms as in chartjs-plugin-streaming. // The data array must be edited in place. As chart.js adds listeners to it. - current.data.splice(next.data.length); + current.data.length = next.data.length; next.data.forEach((point, pid) => { current.data[pid] = next.data[pid]; }); - const { data, ...otherProps } = next; + const {data, ...otherProps} = next; // Merge properties. Notice a weakness here. If a property is removed // from next, it will be retained by current and never disappears. // Workaround is to set value to null or undefined in next. @@ -227,7 +282,7 @@ class ChartComponent extends React.Component { } }); - const { datasets, ...rest } = data; + const {datasets, ...rest} = data; this.chartInstance.config.data = { ...this.chartInstance.config.data, @@ -256,8 +311,8 @@ class ChartComponent extends React.Component { destroyChart() { if (!this.chartInstance) { - return; - } + return; + } // Put all of the datasets that have existed in the chart back on the chart // so that the metadata associated with this chart get destroyed. @@ -362,7 +417,7 @@ export class HorizontalBar extends React.Component { this.chartInstance = ref && ref.chartInstance} - type='horizontalBar' + type='bar' /> ); } diff --git a/yarn.lock b/yarn.lock index 091eca9e7..83f9deba9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3895,25 +3895,10 @@ chardet@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" -chart.js@2.6.0: - version "2.6.0" - resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71" - dependencies: - chartjs-color "^2.1.0" - moment "^2.10.6" - -chartjs-color-string@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" - dependencies: - color-name "^1.0.0" - -chartjs-color@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" - dependencies: - chartjs-color-string "^0.6.0" - color-convert "^1.9.3" +chart.js@^3.0.0-beta.6: + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.0.0-beta.6.tgz#99d3604cecb8173f42e4b1d6b7c26a832e9c2784" + integrity sha512-Dq7veoux6ccaUHoA9Z5P5YvOqWWqLJcl3MNFZn+mYyyVqrtPbxXqWCzYwUlU7rovHcLy9FwoCSCGECcRN03FIg== check-error@^1.0.2: version "1.0.2" @@ -3948,7 +3933,7 @@ chokidar@2.1.8, chokidar@^2.0.0, chokidar@^2.0.4, chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@3.4.3, chokidar@^3.4.0, chokidar@^3.4.1: +chokidar@3.4.3, chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.4.1: version "3.4.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" dependencies: @@ -4166,7 +4151,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.3.0, color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" dependencies: @@ -7786,6 +7771,21 @@ lines-and-columns@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" +livereload-js@^3.1.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-3.3.1.tgz#61f887468086762e61fb2987412cf9d1dda99202" + integrity sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ== + +livereload@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477" + integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw== + dependencies: + chokidar "^3.3.0" + livereload-js "^3.1.0" + opts ">= 1.2.0" + ws "^6.2.1" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -8225,7 +8225,7 @@ mime@1.6.0, mime@^1.5.0: version "1.6.0" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" -mime@^2.4.4: +mime@>=2.4.6, mime@^2.4.4: version "2.4.6" resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1" @@ -8388,10 +8388,6 @@ mocha@^8.0.1: yargs-parser "13.1.2" yargs-unparser "2.0.0" -moment@^2.10.6: - version "2.29.1" - resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" - moo@^0.5.0: version "0.5.1" resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4" @@ -8886,6 +8882,11 @@ open@^7.0.0: is-docker "^2.0.0" is-wsl "^2.1.1" +opener@1: + version "1.5.2" + resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598" + integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A== + opn@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc" @@ -8921,6 +8922,11 @@ optionator@^0.9.1: type-check "^0.4.0" word-wrap "^1.2.3" +"opts@>= 1.2.0": + version "2.0.2" + resolved "https://registry.yarnpkg.com/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1" + integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg== + ordered-read-streams@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e" @@ -10705,6 +10711,21 @@ rollup-plugin-generate-html-template@^1.7.0: dependencies: fs-extra "^7.0.1" +rollup-plugin-livereload@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313" + integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A== + dependencies: + livereload "^0.9.1" + +rollup-plugin-serve@^1.0.4: + version "1.1.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-serve/-/rollup-plugin-serve-1.1.0.tgz#0654a57021a21b903340c69940f7463706e8288d" + integrity sha512-pYkSsuA0/psKqhhictkJw1c2klya5b+LlCvipWqI9OE1aG2M97mRumZCbBlry5CMEOzYBBgSDgd1694sNbmyIw== + dependencies: + mime ">=2.4.6" + opener "1" + rollup-plugin-uglify@^6.0.4: version "6.0.4" resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.4.tgz#65a0959d91586627f1e46a7db966fd504ec6c4e6"