@bildvitta/quasar-ui-asteroid 3.11.0-beta.3 → 3.11.0-beta.4

package/package.json

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

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

@@ -0,0 +1,383 @@
+<template>
+  <qas-header-actions v-if="hasHeaderActions" align-columns="end">
+    <template #left>
+      <div v-if="title" class="text-grey-9 text-h3">
+        {{ title }}
+      </div>
+
+      <div v-if="subtitle" class="text-body1 text-grey-8">
+        {{ subtitle }}
+      </div>
+    </template>
+
+    <template #right>
+      <qas-filters v-bind="chartFiltersProps" v-model:currentFilters="filters" />
+    </template>
+  </qas-header-actions>
+
+  <div v-bind="parentComponentProps">
+    <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
+
+    <div v-else-if="!isFetching">
+      <slot name="empty-results">
+        <qas-empty-result-text />
+      </slot>
+    </div>
+
+    <q-inner-loading :showing="isFetching">
+      <q-spinner color="grey" size="3em" />
+    </q-inner-loading>
+  </div>
+</template>
+
+<script>
+// Importações do chart.js
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement
+} from 'chart.js'
+import { Bar as BarChart, Doughnut as DoughnutChart, Line as LineChart } from 'vue-chartjs'
+
+// Configurações padrões
+import { charts, colors, font } from './config'
+
+// Plugins
+import zoomPlugin from 'chartjs-plugin-zoom'
+import chartDataLabels from 'chartjs-plugin-datalabels'
+
+// Outras importações
+import { extend } from 'quasar'
+import { filterListByHandle } from '../../helpers'
+import { getAction } from '@bildvitta/store-adapter'
+
+const ChartTypes = {
+  Bar: 'bar',
+  Doughnut: 'doughnut',
+  Line: 'line'
+}
+
+export default {
+  name: 'QasChartView',
+
+  components: {
+    BarChart,
+    DoughnutChart,
+    LineChart
+  },
+
+  props: {
+    entity: {
+      required: true,
+      type: String
+    },
+
+    fetching: {
+      type: Boolean
+    },
+
+    filtersProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    height: {
+      default: '380px',
+      type: String
+    },
+
+    maxDoughnutSlices: {
+      default: 15,
+      type: Number
+    },
+
+    options: {
+      default: () => ({}),
+      type: Object
+    },
+
+    subtitle: {
+      default: '',
+      type: String
+    },
+
+    title: {
+      default: '',
+      type: String
+    },
+
+    type: {
+      default: ChartTypes.Bar,
+      type: String,
+      validator: value => Object.values(ChartTypes).includes(value)
+    },
+
+    url: {
+      default: '',
+      type: String
+    },
+
+    useFilterButton: {
+      type: Boolean
+    }
+  },
+
+  emits: [
+    'fetch-error',
+    'fetch-success',
+    'update:fetching'
+  ],
+
+  data () {
+    return {
+      data: [],
+      filters: {},
+      isFetched: false,
+      isFetching: false
+    }
+  },
+
+  computed: {
+    chartData () {
+      if (!this.data.length) {
+        return {
+          labels: [],
+          datasets: []
+        }
+      }
+
+      const [dataset] = this.data
+      const labels = this.getXAxisData(dataset.data.map(item => item.x))
+
+      const datasets = this.data.map(({ label, data }, index) => {
+        const backgroundColor = this.isDoughnut ? colors : colors.at(index)
+        const borderColor = this.isDoughnut ? 'white' : colors.at(index)
+        const yAxisData = []
+        const xAxisData = []
+
+        for (const dataKey in data) {
+          const item = data[dataKey]
+
+          if (item) {
+            yAxisData.push(item.y)
+            xAxisData.push(item.tooltip)
+          }
+        }
+
+        return {
+          backgroundColor,
+          borderColor,
+          data: this.getYAxisData(yAxisData),
+          label,
+          tooltips: this.getXAxisData(xAxisData)
+        }
+      })
+
+      return {
+        datasets,
+        labels
+      }
+    },
+
+    chartFiltersProps () {
+      const { entity, useFilterButton, url } = this
+
+      return {
+        class: 'q-mb-xs',
+        entity,
+        url,
+        useChip: false,
+        useFilterButton,
+        useSearch: false,
+        useSpacing: false,
+        useUpdateRoute: false,
+
+        ...this.filtersProps
+      }
+    },
+
+    chartOptions () {
+      const { options, type } = this
+
+      return extend(true, charts[type], options)
+    },
+
+    chartPlugins () {
+      return filterListByHandle([
+        {
+          handle: this.isDoughnut,
+          item: chartDataLabels
+        },
+        {
+          handle: this.isBar || this.isLine,
+          item: zoomPlugin
+        }
+      ])
+    },
+
+    chartType () {
+      const components = {
+        bar: 'BarChart',
+        doughnut: 'DoughnutChart',
+        line: 'LineChart'
+      }
+
+      return components[this.type]
+    },
+
+    chartComponent () {
+      return {
+        is: this.chartType,
+        props: {
+          data: this.chartData,
+          options: this.chartOptions,
+          plugins: this.chartPlugins
+        }
+      }
+    },
+
+    parentComponentProps () {
+      return {
+        class: 'relative-position',
+        style: `min-height: ${this.height}`
+      }
+    },
+
+    hasDataSets () {
+      return !!this.chartData?.datasets.filter(dataset => dataset.data.length)?.length
+    },
+
+    hasHeaderActions () {
+      return this.title || this.subtitle || this.useFilterButton
+    },
+
+    isBar () {
+      return this.type === 'bar'
+    },
+
+    isDoughnut () {
+      return this.type === 'doughnut'
+    },
+
+    isLine () {
+      return this.type === 'line'
+    },
+
+    showChart () {
+      return this.isFetched && this.hasDataSets
+    },
+
+    defaultChartItems () {
+      return [
+        CategoryScale,
+        LinearScale,
+        PointElement,
+        Title,
+        Tooltip,
+        Legend
+      ]
+    },
+
+    elementsChartItems () {
+      return {
+        bar: [BarElement],
+        doughnut: [ArcElement],
+        line: [LineElement]
+      }
+    }
+  },
+
+  watch: {
+    filters () {
+      this.fetchData()
+    },
+
+    isFetching (value) {
+      this.$emit('update:fetching', value)
+    }
+  },
+
+  created () {
+    this.registerChartJS()
+    this.fetchData()
+  },
+
+  unmounted () {
+    this.unregisterChartJS()
+  },
+
+  methods: {
+    async fetchData () {
+      try {
+        this.isFetching = true
+
+        const response = await getAction.call(this, {
+          entity: this.entity,
+          key: 'fetchList',
+          payload: {
+            url: this.url,
+            filters: this.filters
+          }
+        })
+
+        const { results } = response.data
+        this.data = results
+
+        this.$emit('fetch-success', response)
+      } catch (error) {
+        this.$qas.error('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
+
+        this.$emit('fetch-error', error)
+      } finally {
+        this.isFetching = false
+        this.isFetched = true
+      }
+    },
+
+    getXAxisData (data = []) {
+      if (this.isDoughnut && data.length > this.maxDoughnutSlices) {
+        data = data.slice(0, this.maxDoughnutSlices - 1)
+        data.push('Outros')
+      }
+
+      return data
+    },
+
+    getYAxisData (data = []) {
+      if (this.isDoughnut && data.length > this.maxDoughnutSlices) {
+        const otherSlicesValues = data
+          .slice(this.maxDoughnutSlices - 1)
+          .reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+
+        data = data.slice(0, this.maxDoughnutSlices - 1)
+        data.push(otherSlicesValues)
+      }
+
+      return data
+    },
+
+    registerChartJS () {
+      ChartJS.register(
+        ...this.defaultChartItems,
+        ...this.elementsChartItems[this.type]
+      )
+
+      ChartJS.defaults.font = font
+    },
+
+    unregisterChartJS () {
+      ChartJS.unregister(
+        ...this.defaultChartItems,
+        ...this.elementsChartItems[this.type]
+      )
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,87 @@
+type: component
+
+meta:
+  desc: Componente responsável pela renderização de gráficos
+
+props:
+  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
+    type: String
+
+  fetching:
+    model: true
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
+
+  filters-props:
+    desc: Repassa as props para o componente "QasFilters".
+    default: {}
+    type: Object
+
+  height:
+    desc: Define a altura do gráfico.
+    default: 380px
+    type: String
+
+  max-doughnut-slices:
+    desc: Define o máximo de fatias que o gráfico de Doughnut poderá ter. Passando o número máximo definido, o gráfico irá exibir uma fatia chamada "Outros".
+    default: 15
+    type: Number
+
+  options:
+    desc: Opções do chart.js que serão mescladas com as opções padrões pré definidas.
+    default: {}
+    type: Object
+
+  subtitle:
+    desc: Define um subtítulo para o gráfico.
+    type: String
+
+  title:
+    desc: Define um título para o gráfico.
+    type: String
+
+  type:
+    desc: Tipo de exibição do gráfico.
+    default: bar
+    type: String
+    examples: [bar, doughnut, line]
+
+  url:
+    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: String
+
+  use-filter-button:
+    desc: Controla se o componente vai usar ou não o componente "QasFilters".
+    type: Boolean
+
+slots:
+  default:
+    desc: 'Slot para ter o conteúdo principal (dentro do main).'
+
+  empty-results:
+    desc: 'Slot acessar quando a listagem está vazia.'
+
+events:
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchList" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchList" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@update:fetching -> function(value)':
+    desc: Dispara logo antes da action "fetchList" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
+    params:
+      value:
+        desc: Retorna se está ou não fazendo fetching de dados.
+        type: Boolean

package/src/components/chart-view/config/charts/bar.js

@@ -0,0 +1,45 @@
+import { textColor } from '../defaults'
+import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
+
+export const bar = {
+  barPercentage: 0.7,
+  borderSkipped: true,
+  borderWidth: 2,
+  color: textColor,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: legendPluginConfig,
+    tooltip: tooltipPluginConfig,
+    zoom: zoomPluginConfig
+  },
+  responsive: true,
+  scales: {
+    x: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        display: false
+      },
+
+      ticks: {
+        padding: 8
+      }
+    },
+
+    y: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        display: false
+      },
+
+      ticks: {
+        stepSize: 1
+      }
+    }
+  }
+}

package/src/components/chart-view/config/charts/doughnut.js

@@ -0,0 +1,43 @@
+import { tooltipPluginConfig } from '../plugins'
+import { percent } from '../../../../helpers'
+
+function getPercentFormat (value, context) {
+  const total = context.dataset.data.reduce((accumulator, currentValue, index) => {
+    if (context.chart._hiddenIndices?.[index]) return accumulator
+
+    return accumulator + currentValue
+  }, 0)
+
+  const percentage = (value * 100) / total
+  const places = percentage % 1 ? 2 : 0
+
+  return percentage >= 5 ? percent(percentage, places) : ''
+}
+
+export const doughnut = {
+  borderSkipped: true,
+  borderWidth: 1,
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    datalabels: {
+      color: 'white',
+      font: {
+        weight: 600
+      },
+      formatter: getPercentFormat
+    },
+
+    legend: {
+      align: 'center',
+      labels: {
+        padding: 16,
+        pointStyle: 'circle',
+        usePointStyle: true
+      },
+      position: 'bottom'
+    },
+
+    tooltip: tooltipPluginConfig
+  }
+}

package/src/components/chart-view/config/charts/index.js

@@ -0,0 +1,9 @@
+import { bar } from './bar'
+import { doughnut } from './doughnut'
+import { line } from './line'
+
+export default {
+  bar,
+  doughnut,
+  line
+}

package/src/components/chart-view/config/charts/line.js

@@ -0,0 +1,57 @@
+import { textColor } from '../defaults'
+import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
+
+export const line = {
+  borderSkipped: true,
+  borderWidth: 2,
+  color: textColor,
+  maintainAspectRatio: false,
+  pointStyle: false,
+  responsive: true,
+
+  layout: {
+    padding: {
+      left: -24
+    }
+  },
+
+  plugins: {
+    legend: legendPluginConfig,
+    tooltip: tooltipPluginConfig,
+    zoom: zoomPluginConfig
+  },
+
+  scales: {
+    x: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        color: '#E0E0E0'
+      },
+
+      ticks: {
+        padding: 8
+      }
+    },
+
+    y: {
+      beginAtZero: true,
+      offset: true,
+
+      border: {
+        display: false
+      },
+
+      grid: {
+        color: '#E0E0E0'
+      },
+
+      ticks: {
+        padding: 24,
+        stepSize: 1
+      }
+    }
+  }
+}

package/src/components/chart-view/config/defaults/colors.js

@@ -0,0 +1,19 @@
+export const colors = [
+  '#1976D2',
+  '#90CAF9',
+  '#2962FF',
+  '#004198',
+  '#00C853',
+  '#651FFF',
+  '#26C6DA',
+  '#1976D2',
+  '#2196F3',
+  '#536DFE',
+  '#26A69A',
+  '#3F51B5',
+  '#43A047',
+  '#7E57C2',
+  '#8BC34A'
+]
+
+export const textColor = '#616161'

package/src/components/chart-view/config/defaults/font.js

@@ -0,0 +1,5 @@
+export const font = {
+  family: 'Nunito',
+  size: 12,
+  weight: '600'
+}

package/src/components/chart-view/config/defaults/index.js

@@ -0,0 +1,2 @@
+export * from './colors'
+export * from './font'

package/src/components/chart-view/config/index.js

@@ -0,0 +1,3 @@
+export { default as charts } from './charts'
+export * from './defaults'
+export * from './plugins'

package/src/components/chart-view/config/plugins/index.js

@@ -0,0 +1,3 @@
+export * from './legend'
+export * from './tooltip'
+export * from './zoom'

package/src/components/chart-view/config/plugins/legend.js

@@ -0,0 +1,9 @@
+export const legendPluginConfig = {
+  labels: {
+    boxHeight: 4,
+    boxWidth: 16,
+    padding: 24
+  },
+
+  position: 'bottom'
+}

package/src/components/chart-view/config/plugins/tooltip.js

@@ -0,0 +1,15 @@
+export const tooltipPluginConfig = {
+  backgroundColor: '#212121',
+  boxPadding: 4,
+  callbacks: {
+    title: function (items) {
+      return items.map(item => item.dataset.tooltips[item.dataIndex] || item.label)
+    }
+  },
+  caretSize: 0,
+  cornerRadius: 4,
+  displayColors: false,
+  padding: 12,
+  titleColor: '#fff',
+  titleMarginBottom: 8
+}