💄 change color palette to Reds-Greens

src/app/calculator/zones.service.ts

@@ -12,62 +12,76 @@ export class ZonesService {
   zonesLayer: VectorLayer<VectorSource<Geometry>>;
   zonesSource: VectorSource<Geometry>;
   zonesStyle: (feature) => Style;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=2 */
-  QUANTILE_COLORS_2 = ['#43a2ca', '#e0f3db'] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=3 */
-  QUANTILE_COLORS_3 = ['#43a2ca', '#a8ddb5', '#e0f3db'] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=4 */
-  QUANTILE_COLORS_4 = ['#2b8cbe', '#7bccc4', '#bae4bc', '#f0f9e8'] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=5 */
+  /** Taken from https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=3 */
+  QUANTILE_COLORS_2 = ['#fc8d59', '#91cf60'] as const;
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=3 */
+  QUANTILE_COLORS_3 = ['#fc8d59', '#ffffbf', '#91cf60'] as const;
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=4 */
+  QUANTILE_COLORS_4 = ['#d7191c', '#fdae61', '#a6d96a', '#1a9641'] as const;
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=5 */
   QUANTILE_COLORS_5 = [
-    '#0868ac',
-    '#43a2ca',
-    '#7bccc4',
-    '#bae4bc',
-    '#f0f9e8',
+    '#d7191c',
+    '#fdae61',
+    '#ffffbf',
+    '#a6d96a',
+    '#1a9641',
   ] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=6 */
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=6 */
   QUANTILE_COLORS_6 = [
-    '#0868ac',
-    '#43a2ca',
-    '#7bccc4',
-    '#a8ddb5',
-    '#ccebc5',
-    '#f0f9e8',
+    '#d73027',
+    '#fc8d59',
+    '#fee08b',
+    '#d9ef8b',
+    '#91cf60',
+    '#1a9850',
   ] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=7 */
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=7 */
   QUANTILE_COLORS_7 = [
-    '#08589e',
-    '#2b8cbe',
-    '#4eb3d3',
-    '#7bccc4',
-    '#a8ddb5',
-    '#ccebc5',
-    '#f0f9e8',
+    '#d73027',
+    '#fc8d59',
+    '#fee08b',
+    '#ffffbf',
+    '#d9ef8b',
+    '#91cf60',
+    '#1a9850',
   ] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=8 */
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=8 */
   QUANTILE_COLORS_8 = [
-    '#08589e',
-    '#2b8cbe',
-    '#4eb3d3',
-    '#7bccc4',
-    '#a8ddb5',
-    '#ccebc5',
-    '#e0f3db',
-    '#f7fcf0',
+    '#d73027',
+    '#f46d43',
+    '#fdae61',
+    '#fee08b',
+    '#d9ef8b',
+    '#a6d96a',
+    '#66bd63',
+    '#1a9850',
   ] as const;
-  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=9 */
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=9 */
   QUANTILE_COLORS_9 = [
-    '#084081',
-    '#0868ac',
-    '#2b8cbe',
-    '#4eb3d3',
-    '#7bccc4',
-    '#a8ddb5',
-    '#ccebc5',
-    '#e0f3db',
-    '#f7fcf0',
+    '#d73027',
+    '#f46d43',
+    '#fdae61',
+    '#fee08b',
+    '#ffffbf',
+    '#d9ef8b',
+    '#a6d96a',
+    '#66bd63',
+    '#1a9850',
   ] as const;
+  /** https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=10 */
+  QUANTILE_COLORS_10 = [
+    '#a50026',
+    '#d73027',
+    '#f46d43',
+    '#fdae61',
+    '#fee08b',
+    '#d9ef8b',
+    '#a6d96a',
+    '#66bd63',
+    '#1a9850',
+    '#006837',
+  ] as const;
+  /** Pseudo-matrix of color ramps, first color in every row always represents the lowest value */
   QUANTILE_COLORS_MATRIX = [
     this.QUANTILE_COLORS_2,
     this.QUANTILE_COLORS_3,
@@ -77,6 +91,7 @@ export class ZonesService {
     this.QUANTILE_COLORS_7,
     this.QUANTILE_COLORS_8,
     this.QUANTILE_COLORS_9,
+    this.QUANTILE_COLORS_10,
   ] as const;
 
   constructor(private hsAddDataService: HsAddDataService) {