Commit bcfc92aa authored by Deni Rinaldi's avatar Deni Rinaldi

speedometer

parent c8cfb27d
......@@ -17,9 +17,11 @@
"bootstrap": "^4.5.2",
"date-fns": "^2.15.0",
"font-awesome": "^4.7.0",
"install": "^0.13.0",
"moment": "^2.27.0",
"mui-datatables": "^3.3.1",
"node-sass": "^4.14.1",
"npm": "^6.14.7",
"ramda": "^0.27.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
......@@ -29,6 +31,7 @@
"react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2",
"react-excel-renderer": "^1.1.0",
"react-linechart": "^1.1.12",
"react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
......
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24">
<g fill="none" fill-rule="evenodd">
<path fill="#E45858" d="M26.841 0L37.507 0 37.507 10.667z" transform="matrix(1 0 0 -1 2 23)"/>
<path stroke="#E45858" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34.848 2.849L20.991 16.234 12.912 8.435 0 20.757" transform="matrix(1 0 0 -1 2 23)"/>
<path d="M0 0H24V24H0z" transform="matrix(1 0 0 -1 -4 24)"/>
<path fill="#E45858" fill-rule="nonzero" d="M19.91 9.414c-.162.358-.518.586-.91.586h-4v13c0 .552-.448 1-1 1h-4c-.552 0-1-.448-1-1V10H5c-.392 0-.748-.23-.91-.586-.164-.358-.1-.776.158-1.072l7-8C11.438.124 11.712 0 12 0s.562.126.752.342l7 8c.26.294.32.714.158 1.072z" transform="matrix(1 0 0 -1 -4 24)"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24">
<g fill="none" fill-rule="evenodd">
<path fill="#7CD532" d="M26.841 0L37.507 0 37.507 10.667z" transform="translate(2)"/>
<path stroke="#7CD532" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34.848 2.849L20.991 16.234 12.912 8.435 0 20.757" transform="translate(2)"/>
<path d="M0 0H24V24H0z" transform="translate(-4)"/>
<path fill="#7CD532" fill-rule="nonzero" d="M19.91 9.414c-.162.358-.518.586-.91.586h-4v13c0 .552-.448 1-1 1h-4c-.552 0-1-.448-1-1V10H5c-.392 0-.748-.23-.91-.586-.164-.358-.1-.776.158-1.072l7-8C11.438.124 11.712 0 12 0s.562.126.752.342l7 8c.26.294.32.714.158 1.072z" transform="translate(-4)"/>
</g>
</svg>
......@@ -2,6 +2,7 @@ import React, { Component } 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';
export default class ExceutiveScoreboard extends Component {
constructor(props) {
......@@ -19,6 +20,20 @@ export default class ExceutiveScoreboard extends Component {
}
render() {
let { selectIndex } = this.state
const data = [
{
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' }}>
......@@ -62,6 +77,24 @@ export default class ExceutiveScoreboard extends Component {
</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>
</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