From f8acb100ba7e5ed12be80e97be515f5d165cd0aa Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Sat, 14 Oct 2023 05:47:00 -0700
Subject: [PATCH] chore: add shaded area

---
 .../src/components/sparkline/sparkline.tsx        | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
index a988f1765..eb2910e71 100644
--- a/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
+++ b/libs/ui-toolkit/src/components/sparkline/sparkline.tsx
@@ -1,6 +1,6 @@
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
-import { line } from 'd3-shape';
+import { area, line } from 'd3-shape';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 
@@ -62,13 +62,18 @@ export const SparklineView = ({
     preMarketData.push(marketData[0] as [number, number]);
   }
 
-  const xScale = scaleLinear().domain([0, points]).range([0, 100]);
-  const yScale = scaleLinear().domain([min, max]).range([100, 0]);
+  const xScale = scaleLinear().domain([0, points]).range([0, width]);
+  const yScale = scaleLinear().domain([min, max]).range([height, 0]);
 
   const lineSeries = line()
     .x((d) => xScale(d[0]))
     .y((d) => yScale(d[1]));
 
+  const areaSeries = area()
+    .x((d) => xScale(d[0]))
+    .y0(height)
+    .y1((d) => yScale(d[1]));
+
   // Get the color of the marketData line
   const [firstVal, lastVal] = [data[0], data[data.length - 1]];
   const strokeClassName = muted
@@ -80,6 +85,7 @@ export const SparklineView = ({
   // Create paths
   const preMarketCreationPath = lineSeries(preMarketData);
   const mainPath = lineSeries(marketData);
+  const shadedArea = areaSeries(marketData);
   const pathProps = {
     'data-testid': 'sparkline-path',
     className: `[vector-effect:non-scaling-stroke] ${strokeClassName}`,
@@ -101,6 +107,9 @@ export const SparklineView = ({
         <path {...pathProps} d={preMarketCreationPath} />
       )}
       {mainPath && <path {...pathProps} d={mainPath} />}
+      {shadedArea && (
+        <path fill="rgba(0,255,0,0.25)" stroke="none" d={shadedArea} />
+      )}
     </svg>
   );
 };