Fix - Reset mutable config in config watcher

graphieros · graphieros · commit 3287ada2011d · 2025-01-22T17:41:28.000+01:00
diff --git a/src/components/vue-ui-3d-bar.vue b/src/components/vue-ui-3d-bar.vue
@@ -100,6 +100,9 @@ watch(() => props.config, (_newCfg) => {
     prepareChart();
     titleStep.value += 1;
     tableStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -99,6 +99,10 @@ watch(() => props.config, (_newCfg) => {
     prepareChart();
     titleStep.value += 1;
     tableStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
@@ -127,6 +127,10 @@ watch(() => props.config, (_newCfg) => {
     slicerStep.value += 1;
     titleStep.value += 1;
     tableStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.tooltip.show;
 }, { deep: true });
 
 watch(() => props.dataset, (newDs) => {
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
@@ -92,6 +92,10 @@ function prepareConfig() {
 watch(() => props.config, (_newCfg) => {
     FINAL_CONFIG.value = prepareConfig();
     userOptionsVisible.value = !FINAL_CONFIG.value.showOnChartHover;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+
     prepareChart();
 }, { deep: true });
 
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
@@ -212,6 +212,9 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 watch(() => props.dataset, (_) => {
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -175,6 +175,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-dumbbell.vue b/src/components/vue-ui-dumbbell.vue
@@ -107,6 +107,9 @@ watch(() => props.config, (_newCfg) => {
     legendStep.value += 1;
     baseRowHeight.value = FINAL_CONFIG.value.style.chart.rowHeight;
     baseWidth.value = FINAL_CONFIG.value.style.chart.width;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 watch(() => props.dataset, (_) => {
diff --git a/src/components/vue-ui-flow.vue b/src/components/vue-ui-flow.vue
@@ -108,6 +108,9 @@ watch(() => props.config, (_newCfg) => {
     userOptionsVisible.value = !FINAL_CONFIG.value.showOnChartHover;
     prepareChart();
     titleStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-funnel.vue b/src/components/vue-ui-funnel.vue
@@ -170,6 +170,8 @@ watch(() => props.config, (_newCfg) => {
     fontSizes.value.names = FINAL_CONFIG.value.style.chart.bars.dataLabels.name.fontSize;
     fontSizes.value.values = FINAL_CONFIG.value.style.chart.bars.dataLabels.value.fontSize;
 
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue
@@ -129,6 +129,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
@@ -120,6 +120,10 @@ watch(() => props.config, (_newCfg) => {
     userOptionsVisible.value = !FINAL_CONFIG.value.showOnChartHover;
     prepareChart();
     titleStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.tooltip.show;
 }, { deep: true });
 
 watch(() => props.dataset, () => {
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue
@@ -266,6 +266,10 @@ watch(() => props.config, (_newCfg) => {
     sizes.value.xAxisName = FINAL_CONFIG.value.style.chart.axes.x.name.fontSize;
     sizes.value.yAxisLabels = FINAL_CONFIG.value.style.chart.axes.y.labels.fontSize;
     sizes.value.yAxisName = FINAL_CONFIG.value.style.chart.axes.y.name.fontSize;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -115,6 +115,10 @@ watch(() => props.config, (_newCfg) => {
     prepareChart();
     titleStep.value += 1;
     tableStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
@@ -107,6 +107,9 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue
@@ -116,6 +116,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
@@ -105,6 +105,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -119,6 +119,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.yAxis.labels.datapoints.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -112,6 +112,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.plotLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.plotLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
@@ -132,6 +132,9 @@ watch(() => props.config, (_newCfg) => {
     defaultSizes.value.height = FINAL_CONFIG.value.height;
     userOptionsVisible.value = !FINAL_CONFIG.value.showUserOptionsOnChartHover;
     prepareChart();
+
+    // Reset mutable config
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.showTooltip;
 }, { deep: true });
 
 watch(() => props.dataset, (_) => {
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -111,6 +111,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tootlip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
@@ -114,6 +114,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -111,6 +111,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue
@@ -163,6 +163,11 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+    
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.bars.dataLabels.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 watch(() => props.dataset, (_) => {
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
@@ -114,6 +114,11 @@ watch(() => props.config, (_newCfg) => {
     prepareChart();
     titleStep.value += 1;
     tableStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.labels.bestPlotLabel.show;
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue
@@ -122,6 +122,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
@@ -113,6 +113,11 @@ watch(() => props.config, (_newCfg) => {
     legendStep.value += 1;
     barHeight.value = FINAL_CONFIG.value.style.chart.layout.bars.height;
     barGap.value = FINAL_CONFIG.value.style.chart.layout.bars.gap;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.sortDesc = FINAL_CONFIG.value.style.chart.layout.bars.sort === "desc";
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 watch(() => props.dataset, recalculateHeight, { deep: true });
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
@@ -114,6 +114,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const resizeObserver = ref(null);
diff --git a/src/components/vue-ui-word-cloud.vue b/src/components/vue-ui-word-cloud.vue
@@ -107,6 +107,10 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     refreshSlicer();
+    
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 const chartSlicer = ref(null);
diff --git a/src/components/vue-ui-xy-canvas.vue b/src/components/vue-ui-xy-canvas.vue
@@ -20,6 +20,7 @@ import {
     downloadCsv,
     error,
     functionReturnsString,
+    hasDeepProperty,
     isFunction,
     lightenHexColor,
     largestTriangleThreeBucketsArray,
@@ -28,7 +29,6 @@ import {
     sanitizeArray,
     setOpacity,
     themePalettes,
-hasDeepProperty,
 } from "../lib";
 import { throttle } from "../canvas-lib";
 import {
@@ -182,6 +182,12 @@ watch(() => props.config, (_newCfg) => {
     titleStep.value += 1;
     tableStep.value += 1;
     legendStep.value += 1;
+    
+    // Reset mutable config
+    mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
+    mutableConfig.value.showDataLabels = FINAL_CONFIG.value.style.chart.dataLabels.show;
+    mutableConfig.value.stacked = FINAL_CONFIG.value.style.chart.stacked;
+    mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
 }, { deep: true });
 
 watch(() => props.dataset, () => {
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
@@ -1443,6 +1443,17 @@ export default {
                 this.prepareChart();
                 this.titleStep += 1;
                 this.tableStep += 1;
+
+                // Reset mutable config
+                this.mutableConfig = {
+                    dataLabels: {
+                        show: true,
+                    },
+                    showTooltip: this.FINAL_CONFIG.chart.tooltip.show === true,
+                    showTable: this.FINAL_CONFIG.showTable === true,
+                    isStacked: this.FINAL_CONFIG.chart.grid.labels.yAxis.stacked,
+                    useIndividualScale: this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale
+                }
             },
             deep: true
         }
