Skip to content

T
Tia-dev
Commit c3dc1d8e authored by herman's avatar herman
Browse files
Options

update dashboard CAT

parent 9bfcd206
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 88 deletions
src/container/Laporan/DashboardCAT.js
View file @ c3dc1d8e
This diff is collapsed.
src/container/Laporan/ExceutiveScoreboard.js
View file @ c3dc1d8e
import React, { Component } from 'react'
import React, { Component, useEffect, useState } from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images'
import LineChart from 'react-linechart';
//index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7"
const _ = (props) => {
const [selectedIndex, setselectedIndex] = useState(0)
const [selectedCategory, setSelectedCategory] = useState("")
const [data, setData] = useState([])
useEffect(() => {
setData(props.rawData)
}, [])
function getOverall()
{
return <div style={{ padding: 10, backgroundColor: selectedIndex === 0 ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}
onClick={() => setselectedIndex(0)}>
<span style={{ fontSize: '17px', color: selectedIndex === 0 ? '#fff' : '#7e8085' }}>Overall</span>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: selectedIndex === 0 ? 54 : 30, placeContent: 'center' }}>
<div>
{selectedIndex != 0 ?
<div>
<span style={{ textAlign: 'center', fontSize: '24px', color: selectedIndex === 0 ? "#fff" : '#4b4b4b' }}>{2}</span>
<span style={{ textAlign: 'center', fontSize: '11px', color: selectedIndex === 0 ? "#fff" : '#4b4b4b' }}>KPIs</span> </div> : null}
<div style={{ backgroundColor: selectedIndex === 2 ? "#7cd532" : selectedIndex === 3 ? "#fcff00" : selectedIndex === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>BS</Typography>
</div>
</div>
</div>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
selectedIndex === 2 ? "#7cd532" : selectedIndex === 3 ? "#fcff00" : selectedIndex === 4 ? "#00b440" : "#00b1f7",
"#d8d8d8"
]}
needleColor={selectedIndex === 0 ? "#fff" : '#4b4b4b'}
value={3.67}
maxValue={5}
customSegmentStops={[0, 3.67, 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectedIndex === 0 ? "#fff" : '#4b4b4b'}
/>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
{"up" === "up" ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: selectedIndex === 0 ? '#fff' : '#4b4b4b' }}>vs Last Month</Typography>
</div>
</div>
</div>
}
function getCategory()
{
let listCategory = []
data.map((r, i) => {
if(r.parent === null)
{
let kpi = data.filter((s, i) => s.parent === r.item_report_id ).length
let rank = "BS"
let currentVal = data.reduce( (sum, s) => {
let num = isNaN(s["month1"]) || s["month1"] === "" ? 0 : parseInt(s["month1"])
return s.parent === r.item_report_id ? num : 0
})
let previousVal = data.reduce( (sum, s) => {
let num = isNaN(s["month1"]) || s["month1"] === "" ? 0 : parseInt(s["month1"])
return s.parent === r.item_report_id ? num : 0
})
let status = "up"
listCategory.push({
title : r.item_name,
kpi : kpi ,
rank : rank ,
currentVal : currentVal,
previousVal : previousVal ,
status : status
})
}
})
// console.log(listCategory)
return listCategory.map( (r, i) => {
let row = i + 1
return <div style={{ padding: 10, backgroundColor: selectedIndex === row ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}
onClick={() => setselectedIndex(row)}>
<span
style={{ fontSize: '17px', color: selectedIndex === row ? '#fff' : '#7e8085' }}>{r.title}</span>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: row === 0 ? 54 : 30, placeContent: 'center' }}>
<div>
<div>
<span style={{ textAlign: 'center', fontSize: '24px', color: selectedIndex === row ? "#fff" : '#4b4b4b' }}>{r.kpi}</span>
<span style={{ textAlign: 'center', fontSize: '11px', color: selectedIndex === row ? "#fff" : '#4b4b4b' }}>KPIs</span>
</div>
<div style={{ backgroundColor: row === 2 ? "#7cd532" : row === 3 ? "#fcff00" : row === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{r.rank}</Typography>
</div>
</div>
</div>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
row === 2 ? "#7cd532" : row === 3 ? "#fcff00" : row === 4 ? "#00b440" : "#00b1f7",
"#d8d8d8"
]}
needleColor={selectedIndex === row ? "#fff" : '#4b4b4b'}
value={r.currentVal}
maxValue={5}
customSegmentStops={[0, r.currentVal, 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectedIndex === row ? "#fff" : '#4b4b4b'}
/>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
{r.status === "up" ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: selectedIndex === row ? '#fff' : '#4b4b4b' }}>vs Last Month</Typography>
</div>
</div>
</div>
})
}
return <div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
{ getOverall() }
{ getCategory() }
</div>
{/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
<div>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
</div>
<LineChart
width={400}
height={50}
data={data}
yMin={0}
yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div> */}
</div>
}
export default _ ;
/*
export default class ExceutiveScoreboard extends Component {
constructor(props) {
super(props)
......@@ -15,7 +172,7 @@ export default class ExceutiveScoreboard extends Component {
{ judul: "Internal Perspective", kpi: 5, rank: 'C', value: 2.61, status: 'down' },
{ judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
],
selectIndex: null
selectIndex: 0
}
}
render() {
......@@ -34,6 +191,7 @@ export default class ExceutiveScoreboard extends Component {
]
}
];
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
......@@ -100,3 +258,4 @@ export default class ExceutiveScoreboard extends Component {
)
}
}
*/
\ No newline at end of file
src/container/Laporan/KpiPage.js 0 → 100644
View file @ c3dc1d8e
import React from "react"
const _ = (props) => {
// console.log("HAHAHA")
// console.log(props.rawData)
return <span>Kpis</span>
}
export default _;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment