fix: improvements for frontend

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

@@ -129,7 +129,7 @@ export function Chart({ data }: Props) {
               <ReferenceLine
                 key={ref.id}
                 x={ref.date.getTime()}
-                stroke={'#94a3b8'}
+                stroke={'oklch(from var(--foreground) l c h / 0.1)'}
                 strokeDasharray={'3 3'}
                 label={{
                   value: ref.title,

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

@@ -90,7 +90,7 @@ export function Chart({ data }: Props) {
               <ReferenceLine
                 key={ref.id}
                 x={ref.date.getTime()}
-                stroke={'#94a3b8'}
+                stroke={'oklch(from var(--foreground) l c h / 0.1)'}
                 strokeDasharray={'3 3'}
                 label={{
                   value: ref.title,
@@ -114,7 +114,6 @@ export function Chart({ data }: Props) {
               strokeOpacity={0.5}
             />
             <Line
-              dot={false}
               dataKey="rate"
               stroke={getChartColor(0)}
               type={lineType}

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

@@ -6,11 +6,11 @@ import { ChevronRightIcon, InfoIcon } from 'lucide-react';
 import { alphabetIds } from '@openpanel/constants';
 
 import { createChartTooltip } from '@/components/charts/chart-tooltip';
-import { BarShapeBlue } from '@/components/charts/common-bar';
+import { BarShapeBlue, BarShapeProps } from '@/components/charts/common-bar';
 import { Tooltiper } from '@/components/ui/tooltip';
 import { WidgetTable } from '@/components/widget-table';
 import { useNumber } from '@/hooks/use-numer-formatter';
-import { getChartColor } from '@/utils/theme';
+import { getChartColor, getChartTranslucentColor } from '@/utils/theme';
 import { getPreviousMetric } from '@openpanel/common';
 import {
   Bar,
@@ -327,9 +327,17 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
               }
             />
             <YAxis {...yAxisProps} />
-            <Bar data={rechartData} dataKey="step:percent:0">
+            <Bar
+              data={rechartData}
+              dataKey="step:percent:0"
+              shape={<BarShapeProps />}
+            >
               {rechartData.map((item, index) => (
-                <Cell key={item.name} fill={getChartColor(index)} />
+                <Cell
+                  key={item.name}
+                  fill={getChartTranslucentColor(index)}
+                  stroke={getChartColor(index)}
+                />
               ))}
             </Bar>
             <Tooltip />
@@ -340,22 +348,30 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
   );
 }
 
+type Hej = RouterOutputs['chart']['funnel']['current'];
+
 const { Tooltip, TooltipProvider } = createChartTooltip<
   RechartData,
-  Record<string, unknown>
->(({ data: dataArray }) => {
+  {
+    data: RouterOutputs['chart']['funnel']['current'];
+  }
+>(({ data: dataArray, context, ...props }) => {
   const data = dataArray[0]!;
   const number = useNumber();
   const variants = Object.keys(data).filter((key) =>
     key.startsWith('step:data:'),
   ) as `step:data:${number}`[];
 
+  const index = context.data[0].steps.findIndex(
+    (step) => step.event.id === (data as any).id,
+  );
+
   return (
     <>
       <div className="flex justify-between gap-8 text-muted-foreground">
         <div>{data.name}</div>
       </div>
-      {variants.map((key, index) => {
+      {variants.map((key) => {
         const variant = data[key];
         const prevVariant = data[`prev_${key}`];
         if (!variant?.step) {

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

@@ -149,7 +149,7 @@ export function Chart({ data }: Props) {
               <ReferenceLine
                 key={ref.id}
                 x={ref.date.getTime()}
-                stroke={'#94a3b8'}
+                stroke={'oklch(from var(--foreground) l c h / 0.1)'}
                 strokeDasharray={'3 3'}
                 label={{
                   value: ref.title,

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

@@ -96,6 +96,8 @@ export default function ReportEditor({
             onChange={(newInterval) => dispatch(changeInterval(newInterval))}
             range={report.range}
             chartType={report.chartType}
+            startDate={report.startDate}
+            endDate={report.endDate}
           />
           <ReportLineType className="min-w-0 flex-1" />
         </div>