Shitty gadgets removed. Some useful gadgets added.

2026-07-11 03:12:56 +03:30
parent 2f8c9f0f4d
commit ed8ff61205
31 changed files with 1489 additions and 170 deletions
--- a/frontend/src/components/today/TodayHorizontalBarChart.tsx
+++ b/frontend/src/components/today/TodayHorizontalBarChart.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { TodayChartBucket } from '@/types/today';
+import {
+  TODAY_CHART_AXIS_COLOR,
+  TODAY_CHART_COLORS,
+  TODAY_CHART_GRID_COLOR,
+  TODAY_CHART_TOOLTIP_STYLE,
+} from '@/components/today/chart-theme';
+
+interface TodayHorizontalBarChartProps {
+  data: TodayChartBucket[];
+}
+
+export function TodayHorizontalBarChart({ data }: TodayHorizontalBarChartProps) {
+  const chartData = data.map((item) => ({
+    ...item,
+    shortLabel: truncateLabel(item.label, 18),
+  }));
+
+  return (
+    <ResponsiveContainer width="100%" height={Math.max(220, chartData.length * 36)}>
+      <BarChart
+        data={chartData}
+        layout="vertical"
+        margin={{ top: 4, right: 12, left: 4, bottom: 0 }}
+      >
+        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} horizontal={false} />
+        <XAxis
+          type="number"
+          allowDecimals={false}
+          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
+          tickLine={false}
+        />
+        <YAxis
+          type="category"
+          dataKey="shortLabel"
+          width={96}
+          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+          axisLine={false}
+          tickLine={false}
+        />
+        <Tooltip
+          cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
+          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+          labelFormatter={(_, payload) => {
+            const row = payload?.[0]?.payload as TodayChartBucket | undefined;
+            return row?.label ?? '';
+          }}
+        />
+        <Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
+          {chartData.map((entry, index) => (
+            <Cell
+              key={entry.code}
+              fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
+            />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
+
+function truncateLabel(label: string, max = 18): string {
+  if (label.length <= max) return label;
+  return `${label.slice(0, max - 1)}…`;
+}