feat(frontend): исправлен график

services/frontend/src/widgets/audioLive/ui/FrequencyHistoryChart.tsx

@@ -1,3 +1,4 @@
+import { memo, useMemo } from "react";
 import {
   Line,
   LineChart,
@@ -16,7 +17,7 @@ import type { AudioSample } from "../../../entities/audioSample/model/types";
 import { formatTimeHHMMSS } from "../../../shared/lib/time";
 
 type Props = {
-  history: AudioSample[];
+  history?: AudioSample[];
 };
 
 type ChartPoint = {
@@ -24,17 +25,24 @@ type ChartPoint = {
   freq_hz: number;
 };
 
-export function FrequencyHistoryChart({ history }: Props) {
-  const data: ChartPoint[] = history.map((s) => ({
-    timeMs: s.timeMs,
-    freq_hz: s.freq_hz,
-  }));
+const Y_MIN = 129;
+const Y_MAX = 5500;
+
+const Y_TICKS = [130, 200, 300, 440, 660, 880, 1000, 2000, 3000, 4000, 5500];
+
+export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
+  history = [],
+}: Props) {
+  const data: ChartPoint[] = useMemo(() => {
+    return history.map((s) => ({ timeMs: s.timeMs, freq_hz: s.freq_hz }));
+  }, [history]);
 
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">Frequency (last 60s)</CardTitle>
+        <CardTitle className="text-base">Frequency</CardTitle>
       </CardHeader>
+
       <CardContent>
         <div className="h-56 w-full">
           <ResponsiveContainer width="100%" height="100%">
@@ -49,15 +57,27 @@ export function FrequencyHistoryChart({ history }: Props) {
                 tickFormatter={(v) => formatTimeHHMMSS(Number(v))}
                 tick={{ fontSize: 12 }}
               />
-              <YAxis domain={[20, 8000]} tick={{ fontSize: 12 }} width={44} />
+
+              <YAxis
+                type="number"
+                scale="log"
+                domain={[Y_MIN, Y_MAX]}
+                ticks={Y_TICKS}
+                allowDataOverflow
+                tick={{ fontSize: 12 }}
+                width={52}
+                tickFormatter={(v) => `${Number(v).toFixed(0)}`}
+              />
+
               <Tooltip
                 labelFormatter={(v) => formatTimeHHMMSS(Number(v))}
                 formatter={(v) => [`${Number(v).toFixed(0)} Hz`, "freq"]}
               />
+
               <Line
                 type="monotone"
                 dataKey="freq_hz"
-                stroke="hsl(var(--primary))"
+                stroke="oklch(0.208 0.042 265.755)"
                 strokeWidth={2}
                 dot={false}
                 isAnimationActive={false}
@@ -68,4 +88,4 @@ export function FrequencyHistoryChart({ history }: Props) {
       </CardContent>
     </Card>
   );
-}
+});