Tokenomics: token value chart

src/components/Tokenomics/index.tsx

@@ -3,6 +3,7 @@ import Burns from "./Burns";
 import Overview from "./Overview";
 import ReportBrowser from "./ReportBrowser";
 import Loading from "../Loading";
+import Chart from "../Chart";
 
 import { Tokenomics } from "../../types";
 
@@ -14,9 +15,17 @@ interface IProps {
 
 const CouncilReports = (props: IProps) => {
   const { reports, tokenomics } = props;
-  if (!tokenomics) return <Loading />;
+  if (!tokenomics) return <Loading target="tokenomics" />;
   const { exchanges, extecutedBurnsAmount } = tokenomics;
 
+  const tokenValue = {};
+  exchanges
+    .filter((e) => e.date)
+    .forEach((e) => {
+      const date = e.date.split("T")[0];
+      tokenValue[date] = { date, price: e.price * 1000000 };
+    });
+
   return (
     <div className="h-100 py-3 d-flex flex-row justify-content-center pb-5">
       <div className="d-flex flex-column text-right  align-items-right">
@@ -29,6 +38,21 @@ const CouncilReports = (props: IProps) => {
           exchanges={exchanges}
           extecutedBurnsAmount={extecutedBurnsAmount}
         />
+
+        <div className="box">
+          <h3>Token Value</h3>
+
+          <Chart
+            data={Object.values(tokenValue).sort((a, b) => a.date - b.date)}
+            x="date"
+            y="price"
+            xLabel="Date"
+            yLabel="$"
+            scaleY={true}
+            pixels={600}
+            barStyle={() => `bg-warning`}
+          />
+        </div>
       </div>
 
       <div className="box col-8">