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