fix: utilize the prepareData function from the chart package

rango-exchange · Nov 20, 2024 · b804405 · b804405
1 parent 41662fe
commit b804405
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 156 deletions.
diff --git a/components/statistics/ChartBarBox/ChartBarBox.helper.ts b/components/statistics/ChartBarBox/ChartBarBox.helper.ts
@@ -1,9 +1,3 @@
-import { DailySummaryType } from 'types';
-import type { BarStackDataType, ColorBucketMapType } from '@rango-dev/charts';
-import { ChartType } from './ChartBarBox.type';
-
-export const BAR_CHART_BLOCKCHAIN_NUMBER = 10;
-
 export const barChartColors: string[] = [
   '#469BF5',
   '#29DABA',
@@ -18,108 +12,3 @@ export const barChartColors: string[] = [
   '#8B62FF',
   '#F4C932',
 ];
-
-export const prepareBarChartData = (chartOption: {
-  dailyData: DailySummaryType[];
-  isStackBar: boolean;
-  type: ChartType;
-}) => {
-  const { dailyData, isStackBar, type } = chartOption;
-  const chartData: BarStackDataType[] = [];
-  const colorBlockchainMap: ColorBucketMapType = new Map();
-  const buckets: string[] = [];
-
-  if (!isStackBar) {
-    dailyData.forEach((dailyItem) => {
-      const dataItem: BarStackDataType = { date: dailyItem.date };
-      dataItem[type === 'transaction' ? 'Transactions' : 'Volume'] =
-        type === 'transaction'
-          ? dailyItem.count.toString()
-          : dailyItem.volume.toString();
-
-      chartData.push(dataItem);
-    });
-
-    colorBlockchainMap.set(
-      type === 'transaction' ? 'Transactions' : 'Volume',
-      type === 'transaction' ? '#469BF5' : '#8B62FF',
-    );
-
-    buckets.push(type === 'transaction' ? 'Transactions' : 'Volume');
-
-    return { chartData, colorBlockchainMap, buckets };
-  }
-
-  // map sum of value base on type(transaction or volume) for each blockchain
-  const sumBlockchainMap = new Map<string, number>();
-  dailyData.forEach((dailyItem) => {
-    const sum = sumBlockchainMap.get(dailyItem.bucket) || 0;
-    const newValue =
-      type === 'transaction' ? dailyItem.count : dailyItem.volume;
-    sumBlockchainMap.set(dailyItem.bucket, sum + newValue);
-  });
-
-  // sort blockchains with sum value base on type (transaction or volume)
-  const sortedBlockchain = Array.from(sumBlockchainMap).sort(
-    (a, b) => b[1] - a[1],
-  );
-
-  // get top blockchains for stack bars
-  const topBlockchain = sortedBlockchain
-    .map((sortedItem) => sortedItem[0])
-    .slice(0, BAR_CHART_BLOCKCHAIN_NUMBER);
-
-  // create map structure for assign color for each blockchain
-  topBlockchain.forEach((blockchainItem, index) => {
-    colorBlockchainMap.set(
-      blockchainItem,
-      barChartColors[index % barChartColors.length],
-    );
-    buckets.push(blockchainItem);
-  });
-  colorBlockchainMap.set('Others', barChartColors[barChartColors.length - 1]);
-  buckets.push('Others');
-
-  // create map structure for assign chart data for each date
-  const dateMap = new Map<string, DailySummaryType[]>();
-  dailyData.forEach((dailyItem) => {
-    if (!dateMap.has(dailyItem.date)) dateMap.set(dailyItem.date, []);
-
-    const dateItem = dateMap.get(dailyItem.date);
-    dateItem?.push(dailyItem);
-  });
-
-  // create data result for bar stack chart
-  dateMap.forEach((dateDailyList, keyDate) => {
-    const dataItem: BarStackDataType = { date: keyDate };
-    dateDailyList
-      .filter((dailyItem) => topBlockchain.includes(dailyItem.bucket))
-      .forEach((topDailyItem) => {
-        const bucketValue =
-          type === 'transaction' ? topDailyItem.count : topDailyItem.volume;
-        dataItem[topDailyItem.bucket] = bucketValue
-          ? bucketValue.toString()
-          : '0';
-      });
-
-    topBlockchain.forEach((topItem) => {
-      if (!(topItem in dataItem)) dataItem[topItem] = '0';
-    });
-
-    const otherBlockchains = dateDailyList.filter(
-      (dailyItem) => !topBlockchain.includes(dailyItem.bucket),
-    );
-
-    const othersValue = otherBlockchains
-      .map((dailyItem) =>
-        type === 'transaction' ? dailyItem.count : dailyItem.volume,
-      )
-      .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-
-    dataItem['Others'] = othersValue.toString();
-
-    chartData.push(dataItem);
-  });
-
-  return { chartData, colorBlockchainMap, buckets };
-};
diff --git a/components/statistics/ChartBarBox/ChartBarBox.type.ts b/components/statistics/ChartBarBox/ChartBarBox.type.ts
@@ -1,6 +1,6 @@
 import { DailySummaryType, StatisticDaysFilter } from 'types';
 import { BlockchainMeta } from 'types/meta';
-export type ChartType = 'transaction' | 'volume';
+export type ChartType = 'Transaction' | 'Volume';
 
 export interface PropsType {
   days: StatisticDaysFilter;

diff --git a/components/statistics/ChartBarBox/index.tsx b/components/statistics/ChartBarBox/index.tsx
@@ -11,15 +11,15 @@ import {
 import { getDailySummary } from 'services';
 import { Select } from 'components/common/Select';
 import { OptionType } from 'components/common/Select/Select.types';
-import { prepareBarChartData } from './ChartBarBox.helper';
 import { ActiveFilterIcon, FilterIcon, LoadingIcon } from 'components/icons';
 import ModalFilter from './ModalFilter';
 import ParentSize from '@visx/responsive/lib/components/ParentSize';
 import {
   DEFAULT_STATISTIC_BREAK_DOWN_FILTER,
   DEFAULT_STATISTIC_DAYS,
 } from 'constant';
-import { BarChart } from '@rango-dev/charts';
+import { BarChart, prepareBarChartData } from '@rango-dev/charts';
+import { barChartColors } from './ChartBarBox.helper';
 
 function ChartBarBox(props: PropsType) {
   const {
@@ -31,7 +31,7 @@ function ChartBarBox(props: PropsType) {
     description,
     className = '',
   } = props;
-
+  const isTransactionType = type === 'Transaction';
   const [filter, setFilter] = useState<FilterBarChart>({
     source: '',
     destination: '',
@@ -50,7 +50,7 @@ function ChartBarBox(props: PropsType) {
     dailyData &&
     dailyData
       .map((dailyItem) =>
-        type === 'transaction' ? dailyItem.count : dailyItem.volume,
+        isTransactionType ? dailyItem.count : dailyItem.volume,
       )
       .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
 
@@ -104,12 +104,17 @@ function ChartBarBox(props: PropsType) {
     (!!source && breakDownBy === BreakDownList['Source chain']) ||
     (!!destination && breakDownBy === BreakDownList['Destination chain'])
   );
+  const barChartColor = isTransactionType ? ['#469BF5'] : ['#8B62FF'];
 
-  const { chartData, colorBlockchainMap, buckets } = useMemo(() => {
+  const { chartData, colorBucketMap, buckets } = useMemo(() => {
     const result = prepareBarChartData({
-      dailyData,
-      isStackBar,
-      type,
+      dailyData: dailyData.map((item) => ({
+        date: item.date,
+        bucket: item.bucket,
+        value: isTransactionType ? item.count : item.volume,
+      })),
+      label: type,
+      barChartColors: isStackBar ? barChartColors : barChartColor,
     });
     setLoading(false);
     return result;
@@ -123,7 +128,7 @@ function ChartBarBox(props: PropsType) {
           <div className="flex w-full md:w-auto md:h-[48px] items-center justify-between md:start text-18 md:text-32 font-medium md:font-semibold text-primary-500">
             <div className="flex items-center">
               <span>
-                {type === 'volume' && '$'}
+                {!isTransactionType && '$'}
                 {numberWithCommas(Math.ceil(totalValue))}
               </span>
               {loading && (
@@ -222,9 +227,9 @@ function ChartBarBox(props: PropsType) {
                       height={height}
                       data={chartData}
                       buckets={buckets}
-                      colorBucketMap={colorBlockchainMap}
+                      colorBucketMap={colorBucketMap}
                       getLabel={(value) =>
-                        type === 'volume' ? `$${value}` : value
+                        !isTransactionType ? `$${value}` : value
                       }
                     />
                   )}
@@ -234,7 +239,7 @@ function ChartBarBox(props: PropsType) {
             <div className="w-full rounded-normal px-20 md:w-[250px] grid grid-cols-3 md:block h-[140px] md:h-[475px] md:bg-surfacesBackground">
               {!loading &&
                 chartData?.length &&
-                Array.from(colorBlockchainMap).map((mapItem, index) => {
+                Array.from(colorBucketMap).map((mapItem, index) => {
                   const [blockchainItem, blockchainColor] = mapItem;
                   return (
                     <React.Fragment key={blockchainItem}>
@@ -247,7 +252,7 @@ function ChartBarBox(props: PropsType) {
                         </span>
                       </div>
 
-                      {index !== colorBlockchainMap.size - 1 && (
+                      {index !== colorBucketMap.size - 1 && (
                         <div className="h-[1px] hidden md:block w-full bg-neutral-300"></div>
                       )}
                     </React.Fragment>
@@ -267,9 +272,9 @@ function ChartBarBox(props: PropsType) {
                     height={height}
                     data={chartData}
                     buckets={buckets}
-                    colorBucketMap={colorBlockchainMap}
+                    colorBucketMap={colorBucketMap}
                     getLabel={(value) =>
-                      type === 'volume' ? `$ ${value}` : value
+                      !isTransactionType ? `$ ${value}` : value
                     }
                   />
                 )}

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@artsy/fresnel": "^7.1.3",
     "@lingui/react": "^4.11.4",
-    "@rango-dev/charts": "^0.1.1-next.0",
+    "@rango-dev/charts": "^0.2.1-next.5",
     "@react-spring/web": "^9.5.5",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",

diff --git a/pages/statistics.tsx b/pages/statistics.tsx
@@ -116,14 +116,14 @@ function Statistics(props: PropsType) {
           <ChartBarBox
             days={currentDays}
             blockchains={blockchains}
-            type="transaction"
+            type="Transaction"
             dailySummary={dailySummary}
             title="Transaction"
             description="Number of transactions by day"
             className="mb-10 md:mb-15"
           />
           <ChartBarBox
-            type="volume"
+            type="Volume"
             blockchains={blockchains}
             days={currentDays}
             dailySummary={dailySummary}

diff --git a/styles/globals.css b/styles/globals.css
@@ -247,3 +247,10 @@ span.ripple {
     background-size: 100% 100%;
   }
 }
+
+.visx-tooltip{
+  box-shadow: rgba(130, 130, 130, 0.2) 0px 5px 20px 0px !important;
+}
+.visx-tooltip div{
+  box-shadow: none !important;
+}