@motionscript/charts 0.1.1-alpha.1 → 0.1.1-alpha.3

package/src/bar-chart/bar-chart.ts

@@ -11,6 +11,11 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type TextStyle as _TextStyle,
+  type CornerRadiusResolved as _CornerRadiusResolved,
+  type CornerStyleResolved as _CornerStyleResolved,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
   type Fill as _Fill,
   type FillResolved as _FillResolved,
   type Stroke as _Stroke,
@@ -44,12 +49,14 @@ import {
 } from "../kit/shared"
 import {
   CARTESIAN_GRID,
-  CHART_COLORS,
+  CARTESIAN_AXES,
   CHART_LEGEND,
+  CHART_SERIES,
   CHART_STYLE_FAMILY,
   CHART_STYLE_PRESETS,
-  CHART_TEXT,
+  GRID_BACKGROUND,
   axisConfigOf,
+  migrateChartStyle,
   legendConfigOf,
   seriesFill,
   valueText,
@@ -70,7 +77,7 @@ import {
 
 const BAR_STYLE = Types.style(
   CHART_STYLE_FAMILY,
-  { colors: CHART_COLORS, text: CHART_TEXT, grid: CARTESIAN_GRID, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND },
+  { series: CHART_SERIES, background: GRID_BACKGROUND, grid: CARTESIAN_GRID, axes: CARTESIAN_AXES, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND },
   { presets: CHART_STYLE_PRESETS }
 )
 
@@ -195,6 +202,7 @@ function seriesBars(s: BarState, index: number, plot: Size2D): BarGeometry[] {
       from: valueToPx(domain, along, span.from),
       to: valueToPx(domain, along, span.to),
       round: span.outer,
+      grounded: !stacked || span.from === 0,
       caption,
     }
   })
@@ -283,6 +291,7 @@ export const BarChart = component2d({
     weights: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
     showing: (state) => state.series.map((s) => s.enabled ?? true),
   },
+  migrate: { style: migrateChartStyle("cartesian") },
   allowedChildren: [],
   children: (state) => {
     const style = () => state.style
@@ -358,12 +367,13 @@ export const BarChart = component2d({
           baseline: () => valueToPx(domain(), runs(state, plotSize()).along, baselineValue(domain())),
           horizontal,
           fill: () => seriesFill(style(), s, i),
-          cornerRadius: () => style().barRadius,
+          cornerRadius: () => style().barCornerRadius,
+          cornerStyle: () => style().barCornerStyle,
           growth: () => state.growth,
           dims: () => categoryDims(state),
           // A figure past a stack's end prints the stack's total; a percent stack has none worth printing, so prints its shares inside.
           values: () => (built.values === "end" && state.stack === "percent" ? "inside" : built.values),
-          valueStyle: () => ({ ...valueText(style()), fontSize: Math.round(style().fontSize * 0.85) }),
+          valueStyle: () => valueText(style()),
           enabled: () => state.showing[i] ?? (s.enabled ?? true),
         }) as unknown as Node2D
     )
@@ -385,7 +395,7 @@ export const BarChart = component2d({
     plot = new Rect({
       children: [
         new ChartCanvas({
-          fill: () => style().background,
+          fill: () => style().gridBackground,
           xGridStroke: () => style().verticalGrid,
           yGridStroke: () => style().horizontalGrid,
           xMarkers: horizontal ? () => domain().ticks : boundaries,
@@ -402,6 +412,7 @@ export const BarChart = component2d({
 
     return asParts([
       cartesianFrame({
+        background: () => style().background,
         left,
         ghost,
         plot,

package/src/bar-chart/chart-bars.ts

@@ -11,7 +11,11 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
   type TextStyle,
+  type CornerRadiusResolved,
+  type CornerStyleResolved,
 } from "@motionscript/sdk"
 
 import { boundText } from "../kit/cartesian"
@@ -35,8 +39,10 @@ export interface BarGeometry {
   from: number
   /** The far end at full growth. */
   to: number
-  /** Whether the far end takes the corner radius (the stack's last segment on its side). */
+  /** Whether the far end takes the far corners (the stack's last segment on its side). */
   round: boolean
+  /** Whether the base takes the base corners (it stands on the baseline: every grouped bar, a stack's first segment). */
+  grounded?: boolean
   /** The figure printed by the bar; empty for none. */
   caption: string
 }
@@ -106,7 +112,9 @@ export const ChartBars = component2d({
     /** Bars grow along x from a category column rather than along y from a row. */
     horizontal: false,
     fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
-    cornerRadius: 8,
+    /** As for a bar standing up from the baseline: `topLeft`/`topRight` round its far end, the bottom pair its base. */
+    cornerRadius: Types.cornerRadius(8),
+    cornerStyle: Types.cornerStyle("rounded"),
     /**
      * Rise of every bar in `[0, 1]` about the baseline, not each bar's own base:
      * every segment travels by the same factor, so a stack stays flush
@@ -163,17 +171,13 @@ export const ChartBars = component2d({
         const seam = bar.round ? 0 : 1
         const length = Math.abs(ends.end - ends.base) + seam
         if (length <= seam) continue
-        const radius = bar.round ? Math.max(0, Math.min(state.cornerRadius, length, bar.thickness / 2)) : 0
         const forward = ends.end >= ends.base
         const mid = (ends.base + ends.end) / 2 + (forward ? seam : -seam) / 2
-        // Corner keys are visual (y-up): only the far end rounds.
-        const far = state.horizontal
-          ? (forward ? { topRight: radius, bottomRight: radius, topLeft: 0, bottomLeft: 0 } : { topLeft: radius, bottomLeft: radius, topRight: 0, bottomRight: 0 })
-          : (forward ? { topLeft: radius, topRight: radius, bottomLeft: 0, bottomRight: 0 } : { bottomLeft: radius, bottomRight: radius, topLeft: 0, topRight: 0 })
+        const corners = barCorners(state, bar, forward, length)
         // One `Graphics2D` per bar: opacity belongs to the command list, and the spotlight dims single bars.
         const g = new Graphics2D().rect(state.horizontal
-          ? { x: mid, y: bar.center, width: length, height: bar.thickness, cornerRadius: radius > 0 ? far : 0 }
-          : { x: bar.center, y: mid, width: bar.thickness, height: length, cornerRadius: radius > 0 ? far : 0 })
+          ? { x: mid, y: bar.center, width: length, height: bar.thickness, ...corners }
+          : { x: bar.center, y: mid, width: bar.thickness, height: length, ...corners })
         g.fill(state.fill)
         ctx.draw(g.opacity(dimAt(state, i)))
       }
@@ -184,6 +188,41 @@ export const ChartBars = component2d({
 
 export type ChartBars = NodeOf<typeof ChartBars>
 
+type Corners<T> = { topLeft: T; topRight: T; bottomRight: T; bottomLeft: T }
+
+/**
+ * Turns corners written for a bar standing up into the drawn bar's visual
+ * (y-up) corners: mirrored for a bar below zero, turned a quarter clockwise
+ * for one growing right, and both for one growing left.
+ */
+function orient<T>(c: Corners<T>, horizontal: boolean, forward: boolean): Corners<T> {
+  if (!horizontal) return forward ? c : { topLeft: c.bottomLeft, topRight: c.bottomRight, bottomRight: c.topRight, bottomLeft: c.topLeft }
+  return forward
+    ? { topLeft: c.bottomLeft, topRight: c.topLeft, bottomRight: c.topRight, bottomLeft: c.bottomRight }
+    : { topLeft: c.topLeft, topRight: c.bottomLeft, bottomRight: c.bottomRight, bottomLeft: c.topRight }
+}
+
+/** Bar `bar`'s rect corners: the far pair only where its stack ends, the base pair only on the baseline, each held inside the bar. */
+export function barCorners(
+  state: { readonly cornerRadius: CornerRadiusResolved; readonly cornerStyle: CornerStyleResolved; readonly horizontal: boolean },
+  bar: BarGeometry,
+  forward: boolean,
+  length: number
+): { cornerRadius: Corners<number>; cornerStyle: CornerStyleResolved } {
+  const grounded = bar.grounded ?? true
+  const r = state.cornerRadius
+  const ends = (bar.round ? 1 : 0) + (grounded ? 1 : 0)
+  const cap = Math.max(0, Math.min(bar.thickness / 2, ends > 1 ? length / 2 : length))
+  const fit = (v: number, on: boolean) => (on ? Math.max(0, Math.min(v, cap)) : 0)
+  const upright: Corners<number> = {
+    topLeft: fit(r.topLeft, bar.round),
+    topRight: fit(r.topRight, bar.round),
+    bottomRight: fit(r.bottomRight, grounded),
+    bottomLeft: fit(r.bottomLeft, grounded),
+  }
+  return { cornerRadius: orient(upright, state.horizontal, forward), cornerStyle: orient(state.cornerStyle, state.horizontal, forward) }
+}
+
 /** A figure as the bar prints it when the chart gives no caption. */
 export function barCaption(value: number): string {
   return value === 0 ? "" : formatMarker(value)

package/src/bar-chart/shared.ts

@@ -1,6 +1,18 @@
-import { Types, fillOps, type DataRecord, type Fill } from "@motionscript/sdk"
+import {
+  Types,
+  fillOps,
+  type DataRecord,
+  type Fill,
+  // Named so the emitted marks types reach these through the sdk, not core.
+  type CornerRadiusResolved as _CornerRadiusResolved,
+  type CornerStyleResolved as _CornerStyleResolved,
+  type RectCornerRadius as _RectCornerRadius,
+  type RectCornerStyle as _RectCornerStyle,
+  type TextStyle as _TextStyle,
+} from "@motionscript/sdk"
 
 import { niceRange, num, text, type ChartSeries, type Range } from "../kit/shared"
+import { VALUE_TEXT } from "../kit/style"
 
 /** One bar per row, beside its siblings in the category slot or stacked on them: {@link ChartSeries} under the name for what it draws here. */
 export type BarSeries = ChartSeries
@@ -110,12 +122,17 @@ export function inkOn(fill: Fill): string {
   return luminance > 0.4 ? "#0a0a0a" : "white"
 }
 
-/** A bar chart's own look: how round and how wide the bars are. */
+/** A bar chart's own look: its corners, and how wide the bars are. */
 export const BAR_MARKS = {
-  /** Radius of each bar's far corners; a stacked segment inside the stack stays square. */
-  barRadius: Types.number(10, { min: 0, max: 64, step: 1, unit: "px" }),
+  /**
+   * Each corner as for a bar standing up from the baseline: the top pair round
+   * its far end, the bottom pair its base. Inside a stack, a segment's far end
+   * stays square unless it ends the stack, and its base unless it starts it.
+   */
+  barCornerRadius: Types.cornerRadius({ topLeft: 10, topRight: 10, bottomRight: 0, bottomLeft: 0 }),
+  barCornerStyle: Types.cornerStyle("rounded"),
   /** How much of its category slot a bar group fills, the rest spacing the groups. */
-  barWidth: Types.number(0.7, { min: 0.05, max: 1, step: 0.05 }),
+  barWidth: Types.number(0.7, { min: 0.05, max: 1, step: 0.05, unit: "%", scale: 100 }),
   /** Space between the bars of one group, side by side. */
   barGap: Types.number(6, { min: 0, max: 40, step: 1, unit: "px" }),
 }
@@ -123,4 +140,5 @@ export const BAR_MARKS = {
 export const BAR_LABELS = {
   /** Read as the chart is built: each bar's value past its end, inside it, or none. */
   values: Types.oneOf(["none", "end", "inside"] as const, { animatable: false }),
+  ...VALUE_TEXT,
 }

package/src/kit/cartesian.ts

@@ -12,24 +12,26 @@ import {
   type TextStyle,
 } from "@motionscript/sdk"
 
-import type { CartesianStyle, LegendPosition } from "./style"
+import { sizeOf, type CartesianStyle, type LegendPosition } from "./style"
 
 /** Space between the frame's rows and columns: the plot and the legend, the axes and the legend. */
-export function frameGap(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.round(style.fontSize * 0.9)
+export function frameGap(style: Pick<CartesianStyle, "legendText">): number {
+  return Math.round(sizeOf(style.legendText) * 0.9)
 }
 
 /** Room above the plot for the top value marker, which is centred on the top grid line. */
-export function headroom(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.ceil(style.fontSize * 0.7)
+export function headroom(style: Pick<CartesianStyle, "yLabelText">): number {
+  return Math.ceil(sizeOf(style.yLabelText) * 0.7)
 }
 
 /** How far an end marker of a horizontal value axis may hang past the plot: half a short caption. */
-export function overhang(style: Pick<CartesianStyle, "fontSize">): number {
-  return Math.ceil(style.fontSize * 1.1)
+export function overhang(style: Pick<CartesianStyle, "xLabelText">): number {
+  return Math.ceil(sizeOf(style.xLabelText) * 1.1)
 }
 
 interface CartesianParts {
+  /** Behind the whole chart, axes and legend included. */
+  readonly background?: () => Fill
   /** The axis beside the plot, on its left. */
   readonly left?: Node2D
   /** An invisible twin of `left` under the plot, so the row there starts at the plot's left edge. */
@@ -72,6 +74,7 @@ export function cartesianFrame(parts: CartesianParts): Node2D {
     height: "fill",
     gap: parts.gap,
     padding: parts.padding,
+    ...(parts.background ? { fill: parts.background } : {}),
     children: [
       ...(legend && parts.legendAt === "top" ? [across(legend)] : []),
       main,