ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

color chart

pull/1/head
wahyuun 1 year ago
parent
121d09b1cb
commit
7e3b2f1051
1 changed files with 88 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 116
      src/views/Dashboard/DashboardBOD.js

116
src/views/Dashboard/DashboardBOD.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save