Skip to content

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

solving conflict

parent 8ace5649
Hide whitespace changes
Inline Side-by-side
Showing with 5 additions and 437 deletions
src/container/Laporan/DashboardCAT.js
View file @ 9031c6b0
<<<<<<< HEAD
import React, { useState} from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard'
import StrategiMap from './StrategiMap'
import KpiPage from "./KpiPage"
import moment from 'moment'
const rawData = [{"item_report_id":15069,"item_name":"FINANCIAL PERSPECTIVE","parent":null,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15071,"item_name":"CUSTOMER PERSPECTIVE","parent":null,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15073,"item_name":"INTERNAL BUSINESS PROCESS PERSPECTIVE","parent":null,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15075,"item_name":"LEARNING & GROWTH PERSPECTIVE","parent":null,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15082,"item_name":"Mentoring Effectiveness","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15077,"item_name":"EBITDA","parent":15069,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15076,"item_name":"Revenue","parent":15069,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15078,"item_name":"NPAT","parent":15069,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15079,"item_name":"TPAT","parent":15069,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15085,"item_name":"Accident Rate (0 Fatility, Rank A)","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15083,"item_name":"Culture Alignment Index","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15081,"item_name":"People Benchstrength","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15084,"item_name":"Technical Competence Development","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15086,"item_name":"SHE Index","parent":15075,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null},{"item_report_id":15080,"item_name":"ROIC","parent":15069,"company_id":0,"month12prev":null,"month1":null,"month2":null,"month3":null,"month4":null,"month5":null,"month6":null,"month7":null,"month8":null,"month9":null,"month10":null,"month11":null,"month12":null}]
const _ = () => {
const [s, set] = useState({
yearPeriode : moment().format("YYYY"),
perusahaan : "TAP Group",
monthPeriode : moment().format("M"),
tab : 0
})
=======
import React, { Component } from 'react' import React, { Component } from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab, Snackbar, withStyles } from '@material-ui/core' import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab, Snackbar, withStyles } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard' import ExceutiveScoreboard from './ExceutiveScoreboard'
...@@ -267,83 +248,11 @@ export default class DashboardCAT extends Component { ...@@ -267,83 +248,11 @@ export default class DashboardCAT extends Component {
closeAlert() { closeAlert() {
this.setState({ alert: false }) this.setState({ alert: false })
} }
>>>>>>> dc06a5839018d36f490ebd641fcdca90e43ebc26
const perusahaan = [ selectTab = (event, newEvent) => {
{ value: 'TAP Group', label: 'TAP Group' }, this.setState({ tab: newEvent })
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const yearList = [];
for(let i = moment().format("YYYY") - 5; i <= moment().format("YYYY"); i++)
{
yearList.push(i);
} }
<<<<<<< HEAD
const height = 200;
const arrayRender = [
<ExceutiveScoreboard height={height} rawData = {rawData} />,
<StrategiMap height={height} rawData = {rawData}/>,
<KpiPage rawData = {rawData} />
]
return <div className='a-s-p-mid no-header'>
<div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>DASHBOARD CAT</Typography>
</div>
<div className="padding-20px" style={{ minWidth: 'max-content'}}>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="perusahaan"
select
label="Perusahaan"
value={s.perusahaan}
onChange={(e) => set({...s, perusahaan : e.target.value})}
>
{perusahaan.map((option, i) => (
<MenuItem key={i} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<TextField
style={{ width: 250, marginLeft :10 }}
id="Bulan"
select
label="Bulan"
value={s.monthPeriode.toString()}
onChange={(e) => set({...s, monthPeriode : parseInt(e.target.value)})}
>
{[1,2,3,4,5,6,7,8,9,10,11,12].map((option, i) => (
<MenuItem key={i} value={option}>
{moment("2020-" + option + "-01").format("MMMM")}
</MenuItem>
))}
</TextField>
<TextField
style={{ width: 250, marginLeft : 10 }}
id="Tahun"
select
label="Tahun"
value={s.yearPeriode.toString()}
onChange={(e) => set({...s, yearPeriode : parseInt(e.target.value)})}
>
{yearList.map((option, i) => (
<MenuItem key={i} value={option}>
{option}
</MenuItem>
))}
</TextField>
=======
render() { render() {
const perusahaan = [ const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' }, { value: 'TAP Group', label: 'TAP Group' },
...@@ -442,124 +351,7 @@ export default class DashboardCAT extends Component { ...@@ -442,124 +351,7 @@ export default class DashboardCAT extends Component {
} }
</Paper> </Paper>
</div>} </div>}
>>>>>>> dc06a5839018d36f490ebd641fcdca90e43ebc26
</div> </div>
)
<Paper style={{ marginTop: 20, }}> }
<AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tabs indicatorColor="primary" value={s.tab} onChange={ (e, n) => set({...s, tab : n})} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs>
</AppBar>
{
arrayRender[s.tab]
// s.tab === 0 ?
// <ExceutiveScoreboard height={height} rawData = {rawData} />
// :
// s.tab === 1 ?
// <StrategiMap height={height} rawData = {rawData}/>
// :
// <KpiPage rawData = {rawData} />
}
</Paper>
</div>
</div>
} }
export default _
// export default class DashboardCAT extends Component {
// constructor(props) {
// super(props)
// this.state = {
// periode: '2020',
// perusahaan: 'TAP Group',
// tab: 0
// }
// }
// selectTab = (event, newEvent) => {
// this.setState({ tab: newEvent })
// }
// render() {
// const perusahaan = [
// { value: 'TAP Group', label: 'TAP Group' },
// { value: '2019', label: '2019' },
// { value: '2018', label: '2018' },
// { value: '2017', label: '2017' },
// { value: '2016', label: '2016' },
// ]
// const periode = [
// { value: '2020', label: '2020' },
// { value: '2019', label: '2019' },
// { value: '2018', label: '2018' },
// { value: '2017', label: '2017' },
// { value: '2016', label: '2016' },
// ]
// return (
// <div className='a-s-p-mid no-header'>
// <div className={"main-color"} style={{ padding: 27 }}>
// <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
// </div>
// <div className="padding-20px" style={{ minWidth: 'max-content'}}>
// <div style={{ marginTop: 20 }}>
// <TextField
// style={{ width: 250, }}
// id="perusahaan"
// select
// label="Perusahaan"
// value={this.state.perusahaan}
// onChange={(e) => this.setState({ perusahaan: e.target.value })}
// >
// {perusahaan.map((option) => (
// <MenuItem key={option.value} value={option.value}>
// {option.label}
// </MenuItem>
// ))}
// </TextField>
// </div>
// <div style={{ marginTop: 20 }}>
// <TextField
// style={{ width: 250, }}
// id="periode"
// select
// label="Periode"
// value={this.state.periode}
// onChange={(e) => this.setState({ periode: e.target.value })}
// >
// {periode.map((option) => (
// <MenuItem key={option.value} value={option.value}>
// {option.label}
// </MenuItem>
// ))}
// </TextField>
// </div>
// <Paper style={{ marginTop: 20, }}>
// <AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
// <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
// <Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
// <Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
// <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
// </Tabs>
// </AppBar>
// {this.state.tab === 0 ?
// <ExceutiveScoreboard height={this.props.height} />
// :
// this.state.tab === 1 ?
// <StrategiMap height={this.props.height} />
// :
// <span>Test2</span>
// }
// </Paper>
// </div>
// </div>
// )
// }
// }
src/container/Laporan/ExceutiveScoreboard.js
View file @ 9031c6b0
import React, { Component, useEffect, useState } from 'react' import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer" import ReactSpeedometer from "react-d3-speedometer"
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core' import { GridList, Paper, Typography, GridListTile } from '@material-ui/core'
import Images from '../../assets/Images' import Images from '../../assets/Images'
import LineChart from 'react-linechart'; 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("all")
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)
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>
<div style={{ backgroundColor: "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>BS</Typography>
</div>
</div>
</div>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
"#00b1f7",
"#d8d8d8"
]}
needleColor={'#4b4b4b'}
value={3.67}
maxValue={5}
customSegmentStops={[0, 3.67, 5]}
width={200}
height={140}
ringWidth={25}
textColor={'#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({
reportId : r.item_report_id,
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)
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' }}>
<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>
})
}
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>
{ getLineChart() }
</div>
</div>
}
export default _ ;
/*
export default class ExceutiveScoreboard extends Component { export default class ExceutiveScoreboard extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -233,13 +15,9 @@ export default class ExceutiveScoreboard extends Component { ...@@ -233,13 +15,9 @@ export default class ExceutiveScoreboard extends Component {
{ judul: "Internal Perspective", kpi: 5, rank: 'C', value: 2.61, status: 'down' }, { judul: "Internal Perspective", kpi: 5, rank: 'C', value: 2.61, status: 'down' },
{ judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' }, { judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
], ],
<<<<<<< HEAD
selectIndex: 0
=======
data: this.props.data, data: this.props.data,
dataPayload: this.props.dataPayload, dataPayload: this.props.dataPayload,
selectIndex: null selectIndex: null
>>>>>>> dc06a5839018d36f490ebd641fcdca90e43ebc26
} }
} }
...@@ -328,7 +106,6 @@ export default class ExceutiveScoreboard extends Component { ...@@ -328,7 +106,6 @@ export default class ExceutiveScoreboard extends Component {
] ]
} }
]; ];
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}> <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
...@@ -422,4 +199,3 @@ export default class ExceutiveScoreboard extends Component { ...@@ -422,4 +199,3 @@ export default class ExceutiveScoreboard extends Component {
) )
} }
} }
*/
\ No newline at end of file
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