Adjust gradient in the time series charts (#3931)

* fix #3910 * updates to restore gradient * final fix
rilldata · Jan 30, 2024 · addc7ce · addc7ce · github-actions · Jan 30, 2024
1 parent 0d24253
commit addc7ce
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/web-common/src/components/data-graphic/marks/ChunkedLine.svelte b/web-common/src/components/data-graphic/marks/ChunkedLine.svelte
@@ -22,10 +22,7 @@ Over time, we'll make this the default Line implementation, but it's not quite t
     areaFactory,
     lineFactory,
   } from "@rilldata/web-common/components/data-graphic/utils";
-  import {
-    AreaMutedColor,
-    LineMutedColor,
-  } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
+  import { LineMutedColor } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
   import { guidGenerator } from "@rilldata/web-common/lib/guid";
   import { interpolatePath } from "d3-interpolate-path";
   import { getContext } from "svelte";
@@ -35,17 +32,19 @@ Over time, we'll make this the default Line implementation, but it's not quite t
   export let yAccessor: string;
 
   export let isComparingDimension = false;
-  export let area = true;
+
   /** time in ms to trigger a delay when the underlying data changes */
   export let delay = 0;
   export let duration = 400;
 
   export let stopOpacity = 0.3;
   // FIXME – this is a different prop than elsewhere
   export let lineColor = LineMutedColor;
-  export let areaColor = AreaMutedColor;
+  export let areaGradientColors: [string, string] | null = null;
   export let lineClasses = "";
 
+  $: area = areaGradientColors !== null;
+
   const id = guidGenerator();
 
   // get the scale functions from the data graphic
@@ -141,7 +140,7 @@ Over time, we'll make this the default Line implementation, but it's not quite t
         style="clip-path: url(#path-segments-{id})"
       />
     </WithTween>
-    {#if area}
+    {#if areaGradientColors !== null}
       <WithTween
         value={areaFunction(yAccessor)(delayedFilteredData)}
         tweenProps={{
@@ -157,13 +156,23 @@ Over time, we'll make this the default Line implementation, but it's not quite t
           style="clip-path: url(#path-segments-{id})"
         />
       </WithTween>
+      <defs>
+        <linearGradient id="gradient-{id}" x1="0" x2="0" y1="0" y2="1">
+          <stop
+            offset="5%"
+            stop-color={areaGradientColors[0]}
+            stop-opacity={stopOpacity}
+          />
+          <stop
+            offset="95%"
+            stop-color={areaGradientColors[1]}
+            stop-opacity={stopOpacity}
+          />
+        </linearGradient>
+      </defs>
     {/if}
     <!-- clip rects for segments -->
     <defs>
-      <linearGradient id="gradient-{id}" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="5%" stop-color={areaColor} />
-        <stop offset="95%" stop-color={areaColor} stop-opacity={stopOpacity} />
-      </linearGradient>
       <clipPath id="path-segments-{id}">
         {#each delayedSegments as segment (segment[0][xAccessor])}
           {@const x = $xScale(segment[0][xAccessor])}

diff --git a/web-common/src/components/data-graphic/marks/ClippedChunkedLine.svelte b/web-common/src/components/data-graphic/marks/ClippedChunkedLine.svelte
@@ -15,8 +15,8 @@
   export let delay;
   export let duration;
 
-  export let lineColor = "hsla(217,60%, 55%, 1)";
-  export let areaColor = "hsla(217,70%, 80%, .4)";
+  export let lineColor: string;
+  export let areaGradientColors: [string, string];
 
   const xScale = getContext(contexts.scale("x")) as ScaleStore;
 </script>
@@ -35,7 +35,7 @@
   <g clip-path="url(#clip)">
     <ChunkedLine
       {lineColor}
-      {areaColor}
+      {areaGradientColors}
       {delay}
       {duration}
       {data}

diff --git a/web-common/src/features/dashboards/time-series/ChartBody.svelte b/web-common/src/features/dashboards/time-series/ChartBody.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import {
-    AreaMutedColor,
-    MainAreaColor,
-    LineMutedColor,
+    MainAreaColorGradientDark,
+    MainAreaColorGradientLight,
     MainLineColor,
     TimeComparisonLineColor,
+    AreaMutedColorGradientDark,
+    AreaMutedColorGradientLight,
+    LineMutedColor,
   } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
   import { writable } from "svelte/store";
   import {
@@ -31,7 +33,16 @@
 
   $: mainLineColor = hasSubrangeSelected ? LineMutedColor : MainLineColor;
 
-  $: areaColor = hasSubrangeSelected ? AreaMutedColor : MainAreaColor;
+  const focusedAreaGradient: [string, string] = [
+    MainAreaColorGradientDark,
+    MainAreaColorGradientLight,
+  ];
+
+  $: areaGradientColors = (
+    hasSubrangeSelected
+      ? [AreaMutedColorGradientDark, AreaMutedColorGradientLight]
+      : focusedAreaGradient
+  ) as [string, string];
 
   $: isDimValueHiglighted =
     dimensionValue !== undefined &&
@@ -78,7 +89,6 @@
         class:opacity-20={isDimValueHiglighted && !isHighlighted}
       >
         <ChunkedLine
-          area={false}
           isComparingDimension
           delay={$timeRangeKey !== $previousTimeRangeKey ? 0 : delay}
           duration={hasSubrangeSelected ||
@@ -100,7 +110,6 @@
         class:opacity-40={!isHovering}
       >
         <ChunkedLine
-          area={false}
           lineColor={TimeComparisonLineColor}
           delay={$timeRangeKey !== $previousTimeRangeKey ? 0 : delay}
           duration={hasSubrangeSelected ||
@@ -115,7 +124,7 @@
     {/if}
     <ChunkedLine
       lineColor={mainLineColor}
-      {areaColor}
+      {areaGradientColors}
       delay={$timeRangeKey !== $previousTimeRangeKey ? 0 : delay}
       duration={hasSubrangeSelected || $timeRangeKey !== $previousTimeRangeKey
         ? 0
@@ -129,7 +138,7 @@
         start={Math.min(scrubStart, scrubEnd)}
         end={Math.max(scrubStart, scrubEnd)}
         lineColor={MainLineColor}
-        areaColor={MainAreaColor}
+        areaGradientColors={focusedAreaGradient}
         delay={0}
         duration={0}
         {data}

diff --git a/web-common/src/features/dashboards/time-series/chart-colors.ts b/web-common/src/features/dashboards/time-series/chart-colors.ts
@@ -4,12 +4,14 @@
  * whole line is focused.
  */
 export const MainLineColor = "var(--color-primary-500)";
+
 /**
- * Color used for the focused arae in time series chart,
+ * Colors used for the focused arae in time series chart,
  * including when there is no scrubbing and thus the
  * whole chart is focused.
  */
-export const MainAreaColor = "var(--color-primary-200)";
+export const MainAreaColorGradientDark = "var(--color-primary-300)";
+export const MainAreaColorGradientLight = "var(--color-primary-50)";
 
 /**
  * Color used for the time series comparison
@@ -24,7 +26,8 @@ export const LineMutedColor = "var(--color-muted-500)";
 /**
  * Color used for the unfocused area in time series chart,
  */
-export const AreaMutedColor = "var(--color-muted-200)";
+export const AreaMutedColorGradientDark = "var(--color-muted-300)";
+export const AreaMutedColorGradientLight = "var(--color-muted-50)";
 
 /**
  * Colors used for the scrub box in time series chart,