From 249e1b555933e8502d48841d4a1796d64042e954 Mon Sep 17 00:00:00 2001 From: RobinTTY Date: Sat, 23 Dec 2023 11:53:43 +0100 Subject: [PATCH] Update sample data for echarts --- .../graphs/line-graph/LineGraph.story.tsx | 4 +- .../graphs/line-graph/SampleLineData.ts | 159 ++++-------------- src/client/src/routes/Dashboard.tsx | 4 +- 3 files changed, 39 insertions(+), 128 deletions(-) diff --git a/src/client/src/components/graphs/line-graph/LineGraph.story.tsx b/src/client/src/components/graphs/line-graph/LineGraph.story.tsx index 78e3963..e047e26 100644 --- a/src/client/src/components/graphs/line-graph/LineGraph.story.tsx +++ b/src/client/src/components/graphs/line-graph/LineGraph.story.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { LineGraph } from './LineGraph'; -import { echartOptions } from './SampleLineData'; +import { SampleLineData } from './SampleLineData'; const meta: Meta = { component: LineGraph, @@ -13,7 +13,7 @@ type Story = StoryObj; export const Default: Story = { render: () => (
- +
), }; diff --git a/src/client/src/components/graphs/line-graph/SampleLineData.ts b/src/client/src/components/graphs/line-graph/SampleLineData.ts index 766fc02..43a3e2f 100644 --- a/src/client/src/components/graphs/line-graph/SampleLineData.ts +++ b/src/client/src/components/graphs/line-graph/SampleLineData.ts @@ -1,21 +1,5 @@ import { EChartProps } from '@components/graphs/line-graph/EChartProps'; -export const echartOptions: EChartProps["option"] = { - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line' - }, - ], -}; - const endDate = new Date(); const netWorth = [3360, 4241, 5816, 7115, 7567, 8374, 9564, 11835, 11532, 12315, 13147, 13421]; @@ -36,113 +20,40 @@ const portfolioValue = [ getPortfolioValue(11), ]; -export const SampleLineData = [ - { - id: 'Net Worth', - color: 'hsl(289, 70%, 50%)', - data: [ - { - x: new Date(endDate.getTime() - 12 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[0], - }, - { - x: new Date(endDate.getTime() - 11 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[1], - }, - { - x: new Date(endDate.getTime() - 10 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[2], - }, - { - x: new Date(endDate.getTime() - 9 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[3], - }, - { - x: new Date(endDate.getTime() - 8 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[4], - }, - { - x: new Date(endDate.getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[5], - }, - { - x: new Date(endDate.getTime() - 6 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[6], - }, - { - x: new Date(endDate.getTime() - 5 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[7], - }, - { - x: new Date(endDate.getTime() - 4 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[8], - }, - { - x: new Date(endDate.getTime() - 3 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[9], - }, - { - x: new Date(endDate.getTime() - 2 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[10], - }, - { - x: new Date(endDate.getTime() - 1 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: netWorth[11], - }, - ], +const dates = [ + new Date(endDate.getTime() - 12 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 11 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 10 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 9 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 8 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 6 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 5 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 4 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 3 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 2 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), + new Date(endDate.getTime() - 1 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), +]; + +export const SampleLineData: EChartProps['option'] = { + tooltip: { + trigger: 'axis', }, - { - id: 'Stocks', - color: 'hsl(306, 70%, 50%)', - data: [ - { - x: new Date(endDate.getTime() - 12 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[0], - }, - { - x: new Date(endDate.getTime() - 11 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[1], - }, - { - x: new Date(endDate.getTime() - 10 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[2], - }, - { - x: new Date(endDate.getTime() - 9 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[3], - }, - { - x: new Date(endDate.getTime() - 8 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[4], - }, - { - x: new Date(endDate.getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[5], - }, - { - x: new Date(endDate.getTime() - 6 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[6], - }, - { - x: new Date(endDate.getTime() - 5 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[7], - }, - { - x: new Date(endDate.getTime() - 4 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[8], - }, - { - x: new Date(endDate.getTime() - 3 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[9], - }, - { - x: new Date(endDate.getTime() - 2 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[10], - }, - { - x: new Date(endDate.getTime() - 1 * 24 * 60 * 60 * 1000).toLocaleDateString('de'), - y: portfolioValue[11], - }, - ], + xAxis: { + type: 'category', + data: dates, }, -]; + yAxis: { + type: 'value', + }, + series: [ + { + data: [3360, 4241, 5816, 7115, 7567, 8374, 9564, 11835, 11532, 12315, 13147, 13421], + type: 'line', + }, + { + data: portfolioValue, + type: 'line', + }, + ], +}; diff --git a/src/client/src/routes/Dashboard.tsx b/src/client/src/routes/Dashboard.tsx index 3996881..56168ee 100644 --- a/src/client/src/routes/Dashboard.tsx +++ b/src/client/src/routes/Dashboard.tsx @@ -2,7 +2,7 @@ import { Box, Space } from '@mantine/core'; import { StatCardProps } from '@components/stat-card/StatCardProps'; import { LineGraph } from '@components/graphs/line-graph/LineGraph'; import { StatsGrid } from '@components/stat-grid/StatsGrid'; -import { echartOptions } from '@/components/graphs/line-graph/SampleLineData'; +import { SampleLineData } from '@/components/graphs/line-graph/SampleLineData'; export const Dashboard = () => { const gridprops: StatCardProps[] = [ @@ -19,7 +19,7 @@ export const Dashboard = () => { return ( - +