dev(FlowChart): sort data

src/i18n/source.json

@@ -144,15 +144,15 @@
   "dropdown.option.60days": "60 Days",
   "dropdown.option.6months": "6 Months",
   "dropdown.option.90days": "90 Days",
+  "home.link.text_chash_flow_chart": "Cash flow chart",
+  "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",
   "pages.identityCreation.createNewIdentity.subtitle": "Personal data is stored encrypted and cannot be accessed without your signing an explicit approval",
   "pages.identityCreation.createNewIdentity.title": "Encrypted data",
   "pages.onboarding.emailVerification.continue": "Continue",
   "pages.onboarding.emailVerification.openEmailInbox": "Open email inbox",
   "pages.onboarding.emailVerification.resendCode": "Resend (30s)",
-  "pages.onboarding.emailVerification.title": "Verify your email address",
-  "home.link.text_chash_flow_chart": "Cash flow chart",
-  "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"
+  "pages.onboarding.emailVerification.title": "Verify your email address"
 }

src/pages/home/components/CashFlowChart.stories.tsx

@@ -5,29 +5,51 @@ import { data } from '@/mocks/handlers/bills/list';
 const meta = {
   title: 'Element/CashFlowChart',
   component: CashFlowChart,
-  args: { 
+  args: {
     values: []
   },
 } satisfies Meta<typeof CashFlowChart>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const randomInRange = (min: number, max: number) => {
+  return Math.random() * (max - min + 1) + min;
+};
+
+
 export const Default: Story = {
+  render: () => {
+    const randomData = (Array(Math.floor(randomInRange(5, 30))).fill(data).flat() as typeof data);
+    const toDateString = (offset: number) => new Date(Date.now() + offset).toISOString().slice(0, 10)
+    return (
+      <div className="max-w-[375px] w-screen">
+        <CashFlowChart values={randomData.map((it) => ({
+          issue_date: toDateString(randomInRange(-1_000_000_000, 1_000_000_000)),
+          sum: {...it.sum, amount: randomInRange(-100, 100).toFixed(2) }
+        }))} />
+      </div>
+    );
+  },
+};
+
+export const Uptrend: Story = {
   render: () => (
     <div className="max-w-[375px] w-screen">
-      <CashFlowChart values={data} />
+      <CashFlowChart values={data.map((it) => ({
+        ...it,
+        sum: {...it.sum, amount: String(Math.abs(parseFloat(it.sum.amount))) }
+      }))} />
     </div>
   ),
 };
 
-
 export const Downtrend: Story = {
   render: () => (
     <div className="max-w-[375px] w-screen">
       <CashFlowChart values={data.map((it) => ({
         ...it,
-        sum: {...it.sum, amount: String(-1* Math.abs(parseFloat(it.sum.amount))) }
+        sum: {...it.sum, amount: String(-1 * Math.abs(parseFloat(it.sum.amount))) }
       }))} />
     </div>
   ),

src/pages/home/components/CashFlowChart.tsx

@@ -7,10 +7,10 @@ import CurrencySelector from "./CurrencySelector";
 import { RotateCwSquareIcon } from "lucide-react";
 
 const extrapolate = (values: number[]) => {
-  const xValues = values.map((_, i) => i);
-  const slope = (values[values.length - 1] - values[values.length - 2]) / (xValues[xValues.length - 1] - xValues[xValues.length - 2]);
-  const extrapolated = values[values.length - 1] + slope * (values.length - xValues[xValues.length - 1]);
-  
+  const xs = values.map((_, i) => i);
+  const slope = (values[values.length - 1] - values[values.length - 2]) / (xs[xs.length - 1] - xs[xs.length - 2]);
+  const extrapolated = values[values.length - 1] + slope * (values.length - xs[xs.length - 1]);
+
   return extrapolated;
 };
 
@@ -45,8 +45,13 @@ type ChartPoint = {
 const toChartData = (values: Pick<Bill, 'sum' | 'issue_date'>[]) : ChartPoint[] => {
   const d0 = values.map((it) => ({
     date: it.issue_date,
+    ts: Date.parse(it.issue_date),
     value: parseFloat(it.sum.amount),
-  }))
+  })).sort((a, b) => {
+    const tsDiff = a.ts - b.ts;
+    return tsDiff !== 0 ? tsDiff : a.value - b.value;
+  });
+
   return d0.map((it, index) => ({
     date: it.date,
     value: d0.slice(0, index + 1).reduce((acc, item) => acc + item.value, 0),
@@ -68,7 +73,7 @@ const ProjectedValue = ({ value }: {value : number }) => {
       <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
         {value > 0 ? (<path d="M8 6H0L4 0L8 6Z" fill="#5FCE5F" />) : (<path d="M0 0H8L4 6L0 0Z" fill="#A32B16" />)}
       </svg>
-      <span className={`text-[${ value > 0 ? '#5FCE5F' : '#A32B16'}]`}>
+      <span className={value > 0 ? 'text-[#5FCE5F]' : 'text-[#A32B16]'}>
         {val}%
       </span>
     </>)}