Add chart support from ADempiere

src/api/ADempiere/dashboard/chart.js

@@ -0,0 +1,43 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// This file is for get all information for dashboard of ADempiere client,
+// please if you want to implement a custom dashboard create a new fielwith api definition
+// Get Instance for connection
+import { request } from '@/utils/ADempiere/request'
+import { camelizeObjectKeys } from '@/utils/ADempiere/transformObject.js'
+
+// Get Metrics for Charts
+export function getMetrics({
+  id,
+  uuid,
+  pageToken,
+  pageSize
+}) {
+  return request({
+    url: '/dashboard/addons/charts/metrics',
+    method: 'get',
+    params: {
+      id,
+      uuid,
+      // Page Data
+      pageToken,
+      pageSize
+    }
+  })
+    .then(chart => {
+      return camelizeObjectKeys(chart)
+    })
+}

src/components/ADempiere/Dashboard/charts/BarChart.vue

@@ -0,0 +1,141 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+import { getMetrics } from '@/api/ADempiere/dashboard/chart'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.unsubscribe = this.subscribeChanges()
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    subscribeChanges() {
+      return this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'notifyDashboardRefresh') {
+          this.initChart()
+        }
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      getMetrics({
+        id: this.metadata.id
+      })
+        .then(metrics => {
+          this.loadChartMetrics(metrics)
+        })
+        .catch(error => {
+          console.warn(`Error getting Metrics: ${error.message}. Code: ${error.code}.`)
+        })
+    },
+    loadChartMetrics(metrics) {
+      let xAxisValues = []
+      let seriesToShow = []
+      if (!this.isEmptyValue(metrics.series)) {
+        if (metrics.series.length > 0) {
+          metrics.series.forEach(serie => {
+            xAxisValues = xAxisValues.concat(serie.data_set.map(set => set.name))
+          })
+        }
+        seriesToShow = metrics.series.map(serie => {
+          return {
+            name: serie.name,
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: serie.data_set.map(set => set.value),
+            animationDuration
+          }
+        })
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: xAxisValues,
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: seriesToShow
+      })
+    }
+  }
+}
+</script>

src/components/ADempiere/Dashboard/charts/LineChart.vue

@@ -0,0 +1,167 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+import { getMetrics } from '@/api/ADempiere/dashboard/chart'
+
+const animationDuration = 2800
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.unsubscribe = this.subscribeChanges()
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    subscribeChanges() {
+      return this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'notifyDashboardRefresh') {
+          this.initChart()
+        }
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      getMetrics({
+        id: this.metadata.id
+      })
+        .then(metrics => {
+          this.loadChartMetrics(metrics)
+        })
+        .catch(error => {
+          console.warn(`Error getting Metrics: ${error.message}. Code: ${error.code}.`)
+        })
+    },
+    loadChartMetrics(metrics) {
+      let xAxisValues = []
+      let seriesToShow = []
+      let legendToShow = []
+      if (!this.isEmptyValue(metrics.series)) {
+        if (metrics.series.length > 0) {
+          metrics.series.forEach(serie => {
+            xAxisValues = xAxisValues.concat(serie.data_set.map(set => set.name))
+          })
+        }
+        seriesToShow = metrics.series.map(serie => {
+          return {
+            name: serie.name,
+            stack: 'vistors',
+            barWidth: '60%',
+            data: serie.data_set.map(set => set.value),
+            animationDuration,
+            smooth: true,
+            type: 'line',
+            animationEasing: 'quadraticOut',
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  width: 2
+                }
+              }
+            }
+          }
+        })
+        legendToShow = metrics.series.map(serie => serie.name)
+      }
+      this.chart.setOption({
+        xAxis: {
+          data: xAxisValues,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: legendToShow
+        },
+        series: seriesToShow
+      })
+    }
+  }
+}
+</script>