Add support to Area chart and Waterfall chart (#946)

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

@@ -0,0 +1,183 @@
+<!--
+ 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',
+            data: serie.data_set.map(set => set.value),
+            animationDuration,
+            smooth: true,
+            large: true,
+            type: 'line',
+            animationEasing: 'quadraticOut',
+            lineStyle: {
+              width: 2
+            },
+            areaStyle: {}
+          }
+        })
+        legendToShow = metrics.series.map(serie => serie.name)
+      }
+      this.chart.setOption({
+        xAxis: {
+          data: xAxisValues,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          silent: false,
+          splitLine: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          }
+        },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
+        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/BarChart.vue

@@ -113,6 +113,18 @@ export default {
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
         grid: {
           top: 10,
           left: '2%',

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

@@ -118,14 +118,10 @@ export default {
             smooth: true,
             type: 'line',
             animationEasing: 'quadraticOut',
-            itemStyle: {
-              normal: {
             lineStyle: {
               width: 2
             }
           }
-            }
-          }
         })
         legendToShow = metrics.series.map(serie => serie.name)
       }
@@ -137,6 +133,18 @@ export default {
             show: false
           }
         },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
         grid: {
           left: 10,
           right: 10,

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

@@ -119,6 +119,18 @@ export default {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
         legend: {
           left: 'center',
           bottom: '10',

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

@@ -117,6 +117,18 @@ export default {
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
         radar: {
           radius: '66%',
           center: ['50%', '42%'],
@@ -142,13 +154,11 @@ export default {
           type: 'radar',
           symbolSize: 0,
           areaStyle: {
-            normal: {
             shadowBlur: 13,
             shadowColor: 'rgba(0,0,0,.2)',
             shadowOffsetX: 0,
             shadowOffsetY: 10,
             opacity: 1
-            }
           },
           data: seriesToShow,
           animationDuration: animationDuration

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

@@ -0,0 +1,155 @@
+<!--
+ 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'
+
+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 => {
+            xAxisValues = xAxisValues.concat(serie.data_set.map(set => set.name))
+          })
+        }
+        seriesToShow = metrics.series.map(serie => {
+          return {
+            name: serie.name,
+            type: 'bar',
+            data: serie.data_set.map(set => set.value),
+            animationDelay: function(idx) {
+              return idx * 10
+            }
+          }
+        })
+        legendToShow = metrics.series.map(serie => serie.name)
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          // y: 'bottom',
+          feature: {
+            magicType: {
+              type: ['stack', 'tiled']
+            },
+            dataView: {},
+            saveAsImage: {
+              pixelRatio: 2
+            }
+          }
+        },
+        xAxis: [{
+          data: xAxisValues,
+          type: 'category',
+          splitLine: {
+            show: false
+          }
+        }],
+        yAxis: {
+        },
+        legend: {
+          data: legendToShow
+        },
+        series: seriesToShow,
+        animationEasing: 'elasticOut',
+        animationDelayUpdate: function(idx) {
+          return idx * 5
+        }
+      })
+    }
+  }
+}
+</script>

src/components/ADempiere/Dashboard/index.vue

@@ -87,7 +87,7 @@ export default {
             break
           //  Area Chart
           case 'AC':
-            dashboard = () => import('@/components/ADempiere/Dashboard/charts/RaddarChart')
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/AreaChart')
             break
           //  Line Chart
           case 'LC':
@@ -103,7 +103,7 @@ export default {
             break
           //  Waterfall Chart
           case 'WC':
-            dashboard = () => import('@/components/ADempiere/Dashboard/charts/RaddarChart')
+            dashboard = () => import('@/components/ADempiere/Dashboard/charts/WaterfallChart')
             break
           default:
             dashboard = () => import('@/components/ADempiere/Dashboard/charts/LineChart')