dev(FlowChart): add storybook

BitcreditProtocol · Jan 9, 2025 · b6146d5 · b6146d5
1 parent 854e2dd
commit b6146d5
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 44 deletions.
diff --git a/src/i18n/source.json b/src/i18n/source.json
@@ -144,5 +144,6 @@
   "dropdown.option.90days": "90 Days",
   "page.cashflow.title": "Cash flow",
   "page.chartflow.chart.projection.label": "Projection",
+  "page.chartflow.chart.text_empty": "No data available",
   "page.chartflow.chart.title": "Cash flow"
 }
diff --git a/src/mocks/handlers/bills/list.ts b/src/mocks/handlers/bills/list.ts
@@ -1,7 +1,7 @@
 import { http, delay, HttpResponse } from "msw";
 import { Bill } from "@/types/bill";
 
-const data = [
+export const data = [
   {
     bill_name: "xxs1",
     role: "payee",

diff --git a/src/pages/home/components/CashFlowChart.stories.tsx b/src/pages/home/components/CashFlowChart.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta,  StoryObj } from '@storybook/react';
+import CashFlowChart from './CashFlowChart';
+import { data } from '@/mocks/handlers/bills/list';
+
+const meta = {
+  title: 'Element/CashFlowChart',
+  component: CashFlowChart,
+  args: { 
+    values: []
+  },
+} satisfies Meta<typeof CashFlowChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-[375px] w-screen">
+      <CashFlowChart values={data} />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div className="max-w-[375px] w-screen">
+      <CashFlowChart values={[]} />
+    </div>
+  ),
+};
diff --git a/src/pages/home/components/CashFlowChart.tsx b/src/pages/home/components/CashFlowChart.tsx
@@ -11,15 +11,15 @@ type ChartPoint = {
   value: number
 }
 
-const toChartData = (values: Bill[]) : ChartPoint[] => {
+const toChartData = (values: Pick<Bill, 'sum' | 'issue_date'>[]) : ChartPoint[] => {
   return values.map((it) => ({
     date: it.issue_date,
     value: parseFloat(it.sum.amount),
   }));
 };
 
 type ChashFlowChartProps = {
-  values: Bill[]
+  values: Pick<Bill, 'sum' | 'issue_date'>[]
 }
 
 export default function ChashFlowChart({ values }: ChashFlowChartProps) {
@@ -28,7 +28,7 @@ export default function ChashFlowChart({ values }: ChashFlowChartProps) {
   return (
     <div className="flex flex-col gap-2 w-full bg-elevation-200 border-[1px] border-divider-50 rounded-lg">
       <div className="flex flex-col gap-1 mt-4 px-4 pb-2 border-b-[1px] border-divider-75">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-2">
           <span className="text-xs text-[#1B0F0080]">
             <FormattedMessage
               id="page.chartflow.chart.title"
@@ -38,50 +38,61 @@ export default function ChashFlowChart({ values }: ChashFlowChartProps) {
           </span>
           <RotateCwSquareIcon size={16} strokeWidth={1} color="#1B0F00" />
         </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">
-              <FormattedMessage
-                id="page.chartflow.chart.projection.label"
-                defaultMessage="Projection"
-                description="Projection label for Cash flow chart"
-              />
-            </span>
-            <div className="flex items-center gap-1">
-              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8 6H0L4 0L8 6Z" fill="#5FCE5F"/>
-              </svg>
-              <span className="text-xs text-[#5FCE5F] font-mono">
-                + 2.31%
+
+        {data.length > 0 && (<>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-text-300 font-medium">
+                <FormattedMessage
+                  id="page.chartflow.chart.projection.label"
+                  defaultMessage="Projection"
+                  description="Projection label for Cash flow chart"
+                />
               </span>
+              <div className="flex items-center gap-1">
+                  <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8 6H0L4 0L8 6Z" fill="#5FCE5F"/>
+                  </svg>
+                  <span className="text-xs text-[#5FCE5F] font-mono">
+                    + 2.31%
+                  </span>
+              </div>
             </div>
+            <CurrencySelector
+              value="BTC"
+              onChange={(currency) => {
+                console.log(currency);
+              }}
+            />
           </div>
-          <CurrencySelector
-            value="BTC"
-            onChange={(currency) => {
-              console.log(currency);
-            }}
-          />
-        </div>
+        </>)}
       </div>
-      <ResponsiveContainer width="100%" height={300}>
-        <LineChart
-          data={data}
-          margin={{
-            top: 5,
-            right: 0,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <XAxis dataKey="date" />
-          <YAxis orientation="right" tick={({ x, y, payload } : {x :number, y:number, payload: ChartPoint}) => {
-            return (<text x={x + 20} y={y + 5} fill="#8D8579" textAnchor="middle" >{payload.value / 1000}k</text>)
-          }} />
-          <Tooltip cursor={true} isAnimationActive={true} />
-          <Line type="step" dataKey="value" stroke="#5FCE5F" />
-        </LineChart>
-      </ResponsiveContainer>
+      {data.length === 0 ? (<div className="flex justify-center p-8 text-xs text-text-200">
+        <FormattedMessage
+          id="page.chartflow.chart.text_empty"
+          defaultMessage="No data available"
+          description="Text for empty data in Cash flow chart"
+        />
+      </div>) : (<>
+        <ResponsiveContainer width="100%" height={300} className="text-text-300">
+          <LineChart
+            data={data}
+            margin={{
+              top: 5,
+              right: 0,
+              left: 0,
+              bottom: 5,
+            }}
+          >
+            <XAxis dataKey="date" />
+            <YAxis orientation="right" tick={({ x, y, payload } : {x :number, y:number, payload: ChartPoint}) => {
+              return (<text x={x + 20} y={y + 5} fill="#8D8579" textAnchor="middle" >{payload.value / 1000}k</text>)
+            }} />
+            <Tooltip cursor={true} isAnimationActive={true} />
+            <Line type="step" dataKey="value" stroke="#5FCE5F" />
+          </LineChart>
+        </ResponsiveContainer>
+      </>)}
     </div>
   );
 }