@wecodesolutions/shared-react-components-ts 0.17.2 → 0.17.5

package/src/components/chart/Chart.tsx

@@ -1,5 +1,4 @@
-// src/components/Chart.tsx
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   LineChart,
   Line,
@@ -7,48 +6,220 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip,
-  Legend,
   ResponsiveContainer,
 } from 'recharts';
+import { format } from 'date-fns';
 import styles from './Chart.module.css';
 
+type CurrencyMap = Record<string, number>;
+
+type EarningsDoc = {
+  days: Record<string, CurrencyMap>;
+  months: Record<string, CurrencyMap>;
+  years: Record<string, CurrencyMap>;
+  totalAllTime: CurrencyMap;
+  updatedAt?: any;
+};
+
+type ChartPoint = { date: string; profit: number };
+
 interface ChartProps {
-  startingAmount: number;
-  earnedAmount: number;
-  data: ChartData[];
+  earnings: EarningsDoc | null;
+}
+
+type ViewMode = 'days' | 'months' | 'years';
+type RangeMode = '1M' | '3M' | '6M' | '1Y' | '2Y' | '5Y' | 'ALL';
+
+function parseKeyToDate(mode: ViewMode, key: string): Date | null {
+  // keys are UTC-like strings. We'll treat them as UTC.
+  if (mode === 'days') return new Date(`${key}T00:00:00Z`);
+  if (mode === 'months') return new Date(`${key}-01T00:00:00Z`);
+  if (mode === 'years') return new Date(`${key}-01-01T00:00:00Z`);
+  return null;
+}
+
+function rangeToStart(range: RangeMode): Date | null {
+  const end = new Date();
+  const d = new Date(end);
+
+  if (range === 'ALL') return null;
+
+  if (range === '1M') d.setMonth(d.getMonth() - 1);
+  if (range === '3M') d.setMonth(d.getMonth() - 3);
+  if (range === '6M') d.setMonth(d.getMonth() - 6);
+  if (range === '1Y') d.setFullYear(d.getFullYear() - 1);
+  if (range === '2Y') d.setFullYear(d.getFullYear() - 2);
+  if (range === '5Y') d.setFullYear(d.getFullYear() - 5);
+
+  return d;
 }
 
-interface ChartData {
-  date: string;
-  profit: number;
-  depositMoney: number;
+function formatXAxis(mode: ViewMode, dt: Date) {
+  if (mode === 'days') return format(dt, 'MMM dd');
+  if (mode === 'months') return format(dt, 'MMM yyyy');
+  return format(dt, 'yyyy');
 }
 
-export const Chart: React.FC<ChartProps> = ({
-  startingAmount,
-  earnedAmount,
-  data,
-}) => {
-  // Formatter for currency display
-  const formatCurrency = (value: number): string => {
-    return `$${value.toLocaleString()}`;
-  };
+export const Chart: React.FC<ChartProps> = ({ earnings }) => {
+  const [mode, setMode] = useState<ViewMode>('days');
+  const [range, setRange] = useState<RangeMode>('1Y');
+
+  const currencies = useMemo(() => {
+    if (!earnings) return [];
+    const set = new Set<string>();
+
+    for (const v of Object.values(earnings.days ?? {}))
+      Object.keys(v).forEach(c => set.add(c));
+    for (const v of Object.values(earnings.months ?? {}))
+      Object.keys(v).forEach(c => set.add(c));
+    for (const v of Object.values(earnings.years ?? {}))
+      Object.keys(v).forEach(c => set.add(c));
+    Object.keys(earnings.totalAllTime ?? {}).forEach(c => set.add(c));
+
+    return Array.from(set).sort();
+  }, [earnings]);
+
+  const [currency, setCurrency] = useState<string>('');
+
+  // Keep currency synced when earnings loads
+  React.useEffect(() => {
+    if (!currency && currencies.length) setCurrency(currencies[0]);
+  }, [currencies, currency]);
+
+  const data: ChartPoint[] = useMemo(() => {
+    if (!earnings || !currency) return [];
+
+    const bucket =
+      mode === 'days'
+        ? earnings.days
+        : mode === 'months'
+        ? earnings.months
+        : earnings.years;
+
+    const start = rangeToStart(range);
+    const items: Array<{ dt: Date; value: number }> = [];
+
+    for (const [key, map] of Object.entries(bucket ?? {})) {
+      const dt = parseKeyToDate(mode, key);
+      if (!dt) continue;
+
+      if (start && dt < start) continue;
+
+      const val = Number(map?.[currency] ?? 0) || 0;
+      items.push({ dt, value: val });
+    }
+
+    items.sort((a, b) => a.dt.getTime() - b.dt.getTime());
+
+    let cumulative = 0;
+    return items.map(({ dt, value }) => {
+      cumulative += value;
+      return { date: formatXAxis(mode, dt), profit: cumulative };
+    });
+  }, [earnings, currency, mode, range]);
+
+  const earnedAmount = useMemo(() => {
+    if (!data.length) return 0;
+    return data[data.length - 1].profit ?? 0;
+  }, [data]);
+
+  const formatCurrency = (value: number): string =>
+    `${currency ? currency + ' ' : '$'}${value.toLocaleString()}`;
+
+  const rangeOptions: Array<{
+    value: RangeMode;
+    label: string;
+  }> = useMemo(() => {
+    if (mode === 'days')
+      return [
+        { value: '1M', label: '1M' },
+        { value: '3M', label: '3M' },
+        { value: '6M', label: '6M' },
+        { value: '1Y', label: '1Y' },
+        { value: 'ALL', label: 'ALL' },
+      ];
+    if (mode === 'months')
+      return [
+        { value: '6M', label: '6M' },
+        { value: '1Y', label: '1Y' },
+        { value: '2Y', label: '2Y' },
+        { value: '5Y', label: '5Y' },
+        { value: 'ALL', label: 'ALL' },
+      ];
+    return [
+      { value: '1Y', label: '1Y' },
+      { value: '2Y', label: '2Y' },
+      { value: '5Y', label: '5Y' },
+      { value: 'ALL', label: 'ALL' },
+    ];
+  }, [mode]);
+
+  if (!earnings) {
+    return <div className={styles.chartContainer}>No earnings loaded yet.</div>;
+  }
 
   return (
     <div className={styles.chartContainer}>
-      <h2 className={styles.title}>Profit vs. Deposited Money (Daily)</h2>
+      <div
+        style={{
+          display: 'flex',
+          gap: 12,
+          alignItems: 'center',
+          marginBottom: 12,
+          flexWrap: 'wrap',
+        }}
+      >
+        <h2 className={styles.title} style={{ margin: 0 }}>
+          Earnings
+        </h2>
+
+        <label>
+          View:&nbsp;
+          <select
+            value={mode}
+            onChange={e => setMode(e.target.value as ViewMode)}
+          >
+            <option value="days">Days</option>
+            <option value="months">Months</option>
+            <option value="years">Years</option>
+          </select>
+        </label>
+
+        <label>
+          Range:&nbsp;
+          <select
+            value={range}
+            onChange={e => setRange(e.target.value as RangeMode)}
+          >
+            {rangeOptions.map(o => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label>
+          Currency:&nbsp;
+          <select value={currency} onChange={e => setCurrency(e.target.value)}>
+            {currencies.map(c => (
+              <option key={c} value={c}>
+                {c}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
       <div className={styles.chartSummary}>
         <div className={styles.summaryItem}>
-          <h3>Starting Amount</h3>
-          <p>{formatCurrency(startingAmount)}</p>
-        </div>
-        <div className={styles.summaryItem}>
-          <h3>Earned Amount</h3>
+          <h3>Total Earned</h3>
           <p>{formatCurrency(earnedAmount)}</p>
         </div>
       </div>
+
       <div className={styles.chartArea}>
-        <ResponsiveContainer width="100%" height={500}>
+        <ResponsiveContainer width="100%" height={450}>
           <LineChart
             data={data}
             margin={{ top: 20, right: 20, left: -15, bottom: 20 }}
@@ -61,26 +232,30 @@ export const Chart: React.FC<ChartProps> = ({
               textAnchor="end"
               height={60}
             />
-            <YAxis tick={{ fontSize: 12 }} />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(v: number) => formatCurrency(v)}
+            />
             <Tooltip formatter={(value: number) => formatCurrency(value)} />
-            <Legend verticalAlign="top" height={36} />
+
             <Line
               type="monotone"
               dataKey="profit"
-              name="Cumulative Profit"
-              stroke="#82ca9d"
-              activeDot={{ r: 8 }}
-            />
-            <Line
-              type="monotone"
-              dataKey="depositMoney"
-              name="Cumulative Deposited Money"
-              stroke="#8884d8"
-              strokeDasharray="6 1"
+              name="Cumulative Earnings"
+              stroke="#4CAF50"
+              strokeWidth={3}
+              dot={false}
+              activeDot={{ r: 6 }}
             />
           </LineChart>
         </ResponsiveContainer>
       </div>
+
+      {!data.length && (
+        <div style={{ marginTop: 8, opacity: 0.8 }}>
+          No data for selected view/range.
+        </div>
+      )}
     </div>
   );
 };