feat: Implemented first draft of eChart Scatter Chart

components/atoms/EChartWrapper/echart-wrapper.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactECharts from "echarts-for-react";
+
+/* 
+Docs for eChart: https://echarts.apache.org/en/feature.html
+eChart Examples:  https://echarts.apache.org/examples/en/editor.html?c=scatter-simple&lang=ts
+Docs for ReactECharts: https://github.com/hustcc/echarts-for-react
+ */
+
+interface EChartWrapperProps {
+    option: Object;
+}
+
+const EChartWrapper: React.FC<EChartWrapperProps> = ({ option }) => {
+  return (
+    <ReactECharts
+      option={option}
+      notMerge={true}
+      lazyUpdate={true}
+      theme={"theme_name"}
+    />
+  );
+};
+
+export default EChartWrapper;

components/molecules/ScatterChart/scatter-chart.tsx

@@ -0,0 +1,32 @@
+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> = ({ title, option }) => {
+  return (
+    <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>
+  );
+};
+
+export default ScatterChart;