feat: Develop bar graph in Dashboard (#157)

gnoswap-labs · Aug 2, 2023 · 3e33cb2 · 3e33cb2
1 parent bbcad31
commit 3e33cb2
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 4 deletions.
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.spec.tsx b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.spec.tsx
@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import VolumeChartGraph, { VolumeChartGraphProps } from "./VolumeChartGraph";
+
+describe('VolumeChartGraph Component', () => {
+  it('VolumeChartGraph render', () => {
+    const args: VolumeChartGraphProps = {
+      datas: [],
+      xAxisLabels: [],
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <VolumeChartGraph {...args} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.stories.tsx b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.stories.tsx
@@ -0,0 +1,14 @@
+import VolumeChartGraph, { type VolumeChartGraphProps } from "./VolumeChartGraph";
+import { Meta, StoryObj } from "@storybook/react";
+
+export default {
+  title: "dashboard/VolumeChartGraph",
+  component: VolumeChartGraph,
+} as Meta<typeof VolumeChartGraph>;
+
+export const Default: StoryObj<VolumeChartGraphProps> = {
+  args: {
+    datas: Array.from({ length: 24 }, (_, index) => `${index + 1}`),
+    xAxisLabels: ["09:00", "12:00", "15:00", "18:00", "21:00", "24:00"],
+  },
+};
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.styles.ts
@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import { fonts } from "@constants/font.constant";
+
+export const VolumeChartGraphWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.color.background01};
+  border-radius: 8px;
+  justify-content: space-between;
+  padding: 24px 24px 23px 24px;
+
+  .data-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 755px;
+
+    .graph {
+      border: 1px solid ${({ theme }) => theme.color.border02};
+    }
+
+    .xaxis-wrapper {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 17px;
+      margin-top: 16px;
+      justify-content: space-between;
+      ${fonts.body12};
+      color: ${({ theme }) => theme.color.text04};
+
+      span {
+        ${fonts.body12};
+        color: ${({ theme }) => theme.color.text04};
+      }
+    }
+  }
+`;
diff --git a/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx b/packages/web/src/components/dashboard/volume-chart-graph/VolumeChartGraph.tsx
@@ -0,0 +1,38 @@
+import BarGraph from "@components/common/bar-graph/BarGraph";
+import { useTheme } from "@emotion/react";
+import React from "react";
+import { VolumeChartGraphWrapper } from "./VolumeChartGraph.styles";
+
+export interface VolumeChartGraphProps {
+  datas: string[];
+  xAxisLabels: string[];
+}
+
+const VolumeChartGraph: React.FC<VolumeChartGraphProps> = ({
+  datas,
+  xAxisLabels
+}) => {
+  const theme = useTheme();
+
+  return (
+    <VolumeChartGraphWrapper>
+      <div className="data-wrapper">
+        <BarGraph
+          className="graph"
+          width={570}
+          height={180}
+          color={theme.color.background04Hover}
+          hoverColor={theme.color.point}
+          strokeWidth={12.5}
+          datas={datas}
+        />
+        <div className="xaxis-wrapper">
+          {xAxisLabels.map((label, index) =>
+            <span key={index} className="label">{label}</span>)}
+        </div>
+      </div>
+    </VolumeChartGraphWrapper>
+  );
+};
+
+export default VolumeChartGraph;
diff --git a/packages/web/src/components/dashboard/volume-chart/VolumeChart.spec.tsx b/packages/web/src/components/dashboard/volume-chart/VolumeChart.spec.tsx
@@ -8,8 +8,9 @@ describe("VolumeChart Component", () => {
   it("VolumeChart render", () => {
     const mockProps = {
       volumeChartType: CHART_TYPE["7D"],
-      changeVolumeChartType: () => {},
+      changeVolumeChartType: () => { },
       volumePriceInfo: { amount: "$100,450,000", fee: "$12,231" },
+      volumeChartInfo: { xAxisLabels: [], datas: [] },
     };
 
     render(

diff --git a/packages/web/src/components/dashboard/volume-chart/VolumeChart.stories.tsx b/packages/web/src/components/dashboard/volume-chart/VolumeChart.stories.tsx
@@ -18,4 +18,8 @@ Default.args = {
   volumeChartType: CHART_TYPE["7D"],
   changeVolumeChartType: action("changeVolumeChartType"),
   volumePriceInfo: { amount: "$100,450,000", fee: "$12,231" },
+  volumeChartInfo: {
+    datas: Array.from({ length: 24 }, (_, index) => `${index + 1}`),
+    xAxisLabels: ["09:00", "12:00", "15:00", "18:00", "21:00", "24:00"],
+  },
 };
diff --git a/packages/web/src/components/dashboard/volume-chart/VolumeChart.tsx b/packages/web/src/components/dashboard/volume-chart/VolumeChart.tsx
@@ -1,21 +1,23 @@
 import React from "react";
 import { CHART_TYPE } from "@constants/option.constant";
-import { VolumePriceInfo } from "@containers/volume-chart-container/VolumeChartContainer";
-import VolumeChartInfo from "../volume-chart-info/VolumeChartInfo";
+import { VolumeChartInfo, VolumePriceInfo } from "@containers/volume-chart-container/VolumeChartContainer";
 import VolumeChartPriceInfo from "../volume-chart-price-info/VolumeChartPriceInfo";
 import VolumeChartSelectTab from "../volume-chart-select-tab/VolumeChartSelectTab";
 import { VolumeChartWrapper, ChartWrapper } from "./VolumeChart.styles";
+import VolumeChartGraph from "../volume-chart-graph/VolumeChartGraph";
 
 interface VolumeChartItemProps {
   volumeChartType: CHART_TYPE;
   changeVolumeChartType: (newType: string) => void;
   volumePriceInfo: VolumePriceInfo;
+  volumeChartInfo: VolumeChartInfo;
 }
 
 const VolumeChart: React.FC<VolumeChartItemProps> = ({
   volumeChartType,
   changeVolumeChartType,
   volumePriceInfo,
+  volumeChartInfo,
 }) => (
   <VolumeChartWrapper>
     <VolumeChartPriceInfo volumePriceInfo={volumePriceInfo} />
@@ -24,7 +26,10 @@ const VolumeChart: React.FC<VolumeChartItemProps> = ({
         volumeChartType={volumeChartType}
         changeVolumeChartType={changeVolumeChartType}
       />
-      <VolumeChartInfo />
+      <VolumeChartGraph
+        xAxisLabels={volumeChartInfo.xAxisLabels}
+        datas={volumeChartInfo.datas}
+      />
     </ChartWrapper>
   </VolumeChartWrapper>
 );

diff --git a/packages/web/src/containers/volume-chart-container/VolumeChartContainer.tsx b/packages/web/src/containers/volume-chart-container/VolumeChartContainer.tsx
@@ -8,11 +8,52 @@ export interface VolumePriceInfo {
   fee: string;
 }
 
+export interface VolumeChartInfo {
+  datas: string[];
+  xAxisLabels: string[];
+}
+
 const initialVolumePriceInfo: VolumePriceInfo = {
   amount: "$994,120,000",
   fee: "$12,231",
 };
 
+function createXAxisDummyDatas(currentTab: CHART_TYPE) {
+  const now = Date.now();
+  switch (currentTab) {
+    case "7D":
+      return Array.from({ length: 8 }, (_, index) => {
+        const date = new Date(now);
+        date.setDate(date.getDate() - 1 * index);
+        const monthStr = `${date.getMonth() + 1}`.padStart(2, "0");
+        const dateStr = `${date.getDate()}`.padStart(2, "0");
+        return `${monthStr}-${dateStr}`;
+      }).reverse();
+    case "1M":
+      return Array.from({ length: 8 }, (_, index) => {
+        const date = new Date(now);
+        date.setMonth(date.getMonth() - 1 * index);
+        const yearStr = date.getFullYear();
+        const monthStr = `${date.getMonth() + 1}`.padStart(2, "0");
+        return `${yearStr}-${monthStr}`;
+      }).reverse();
+    case "1Y":
+    case "YTD":
+    default:
+      return Array.from({ length: 8 }, (_, index) => {
+        const date = new Date(now);
+        date.setFullYear(date.getFullYear() - 1 * index);
+        const yearStr = date.getFullYear();
+        return `${yearStr}`;
+      }).reverse();
+  }
+}
+
+function createDummyAmountDatas() {
+  const length = 24;
+  return Array.from({ length }, () => `${Math.round(Math.random() * 50) + 1}`);
+}
+
 async function fetchVolumePriceInfo(): Promise<VolumePriceInfo> {
   return new Promise(resolve => setTimeout(resolve, 2000)).then(() =>
     Promise.resolve({ amount: "$100,450,000", fee: "$12,232" }),
@@ -37,11 +78,24 @@ const VolumeChartContainer: React.FC = () => {
     setVolumeChartType(volumeChartType);
   }, []);
 
+  const getChartInfo = useCallback(() => {
+    const xAxisLabels = createXAxisDummyDatas(volumeChartType);
+    const datas = createDummyAmountDatas();
+
+    const chartInfo: VolumeChartInfo = {
+      xAxisLabels,
+      datas: datas,
+    };
+
+    return chartInfo;
+  }, [volumeChartType]);
+
   return (
     <VolumeChart
       volumeChartType={volumeChartType}
       changeVolumeChartType={changeVolumeChartType}
       volumePriceInfo={volumePriceInfo}
+      volumeChartInfo={getChartInfo()}
     />
   );
 };