move sdk packages to its own folder and rename api & dashboard

2024-03-11 13:15:44 +01:00
parent 1ca95442b9
commit 6d4f9010d4
318 changed files with 350 additions and 351 deletions
--- a/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import type { IChartData } from '@/app/_trpc/client';
+import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { useRechartDataModel } from '@/hooks/useRechartDataModel';
+import { useVisibleSeries } from '@/hooks/useVisibleSeries';
+import { getChartColor, theme } from '@/utils/theme';
+import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { IInterval } from '@mixan/validation';
+
+import { getYAxisWidth } from './chart-utils';
+import { useChartContext } from './ChartProvider';
+import { ReportChartTooltip } from './ReportChartTooltip';
+import { ReportTable } from './ReportTable';
+import { ResponsiveContainer } from './ResponsiveContainer';
+
+interface ReportHistogramChartProps {
+  data: IChartData;
+  interval: IInterval;
+}
+
+function BarHover({ x, y, width, height, top, left, right, bottom }: any) {
+  const bg = theme?.colors?.slate?.['200'] as string;
+  return (
+    <rect
+      {...{ x, y, width, height, top, left, right, bottom }}
+      rx="8"
+      fill={bg}
+      fillOpacity={0.5}
+    />
+  );
+}
+
+export function ReportHistogramChart({
+  interval,
+  data,
+}: ReportHistogramChartProps) {
+  const { editMode, previous } = useChartContext();
+  const formatDate = useFormatDateInterval(interval);
+  const { series, setVisibleSeries } = useVisibleSeries(data);
+  const rechartData = useRechartDataModel(series);
+  const number = useNumber();
+
+  return (
+    <>
+      <ResponsiveContainer>
+        {({ width, height }) => (
+          <BarChart width={width} height={height} data={rechartData}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
+            <XAxis
+              fontSize={12}
+              dataKey="date"
+              tickFormatter={formatDate}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              fontSize={12}
+              axisLine={false}
+              tickLine={false}
+              width={getYAxisWidth(data.metrics.max)}
+              allowDecimals={false}
+              domain={[0, data.metrics.max]}
+              tickFormatter={number.short}
+            />
+            {series.map((serie) => {
+              return (
+                <React.Fragment key={serie.name}>
+                  {previous && (
+                    <Bar
+                      key={`${serie.name}:prev`}
+                      name={`${serie.name}:prev`}
+                      dataKey={`${serie.index}:prev:count`}
+                      fill={getChartColor(serie.index)}
+                      fillOpacity={0.2}
+                      radius={8}
+                    />
+                  )}
+                  <Bar
+                    key={serie.name}
+                    name={serie.name}
+                    dataKey={`${serie.index}:count`}
+                    fill={getChartColor(serie.index)}
+                    radius={8}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </BarChart>
+        )}
+      </ResponsiveContainer>
+      {editMode && (
+        <ReportTable
+          data={data}
+          visibleSeries={series}
+          setVisibleSeries={setVisibleSeries}
+        />
+      )}
+    </>
+  );
+}