feat: Improve negative value support

Author: niklavsBariss

example/src/App.tsx

@@ -20,6 +20,7 @@ const chartColors: ChartProps['colors'] = {
 const generateDataPoints = ({
   startingValue = 400,
   minimum = 0,
+  maximum = 3000,
   radomFactor = 20,
 } = {}) => {
   const points = []
@@ -31,9 +32,10 @@ const generateDataPoints = ({
     const randomVariation = (Math.random() - 0.5) * radomFactor
     value += randomVariation
 
-    // randomVariation was negative and value went below minimum
-    if (value < minimum) {
-      // invert direction to keep above minimum
+    // either randomVariation was negative and value went below minimum
+    // or     randomVariation was positive and value went above maximum
+    if (value < minimum || value > maximum) {
+      // invert direction to keep within bounds
       value -= 2 * randomVariation
     }
 
@@ -44,28 +46,36 @@ const generateDataPoints = ({
 }
 
 enum Measurement {
-  Red = 'Red',
+  Temperature = 'Temperature',
   Blue = 'Blue',
   Green = 'Green',
   Pink = 'Pink',
 }
 const measurementKeys = Object.values(Measurement)
 const measurementsRecords: Record<Measurement, Dataset> = {
-  [Measurement.Red]: {
+  [Measurement.Temperature]: {
     unit: '°C',
-    points: generateDataPoints(),
+    points: generateDataPoints({
+      maximum: 40,
+      minimum: -10,
+      radomFactor: 1,
+      startingValue: -8,
+    }),
     decimals: 0,
-    areaColor: '#e78e96',
+    areaColor: '#ff00ff', // '#83cba8',
     color: {
       type: 'thresholds',
-      baseColor: '#CF1E2E',
-      gradientBlur: 50,
+      baseColor: '#3d91ff',
+      gradientBlur: 2,
       thresholds: [
-        { value: 800, color: '#089851' },
-        { value: 400, color: '#F29400' },
+        { value: 32, color: '#bb2222' },
+        { value: 24, color: '#ffc400' },
+        { value: 16, color: '#089851' },
+        { value: 10, color: '#9ceeff' },
+        { value: 0, color: '#00d5ff' },
       ],
     },
-    measurementName: Measurement.Red,
+    measurementName: Measurement.Temperature,
   },
   [Measurement.Blue]: {
     unit: 'l',
@@ -123,7 +133,7 @@ export default function App() {
   }, [timeDomainType])
 
   const [enabledMeasurements, setEnabledMeasurements] = useState<Measurement[]>(
-    [Measurement.Red]
+    [Measurement.Temperature]
   )
 
   const datasets = useMemo<Dataset[]>(

src/drawFunction.js

@@ -222,8 +222,10 @@ function getTickCount(domain, { minDeltaY }) {
   return tickCount
 }
 
+// TODO: Check why was avoiding needed. Condionally maybe?
+const avoidZeroAxisLabel = false
 function yFormat(value) {
-  if (value === 0) return ''
+  if (avoidZeroAxisLabel && value === 0) return ''
   const axisLabel = String(value)
   return axisLabel.length > yLabelMaxLength ? '' : axisLabel
 }
@@ -454,7 +456,7 @@ window.draw = (props) => {
             .area()
             .defined(isDefined)
             .x((d) => x(d.date))
-            .y0(y(0))
+            .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
             .y1((d) => y(d.value))
         )
 
@@ -661,7 +663,7 @@ window.draw = (props) => {
               .area()
               .defined(isDefined)
               .x((d) => x(d.date))
-              .y0(y(0))
+              .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
               .y1((d) => y(d.value))
           )
 
@@ -734,7 +736,7 @@ window.draw = (props) => {
                 .area()
                 .defined(isDefined)
                 .x((d) => newX(d.date))
-                .y0(y(0))
+                .y0(y(y.domain()[0]) + 1) // Use min value, +1 to avoid blinking space
                 .y1((d) => y(d.value))
             )
         })