From d2db0ab2ff9b0f382a1733d0a67208fe9f822721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 21 Mar 2024 09:41:06 +0100
Subject: [PATCH] dashboard: improve ssr chart

---
 apps/dashboard/src/components/chart-ssr.tsx | 36 +++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/chart-ssr.tsx b/apps/dashboard/src/components/chart-ssr.tsx
index c84833e2..3b4c509f 100644
--- a/apps/dashboard/src/components/chart-ssr.tsx
+++ b/apps/dashboard/src/components/chart-ssr.tsx
@@ -22,9 +22,17 @@ export function ChartSSR({
     .x((d) => xScale(d.date))
     .y((d) => yScale(d.value));
 
-  const d = line(data);
+  const area = d3
+    .area<(typeof data)[number]>()
+    .curve(d3.curveMonotoneX)
+    .x((d) => xScale(d.date))
+    .y0(yScale(0))
+    .y1((d) => yScale(d.value));
 
-  if (!d) {
+  const pathLine = line(data);
+  const pathArea = area(data);
+
+  if (!pathLine) {
     return null;
   }
 
@@ -37,9 +45,31 @@ export function ChartSSR({
           className="overflow-visible"
           preserveAspectRatio="none"
         >
+          <defs>
+            <linearGradient
+              id={`gradient`}
+              x1="0"
+              y1="0"
+              x2="0"
+              y2="100%"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stopColor={'blue'} stopOpacity={0.2}></stop>
+              <stop offset="50%" stopColor={'blue'} stopOpacity={0.05}></stop>
+              <stop offset="100%" stopColor={'blue'} stopOpacity={0}></stop>
+            </linearGradient>
+          </defs>
+          {/* Gradient area */}
+          {pathArea && (
+            <path
+              d={pathArea}
+              fill={`url(#gradient)`}
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
           {/* Line */}
           <path
-            d={d}
+            d={pathLine}
             fill="none"
             className="text-blue-600"
             stroke="currentColor"