konnosDashboard
Charts.constants.ts106 lines · main
1// Just extracting the color configuration to a single file so that it's easier to observe
2// Needs better naming to be honest, but just to get things going
3
4// For ChartHandler
5export const CHART_COLORS = {
6 TICK: 'hsl(var(--background-overlay-hover))',
7 AXIS: 'hsl(var(--background-overlay-hover))',
8 GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
9 GREEN_2: 'hsl(var(--brand-500))',
10 RED_1: 'hsl(var(--destructive-default))',
11 RED_2: 'hsl(var(--destructive-500))',
12 REFERENCE_LINE: 'hsl(var(--foreground-muted))',
13 REFERENCE_LINE_TEXT: 'hsl(var(--foreground-muted))',
14}
15
16const LIGHT_STACKED_CHART_COLORS = [
17 '#3ECF8E',
18 '#DA760B',
19 '#097c4f',
20 '#EDC35E',
21 '#65BCD9',
22 '#0063E8',
23 '#DB8DF9',
24 '#B616A6',
25]
26
27const LIGHT_STACKED_CHART_FILLS = [
28 '#9FE8C7',
29 '#FFB885',
30 '#4BA67A',
31 '#F6D99F',
32 '#B2DCEC',
33 '#80B1F4',
34 '#EDC9FC',
35 '#DB8BD3',
36]
37
38const DARK_STACKED_CHART_COLORS = [
39 '#3ECF8E',
40 '#A3FFC2',
41 '#DA760B',
42 '#EDD35E',
43 '#65BCD9',
44 '#0063E8',
45 '#DB8DF9',
46 '#B616A6',
47]
48
49const DARK_STACKED_CHART_FILLS = [
50 '#2A5C3F',
51 '#1F3D2A',
52 '#5C3D0A',
53 '#5C5230',
54 '#2A3D45',
55 '#001F3D',
56 '#4A3D5C',
57 '#3D1F3A',
58]
59
60// Default to light mode colors, will be updated based on theme
61export let STACKED_CHART_COLORS = LIGHT_STACKED_CHART_COLORS
62export let STACKED_CHART_FILLS = LIGHT_STACKED_CHART_FILLS
63// Function to update colors based on theme
64export const updateStackedChartColors = (isDarkMode: boolean) => {
65 STACKED_CHART_COLORS = isDarkMode ? DARK_STACKED_CHART_COLORS : LIGHT_STACKED_CHART_COLORS
66 STACKED_CHART_FILLS = isDarkMode ? DARK_STACKED_CHART_FILLS : LIGHT_STACKED_CHART_FILLS
67}
68
69export type ValidStackColor =
70 | 'brand'
71 | 'blue'
72 | 'red'
73 | 'yellow'
74 | 'green'
75 | 'slate'
76 | 'indigo'
77 | 'tomato'
78 | 'orange'
79 | 'amber'
80
81export const genStackColorScales = (colors: ValidStackColor[]) =>
82 colors.map((color) => {
83 let scale = 9
84 if (color === 'slate') {
85 scale = 11
86 }
87 return {
88 lighter: `var(--color-${color}-${scale - 1}00)`,
89 base: `var(--color-${color}-${scale * 100})`,
90 darker: `var(--color-${color}-${scale + 1}00)`,
91 }
92 })
93
94export const DEFAULT_STACK_COLORS: ValidStackColor[] = [
95 'brand',
96 'slate',
97 'blue',
98 'yellow',
99 'indigo',
100]
101
102export enum DateTimeFormats {
103 FULL = 'MMM D, YYYY, hh:mma',
104 FULL_SECONDS = 'MMM D, hh:mm:ssa',
105 DATE_ONLY = 'MMM D, YYYY',
106}