Skip to content

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

update dashboardCat

parent c3dc1d8e
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 30 deletions
src/container/Laporan/ExceutiveScoreboard.js
View file @ 5039a503
......@@ -9,7 +9,7 @@ import LineChart from 'react-linechart';
const _ = (props) => {
const [selectedIndex, setselectedIndex] = useState(0)
const [selectedCategory, setSelectedCategory] = useState("")
const [selectedCategory, setSelectedCategory] = useState("all")
const [data, setData] = useState([])
useEffect(() => {
......@@ -19,16 +19,19 @@ const _ = (props) => {
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)}>
onClick={() => {
setselectedIndex(0)
setSelectedCategory("all")
}}>
<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>
<div>
<span>&nbsp;</span>
<span>&nbsp;</span>
</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 }}>
<div style={{ backgroundColor: "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>BS</Typography>
</div>
</div>
......@@ -36,17 +39,17 @@ const _ = (props) => {
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
selectedIndex === 2 ? "#7cd532" : selectedIndex === 3 ? "#fcff00" : selectedIndex === 4 ? "#00b440" : "#00b1f7",
"#00b1f7",
"#d8d8d8"
]}
needleColor={selectedIndex === 0 ? "#fff" : '#4b4b4b'}
needleColor={'#4b4b4b'}
value={3.67}
maxValue={5}
customSegmentStops={[0, 3.67, 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectedIndex === 0 ? "#fff" : '#4b4b4b'}
textColor={'#4b4b4b'}
/>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
......@@ -78,6 +81,7 @@ const _ = (props) => {
let status = "up"
listCategory.push({
reportId : r.item_report_id,
title : r.item_name,
kpi : kpi ,
rank : rank ,
......@@ -91,8 +95,20 @@ const _ = (props) => {
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)}>
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)
setSelectedCategory(r.reportId)
}}>
<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' }}>
......@@ -131,30 +147,75 @@ const _ = (props) => {
</div>
})
}
function getLineChart()
{
const filterData = []
data.map((r, i) => {
if(selectedCategory === "all" || ( r.parent === selectedCategory && r.parent != null))
{
let raw = r
filterData.push(raw)
}
})
return filterData.map((r, i) => {
return <div
key={i}
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 }}>{r.item_name}</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={[]}
yMin={0}
yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div>
})
// const raw = [
// {
// color: "steelblue",
// points: [
// { x: 1, y: 2 },
// { x: 2, y: 1 },
// { x: 3, y: 3 },
// { x: 4, y: 2 },
// { x: 5, y: 4 },
// { x: 6, y: 5 },
// { x: 7, y: 4 },
// ]
// }
// ];
}
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>
{ getLineChart() }
</div>
</div>
}
......
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