From 3c8ec4e437c4ea69ace632d7d81a8b46454d660a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Tue, 15 Jun 2021 13:10:28 +0300 Subject: [PATCH] Fixed #1348 - Upgrade Chart.js to 3.3.2 --- package.json | 2 +- src/components/chart/Chart.vue | 6 +- src/views/chart/BarChartDemo.vue | 429 +++++++++++++++---------- src/views/chart/BarChartDoc.vue | 385 ++++++++++++++++------ src/views/chart/ChartDemo.vue | 22 -- src/views/chart/ChartDoc.vue | 3 +- src/views/chart/ComboChartDemo.vue | 62 ++-- src/views/chart/ComboChartDoc.vue | 63 +++- src/views/chart/DoughnutChartDemo.vue | 20 +- src/views/chart/DoughnutChartDoc.vue | 29 +- src/views/chart/LineChartDemo.vue | 216 +++++++------ src/views/chart/LineChartDoc.vue | 328 +++++++++++++------ src/views/chart/PieChartDemo.vue | 20 +- src/views/chart/PieChartDoc.vue | 27 +- src/views/chart/PolarAreaChartDemo.vue | 36 ++- src/views/chart/PolarAreaChartDoc.vue | 43 ++- src/views/chart/RadarChartDemo.vue | 54 ++-- src/views/chart/RadarChartDoc.vue | 53 ++- 18 files changed, 1217 insertions(+), 581 deletions(-) diff --git a/package.json b/package.json index 816f2ccd0..e73bc9857 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@vuelidate/validators": "^2.0.0-alpha.12", "axios": "^0.19.0", "babel-eslint": "^10.1.0", - "chart.js": "2.7.3", + "chart.js": "3.3.2", "codesandbox": "2.1.14", "core-js": "^3.6.5", "eslint": "^6.7.2", diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue index fef11e4bc..cf37af230 100755 --- a/src/components/chart/Chart.vue +++ b/src/components/chart/Chart.vue @@ -44,7 +44,7 @@ export default { }, methods: { initChart() { - import('chart.js').then((module) => { + import('chart.js/auto').then((module) => { if (module && module.default) { this.chart = new module.default(this.$refs.canvas, { type: this.type, @@ -73,8 +73,8 @@ export default { }, onCanvasClick(event) { if (this.chart) { - const element = this.chart.getElementAtEvent(event); - const dataset = this.chart.getDatasetAtEvent(event); + const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false); + const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false); if (element && element[0] && dataset) { this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset}); diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue index ab3728009..48c3db84c 100755 --- a/src/views/chart/BarChartDemo.vue +++ b/src/views/chart/BarChartDemo.vue @@ -16,7 +16,7 @@
Horizontal
- +
@@ -52,6 +52,9 @@ export default { if (this.isDarkTheme()) { this.applyDarkTheme(); } + else { + this.applyLightTheme(); + } }, beforeUnmount() { EventBus.off('change-theme', this.themeChangeListener); @@ -86,47 +89,15 @@ export default { '#FFCA28', '#26A69A' ], - yAxisID: 'y-axis-1', + yAxisID: 'y', data: [65, 59, 80, 81, 56, 55, 10] }, { label: 'Dataset 2', backgroundColor: '#78909C', - yAxisID: 'y-axis-2', + yAxisID: 'y1', data: [28, 48, 40, 19, 86, 27, 90] }] }, - multiAxisOptions: { - responsive: true, - tooltips: { - mode: 'index', - intersect: true - }, - scales: { - yAxes: [{ - type: 'linear', - display: true, - position: 'left', - id: 'y-axis-1', - ticks: { - min: 0, - max: 100 - } - }, - { - type: 'linear', - display: true, - position: 'right', - id: 'y-axis-2', - gridLines: { - drawOnChartArea: false - }, - ticks: { - min: 0, - max: 100 - } - }] - } - }, stackedData: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ @@ -170,22 +141,10 @@ export default { ] }] }, - stackedOptions: { - tooltips: { - mode: 'index', - intersect: false - }, - responsive: true, - scales: { - xAxes: [{ - stacked: true, - }], - yAxes: [{ - stacked: true - }] - } - }, - basicOptions: null + basicOptions: null, + horizontalOptions: null, + multiAxisOptions: null, + stackedOptions: null } }, methods: { @@ -194,145 +153,289 @@ export default { }, applyLightTheme() { this.basicOptions = { - legend: { - labels: { - fontColor: '#495057' + plugins: { + legend: { + labels: { + color: '#495057' + } } }, scales: { - xAxes: [{ + x: { ticks: { - fontColor: '#495057' + color: '#495057' + }, + grid: { + color: '#ebedef' } - }], - yAxes: [{ - ticks: { - fontColor: '#495057' - } - }] - } - }; - - this.stackedOptions.scales.xAxes[0].ticks = { - fontColor: '#495057' - }; - this.stackedOptions.scales.xAxes[0].gridLines = { - color: '#ebedef' - }; - this.stackedOptions.scales.yAxes[0].ticks = { - fontColor: '#495057' - }; - this.stackedOptions.scales.yAxes[0].gridLines = { - color: '#ebedef' - }; - this.stackedOptions.legend = { - labels: { - fontColor: '#495057' - } - }; - this.stackedOptions = {...this.stackedOptions}; - - this.multiAxisOptions.scales.xAxes = [{ - ticks: { - fontColor: '#495057' }, - gridLines: { - color: '#ebedef' + y: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } } } - ]; - this.multiAxisOptions.scales.yAxes[0].ticks = { - fontColor: '#495057' }; - this.multiAxisOptions.scales.yAxes[0].gridLines = { - color: '#ebedef' - }; - this.multiAxisOptions.scales.yAxes[1].ticks = { - fontColor: '#495057' - }; - this.multiAxisOptions.scales.yAxes[1].gridLines = { - color: '#ebedef' - }; - this.multiAxisOptions.legend = { - labels: { - fontColor: '#495057' + + this.horizontalOptions = { + indexAxis: 'y', + plugins: { + legend: { + labels: { + color: '#495057' + } + } + }, + scales: { + x: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + }, + y: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + } + } + }; + + this.multiAxisOptions = { + plugins: { + legend: { + labels: { + color: '#495057' + } + }, + tooltips: { + mode: 'index', + intersect: true + } + }, + scales: { + x: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + }, + y: { + type: 'linear', + display: true, + position: 'left', + ticks: { + min: 0, + max: 100, + color: '#495057' + }, + grid: { + color: '#ebedef' + } + }, + y1: { + type: 'linear', + display: true, + position: 'right', + grid: { + drawOnChartArea: false, + color: '#ebedef' + }, + ticks: { + min: 0, + max: 100, + color: '#495057' + } + } + } + }; + + this.stackedOptions = { + plugins: { + tooltips: { + mode: 'index', + intersect: false + }, + legend: { + labels: { + color: '#495057' + } + } + }, + scales: { + x: { + stacked: true, + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + }, + y: { + stacked: true, + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + } } }; - this.multiAxisOptions = {...this.multiAxisOptions}; }, applyDarkTheme() { this.basicOptions = { - legend: { - labels: { - fontColor: '#ebedef' + plugins: { + legend: { + labels: { + color: '#ebedef' + } } }, scales: { - xAxes: [{ + x: { ticks: { - fontColor: '#ebedef' + color: '#ebedef' }, - gridLines: { + grid: { color: 'rgba(255,255,255,0.2)' } - }], - yAxes: [{ - ticks: { - fontColor: '#ebedef' - }, - gridLines: { - color: 'rgba(255,255,255,0.2)' - } - }] - } - }; - - this.stackedOptions.scales.xAxes[0].ticks = { - fontColor: '#ebedef' - }; - this.stackedOptions.scales.xAxes[0].gridLines = { - color: 'rgba(255,255,255,0.2)' - }; - this.stackedOptions.scales.yAxes[0].ticks = { - fontColor: '#ebedef' - }; - this.stackedOptions.scales.yAxes[0].gridLines = { - color: 'rgba(255,255,255,0.2)' - }; - this.stackedOptions.legend = { - labels: { - fontColor: '#ebedef' - } - }; - this.stackedOptions = {...this.stackedOptions}; - - this.multiAxisOptions.scales.xAxes = [{ - ticks: { - fontColor: '#ebedef' }, - gridLines: { - color: 'rgba(255,255,255,0.2)' + y: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } } } - ]; - this.multiAxisOptions.scales.yAxes[0].ticks = { - fontColor: '#ebedef' }; - this.multiAxisOptions.scales.yAxes[0].gridLines = { - color: 'rgba(255,255,255,0.2)' - }; - this.multiAxisOptions.scales.yAxes[1].ticks = { - fontColor: '#ebedef' - }; - this.multiAxisOptions.scales.yAxes[1].gridLines = { - color: 'rgba(255,255,255,0.2)' - }; - this.multiAxisOptions.legend = { - labels: { - fontColor: '#ebedef' + + this.horizontalOptions = { + indexAxis: 'y', + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + x: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + }, + y: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + } } }; - this.multiAxisOptions = {...this.multiAxisOptions}; + + this.multiAxisOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + }, + tooltips: { + mode: 'index', + intersect: true + } + }, + scales: { + x: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + }, + y: { + type: 'linear', + display: true, + position: 'left', + ticks: { + min: 0, + max: 100, + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + }, + y1: { + type: 'linear', + display: true, + position: 'right', + grid: { + drawOnChartArea: false, + color: 'rgba(255,255,255,0.2)' + }, + ticks: { + min: 0, + max: 100, + color: '#ebedef' + } + } + } + }; + + this.stackedOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + }, + tooltips: { + mode: 'index', + intersect: false + } + }, + scales: { + x: { + stacked: true, + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + }, + y: { + stacked: true, + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(255,255,255,0.2)' + } + } + } + }; } }, components: { diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue index 217eae0fc..ea6a1f715 100755 --- a/src/views/chart/BarChartDoc.vue +++ b/src/views/chart/BarChartDoc.vue @@ -1,5 +1,5 @@