website: snapshot

website/scripts/chart/colors.js

@@ -86,10 +86,7 @@ const fuchsia = createColor(() => getColor("fuchsia"));
 const pink = createColor(() => getColor("pink"));
 const rose = createColor(() => getColor("rose"));
 
-const baseColors = {
-  default: createColor(() => getLightDarkValue("--color")),
-  gray: createColor(() => getColor("gray")),
-  border: createColor(() => getLightDarkValue("--border-color")),
+const spectrumColors = {
   red,
   orange,
   amber,
@@ -110,6 +107,13 @@ const baseColors = {
   rose,
 };
 
+const baseColors = {
+  default: createColor(() => getLightDarkValue("--color")),
+  gray: createColor(() => getColor("gray")),
+  border: createColor(() => getLightDarkValue("--border-color")),
+  ...spectrumColors,
+};
+
 export const colors = {
   ...baseColors,
 
@@ -127,6 +131,15 @@ export const colors = {
     min: red,
   },
 
+  /** Common time period colors */
+  time: {
+    _24h: pink,
+    _1w: red,
+    _1m: yellow,
+    _1y: lime,
+    all: teal,
+  },
+
   /** DCA period colors by term */
   dcaPeriods: {
     // Short term
@@ -170,3 +183,12 @@ export const colors = {
  * @typedef {typeof colors} Colors
  * @typedef {keyof typeof baseColors} ColorName
  */
+
+/** Palette for indexed series */
+const palette = Object.values(spectrumColors);
+
+/**
+ * Get a color by index (cycles through palette)
+ * @param {number} index
+ */
+export const colorAt = (index) => palette[index % palette.length];

website/scripts/chart/index.js

@@ -1351,7 +1351,7 @@ export function createChart({ parent, id: chartId, brk, fitContent }) {
         const options = blueprint.options;
         const indexes = Object.keys(blueprint.metric.by);
 
-        const defaultColor = unit === Unit.usd || unit === Unit.usdCumulative ? colors.green : colors.orange;
+        const defaultColor = unit === Unit.usd ? colors.green : colors.orange;
 
         if (indexes.includes(idx)) {
           switch (blueprint.type) {