Shitty gadgets removed. Some useful gadgets added.

frontend/src/components/today/TodayBarChart.tsx

@@ -21,9 +21,10 @@ import {
 
 interface TodayBarChartProps {
   data: TodayChartBucket[];
+  colorForCode?: (code: string, index: number) => string;
 }
 
-export function TodayBarChart({ data }: TodayBarChartProps) {
+export function TodayBarChart({ data, colorForCode }: TodayBarChartProps) {
   const chartData = data.map((item) => ({
     ...item,
     shortLabel: truncateLabel(item.label),
@@ -38,7 +39,35 @@ export function TodayBarChart({ data }: TodayBarChartProps) {
         <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
         <XAxis
           dataKey="shortLabel"
-          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+          tick={
+            colorForCode
+              ? (props) => {
+                  const { x, y, payload } = props as {
+                    x: number;
+                    y: number;
+                    payload: { value: string };
+                  };
+                  const index = chartData.findIndex((row) => row.shortLabel === payload.value);
+                  const entry = chartData[index];
+                  const fill =
+                    entry != null
+                      ? colorForCode(entry.code, index >= 0 ? index : 0)
+                      : TODAY_CHART_AXIS_COLOR;
+                  return (
+                    <text
+                      x={x}
+                      y={y}
+                      dy={16}
+                      textAnchor="middle"
+                      fill={fill}
+                      fontSize={11}
+                    >
+                      {payload.value}
+                    </text>
+                  );
+                }
+              : { fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }
+          }
           axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
           tickLine={false}
           interval={0}
@@ -68,7 +97,10 @@ export function TodayBarChart({ data }: TodayBarChartProps) {
           {chartData.map((entry, index) => (
             <Cell
               key={entry.code}
-              fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
+              fill={
+                colorForCode?.(entry.code, index) ??
+                TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]
+              }
             />
           ))}
         </Bar>