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/report-chart/histogram/chart.tsx
+++ b/apps/start/src/components/report-chart/histogram/chart.tsx
@@ -0,0 +1,109 @@
+import { useRechartDataModel } from '@/hooks/use-rechart-data-model';
+import { useTheme } from '@/hooks/use-theme';
+import { useVisibleSeries } from '@/hooks/use-visible-series';
+import type { IChartData } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';
+import React from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { useXAxisProps, useYAxisProps } from '../common/axis';
+import { ReportChartTooltip } from '../common/report-chart-tooltip';
+import { ReportTable } from '../common/report-table';
+import { useReportChartContext } from '../context';
+
+interface Props {
+  data: IChartData;
+}
+
+function BarHover({ x, y, width, height, top, left, right, bottom }: any) {
+  const themeMode = useTheme();
+  const styles = getComputedStyle(document.documentElement);
+  const def100 = styles.getPropertyValue('--def-100');
+  const def300 = styles.getPropertyValue('--def-300');
+  const bg = themeMode?.theme === 'dark' ? def100 : def300;
+  return (
+    <rect
+      {...{ x, y, width, height, top, left, right, bottom }}
+      rx="3"
+      fill={bg}
+      fillOpacity={0.5}
+    />
+  );
+}
+
+export function Chart({ data }: Props) {
+  const {
+    isEditMode,
+    report: { previous, interval },
+    options: { hideXAxis, hideYAxis },
+  } = useReportChartContext();
+  const { series, setVisibleSeries } = useVisibleSeries(data);
+  const rechartData = useRechartDataModel(series);
+  const yAxisProps = useYAxisProps({
+    hide: hideYAxis,
+  });
+  const xAxisProps = useXAxisProps({
+    hide: hideXAxis,
+    interval,
+  });
+  return (
+    <>
+      <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
+        <ResponsiveContainer>
+          <BarChart data={rechartData}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={false}
+              className="stroke-def-200"
+            />
+            <Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
+            <YAxis {...yAxisProps} />
+            <XAxis {...xAxisProps} scale={'auto'} type="category" />
+            {previous
+              ? series.map((serie) => {
+                  return (
+                    <Bar
+                      key={`${serie.id}:prev`}
+                      name={`${serie.id}:prev`}
+                      dataKey={`${serie.id}:prev:count`}
+                      fill={getChartColor(serie.index)}
+                      fillOpacity={0.3}
+                      radius={5}
+                    />
+                  );
+                })
+              : null}
+            {series.map((serie) => {
+              return (
+                <Bar
+                  key={serie.id}
+                  name={serie.id}
+                  dataKey={`${serie.id}:count`}
+                  fill={getChartColor(serie.index)}
+                  radius={5}
+                  fillOpacity={1}
+                />
+              );
+            })}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+      {isEditMode && (
+        <ReportTable
+          data={data}
+          visibleSeries={series}
+          setVisibleSeries={setVisibleSeries}
+        />
+      )}
+    </>
+  );
+}