/**
 * Gemeinsame Bausteine der Diagramme.
 *
 * Die Serienfarben stammen aus einer Palette, die gegen die hellen und dunklen
 * Flächen dieser Anwendung auf Kontrast und Farbfehlsichtigkeit geprüft wurde.
 * Die Reihenfolge ist Teil dieser Absicherung und darf nicht umsortiert werden.
 */

export const SERIES = {
  /** Einkünfte, laufendes Jahr, kumulierter Saldo. */
  one: "var(--viz-series-1)",
  /** Ausgaben, Vorjahr. */
  two: "var(--viz-series-2)",
  three: "var(--viz-series-3)",
} as const;

export const CHROME = {
  grid: "var(--viz-grid)",
  axis: "var(--viz-axis)",
  label: "var(--viz-label)",
  surface: "var(--viz-surface)",
} as const;

export const STATUS = {
  good: "var(--viz-good)",
  warning: "var(--viz-warning)",
  critical: "var(--viz-critical)",
} as const;

/** Achsen und Raster bleiben zurückhaltend: dünne, durchgezogene Linien. */
export const AXIS_PROPS = {
  stroke: CHROME.axis,
  tickLine: false,
  axisLine: false,
  tick: { fill: CHROME.label, fontSize: 11 },
} as const;

export const GRID_PROPS = {
  stroke: CHROME.grid,
  strokeWidth: 1,
  vertical: false,
} as const;

/** Abgerundete Balkenenden an der Grundlinie. */
export const BAR_RADIUS: [number, number, number, number] = [4, 4, 0, 0];

/** Zwei Pixel Fläche zwischen benachbarten Balken statt eines Rahmens. */
export const BAR_GAP = 2;