diff --git a/src/api/ADempiere/dashboard/chart.js b/src/api/ADempiere/dashboard/chart.js
new file mode 100644
index 00000000..ba254fe0
--- /dev/null
+++ b/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 .
+// 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)
+ })
+}
diff --git a/src/components/ADempiere/Dashboard/charts/BarChart.vue b/src/components/ADempiere/Dashboard/charts/BarChart.vue
new file mode 100644
index 00000000..fa51674f
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/charts/BarChart.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+
diff --git a/src/components/ADempiere/Dashboard/charts/LineChart.vue b/src/components/ADempiere/Dashboard/charts/LineChart.vue
new file mode 100644
index 00000000..3757c42b
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/charts/LineChart.vue
@@ -0,0 +1,167 @@
+
+
+
+
+
+
diff --git a/src/components/ADempiere/Dashboard/charts/PieChart.vue b/src/components/ADempiere/Dashboard/charts/PieChart.vue
new file mode 100644
index 00000000..38f111ca
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/charts/PieChart.vue
@@ -0,0 +1,132 @@
+
+
+
+
+
+
diff --git a/src/components/ADempiere/Dashboard/charts/RaddarChart.vue b/src/components/ADempiere/Dashboard/charts/RaddarChart.vue
new file mode 100644
index 00000000..ea2c17ea
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/charts/RaddarChart.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
diff --git a/src/components/ADempiere/Dashboard/charts/mixins/resize.js b/src/components/ADempiere/Dashboard/charts/mixins/resize.js
new file mode 100644
index 00000000..234953b1
--- /dev/null
+++ b/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)
+ }
+ }
+}
diff --git a/src/components/ADempiere/Dashboard/index.vue b/src/components/ADempiere/Dashboard/index.vue
index d4d6a082..b7fc7df4 100644
--- a/src/components/ADempiere/Dashboard/index.vue
+++ b/src/components/ADempiere/Dashboard/index.vue
@@ -28,7 +28,7 @@
>
- {{ dashboard.dashboardName }}
+ {{ dashboard.name }}
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}`)
diff --git a/src/store/modules/ADempiere/dashboard.js b/src/store/modules/ADempiere/dashboard.js
index cf78bc80..606508e7 100644
--- a/src/store/modules/ADempiere/dashboard.js
+++ b/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 .
+// 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'