Remove custom builtin color, install "viridis" npm package

nicfv · Mar 6, 2024 · cbbe379 · cbbe379
1 parent 5d0df83
commit cbbe379
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "smath": "1.1.1",
+    "viridis": "0.0.2",
     "@emotion/css": "11.10.6",
     "@grafana/data": "10.0.3",
     "@grafana/runtime": "10.0.3",

diff --git a/src/color.ts b/src/color.ts
diff --git a/src/psychart.ts b/src/psychart.ts
@@ -1,4 +1,4 @@
-import { Color } from 'color';
+import { Color, Gradient } from 'viridis';
 import { PsyState } from 'psystate';
 import { SMath } from 'smath';
 import { PsyOptions, Datum, Layout, Point, Region, StyleOptions, GradientName, RegionName, DataOptions } from './types';
@@ -369,7 +369,7 @@ export class Psychart {
                         }
                     });
                 }
-                this.drawRegion(data, Color.gradient(normalized, Psychart.gradients.Blue), region.tooltip);
+                this.drawRegion(data, new Gradient(Psychart.gradients.Blue).getColor(normalized), region.tooltip);
                 regionIndex++;
             });
     }
@@ -578,7 +578,7 @@ export class Psychart {
             location = currentState.toXY();
         // Compute the current color to plot
         const normalized = this.getGradientX(time, startTime, endTime),
-            color = Color.gradient(normalized, Psychart.gradients[options.gradient as GradientName] ?? Psychart.gradients.Viridis);
+            color = new Gradient(Psychart.gradients[options.gradient as GradientName] ?? Psychart.gradients.Viridis).getColor(normalized);
         // Determine whether to connect the states with a line
         if (!!this.lastState[id]) {
             this.g.trends.appendChild(this.createLine([this.lastState[id], currentState], color, +options.line));

diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,4 @@
-import { Color } from 'color';
+import { Color } from 'viridis';
 
 export type Measurement = 'dbwb' | 'dbrh' | 'dbdp';
 export type RegionName = 'Summer (sitting)' | 'Summer (walking)' | 'Summer (light work)' | 'Winter (sitting)' | 'Winter (walking)' | 'Winter (light work)' | 'Data Center A4' | 'Data Center A3' | 'Data Center A2' | 'Data Center A1' | 'Data Center Recommended (low pollutants)' | 'Data Center Recommended (high pollutants)';