blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00
Code Issues Releases Wiki Activity

Add chart support from ADempiere (#939)

Browse Source
This commit is contained in:
Yamel Senih 2021-06-23 16:02:37 -04:00 committed by GitHub
parent 68872fea6a
commit 8f0903dd4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 761 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/api/ADempiere/dashboard/chart.js Normal file
View File

@ -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)
})
}

141
src/components/ADempiere/Dashboard/charts/BarChart.vue Normal file
View File

@ -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>

167
src/components/ADempiere/Dashboard/charts/LineChart.vue Normal file
View File

@ -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>

132
src/components/ADempiere/Dashboard/charts/PieChart.vue Normal file
View File

@ -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>

160
src/components/ADempiere/Dashboard/charts/RaddarChart.vue Normal file
View File

@ -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>

55
src/components/ADempiere/Dashboard/charts/mixins/resize.js Normal file
View File

@ -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)
}
}
}

61
src/components/ADempiere/Dashboard/index.vue
View File

@ -28,7 +28,7 @@
> >
<template slot="title"> <template slot="title">
<span class="custom-title"> <span class="custom-title">
{{ dashboard.dashboardName }} {{ dashboard.name }}
</span> </span>
</template> </template>
<component <component
@ -63,21 +63,52 @@ export default {
if (this.unsupportedDashboards.includes(this.metadata.fileName)) { if (this.unsupportedDashboards.includes(this.metadata.fileName)) {
return return
} }
let dashboard let dashboard
switch (this.metadata.fileName) { if (this.metadata.dashboardType === 'dashboard') {
case 'recentItems': switch (this.metadata.fileName) {
dashboard = () => import('@/components/ADempiere/Dashboard/recentItems') case 'recentItems':
break dashboard = () => import('@/components/ADempiere/Dashboard/recentItems')
case 'userfavorites': break
dashboard = () => import('@/components/ADempiere/Dashboard/userfavorites') case 'userfavorites':
break dashboard = () => import('@/components/ADempiere/Dashboard/userfavorites')
case 'docstatus': break
dashboard = () => import('@/components/ADempiere/Dashboard/docstatus') case 'docstatus':
break dashboard = () => import('@/components/ADempiere/Dashboard/docstatus')
default: break
dashboard = () => import('@/components/ADempiere/Dashboard/calendar') default:
break 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 dashboard
// return () => import(`@/components/ADempiere/Dashboard/${this.metadata.fileName}`) // return () => import(`@/components/ADempiere/Dashboard/${this.metadata.fileName}`)

17
src/store/modules/ADempiere/dashboard.js
View File

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