This repository has been archived by the owner on Sep 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
/
DataOverTimeChart.tsx
115 lines (105 loc) · 2.86 KB
/
DataOverTimeChart.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { DateTime } from "luxon";
import React, { useMemo } from "react";
import { formatNumber } from "../../lib/numbers";
import LineBarChart from "../Charts/LineBarChart";
import LineChart from "../Charts/LineChart";
import { ChartId, ChartTypes } from "./ChartIds";
import { ChartContainer } from "./ChartContainer";
import TransactionsOverTimeChart from "./TransactionsOverTimeChart";
import { SubnetResponse } from "../../lib/types/API";
import DonutChart, { DonutSeries } from "../Charts/DonutChart";
type Series = { x: Date; y1: number; y2: number };
const DataOverTimeChart = ({
chartId,
isFull = false,
}: {
chartId: ChartId;
isFull?: boolean;
}) => {
const { hook, dataKey, heading, curve } = ChartTypes.find(
({ id }) => id === chartId,
);
const height = isFull ? 400 : 250;
if (chartId === "transactions") {
return <TransactionsOverTimeChart heading={heading} isFull={isFull} />;
}
const { data } = hook();
const donutChartSeries: DonutSeries[] = useMemo(() => {
if (chartId === "canisters-per-subnet")
return (data as SubnetResponse[])
?.map(({ id, canisterCount, subnetType, nodeCount }) => ({
name: id,
value: canisterCount,
subnetType,
nodeCount,
}))
.sort((a, b) => b.value - a.value);
}, [data]);
if (chartId === "canisters-per-subnet") {
return (
<ChartContainer
isFull={isFull}
chartId={chartId}
heading={heading}
dataKey={dataKey}
isLoading={!data}
>
<DonutChart isFull={isFull} data={donutChartSeries} />
</ChartContainer>
);
}
const series: Series[] = useMemo(() => {
let sum = 0;
return data
?.map((d) => {
sum += Number(d[dataKey]);
return {
x: DateTime.fromISO(d.day).toJSDate(),
y1: Number(d[dataKey]),
y2: sum,
};
})
.concat({
x: new Date(),
y1: 0,
y2: sum,
});
}, [data]);
if (chartId === "cycles-minted") {
return (
<ChartContainer
chartId={chartId}
isFull={isFull}
heading={heading}
dataKey={dataKey}
isLoading={!data}
>
<LineChart
height={height}
data={series?.map((d) => ({ x: d.x, y: d.y2 }))}
/>
</ChartContainer>
);
}
return (
<ChartContainer
chartId={chartId}
isFull={isFull}
heading={heading}
dataKey={dataKey}
isLoading={!data}
>
<LineBarChart
data={series}
xTooltipFormat={(x) =>
DateTime.fromJSDate(x).toLocaleString(DateTime.DATE_FULL)
}
y1TooltipFormat={({ y1 }) => `New: ${formatNumber(y1)}`}
y2TooltipFormat={({ y2 }) => `Total: ${formatNumber(y2)}`}
height={height}
curve={curve}
/>
</ChartContainer>
);
};
export default DataOverTimeChart;