Updated Scatter Chart with card component and card headers.

open-sauced · Jul 14, 2022 · 917dec4 · 917dec4
1 parent 1134127
commit 917dec4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/components/molecules/ScatterChart/scatter-chart.tsx b/components/molecules/ScatterChart/scatter-chart.tsx
@@ -1,13 +1,31 @@
 import React from "react";
+import Card from "components/atoms/Card/card";
+import Text from "components/atoms/Typography/text";
+import IconButton from "components/atoms/IconButton/icon-button";
 import EChartWrapper from "components/atoms/EChartWrapper/echart-wrapper";
 
 interface ScatterChartProps {
+    title: string;
     option: Object;
 }
 
-const ScatterChart: React.FC<ScatterChartProps> = ({ option }) => {
+const ScatterChart: React.FC<ScatterChartProps> = ({ title, option }) => {
   return (
-    <EChartWrapper option={option} />
+    <Card>
+      <>
+        <div className="w-full flex justify-between">
+          <div>
+            <Text className="!text-light-slate-12 font-medium">
+              {title}
+            </Text>
+          </div>
+          <div>
+            <IconButton />
+          </div>
+        </div>
+        <EChartWrapper option={option} />
+      </>
+    </Card>
   );
 };
 

diff --git a/stories/molecules/scatter-chart.stories.tsx b/stories/molecules/scatter-chart.stories.tsx
@@ -49,4 +49,4 @@ const ScatterChartTemplate: ComponentStory<typeof ScatterChart> = (args) => <Sca
 
 // ScatterChart Default
 export const Default = ScatterChartTemplate.bind({});
-Default.args = { option: testOptions };
+Default.args = { title: "Test Title", option: testOptions };