@bildvitta/quasar-ui-asteroid 3.15.0-beta.14 → 3.15.0-beta.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.15.0-beta.14",
+  "version": "3.15.0-beta.15",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/chart-view/QasChartView.vue

@@ -47,7 +47,7 @@ import {
 import { Bar as BarChart, Doughnut as DoughnutChart, Line as LineChart } from 'vue-chartjs'
 
 // Configurações padrões
-import { charts, colors, font } from './config'
+import { charts, colors as defaultColors, font } from './config'
 
 // Plugins
 import zoomPlugin from 'chartjs-plugin-zoom'
@@ -79,6 +79,11 @@ export default {
       type: Function
     },
 
+    colorsList: {
+      type: Array,
+      default: () => []
+    },
+
     entity: {
       required: true,
       type: String
@@ -161,6 +166,7 @@ export default {
 
       const [dataset] = this.data
       const labels = this.getXAxisData(dataset.data.map(item => item.x))
+      const colors = this.colorsList.length ? this.colorsList : defaultColors
 
       const datasets = this.data.map(({ label, data }, index) => {
         const backgroundColor = this.isDoughnut ? colors : colors.at(index)

package/src/components/chart-view/QasChartView.yml

@@ -10,6 +10,12 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  colors-list:
+    desc: Lista de cores personalizadas para utilizar nos gráficos
+    default: []
+    type: Array,
+    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true