fix: timezone issue + improvements for funnel and conversion charts

apps/start/src/components/color-square.tsx

@@ -3,13 +3,14 @@ import { cn } from '@/utils/cn';
 
 type ColorSquareProps = HtmlProps<HTMLDivElement>;
 
-export function ColorSquare({ children, className }: ColorSquareProps) {
+export function ColorSquare({ children, className, color }: ColorSquareProps) {
   return (
     <div
       className={cn(
         'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-blue-600 text-sm font-medium text-white [.mini_&]:h-4 [.mini_&]:w-4 [.mini_&]:text-[0.6rem] font-mono',
         className,
       )}
+      style={{ backgroundColor: color }}
     >
       {children}
     </div>

apps/start/src/components/profiles/profile-metrics.tsx

@@ -92,11 +92,10 @@ export const ProfileMetrics = ({ data }: Props) => {
             label={metric.title}
             metric={{
               current:
-                metric.unit === 'timeAgo' &&
-                typeof data[metric.key] === 'string'
-                  ? new Date(data[metric.key] as string).getTime()
+                metric.unit === 'timeAgo'
+                  ? new Date(data[metric.key]).getTime()
                   : (data[metric.key] as number) || 0,
-              previous: null, // Profile metrics don't have previous period comparison
+              previous: null,
             }}
             unit={metric.unit}
             data={[]}

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

@@ -191,14 +191,16 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
                   <span>{item.total}</span>
                 </div>
 
-                <div className="col gap-1">
-                  <PreviousDiffIndicatorPure
-                    {...getPreviousMetric(item.rate, prevItem?.rate)}
-                  />
-                  <span className="text-muted-foreground">
-                    ({prevItem?.total})
-                  </span>
-                </div>
+                {!!prevItem && (
+                  <div className="col gap-1">
+                    <PreviousDiffIndicatorPure
+                      {...getPreviousMetric(item.rate, prevItem?.rate)}
+                    />
+                    <span className="text-muted-foreground">
+                      ({prevItem?.total})
+                    </span>
+                  </div>
+                )}
               </div>
             </div>
           </div>

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

@@ -6,15 +6,17 @@ 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 { Tooltiper } from '@/components/ui/tooltip';
 import { WidgetTable } from '@/components/widget-table';
 import { useNumber } from '@/hooks/use-numer-formatter';
 import { getChartColor } from '@/utils/theme';
 import { getPreviousMetric } from '@openpanel/common';
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
-  Line,
-  LineChart,
+  Cell,
   ResponsiveContainer,
   XAxis,
   YAxis,
@@ -205,8 +207,10 @@ export function Tables({
             {
               name: 'Event',
               render: (item, index) => (
-                <div className="row items-center gap-2 row min-w-0 relative">
-                  <ColorSquare>{alphabetIds[index]}</ColorSquare>
+                <div className="row items-center gap-2 min-w-0 relative">
+                  <ColorSquare color={getChartColor(index)}>
+                    {alphabetIds[index]}
+                  </ColorSquare>
                   <span className="truncate">{item.event.displayName}</span>
                 </div>
               ),
@@ -265,6 +269,7 @@ const useRechartData = ({
   return (
     firstFunnel?.steps.map((step, stepIndex) => {
       return {
+        id: step?.event.id ?? '',
         name: step?.event.displayName ?? '',
         ...current.reduce((acc, item, index) => {
           const diff = previous?.[index];
@@ -299,7 +304,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
     <TooltipProvider data={data.current}>
       <div className="aspect-video max-h-[250px] w-full p-4 card pb-1">
         <ResponsiveContainer>
-          <LineChart data={rechartData}>
+          <BarChart data={rechartData}>
             <CartesianGrid
               strokeDasharray="3 3"
               horizontal={true}
@@ -308,7 +313,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
             />
             <XAxis
               {...xAxisProps}
-              dataKey="name"
+              dataKey="id"
               allowDuplicatedCategory={false}
               type={'category'}
               scale="auto"
@@ -316,19 +321,19 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
               interval="preserveStartEnd"
               tickSize={0}
               tickMargin={4}
+              tickFormatter={(id) =>
+                data.current[0].steps.find((step) => step.event.id === id)
+                  ?.event.displayName ?? ''
+              }
             />
             <YAxis {...yAxisProps} />
-            {data.current.map((item, index) => (
-              <Line
-                stroke={getChartColor(index)}
-                key={`step:percent:${item.id}`}
-                dataKey={`step:percent:${index}`}
-                type="linear"
-                strokeWidth={2}
-              />
-            ))}
+            <Bar data={rechartData} dataKey="step:percent:0">
+              {rechartData.map((item, index) => (
+                <Cell key={item.name} fill={getChartColor(index)} />
+              ))}
+            </Bar>
             <Tooltip />
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
     </TooltipProvider>

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

@@ -44,7 +44,7 @@ export function ReportFunnelChart() {
   const trpc = useTRPC();
   const res = useQuery(
     trpc.chart.funnel.queryOptions(input, {
-      enabled: !isLazyLoading,
+      enabled: !isLazyLoading && input.events.length > 0,
     }),
   );
 

apps/start/src/components/widget-table.tsx

@@ -85,12 +85,15 @@ export function WidgetTable<T>({
               )}
             >
               {eachRow?.(item, index)}
-              <div className="grid" style={{ gridTemplateColumns }}>
+              <div
+                className="grid h-8 items-center"
+                style={{ gridTemplateColumns }}
+              >
                 {columns.map((column) => (
                   <div
                     key={column.name?.toString()}
                     className={cn(
-                      'p-2 relative cell',
+                      'px-2 relative cell',
                       columns.length > 1 && column !== columns[0]
                         ? 'text-right'
                         : 'text-left',

apps/start/src/routes/_app.$organizationId.$projectId_.dashboards_.$dashboardId.tsx

@@ -12,7 +12,6 @@ import {
 import { cn } from '@/utils/cn';
 import { createProjectTitle } from '@/utils/title';
 import {
-  ChevronRight,
   LayoutPanelTopIcon,
   MoreHorizontal,
   PlusIcon,
@@ -30,16 +29,13 @@ import { OverviewRange } from '@/components/overview/overview-range';
 import { PageContainer } from '@/components/page-container';
 import { PageHeader } from '@/components/page-header';
 import { handleErrorToastOptions, useTRPC } from '@/integrations/trpc/react';
+import { showConfirm } from '@/modals';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute, useRouter } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-// @ts-ignore - types will be installed separately
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { ReportChartLoading } from '@/components/report-chart/common/loading';
-import { ReportChartProvider } from '@/components/report-chart/context';
-import { showConfirm } from '@/modals';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);