From aed9141d5624fb4a2784f6f23b286091705246da Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Sat, 5 Mar 2022 17:29:55 -0500
Subject: [PATCH] Add and configure crypto line chart
---
.../components/charts/CryptoRowLineChart.js | 20 ++++++
src/cryptometrics/constants/constants.js | 71 +++++++++++++++++++
2 files changed, 91 insertions(+)
create mode 100644 src/cryptometrics/components/charts/CryptoRowLineChart.js
diff --git a/src/cryptometrics/components/charts/CryptoRowLineChart.js b/src/cryptometrics/components/charts/CryptoRowLineChart.js
new file mode 100644
index 0000000..b569ae3
--- /dev/null
+++ b/src/cryptometrics/components/charts/CryptoRowLineChart.js
@@ -0,0 +1,20 @@
+import React, { useRef } from "react";
+import ReactECharts from "echarts-for-react";
+import { cryptoLineChartOptions } from "../../constants";
+import { useCryptoTimeSeriesData } from "../../queries";
+
+function CryptoRowLineChart({ currencyId, color }) {
+ const cryptoQuery = useCryptoTimeSeriesData(currencyId, 1, "hourly");
+ const chartRef = useRef(null);
+ return (
+ <ReactECharts
+ ref={chartRef}
+ option={cryptoLineChartOptions(cryptoQuery.data?.prices, color)}
+ style={{
+ height: "100%",
+ }}
+ />
+ );
+}
+
+export default CryptoRowLineChart;
diff --git a/src/cryptometrics/constants/constants.js b/src/cryptometrics/constants/constants.js
index 69f6af6..3c2fd29 100644
--- a/src/cryptometrics/constants/constants.js
+++ b/src/cryptometrics/constants/constants.js
@@ -65,6 +65,77 @@ export const cryptoChartOptions = (colors = [], dark = false) => {
};
};
+export const cryptoLineChartOptions = (seriesData = [], color = "#3590F3") => {
+ return {
+ grid: {
+ bottom: 10,
+ right: 10,
+ top: 10,
+ left: 10,
+ },
+ xAxis: {
+ show: false,
+ type: "time",
+ silent: false,
+ splitLine: {
+ show: false,
+ },
+ splitArea: {
+ show: false,
+ },
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ splitArea: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ min: "dataMin",
+ max: "dataMax",
+ },
+ series: [
+ {
+ type: "line",
+ data: seriesData,
+ name: "Solana",
+ smooth: true,
+ symbol: "none",
+ lineStyle: {
+ width: 3,
+ shadowOffsetY: -1,
+ color: color,
+ shadowColor: color,
+ shadowOffsetX: 0,
+ shadowBlur: 5,
+ cap: "round",
+ opacity: 1,
+ },
+ animation: false,
+ },
+ {
+ type: "scatter",
+ data: seriesData.slice(-1),
+ name: "ABC",
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 20,
+ itemStyle: {
+ shadowOffsetY: 0,
+ color: color,
+ shadowColor: color,
+ shadowOffsetX: 0,
+ shadowBlur: 15,
+ opacity: 0.1,
+ },
+ animation: false,
+ },
+ ],
+ };
+};
+
export const cryptocurrencies = [
{
id: "bitcoin",
--
GitLab