Skip to content

Commit

Permalink
fix: use of prepareBarChartData function in chart package
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikasackermn
mikasackermn committed Oct 8, 2024
1 parent d0b1260 commit ddbfa77
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 149 deletions.
111 changes: 0 additions & 111 deletions components/statistics/ChartBarBox/ChartBarBox.helper.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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 };
};
2 changes: 1 addition & 1 deletion components/statistics/ChartBarBox/ChartBarBox.type.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
35 changes: 20 additions & 15 deletions components/statistics/ChartBarBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -31,7 +31,7 @@ function ChartBarBox(props: PropsType) {
description,
className = '',
} = props;

const isTransactionType = type === 'Transaction';
const [filter, setFilter] = useState<FilterBarChart>({
source: '',
destination: '',
Expand All @@ -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);

Expand Down Expand Up @@ -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;
Expand All @@ -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 && (
Expand Down Expand Up @@ -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
}
/>
)}
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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
}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.1.1-next.8",
"@react-spring/web": "^9.5.5",
"@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
"@svgr/cli": "^8.1.0",
Expand Down
4 changes: 2 additions & 2 deletions pages/statistics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
63 changes: 44 additions & 19 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -766,12 +766,12 @@
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==

"@rango-dev/charts@^0.1.1-next.0":
version "0.1.1-next.0"
resolved "https://registry.yarnpkg.com/@rango-dev/charts/-/charts-0.1.1-next.0.tgz#c1b12ef33a290afa618bff7f43b2aeba14a7906b"
integrity sha512-EGlD9hmejNnCxKkUW43bAsp3uTcM4M6qPoz5GCfaP6PWT6WhoF1WT838AP2AO3yYg77tRpoFx1Xs5M6TjFEdVQ==
"@rango-dev/charts@^0.1.1-next.8":
version "0.1.1-next.8"
resolved "https://registry.yarnpkg.com/@rango-dev/charts/-/charts-0.1.1-next.8.tgz#8d7c34f744ebb55025f70747b45ce39a90f0c22b"
integrity sha512-WnZgXY+9+WACMtlmayswejxSDWRxtcdreapYRtJSoDP7W7hmvJnIXSnsYZWmdmmUqxazu6rHAKWTpKH6AS1ERA==
dependencies:
"@rango-dev/ui" "^0.37.1-next.2"
"@rango-dev/ui" "^0.39.1-next.6"
"@visx/axis" "2.18.0"
"@visx/event" "2.17.0"
"@visx/grid" "2.18.0"
Expand All @@ -780,10 +780,10 @@
"@visx/tooltip" "2.17.0"
dayjs "^1.11.6"

"@rango-dev/ui@^0.37.1-next.2":
version "0.37.1-next.4"
resolved "https://registry.yarnpkg.com/@rango-dev/ui/-/ui-0.37.1-next.4.tgz#9b706c5bcd90d506bf627952a61b5fbaf0e0b0a6"
integrity sha512-7RL2kI2KbEAJZ2QjJsw39QYuD4RUw+peMXy5wa4Tfxso0bWiWlKi+4J8qX44OypyWU6jKLceSQjG+Dh6CiKaMQ==
"@rango-dev/ui@^0.39.1-next.6":
version "0.39.1-next.6"
resolved "https://registry.yarnpkg.com/@rango-dev/ui/-/ui-0.39.1-next.6.tgz#014b3acb9203e7ca5ebec8213040df7c61712e35"
integrity sha512-G2kwwRwdV+yTe+2vdAkVJIa69uXPqcvbyw4pO/QH6z3T7GyVpVjXe0DWTVteyYjVxPD2cxIEs+TBPjR/dZX+JA==
dependencies:
"@radix-ui/react-checkbox" "^1.0.1"
"@radix-ui/react-collapsible" "^1.0.3"
Expand All @@ -792,25 +792,28 @@
"@radix-ui/react-select" "^2.0.0"
"@radix-ui/react-switch" "^1.0.1"
"@radix-ui/react-tooltip" "^1.0.2"
"@rango-dev/wallets-shared" "^0.36.1-next.1"
"@rango-dev/wallets-shared" "^0.37.1-next.3"
"@stitches/react" "^1.2.8"
copy-to-clipboard "^3.3.3"
rango-types "^0.1.69"
react-virtuoso "^4.6.2"

"@rango-dev/wallets-core@^0.37.1-next.1":
version "0.37.1-next.1"
resolved "https://registry.yarnpkg.com/@rango-dev/wallets-core/-/wallets-core-0.37.1-next.1.tgz#8b7015330c1430d661bb316970fb2cd84c63bb49"
integrity sha512-AOYvUO7kModmX59ITOWW/CeIvyeVLKQSEdfwYtkxz/DMLiCkJCap6pOCT5tKANUcB1eN1ng+eusej3e3RzJblQ==
"@rango-dev/wallets-core@^0.38.1-next.1":
version "0.38.1-next.1"
resolved "https://registry.yarnpkg.com/@rango-dev/wallets-core/-/wallets-core-0.38.1-next.1.tgz#26a0c4a0d0fcc03c51c09e1af789d007eef3d43e"
integrity sha512-syLnmE0c4vLeAOwRSZUeLkfWHXGY3DjuEBw8Dufcmd+BfVX+l7j4LnJpBZbawbgk60f2+UdlQovRR/QGfhfjOQ==
dependencies:
caip "^1.1.1"
immer "^10.0.4"
rango-types "^0.1.69"
zustand "^4.5.2"

"@rango-dev/wallets-shared@^0.36.1-next.1":
version "0.36.1-next.2"
resolved "https://registry.yarnpkg.com/@rango-dev/wallets-shared/-/wallets-shared-0.36.1-next.2.tgz#accb5bb7c4ea59232693edb2fa537b47bfbc2828"
integrity sha512-q4+0UKiETQe3e0ZAdqtAIbGRwG5QoGtmsyvobnG75hzmmQ0JxvgZKZfXdnklxE2PxoRY7kOcIMidBSY/Va1ZmA==
"@rango-dev/wallets-shared@^0.37.1-next.3":
version "0.37.1-next.3"
resolved "https://registry.yarnpkg.com/@rango-dev/wallets-shared/-/wallets-shared-0.37.1-next.3.tgz#7bd9d962a305c6f107519bec8c8b49fbfd4de045"
integrity sha512-6hwPF/52585nq7KARxZSU1fWvjhUWyjsrAOnMPyXtXE03t0zXm4mo4BaL53MLK3/UBkZkuQRG5QLYYQ6KdC3jQ==
dependencies:
"@rango-dev/wallets-core" "^0.37.1-next.1"
"@rango-dev/wallets-core" "^0.38.1-next.1"
ethers "^6.13.2"
rango-types "^0.1.69"

Expand Down Expand Up @@ -1778,6 +1781,11 @@ [email protected]:
dependencies:
streamsearch "^1.1.0"

caip@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/caip/-/caip-1.1.1.tgz#c2c2b598b5e052d72c35c8d81b31f864e19c61e3"
integrity sha512-a3v5lteUUOoyRI0U6qe5ayCCGkF2mCmJ5zQMDnOD2vRjgRg6sm9p8TsRC2h4D4beyqRN9RYniphAPnj/+jQC6g==

call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
Expand Down Expand Up @@ -3174,6 +3182,11 @@ ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==

immer@^10.0.4:
version "10.1.1"
resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==

immutable@^4.0.0:
version "4.3.7"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
Expand Down Expand Up @@ -4943,6 +4956,11 @@ use-sidecar@^1.1.2:
detect-node-es "^1.1.0"
tslib "^2.0.0"

[email protected]:
version "1.2.2"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==

util-deprecate@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
Expand Down Expand Up @@ -5069,3 +5087,10 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

zustand@^4.5.2:
version "4.5.5"
resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1"
integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
dependencies:
use-sync-external-store "1.2.2"

0 comments on commit ddbfa77

Please sign in to comment.