feat/qb-2037: Update chart scale

stratosnet · Nov 1, 2023 · c561259 · c561259
1 parent 01d47ce
commit c561259
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 11 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/web-stratos/package.json b/apps/web-stratos/package.json
@@ -36,6 +36,7 @@
     "big.js": "^6.2.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
+    "d3-scale": "^4.0.2",
     "dayjs": "^1.11.7",
     "ethers": "5.7.2",
     "framer-motion": "^10.12.8",
@@ -94,6 +95,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/big.js": "^6.1.6",
     "@types/color": "^3.0.3",
+    "@types/d3-scale": "^4",
     "@types/eslint": "^8.37.0",
     "@types/esprima": "^4.0.3",
     "@types/jest": "^29.5.1",

diff --git a/apps/web-stratos/src/screens/home/components/charts/TokenomicChart.tsx b/apps/web-stratos/src/screens/home/components/charts/TokenomicChart.tsx
@@ -1,19 +1,30 @@
 import { useId, FC } from 'react';
 
+import { BigNumber } from 'ethers';
+
 import { Tooltip, BarChart, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
 
 interface ITokenomicChart {
+  total: string;
   data?: any[];
 }
 
-const TokenomicChart: FC<ITokenomicChart> = ({ data }) => {
+const TokenomicChart: FC<ITokenomicChart> = ({ data, total }) => {
   const chartId = useId();
 
   return (
-    <BarChart width={600} height={250} data={data} id={chartId}>
+    <BarChart
+      width={600}
+      height={250}
+      data={data}
+      id={chartId}
+      {...{
+        overflow: 'visible',
+      }}
+    >
       <CartesianGrid stroke="#ccc" />
       <XAxis dataKey="legendKey" />
-      <YAxis tickCount={10_000} domain={[0, 'dataMax']} tick={{ fontSize: 12 }} />
+      <YAxis scale="log" tick={{ fontSize: 12 }} domain={[1_00, total]} />
       <Tooltip />
       <Bar dataKey="value" isAnimationActive={false} />
     </BarChart>

diff --git a/apps/web-stratos/src/screens/home/components/hero/index.tsx b/apps/web-stratos/src/screens/home/components/hero/index.tsx
@@ -1,19 +1,19 @@
 import Box from '@/components/box';
 import Loading from '@/components/loading';
 import OnlineVotingPower from '@/screens/home/components/hero/components/online_voting_power';
-import TokenPrice from '@/screens/home/components/hero/components/token_price';
+// import TokenPrice from '@/screens/home/components/hero/components/token_price';
 import { useHero } from '@/screens/home/components/hero/hooks';
 import { FC } from 'react';
 
 const Hero: FC<ComponentDefault> = (props) => {
   const { state } = useHero();
   let component = null;
   if (!state.loading) {
-    if (state.tokenPriceHistory.length) {
-      component = <TokenPrice items={state.tokenPriceHistory} />;
-    } else {
-      component = <OnlineVotingPower />;
-    }
+    // if (state.tokenPriceHistory.length) {
+    //   component = <TokenPrice items={state.tokenPriceHistory} />;
+    // } else {
+    component = <OnlineVotingPower />;
+    // }
   } else {
     component = <Loading />;
   }

diff --git a/apps/web-stratos/src/screens/home/components/tokenomics/index.tsx b/apps/web-stratos/src/screens/home/components/tokenomics/index.tsx
@@ -89,7 +89,10 @@ const Tokenomics: FC<ComponentDefault> = ({ className }) => {
         ))}
       </div>
       <div className={classes.content}>
-        <TokenomicChart data={data} />
+        <TokenomicChart
+          data={data.filter((x) => x.value !== 0)}
+          total={prettyFormat(tokenomics.total, 18, 0)}
+        />
       </div>
     </Box>
   );

diff --git a/packages/ui/public/locales/en/common.json b/packages/ui/public/locales/en/common.json
@@ -31,7 +31,7 @@
   "price": "Price",
   "inflation": "Inflation",
   "apr": "APR",
-  "miningReward": "Mining Reward",
+  "miningReward": "Chain Reward",
   "success": "Success",
   "fail": "Fail",
   "filterBy": "Filter By...",

diff --git a/yarn.lock b/yarn.lock
@@ -5044,6 +5044,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-scale@npm:^4":
+  version: 4.0.6
+  resolution: "@types/d3-scale@npm:4.0.6"
+  dependencies:
+    "@types/d3-time": "*"
+  checksum: 1c76c74b0333e8a1e0a2e45d26a22a448808b5381f72359b4442d02d7c77dae976c03559569e8347635adfa77fe781a70717e331b819064aeea7b9e24028c1aa
+  languageName: node
+  linkType: hard
+
 "@types/d3-scale@npm:^4.0.2":
   version: 4.0.3
   resolution: "@types/d3-scale@npm:4.0.3"
@@ -15972,6 +15981,7 @@ __metadata:
     "@testing-library/react": ^14.0.0
     "@types/big.js": ^6.1.6
     "@types/color": ^3.0.3
+    "@types/d3-scale": ^4
     "@types/eslint": ^8.37.0
     "@types/esprima": ^4.0.3
     "@types/jest": ^29.5.1
@@ -15998,6 +16008,7 @@ __metadata:
     color: ^4.2.3
     copy-to-clipboard: ^3.3.3
     csstype: ^3.1.2
+    d3-scale: ^4.0.2
     dayjs: ^1.11.7
     dotenv: ^16.0.3
     eslint: ^8.40.0