@checkstack/slo-frontend 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @checkstack/slo-frontend
 
+## 0.3.3
+
+### Patch Changes
+
+- edc9ee0: Refactored SloTrendChart to use Recharts, fixing responsive layout issues and preventing visual distortion. The new implementation correctly scales and preserves SVG aspect ratios.
+  - @checkstack/dashboard-frontend@0.4.3
+  - @checkstack/catalog-common@1.4.1
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [3da7582]
+  - @checkstack/ui@1.5.0
+  - @checkstack/dashboard-frontend@0.4.2
+
 ## 0.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/slo-frontend",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,19 +12,20 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "1.3.1",
+    "@checkstack/catalog-common": "1.4.0",
     "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.3.34",
-    "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/signal-frontend": "0.0.15",
+    "@checkstack/dashboard-frontend": "0.4.2",
     "@checkstack/dependency-common": "0.2.1",
+    "@checkstack/frontend-api": "0.3.9",
     "@checkstack/healthcheck-common": "0.11.0",
+    "@checkstack/signal-frontend": "0.0.15",
     "@checkstack/slo-common": "0.2.0",
-    "@checkstack/ui": "1.3.6",
+    "@checkstack/ui": "1.5.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
-    "react-router-dom": "^6.20.0"
+    "react-router-dom": "^6.20.0",
+    "recharts": "^3.8.1"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

package/src/components/SloTrendChart.tsx

@@ -1,4 +1,13 @@
 import React, { useMemo } from "react";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ReferenceLine,
+} from "recharts";
 
 interface Snapshot {
   date: Date;
@@ -12,11 +21,9 @@ interface SloTrendChartProps {
 }
 
 const CHART_HEIGHT = 160;
-const CHART_PADDING = { top: 8, right: 12, bottom: 24, left: 48 };
 
 /**
- * Pure SVG line chart showing SLO availability trend from daily snapshots.
- * Draws a target line, area fill, and data line with responsive sizing.
+ * Recharts area chart showing SLO availability trend from daily snapshots.
  */
 export const SloTrendChart: React.FC<SloTrendChartProps> = ({
   snapshots,
@@ -29,155 +36,106 @@ export const SloTrendChart: React.FC<SloTrendChartProps> = ({
       (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
     );
 
+    // Format data for Recharts
+    const data = sorted.map((s) => ({
+      date: new Date(s.date).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      }),
+      availabilityPercent: s.availabilityPercent,
+      budgetRemainingPercent: s.budgetRemainingPercent,
+      fullDate: s.date,
+    }));
+
     // Y-axis range: ensure target and all data points are visible
     const allValues = sorted.map((s) => s.availabilityPercent);
     const minVal = Math.min(...allValues, target);
     const maxVal = Math.max(...allValues, 100);
     const yMin = Math.max(Math.floor(minVal - 0.5), 0);
     const yMax = Math.min(Math.ceil(maxVal + 0.5), 100);
-    const yRange = yMax - yMin || 1;
 
-    return { sorted, yMin, yMax, yRange };
+    return { data, yMin, yMax };
   }, [snapshots, target]);
 
-  if (!chartData || chartData.sorted.length < 2) {
+  if (!chartData || chartData.data.length < 2) {
     return (
       <div className="text-sm text-muted-foreground text-center py-8">
-        {chartData && chartData.sorted.length === 1
+        {chartData && chartData.data.length === 1
           ? "Need at least 2 daily snapshots to render a trend chart"
           : "No daily snapshot data available yet"}
       </div>
     );
   }
 
-  const { sorted, yMin, yMax, yRange } = chartData;
-  const drawWidth = 100 - CHART_PADDING.left - CHART_PADDING.right;
-
-  // Compute scaled positions (in viewBox %)
-  const scaleX = (index: number) =>
-    CHART_PADDING.left + (index / (sorted.length - 1)) * drawWidth;
-
-  const drawHeight = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
-  const scaleY = (value: number) =>
-    CHART_PADDING.top + ((yMax - value) / yRange) * drawHeight;
-
-  // Build SVG path for the line
-  const linePath = sorted
-    .map(
-      (s, i) =>
-        `${i === 0 ? "M" : "L"} ${scaleX(i).toFixed(2)} ${scaleY(s.availabilityPercent).toFixed(2)}`,
-    )
-    .join(" ");
-
-  // Build SVG path for the area fill
-  const areaPath = `${linePath} L ${scaleX(sorted.length - 1).toFixed(2)} ${scaleY(yMin).toFixed(2)} L ${scaleX(0).toFixed(2)} ${scaleY(yMin).toFixed(2)} Z`;
-
-  // Target line Y position
-  const targetY = scaleY(target);
-
-  // Y-axis tick values
-  const yTicks = [yMin, target, yMax].filter(
-    (v, i, arr) => arr.indexOf(v) === i,
-  );
-
-  // X-axis labels (first, middle, last)
-  const xLabels = [0, Math.floor(sorted.length / 2), sorted.length - 1]
-    .filter((v, i, arr) => arr.indexOf(v) === i)
-    .map((i) => ({
-      x: scaleX(i),
-      label: new Date(sorted[i].date).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-      }),
-    }));
+  const { data, yMin, yMax } = chartData;
 
   return (
-    <svg
-      viewBox={`0 0 100 ${CHART_HEIGHT}`}
-      className="w-full"
-      preserveAspectRatio="none"
-      style={{ height: CHART_HEIGHT }}
-    >
-      {/* Area fill */}
-      <path d={areaPath} fill="url(#slo-gradient)" opacity={0.3} />
-
-      {/* Gradient definition */}
-      <defs>
-        <linearGradient id="slo-gradient" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
-          <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0} />
-        </linearGradient>
-      </defs>
-
-      {/* Target line */}
-      <line
-        x1={CHART_PADDING.left}
-        y1={targetY}
-        x2={100 - CHART_PADDING.right}
-        y2={targetY}
-        stroke="hsl(var(--destructive))"
-        strokeWidth={0.3}
-        strokeDasharray="1 1"
-        opacity={0.6}
-      />
-
-      {/* Data line */}
-      <path
-        d={linePath}
-        fill="none"
-        stroke="hsl(var(--primary))"
-        strokeWidth={0.5}
-        strokeLinejoin="round"
-        strokeLinecap="round"
-      />
-
-      {/* Data points */}
-      {sorted.map((s, i) => (
-        <circle
-          key={i}
-          cx={scaleX(i)}
-          cy={scaleY(s.availabilityPercent)}
-          r={0.8}
-          fill="hsl(var(--primary))"
-        >
-          <title>
-            {new Date(s.date).toLocaleDateString("en-US", {
-              month: "short",
-              day: "numeric",
-            })}
-            : {s.availabilityPercent.toFixed(3)}%
-          </title>
-        </circle>
-      ))}
-
-      {/* Y-axis labels */}
-      {yTicks.map((tick) => (
-        <text
-          key={tick}
-          x={CHART_PADDING.left - 2}
-          y={scaleY(tick)}
-          textAnchor="end"
-          dominantBaseline="middle"
-          className="fill-muted-foreground"
-          fontSize={3.5}
-        >
-          {tick}%
-        </text>
-      ))}
-
-      {/* X-axis labels */}
-      {xLabels.map((item) => (
-        <text
-          key={item.x}
-          x={item.x}
-          y={CHART_HEIGHT - 4}
-          textAnchor="middle"
-          className="fill-muted-foreground"
-          fontSize={3}
+    <div className="w-full" style={{ height: CHART_HEIGHT }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={data}
+          margin={{ top: 8, right: 12, bottom: 0, left: -20 }}
         >
-          {item.label}
-        </text>
-      ))}
-    </svg>
+          <defs>
+            <linearGradient id="slo-gradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
+              <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <XAxis 
+            dataKey="date" 
+            axisLine={false} 
+            tickLine={false} 
+            tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 11 }}
+            dy={8}
+            minTickGap={30}
+          />
+          <YAxis 
+            domain={[yMin, yMax]} 
+            axisLine={false} 
+            tickLine={false} 
+            tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+            tickCount={3}
+            tickFormatter={(value) => `${value}%`}
+          />
+          <Tooltip
+            content={({ active, payload }) => {
+              // eslint-disable-next-line unicorn/no-null
+              if (!active || !payload?.length) return null;
+              const payloadData = payload[0].payload as (typeof data)[number];
+              return (
+                <div
+                  className="rounded-md border bg-popover p-2 text-sm shadow-md"
+                  style={{
+                    backgroundColor: "hsl(var(--popover))",
+                    border: "1px solid hsl(var(--border))",
+                  }}
+                >
+                  <p className="font-medium text-foreground mb-1">{payloadData.date}</p>
+                  <p className="text-primary font-bold">
+                    {payloadData.availabilityPercent.toFixed(3)}% Availability
+                  </p>
+                </div>
+              );
+            }}
+          />
+          <ReferenceLine 
+            y={target} 
+            stroke="hsl(var(--destructive))" 
+            strokeDasharray="4 4" 
+            opacity={0.6} 
+          />
+          <Area
+            type="monotone"
+            dataKey="availabilityPercent"
+            stroke="hsl(var(--primary))"
+            strokeWidth={2}
+            fill="url(#slo-gradient)"
+            activeDot={{ r: 4, fill: "hsl(var(--primary))" }}
+            isAnimationActive={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   );
 };