React Chart Title

1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3const getCssColor = (cssVar: string, fallback: string): string => {
4    if (typeof document === "undefined") {
5        return fallback;
6    }
7    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
8    return cssValue || fallback;
9};
10
11type TRgbColor = { r: number; g: number; b: number };
12
13const parseCssColorToRgb = (color: string): TRgbColor | undefined => {
14    const trimmed = color.trim();
15
16    if (trimmed.startsWith("#")) {
17        let hex = trimmed.slice(1);
18        if (hex.length === 3 || hex.length === 4) {
19            hex = hex
20                .slice(0, 3)
21                .split("")
22                .map((channel) => channel + channel)
23                .join("");
24        } else if (hex.length === 6 || hex.length === 8) {
25            hex = hex.slice(0, 6);
26        } else {
27            return undefined;
28        }
29
30        if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
31            return undefined;
32        }
33
34        return {
35            r: Number.parseInt(hex.slice(0, 2), 16),
36            g: Number.parseInt(hex.slice(2, 4), 16),
37            b: Number.parseInt(hex.slice(4, 6), 16),
38        };
39    }
40
41    const rgbMatch = trimmed.match(/^rgba?\((.+)\)$/i);
42    if (!rgbMatch) {
43        return undefined;
44    }
45
46    const channels = rgbMatch[1]
47        .split(",")
48        .slice(0, 3)
49        .map((channel) => Number.parseFloat(channel.trim()));
50
51    if (channels.length !== 3 || channels.some((channel) => !Number.isFinite(channel))) {
52        return undefined;
53    }
54
55    const clamp = (value: number) => Math.max(0, Math.min(255, value));
56
57    return {
58        r: clamp(channels[0]),
59        g: clamp(channels[1]),
60        b: clamp(channels[2]),
61    };
62};
63
64const getPerceivedBrightness = (color: string): number | undefined => {
65    const rgb = parseCssColorToRgb(color);
66    if (!rgb) return undefined;
67
68    // WCAG-adjacent perceptual weighting for quick dark/light detection.
69    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
70};
71
72export interface AppThemeBase {
73    SciChartJsTheme: IThemeProvider;
74
75    // general colors
76    isDark: boolean;
77    ForegroundColor: string;
78    Background: string;
79
80    // Series colors
81    VividSkyBlue: string;
82    VividPink: string;
83    VividTeal: string;
84    VividOrange: string;
85    VividBlue: string;
86    VividPurple: string;
87    VividGreen: string;
88    VividRed: string;
89
90    MutedSkyBlue: string;
91    MutedPink: string;
92    MutedTeal: string;
93    MutedOrange: string;
94    MutedBlue: string;
95    MutedPurple: string;
96    MutedRed: string;
97
98    PaleSkyBlue: string;
99    PalePink: string;
100    PaleTeal: string;
101    PaleOrange: string;
102    PaleBlue: string;
103    PalePurple: string;
104}
105
106export class SciChart2022AppTheme implements AppThemeBase {
107    SciChartJsTheme = new SciChartJsNavyTheme();
108
109    // Dynamic colors
110    get isDark() {
111        const brightness = getPerceivedBrightness(this.Background);
112        return brightness === undefined || brightness < 128;
113    }
114    get TextColor() { return this.ForegroundColor; }
115    get ForegroundColor() {
116        return getCssColor("--text", "#F5F5F5");
117    }
118    get Background() {
119        return getCssColor("--bg-chart", this.SciChartJsTheme.sciChartBackground);
120    }
121
122    // Series colors
123    VividSkyBlue = "#50C7E0";
124    VividPink = "#EC0F6C";
125    VividTeal = "#30BC9A";
126    VividOrange = "#F48420";
127    VividBlue = "#364BA0";
128    VividPurple = "#882B91";
129    VividGreen = "#67BDAF";
130    VividRed = "#C52E60";
131
132    DarkIndigo = "#14233C";
133    Indigo = "#264B93";
134
135    MutedSkyBlue = "#83D2F5";
136    MutedPink = "#DF69A8";
137    MutedTeal = "#7BCAAB";
138    MutedOrange = "#E7C565";
139    MutedBlue = "#537ABD";
140    MutedPurple = "#A16DAE";
141    MutedRed = "#DC7969";
142
143    PaleSkyBlue = "#E4F5FC";
144    PalePink = "#EEB3D2";
145    PaleTeal = "#B9E0D4";
146    PaleOrange = "#F1CFB5";
147    PaleBlue = "#B5BEDF";
148    PalePurple = "#CFB4D5";
149}
150
151export const appTheme = new SciChart2022AppTheme();
152