Feature - New set of color palette added

src/lib/options/options.models.ts

@@ -1,5 +1,6 @@
 import type { Action } from '../store';
 import type { Data, WideData } from '../data';
+import { Palette } from './palette';
 
 export interface OptionsAction extends Action {
   payload: Partial<Options>;
@@ -53,10 +54,10 @@ export interface Options {
   dateCounter: string | ((currentDate: string, dateSlice: Data[], allDates: string[]) => string);
   caption: string | ((currentDate: string, dateSlice: Data[], allDates: string[]) => string);
 
-  colorMap: { [key: string]: string } | string[];
+  colorMap: { [key: string]: string } | string[] | Palette;
   fixedOrder: string[];
 }
 
 export type TransformFn = (data: Data[] | WideData[]) => Data[] | WideData[];
 
-export type ParamFunction = (currentDate: string, dateSlice: Data[], allDates: string[]) => string;
+export type ParamFunction = (currentDate: string, dateSlice: Data[], allDates: string[]) => string;

src/lib/options/palette.ts

@@ -0,0 +1,31 @@
+// color palette src = https://github.com/mwaskom/seaborn/blob/master/seaborn/palettes.py
+
+const deep = ["#4C72B0", "#DD8452", "#55A868", "#C44E52", "#8172B3", "#937860", "#DA8BC3", "#8C8C8C", "#CCB974", "#64B5CD"];
+const deep6 = ["#4C72B0", "#55A868", "#C44E52", "#8172B3", "#CCB974", "#64B5CD"];
+const muted = ["#4878D0", "#EE854A", "#6ACC64", "#D65F5F", "#956CB4", "#8C613C", "#DC7EC0", "#797979", "#D5BB67", "#82C6E2"];
+const muted6 = ["#4878D0", "#6ACC64", "#D65F5F", "#956CB4", "#D5BB67", "#82C6E2"];
+const pastel = ["#A1C9F4", "#FFB482", "#8DE5A1", "#FF9F9B", "#D0BBFF", "#DEBB9B", "#FAB0E4", "#CFCFCF", "#FFFEA3", "#B9F2F0"];
+const pastel6 = ["#A1C9F4", "#8DE5A1", "#FF9F9B", "#D0BBFF", "#FFFEA3", "#B9F2F0"];
+const bright = ["#023EFF", "#FF7C00", "#1AC938", "#E8000B", "#8B2BE2", "#9F4800", "#F14CC1", "#A3A3A3", "#FFC400", "#00D7FF"];
+const bright6 = ["#023EFF", "#1AC938", "#E8000B", "#8B2BE2", "#FFC400", "#00D7FF"];
+const dark = ["#001C7F", "#B1400D", "#12711C", "#8C0800", "#591E71", "#592F0D", "#A23582", "#3C3C3C", "#B8850A", "#006374"];
+const dark6 = ["#001C7F", "#12711C", "#8C0800", "#591E71", "#B8850A", "#006374"];
+const colorblind = ["#0173B2", "#DE8F05", "#029E73", "#D55E00", "#CC78BC", "#CA9161", "#FBAFE4", "#949494", "#ECE133", "#56B4E9"];
+const colorblind6 = ["#0173B2", "#029E73", "#D55E00", "#CC78BC", "#ECE133", "#56B4E9"];
+
+export const palettes = {
+    deep,
+    deep6,
+    muted,
+    muted6,
+    pastel,
+    pastel6,
+    bright,
+    bright6,
+    dark,
+    dark6,
+    colorblind,
+    colorblind6
+} as const;
+
+export type Palette = keyof typeof palettes;

src/lib/options/validate-options.ts

@@ -1,4 +1,5 @@
 import type { Options } from './index';
+import { Palette } from './palette';
 
 const boolOpts = [
   'makeCumulative',
@@ -151,9 +152,13 @@ function validateDataTransform(value: Options['dataTransform'] | undefined): boo
   return false;
 }
 
-function validateColorMap(value: string[] | { [key: string]: string } | undefined): boolean {
-  if (typeof value === 'undefined') return false;
-  if (value === null) return false;
+function validateColorMap(value: string[] | { [key: string]: string } | Palette | undefined): boolean {
+  if (typeof value === 'undefined' || value === null) return false;
+
+  // Check if value is one of the defined Palettes
+  if (typeof value === 'string' && isPalette(value)) {
+    return true;
+}
 
   // Check if color map is array of string
   if (is(value, 'array', 'string')) return true;
@@ -191,3 +196,12 @@ function is(value: any, type: types, arrayType?: types): boolean {
 function includes(arr: any[], x: any) {
   return x != null && arr.includes(x);
 }
+
+// Type guard for checking if the value is a Palette
+function isPalette(value: string): value is Palette {
+  return (
+      value === 'deep' || value === 'deep6' || value === 'muted' || value === 'muted6' ||
+      value === 'pastel' || value === 'pastel6' || value === 'bright' || value === 'bright6' ||
+      value === 'dark' || value === 'dark6' || value === 'colorblind' || value === 'colorblind6'
+  );
+}

src/lib/utils/utils.ts

@@ -27,9 +27,11 @@ export function getColor(d: Data, store: Store) {
         index = index - colorMap.length;
       }
       return colorMap[index];
-    } else {
-      if (colorMap[currentValue]) {
-        return colorMap[currentValue];
+    } else if (typeof colorMap === 'object' && colorMap !== null) {
+      // Check if colorMap is an object
+      if (currentValue in colorMap) {
+        // Check if currentValue is a valid key
+        return colorMap[currentValue]; // Safely access the property
       }
     }
   }