diff --git a/pwa/app/components/line_chart.jsx b/pwa/app/components/line_chart.jsx
index 7e5eecdb4c62599578a8c2b4976d276287787103..83a95c8ea45ef1ef26d74f468a9f10e795e3ff71 100644
--- a/pwa/app/components/line_chart.jsx
+++ b/pwa/app/components/line_chart.jsx
@@ -1,22 +1,28 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import * as d3 from "d3";
function LineChart({ data }) {
const chartRef = useRef(null);
- const width = 640;
+
+ const width = 940;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
- const marginLeft = 40;
+ const marginLeft = 60;
+
+ const isLoading = data.length === 0;
+
useEffect(() => {
const x = d3.scaleTime()
- .domain([new Date("2018-01-01"), new Date("2023-01-01")])
+ .domain(d3.extent(data, d => new Date(d.year, d.month - 1)))
.range([marginLeft, width - marginRight]);
const y = d3.scaleLinear()
- .domain([20000, 40000])
+ .domain([0, d3.max(data, d => d.averagePrice)])
.range([height - marginBottom, marginTop]);
const svg = d3.select(chartRef.current)
@@ -32,8 +38,8 @@ function LineChart({ data }) {
.call(d3.axisLeft(y));
const line = d3.line()
- .x(d => x(d.year))
- .y(d => y(d.price));
+ .x(d => x(new Date(d.year, d.month - 1)))
+ .y(d => y(d.averagePrice));
svg.append("path")
.datum(data)
@@ -44,7 +50,23 @@ function LineChart({ data }) {
}, [data]);
- return ;
+ return (
+
+ {isLoading && (
+
+
+
+ )}
+
+