Fixed data array mutation bug

victorgarciaesgi · Mar 8, 2022 · 5e659ae · 5e659ae
1 parent f666f2b
commit 5e659ae
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/debug/vite/src/App.vue b/debug/vite/src/App.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="app" :style="{ width: '400px' }">
     <button @click="shuffleData">Shuffle</button>
-    <BarChart v-bind="barChartProps" class="test" />
+    <DoughnutChart v-bind="doughnutChartProps" />
   </div>
 </template>
 
 <script setup lang="tsx">
-import { Chart, registerables } from 'chart.js';
+import { Chart, ChartOptions, registerables } from 'chart.js';
 import type { ChartData } from 'chart.js';
-import { BarChart, useBarChart } from 'vue-chart-3';
-// import { BarChart, defineChartComponent, useBarChart } from '../../../dist';
+// import { BarChart, useBarChart } from 'vue-chart-3';
+import { DoughnutChart, defineChartComponent, useDoughnutChart } from '../../../dist';
 
 import { ref, computed } from 'vue';
 import { shuffle } from 'lodash-es';
@@ -19,7 +19,7 @@ Chart.register(...registerables);
 const data = ref([30, 40, 60, 70, 5]);
 const legendTop = ref(true);
 
-const options = computed(() => ({
+const options = computed<ChartOptions<'doughnut'>>(() => ({
   scales: {
     myScale: {
       type: 'logarithmic',
@@ -37,7 +37,7 @@ const options = computed(() => ({
   },
 }));
 
-const testData = computed<ChartData<'bar'>>(() => ({
+const testData = computed<ChartData<'doughnut'>>(() => ({
   labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
   datasets: [
     {
@@ -47,14 +47,17 @@ const testData = computed<ChartData<'bar'>>(() => ({
   ],
 }));
 
-const { barChartProps, barChartRef } = useBarChart({
+const { doughnutChartProps, doughnutChartRef } = useDoughnutChart({
   chartData: testData,
   options: options,
 });
 
+let index = 20;
+
 function shuffleData() {
-  data.value = shuffle(data.value);
-  console.log(barChartRef);
+  // dataValues.value = shuffle(dataValues.value);
+  data.value.pop();
+  console.log(doughnutChartRef.value?.chartInstance);
 }
 </script>
 

diff --git a/src/core/component.builder.ts b/src/core/component.builder.ts
@@ -132,7 +132,20 @@ export const defineChartComponent = <TType extends ChartType = ChartType>(
               handleLabelsUpdate();
             }
           } else {
-            chart.data.datasets = newData.datasets;
+            chart.data.datasets.forEach((val, index) => {
+              if (chart.data.datasets[index].data.length === newData.datasets[index].data.length) {
+                chart.data.datasets[index] = cloneDeep(newData.datasets[index]);
+              } else {
+                const baseData = chart.data.datasets[index].data;
+                const { data, ...rest } = newData.datasets[index];
+                chart.data.datasets[index].data.push(20);
+                if (baseData.length > data.length) {
+                  baseData.splice(data.length - 1, baseData.length - data.length);
+                } else {
+                  baseData.push(...data.slice(baseData.length - 1, data.length - baseData.length));
+                }
+              }
+            });
           }
 
           handleChartUpdate();
@@ -147,7 +160,7 @@ export const defineChartComponent = <TType extends ChartType = ChartType>(
       function renderChart() {
         if (canvasRef.value) {
           chartInstance.value = new Chartjs.Chart(canvasRef.value as HTMLCanvasElement, {
-            data: props.chartData,
+            data: cloneDeep(props.chartData),
             type: chartType,
             options: cloneDeep(props.options) as ChartOptions<TType>, // Types won't work with props type
             plugins: props.plugins,
@@ -175,8 +188,8 @@ export const defineChartComponent = <TType extends ChartType = ChartType>(
       function handleChartUpdate() {
         if (chartInstance.value) {
           chartInstance.value.update();
-          emit('chart:render', chartInstance.value);
-          props.onChartRender && props.onChartRender(chartInstance.value);
+          emit('chart:update', chartInstance.value);
+          props.onChartUpdate && props.onChartUpdate(chartInstance.value);
         }
       }