Skip to content

T
Tia-dev
Commit 5ecbed04 authored by faisalhamdi's avatar faisalhamdi
Browse files
Options

CATPQ

parent 4f64f80c
Show whitespace changes
Inline Side-by-side
Showing with 87 additions and 34 deletions
src/container/Laporan/CatPQ.js
View file @ 5ecbed04
......@@ -39,7 +39,7 @@ const style2 = {
top: 0
};
export default class SummaryFR extends Component {
export default class CatPQ extends Component {
constructor(props) {
super(props)
this.state = {
......@@ -131,20 +131,18 @@ export default class SummaryFR extends Component {
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#07a7d0', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Actual Q2"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"% Growth YoY"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual Full Year Performance"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
......@@ -228,43 +226,43 @@ export default class SummaryFR extends Component {
}
}
},{
name: `${this.props.periode}`,
name: "2021",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", color: '#000', backgroundColor: 'rgb(200 224 229)', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Plan Q2 (Apr-Jun)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Actual Q2 (Apr-Jun)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"% Ach"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Score"}</span>
</div>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Score x Weight"}</span>
</div>
</div>
<div className="column-2 grid grid-5x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", color: '#000', backgroundColor: 'rgb(200 224 229)', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Plan YTD"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Actual YTD"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"% Ach"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Score"}</span>
</div>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', height: 44, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Score x Weight"}</span>
</div>
</div>
......@@ -516,11 +514,11 @@ export default class SummaryFR extends Component {
}
}
}, {
name: `Master Budget ${this.props.periode}`,
name: `Master Budget 2021`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: 'rgb(200 224 229)', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: '#000', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
......@@ -553,11 +551,11 @@ export default class SummaryFR extends Component {
}
}
}, {
name: `OL ${this.props.periode}`,
name: `OL 2021`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: 'rgb(200 224 229)', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: '#000', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
......@@ -593,8 +591,8 @@ export default class SummaryFR extends Component {
name: `% Var`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: 'rgb(200 224 229)', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: '#000', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
......@@ -626,11 +624,66 @@ export default class SummaryFR extends Component {
)
}
}
},
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}
]
let datas = [
["ABCD", "%", "Rp Bio", "3", "4", "5", "6", "7", "8", "9", "10", "11", { a: "0", b: "0", c: "0", d: "0" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["ABCD", "%", "Rp Bio", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"]
// ["Total Assets", "unit try", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
console.log(datas);
......
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