Improve code - threshold gradients

Author: niklavsBariss

README.md

@@ -145,11 +145,11 @@ type Dataset = {
 type ThresholdColor = {
   type: 'thresholds'
   baseColor: string // Default color for values below all thresholds
-  gradientBlur: number // Gradient transition distance around thresholds
   thresholds: Array<{
     value: number // Threshold value
     color: string // Color to use above this value
   }> // Should be sorted by value descending
+  gradientBlur?: number // Gradient transition distance around thresholds. Default 0 - no blur
 }
 ```
 
@@ -231,11 +231,11 @@ const datasetWithThresholds = {
   areaColor: '#e78e96', // Optional: custom area fill color
   color: {
     type: 'thresholds',
-    baseColor: '#089851', // Green for values below all thresholds (low load)
-    gradientBlur: 50, // Smooth transition distance around thresholds
+    baseColor: '#00FF00', // Green for values below all thresholds (low load)
+    gradientBlur: 5, // Smooth transition distance around thresholds
     thresholds: [
-      { value: 85, color: '#CF1E2E' }, // Red for values >= 85% (critical)
-      { value: 50, color: '#F29400' }, // Orange for values >= 50% (warning)
+      { value: 85, color: '#FF0000' }, // Red for values >= 85% (critical)
+      { value: 50, color: '#FF9400' }, // Orange for values >= 50% (warning)
       // Values < 50% will use baseColor (green)
     ],
   },
@@ -246,9 +246,9 @@ const datasetWithThresholds = {
 **How it works:**
 
 - **Thresholds should be sorted by value in descending order**
-- Values >= 85% will be colored red (`#CF1E2E`) - critical load
-- Values >= 50% but < 80% will be colored orange (`#F29400`) - warning load
-- Values < 50% will use the `baseColor` green (`#089851`) - healthy load
+- Values >= 85% will be colored red (`#FF0000`) - critical load
+- Values >= 50% but < 80% will be colored orange (`#FF9400`) - warning load
+- Values < 50% will use the `baseColor` green (`#00FF00`) - healthy load
 - The `gradientBlur` creates smooth color transitions around threshold boundaries
 
 **Real-world examples:**

example/src/App.tsx

@@ -62,7 +62,7 @@ const measurementsRecords: Record<Measurement, Dataset> = {
       startingValue: -8,
     }),
     decimals: 0,
-    areaColor: '#ff00ff', // '#83cba8',
+    areaColor: '#83cba8',
     color: {
       type: 'thresholds',
       baseColor: '#3d91ff',

src/drawFunction.js

@@ -453,7 +453,7 @@ window.draw = (props) => {
             .area()
             .defined(isDefined)
             .x((d) => x(d.date))
-            .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
+            .y0(y(y.domain()[0]) + 1) // NOTE: +1 prevents a weird hairline at the bottom (just above axis)
             .y1((d) => y(d.value))
         )
 
@@ -464,20 +464,18 @@ window.draw = (props) => {
         .attr('stroke-width', 2)
 
       if (dataset.color.type === 'thresholds') {
-        const { baseColor, gradientBlur, thresholds } = dataset.color
-        const stops = []
-        thresholds.forEach(({ value, color }, index) => {
-          stops.push(
-            {
-              value: value + gradientBlur,
-              color: color,
-            },
-            {
-              value: value - gradientBlur,
-              color: thresholds[index + 1]?.color ?? baseColor,
-            }
-          )
-        })
+        const { baseColor, gradientBlur = 0, thresholds } = dataset.color
+        const stops = thresholds.flatMap(({ value, color }, index) => [
+          {
+            value: value + gradientBlur,
+            color: color,
+          },
+          {
+            value: value - gradientBlur,
+            // NOTE: All thresholds have color. index out of bounds - last threshold - use baseColor
+            color: thresholds[index + 1]?.color ?? baseColor,
+          },
+        ])
 
         defs
           .append('linearGradient')
@@ -663,7 +661,7 @@ window.draw = (props) => {
               .area()
               .defined(isDefined)
               .x((d) => x(d.date))
-              .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
+              .y0(y(y.domain()[0]) + 1) // NOTE: +1 prevents a weird hairline at the bottom (just above axis)
               .y1((d) => y(d.value))
           )
 
@@ -736,7 +734,7 @@ window.draw = (props) => {
                 .area()
                 .defined(isDefined)
                 .x((d) => newX(d.date))
-                .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
+                .y0(y(y.domain()[0]) + 1) // NOTE: +1 prevents a weird hairline at the bottom (just above axis)
                 .y1((d) => y(d.value))
             )
         })

src/types.ts

@@ -16,17 +16,24 @@ export type CalendarStrings = {
   shortMonths: string[]
 }
 
+type ThresholdColor = {
+  type: 'thresholds'
+  baseColor: string
+  /**
+   * Must be sorted by value descending (highest value first)
+   */
+  thresholds: { value: number; color: string }[]
+  /**
+   * Gradient transition distance around thresholds.
+   * Must be non-negative. Should be less than half the distance between thresholds.
+   * @default 0 - no blur
+   */
+  gradientBlur?: number
+}
+
 export type Dataset = {
   measurementName: string
-  color:
-    | string
-    | {
-        type: 'thresholds'
-        baseColor: string
-        gradientBlur: number
-        /* should be sorted by value descending */
-        thresholds: { value: number; color: string }[]
-      }
+  color: string | ThresholdColor
   points: Point[]
   unit: string
   decimals: number