Merge pull request #1037 from Sysvale/bugfix/charts-scale

Bugfix/charts scale

Author: ezequias21

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.151.1",
+	"version": "3.151.2",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/BarChart.vue

@@ -1,11 +1,10 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
 	<span>
 		<div
 			class="responsive-container"
 		>
 			<Bar
-				:is="'bar'"
+				is="bar"
 				:data="localChartData"
 				:options="chartOptions"
 			/>
@@ -64,15 +63,15 @@ export default {
 		 */
 		barWidth: {
 			type: Number,
-			default: 1,
+			default: 5,
 		},
 
 		/**
 		 * Prop para exibir as barras na direção do eixo x
 		 */
 		horizontalBar: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 
@@ -87,6 +86,22 @@ export default {
 				responsive: true,
 				maintainAspectRatio: false, // NOTE: Caso true manterá aspecto de proporção original, caso false, será dimensionado para preencher completamente o contêiner (Isso pode fazer com que o gráfico pareça distorcido se o container tiver proporção de aspecto diferente do gráfico original)
 				categoryPercentage: null, //NOTE: Configura a porcentagem ocupada pela barra do gráfico. (0-1)
+				indexAxis: this.horizontalBar ? 'y' : 'x',
+				scales: this.horizontalBar
+					? {
+						x: { beginAtZero: true },
+					}
+					: {
+						y: {
+							beginAtZero: true,
+							grace: '5%',
+							ticks: {
+								precision: 0
+							},
+							categoryPercentage: 0.6,
+							barPercentage: 0.8
+						},
+					},
 				plugins: {
 					tooltip: {
 						callbacks: {
@@ -116,7 +131,7 @@ export default {
 		},
 
 		variant: {
-			handler(newValue) {
+			handler(newValue, oldValue) {
 				if (newValue === 'gray' || newValue === 'dark')  {
 					this.deleteFirstTwoColors = true;
 				} else {
@@ -144,20 +159,6 @@ export default {
 			immediate: true,
 		},
 	},
-	
-	mounted() {
-		if(this.horizontalBar) {
-			this.chartOptions = {
-				...this.chartOptions,
-				indexAxis: 'y',
-				scales: {
-					y: {
-						beginAtZero: true
-					}
-				},
-			};
-		}
-	},
 
 	methods: {
 		paleteBuilder,

src/components/LineChart.vue

@@ -185,6 +185,11 @@ export default {
 					y: {
 						suggestedMin: this.yAxisRange[0],
 						suggestedMax: this.yAxisRange[1],
+						beginAtZero: true,
+						grace: '10%',
+						ticks: {
+							precision: 0
+						},
 						display: true,
 						title: {
 							display: true,

src/components/StackedBarChart.vue

@@ -5,7 +5,7 @@
 			class="responsive-container"
 		>
 			<Bar
-				:is="'bar'"
+				is="bar"
 				:data="localChartData"
 				:options="chartOptions"
 				:plugins="plugins"
@@ -107,6 +107,11 @@ export default {
 					},
 					y: {
 						stacked: true,
+						beginAtZero: true,
+						grace: '10%',
+						ticks: {
+							precision: 0
+						},
 						grid: {
 							color: '#DFE5EC',
 						},