Update sample data for echarts

RobinTTY · Dec 23, 2023 · 249e1b5 · 249e1b5
1 parent 1b429db
commit 249e1b5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 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
@@ -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<typeof LineGraph> = {
   component: LineGraph,
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof LineGraph>;
 export const Default: Story = {
   render: () => (
     <div style={{ height: '95vh' }}>
-      <LineGraph option={echartOptions} />
+      <LineGraph option={SampleLineData} />
     </div>
   ),
 };

diff --git 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
@@ -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 (
     <Box p="md" style={{ height: '100%' }}>
-      <LineGraph option={echartOptions} />
+      <LineGraph option={SampleLineData} />
       <Space h="md" />
       <StatsGrid data={gridprops} />
     </Box>