feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/components/charts/chart-tooltip.tsx
+++ b/apps/start/src/components/charts/chart-tooltip.tsx
@@ -0,0 +1,59 @@
+import { createContext, useContext as useBaseContext } from 'react';
+
+import { Tooltip as RechartsTooltip, type TooltipProps } from 'recharts';
+
+export function createChartTooltip<
+  PropsFromTooltip extends Record<string, unknown>,
+  PropsFromContext extends Record<string, unknown>,
+>(
+  Tooltip: React.ComponentType<
+    {
+      context: PropsFromContext;
+      data: PropsFromTooltip[];
+    } & TooltipProps<number, string>
+  >,
+) {
+  const context = createContext<PropsFromContext | null>(null);
+  const useContext = () => {
+    const value = useBaseContext(context);
+    if (!value) {
+      throw new Error('ChartTooltip context not found');
+    }
+    return value;
+  };
+
+  const InnerTooltip = (tooltip: TooltipProps<number, string>) => {
+    const context = useContext();
+    const data = tooltip.payload?.map((p) => p.payload) ?? [];
+
+    if (!data || !tooltip.active) {
+      return null;
+    }
+
+    return (
+      <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background/80 p-3  shadow-xl backdrop-blur-sm">
+        <Tooltip data={data} context={context} {...tooltip} />
+      </div>
+    );
+  };
+
+  return {
+    TooltipProvider: ({
+      children,
+      ...value
+    }: {
+      children: React.ReactNode;
+    } & PropsFromContext) => {
+      return (
+        <context.Provider value={value as unknown as PropsFromContext}>
+          {children}
+        </context.Provider>
+      );
+    },
+    Tooltip: (props: TooltipProps<number, string>) => {
+      return (
+        <RechartsTooltip {...props} content={<InnerTooltip {...props} />} />
+      );
+    },
+  };
+}
--- a/apps/start/src/components/charts/common-bar.tsx
+++ b/apps/start/src/components/charts/common-bar.tsx
@@ -0,0 +1,47 @@
+import { Bar } from 'recharts';
+
+type Options = {
+  borderHeight: number;
+  border: string;
+  fill: string;
+  active: { border: string; fill: string };
+};
+
+export const BarWithBorder = (options: Options) => {
+  return (props: any) => {
+    const { x, y, width, height, value, isActive } = props;
+
+    return (
+      <g>
+        <rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          stroke="none"
+          fill={isActive ? options.active.fill : options.fill}
+        />
+        {value > 0 && (
+          <rect
+            x={x}
+            y={y - options.borderHeight - 2}
+            width={width}
+            height={options.borderHeight}
+            stroke="none"
+            fill={isActive ? options.active.border : options.border}
+          />
+        )}
+      </g>
+    );
+  };
+};
+
+export const BarShapeBlue = BarWithBorder({
+  borderHeight: 2,
+  border: 'rgba(59, 121, 255, 1)',
+  fill: 'rgba(59, 121, 255, 0.3)',
+  active: {
+    border: 'rgba(59, 121, 255, 1)',
+    fill: 'rgba(59, 121, 255, 0.4)',
+  },
+});