`kalshi-dash/src/utils/chartTheme.js`

77 lines
/* ─── Shared Recharts Theme Config ─── */

export const CHART_COLORS = {
  cyan:   '#00F0FF',
  orange: '#F7931A',
  green:  '#00C389',
  red:    '#FF5C5C',
  blue:   '#3B82F6',
  purple: '#A855F7',
  muted:  '#6B7280',
  dim:    '#A8A8A8',
  border: '#2A2A35',
  surface: '#141419',
  surfaceEl: '#1C1C24',
  text:   '#E0E0E0',
};

/* Ordered palette for cycling through categories / series */
export const COLOR_CYCLE = [
  '#00F0FF', // cyan
  '#F7931A', // orange
  '#00C389', // green
  '#3B82F6', // blue
  '#A855F7', // purple
  '#FF5C5C', // red
];

/* Standard tooltip style for all charts */
export const TOOLTIP_STYLE = {
  contentStyle: {
    background: '#1C1C24',
    border: '1px solid #2A2A35',
    borderRadius: 8,
    color: '#E0E0E0',
    fontFamily: "'Inter', sans-serif",
    fontSize: 12,
  },
  itemStyle: {
    color: '#E0E0E0',
    fontFamily: "'JetBrains Mono', monospace",
  },
  labelStyle: {
    color: '#6B7280',
    fontFamily: "'Inter', sans-serif",
    fontWeight: 600,
    marginBottom: 4,
  },
};

/* Standard axis tick style */
export const AXIS_TICK = {
  fill: '#6B7280',
  fontSize: 11,
  fontFamily: "'Inter', sans-serif",
};

/* Standard grid style */
export const GRID_STYLE = {
  stroke: '#2A2A35',
  strokeOpacity: 0.6,
  strokeDasharray: '3 3',
};

/* Format cents to dollar string */
export function fmtDollars(cents) {
  const v = cents / 100;
  if (Math.abs(v) >= 1000) return `$${(v / 1000).toFixed(1)}k`;
  return `$${v.toFixed(2)}`;
}

/* Format a date string "2025-01-15" -> "Jan 15" */
export function fmtDateShort(dateStr) {
  if (!dateStr) return '';
  const d = new Date(dateStr + 'T00:00:00');
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}