feat: Update Scatter Chart Legend (#260)

* Initial commit for updating Scatter Chart Legend. * Making some progress on setting up the axis. * Making a bit more progress on the labels. * Doing more work on the eChart legends. * Updated naming of scatter chart as it was no longer generic.
open-sauced · Aug 31, 2022 · 309ef62 · 309ef62
1 parent c63863b
commit 309ef62
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 12 deletions.
diff --git a/.../molecules/ScatterChart/scatter-chart.tsx → ...dScatterChart/dashboard-scatter-chart.tsx b/.../molecules/ScatterChart/scatter-chart.tsx → ...dScatterChart/dashboard-scatter-chart.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import EChartWrapper from "components/atoms/EChartWrapper/echart-wrapper";
 import ComponentHeader from "../ComponentHeader/component-header";
 
-interface ScatterChartProps {
+interface DashboardScatterChartProps {
     title: string;
     option: Object;
 }
 
-const ScatterChart: React.FC<ScatterChartProps> = ({ title, option }) => {
+const DashboardScatterChart: React.FC<DashboardScatterChartProps> = ({ title, option }) => {
   return (
     <>
       <ComponentHeader title={title} />
@@ -16,4 +16,4 @@ const ScatterChart: React.FC<ScatterChartProps> = ({ title, option }) => {
   );
 };
 
-export default ScatterChart;
+export default DashboardScatterChart;
diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx
@@ -1,6 +1,6 @@
 import useDashBoardData from "lib/hooks/useDashboardData";
 import Card from "../../atoms/Card/card";
-import ScatterChart from "components/molecules/ScatterChart/scatter-chart";
+import DashboardScatterChart from "components/molecules/DashboardScatterChart/dashboard-scatter-chart";
 import HighlightCard from "components/molecules/HighlightCard/highlight-card";
 import humanizeNumber from "lib/utils/humanizeNumber";
 
@@ -54,7 +54,7 @@ export const Dashboard = (): JSX.Element => {
       <section className="flex flex-col lg:flex-row max-w-full gap-4 mb-6">
         <div className="flex flex-col w-full gap-4">
           <Card className="w-full p-5">
-            <ScatterChart title="Test Title" option={scatterOptions} />
+            <DashboardScatterChart title="Test Title" option={scatterOptions} />
           </Card>
         </div>
       </section>

diff --git a/stories/molecules/card-line-chart.stories.tsx b/stories/molecules/card-line-chart.stories.tsx
@@ -10,6 +10,12 @@ const storyConfig = {
 export default storyConfig;
 
 const testOptions  = {
+  grid: {
+    left: 40,
+    top: 10,
+    right: 40,
+    bottom: 20
+  },
   xAxis: {
     type: "category",
     boundaryGap: false,

diff --git a/stories/molecules/scatter-chart.stories.tsx → ...cules/dashboard-scatter-chart.stories.tsx b/stories/molecules/scatter-chart.stories.tsx → ...cules/dashboard-scatter-chart.stories.tsx
@@ -1,17 +1,52 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import ScatterChart from "../../components/molecules/ScatterChart/scatter-chart";
+import DashboardScatterChart from "../../components/molecules/DashboardScatterChart/dashboard-scatter-chart";
 
 const storyConfig = {
-  title: "Design System/Molecules/Scatter Chart",
+  title: "Design System/Molecules/Dashboard Scatter Chart",
   component: "ScatterChart"
 };
 
 export default storyConfig;
 
 const testOptions = {
-  xAxis: {},
-  yAxis: {},
+  grid: {
+    left: 40,
+    top: 10,
+    right: 40,
+    bottom: 20
+  },
+  xAxis: {
+    boundaryGap: false,
+    scale: true,
+    minInterval: 7,
+    maxInterval: 7,
+    min: 0,
+    max: 35,
+    axisLabel: {
+      formatter: (value: number, index: number) => value === 0 ? "Today" : value === 35 ? "35+ days ago" : `${value} days ago` 
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    splitNumber: 2,
+    boundaryGap: false,
+    axisLabel: {
+      showMinLabel: false,
+      formatter: "{value}%" 
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
   series: [
     {
       symbolSize: 20,
@@ -45,8 +80,43 @@ const testOptions = {
 };
 
 const testOptionsWithImage = {
-  xAxis: {},
-  yAxis: {},
+  grid: {
+    left: 40,
+    top: 10,
+    right: 40,
+    bottom: 20
+  },
+  xAxis: {
+    boundaryGap: false,
+    scale: true,
+    minInterval: 7,
+    maxInterval: 7,
+    min: 0,
+    max: 35,
+    axisLabel: {
+      formatter: (value: number, index: number) => value === 0 ? "Today" : value === 35 ? "35+ days ago" : `${value} days ago` 
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    splitNumber: 2,
+    boundaryGap: false,
+    axisLabel: {
+      showMinLabel: false,
+      formatter: "{value}%" 
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
   series: [
     {
       symbolSize: 30,
@@ -81,7 +151,7 @@ const testOptionsWithImage = {
 };
 
 // ScatterChart Template
-const ScatterChartTemplate: ComponentStory<typeof ScatterChart> = (args) => <ScatterChart {...args} />;
+const ScatterChartTemplate: ComponentStory<typeof DashboardScatterChart> = (args) => <DashboardScatterChart {...args} />;
 
 // ScatterChart Default
 export const Default = ScatterChartTemplate.bind({});