fix: a lot of minor improvements for dashboard

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

@@ -1,14 +1,18 @@
 import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
 import { useTheme } from '@/hooks/use-theme';
 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 React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import React, { useCallback } from 'react';
 import {
   Bar,
   BarChart,
   CartesianGrid,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -43,9 +47,23 @@ function BarHover({ x, y, width, height, top, left, right, bottom }: any) {
 export function Chart({ data }: Props) {
   const {
     isEditMode,
-    report: { previous, interval },
+    report: { previous, interval, projectId, startDate, endDate, range },
     options: { hideXAxis, hideYAxis },
   } = useReportChartContext();
+  const trpc = useTRPC();
+  const references = useQuery(
+    trpc.reference.getChartReferences.queryOptions(
+      {
+        projectId,
+        startDate,
+        endDate,
+        range,
+      },
+      {
+        staleTime: 1000 * 60 * 10,
+      },
+    ),
+  );
   const { series, setVisibleSeries } = useVisibleSeries(data);
   const rechartData = useRechartDataModel(series);
   const yAxisProps = useYAxisProps({
@@ -55,17 +73,32 @@ export function Chart({ data }: Props) {
     hide: hideXAxis,
     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(),
+        });
+      }
+    }
+  }, []);
+
   return (
-    <>
+    <ReportChartTooltip.TooltipProvider references={references.data}>
       <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
         <ResponsiveContainer>
-          <BarChart data={rechartData}>
+          <BarChart data={rechartData} onClick={handleChartClick}>
             <CartesianGrid
               strokeDasharray="3 3"
               vertical={false}
               className="stroke-def-200"
             />
-            <Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
+            <Tooltip
+              content={<ReportChartTooltip.Tooltip />}
+              cursor={<BarHover />}
+            />
             <YAxis {...yAxisProps} />
             <XAxis {...xAxisProps} scale={'auto'} type="category" />
             {previous
@@ -94,6 +127,21 @@ export function Chart({ data }: Props) {
                 />
               );
             })}
+            {references.data?.map((ref) => (
+              <ReferenceLine
+                key={ref.id}
+                x={ref.date.getTime()}
+                stroke={'oklch(from var(--foreground) l c h / 0.1)'}
+                strokeDasharray={'3 3'}
+                label={{
+                  value: ref.title,
+                  position: 'centerTop',
+                  fill: '#334155',
+                  fontSize: 12,
+                }}
+                fontSize={10}
+              />
+            ))}
           </BarChart>
         </ResponsiveContainer>
       </div>
@@ -104,6 +152,6 @@ export function Chart({ data }: Props) {
           setVisibleSeries={setVisibleSeries}
         />
       )}
-    </>
+    </ReportChartTooltip.TooltipProvider>
   );
 }