Add chart support from ADempiere (#939)

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>

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

@@ -0,0 +1,132 @@
+<!--
+ 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: '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: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: serie.data_set.map(set => {
+              return {
+                value: set.value,
+                name: set.name
+              }
+            }),
+            animationEasing: 'cubicInOut',
+            animationDuration
+          }
+        })
+      }
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: xAxisValues
+        },
+        series: seriesToShow
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,160 @@
+<!--
+ 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 = 3000
+
+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 = []
+      let legendToShow = []
+      if (!this.isEmptyValue(metrics.series)) {
+        if (metrics.series.length > 0) {
+          metrics.series.forEach(serie => {
+            const maxValue = Math.max(serie.data_set.map(set => set.value))
+            xAxisValues = xAxisValues.concat(serie.data_set.map(set => {
+              return {
+                name: set.name,
+                max: maxValue
+              }
+            }))
+          })
+        }
+        seriesToShow = metrics.series.map(serie => {
+          return {
+            name: serie.name,
+            value: serie.data_set.map(set => set.value)
+          }
+        })
+        legendToShow = metrics.series.map(serie => serie.name)
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: xAxisValues
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: legendToShow
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: seriesToShow,
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/components/ADempiere/Dashboard/charts/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/components/ADempiere/Dashboard/index.vue

@@ -28,7 +28,7 @@
     >
       <template slot="title">
         <span class="custom-title">
-          {{ dashboard.dashboardName }}
+          {{ dashboard.name }}
         </span>
       </template>
       <component
@@ -63,21 +63,52 @@ export default {
       if (this.unsupportedDashboards.includes(this.metadata.fileName)) {
         return
       }
-
       let dashboard
-      switch (this.metadata.fileName) {
-        case 'recentItems':
-          dashboard = () => import('@/components/ADempiere/Dashboard/recentItems')
-          break
-        case 'userfavorites':
-          dashboard = () => import('@/components/ADempiere/Dashboard/userfavorites')
-          break
-        case 'docstatus':
-          dashboard = () => import('@/components/ADempiere/Dashboard/docstatus')
-          break
-        default:
-          dashboard = () => import('@/components/ADempiere/Dashboard/calendar')
-          break
+      if (this.metadata.dashboardType === 'dashboard') {
+        switch (this.metadata.fileName) {
+          case 'recentItems':
+            dashboard = () => import('@/components/ADempiere/Dashboard/recentItems')
+            break
+          case 'userfavorites':
+            dashboard = () => import('@/components/ADempiere/Dashboard/userfavorites')
+            break
+          case 'docstatus':
+            dashboard = () => import('@/components/ADempiere/Dashboard/docstatus')
+            break
+          default:
+            dashboard = () => import('@/components/ADempiere/Dashboard/calendar')
+            break
+        }
+      } else {
+        switch (this.metadata.chartType) {
+          //  Bar Chart
+          case 'BC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/BarChart')
+            break
+          //  Area Chart
+          case 'AC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/RaddarChart')
+            break
+          //  Line Chart
+          case 'LC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/LineChart')
+            break
+          //  Pie Chart
+          case 'PC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/PieChart')
+            break
+          //  Ring Chart
+          case 'RC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/PieChart')
+            break
+          //  Waterfall Chart
+          case 'WC':
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/RaddarChart')
+            break
+          default:
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/LineChart')
+            break
+        }
       }
       return dashboard
       // return () => import(`@/components/ADempiere/Dashboard/${this.metadata.fileName}`)

src/store/modules/ADempiere/dashboard.js

@@ -1,3 +1,20 @@
+// 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
 // Default store for handle dashboard refresh and other functionalities
 import { requestLisDashboards } from '@/api/ADempiere/dashboard/dashboard'
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'