speedometer

package.json

@@ -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",

src/assets/down.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="#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>

src/assets/up.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>

src/container/Laporan/ExceutiveScoreboard.js

@@ -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>
         )