Newer
Older
import React, { useState, useRef } from "react";
import ReactECharts from "echarts-for-react";
import { useCryptoList, useCryptoTimeSeriesRangeData } from "../../queries";
import Dropdown from "../dropdown/Dropdown";
import { ChevronDoubleRightIcon } from "@heroicons/react/outline";
import {
FcScatterPlot,
FcCandleSticks,
FcBarChart,
FcLineChart,
} from "react-icons/fc";
const unixNow = () => {
return moment().unix();
};
const unixSubtractId = (id) => {
return moment().subtract(id[0], id.substring(1)).unix();
};
const reorderCandlestickData = (data) => {
if (!data) {
return null;
}
const newData = [];
for (let i = 0; i < data.length; i++) {
newData.push([data[i][0], data[i][1], data[i][4], data[i][3], data[i][2]]);
}
return newData;
};
function CompareChart() {
const [timerange, setTimerange] = useState("6month");
const [chartType, setChartType] = useState("line");
const listOfCoins = useCryptoList("usd", 21, false);
const [firstCrypto, setFirstCrypto] = useState("solana");
const [secondCrypto, setSecondCrypto] = useState("avalanche-2");
const cryptoQuery = useCryptoTimeSeriesRangeData(
unixNow(),
chartType === "candlestick"
);
const cryptoQuery2 = useCryptoTimeSeriesRangeData(
unixNow(),
chartType === "candlestick"
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
);
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
bottom: 30,
right: 10,
top: 10,
left: 50,
},
dataZoom: [
{
type: "inside",
},
],
xAxis: {
type: "time",
silent: false,
splitLine: {
show: false,
},
splitArea: {
show: false,
},
},
yAxis: {
type: "value",
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
series: [
{
type: chartType,
data:
chartType === "candlestick" && cryptoQuery.data
? reorderCandlestickData(cryptoQuery.data)
: cryptoQuery.data?.prices,
symbol: chartType === "scatter" ? "circle" : "none",
symbolSize: 7,
lineStyle: {
width: 3,
shadowOffsetY: 1,
color: "#3590F3",
shadowColor: "#1F51FF",
shadowOffsetX: 1,
shadowBlur: 10,
},
itemStyle:
chartType === "candlestick"
? {
color: "rgba(85, 69, 255, 1)",
color0: "rgba(255, 114, 147, 1)",
borderColor: "rgba(85, 69, 255, 1)",
borderColor0: "rgba(255, 114, 147, 1)",
}
: undefined,
type: chartType,
data:
chartType === "candlestick" && cryptoQuery2.data
? reorderCandlestickData(cryptoQuery2.data)
: cryptoQuery2.data?.prices,
symbol: chartType === "scatter" ? "circle" : "none",
symbolSize: 7,
lineStyle: {
width: 3,
shadowOffsetY: 0,
color: "#06D6A0",
shadowColor: "#39FF14",
shadowOffsetX: 1,
shadowBlur: 10,
},
itemStyle:
chartType === "candlestick"
? {
color0: "#c23531",
color: "rgba(0, 235, 82, 1)",
borderColor0: "#c23531",
borderColor: "rgba(0, 235, 82, 1)",
}
: undefined,
},
],
};
return (
<div className="dark:bg-dark-600 p-8 rounded-3xl">
<div className="flex flex-row flex-1 justify-start space-x-3">
<ToggleButton
id="1hour"
active={timerange}
setActive={setTimerange}
tooltip="1 Hour"
>
<ToggleButton
id="1day"
active={timerange}
setActive={setTimerange}
tooltip="1 Day"
>
<ToggleButton
id="1week"
active={timerange}
setActive={setTimerange}
tooltip="1 Week"
>
<ToggleButton
id="1month"
active={timerange}
setActive={setTimerange}
tooltip="1 Month"
>
<ToggleButton
id="6month"
active={timerange}
setActive={setTimerange}
tooltip="6 Months"
>
<ToggleButton
id="1year"
active={timerange}
setActive={setTimerange}
tooltip="1 Year"
>
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<div className="flex flex-row flex-1 justify-center space-x-3">
<ToggleButton
id="line"
active={chartType}
setActive={setChartType}
tooltip="Line"
>
<FcLineChart size={"1.6em"} />
</ToggleButton>
<ToggleButton
id="bar"
active={chartType}
setActive={setChartType}
tooltip="Bar"
>
<FcBarChart size={"1.6em"} />
</ToggleButton>
<ToggleButton
id="scatter"
active={chartType}
setActive={setChartType}
tooltip="Scatter"
>
<FcScatterPlot size={"1.6em"} />
</ToggleButton>
<ToggleButton
id="candlestick"
active={chartType}
setActive={setChartType}
tooltip="Candlestick"
>
<FcCandleSticks size={"1.6em"} />
</ToggleButton>
</div>
<div className="flex flex-row flex-1 justify-end space-x-5 items-center">
<Dropdown
list={listOfCoins.isLoading ? [] : listOfCoins.data}
value={firstCrypto}
setValue={setFirstCrypto}
disabled={[secondCrypto]}
/>
<ChevronDoubleRightIcon className="w-5 h-5 dark:text-gray-300" />
<Dropdown
list={listOfCoins.isLoading ? [] : listOfCoins.data}
value={secondCrypto}
setValue={setSecondCrypto}
disabled={[firstCrypto]}