From 7e3b2f1051f6eabb1875d919d115a7be51e9747a Mon Sep 17 00:00:00 2001 From: wahyuun Date: Wed, 20 Dec 2023 05:50:25 +0700 Subject: [PATCH] color chart --- src/views/Dashboard/DashboardBOD.js | 116 +++++++++++++++++++++------- 1 file changed, 88 insertions(+), 28 deletions(-) diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index b84d1e6..46175ac 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -52,6 +52,10 @@ const DashboardBOD = (props) => { const [READY_PROJECT_SCHEDULE_BUDGET_HEALTH_PER_DIVISION, SET_READY_PROJECT_SCHEDULE_BUDGET_HEALTH_PER_DIVISION] = useState(false); const [PROJECT_EXPENDITURE, SET_PROJECT_EXPENDITURE] = useState(null); + const [PROJECT_EXPENDITURE_COLOR, SET_PROJECT_EXPENDITURE_COLOR] = useState(null); + const [PROJECT_FINANCIAL_HEALTH_COLOR, SET_PROJECT_FINANCIAL_HEALTH_COLOR] = useState(null); + const [PROJECT_SCHEDULE_HEALTH_COLOR, SET_PROJECT_SCHEDULE_HEALTH_COLOR] = useState(null); + const [PROJECT_INVOICE_COLOR, SET_PROJECT_INVOICE_COLOR] = useState(null); const [PROJECT_BY_PHASE, SET_PROJECT_BY_PHASE] = useState(null); const [PROJECT_BY_FINANCIAL_HEALTH, SET_PROJECT_BY_FINANCIAL_HEALTH] = useState(null); const [PROJECT_BY_SCHEDULE_HEALTH, SET_PROJECT_BY_SCHEDULE_HEALTH] = useState(null); @@ -66,6 +70,10 @@ const DashboardBOD = (props) => { useEffect(() => { getCompanyCashFlow(); // expenditure + getCompanyExpenditureColor(); // expenditure Color + getCompanyFinancialHealthColor(); // financial health Color + getCompanyScheduleHealthColor(); // schedule health Color + getCompanyInvoiceColor(); // Project Invoice vs Cash In Color getProjectPerPhase(); // project by phase getInvoiceOutstanding(); // project invoice vs cash in getProjectPerBudgetHealth(); // project by financial health @@ -103,6 +111,32 @@ const DashboardBOD = (props) => { SET_READY_PROJECT_EXPENDITURE(true); } + // Project Expenditure Color + + const getCompanyExpenditureColor = async () => { + const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure-color/${company_id}` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + SET_PROJECT_EXPENDITURE_COLOR(result.data.data) + } + + const getCompanyFinancialHealthColor = async () => { + const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${company_id}` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + SET_PROJECT_FINANCIAL_HEALTH_COLOR(result.data.data) + } + + const getCompanyScheduleHealthColor = async () => { + const URL = `${BASE_OSPRO}/api/dashboard/get-detail-schedule-health-color/${company_id}` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + SET_PROJECT_SCHEDULE_HEALTH_COLOR(result.data.data) + } + + const getCompanyInvoiceColor = async () => { + const URL = `${BASE_OSPRO}/api/dashboard/get-detail-invoice-color/${company_id}` + const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) + SET_PROJECT_INVOICE_COLOR(result.data.data) + } + const getInvoiceOutstanding = async () => { const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}` const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) @@ -501,8 +535,18 @@ const DashboardBOD = (props) => { PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0, PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_paid_invoice ? PROJECT_EXPENDITURE.total_paid_invoice : 0 ], - borderColor: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'], - backgroundColor: ['#480CA8', '#B5179E', '#A26A16', '#4C4747'], + borderColor: [ + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747' + ], + backgroundColor: [ + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16', + PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747' + ], borderRadius: 5, borderSkipped: false } @@ -553,8 +597,16 @@ const DashboardBOD = (props) => { PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : '', PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH['on-budget'] ? PROJECT_BY_FINANCIAL_HEALTH['on-budget'] : '' ].filter(value => value !== null), - borderColor: ["#E80053", "#FFD600", "#52AC0B",], - backgroundColor: ["#E80053", "#FFD600", "#52AC0B",], + borderColor: [ + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053', + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600', + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B' + ], + backgroundColor: [ + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053', + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600', + PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B' + ], borderWidth: 2, borderSkipped: false }, @@ -579,8 +631,16 @@ const DashboardBOD = (props) => { PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : '', PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['on-schedule'] : '' ], - borderColor: ["#E80053", "#FFD600", "#52AC0B"], - backgroundColor: ["#E80053", "#FFD600", "#52AC0B"], + borderColor: [ + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053', + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600', + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B' + ], + backgroundColor: [ + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053', + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600', + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B' + ], borderWidth: 2, borderSkipped: false }, @@ -740,9 +800,6 @@ const DashboardBOD = (props) => { datasets: [ { label: "", - // data: [3, 1, 2, 3, 7], - // borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"], - // backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"], data: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.totalProject) : [], borderColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [], backgroundColor: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.color) : [], @@ -835,27 +892,21 @@ const DashboardBOD = (props) => { } }} data={{ - // labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"], - // labels: [["Gedung Tenaga", "Panel Surya"], ["Pembangunan Gedung", "Tower ABC"], ["Tower Jaringan", "Jawa Barat"], ["Tower Jaringan", "Jawa Timur"], ["Tower Jaringan", "Jawa Tengah"], "Tower Jaringan Bali", "Project Tower ABC", ["Tower Jaringan", "DKI Jakarta"], "Tower Jaringan NTT"], labels: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.project_code) : [], datasets: [ { label: "Invoiced", - // data: [16, 8, 12, 10, 13, 12, 10, 10, 8], data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => Math.floor(item.invoiced)) : [], - borderColor: '#A36A16', - backgroundColor: '#A36A16', - // borderWidth: 2, + borderColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.invoiced && PROJECT_INVOICE_COLOR.invoiced !== "" ? PROJECT_INVOICE_COLOR.invoiced : '#A36A16', + backgroundColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.invoiced && PROJECT_INVOICE_COLOR.invoiced !== "" ? PROJECT_INVOICE_COLOR.invoiced : '#A36A16', borderRadius: 5, borderSkipped: false }, { label: "Cash In", - // data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5], data: PROJECT_INVOICE_VS_CASH_IN ? PROJECT_INVOICE_VS_CASH_IN.map((item, idx) => item.paid) : [], - borderColor: '#4C4747', - backgroundColor: '#4C4747', - // borderWidth: 2, + borderColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.paid && PROJECT_INVOICE_COLOR.paid !== "" ? PROJECT_INVOICE_COLOR.paid : '#4C4747', + backgroundColor: PROJECT_INVOICE_COLOR && PROJECT_INVOICE_COLOR.paid && PROJECT_INVOICE_COLOR.paid !== "" ? PROJECT_INVOICE_COLOR.paid : '#4C4747', borderRadius: 5, borderSkipped: false } @@ -891,39 +942,48 @@ const DashboardBOD = (props) => { datasets: [ { label: healthPerDivisionMode === 'schedule' ? "Behind Schedule" : "Overrun", - // data: [1, 0, 0, 0], data: healthPerDivisionMode === 'schedule' ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.behindSchedule) : [] : PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.overrun) : [] , - borderColor: '#E80053', - backgroundColor: '#E80053', + borderColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053', + backgroundColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['behind-schedule'] : '#E80053' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.overrun && PROJECT_FINANCIAL_HEALTH_COLOR.overrun !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.overrun : '#E80053', borderWidth: 2, borderRadius: 5, borderSkipped: false }, { label: healthPerDivisionMode === 'schedule' ? "Early Warning" : "Warning", - // data: [2, 0, 1, 1], data: healthPerDivisionMode === 'schedule' ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.warning) : [] : PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData.warning) : [] , - borderColor: '#FFD600', - backgroundColor: '#FFD600', + borderColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600', + backgroundColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR.warning && PROJECT_SCHEDULE_HEALTH_COLOR.warning !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR.warning : '#FFD600' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR.warning && PROJECT_FINANCIAL_HEALTH_COLOR.warning !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR.warning : '#FFD600', borderWidth: 2, borderRadius: 5, borderSkipped: false }, { label: healthPerDivisionMode === 'schedule' ? "On Schedule" : "On Budget", - // data: [4, 2, 3, 1], data: healthPerDivisionMode === 'schedule' ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.scheduleData.onSchedule) : [] : PROJECT_BUDGET_HEALTH_PER_DIVISION ? PROJECT_BUDGET_HEALTH_PER_DIVISION.map((item, idx) => item.budgetData['on-budget']) : [] , - borderColor: '#52AC0B', - backgroundColor: '#52AC0B', + borderColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B', + backgroundColor: healthPerDivisionMode === 'schedule' ? + PROJECT_SCHEDULE_HEALTH_COLOR && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] && PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] !== "" ? PROJECT_SCHEDULE_HEALTH_COLOR['on-schedule'] : '#52AC0B' + : PROJECT_FINANCIAL_HEALTH_COLOR && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] && PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] !== "" ? PROJECT_FINANCIAL_HEALTH_COLOR['on-budget'] : '#52AC0B', borderWidth: 2, borderRadius: 5, borderSkipped: false