Fix chart reactivity in documentation

docs/components/charts/pie-chart.md

@@ -48,7 +48,7 @@ Um componente de gráfico reutilizável para exibir dados visualmente.
 ## Props
 
 <APITable
-	name="CdsBarChart"
+	name="CdsPieChart"
 	section="props"
 />
 <br>

docs/components/charts/polar-area-chart.md

@@ -43,7 +43,7 @@ Um componente de gráfico reutilizável para exibir dados visualmente.
 ## Props
 
 <APITable
-	name="CdsBarChart"
+	name="CdsPolarAreaChart"
 	section="props"
 />
 <br>

docs/docgen/PlaygroundBuilder.vue

@@ -97,7 +97,7 @@
 						<CdsText class="prop-name">
 							{{ capitalize(data.name) }}
 						</CdsText>
-		
+
 						<CdsSwitch
 							v-if="Object.keys(normalizedPropsData).length > 0"
 							v-model="normalizedPropsData[index][data.name]"
@@ -144,7 +144,7 @@ function formatOptions(val: string[]) {
 	})
 }
 
-watch(model, () => {
+watch(propsData, () => {
 	nextTick(() => {
 		if (!propsData.value || !Array.isArray(propsData.value)) {
 			normalizedPropsData.value = [];
@@ -195,7 +195,7 @@ watch(model, () => {
 		}
 	});
 
-}, { immediate: true, deep: true})
+}, { immediate: true, deep: true })
 
 function capitalize(str: string) {
 	return str ? str[0].toUpperCase() + str.slice(1) : '';
@@ -205,12 +205,12 @@ watch(normalizedPropsData, () => {
 	if (normalizedPropsData.value && Array.isArray(normalizedPropsData.value)) {
 		normalizedPropsData.value.forEach((item) => {
 			const [key, value] = Object.entries(item)[0];
-			if (model.value) {
+			if (model.value && model.value !== value) {
 				(model.value as any)[key] = value;
 			}
 		});
 	}
-}, { deep: true})
+}, { deep: true })
 
 
 export type PlaygroundBuilderType = typeof import('./PlaygroundBuilder.vue')['default'];

src/components/BarChart.vue

@@ -125,18 +125,21 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
-			handler(newValue, oldValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+			handler(newValue) {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -150,11 +153,38 @@ export default {
 
 		barWidth: {
 			handler(newValue) {
-				if (newValue >= 0.1 && newValue <= 1) {
-					this.chartOptions.categoryPercentage = newValue;
-				} else {
-					this.chartOptions.categoryPercentage = 1;
-				}
+				const categoryPercentage = (newValue >= 0.1 && newValue <= 1) ? newValue : 1;
+				this.chartOptions = {
+					...this.chartOptions,
+					categoryPercentage,
+				};
+			},
+			immediate: true,
+		},
+
+		horizontalBar: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					indexAxis: newValue ? 'y' : 'x',
+					scales: {
+						...this.chartOptions.scales,
+						x: newValue
+							? { beginAtZero: true }
+							: { ...this.chartOptions.scales?.x },
+						y: !newValue
+							? {
+								beginAtZero: true,
+								grace: '5%',
+								ticks: {
+									precision: 0
+								},
+								categoryPercentage: 0.6,
+								barPercentage: 0.8
+							}
+							: { ...this.chartOptions.scales?.y },
+					},
+				};
 			},
 			immediate: true,
 		},

src/components/DonutChart.vue

@@ -135,17 +135,34 @@ export default {
 		labels: {
 			handler(newValue) {
 				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		colors: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},

src/components/LineChart.vue

@@ -232,18 +232,28 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -255,11 +265,116 @@ export default {
 			immediate: true,
 		},
 
+		showLabelName: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		fill: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					fill: newValue,
+				};
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
 		isDashed: {
+			handler() {
+				this.checkDashed();
+			},
+			immediate: true,
+		},
+
+		borderDash: {
+			handler() {
+				this.checkDashed();
+			},
+			immediate: true,
+		},
+
+		scales: {
 			handler(newValue) {
-				if (newValue === true) {
-					this.checkDashed();
-				}
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		animation: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					animation: {
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		plugins: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					plugins: {
+						...this.chartOptions.plugins,
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		xAxisRange: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						x: {
+							...this.chartOptions.scales?.x,
+							suggestedMin: newValue[0],
+							suggestedMax: newValue[1],
+						},
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		yAxisRange: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						y: {
+							...this.chartOptions.scales?.y,
+							suggestedMin: newValue[0],
+							suggestedMax: newValue[1],
+						},
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		smoothing: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					tension: newValue,
+				};
 			},
 			immediate: true,
 		},
@@ -373,7 +488,10 @@ export default {
 		},
 
 		checkDashed() {
-			this.chartOptions.borderDash = [this.borderDash[0], this.borderDash[1]];
+			this.chartOptions = {
+				...this.chartOptions,
+				borderDash: this.isDashed ? [this.borderDash[0], this.borderDash[1]] : [],
+			};
 		}
 	}
 }

src/components/PieChart.vue

@@ -136,17 +136,27 @@ export default {
 		labels: {
 			handler(newValue) {
 				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		colors: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},