|
|
@ -521,7 +521,6 @@ const DashboardBOD = (props) => { |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: '', |
|
|
|
label: '', |
|
|
|
// data: [COMPANY_CASHFLOW_TOTAL_BUDGET, COMPANY_CASHFLOW_EXPENDITURE, COMPANY_CASHFLOW_INVOICE, COMPANY_CASHFLOW_CASH_IN],
|
|
|
|
|
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_budget ? PROJECT_EXPENDITURE.total_budget : 0, |
|
|
|
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_budget ? PROJECT_EXPENDITURE.total_budget : 0, |
|
|
|
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_expenditure ? PROJECT_EXPENDITURE.total_expenditure : 0, |
|
|
|
PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_expenditure ? PROJECT_EXPENDITURE.total_expenditure : 0, |
|
|
@ -557,10 +556,6 @@ const DashboardBOD = (props) => { |
|
|
|
backgroundColor="#f3f3f3" |
|
|
|
backgroundColor="#f3f3f3" |
|
|
|
foregroundColor="#ecebeb" |
|
|
|
foregroundColor="#ecebeb" |
|
|
|
> |
|
|
|
> |
|
|
|
{/* <rect x="0" y="0" rx="5" ry="5" width="25%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="23" rx="5" ry="5" width="75%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="47" rx="5" ry="5" width="100%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="70" rx="5" ry="5" width="45%" height="18" /> */} |
|
|
|
|
|
|
|
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" /> |
|
|
|
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" /> |
|
|
|
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" /> |
|
|
|
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" /> |
|
|
|
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" /> |
|
|
|
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" /> |
|
|
@ -584,7 +579,6 @@ const DashboardBOD = (props) => { |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "", |
|
|
|
label: "", |
|
|
|
// data: [2, 4, 10],
|
|
|
|
|
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.overrun ? PROJECT_BY_FINANCIAL_HEALTH.overrun : '', |
|
|
|
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.overrun ? PROJECT_BY_FINANCIAL_HEALTH.overrun : '', |
|
|
|
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : '', |
|
|
|
PROJECT_BY_FINANCIAL_HEALTH && PROJECT_BY_FINANCIAL_HEALTH.warning ? PROJECT_BY_FINANCIAL_HEALTH.warning : '', |
|
|
@ -618,7 +612,6 @@ const DashboardBOD = (props) => { |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "", |
|
|
|
label: "", |
|
|
|
// data: [1, 3, 11],
|
|
|
|
|
|
|
|
data: [ |
|
|
|
data: [ |
|
|
|
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] : '', |
|
|
|
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] ? PROJECT_BY_SCHEDULE_HEALTH['behind-schedule'] : '', |
|
|
|
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : '', |
|
|
|
PROJECT_BY_SCHEDULE_HEALTH && PROJECT_BY_SCHEDULE_HEALTH.warning ? PROJECT_BY_SCHEDULE_HEALTH.warning : '', |
|
|
@ -664,7 +657,6 @@ const DashboardBOD = (props) => { |
|
|
|
position: 'right', |
|
|
|
position: 'right', |
|
|
|
labels: { |
|
|
|
labels: { |
|
|
|
boxWidth: 10, |
|
|
|
boxWidth: 10, |
|
|
|
// padding: 15,
|
|
|
|
|
|
|
|
font: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
@ -674,7 +666,6 @@ const DashboardBOD = (props) => { |
|
|
|
datalabels: { |
|
|
|
datalabels: { |
|
|
|
color: '#FFFFFF', |
|
|
|
color: '#FFFFFF', |
|
|
|
formatter: function (value, context) { |
|
|
|
formatter: function (value, context) { |
|
|
|
// return value ? value : null
|
|
|
|
|
|
|
|
if (value && value > 0) { |
|
|
|
if (value && value > 0) { |
|
|
|
return value; |
|
|
|
return value; |
|
|
|
} |
|
|
|
} |
|
|
@ -684,12 +675,10 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
}} |
|
|
|
chartData={PROJECT_PER_DIVISION ? { |
|
|
|
chartData={PROJECT_PER_DIVISION ? { |
|
|
|
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
|
|
|
|
|
|
|
|
labels: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.name) : [], |
|
|
|
labels: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.name) : [], |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "", |
|
|
|
label: "", |
|
|
|
// data: [7, 2, 4, 3],
|
|
|
|
|
|
|
|
data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [], |
|
|
|
data: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.total) : [], |
|
|
|
borderColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
borderColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
backgroundColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
backgroundColor: PROJECT_PER_DIVISION ? PROJECT_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
@ -720,7 +709,6 @@ const DashboardBOD = (props) => { |
|
|
|
position: 'right', |
|
|
|
position: 'right', |
|
|
|
labels: { |
|
|
|
labels: { |
|
|
|
boxWidth: 10, |
|
|
|
boxWidth: 10, |
|
|
|
// padding: 15,
|
|
|
|
|
|
|
|
font: { |
|
|
|
font: { |
|
|
|
size: 10 |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
} |
|
|
@ -730,19 +718,16 @@ const DashboardBOD = (props) => { |
|
|
|
datalabels: { |
|
|
|
datalabels: { |
|
|
|
color: '#FFFFFF', |
|
|
|
color: '#FFFFFF', |
|
|
|
formatter: function (value, context) { |
|
|
|
formatter: function (value, context) { |
|
|
|
// return value ? toRupiah(value, { useUnit: 'jt' }) : 0
|
|
|
|
|
|
|
|
return null; |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
}} |
|
|
|
chartData={PROJECT_VALUE_PER_DIVISION ? { |
|
|
|
chartData={PROJECT_VALUE_PER_DIVISION ? { |
|
|
|
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
|
|
|
|
|
|
|
|
labels: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.name) : [], |
|
|
|
labels: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.name) : [], |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "", |
|
|
|
label: "", |
|
|
|
// data: [50, 120, 72, 60],
|
|
|
|
|
|
|
|
data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total).filter(value => value !== 0) : [], |
|
|
|
data: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.total).filter(value => value !== 0) : [], |
|
|
|
borderColor: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
borderColor: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
backgroundColor: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
|
backgroundColor: PROJECT_VALUE_PER_DIVISION ? PROJECT_VALUE_PER_DIVISION.map((item, idx) => item.color) : [], |
|
|
@ -788,7 +773,6 @@ const DashboardBOD = (props) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
}} |
|
|
|
data={{ |
|
|
|
data={{ |
|
|
|
// labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"],
|
|
|
|
|
|
|
|
labels: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.name) : [], |
|
|
|
labels: PROJECT_BY_PHASE ? PROJECT_BY_PHASE.map((item, idx) => item.name) : [], |
|
|
|
datasets: [ |
|
|
|
datasets: [ |
|
|
|
{ |
|
|
|
{ |
|
|
@ -814,10 +798,6 @@ const DashboardBOD = (props) => { |
|
|
|
backgroundColor="#f3f3f3" |
|
|
|
backgroundColor="#f3f3f3" |
|
|
|
foregroundColor="#ecebeb" |
|
|
|
foregroundColor="#ecebeb" |
|
|
|
> |
|
|
|
> |
|
|
|
{/* <rect x="0" y="0" rx="5" ry="5" width="25%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="23" rx="5" ry="5" width="75%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="47" rx="5" ry="5" width="100%" height="18" /> |
|
|
|
|
|
|
|
<rect x="0" y="70" rx="5" ry="5" width="45%" height="18" /> */} |
|
|
|
|
|
|
|
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" /> |
|
|
|
<rect x="7" y="12" rx="5" ry="5" width="414" height="20" /> |
|
|
|
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" /> |
|
|
|
<rect x="7" y="41" rx="5" ry="5" width="220" height="20" /> |
|
|
|
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" /> |
|
|
|
<rect x="7" y="69" rx="5" ry="5" width="319" height="20" /> |
|
|
@ -876,9 +856,7 @@ const DashboardBOD = (props) => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
datalabels: { |
|
|
|
datalabels: { |
|
|
|
color: '#FFFFFF', |
|
|
|
color: '#FFFFFF', |
|
|
|
// rotation: -90
|
|
|
|
|
|
|
|
formatter: function (value, context) { |
|
|
|
formatter: function (value, context) { |
|
|
|
// return value ? toRupiah(value, { useUnit: 'jt' }) : 0
|
|
|
|
|
|
|
|
return null; |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -925,8 +903,6 @@ const DashboardBOD = (props) => { |
|
|
|
changeMode={(mode) => setHealthPerDivisionMode(mode)} |
|
|
|
changeMode={(mode) => setHealthPerDivisionMode(mode)} |
|
|
|
chartType="vertical-bar" |
|
|
|
chartType="vertical-bar" |
|
|
|
chartData={PROJECT_SCHEDULE_HEALTH_PER_DIVISION || PROJECT_BUDGET_HEALTH_PER_DIVISION ? { |
|
|
|
chartData={PROJECT_SCHEDULE_HEALTH_PER_DIVISION || PROJECT_BUDGET_HEALTH_PER_DIVISION ? { |
|
|
|
// labels: ['Telecommunication Solution Service', 'Telecommunication Solution Product', 'Energy Solution', 'Constructions'],
|
|
|
|
|
|
|
|
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
|
|
|
|
|
|
|
|
labels: |
|
|
|
labels: |
|
|
|
healthPerDivisionMode === 'schedule' ? |
|
|
|
healthPerDivisionMode === 'schedule' ? |
|
|
|
PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.name) : [] |
|
|
|
PROJECT_SCHEDULE_HEALTH_PER_DIVISION ? PROJECT_SCHEDULE_HEALTH_PER_DIVISION.map((item, idx) => item.name) : [] |
|
|
|