From 314661bd4b072407cc615cdfb0d86daa0c67b733 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Mon, 13 Jan 2025 14:32:41 +0000
Subject: [PATCH 1/2] Fixes padding bug on chart

---
 app/components/TimeSeriesChart.tsx | 109 +++++++++++++++--------------
 1 file changed, 55 insertions(+), 54 deletions(-)

diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index 234aeebacc..02454a75b9 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -154,59 +154,60 @@ export default function TimeSeriesChart({
   const data = useMemo(() => rawData || [], [rawData])
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <AreaChart
-        width={width}
-        height={height}
-        data={data}
-        margin={{ top: 0, right: 8, bottom: 16, left: 0 }}
-        className={cn(className, 'rounded-lg border border-default')}
-      >
-        <CartesianGrid stroke={GRID_GRAY} vertical={false} />
-        <XAxis
-          axisLine={{ stroke: GRID_GRAY }}
-          tickLine={{ stroke: GRID_GRAY }}
-          // TODO: show full given date range in the chart even if the data doesn't fill the range
-          domain={['auto', 'auto']}
-          dataKey="timestamp"
-          interval="preserveStart"
-          scale="time"
-          // TODO: use Date directly as x-axis values
-          type="number"
-          name="Time"
-          ticks={getTicks(data, 5)}
-          tickFormatter={isSameDay(startTime, endTime) ? shortTime : shortDateTime}
-          tick={textMonoMd}
-          tickMargin={8}
-        />
-        <YAxis
-          axisLine={{ stroke: GRID_GRAY }}
-          tickLine={{ stroke: GRID_GRAY }}
-          orientation="right"
-          tick={textMonoMd}
-          tickMargin={8}
-          tickFormatter={yAxisTickFormatter}
-          padding={{ top: 32 }}
-          {...yTicks}
-        />
-        {/* TODO: stop tooltip being focused by default on pageload if nothing else has been clicked */}
-        <Tooltip
-          isAnimationActive={false}
-          content={(props: TooltipProps<number, string>) => renderTooltip(props, unit)}
-          cursor={{ stroke: CURSOR_GRAY, strokeDasharray: '3,3' }}
-          wrapperStyle={{ outline: 'none' }}
-        />
-        <Area
-          dataKey="value"
-          name={title}
-          type={interpolation}
-          stroke={GREEN_600}
-          fill={GREEN_400}
-          isAnimationActive={false}
-          dot={false}
-          activeDot={{ fill: GREEN_800, r: 3, strokeWidth: 0 }}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
+    <div style={{ width: '100%', height: 300 }}>
+      <ResponsiveContainer className={cn(className, 'rounded-lg border border-default')}>
+        <AreaChart
+          width={width}
+          height={height}
+          data={data}
+          margin={{ top: 0, right: 8, bottom: 16, left: 0 }}
+        >
+          <CartesianGrid stroke={GRID_GRAY} vertical={false} />
+          <XAxis
+            axisLine={{ stroke: GRID_GRAY }}
+            tickLine={{ stroke: GRID_GRAY }}
+            // TODO: show full given date range in the chart even if the data doesn't fill the range
+            domain={['auto', 'auto']}
+            dataKey="timestamp"
+            interval="preserveStart"
+            scale="time"
+            // TODO: use Date directly as x-axis values
+            type="number"
+            name="Time"
+            ticks={getTicks(data, 5)}
+            tickFormatter={isSameDay(startTime, endTime) ? shortTime : shortDateTime}
+            tick={textMonoMd}
+            tickMargin={8}
+          />
+          <YAxis
+            axisLine={{ stroke: GRID_GRAY }}
+            tickLine={{ stroke: GRID_GRAY }}
+            orientation="right"
+            tick={textMonoMd}
+            tickMargin={8}
+            tickFormatter={yAxisTickFormatter}
+            padding={{ top: 32 }}
+            {...yTicks}
+          />
+          {/* TODO: stop tooltip being focused by default on pageload if nothing else has been clicked */}
+          <Tooltip
+            isAnimationActive={false}
+            content={(props: TooltipProps<number, string>) => renderTooltip(props, unit)}
+            cursor={{ stroke: CURSOR_GRAY, strokeDasharray: '3,3' }}
+            wrapperStyle={{ outline: 'none' }}
+          />
+          <Area
+            dataKey="value"
+            name={title}
+            type={interpolation}
+            stroke={GREEN_600}
+            fill={GREEN_400}
+            isAnimationActive={false}
+            dot={false}
+            activeDot={{ fill: GREEN_800, r: 3, strokeWidth: 0 }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   )
 }

From cddb9a0c189cbbeaab98230e6167756d11f6433b Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Mon, 13 Jan 2025 16:51:53 +0000
Subject: [PATCH 2/2] Use TW classes

---
 app/components/TimeSeriesChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index 02454a75b9..5fd8f6c2c4 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -154,7 +154,7 @@ export default function TimeSeriesChart({
   const data = useMemo(() => rawData || [], [rawData])
 
   return (
-    <div style={{ width: '100%', height: 300 }}>
+    <div className="h-[300px] w-full">
       <ResponsiveContainer className={cn(className, 'rounded-lg border border-default')}>
         <AreaChart
           width={width}