From 747085a1ee3d2867388cf89232ae4d38a8610c07 Mon Sep 17 00:00:00 2001 From: "v.terekhov" Date: Wed, 16 Feb 2022 15:14:44 +0400 Subject: [PATCH 01/11] chore: update chartjs to 3rd version --- package.json | 6 +++--- pnpm-lock.yaml | 25 +++++-------------------- 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 0b5f50f5..81ba0387 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "start:storybook": "start-storybook -p 6006" }, "peerDependencies": { - "chart.js": ">= 2.5" + "chart.js": "^3.7.0" }, "dependencies": { "@types/chart.js": "^2.7.55" @@ -76,13 +76,13 @@ "@swc/core": "^1.2.120", "@swc/helpers": "^0.3.2", "@swc/jest": "^0.2.15", - "@types/chart.js": "^2.7.55", + "@types/chart.js": "^3.7.0", "@vue/test-utils": "^1.3.0", "@vue/vue2-jest": "^27.0.0-alpha.4", "babel-jest": "^27.4.5", "babel-loader": "8.2.3", "browserslist": "^4.19.1", - "chart.js": "^2.8.0", + "chart.js": "^3.7.0", "clean-publish": "^4.0.0", "commitizen": "^4.2.4", "cross-env": "^5.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd1e01fc..db01b443 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,7 +18,7 @@ specifiers: babel-jest: ^27.4.5 babel-loader: 8.2.3 browserslist: ^4.19.1 - chart.js: ^2.8.0 + chart.js: ^3.7.0 clean-publish: ^4.0.0 commitizen: ^4.2.4 cross-env: ^5.1.1 @@ -73,7 +73,7 @@ devDependencies: babel-jest: 27.4.5_@babel+core@7.16.5 babel-loader: 8.2.3_@babel+core@7.16.5 browserslist: 4.19.1 - chart.js: 2.9.4 + chart.js: 3.7.1 clean-publish: 4.0.0 commitizen: 4.2.4 cross-env: 5.2.1 @@ -8164,24 +8164,8 @@ packages: resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==} dev: true - /chart.js/2.9.4: - resolution: {integrity: sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==} - dependencies: - chartjs-color: 2.4.1 - moment: 2.29.1 - dev: true - - /chartjs-color-string/0.6.0: - resolution: {integrity: sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==} - dependencies: - color-name: 1.1.4 - dev: true - - /chartjs-color/2.4.1: - resolution: {integrity: sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==} - dependencies: - chartjs-color-string: 0.6.0 - color-convert: 1.9.3 + /chart.js/3.7.1: + resolution: {integrity: sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==} dev: true /chokidar/2.1.8: @@ -14691,6 +14675,7 @@ packages: /moment/2.29.1: resolution: {integrity: sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==} + dev: false /moo-color/1.0.2: resolution: {integrity: sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==} From 848393d7f26b9756779cd7a2a6f2a6ad4f84c714 Mon Sep 17 00:00:00 2001 From: "v.terekhov" Date: Wed, 16 Feb 2022 17:23:17 +0400 Subject: [PATCH 02/11] chore: change generate chart actions --- src/BaseCharts.js | 161 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 135 insertions(+), 26 deletions(-) diff --git a/src/BaseCharts.js b/src/BaseCharts.js index 2bc8126d..a0e926f6 100644 --- a/src/BaseCharts.js +++ b/src/BaseCharts.js @@ -1,6 +1,33 @@ -import Chart from 'chart.js' +import { + Chart, + ArcElement, + BarElement, + LineElement, + BarController, + PointElement, + BubbleController, + DoughnutController, + LineController, + PieController, + PolarAreaController, + RadarController, + ScatterController, + LinearScale, + CategoryScale, + RadialLinearScale, + Title, + Tooltip, + Legend +} from 'chart.js' -export function generateChart(chartId, chartType) { +export function generateChart( + chartId, + chartType, + chartElements, + chartController, + chartScales, + defaultOptions +) { return { render: function (createElement) { return createElement( @@ -49,34 +76,56 @@ export function generateChart(chartId, chartType) { } } }, - data() { return { - _chart: null, - _plugins: this.plugins + _chart: null } }, - + created() { + Chart.register( + ...chartElements, + chartController, + ...chartScales, + Title, + Tooltip, + Legend + ) + }, methods: { - addPlugin(plugin) { - this.$data._plugins.push(plugin) - }, - generateLegend() { + renderChart(data, options) { if (this.$data._chart) { - return this.$data._chart.generateLegend() + this.$data._chart.destroy() } - }, - renderChart(data, options) { - if (this.$data._chart) this.$data._chart.destroy() - if (!this.$refs.canvas) + + if (!this.$refs.canvas) { throw new Error( 'Please remove the tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components' ) + } + + const chartOptions = options + + if ( + typeof defaultOptions !== 'undefined' && + defaultOptions.length > 0 + ) { + for (const defaultOption of defaultOptions) { + for (const defaultOptionKey of Object.keys(defaultOption)) { + chartOptions[defaultOptionKey] = defaultOption[defaultOptionKey] + } + } + } + + if (this.plugins.length > 0) { + for (const plugin of this.plugins) { + chartOptions['plugins'] = { ...chartOptions.plugins, ...plugin } + } + } + this.$data._chart = new Chart(this.$refs.canvas.getContext('2d'), { type: chartType, data: data, - options: options, - plugins: this.$data._plugins + options: chartOptions }) } }, @@ -88,18 +137,78 @@ export function generateChart(chartId, chartType) { } } -export const Bar = generateChart('bar-chart', 'bar') +export const Bar = generateChart( + 'bar-chart', + 'bar', + [BarElement], + BarController, + [LinearScale, CategoryScale] +) + export const HorizontalBar = generateChart( 'horizontalbar-chart', - 'horizontalBar' + 'bar', + [BarElement], + BarController, + [CategoryScale], + [{ indexAxis: 'y' }] +) + +export const Doughnut = generateChart( + 'doughnut-chart', + 'doughnut', + [ArcElement], + DoughnutController, + [CategoryScale] +) + +export const Line = generateChart( + 'line-chart', + 'line', + [LineElement], + LineController, + [LinearScale] +) + +export const Pie = generateChart( + 'pie-chart', + 'pie', + [ArcElement], + PieController, + [CategoryScale] +) + +export const PolarArea = generateChart( + 'polar-chart', + 'polarArea', + [ArcElement], + PolarAreaController, + [RadialLinearScale] +) + +export const Radar = generateChart( + 'radar-chart', + 'radar', + [PointElement], + RadarController, + [RadialLinearScale] +) + +export const Bubble = generateChart( + 'bubble-chart', + 'bubble', + [PointElement], + BubbleController, + [LinearScale] +) + +export const Scatter = generateChart( + 'scatter-chart', + 'scatter', + [LineElement], + ScatterController, + [CategoryScale] ) -export const Doughnut = generateChart('doughnut-chart', 'doughnut') -export const Line = generateChart('line-chart', 'line') -export const Pie = generateChart('pie-chart', 'pie') -export const PolarArea = generateChart('polar-chart', 'polarArea') -export const Radar = generateChart('radar-chart', 'radar') -export const Bubble = generateChart('bubble-chart', 'bubble') -export const Scatter = generateChart('scatter-chart', 'scatter') export default { Bar, From f76ce6f72ddfa10e9b89b695abc4aeee240ed7ed Mon Sep 17 00:00:00 2001 From: "v.terekhov" Date: Wed, 16 Feb 2022 17:23:59 +0400 Subject: [PATCH 03/11] chore: change custom chart example --- .../custom/src/components/customChart.vue | 25 +++++++++++++------ test/examples/CustomChart.vue | 25 +++++++++++++------ 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/sandboxes/custom/src/components/customChart.vue b/sandboxes/custom/src/components/customChart.vue index ddc760c4..1eed1cc5 100644 --- a/sandboxes/custom/src/components/customChart.vue +++ b/sandboxes/custom/src/components/customChart.vue @@ -4,13 +4,18 @@ #in an empty template and unexpected errors. diff --git a/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue b/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue deleted file mode 100644 index 688d762a..00000000 --- a/sandboxes/horizontal-bar/src/components/horizontalBarChart.vue +++ /dev/null @@ -1,56 +0,0 @@ -#Do not include the template tag in your .vue single-file components. Vue can -#not merge templates. If you add an empty template tag, Vue will take the -#template from your component and not from the extended one, which will result -#in an empty template and unexpected errors. - - diff --git a/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue b/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue deleted file mode 100644 index ff60685e..00000000 --- a/sandboxes/horizontal-bar/src/components/horizontalBarPage.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - diff --git a/src/BaseCharts.js b/src/BaseCharts.js index 7ff494cb..7164ed18 100644 --- a/src/BaseCharts.js +++ b/src/BaseCharts.js @@ -10,12 +10,7 @@ import { ScatterController } from 'chart.js' -export function generateChart( - chartId, - chartType, - chartController, - defaultOptions -) { +export function generateChart(chartId, chartType, chartController) { return { render: function (createElement) { return createElement( @@ -86,17 +81,6 @@ export function generateChart( const chartOptions = options - if ( - typeof defaultOptions !== 'undefined' && - defaultOptions.length > 0 - ) { - for (const defaultOption of defaultOptions) { - for (const defaultOptionKey of Object.keys(defaultOption)) { - chartOptions[defaultOptionKey] = defaultOption[defaultOptionKey] - } - } - } - if (this.plugins.length > 0) { for (const plugin of this.plugins) { chartOptions['plugins'] = { ...chartOptions.plugins, ...plugin } @@ -124,13 +108,6 @@ export const Bar = /* #__PURE__ */ generateChart( BarController ) -export const HorizontalBar = /* #__PURE__ */ generateChart( - 'horizontalbar-chart', - 'bar', - BarController, - [{ indexAxis: 'y' }] -) - export const Doughnut = /* #__PURE__ */ generateChart( 'doughnut-chart', 'doughnut', @@ -175,7 +152,6 @@ export const Scatter = /* #__PURE__ */ generateChart( export default { Bar, - HorizontalBar, Doughnut, Line, Pie, diff --git a/src/index.js b/src/index.js index ad5f2af7..73bc7c8a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import mixins from './mixins/index.js' import { Bar, - HorizontalBar, Doughnut, Line, Pie, @@ -15,7 +14,6 @@ import { const VueCharts = { Bar, - HorizontalBar, Doughnut, Line, Pie, @@ -36,7 +34,6 @@ export default VueCharts export { VueCharts, Bar, - HorizontalBar, Doughnut, Line, Pie, diff --git a/stories/horizontalBar.stories.js b/stories/horizontalBar.stories.js deleted file mode 100644 index 64f72db1..00000000 --- a/stories/horizontalBar.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import HorizontalBarChart from '../sandboxes/horizontal-bar/src/components/horizontalBarChart.vue' - -export default { - title: 'HorizontalBarChart', - component: HorizontalBarChart, - parameters: { - layout: 'centered' - } -} - -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { HorizontalBarChart }, - template: '' -}) - -export const DefaultHorizontalBar = Template.bind({}) - -DefaultHorizontalBar.args = { - chartId: 'horizontal-bar-chart', - width: 400, - height: 400, - plugins: [] -} diff --git a/test/HorizontalBar.spec.js b/test/HorizontalBar.spec.js deleted file mode 100644 index cf8a9d26..00000000 --- a/test/HorizontalBar.spec.js +++ /dev/null @@ -1,62 +0,0 @@ -import { mount } from '@vue/test-utils' -import HorizontalBarChart from './examples/HorizontalBarChart.vue' - -describe('HorizontalBarChart', () => { - const Component = { - template: - '
', - components: { HorizontalBarChart }, - props: ['chartId', 'plugins'] - } - - it('should render a canvas', () => { - const wrapper = mount(Component) - - const horizontalBarChartEl = wrapper.find('#horizontalbar-chart') - expect(horizontalBarChartEl.element.id).not.toBe('undefined') - expect(horizontalBarChartEl.exists()).toBe(true) - - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) - }) - - it('should change id based on prop', () => { - const wrapper = mount(Component, { - propsData: { chartId: 'horizontalbarchartprop' } - }) - - const horizontalBarChartEl = wrapper.find('#horizontalbarchartprop') - expect(horizontalBarChartEl.element.id).not.toBe('undefined') - expect(horizontalBarChartEl.exists()).toBe(true) - }) - - it('should destroy chart instance', done => { - const wrapper = mount(Component) - const { vm } = wrapper - - expect(vm.$children[0].$data._chart.ctx).not.toBe(null) - - vm.$destroy() - - vm.$nextTick(() => { - vm.$forceUpdate() - expect(vm.$children[0].$data._chart.ctx).toBe(null) - done() - }) - }) - - it('should add inline plugins based on prop', () => { - const testPlugin = { - title: { - display: true - } - } - - const wrapper = mount(Component, { - propsData: { plugins: [testPlugin] } - }) - const { vm } = wrapper - - expect(Object.keys(vm.$children[0].$data.options.plugins).length).toEqual(1) - }) -}) diff --git a/test/examples/HorizontalBarChart.vue b/test/examples/HorizontalBarChart.vue deleted file mode 100644 index b330da76..00000000 --- a/test/examples/HorizontalBarChart.vue +++ /dev/null @@ -1,51 +0,0 @@ - From f51c9954ef89f6c29e9328da12e43070156ebcfc Mon Sep 17 00:00:00 2001 From: "v.terekhov" Date: Fri, 18 Feb 2022 17:02:41 +0400 Subject: [PATCH 10/11] refactor: add check size github action --- .github/workflows/checks.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/checks.yml diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 00000000..9cb2578f --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,31 @@ +name: Checks +on: + pull_request: + branches: + - main +jobs: + size: + runs-on: ubuntu-latest + name: Checking size + if: "!contains(github.event.head_commit.message, '[ci skip]')" + env: + CI_JOB_NUMBER: 1 + steps: + - name: Checkout the repository + uses: actions/checkout@v2 + - name: Install pnpm + uses: pnpm/action-setup@v2.0.1 + with: + version: 6 + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 16 + cache: 'pnpm' + - name: Install dependencies + run: pnpm install + - name: Check size + uses: andresz1/size-limit-action@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + skip_step: install From ceec67b403ced2a8633cdf2403f67524dd2d4a0f Mon Sep 17 00:00:00 2001 From: "v.terekhov" Date: Mon, 21 Feb 2022 12:12:38 +0400 Subject: [PATCH 11/11] fix: check size limit actionn branch --- .github/workflows/checks.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 9cb2578f..c844df07 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -22,10 +22,7 @@ jobs: with: node-version: 16 cache: 'pnpm' - - name: Install dependencies - run: pnpm install - name: Check size - uses: andresz1/size-limit-action@v1 + uses: andresz1/size-limit-action@master with: github_token: ${{ secrets.GITHUB_TOKEN }} - skip_step: install