From 65762c893175b1d24245020e2ff74d3ba633a6fa Mon Sep 17 00:00:00 2001 From: Slava Terekhov Date: Tue, 29 Mar 2022 17:58:13 +0400 Subject: [PATCH] fix: fix chart plugins type (#786) change chart plugins type from object to array, fix tests and examples #782 --- README.md | 8 +++--- legacy/sandboxes/bar/src/components/Bar.vue | 4 +-- .../bubble/src/components/Bubble.vue | 4 +-- .../doughnut/src/components/Doughnut.vue | 4 +-- legacy/sandboxes/line/src/components/Line.vue | 4 +-- legacy/sandboxes/pie/src/components/Pie.vue | 4 +-- .../polar-area/src/components/PolarArea.vue | 4 +-- .../sandboxes/radar/src/components/Radar.vue | 4 +-- .../scatter/src/components/Scatter.vue | 4 +-- legacy/src/Charts.js | 8 +++--- legacy/test/Bar.spec.js | 8 ++---- legacy/test/Bubble.spec.js | 8 ++---- legacy/test/Doughnut.spec.js | 8 ++---- legacy/test/Line.spec.js | 8 ++---- legacy/test/Pie.spec.js | 8 ++---- legacy/test/PolarArea.spec.js | 8 ++---- legacy/test/Radar.spec.js | 8 ++---- legacy/test/Scatter.spec.js | 8 ++---- legacy/test/examples/Bar.vue | 4 +-- legacy/test/examples/Bubble.vue | 4 +-- legacy/test/examples/Doughnut.vue | 4 +-- legacy/test/examples/Line.vue | 4 +-- legacy/test/examples/Pie.vue | 4 +-- legacy/test/examples/PolarArea.vue | 4 +-- legacy/test/examples/Radar.vue | 4 +-- legacy/test/examples/Scatter.vue | 4 +-- package.json | 1 - sandboxes/bar/src/components/barChart.ts | 6 ++-- .../bubble/src/components/bubbleChart.ts | 6 ++-- .../custom/src/components/customChart.ts | 6 ++-- .../doughnut/src/components/doughnutChart.ts | 6 ++-- sandboxes/line/src/components/lineChart.ts | 6 ++-- sandboxes/pie/src/components/pieChart.ts | 6 ++-- .../src/components/polarAreaChart.ts | 6 ++-- sandboxes/radar/src/components/radarChart.ts | 6 ++-- .../src/components/reactivePropChart.ts | 6 ++-- .../reactive/src/components/reactiveChart.ts | 6 ++-- .../scatter/src/components/scatterChart.ts | 6 ++-- src/BaseCharts.ts | 12 ++++---- src/types.ts | 7 ++--- src/utils.ts | 28 +------------------ test/Bar.spec.ts | 8 ++---- test/Bubble.spec.ts | 8 ++---- test/ChartsTypes.test-d.ts | 12 +++++--- test/Doughnut.spec.ts | 8 ++---- test/Line.spec.ts | 8 ++---- test/Pie.spec.ts | 8 ++---- test/PolarArea.spec.ts | 8 ++---- test/Radar.spec.ts | 8 ++---- test/Scatter.spec.ts | 8 ++---- test/examples/BarChart.ts | 6 ++-- test/examples/BubbleChart.ts | 6 ++-- test/examples/CustomChart.ts | 6 ++-- test/examples/DoughnutChart.ts | 6 ++-- test/examples/LineChart.ts | 6 ++-- test/examples/PieChart.ts | 6 ++-- test/examples/PolarAreaChart.ts | 6 ++-- test/examples/RadarChart.ts | 6 ++-- test/examples/ReactiveChart.ts | 6 ++-- test/examples/ReactivePropChart.ts | 6 ++-- test/examples/ScatterChart.ts | 6 ++-- 61 files changed, 171 insertions(+), 229 deletions(-) diff --git a/README.md b/README.md index 2468cbf8..a1ceffea 100644 --- a/README.md +++ b/README.md @@ -129,8 +129,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { @@ -183,8 +183,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/legacy/sandboxes/bar/src/components/Bar.vue b/legacy/sandboxes/bar/src/components/Bar.vue index 5ea23210..4fefdf6a 100644 --- a/legacy/sandboxes/bar/src/components/Bar.vue +++ b/legacy/sandboxes/bar/src/components/Bar.vue @@ -58,8 +58,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/bubble/src/components/Bubble.vue b/legacy/sandboxes/bubble/src/components/Bubble.vue index 07ae645b..4a32efd7 100644 --- a/legacy/sandboxes/bubble/src/components/Bubble.vue +++ b/legacy/sandboxes/bubble/src/components/Bubble.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/doughnut/src/components/Doughnut.vue b/legacy/sandboxes/doughnut/src/components/Doughnut.vue index cb814dfb..5455650f 100644 --- a/legacy/sandboxes/doughnut/src/components/Doughnut.vue +++ b/legacy/sandboxes/doughnut/src/components/Doughnut.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/line/src/components/Line.vue b/legacy/sandboxes/line/src/components/Line.vue index 829b326d..940c6622 100644 --- a/legacy/sandboxes/line/src/components/Line.vue +++ b/legacy/sandboxes/line/src/components/Line.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/pie/src/components/Pie.vue b/legacy/sandboxes/pie/src/components/Pie.vue index bd1d6cf9..5245d5fd 100644 --- a/legacy/sandboxes/pie/src/components/Pie.vue +++ b/legacy/sandboxes/pie/src/components/Pie.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/polar-area/src/components/PolarArea.vue b/legacy/sandboxes/polar-area/src/components/PolarArea.vue index 1bf666f4..4b37bfa3 100644 --- a/legacy/sandboxes/polar-area/src/components/PolarArea.vue +++ b/legacy/sandboxes/polar-area/src/components/PolarArea.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/radar/src/components/Radar.vue b/legacy/sandboxes/radar/src/components/Radar.vue index 404b67b3..4fda746d 100644 --- a/legacy/sandboxes/radar/src/components/Radar.vue +++ b/legacy/sandboxes/radar/src/components/Radar.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/sandboxes/scatter/src/components/Scatter.vue b/legacy/sandboxes/scatter/src/components/Scatter.vue index d7d93989..ba885cad 100644 --- a/legacy/sandboxes/scatter/src/components/Scatter.vue +++ b/legacy/sandboxes/scatter/src/components/Scatter.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/src/Charts.js b/legacy/src/Charts.js index c704c62d..2e74512d 100644 --- a/legacy/src/Charts.js +++ b/legacy/src/Charts.js @@ -14,7 +14,6 @@ import { chartCreate, chartDestroy, chartUpdate, - getChartOptions, getChartData, setChartLabels, setChartDatasets, @@ -59,8 +58,8 @@ export function generateChart(chartId, chartType, chartController) { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { @@ -100,7 +99,8 @@ export function generateChart(chartId, chartType, chartController) { this.$data._chart = new ChartJS(canvasEl2DContext, { type: chartType, data: chartData, - options: getChartOptions(options, this.plugins) + options, + plugins: this.plugins }) } } diff --git a/legacy/test/Bar.spec.js b/legacy/test/Bar.spec.js index 8c36a58f..88ceb48c 100644 --- a/legacy/test/Bar.spec.js +++ b/legacy/test/Bar.spec.js @@ -31,15 +31,13 @@ describe('LegacyBar', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Bubble.spec.js b/legacy/test/Bubble.spec.js index 0079fa7e..45f14d7a 100644 --- a/legacy/test/Bubble.spec.js +++ b/legacy/test/Bubble.spec.js @@ -32,15 +32,13 @@ describe('LegacyBubble', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Doughnut.spec.js b/legacy/test/Doughnut.spec.js index 5d5f78ca..7c136337 100644 --- a/legacy/test/Doughnut.spec.js +++ b/legacy/test/Doughnut.spec.js @@ -32,15 +32,13 @@ describe('LegacyDoughnut', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Line.spec.js b/legacy/test/Line.spec.js index efaa69c3..701279b0 100644 --- a/legacy/test/Line.spec.js +++ b/legacy/test/Line.spec.js @@ -31,15 +31,13 @@ describe('LegacyLine', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Pie.spec.js b/legacy/test/Pie.spec.js index 80ee9cc0..ed262280 100644 --- a/legacy/test/Pie.spec.js +++ b/legacy/test/Pie.spec.js @@ -31,15 +31,13 @@ describe('LegacyPie', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/PolarArea.spec.js b/legacy/test/PolarArea.spec.js index 4a05a47f..6767c6ba 100644 --- a/legacy/test/PolarArea.spec.js +++ b/legacy/test/PolarArea.spec.js @@ -32,15 +32,13 @@ describe('LegacyPolarArea', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Radar.spec.js b/legacy/test/Radar.spec.js index af8219f9..a1fab478 100644 --- a/legacy/test/Radar.spec.js +++ b/legacy/test/Radar.spec.js @@ -32,15 +32,13 @@ describe('LegacyRadar', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/Scatter.spec.js b/legacy/test/Scatter.spec.js index a7ad64b7..cd41aaa6 100644 --- a/legacy/test/Scatter.spec.js +++ b/legacy/test/Scatter.spec.js @@ -32,15 +32,13 @@ describe('LegacyScatter', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - propsData: { plugins: testPlugin } + propsData: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/legacy/test/examples/Bar.vue b/legacy/test/examples/Bar.vue index 9831d3db..1f6ffff6 100644 --- a/legacy/test/examples/Bar.vue +++ b/legacy/test/examples/Bar.vue @@ -58,8 +58,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Bubble.vue b/legacy/test/examples/Bubble.vue index 7a4d0124..6a372df4 100644 --- a/legacy/test/examples/Bubble.vue +++ b/legacy/test/examples/Bubble.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Doughnut.vue b/legacy/test/examples/Doughnut.vue index 93e32e4c..d1fb5b80 100644 --- a/legacy/test/examples/Doughnut.vue +++ b/legacy/test/examples/Doughnut.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Line.vue b/legacy/test/examples/Line.vue index f4585055..dbd7b32f 100644 --- a/legacy/test/examples/Line.vue +++ b/legacy/test/examples/Line.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Pie.vue b/legacy/test/examples/Pie.vue index 8b79b6b2..6d912f8d 100644 --- a/legacy/test/examples/Pie.vue +++ b/legacy/test/examples/Pie.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/PolarArea.vue b/legacy/test/examples/PolarArea.vue index aef01a28..45f02ec5 100644 --- a/legacy/test/examples/PolarArea.vue +++ b/legacy/test/examples/PolarArea.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Radar.vue b/legacy/test/examples/Radar.vue index 3df41e93..c4949743 100644 --- a/legacy/test/examples/Radar.vue +++ b/legacy/test/examples/Radar.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/legacy/test/examples/Scatter.vue b/legacy/test/examples/Scatter.vue index 4fc5f0ce..7ed60c39 100644 --- a/legacy/test/examples/Scatter.vue +++ b/legacy/test/examples/Scatter.vue @@ -57,8 +57,8 @@ export default { default: () => {} }, plugins: { - type: Object, - default: () => {} + type: Array, + default: () => [] } }, data() { diff --git a/package.json b/package.json index ea14024e..286b3a21 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { "name": "vue-chartjs", "version": "4.0.2", - "packageManager": "pnpm@6.32.2", "description": "Vue.js wrapper for chart.js for creating beautiful charts.", "author": "Jakub Juszczak ", "homepage": "http://vue-chartjs.org", diff --git a/sandboxes/bar/src/components/barChart.ts b/sandboxes/bar/src/components/barChart.ts index 1b581352..0b681094 100644 --- a/sandboxes/bar/src/components/barChart.ts +++ b/sandboxes/bar/src/components/barChart.ts @@ -10,7 +10,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) @@ -42,8 +42,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/bubble/src/components/bubbleChart.ts b/sandboxes/bubble/src/components/bubbleChart.ts index 3b7da664..155e0818 100644 --- a/sandboxes/bubble/src/components/bubbleChart.ts +++ b/sandboxes/bubble/src/components/bubbleChart.ts @@ -9,7 +9,7 @@ import { Legend, PointElement, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale) @@ -41,8 +41,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/custom/src/components/customChart.ts b/sandboxes/custom/src/components/customChart.ts index bc843c28..b24d3b78 100644 --- a/sandboxes/custom/src/components/customChart.ts +++ b/sandboxes/custom/src/components/customChart.ts @@ -11,7 +11,7 @@ import { PointElement, CategoryScale, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register( @@ -80,8 +80,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/doughnut/src/components/doughnutChart.ts b/sandboxes/doughnut/src/components/doughnutChart.ts index e4d4b4c7..14a64a47 100644 --- a/sandboxes/doughnut/src/components/doughnutChart.ts +++ b/sandboxes/doughnut/src/components/doughnutChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/line/src/components/lineChart.ts b/sandboxes/line/src/components/lineChart.ts index 14572e6b..cb53c2e6 100644 --- a/sandboxes/line/src/components/lineChart.ts +++ b/sandboxes/line/src/components/lineChart.ts @@ -8,7 +8,7 @@ import { Legend, LineElement, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/pie/src/components/pieChart.ts b/sandboxes/pie/src/components/pieChart.ts index 9dc38752..11e24904 100644 --- a/sandboxes/pie/src/components/pieChart.ts +++ b/sandboxes/pie/src/components/pieChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/polar-area/src/components/polarAreaChart.ts b/sandboxes/polar-area/src/components/polarAreaChart.ts index 94d29b73..f1e1a4fc 100644 --- a/sandboxes/polar-area/src/components/polarAreaChart.ts +++ b/sandboxes/polar-area/src/components/polarAreaChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, RadialLinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/radar/src/components/radarChart.ts b/sandboxes/radar/src/components/radarChart.ts index ec38ffb5..b9f1c431 100644 --- a/sandboxes/radar/src/components/radarChart.ts +++ b/sandboxes/radar/src/components/radarChart.ts @@ -8,7 +8,7 @@ import { Legend, PointElement, RadialLinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/reactive-prop/src/components/reactivePropChart.ts b/sandboxes/reactive-prop/src/components/reactivePropChart.ts index db75f6c0..f68467da 100644 --- a/sandboxes/reactive-prop/src/components/reactivePropChart.ts +++ b/sandboxes/reactive-prop/src/components/reactivePropChart.ts @@ -8,7 +8,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType, + Plugin, ChartData, DefaultDataPoint } from 'chart.js' @@ -48,8 +48,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/reactive/src/components/reactiveChart.ts b/sandboxes/reactive/src/components/reactiveChart.ts index 7b88128c..d170dc2a 100644 --- a/sandboxes/reactive/src/components/reactiveChart.ts +++ b/sandboxes/reactive/src/components/reactiveChart.ts @@ -8,7 +8,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType, + Plugin, ChartData } from 'chart.js' @@ -41,8 +41,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/sandboxes/scatter/src/components/scatterChart.ts b/sandboxes/scatter/src/components/scatterChart.ts index e5aa70e5..a9cc597c 100644 --- a/sandboxes/scatter/src/components/scatterChart.ts +++ b/sandboxes/scatter/src/components/scatterChart.ts @@ -8,7 +8,7 @@ import { Legend, LineElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/src/BaseCharts.ts b/src/BaseCharts.ts index 839a2988..22945fdd 100644 --- a/src/BaseCharts.ts +++ b/src/BaseCharts.ts @@ -14,8 +14,8 @@ import type { ChartType, ChartComponentLike, DefaultDataPoint, - PluginOptionsByType, - ChartOptions + ChartOptions, + Plugin } from 'chart.js' import { @@ -35,7 +35,6 @@ import { chartCreate, chartDestroy, chartUpdate, - getChartOptions, getChartData, setChartLabels, setChartDatasets, @@ -94,8 +93,8 @@ export const generateChart = < default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props, context) { @@ -127,7 +126,8 @@ export const generateChart = < { type: chartType, data: isProxy(data) ? new Proxy(chartData, {}) : chartData, - options: getChartOptions(options, props.plugins) + options, + plugins: props.plugins } ) } diff --git a/src/types.ts b/src/types.ts index f6aba083..bdf13fc9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,9 +3,8 @@ import type { ChartType, ChartData, ChartOptions, - PluginChartOptions, DefaultDataPoint, - PluginOptionsByType + Plugin } from 'chart.js' import { @@ -27,8 +26,6 @@ export type TChartData< export type TChartOptions = ChartOptions -export type TChartPlugins = PluginChartOptions - export type TypedChartJS< TType extends ChartType = ChartType, TData = DefaultDataPoint, @@ -48,7 +45,7 @@ export interface IChartProps< height?: number cssClasses?: string styles?: Partial - plugins?: PluginOptionsByType + plugins?: Plugin[] } export interface IChartComponentData< diff --git a/src/utils.ts b/src/utils.ts index 68bc923e..20768908 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,9 +1,4 @@ -import type { - ChartType, - ChartDataset, - DefaultDataPoint, - PluginOptionsByType -} from 'chart.js' +import type { ChartType, ChartDataset, DefaultDataPoint } from 'chart.js' import type { TChartData, TChartOptions, TypedChartJS } from './types' @@ -77,27 +72,6 @@ export function getChartData< return nextData } -export function getChartOptions( - options?: TChartOptions, - plugins?: PluginOptionsByType -): TChartOptions | undefined { - const chartOptions = options - - if ( - chartOptions !== undefined && - 'plugins' in chartOptions && - typeof plugins !== 'undefined' && - Object.keys(plugins).length > 0 - ) { - chartOptions.plugins = { - ...chartOptions.plugins, - ...plugins - } - } - - return chartOptions -} - export function setChartDatasets< TType extends ChartType = ChartType, TData = DefaultDataPoint, diff --git a/test/Bar.spec.ts b/test/Bar.spec.ts index d17bb12c..c3c19433 100644 --- a/test/Bar.spec.ts +++ b/test/Bar.spec.ts @@ -31,15 +31,13 @@ describe('BarChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/Bubble.spec.ts b/test/Bubble.spec.ts index f5b354fa..5f02a8d5 100644 --- a/test/Bubble.spec.ts +++ b/test/Bubble.spec.ts @@ -32,15 +32,13 @@ describe('BubbleChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/ChartsTypes.test-d.ts b/test/ChartsTypes.test-d.ts index 9d43861a..0b605368 100644 --- a/test/ChartsTypes.test-d.ts +++ b/test/ChartsTypes.test-d.ts @@ -1,6 +1,6 @@ import { h } from 'vue' import { expectError } from 'tsd' -import { PluginOptionsByType } from 'chart.js' +import { Plugin } from 'chart.js' import { Bar, Radar, Scatter, Doughnut } from '../src' @@ -8,18 +8,22 @@ const chartData = { datasets: [] } +const testPlugin = { + id: 'test' +} + /** * Should check type-specific props */ h(Radar, { chartData, - plugins: {} as PluginOptionsByType<'radar'> + plugins: [] }) h(Scatter, { chartData, - plugins: {} as PluginOptionsByType<'scatter'> + plugins: [] }) h(Bar, { @@ -30,7 +34,7 @@ h(Bar, { expectError( h(Scatter, { chartData, - plugins: {} as PluginOptionsByType<'bubble'> + plugins: [testPlugin] as Plugin<'bubble'>[] }) ) diff --git a/test/Doughnut.spec.ts b/test/Doughnut.spec.ts index 114c04d9..d05adadd 100644 --- a/test/Doughnut.spec.ts +++ b/test/Doughnut.spec.ts @@ -32,15 +32,13 @@ describe('DoughnutChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/Line.spec.ts b/test/Line.spec.ts index 0567d331..c2d6ff28 100644 --- a/test/Line.spec.ts +++ b/test/Line.spec.ts @@ -31,15 +31,13 @@ describe('LineChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/Pie.spec.ts b/test/Pie.spec.ts index 1d76c7f7..eddd2b9d 100644 --- a/test/Pie.spec.ts +++ b/test/Pie.spec.ts @@ -31,15 +31,13 @@ describe('PieChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/PolarArea.spec.ts b/test/PolarArea.spec.ts index 2c42d7a3..6f2ef16d 100644 --- a/test/PolarArea.spec.ts +++ b/test/PolarArea.spec.ts @@ -32,15 +32,13 @@ describe('PolarChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/Radar.spec.ts b/test/Radar.spec.ts index c8af35ff..cf4c25f0 100644 --- a/test/Radar.spec.ts +++ b/test/Radar.spec.ts @@ -31,15 +31,13 @@ describe('RadarChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/Scatter.spec.ts b/test/Scatter.spec.ts index 27e9a7c5..be29f0e1 100644 --- a/test/Scatter.spec.ts +++ b/test/Scatter.spec.ts @@ -32,15 +32,13 @@ describe('ScatterChart', () => { it('should add inline plugins based on prop', () => { const testPlugin = { - title: { - display: true - } + id: 'test' } const wrapper = mount(Component, { - props: { plugins: testPlugin } + props: { plugins: [testPlugin] } }) - expect(Object.keys(wrapper.props().plugins).length).toEqual(1) + expect(wrapper.props().plugins.length).toEqual(1) }) }) diff --git a/test/examples/BarChart.ts b/test/examples/BarChart.ts index 3c7baf9a..97293bd8 100644 --- a/test/examples/BarChart.ts +++ b/test/examples/BarChart.ts @@ -10,7 +10,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) @@ -42,8 +42,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/BubbleChart.ts b/test/examples/BubbleChart.ts index c886d80b..7e402a3d 100644 --- a/test/examples/BubbleChart.ts +++ b/test/examples/BubbleChart.ts @@ -9,7 +9,7 @@ import { Legend, PointElement, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale) @@ -41,8 +41,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/CustomChart.ts b/test/examples/CustomChart.ts index 2daebce5..4cac667b 100644 --- a/test/examples/CustomChart.ts +++ b/test/examples/CustomChart.ts @@ -11,7 +11,7 @@ import { PointElement, CategoryScale, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register( @@ -80,8 +80,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/DoughnutChart.ts b/test/examples/DoughnutChart.ts index 89808010..373538cc 100644 --- a/test/examples/DoughnutChart.ts +++ b/test/examples/DoughnutChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/LineChart.ts b/test/examples/LineChart.ts index 0e31caab..8d443042 100644 --- a/test/examples/LineChart.ts +++ b/test/examples/LineChart.ts @@ -8,7 +8,7 @@ import { Legend, LineElement, LinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/PieChart.ts b/test/examples/PieChart.ts index d48d722b..352afff4 100644 --- a/test/examples/PieChart.ts +++ b/test/examples/PieChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/PolarAreaChart.ts b/test/examples/PolarAreaChart.ts index 208b6f79..f6e13434 100644 --- a/test/examples/PolarAreaChart.ts +++ b/test/examples/PolarAreaChart.ts @@ -8,7 +8,7 @@ import { Legend, ArcElement, RadialLinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/RadarChart.ts b/test/examples/RadarChart.ts index 12a31374..c318ed01 100644 --- a/test/examples/RadarChart.ts +++ b/test/examples/RadarChart.ts @@ -8,7 +8,7 @@ import { Legend, PointElement, RadialLinearScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/ReactiveChart.ts b/test/examples/ReactiveChart.ts index 3cdf5458..d936a2cb 100644 --- a/test/examples/ReactiveChart.ts +++ b/test/examples/ReactiveChart.ts @@ -8,7 +8,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType, + Plugin, ChartData } from 'chart.js' @@ -41,8 +41,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/ReactivePropChart.ts b/test/examples/ReactivePropChart.ts index 612adb5c..8c88e83f 100644 --- a/test/examples/ReactivePropChart.ts +++ b/test/examples/ReactivePropChart.ts @@ -8,7 +8,7 @@ import { BarElement, CategoryScale, LinearScale, - PluginOptionsByType, + Plugin, ChartData, DefaultDataPoint } from 'chart.js' @@ -48,8 +48,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) { diff --git a/test/examples/ScatterChart.ts b/test/examples/ScatterChart.ts index e6a20fdd..ae916aa5 100644 --- a/test/examples/ScatterChart.ts +++ b/test/examples/ScatterChart.ts @@ -8,7 +8,7 @@ import { Legend, LineElement, CategoryScale, - PluginOptionsByType + Plugin } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale) @@ -40,8 +40,8 @@ export default defineComponent({ default: () => {} }, plugins: { - type: Object as PropType>, - default: () => {} + type: Array as PropType[]>, + default: () => [] } }, setup(props) {