Files
Neon-Desk/components/charts/utils/chart-colors.ts

66 lines
1.9 KiB
TypeScript

import type { ChartColorPalette } from '@/lib/types';
/**
* Get chart color palette using CSS variables for theming
* These colors match the existing dark theme in the codebase
*/
export function getChartColors(): ChartColorPalette {
return {
primary: 'var(--accent)',
secondary: 'var(--terminal-muted)',
positive: '#96f5bf', // Green - matches existing price-history-card
negative: '#ff9f9f', // Red - matches existing price-history-card
grid: 'var(--line-weak)',
text: 'var(--terminal-bright)',
muted: 'var(--terminal-muted)',
tooltipBg: 'rgba(31, 34, 39, 0.96)',
tooltipBorder: 'var(--line-strong)',
volume: 'var(--terminal-muted)'
};
}
/**
* Get color for price change (positive/negative)
*/
export function getPriceChangeColor(change: number): string {
const colors = getChartColors();
return change >= 0 ? colors.positive : colors.negative;
}
/**
* Convert CSS variable to computed color value
* Used for chart export since html-to-image can't render CSS variables
*/
export function cssVarToColor(cssVar: string): string {
if (typeof window === 'undefined') return cssVar;
// If it's already a color value, return as-is
if (!cssVar.startsWith('var(')) return cssVar;
// Extract variable name from var(--name)
const varName = cssVar.match(/var\((--[^)]+)\)/)?.[1];
if (!varName) return cssVar;
// Get computed color from CSS variable
const computedColor = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.trim();
return computedColor || cssVar;
}
/**
* Convert entire color palette to computed colors for export
*/
export function getComputedColors(palette: Partial<ChartColorPalette>): Partial<ChartColorPalette> {
const computed: Partial<ChartColorPalette> = {};
for (const [key, value] of Object.entries(palette)) {
if (value) {
computed[key as keyof ChartColorPalette] = cssVarToColor(value);
}
}
return computed;
}