fix: a lot of minor improvements for dashboard

apps/start/src/components/report-chart/area/chart.tsx

@@ -1,18 +1,21 @@
 import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
 import { useVisibleSeries } from '@/hooks/use-visible-series';
 import { useTRPC } from '@/integrations/trpc/react';
+import { pushModal } from '@/modals';
 import type { IChartData } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import { useQuery } from '@tanstack/react-query';
-import { isSameDay, isSameHour, isSameMonth } from 'date-fns';
+import { isSameDay, isSameHour, isSameMonth, isSameWeek } from 'date-fns';
 import { last } from 'ramda';
 import React, { useCallback } from 'react';
 import {
   Area,
   CartesianGrid,
   ComposedChart,
+  Customized,
   Legend,
+  Line,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -20,6 +23,7 @@ import {
   YAxis,
 } from 'recharts';
 
+import { useDashedStroke } from '@/hooks/use-dashed-stroke';
 import { useXAxisProps, useYAxisProps } from '../common/axis';
 import { SolidToDashedGradient } from '../common/linear-gradient';
 import { ReportChartTooltip } from '../common/report-chart-tooltip';
@@ -63,15 +67,20 @@ export function Chart({ data }: Props) {
   const { series, setVisibleSeries } = useVisibleSeries(data);
   const rechartData = useRechartDataModel(series);
 
-  // great care should be taken when computing lastIntervalPercent
-  // the expression below works for data.length - 1 equal intervals
-  // but if there are numeric x values in a "linear" axis, the formula
-  // should be updated to use those values
-  const lastIntervalPercent =
-    ((rechartData.length - 2) * 100) / (rechartData.length - 1);
+  let dotIndex = undefined;
+  if (range === 'today') {
+    // Find closest index based on times
+    dotIndex = rechartData.findIndex((item) => {
+      return isSameHour(item.date, new Date());
+    });
+  }
 
   const lastSerieDataItem = last(series[0]?.data || [])?.date || new Date();
   const useDashedLastLine = (() => {
+    if (range === 'today') {
+      return true;
+    }
+
     if (interval === 'hour') {
       return isSameHour(lastSerieDataItem, new Date());
     }
@@ -84,6 +93,10 @@ export function Chart({ data }: Props) {
       return isSameMonth(lastSerieDataItem, new Date());
     }
 
+    if (interval === 'week') {
+      return isSameWeek(lastSerieDataItem, new Date());
+    }
+
     return false;
   })();
 
@@ -114,11 +127,34 @@ export function Chart({ data }: Props) {
     interval,
   });
 
+  const handleChartClick = useCallback((e: any) => {
+    if (e?.activePayload?.[0]) {
+      const clickedData = e.activePayload[0].payload;
+      if (clickedData.date) {
+        pushModal('AddReference', {
+          datetime: new Date(clickedData.date).toISOString(),
+        });
+      }
+    }
+  }, []);
+
+  const { getStrokeDasharray, calcStrokeDasharray, handleAnimationEnd } =
+    useDashedStroke({
+      dotIndex,
+    });
+
   return (
-    <>
+    <ReportChartTooltip.TooltipProvider references={references.data}>
       <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
         <ResponsiveContainer>
-          <ComposedChart data={rechartData}>
+          <ComposedChart data={rechartData} onClick={handleChartClick}>
+            <Customized component={calcStrokeDasharray} />
+            <Line
+              dataKey="calcStrokeDasharray"
+              legendType="none"
+              animationDuration={0}
+              onAnimationEnd={handleAnimationEnd}
+            />
             <CartesianGrid
               strokeDasharray="3 3"
               horizontal={true}
@@ -143,60 +179,62 @@ export function Chart({ data }: Props) {
             <YAxis {...yAxisProps} />
             <XAxis {...xAxisProps} />
             <Legend content={<CustomLegend />} />
-            <Tooltip content={<ReportChartTooltip />} />
+            <Tooltip content={<ReportChartTooltip.Tooltip />} />
             {series.map((serie) => {
               const color = getChartColor(serie.index);
               return (
-                <React.Fragment key={serie.id}>
-                  <defs>
-                    <linearGradient
-                      id={`color${color}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop offset="0%" stopColor={color} stopOpacity={0.8} />
-                      <stop
-                        offset={'100%'}
-                        stopColor={color}
-                        stopOpacity={0.1}
-                      />
-                    </linearGradient>
-                    {useDashedLastLine && (
-                      <SolidToDashedGradient
-                        percentage={lastIntervalPercent}
-                        baseColor={color}
-                        id={`stroke${color}`}
-                      />
-                    )}
-                  </defs>
-                  <Area
-                    stackId="1"
-                    type={lineType}
-                    name={serie.id}
-                    dataKey={`${serie.id}:count`}
-                    stroke={useDashedLastLine ? `url(#stroke${color})` : color}
-                    fill={`url(#color${color})`}
-                    isAnimationActive={false}
-                    fillOpacity={0.7}
-                  />
-                  {previous && (
-                    <Area
-                      stackId="2"
-                      type={lineType}
-                      name={`${serie.id}:prev`}
-                      dataKey={`${serie.id}:prev:count`}
-                      stroke={color}
-                      fill={color}
-                      fillOpacity={0.3}
-                      strokeOpacity={0.3}
-                      isAnimationActive={false}
-                    />
-                  )}
-                </React.Fragment>
+                <defs key={`defs-${serie.id}`}>
+                  <linearGradient
+                    id={`color${color}`}
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop offset="0%" stopColor={color} stopOpacity={0.8} />
+                    <stop offset={'100%'} stopColor={color} stopOpacity={0.1} />
+                  </linearGradient>
+                </defs>
               );
             })}
+            {series.map((serie) => {
+              const color = getChartColor(serie.index);
+              return (
+                <Area
+                  key={serie.id}
+                  stackId="1"
+                  type={lineType}
+                  name={serie.id}
+                  dataKey={`${serie.id}:count`}
+                  strokeDasharray={
+                    useDashedLastLine
+                      ? getStrokeDasharray(`${serie.id}:count`)
+                      : undefined
+                  }
+                  fill={`url(#color${color})`}
+                  isAnimationActive={false}
+                  fillOpacity={0.7}
+                />
+              );
+            })}
+            {previous &&
+              series.map((serie) => {
+                const color = getChartColor(serie.index);
+                return (
+                  <Area
+                    key={`${serie.id}:prev`}
+                    stackId="2"
+                    type={lineType}
+                    name={`${serie.id}:prev`}
+                    dataKey={`${serie.id}:prev:count`}
+                    stroke={color}
+                    fill={color}
+                    fillOpacity={0.3}
+                    strokeOpacity={0.3}
+                    isAnimationActive={false}
+                  />
+                );
+              })}
           </ComposedChart>
         </ResponsiveContainer>
       </div>
@@ -207,6 +245,6 @@ export function Chart({ data }: Props) {
           setVisibleSeries={setVisibleSeries}
         />
       )}
-    </>
+    </ReportChartTooltip.TooltipProvider>
   );
 }