minerva-design 1.2.0 → 1.4.0

package/dist/charts/engine/shapes/scene.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene.cjs","names":["toCss","mix","parseColor","font","require_color","require_overlay","TAU","estimateText","size","f","text","clamp","v","lo","hi","positive","finite","fallback","sum","s","values","easeOutCubic","t","upright","r","a","inset","top","padding","right","bottom","left","rect","ellipsize","measure","font","max","mid","uniqueKeys","seen","names","name","LIGHT_INK","DARK_INK","channel","relativeLuminance","c","over","contrastRatio","ink","fill","b","WHITE","inkOn","solid","backdrop","light","dark","textOn","readableFill","best","target","toward","limit","next","resolveWith","css","theme","emptyLayout","cx","area","cy","r1"],"sources":["../../../../../charts/src/engine/shapes/scene.ts"],"sourcesContent":["// Drawable scene of a shape chart: resolved geometry, colors and texts,\n// produced by the (DOM-free) layouts and consumed by draw / hit testing.\n\nimport { mix, parseColor, toCss, type Rgba } from \"../color\";\n\nimport { font } from \"../overlay\";\nimport type { ChartTheme } from \"../theme\";\nimport type { ChartPadding } from \"../types\";\nimport type {\n  ShapeChartLabels,\n  ShapeChartType,\n  ShapeHoverEvent,\n} from \"./types\";\n\nexport const TAU = Math.PI * 2;\n\n/** Rectangle in CSS pixels */\nexport interface ShapeRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface NodeBase {\n  /** Index of the item the node belongs to (hover, dimming); none for decorations */\n  hit?: number;\n  /**\n   * Other items whose hover also emphasizes the node (the flows of a hovered\n   * sankey node, the ancestors of a hovered sunburst sector); hit testing\n   * only uses `hit`\n   */\n  also?: readonly number[];\n  /** Opacity multiplier */\n  alpha?: number;\n  /** Offset applied while the node's item is hovered (pie slices pop out) */\n  shift?: [number, number];\n}\n\n/** Annular sector (pie slice, donut segment, ring) */\nexport interface SectorNode extends NodeBase {\n  kind: \"sector\";\n  cx: number;\n  cy: number;\n  r0: number;\n  r1: number;\n  /** Canvas angles (radians, clockwise from 3 o'clock) */\n  a0: number;\n  a1: number;\n  /** Gap with the neighbours, in pixels */\n  pad: number;\n  /** Corner radius, in pixels */\n  corner: number;\n  fill: string;\n}\n\n/** Polygon (radar grid / series, funnel stage); `hole` is cut out */\nexport interface PolygonNode extends NodeBase {\n  kind: \"polygon\";\n  /** Flat x, y list */\n  points: number[];\n  hole?: number[];\n  fill?: string;\n  stroke?: string;\n  lineWidth?: number;\n  /** Corner radius, in pixels */\n  radius?: number;\n  /** Fill / stroke width when hovered */\n  hoverFill?: string;\n  hoverLineWidth?: number;\n  /** Lightens the shape when hovered */\n  brighten?: boolean;\n}\n\nexport interface RectNode extends NodeBase {\n  kind: \"rect\";\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  radius: number;\n  fill: string;\n  brighten?: boolean;\n  /** Outline drawn inside the rectangle while its item is hovered */\n  hoverStroke?: string;\n  /** Distance (px) around the rectangle still picked by hit testing (default 0) */\n  hitPad?: number;\n}\n\n/** Stroked arc (gauge track / value) */\nexport interface ArcNode extends NodeBase {\n  kind: \"arc\";\n  cx: number;\n  cy: number;\n  r: number;\n  a0: number;\n  a1: number;\n  width: number;\n  color: string;\n  cap: \"round\" | \"butt\";\n  /** Distance (px) beyond the stroke still picked by hit testing (default 4) */\n  hitPad?: number;\n}\n\n/** Dot; without fill nor stroke it is only a hit area */\nexport interface CircleNode extends NodeBase {\n  kind: \"circle\";\n  cx: number;\n  cy: number;\n  r: number;\n  fill?: string;\n  stroke?: string;\n  lineWidth?: number;\n  /** Radar: indicator of the vertex */\n  indicator?: number;\n  /** Radius and halo color when the vertex is hovered */\n  hoverR?: number;\n  halo?: string;\n}\n\nexport interface LineNode extends NodeBase {\n  kind: \"line\";\n  points: number[];\n  color: string;\n  width: number;\n  dash?: number[];\n}\n\nexport interface TextNode extends NodeBase {\n  kind: \"text\";\n  x: number;\n  y: number;\n  text: string;\n  font: string;\n  color: string;\n  align: \"left\" | \"center\" | \"right\";\n  baseline: \"top\" | \"middle\" | \"bottom\" | \"alphabetic\";\n  /** Radar: indicator of the label */\n  indicator?: number;\n  hoverColor?: string;\n  hoverFont?: string;\n  /** Rotation around (x, y), radians clockwise */\n  rotate?: number;\n  /** Outline drawn behind the text so it reads over other marks */\n  halo?: string;\n}\n\n/**\n * Sankey flow: a horizontal S-curve (cubic Bézier) of constant thickness\n * from (x0, y0) to (x1, y1), filled with a gradient from `color0` to `color1`\n */\nexport interface LinkNode extends NodeBase {\n  kind: \"link\";\n  x0: number;\n  y0: number;\n  x1: number;\n  y1: number;\n  /** Thickness, in pixels */\n  width: number;\n  color0: string;\n  color1: string;\n  /** Opacity while the link (or one of its `also` items) is hovered */\n  activeAlpha?: number;\n}\n\n/** Radar: dashed guide from the center to the hovered indicator */\nexport interface GuideNode extends NodeBase {\n  kind: \"guide\";\n  cx: number;\n  cy: number;\n  /** End of each spoke */\n  ends: [number, number][];\n  color: string;\n}\n\nexport type ShapeNode =\n  | SectorNode\n  | PolygonNode\n  | RectNode\n  | ArcNode\n  | CircleNode\n  | LineNode\n  | TextNode\n  | GuideNode\n  | LinkNode;\n\n/** A row of the default tooltip */\nexport interface ShapeTooltipRow {\n  name: string;\n  value: string;\n  color?: string;\n  strong?: boolean;\n}\n\n/** Something the pointer / keyboard can focus */\nexport interface ShapeItem {\n  index: number;\n  name: string;\n  value: number;\n  percent: number;\n  /** `percent` formatted for screen readers (`percentFormat`) */\n  share?: string;\n  color: string;\n  path?: string[];\n  /** Anchor of the tooltip when focused with the keyboard */\n  x: number;\n  y: number;\n  /** Rows of the default tooltip */\n  rows: ShapeTooltipRow[];\n  /** Radar: one entry per indicator */\n  indicators?: {\n    name: string;\n    value: number;\n    percent: number;\n    x: number;\n    y: number;\n  }[];\n  /** Extra fields of the hover event (calendar date, sankey link ends) */\n  event?: Pick<ShapeHoverEvent, \"date\" | \"source\" | \"target\">;\n  /** Sunburst: path focused when the item is activated (click, Enter) */\n  drill?: string[];\n}\n\n/** What is hovered: an item (and a radar indicator) */\nexport interface ShapeHover {\n  index: number;\n  indicator?: number;\n}\n\nexport interface ShapeLegendEntry {\n  /** Index passed to `toggle` */\n  index: number;\n  name: string;\n  color: string;\n  hidden: boolean;\n}\n\nexport interface ShapeScene {\n  type: ShapeChartType;\n  /** Size of the whole drawing */\n  width: number;\n  height: number;\n  nodes: ShapeNode[];\n  /** Focusable items, in keyboard order */\n  items: ShapeItem[];\n  /** Opacity of the other marks while one is hovered */\n  dim: number;\n  /** Entry animation of funnels / treemaps: fade and scale around a point */\n  enter?: { alpha: number; scale: number; cx: number; cy: number };\n  /**\n   * Arrow-key moves in a grid of items (calendar heatmap), in positions of\n   * `items`: `next` for Left / Right, `down` for Up / Down; no wrapping\n   */\n  steps?: { next: number; down: number };\n  /** Radar geometry used by hit testing (and to keep the tooltip off the labels) */\n  radar?: {\n    cx: number;\n    cy: number;\n    radius: number;\n    angles: number[];\n    series: { index: number; points: number[] }[];\n    /** Boxes of the indicator labels */\n    labels?: ShapeRect[];\n  };\n  /** No data to draw (placeholder shown) */\n  empty: boolean;\n  /** Built-in texts of the chart's locale (accessible descriptions) */\n  labels?: ShapeChartLabels;\n  /** Resolved locale of the chart */\n  locale?: string;\n}\n\n/** Measures a text in a CSS font */\nexport type MeasureText = (text: string, font: string) => number;\n\n/** Approximate width of a text without a canvas (tests, SSR) */\nexport const estimateText: MeasureText = (text, f) => {\n  const size = /(\\d+(?:\\.\\d+)?)px/.exec(f);\n  return text.length * (size ? Number(size[1]) : 12) * 0.6;\n};\n\n/** What the layouts of every type get */\nexport interface LayoutContext {\n  theme: ChartTheme;\n  measure: MeasureText;\n  hidden: ReadonlySet<number>;\n  /** Entry progress, eased (1 when done) */\n  enter: number;\n  /** Displayed (animated) value of a key */\n  value(key: string, target: number): number;\n  format(value: number): string;\n  /** Formats a share (0-1): `percentFormat` or a locale percent with one decimal */\n  percent(share: number): string;\n  /** Built-in texts (locale and `texts` overrides) */\n  labels: ShapeChartLabels;\n  /** Resolved locale */\n  locale: string;\n  /** Color of the `i`-th mark (custom `color` or the palette) */\n  color(css: string | undefined, i: number): Rgba;\n  /** Drawing area, padding excluded */\n  area: ShapeRect;\n  /** Sunburst: names from the root to the focused node */\n  focus: readonly string[];\n}\n\nexport type LayoutResult = Omit<\n  ShapeScene,\n  \"type\" | \"width\" | \"height\" | \"labels\" | \"locale\"\n>;\n\nexport const clamp = (v: number, lo: number, hi: number) =>\n  v < lo ? lo : v > hi ? hi : v;\n\n/** Non-negative finite number */\nexport const positive = (v: number | undefined) =>\n  typeof v === \"number\" && Number.isFinite(v) && v > 0 ? v : 0;\n\nexport const finite = (v: number | undefined, fallback = 0) =>\n  typeof v === \"number\" && Number.isFinite(v) ? v : fallback;\n\nexport const sum = (values: readonly number[]) => {\n  let s = 0;\n  for (const v of values) s += v;\n  return s;\n};\n\nexport const easeOutCubic = (t: number) => 1 - Math.pow(1 - clamp(t, 0, 1), 3);\n\n/** Angle brought into (-π/2, π/2] so that text rotated by it reads left to right */\nexport const upright = (a: number) => {\n  let r = a % TAU;\n  if (r > Math.PI) r -= TAU;\n  if (r <= -Math.PI) r += TAU;\n  if (r > Math.PI / 2) r -= Math.PI;\n  else if (r <= -Math.PI / 2) r += Math.PI;\n  return r;\n};\n\nexport const inset = (rect: ShapeRect, padding?: ChartPadding): ShapeRect => {\n  const top = padding?.top ?? 8;\n  const right = padding?.right ?? 8;\n  const bottom = padding?.bottom ?? 8;\n  const left = padding?.left ?? 8;\n  return {\n    x: rect.x + left,\n    y: rect.y + top,\n    width: Math.max(0, rect.width - left - right),\n    height: Math.max(0, rect.height - top - bottom),\n  };\n};\n\n/** Shortens a text with an ellipsis so it fits in `max` pixels (\"\" if nothing fits) */\nexport const ellipsize = (\n  text: string,\n  max: number,\n  font: string,\n  measure: MeasureText,\n): string => {\n  if (measure(text, font) <= max) return text;\n  if (measure(\"…\", font) > max) return \"\";\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = (lo + hi + 1) >> 1;\n    if (measure(text.slice(0, mid) + \"…\", font) <= max) lo = mid;\n    else hi = mid - 1;\n  }\n  return lo ? text.slice(0, lo).trimEnd() + \"…\" : \"\";\n};\n\n/** Stable keys of named values: the name, `name#2` for duplicates */\nexport const uniqueKeys = (names: readonly string[]) => {\n  const seen = new Map<string, number>();\n  return names.map((name) => {\n    const n = (seen.get(name) ?? 0) + 1;\n    seen.set(name, n);\n    return n === 1 ? name : `${name}#${n}`;\n  });\n};\n\nconst LIGHT_INK: Rgba = [1, 1, 1, 0.96];\nconst DARK_INK: Rgba = [15 / 255, 23 / 255, 42 / 255, 0.88];\n\nconst channel = (v: number) =>\n  v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n\n/** WCAG relative luminance of an opaque color */\nexport const relativeLuminance = (c: Rgba) =>\n  0.2126 * channel(c[0]) + 0.7152 * channel(c[1]) + 0.0722 * channel(c[2]);\n\n/** `top` composited over the opaque `bottom` */\nexport const over = (top: Rgba, bottom: Rgba): Rgba => {\n  const a = clamp(top[3], 0, 1);\n  return [\n    top[0] * a + bottom[0] * (1 - a),\n    top[1] * a + bottom[1] * (1 - a),\n    top[2] * a + bottom[2] * (1 - a),\n    1,\n  ];\n};\n\n/** WCAG contrast ratio (1-21) of `ink` drawn on the opaque `fill` */\nexport const contrastRatio = (ink: Rgba, fill: Rgba) => {\n  const a = relativeLuminance(over(ink, fill));\n  const b = relativeLuminance(fill);\n  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);\n};\n\nconst WHITE: Rgba = [1, 1, 1, 1];\n\n/** Light or dark ink, whichever contrasts more with the fill, and its contrast */\nexport const inkOn = (\n  fill: Rgba,\n  backdrop: Rgba = WHITE,\n): { ink: Rgba; css: string; contrast: number } => {\n  const solid = over(fill, over(backdrop, WHITE));\n  const light = contrastRatio(LIGHT_INK, solid);\n  const dark = contrastRatio(DARK_INK, solid);\n  return light >= dark\n    ? { ink: LIGHT_INK, css: toCss(LIGHT_INK), contrast: light }\n    : { ink: DARK_INK, css: toCss(DARK_INK), contrast: dark };\n};\n\n/** Readable text color on a fill (WCAG contrast) */\nexport const textOn = (fill: Rgba, backdrop?: Rgba) =>\n  inkOn(fill, backdrop).css;\n\n/**\n * Fill adjusted so that its best ink reaches `target` contrast: darkened\n * under white text, lightened under dark text (at most `limit` of the way)\n */\nexport const readableFill = (fill: Rgba, target = 4.5, limit = 0.3): Rgba => {\n  let best = inkOn(fill);\n  if (best.contrast >= target) return fill;\n  const toward: Rgba =\n    best.ink === LIGHT_INK ? [0, 0, 0, fill[3]] : [1, 1, 1, fill[3]];\n  for (let t = 0.04; t <= limit + 1e-9; t += 0.04) {\n    const next = mix(fill, toward, t);\n    best = inkOn(next);\n    if (best.contrast >= target) return next;\n  }\n  return mix(fill, toward, limit);\n};\n\n/** Resolves a custom color with the theme resolver (static parsing otherwise) */\nexport const resolveWith = (\n  theme: ChartTheme,\n  css: string | undefined,\n  fallback: Rgba,\n): Rgba => {\n  if (!css) return fallback;\n  return theme.resolve\n    ? theme.resolve(css, fallback)\n    : (parseColor(css) ?? fallback);\n};\n\n/** Placeholder of a chart without data: a muted ring and \"No data\" (localized) */\nexport const emptyLayout = (c: LayoutContext): LayoutResult => {\n  const { area, theme } = c;\n  const cx = area.x + area.width / 2;\n  const cy = area.y + area.height / 2;\n  const r1 = Math.max(0, Math.min(area.width, area.height) / 2 - 6);\n  return {\n    nodes: [\n      {\n        kind: \"sector\",\n        cx,\n        cy,\n        r0: r1 * 0.66,\n        r1,\n        a0: 0,\n        a1: TAU,\n        pad: 0,\n        corner: 0,\n        fill: toCss(theme.grid, 0.8),\n      },\n      {\n        kind: \"text\",\n        x: cx,\n        y: cy,\n        text: c.labels.noData,\n        font: font(theme, 12),\n        color: toCss(theme.textMuted),\n        align: \"center\",\n        baseline: \"middle\",\n      },\n    ],\n    items: [],\n    dim: 1,\n    empty: true,\n  };\n};\n"],"mappings":"4DAcA,IAAaM,EAAM,KAAK,GAAK,EAsQhBC,GAA6B,EAAM,IAAM,CACpD,IAAMC,EAAO,oBAAoB,KAAKC,CAAC,EACvC,OAAOC,EAAK,QAAUF,EAAO,OAAOA,EAAK,EAAE,EAAI,IAAM,EACvD,EA+BaG,GAAS,EAAW,EAAY,IAC3CC,EAAIC,EAAKA,EAAKD,EAAIE,EAAKA,EAAKF,EAGjBG,EAAY,GACvB,OAAOH,GAAM,UAAY,OAAO,SAASA,CAAC,GAAKA,EAAI,EAAIA,EAAI,EAEhDI,GAAU,EAAuB,EAAW,IACvD,OAAOJ,GAAM,UAAY,OAAO,SAASA,CAAC,EAAIA,EAAIK,EAEvCC,EAAO,GAA8B,CAChD,IAAIC,EAAI,EACR,IAAK,IAAMP,KAAKQ,EAAQ,GAAKR,EAC7B,OAAOO,CACT,EAEaE,EAAgB,GAAc,GAAa,EAAIV,EAAMW,EAAG,EAAG,CAAC,IAAG,EAG/DC,EAAW,GAAc,CACpC,IAAIC,EAAIC,EAAInB,EAKZ,OAJIkB,EAAI,KAAK,KAAI,GAAKlB,GAClBkB,GAAK,CAAC,KAAK,KAAI,GAAKlB,GACpBkB,EAAI,KAAK,GAAK,EAAG,GAAK,KAAK,GACtBA,GAAK,CAAC,KAAK,GAAK,IAAG,GAAK,KAAK,IAC/BA,CACT,EAEaE,GAAS,EAAiB,IAAsC,CAC3E,IAAMC,EAAMC,GAAS,KAAO,EACtBC,EAAQD,GAAS,OAAS,EAC1BE,EAASF,GAAS,QAAU,EAC5BG,EAAOH,GAAS,MAAQ,EAC9B,MAAO,CACL,EAAGI,EAAK,EAAID,EACZ,EAAGC,EAAK,EAAIL,EACZ,MAAO,KAAK,IAAI,EAAGK,EAAK,MAAQD,EAAOF,CAAK,EAC5C,OAAQ,KAAK,IAAI,EAAGG,EAAK,OAASL,EAAMG,CAAM,CAChD,CACF,EAGaG,GACX,EACA,EACA,EACA,IACW,CACX,GAAIC,EAAQxB,EAAMyB,CAAI,GAAKC,EAAK,OAAO1B,EACvC,GAAIwB,EAAQ,IAAKC,CAAI,EAAIC,EAAK,MAAO,GACrC,IAAIvB,EAAK,EACLC,EAAKJ,EAAK,OACd,KAAOG,EAAKC,GAAI,CACd,IAAMuB,EAAOxB,EAAKC,EAAK,GAAM,EACzBoB,EAAQxB,EAAK,MAAM,EAAG2B,CAAG,EAAI,IAAKF,CAAI,GAAKC,EAAK,EAAKC,EACpD,EAAKA,EAAM,CAClB,CACA,OAAOxB,EAAKH,EAAK,MAAM,EAAGG,CAAE,CAAC,CAAC,QAAQ,EAAI,IAAM,EAClD,EAGayB,EAAc,GAA6B,CACtD,IAAMC,EAAO,IAAI,IACjB,OAAOC,EAAM,IAAK,GAAS,CACzB,IAAM,GAAKD,EAAK,IAAIE,CAAI,GAAK,GAAK,EAElC,OADAF,EAAK,IAAIE,EAAM,CAAC,EACT,IAAM,EAAIA,EAAO,GAAGA,EAAK,GAAG,GACrC,CAAC,CACH,EAEMC,EAAkB,CAAC,EAAG,EAAG,EAAG,GAAI,EAChCC,EAAiB,CAAC,GAAK,IAAK,GAAK,IAAK,GAAK,IAAK,GAAI,EAEpDC,EAAW,GACfhC,GAAK,OAAUA,EAAI,QAAkBA,EAAI,MAAS,QAAO,IAG9CiC,EAAqB,GAChC,MAASD,EAAQE,EAAE,EAAE,EAAI,MAASF,EAAQE,EAAE,EAAE,EAAI,MAASF,EAAQE,EAAE,EAAE,EAG5DC,GAAQ,EAAW,IAAuB,CACrD,IAAMtB,EAAId,EAAMgB,EAAI,GAAI,EAAG,CAAC,EAC5B,MAAO,CACLA,EAAI,GAAKF,EAAIK,EAAO,IAAM,EAAIL,GAC9BE,EAAI,GAAKF,EAAIK,EAAO,IAAM,EAAIL,GAC9BE,EAAI,GAAKF,EAAIK,EAAO,IAAM,EAAIL,GAC9B,CACF,CACF,EAGauB,GAAiB,EAAW,IAAe,CACtD,IAAMvB,EAAIoB,EAAkBE,EAAKE,EAAKC,CAAI,CAAC,EACrCC,EAAIN,EAAkBK,CAAI,EAChC,OAAQ,KAAK,IAAIzB,EAAG0B,CAAC,EAAI,MAAS,KAAK,IAAI1B,EAAG0B,CAAC,EAAI,IACrD,EAEMC,EAAc,CAAC,EAAG,EAAG,EAAG,CAAC,EAGlBC,GACX,EACA,EAAiBD,IACgC,CACjD,IAAME,EAAQP,EAAKG,EAAMH,EAAKQ,EAAUH,CAAK,CAAC,EACxCI,EAAQR,EAAcN,EAAWY,CAAK,EACtCG,EAAOT,EAAcL,EAAUW,CAAK,EAC1C,OAAOE,GAASC,EACZ,CAAE,IAAKf,EAAW,IAAK1C,EAAAA,MAAM0C,CAAS,EAAG,SAAUc,CAAM,EACzD,CAAE,IAAKb,EAAU,IAAK3C,EAAAA,MAAM2C,CAAQ,EAAG,SAAUc,CAAK,CAC5D,EAGaC,GAAU,EAAY,IACjCL,EAAMH,EAAMK,CAAQ,CAAC,CAAC,IAMXI,GAAgB,EAAY,EAAS,IAAK,EAAQ,KAAc,CAC3E,IAAIC,EAAOP,EAAMH,CAAI,EACrB,GAAIU,EAAK,UAAYC,EAAQ,OAAOX,EACpC,IAAMY,EACJF,EAAK,MAAQlB,EAAY,CAAC,EAAG,EAAG,EAAGQ,EAAK,EAAE,EAAI,CAAC,EAAG,EAAG,EAAGA,EAAK,EAAE,EACjE,IAAK,IAAI5B,EAAI,IAAMA,GAAKyC,EAAQ,KAAM,GAAK,IAAM,CAC/C,IAAMC,EAAO/D,EAAAA,IAAIiD,EAAMY,EAAQxC,CAAC,EAEhC,GADA,EAAO+B,EAAMW,CAAI,EACbJ,EAAK,UAAYC,EAAQ,OAAOG,CACtC,CACA,OAAO/D,EAAAA,IAAIiD,EAAMY,EAAQC,CAAK,CAChC,EAGaE,GACX,EACA,EACA,IAEKC,EACEC,EAAM,QACTA,EAAM,QAAQD,EAAKjD,CAAQ,EAC1Bf,EAAAA,WAAWgE,CAAG,GAAKjD,EAHPA,EAONmD,EAAe,GAAmC,CAC7D,GAAM,CAAE,OAAM,SAAUtB,EAClBuB,EAAKC,EAAK,EAAIA,EAAK,MAAQ,EAC3BC,EAAKD,EAAK,EAAIA,EAAK,OAAS,EAC5BE,EAAK,KAAK,IAAI,EAAG,KAAK,IAAIF,EAAK,MAAOA,EAAK,MAAM,EAAI,EAAI,CAAC,EAChE,MAAO,CACL,MAAO,CACL,CACE,KAAM,SACN,KACA,KACA,GAAIE,EAAK,IACT,KACA,GAAI,EACJ,GAAIlE,EACJ,IAAK,EACL,OAAQ,EACR,KAAMN,EAAAA,MAAMmE,EAAM,KAAM,EAAG,CAC7B,EACA,CACE,KAAM,OACN,EAAGE,EACH,EAAGE,EACH,KAAMzB,EAAE,OAAO,OACf,KAAM3C,EAAAA,KAAKgE,EAAO,EAAE,EACpB,MAAOnE,EAAAA,MAAMmE,EAAM,SAAS,EAC5B,MAAO,SACP,SAAU,QACZ,CACF,EACA,MAAO,CAAC,EACR,IAAK,EACL,MAAO,EACT,CACF"}

package/dist/charts/engine/shapes/scene.d.cts

@@ -0,0 +1,311 @@
+import { Rgba } from '../color.cjs';
+import { ChartTheme } from '../theme.cjs';
+import { ChartPadding } from '../types.cjs';
+import { ShapeChartLabels, ShapeChartType, ShapeHoverEvent } from './types.cjs';
+export declare const TAU: number;
+/** Rectangle in CSS pixels */
+export interface ShapeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface NodeBase {
+    /** Index of the item the node belongs to (hover, dimming); none for decorations */
+    hit?: number;
+    /**
+     * Other items whose hover also emphasizes the node (the flows of a hovered
+     * sankey node, the ancestors of a hovered sunburst sector); hit testing
+     * only uses `hit`
+     */
+    also?: readonly number[];
+    /** Opacity multiplier */
+    alpha?: number;
+    /** Offset applied while the node's item is hovered (pie slices pop out) */
+    shift?: [number, number];
+}
+/** Annular sector (pie slice, donut segment, ring) */
+export interface SectorNode extends NodeBase {
+    kind: "sector";
+    cx: number;
+    cy: number;
+    r0: number;
+    r1: number;
+    /** Canvas angles (radians, clockwise from 3 o'clock) */
+    a0: number;
+    a1: number;
+    /** Gap with the neighbours, in pixels */
+    pad: number;
+    /** Corner radius, in pixels */
+    corner: number;
+    fill: string;
+}
+/** Polygon (radar grid / series, funnel stage); `hole` is cut out */
+export interface PolygonNode extends NodeBase {
+    kind: "polygon";
+    /** Flat x, y list */
+    points: number[];
+    hole?: number[];
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    /** Corner radius, in pixels */
+    radius?: number;
+    /** Fill / stroke width when hovered */
+    hoverFill?: string;
+    hoverLineWidth?: number;
+    /** Lightens the shape when hovered */
+    brighten?: boolean;
+}
+export interface RectNode extends NodeBase {
+    kind: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    fill: string;
+    brighten?: boolean;
+    /** Outline drawn inside the rectangle while its item is hovered */
+    hoverStroke?: string;
+    /** Distance (px) around the rectangle still picked by hit testing (default 0) */
+    hitPad?: number;
+}
+/** Stroked arc (gauge track / value) */
+export interface ArcNode extends NodeBase {
+    kind: "arc";
+    cx: number;
+    cy: number;
+    r: number;
+    a0: number;
+    a1: number;
+    width: number;
+    color: string;
+    cap: "round" | "butt";
+    /** Distance (px) beyond the stroke still picked by hit testing (default 4) */
+    hitPad?: number;
+}
+/** Dot; without fill nor stroke it is only a hit area */
+export interface CircleNode extends NodeBase {
+    kind: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    /** Radar: indicator of the vertex */
+    indicator?: number;
+    /** Radius and halo color when the vertex is hovered */
+    hoverR?: number;
+    halo?: string;
+}
+export interface LineNode extends NodeBase {
+    kind: "line";
+    points: number[];
+    color: string;
+    width: number;
+    dash?: number[];
+}
+export interface TextNode extends NodeBase {
+    kind: "text";
+    x: number;
+    y: number;
+    text: string;
+    font: string;
+    color: string;
+    align: "left" | "center" | "right";
+    baseline: "top" | "middle" | "bottom" | "alphabetic";
+    /** Radar: indicator of the label */
+    indicator?: number;
+    hoverColor?: string;
+    hoverFont?: string;
+    /** Rotation around (x, y), radians clockwise */
+    rotate?: number;
+    /** Outline drawn behind the text so it reads over other marks */
+    halo?: string;
+}
+/**
+ * Sankey flow: a horizontal S-curve (cubic Bézier) of constant thickness
+ * from (x0, y0) to (x1, y1), filled with a gradient from `color0` to `color1`
+ */
+export interface LinkNode extends NodeBase {
+    kind: "link";
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    /** Thickness, in pixels */
+    width: number;
+    color0: string;
+    color1: string;
+    /** Opacity while the link (or one of its `also` items) is hovered */
+    activeAlpha?: number;
+}
+/** Radar: dashed guide from the center to the hovered indicator */
+export interface GuideNode extends NodeBase {
+    kind: "guide";
+    cx: number;
+    cy: number;
+    /** End of each spoke */
+    ends: [number, number][];
+    color: string;
+}
+export type ShapeNode = SectorNode | PolygonNode | RectNode | ArcNode | CircleNode | LineNode | TextNode | GuideNode | LinkNode;
+/** A row of the default tooltip */
+export interface ShapeTooltipRow {
+    name: string;
+    value: string;
+    color?: string;
+    strong?: boolean;
+}
+/** Something the pointer / keyboard can focus */
+export interface ShapeItem {
+    index: number;
+    name: string;
+    value: number;
+    percent: number;
+    /** `percent` formatted for screen readers (`percentFormat`) */
+    share?: string;
+    color: string;
+    path?: string[];
+    /** Anchor of the tooltip when focused with the keyboard */
+    x: number;
+    y: number;
+    /** Rows of the default tooltip */
+    rows: ShapeTooltipRow[];
+    /** Radar: one entry per indicator */
+    indicators?: {
+        name: string;
+        value: number;
+        percent: number;
+        x: number;
+        y: number;
+    }[];
+    /** Extra fields of the hover event (calendar date, sankey link ends) */
+    event?: Pick<ShapeHoverEvent, "date" | "source" | "target">;
+    /** Sunburst: path focused when the item is activated (click, Enter) */
+    drill?: string[];
+}
+/** What is hovered: an item (and a radar indicator) */
+export interface ShapeHover {
+    index: number;
+    indicator?: number;
+}
+export interface ShapeLegendEntry {
+    /** Index passed to `toggle` */
+    index: number;
+    name: string;
+    color: string;
+    hidden: boolean;
+}
+export interface ShapeScene {
+    type: ShapeChartType;
+    /** Size of the whole drawing */
+    width: number;
+    height: number;
+    nodes: ShapeNode[];
+    /** Focusable items, in keyboard order */
+    items: ShapeItem[];
+    /** Opacity of the other marks while one is hovered */
+    dim: number;
+    /** Entry animation of funnels / treemaps: fade and scale around a point */
+    enter?: {
+        alpha: number;
+        scale: number;
+        cx: number;
+        cy: number;
+    };
+    /**
+     * Arrow-key moves in a grid of items (calendar heatmap), in positions of
+     * `items`: `next` for Left / Right, `down` for Up / Down; no wrapping
+     */
+    steps?: {
+        next: number;
+        down: number;
+    };
+    /** Radar geometry used by hit testing (and to keep the tooltip off the labels) */
+    radar?: {
+        cx: number;
+        cy: number;
+        radius: number;
+        angles: number[];
+        series: {
+            index: number;
+            points: number[];
+        }[];
+        /** Boxes of the indicator labels */
+        labels?: ShapeRect[];
+    };
+    /** No data to draw (placeholder shown) */
+    empty: boolean;
+    /** Built-in texts of the chart's locale (accessible descriptions) */
+    labels?: ShapeChartLabels;
+    /** Resolved locale of the chart */
+    locale?: string;
+}
+/** Measures a text in a CSS font */
+export type MeasureText = (text: string, font: string) => number;
+/** Approximate width of a text without a canvas (tests, SSR) */
+export declare const estimateText: MeasureText;
+/** What the layouts of every type get */
+export interface LayoutContext {
+    theme: ChartTheme;
+    measure: MeasureText;
+    hidden: ReadonlySet<number>;
+    /** Entry progress, eased (1 when done) */
+    enter: number;
+    /** Displayed (animated) value of a key */
+    value(key: string, target: number): number;
+    format(value: number): string;
+    /** Formats a share (0-1): `percentFormat` or a locale percent with one decimal */
+    percent(share: number): string;
+    /** Built-in texts (locale and `texts` overrides) */
+    labels: ShapeChartLabels;
+    /** Resolved locale */
+    locale: string;
+    /** Color of the `i`-th mark (custom `color` or the palette) */
+    color(css: string | undefined, i: number): Rgba;
+    /** Drawing area, padding excluded */
+    area: ShapeRect;
+    /** Sunburst: names from the root to the focused node */
+    focus: readonly string[];
+}
+export type LayoutResult = Omit<ShapeScene, "type" | "width" | "height" | "labels" | "locale">;
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+/** Non-negative finite number */
+export declare const positive: (v: number | undefined) => number;
+export declare const finite: (v: number | undefined, fallback?: number) => number;
+export declare const sum: (values: readonly number[]) => number;
+export declare const easeOutCubic: (t: number) => number;
+/** Angle brought into (-π/2, π/2] so that text rotated by it reads left to right */
+export declare const upright: (a: number) => number;
+export declare const inset: (rect: ShapeRect, padding?: ChartPadding) => ShapeRect;
+/** Shortens a text with an ellipsis so it fits in `max` pixels ("" if nothing fits) */
+export declare const ellipsize: (text: string, max: number, font: string, measure: MeasureText) => string;
+/** Stable keys of named values: the name, `name#2` for duplicates */
+export declare const uniqueKeys: (names: readonly string[]) => string[];
+/** WCAG relative luminance of an opaque color */
+export declare const relativeLuminance: (c: Rgba) => number;
+/** `top` composited over the opaque `bottom` */
+export declare const over: (top: Rgba, bottom: Rgba) => Rgba;
+/** WCAG contrast ratio (1-21) of `ink` drawn on the opaque `fill` */
+export declare const contrastRatio: (ink: Rgba, fill: Rgba) => number;
+/** Light or dark ink, whichever contrasts more with the fill, and its contrast */
+export declare const inkOn: (fill: Rgba, backdrop?: Rgba) => {
+    ink: Rgba;
+    css: string;
+    contrast: number;
+};
+/** Readable text color on a fill (WCAG contrast) */
+export declare const textOn: (fill: Rgba, backdrop?: Rgba) => string;
+/**
+ * Fill adjusted so that its best ink reaches `target` contrast: darkened
+ * under white text, lightened under dark text (at most `limit` of the way)
+ */
+export declare const readableFill: (fill: Rgba, target?: number, limit?: number) => Rgba;
+/** Resolves a custom color with the theme resolver (static parsing otherwise) */
+export declare const resolveWith: (theme: ChartTheme, css: string | undefined, fallback: Rgba) => Rgba;
+/** Placeholder of a chart without data: a muted ring and "No data" (localized) */
+export declare const emptyLayout: (c: LayoutContext) => LayoutResult;
+export {};

package/dist/charts/engine/shapes/scene.d.ts

@@ -0,0 +1,311 @@
+import { Rgba } from '../color.js';
+import { ChartTheme } from '../theme.js';
+import { ChartPadding } from '../types.js';
+import { ShapeChartLabels, ShapeChartType, ShapeHoverEvent } from './types.js';
+export declare const TAU: number;
+/** Rectangle in CSS pixels */
+export interface ShapeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface NodeBase {
+    /** Index of the item the node belongs to (hover, dimming); none for decorations */
+    hit?: number;
+    /**
+     * Other items whose hover also emphasizes the node (the flows of a hovered
+     * sankey node, the ancestors of a hovered sunburst sector); hit testing
+     * only uses `hit`
+     */
+    also?: readonly number[];
+    /** Opacity multiplier */
+    alpha?: number;
+    /** Offset applied while the node's item is hovered (pie slices pop out) */
+    shift?: [number, number];
+}
+/** Annular sector (pie slice, donut segment, ring) */
+export interface SectorNode extends NodeBase {
+    kind: "sector";
+    cx: number;
+    cy: number;
+    r0: number;
+    r1: number;
+    /** Canvas angles (radians, clockwise from 3 o'clock) */
+    a0: number;
+    a1: number;
+    /** Gap with the neighbours, in pixels */
+    pad: number;
+    /** Corner radius, in pixels */
+    corner: number;
+    fill: string;
+}
+/** Polygon (radar grid / series, funnel stage); `hole` is cut out */
+export interface PolygonNode extends NodeBase {
+    kind: "polygon";
+    /** Flat x, y list */
+    points: number[];
+    hole?: number[];
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    /** Corner radius, in pixels */
+    radius?: number;
+    /** Fill / stroke width when hovered */
+    hoverFill?: string;
+    hoverLineWidth?: number;
+    /** Lightens the shape when hovered */
+    brighten?: boolean;
+}
+export interface RectNode extends NodeBase {
+    kind: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    fill: string;
+    brighten?: boolean;
+    /** Outline drawn inside the rectangle while its item is hovered */
+    hoverStroke?: string;
+    /** Distance (px) around the rectangle still picked by hit testing (default 0) */
+    hitPad?: number;
+}
+/** Stroked arc (gauge track / value) */
+export interface ArcNode extends NodeBase {
+    kind: "arc";
+    cx: number;
+    cy: number;
+    r: number;
+    a0: number;
+    a1: number;
+    width: number;
+    color: string;
+    cap: "round" | "butt";
+    /** Distance (px) beyond the stroke still picked by hit testing (default 4) */
+    hitPad?: number;
+}
+/** Dot; without fill nor stroke it is only a hit area */
+export interface CircleNode extends NodeBase {
+    kind: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    /** Radar: indicator of the vertex */
+    indicator?: number;
+    /** Radius and halo color when the vertex is hovered */
+    hoverR?: number;
+    halo?: string;
+}
+export interface LineNode extends NodeBase {
+    kind: "line";
+    points: number[];
+    color: string;
+    width: number;
+    dash?: number[];
+}
+export interface TextNode extends NodeBase {
+    kind: "text";
+    x: number;
+    y: number;
+    text: string;
+    font: string;
+    color: string;
+    align: "left" | "center" | "right";
+    baseline: "top" | "middle" | "bottom" | "alphabetic";
+    /** Radar: indicator of the label */
+    indicator?: number;
+    hoverColor?: string;
+    hoverFont?: string;
+    /** Rotation around (x, y), radians clockwise */
+    rotate?: number;
+    /** Outline drawn behind the text so it reads over other marks */
+    halo?: string;
+}
+/**
+ * Sankey flow: a horizontal S-curve (cubic Bézier) of constant thickness
+ * from (x0, y0) to (x1, y1), filled with a gradient from `color0` to `color1`
+ */
+export interface LinkNode extends NodeBase {
+    kind: "link";
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    /** Thickness, in pixels */
+    width: number;
+    color0: string;
+    color1: string;
+    /** Opacity while the link (or one of its `also` items) is hovered */
+    activeAlpha?: number;
+}
+/** Radar: dashed guide from the center to the hovered indicator */
+export interface GuideNode extends NodeBase {
+    kind: "guide";
+    cx: number;
+    cy: number;
+    /** End of each spoke */
+    ends: [number, number][];
+    color: string;
+}
+export type ShapeNode = SectorNode | PolygonNode | RectNode | ArcNode | CircleNode | LineNode | TextNode | GuideNode | LinkNode;
+/** A row of the default tooltip */
+export interface ShapeTooltipRow {
+    name: string;
+    value: string;
+    color?: string;
+    strong?: boolean;
+}
+/** Something the pointer / keyboard can focus */
+export interface ShapeItem {
+    index: number;
+    name: string;
+    value: number;
+    percent: number;
+    /** `percent` formatted for screen readers (`percentFormat`) */
+    share?: string;
+    color: string;
+    path?: string[];
+    /** Anchor of the tooltip when focused with the keyboard */
+    x: number;
+    y: number;
+    /** Rows of the default tooltip */
+    rows: ShapeTooltipRow[];
+    /** Radar: one entry per indicator */
+    indicators?: {
+        name: string;
+        value: number;
+        percent: number;
+        x: number;
+        y: number;
+    }[];
+    /** Extra fields of the hover event (calendar date, sankey link ends) */
+    event?: Pick<ShapeHoverEvent, "date" | "source" | "target">;
+    /** Sunburst: path focused when the item is activated (click, Enter) */
+    drill?: string[];
+}
+/** What is hovered: an item (and a radar indicator) */
+export interface ShapeHover {
+    index: number;
+    indicator?: number;
+}
+export interface ShapeLegendEntry {
+    /** Index passed to `toggle` */
+    index: number;
+    name: string;
+    color: string;
+    hidden: boolean;
+}
+export interface ShapeScene {
+    type: ShapeChartType;
+    /** Size of the whole drawing */
+    width: number;
+    height: number;
+    nodes: ShapeNode[];
+    /** Focusable items, in keyboard order */
+    items: ShapeItem[];
+    /** Opacity of the other marks while one is hovered */
+    dim: number;
+    /** Entry animation of funnels / treemaps: fade and scale around a point */
+    enter?: {
+        alpha: number;
+        scale: number;
+        cx: number;
+        cy: number;
+    };
+    /**
+     * Arrow-key moves in a grid of items (calendar heatmap), in positions of
+     * `items`: `next` for Left / Right, `down` for Up / Down; no wrapping
+     */
+    steps?: {
+        next: number;
+        down: number;
+    };
+    /** Radar geometry used by hit testing (and to keep the tooltip off the labels) */
+    radar?: {
+        cx: number;
+        cy: number;
+        radius: number;
+        angles: number[];
+        series: {
+            index: number;
+            points: number[];
+        }[];
+        /** Boxes of the indicator labels */
+        labels?: ShapeRect[];
+    };
+    /** No data to draw (placeholder shown) */
+    empty: boolean;
+    /** Built-in texts of the chart's locale (accessible descriptions) */
+    labels?: ShapeChartLabels;
+    /** Resolved locale of the chart */
+    locale?: string;
+}
+/** Measures a text in a CSS font */
+export type MeasureText = (text: string, font: string) => number;
+/** Approximate width of a text without a canvas (tests, SSR) */
+export declare const estimateText: MeasureText;
+/** What the layouts of every type get */
+export interface LayoutContext {
+    theme: ChartTheme;
+    measure: MeasureText;
+    hidden: ReadonlySet<number>;
+    /** Entry progress, eased (1 when done) */
+    enter: number;
+    /** Displayed (animated) value of a key */
+    value(key: string, target: number): number;
+    format(value: number): string;
+    /** Formats a share (0-1): `percentFormat` or a locale percent with one decimal */
+    percent(share: number): string;
+    /** Built-in texts (locale and `texts` overrides) */
+    labels: ShapeChartLabels;
+    /** Resolved locale */
+    locale: string;
+    /** Color of the `i`-th mark (custom `color` or the palette) */
+    color(css: string | undefined, i: number): Rgba;
+    /** Drawing area, padding excluded */
+    area: ShapeRect;
+    /** Sunburst: names from the root to the focused node */
+    focus: readonly string[];
+}
+export type LayoutResult = Omit<ShapeScene, "type" | "width" | "height" | "labels" | "locale">;
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+/** Non-negative finite number */
+export declare const positive: (v: number | undefined) => number;
+export declare const finite: (v: number | undefined, fallback?: number) => number;
+export declare const sum: (values: readonly number[]) => number;
+export declare const easeOutCubic: (t: number) => number;
+/** Angle brought into (-π/2, π/2] so that text rotated by it reads left to right */
+export declare const upright: (a: number) => number;
+export declare const inset: (rect: ShapeRect, padding?: ChartPadding) => ShapeRect;
+/** Shortens a text with an ellipsis so it fits in `max` pixels ("" if nothing fits) */
+export declare const ellipsize: (text: string, max: number, font: string, measure: MeasureText) => string;
+/** Stable keys of named values: the name, `name#2` for duplicates */
+export declare const uniqueKeys: (names: readonly string[]) => string[];
+/** WCAG relative luminance of an opaque color */
+export declare const relativeLuminance: (c: Rgba) => number;
+/** `top` composited over the opaque `bottom` */
+export declare const over: (top: Rgba, bottom: Rgba) => Rgba;
+/** WCAG contrast ratio (1-21) of `ink` drawn on the opaque `fill` */
+export declare const contrastRatio: (ink: Rgba, fill: Rgba) => number;
+/** Light or dark ink, whichever contrasts more with the fill, and its contrast */
+export declare const inkOn: (fill: Rgba, backdrop?: Rgba) => {
+    ink: Rgba;
+    css: string;
+    contrast: number;
+};
+/** Readable text color on a fill (WCAG contrast) */
+export declare const textOn: (fill: Rgba, backdrop?: Rgba) => string;
+/**
+ * Fill adjusted so that its best ink reaches `target` contrast: darkened
+ * under white text, lightened under dark text (at most `limit` of the way)
+ */
+export declare const readableFill: (fill: Rgba, target?: number, limit?: number) => Rgba;
+/** Resolves a custom color with the theme resolver (static parsing otherwise) */
+export declare const resolveWith: (theme: ChartTheme, css: string | undefined, fallback: Rgba) => Rgba;
+/** Placeholder of a chart without data: a muted ring and "No data" (localized) */
+export declare const emptyLayout: (c: LayoutContext) => LayoutResult;
+export {};