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

package/src/pie-chart/shared.ts

@@ -1,10 +1,14 @@
 import { Types, type Fill, type TextStyle, type Stroke, type FillResolved as _FillResolved } from "@motionscript/sdk"
 
 import {
-  CHART_COLORS,
+  CHART_BACKGROUND,
+  CHART_FOREGROUND,
   CHART_LEGEND,
-  CHART_TEXT,
+  CHART_MUTED,
+  CHART_SERIES,
   legendConfigOf,
+  placedText,
+  sizeOf,
   type ChartStyleBase,
 } from "../kit/style"
 import { num, text, type LegendConfig } from "../kit/shared"
@@ -13,7 +17,7 @@ import { DEG, PIE_SPOTLIGHT_DIM, ringPoint, selectionFade, type CenterConfig, ty
 export { DEG, PIE_SPOTLIGHT_DIM, ringPoint, selectionFade, type CenterConfig, type PieSlice }
 
 /**
- * One slice per row, painted from `palette` by row order (cycling). Paint comes
+ * One slice per row, painted from `seriesFills` by row order (cycling). Paint comes
  * from the palette, not the rows, because a pie's mark is a row where a line's
  * colour belongs to a column; that lets a pie be fed a CSV of plain numbers.
  */
@@ -147,6 +151,9 @@ export interface LabelConfig {
 
 /** What a pie's `style` resolves to. */
 export interface PieStyle extends ChartStyleBase {
+  readonly labelText: TextStyle
+  readonly valueText: TextStyle
+  readonly centerText: TextStyle
   readonly innerRadius: number
   readonly sliceGap: number
   readonly sliceRadius: number
@@ -155,8 +162,8 @@ export interface PieStyle extends ChartStyleBase {
 
 /** The groups of a pie's `style`: no grid, as nothing is ruled. */
 export const PIE_STYLE_GROUPS = {
-  colors: CHART_COLORS,
-  text: CHART_TEXT,
+  series: CHART_SERIES,
+  background: CHART_BACKGROUND,
   marks: {
     /** Hole radius as a fraction of the outer radius: 0 is a pie, about 0.6 a donut. */
     innerRadius: Types.number(0, { min: 0, max: 0.9, step: 0.05 }),
@@ -168,6 +175,12 @@ export const PIE_STYLE_GROUPS = {
   labels: {
     /** Read as the chart is built: inside the wedge, outside on a leader, or none. */
     labelPlacement: Types.oneOf(["inside", "outside", "none"] as const, { animatable: false }),
+    /** Each slice's name. */
+    labelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+    /** Each slice's share or value, beside its name; inside a wedge both are set larger, inked for contrast. */
+    valueText: Types.typography({ fontSize: 28, fontWeight: 700, fill: CHART_FOREGROUND }),
+    /** The summary in the hole; its caption is set smaller, in the slice names' ink. */
+    centerText: Types.typography({ fontSize: 50, fontWeight: 800, fill: CHART_FOREGROUND }),
   },
   legend: CHART_LEGEND,
 }
@@ -176,34 +189,25 @@ export function legendOf(style: PieStyle): LegendConfig {
   return legendConfigOf(style)
 }
 
-function face(style: PieStyle): Pick<TextStyle, "fontFamily"> {
-  return style.fontFamily ? { fontFamily: style.fontFamily } : {}
-}
-
 export function ringConfigOf(style: PieStyle): RingConfig {
   return { gap: style.sliceGap, holeRadius: style.innerRadius, startAngle: 0, selectedGrow: 1.08, cornerRadius: style.sliceRadius }
 }
 
 export function labelConfigOf(style: PieStyle): LabelConfig {
-  const base: TextStyle = { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "center", fill: style.muted }
-  const bold = Math.min(900, style.fontWeight + 200)
+  const base = placedText(style.labelText)
+  const value = placedText(style.valueText)
   return {
     textStyle: base,
-    percentStyle: { ...base, fontWeight: bold, fill: style.foreground },
-    insideStyle: { ...base, fontSize: Math.round(style.fontSize * 1.9), fontWeight: bold, fill: "#111113" },
-    leaderStroke: { weight: 2, fill: style.muted },
+    percentStyle: value,
+    insideStyle: { ...value, fontSize: Math.round(sizeOf(style.valueText) * 1.9), fill: "#111113" },
+    leaderStroke: { weight: 2, fill: style.labelText.fill ?? "white" },
   }
 }
 
 export function centerConfigOf(style: PieStyle): CenterConfig {
+  const size = sizeOf(style.centerText, 50)
   return {
-    labelStyle: {
-      ...face(style),
-      fontSize: Math.round(style.fontSize * 1.8),
-      fontWeight: Math.min(900, style.fontWeight + 300),
-      textAlign: "center",
-      fill: style.foreground,
-    },
-    captionStyle: { ...face(style), fontSize: Math.round(style.fontSize * 0.8), fontWeight: style.fontWeight, textAlign: "center", fill: style.muted },
+    labelStyle: placedText(style.centerText),
+    captionStyle: placedText(style.labelText, "center", { fontSize: Math.round(size * 0.45) }),
   }
 }

package/src/radar-chart/radar-chart.ts

@@ -4,13 +4,13 @@ import {
   Types,
   component2d,
   easeOut,
-  textOps,
   type ChildView,
   type DataRecord,
   type NodeOf,
   // 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 Fill as _Fill,
   type FillResolved as _FillResolved,
   type Stroke as _Stroke,
@@ -19,20 +19,22 @@ import {
   type Vector2,
 } from "@motionscript/sdk"
 
-import { laidOutSize } from "../kit/cartesian"
+import { boundText, laidOutSize } from "../kit/cartesian"
 import { ChartLegend } from "../kit/chart-legend"
 import { SERIES_ARG, asParts, fresh } from "../kit/entries"
 import { ENTER_SHARE, LEGEND_SLIDE, beats, type AnyTimeline, type Beat } from "../kit/motion"
 import { SPOTLIGHT_DIM, type ChartSeries } from "../kit/shared"
 import {
-  CHART_COLORS,
   CHART_LEGEND,
+  CHART_SERIES,
   CHART_STYLE_FAMILY,
   CHART_STYLE_PRESETS,
-  CHART_TEXT,
+  GRID_BACKGROUND,
   legendConfigOf,
-  markerText,
+  migrateChartStyle,
+  placedText,
   seriesFill,
+  sizeOf,
 } from "../kit/style"
 import { RadarGrid } from "./radar-grid"
 import { RadarSeries } from "./radar-series"
@@ -125,8 +127,8 @@ export const RadarChart = component2d({
     style: Types.style(
       CHART_STYLE_FAMILY,
       {
-        colors: CHART_COLORS,
-        text: CHART_TEXT,
+        series: CHART_SERIES,
+        background: GRID_BACKGROUND,
         grid: RADAR_GRID,
         marks: RADAR_MARKS,
         legend: CHART_LEGEND,
@@ -136,12 +138,13 @@ export const RadarChart = component2d({
   },
   // A node made of parts that fill would otherwise hug them.
   defaults: { width: "fill", height: "fill" },
+  migrate: { style: migrateChartStyle("radar") },
   allowedChildren: [],
   children: (state) => {
     const style = () => state.style
     let plot: Node2D | undefined
     const plotSize = (): Size2D => laidOutSize(plot)
-    const radius = () => fitRadius(plotSize(), categoriesOf(state.data, state.categoryField), style().fontSize, style().spokeLabels)
+    const radius = () => fitRadius(plotSize(), categoriesOf(state.data, state.categoryField), sizeOf(style().spokeText), style().spokeLabels)
     const count = state.data.length
     const enabled = state.series.map((s) => s.enabled ?? true)
 
@@ -149,6 +152,7 @@ export const RadarChart = component2d({
       count: () => state.data.length,
       radius,
       levels: () => style().gridLevels,
+      fill: () => style().gridBackground,
       shape: () => style().gridShape,
       stroke: () => style().gridStroke,
       spokeStroke: () => style().spokeStroke,
@@ -178,14 +182,11 @@ export const RadarChart = component2d({
       for (let i = 0; i < count; i++) {
         const anchor = labelAnchor(i, count)
         const align = anchor === "centerLeft" ? "left" : anchor === "centerRight" ? "right" : "center"
-        const at = (): Vector2 => labelPoint(i, count, radius(), style().fontSize)
+        const at = (): Vector2 => labelPoint(i, count, radius(), sizeOf(style().spokeText))
         labels.push(
           new Text({
-            ...textOps.styleProps(markerText(state.style, align)),
+            ...boundText(() => placedText(style().spokeText, align)),
             text: () => categoriesOf(state.data, state.categoryField)[i] ?? "",
-            fontSize: () => style().fontSize,
-            fontWeight: () => style().fontWeight,
-            fill: () => style().muted,
             [anchor]: at,
           }) as unknown as Node2D
         )

package/src/radar-chart/radar-grid.ts

@@ -3,7 +3,10 @@ import {
   Types,
   clamp,
   component2d,
+  fillOps,
   strokeOps,
+  type Fill,
+  type FillResolved,
   type NodeOf,
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D as _Node2D,
@@ -28,6 +31,8 @@ export const RadarGrid = component2d({
     /** The rim, in px. */
     radius: 0,
     levels: 4,
+    /** Inside the outer ring, under the rings and spokes; empty paints nothing. */
+    fill: Types.custom<Fill, FillResolved[]>([], { resolve: fillOps.resolve, lerp: fillOps.lerp }),
     shape: Types.custom<GridShape>("polygon"),
     stroke: Types.custom<Stroke, StrokeResolved[]>([], { resolve: strokeOps.resolve, lerp: strokeOps.lerp }),
     /** The line out to each category; empty draws none. */
@@ -36,7 +41,7 @@ export const RadarGrid = component2d({
     reveal: 1,
   },
   defaults: { width: "fill", height: "fill" },
-  load: (loader, state) => loadPaints(loader, { strokes: [state.stroke, state.spokeStroke] }),
+  load: (loader, state) => loadPaints(loader, { fills: [state.fill], strokes: [state.stroke, state.spokeStroke] }),
   render: (ctx, state) => {
     const grow = clamp(state.reveal, 0, 1)
     const rim = state.radius * grow
@@ -44,22 +49,22 @@ export const RadarGrid = component2d({
     const count = Math.max(0, Math.round(state.count))
     const levels = Math.max(1, Math.round(state.levels))
     const round = state.shape === "circle" || count < 3
+    const outline = (g: Graphics2D, r: number): Graphics2D => {
+      if (round) return g.ellipse({ width: r * 2, height: r * 2 })
+      const points: Vector2[] = []
+      for (let i = 0; i < count; i++) {
+        const d = spokeDirection(i, count)
+        points.push({ x: d.x * r, y: d.y * r })
+      }
+      return g.line({ points, closed: true })
+    }
+
+    if (state.fill.length > 0) ctx.draw(outline(new Graphics2D(), rim).fill(state.fill).opacity(grow))
 
     // One draw per ring: rings chained into one surface would stroke only their union's outline.
     for (let level = 1; state.stroke.length > 0 && level <= levels; level++) {
       const r = (rim * level) / levels
-      const ring = new Graphics2D()
-      if (round) {
-        ring.ellipse({ width: r * 2, height: r * 2 })
-      } else {
-        const points: Vector2[] = []
-        for (let i = 0; i < count; i++) {
-          const d = spokeDirection(i, count)
-          points.push({ x: d.x * r, y: d.y * r })
-        }
-        ring.line({ points, closed: true })
-      }
-      ctx.draw(ring.stroke(state.stroke).opacity(grow))
+      ctx.draw(outline(new Graphics2D(), r).stroke(state.stroke).opacity(grow))
     }
 
     if (state.spokeStroke.length === 0) return

package/src/radar-chart/shared.ts

@@ -1,6 +1,7 @@
-import { Types, type DataRecord, type Size2D, type StrokeResolved, type Stroke as _Stroke, type Vector2 } from "@motionscript/sdk"
+import { Types, type TextStyle, type DataRecord, type Size2D, type StrokeResolved, type Stroke as _Stroke, type Vector2 } from "@motionscript/sdk"
 
 import { num, text, type ChartSeries } from "../kit/shared"
+import { CHART_MUTED } from "../kit/style"
 
 export type GridShape = "polygon" | "circle"
 
@@ -16,6 +17,8 @@ export const RADAR_GRID = {
   spokeStroke: Types.stroke({ weight: 2, fill: "white/15" }),
   /** Read as the chart is built: whether the category names stand around the rim. */
   spokeLabels: Types.boolean(true, { animatable: false }),
+  /** The category names around the rim. */
+  spokeText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
 }
 
 export const RADAR_MARKS = {
@@ -39,7 +42,7 @@ export interface RadarStyle {
   readonly areaOpacity: number
   readonly dots: boolean
   readonly dotSize: number
-  readonly fontSize: number
+  readonly spokeText: TextStyle
 }
 
 /** Fraction of the label's font size between the rim and the label. */

package/src/radial-chart/radial-chart.ts

@@ -10,13 +10,14 @@ 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 Fill as _Fill,
   type FillResolved as _FillResolved,
 } from "@motionscript/sdk"
 
 import { SERIES_ARG, asParts, fresh } from "../kit/entries"
 import { beats, type AnyTimeline, type Beat } from "../kit/motion"
-import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS } from "../kit/style"
+import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, migrateChartStyle } from "../kit/style"
 import { PieLegend } from "../kit/pie-legend"
 import { PIE_SPOTLIGHT_DIM, selectionFade } from "../kit/polar"
 import { RadialRings } from "./radial-rings"
@@ -111,6 +112,7 @@ export const RadialChart = component2d({
     height: "fill",
     pops: (state) => state.data.map(() => 0),
   },
+  migrate: { style: migrateChartStyle("radial") },
   allowedChildren: [],
   children: (state) => {
     const style = () => state.style

package/src/radial-chart/shared.ts

@@ -1,6 +1,17 @@
 import { Types, clamp, type DataRecord, type TextStyle, type Fill as _Fill, type FillResolved as _FillResolved } from "@motionscript/sdk"
 
-import { CHART_COLORS, CHART_LEGEND, CHART_TEXT, legendConfigOf, type ChartStyleBase, paletteFill } from "../kit/style"
+import {
+  CHART_BACKGROUND,
+  CHART_FOREGROUND,
+  CHART_LEGEND,
+  CHART_MUTED,
+  CHART_SERIES,
+  legendConfigOf,
+  paletteFill,
+  placedText,
+  sizeOf,
+  type ChartStyleBase,
+} from "../kit/style"
 import type { LegendConfig } from "../kit/shared"
 import { num, text } from "../kit/shared"
 import type { CenterConfig, PieSlice } from "../kit/polar"
@@ -8,7 +19,7 @@ import type { CenterConfig, PieSlice } from "../kit/polar"
 /** One ring: a row's caption, magnitude and paint. The same shape as a pie's slice, so the legend is shared. */
 export type RadialRow = PieSlice
 
-export function resolveRadialRows(data: readonly DataRecord[], category: string, value: string, style: Pick<ChartStyleBase, "palette">): RadialRow[] {
+export function resolveRadialRows(data: readonly DataRecord[], category: string, value: string, style: Pick<ChartStyleBase, "seriesFills">): RadialRow[] {
   return data.map((row, i) => ({ category: text(row, category), value: num(row, value), fill: paletteFill(style, i) }))
 }
 
@@ -51,11 +62,13 @@ export interface RadialStyle extends ChartStyleBase {
   readonly track: _FillResolved[]
   readonly roundCaps: boolean
   readonly ringLabels: boolean
+  readonly labelText: TextStyle
+  readonly centerText: TextStyle
 }
 
 export const RADIAL_STYLE_GROUPS = {
-  colors: CHART_COLORS,
-  text: CHART_TEXT,
+  series: CHART_SERIES,
+  background: CHART_BACKGROUND,
   marks: {
     /** Where the innermost ring starts, as a fraction of the outer radius. */
     innerRadius: Types.number(0.3, { min: 0, max: 0.9, step: 0.05 }),
@@ -71,8 +84,12 @@ export const RADIAL_STYLE_GROUPS = {
     roundCaps: Types.boolean(true),
   },
   labels: {
-    /** The category written at each ring's start, in the muted colour. */
+    /** The category written at each ring's start, set in the label text. */
     ringLabels: Types.boolean(false),
+    /** The category at each ring's start, and the caption under the centre. */
+    labelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+    /** The summary in the middle. */
+    centerText: Types.typography({ fontSize: 50, fontWeight: 800, fill: CHART_FOREGROUND }),
   },
   legend: CHART_LEGEND,
 }
@@ -92,23 +109,14 @@ export function legendOf(style: RadialStyle): LegendConfig {
   return legendConfigOf(style)
 }
 
-function face(style: RadialStyle): Pick<TextStyle, "fontFamily"> {
-  return style.fontFamily ? { fontFamily: style.fontFamily } : {}
-}
-
 export function ringLabelOf(style: RadialStyle): TextStyle {
-  return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "center", fill: style.muted }
+  return placedText(style.labelText)
 }
 
 export function centerOf(style: RadialStyle): CenterConfig {
+  const size = sizeOf(style.centerText, 50)
   return {
-    labelStyle: {
-      ...face(style),
-      fontSize: Math.round(style.fontSize * 1.8),
-      fontWeight: Math.min(900, style.fontWeight + 300),
-      textAlign: "center",
-      fill: style.foreground,
-    },
-    captionStyle: { ...face(style), fontSize: Math.round(style.fontSize * 0.8), fontWeight: style.fontWeight, textAlign: "center", fill: style.muted },
+    labelStyle: placedText(style.centerText),
+    captionStyle: placedText(style.labelText, "center", { fontSize: Math.round(size * 0.45) }),
   }
 }

package/dist/browser/chunks/chunk-R3Q5EE6E.js

@@ -1,2 +0,0 @@
-import{lerpNumber as O}from"@motionscript/sdk";import{niceStep as C}from"@motionscript/sdk/component";function se(t,e){return{label:t?.label??e?.label??"",range:t?.range??e?.range,ticks:t?.ticks??e?.ticks,format:t?.format??e?.format}}function D(t,e,r){return{label:r<.5?t.label:e.label,range:Et(t.range,e.range,r),ticks:Tt(t.ticks,e.ticks,r),format:r<.5?t.format:e.format}}function Et(t,e,r){return!t||!e?r<.5?t:e:[O(t[0],e[0],r),O(t[1],e[1],r)]}function Tt(t,e,r){if(!t||!e)return r<.5?t:e;let n=Math.max(t.length,e.length),o=[];for(let i=0;i<n;i++)o.push(O(t[i]??e[i],e[i]??t[i],r));return o}function q(t){return t.blend}function ce(t,e,r){let n=e.range!==t.range,o=n&&e.range&&e.ticks&&e.ticks===t.ticks?{...e,ticks:I(e.range,Math.max(2,e.ticks.length)-1)}:e,i=q(t)!==void 0,a=i||n||o.ticks!==t.ticks,l=i||t.range===void 0||t.ticks===void 0||o.range===void 0||o.ticks===void 0;return!a||!l?D(t,o,r):r===0?t:r===1?o:{...D(t,o,r),blend:{from:t,to:o,t:r}}}function V(t,e){let r=q(t);return r?D(V(r.from,e),V(r.to,e),r.t):e(t)}var z={plotFill:"#15130e",borderColor:"#4a4036",gridColor:"#2c2820",markerColor:"#8a7f70",regionColor:"#d99a3a"},K=.2;function fe(t,e){if(e===void 0)return 0;let r=t[e];return typeof r=="number"&&Number.isFinite(r)?r:0}function de(t,e){if(e===void 0||e==="")return"";let r=t[e];return r==null?"":String(r)}function he(t,e=[]){if(t.length===0)return[];let r=new Set(e),n=new Set,o=[];for(let i of t)for(let a of Object.keys(i))!r.has(a)&&!n.has(a)&&(n.add(a),o.push(a));return o.filter(i=>{let a=!1;for(let l of t){let f=l[i];if(!(f===void 0||f==="")){if(typeof f!="number")return!1;a=!0}}return a})}var J={fontSize:24,fontWeight:700,textAlign:"center",fill:z.markerColor},Q={fontSize:30,fontWeight:600,textAlign:"center",fill:z.markerColor},Z={weight:2,fill:z.gridColor},tt={labelStyle:J,titleStyle:Q,lineStyle:Z,tickPadding:20,titlePadding:4},et={labelStyle:{...J,fontWeight:500,textAlign:"right"},titleStyle:Q,lineStyle:Z,tickPadding:40,titlePadding:24},_={padding:0,textStyle:{fontSize:30,fontWeight:600,textAlign:"left",fill:z.markerColor},itemGap:44,markerStyle:{width:60,height:24,borderRadius:6,stroke:[],shadow:[]}};function rt(t,e){if(Number.isInteger(t))return String(t);let r=Math.max(1,e===void 0?1:zt(e));return t.toFixed(r).replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}function zt(t){if(!(t>0)||!Number.isFinite(t))return 1;for(let e=0;e<=6;e++){let r=t*10**e;if(Math.abs(r-Math.round(r))<1e-6*Math.max(1,r))return e}return Math.min(6,Math.max(1,Math.ceil(-Math.log10(t))+1))}function ue(t){let e=[...t].filter(Number.isFinite).sort((n,o)=>n-o),r;for(let n=1;n<e.length;n++){let o=e[n]-e[n-1];o>1e-12&&(r===void 0||o<r)&&(r=o)}return r}function ge(t){let e=t*100;return Number.isInteger(e)?`${e}%`:`${e.toFixed(1).replace(/\.0$/,"")}%`}function I([t,e],r){let n=Math.max(2,Math.round(r));return Array.from({length:n+1},(o,i)=>t+(e-t)/n*i)}function pe([t,e],r){let n=Math.max(1,Math.round(r));if(e===t)return _t(t,n);let o=C((e-t)/n);return[Math.floor(t/o)*o,Math.ceil(e/o)*o]}function _t(t,e){if(t===0)return[0,1];let r=C(Math.abs(t)/e);return[t-r,t+r]}function me([t,e],r){let n=e-t,o=Math.max(1,Math.round(r));if(!(n>0))return I([t,e],o);let i=c=>Math.abs(c-Math.round(c))<1e-6,a=C(n/o),l;for(let c of Lt(a)){let s=n/c;!i(s)||!i(t/c)||s<2||s>8||(l===void 0||Math.abs(s-o)<Math.abs(n/l-o))&&(l=c)}if(l===void 0)return I([t,e],o);let f=Math.round(t/l);return Array.from({length:Math.round(n/l)+1},(c,s)=>Number(((f+s)*l).toPrecision(12)))}function Lt(t){let e=10**Math.floor(Math.log10(t)),r=[];for(let o of[e/10,e,e*10])for(let i of[1,2,5])r.push(i*o);let n=r.findIndex(o=>Math.abs(o-t)<t*1e-9);return r.slice(Math.max(0,n-2),n+3)}import{Types as h}from"@motionscript/sdk";var ke="chart",nt=["#4f8cff","#2fbf8f","#f5a524","#e5547a","#9b6cf0"],be={palette:h.palette(nt),foreground:h.fill("#f4f4f5"),muted:h.fill("#a1a1aa"),background:h.fill([])},Se={fontFamily:h.font(""),fontSize:h.number(28,{min:8,max:160,step:1,unit:"px"}),fontWeight:h.number(500,{min:100,max:900,step:100})},Gt={horizontalGrid:h.stroke({weight:2,fill:"white/15"}),verticalGrid:h.stroke([]),axisStroke:h.stroke([]),showXAxis:h.boolean(!0,{animatable:!1}),showYAxis:h.boolean(!0,{animatable:!1})},ye={legend:h.oneOf(["bottom","top","right","none"],{animatable:!1}),swatch:h.oneOf(["square","circle","line"])},Ae={horizontalGrid:Gt.horizontalGrid,gridStroke:h.stroke([]),spokeStroke:h.stroke([]),track:h.fill([])},ve={midnight:{palette:[...nt],foreground:"#f4f4f5",muted:"#a1a1aa",horizontalGrid:{weight:2,fill:"white/15"},gridStroke:{weight:2,fill:"white/15"},spokeStroke:{weight:2,fill:"white/15"},track:"white/10",background:[]},paper:{palette:["#2563eb","#059669","#d97706","#db2777","#7c3aed"],foreground:"#1c1917",muted:"#57534e",horizontalGrid:{weight:2,fill:"#1c1917/12"},gridStroke:{weight:2,fill:"#1c1917/12"},spokeStroke:{weight:2,fill:"#1c1917/12"},track:"#1c1917/12",background:"#fafaf9"},ember:{palette:["#d9603b","#8194ad","#e0a93b","#5e9d6b","#9ec85a"],foreground:"#e9e1d4",muted:"#8a7f70",horizontalGrid:{weight:2,fill:"#2c2820"},gridStroke:{weight:2,fill:"#2c2820"},spokeStroke:{weight:2,fill:"#2c2820"},track:"#2c2820",background:"#15130e"},neon:{palette:["#22d3ee","#a3e635","#f472b6","#facc15","#818cf8"],foreground:"#ffffff",muted:"#94a3b8",horizontalGrid:{weight:2,fill:"white/10"},gridStroke:{weight:2,fill:"white/10"},spokeStroke:{weight:2,fill:"white/10"},track:"white/10",background:[]},ocean:{palette:["#0ea5e9","#14b8a6","#6366f1","#38bdf8","#2dd4bf"],foreground:"#e0f2fe",muted:"#7dd3fc",horizontalGrid:{weight:2,fill:"#7dd3fc/20"},gridStroke:{weight:2,fill:"#7dd3fc/20"},spokeStroke:{weight:2,fill:"#7dd3fc/20"},track:"#7dd3fc/20",background:"#082f49"},sunset:{palette:["#f97316","#ef4444","#ec4899","#f59e0b","#a855f7"],foreground:"#fff7ed",muted:"#fdba74",horizontalGrid:{weight:2,fill:"#fdba74/20"},gridStroke:{weight:2,fill:"#fdba74/20"},spokeStroke:{weight:2,fill:"#fdba74/20"},track:"#fdba74/20",background:[]},pastel:{palette:["#a5b4fc","#f9a8d4","#86efac","#fde68a","#7dd3fc"],foreground:"#f8fafc",muted:"#cbd5e1",horizontalGrid:{weight:2,fill:"white/12"},gridStroke:{weight:2,fill:"white/12"},spokeStroke:{weight:2,fill:"white/12"},track:"white/12",background:[]},mono:{palette:["#fafafa","#a3a3a3","#737373","#d4d4d4","#525252"],foreground:"#fafafa",muted:"#a3a3a3",horizontalGrid:{weight:2,fill:"white/12"},gridStroke:{weight:2,fill:"white/12"},spokeStroke:{weight:2,fill:"white/12"},track:"white/12",background:[]}};function Rt(t,e,r){if(r!=null)return r;let n=t.palette;return n.length>0?n[e%n.length]:"white"}function Me(t,e,r){return Rt(t,r,e.fill)}function L(t){return t.fontFamily?{fontFamily:t.fontFamily}:{}}function Pt(t,e="center"){return{...L(t),fontSize:t.fontSize,fontWeight:t.fontWeight,textAlign:e,fill:t.muted}}function Ft(t){return{...L(t),fontSize:Math.round(t.fontSize*1.1),fontWeight:Math.min(900,t.fontWeight+100),textAlign:"center",fill:t.muted}}function Ee(t,e="center"){return{...L(t),fontSize:t.fontSize,fontWeight:Math.min(900,t.fontWeight+100),textAlign:e,fill:t.foreground}}function Te(t,e){let r=Math.round(t.fontSize*.6);return{labelStyle:Pt(t,e==="x"?"center":"right"),titleStyle:Ft(t),lineStyle:e==="x"?t.verticalGrid:t.horizontalGrid,tickPadding:e==="x"?{top:r}:{right:r},titlePadding:e==="x"?{top:Math.round(r/2)}:{right:r}}}function ze(t){let e=Math.max(8,Math.round(t.fontSize*.6)),r=t.swatch==="line"?{width:Math.round(e*2),height:Math.max(3,Math.round(e/4)),borderRadius:e}:t.swatch==="circle"?{width:e,height:e,borderRadius:e/2}:{width:e,height:e,borderRadius:Math.round(e/4)};return{padding:0,textStyle:{...L(t),fontSize:t.fontSize,fontWeight:t.fontWeight,textAlign:"left",fill:t.foreground},itemGap:Math.round(t.fontSize*1.4),markerStyle:{...r,stroke:[],shadow:[]}}}import{Rect as k,RotatedBox as Ot,Text as ot,textOps as Dt}from"@motionscript/sdk";function Ge(t){return Math.round(t.fontSize*.9)}function Re(t){return Math.ceil(t.fontSize*.7)}function Pe(t){return Math.ceil(t.fontSize*1.1)}function Fe(t){let r=[new k({flow:"horizontal",width:"fill",height:"fill",children:[...t.left?[t.left]:[],t.plot]})];t.bottom&&r.push(new k({flow:"horizontal",width:"fill",height:"hug",children:[...t.ghost?[t.ghost]:[],t.bottom]}));let n=new k({flow:"vertical",width:"fill",height:"fill",children:r}),o=t.legend&&t.legendAt!=="none"?t.legend:void 0,i=new k({flow:"horizontal",width:"fill",height:"fill",align:"center",gap:t.gap,children:[n,...o&&t.legendAt==="right"?[o]:[]]}),a=l=>new k({flow:"horizontal",width:"fill",height:"hug",align:"center",children:[l]});return new k({flow:"vertical",width:"fill",height:"fill",gap:t.gap,padding:t.padding,children:[...o&&t.legendAt==="top"?[a(o)]:[],i,...o&&t.legendAt==="bottom"?[a(o)]:[]]})}function Oe(t){let e=[],r=n=>{for(let o of n)e.push(o),r(o.children)};return r(t),e}function De(t){let e=t?.layoutBounds;return{width:e?.width??0,height:e?.height??0}}function m(t){let e=Object.keys(Dt.styleProps(t())),r={};for(let n of e)r[n]=()=>t()[n];return r}function Ie(t){let e=Array.from({length:t.count},(n,o)=>new ot({...m(t.text),text:()=>t.captions()[o]??""})),r=[];return t.title!==""&&r.push(new Ot({angle:-90,width:"hug",height:"hug",children:new ot({...m(t.titleText),text:t.title})})),r.push(new k({flow:"vertical",width:"hug",height:"hug",padding:()=>({right:t.tickPad()}),children:e})),new k({opacity:0,flow:"horizontal",gap:t.titlePad,width:"hug",height:0,children:r})}function Ce(t,e){return(Array.isArray(t)?t:[t]).map(n=>typeof n=="object"&&n!==null?{...n,opacity:(n.opacity??1)*e}:n)}import{Graphics2D as ht,Types as G,component2d as It,fillOps as st,strokeOps as ct}from"@motionscript/sdk";import{Types as it}from"@motionscript/sdk";function d(t,e){return it.custom(t,e)}function at(t){return t}var He=it.custom(0,{kind:"series",min:0,step:1});function lt(t,e){for(let r of e.fills??[])t.fill(r);for(let r of e.strokes??[])for(let n of r)t.fill(n.fill);for(let r of e.shadows??[])for(let n of r)t.fill(n.fill)}var N=()=>G.custom([],{resolve:ct.resolve,lerp:ct.lerp});function ft(t,[e,r],n){return(r<=e?0:(t-e)/(r-e)-.5)*n}function dt(t,e,r,n,o=1){t.draw(new ht().line({points:[e,r]}).stroke(n).opacity(o))}var je=It({key:"chartCanvas",state:{fill:G.custom([],{resolve:st.resolve,lerp:st.lerp}),xGridStroke:N(),yGridStroke:N(),xMarkers:d(()=>[]),yMarkers:d(()=>[]),xExtent:d(()=>[0,1]),yExtent:d(()=>[0,1]),axisStroke:N(),xAxisAt:G.custom(null),yAxisAt:G.custom(null)},load:(t,e)=>lt(t,{fills:[e.fill],strokes:[e.xGridStroke,e.yGridStroke,e.axisStroke]}),render:(t,e)=>{let{width:r,height:n}=t.size;if(r<=0||n<=0)return;e.fill.length>0&&t.draw(new ht().rect({x:0,y:0,width:r,height:n}).fill(e.fill));let o=(f,c,s)=>Math.max(-c/2+s/2,Math.min(c/2-s/2,f)),i=(f,c)=>{let s=c[0]?.weight??0;if(!(s<=0))for(let p of f){let u=o(ft(p,e.xExtent,r),r,s);dt(t,{x:u,y:-n/2},{x:u,y:n/2},c)}},a=(f,c)=>{let s=c[0]?.weight??0;if(!(s<=0))for(let p of f){let u=o(ft(p,e.yExtent,n),n,s);dt(t,{x:-r/2,y:u},{x:r/2,y:u},c)}},l=([f,c])=>s=>s>=Math.min(f,c)-1e-9&&s<=Math.max(f,c)+1e-9;i(e.xMarkers.filter(l(e.xExtent)),e.xGridStroke),a(e.yMarkers.filter(l(e.yExtent)),e.yGridStroke),e.xAxisAt!==null&&a([e.xAxisAt],e.axisStroke),e.yAxisAt!==null&&i([e.yAxisAt],e.axisStroke)}});import{Rect as mt,Text as xt,Types as R,component2d as $t}from"@motionscript/sdk";import{enterBudget as jt}from"@motionscript/sdk/component";import{Types as Ct,easeOut as Nt}from"@motionscript/sdk";var Wt=t=>t,W=20;function Ke(t){return t==="top"?{y:W}:t==="right"?{x:W}:{y:-W}}var Je=5,Qe={axes:.35,marks:.5,legend:.15};function x(t){return t.easing?Wt:Nt()}function y(t,e){let r=t.duration,n=e.reduce((i,a)=>Math.max(i,a.at+a.duration),0),o=n>r&&n>0?r/n:1;return t.together(e.map(({at:i,duration:a,piece:l})=>{let f=i*o,c=a*o;return t.sequence([t.wait(f),l,t.wait(Math.max(0,r-f-c))])}))}var H={opacity:1,shift:0};function A(){return Ct.custom({},{private:!0,resolve:(t,e)=>({...e,...t})})}function g(t,e){return t[e]??H}function S(t,e){let r={};for(let n of t)r[n]=e;return r}function b(t,e,r,n){return t.animate(o=>{let i=n(o);return{arrivals:{[e]:{opacity:r.opacity+(H.opacity-r.opacity)*i,shift:r.shift+(H.shift-r.shift)*i}}}})}import{Rect as ut,RotatedBox as Ht,Text as gt,Types as X,component2d as Xt,insetsOps as pt}from"@motionscript/sdk";import{enterBudget as Bt}from"@motionscript/sdk/component";var Ut=24;function B(t,e){let r=t.markers.indexOf(e);return(r>=0?t.captions[r]:void 0)??rt(e)}function U(t,e){return{tick:pt.resolve(t.tickPadding)[e],title:pt.resolve(t.titlePadding)[e]}}function Yt(t){let e=()=>U(t.axis(),"right"),r=Array.from({length:t.count},(o,i)=>{let a=()=>l.parent?.layoutBounds??{width:0,height:0},l=new gt({...m(()=>t.axis().labelStyle),text:()=>t.text(i),x:()=>(a().width-e().tick)/2-l.layoutBounds.width/2+g(t.arrivals(),i).shift,y:()=>t.place(i,a().height),opacity:()=>g(t.arrivals(),i).opacity*(t.opacity?.(i)??1)});return l}),n=[];return t.label!==""&&n.push(new Ht({angle:-90,width:"hug",height:"hug",children:new gt({...m(()=>t.axis().titleStyle),text:t.label,opacity:()=>g(t.arrivals(),"label").opacity,x:()=>g(t.arrivals(),"label").shift})})),n.push(new ut({height:"fill",width:"hug",padding:()=>({right:e().tick}),children:r})),new ut({flow:"horizontal",gap:()=>e().title,height:"fill",children:n})}var ar=Xt({key:"verticalAxis",state:{range:d(()=>[0,1]),markers:d(()=>[]),captions:d(()=>[]),axis:X.custom(et),label:"",arrivals:A()},defaults:{width:"fill",height:"fill"},children:t=>{let e=()=>[...t.markers].sort((n,o)=>o-n),r=n=>{if(n===void 0)return 0;let[o,i]=t.range;return i<=o?0:(n-o)/(i-o)};return[Yt({count:t.markers.length,axis:()=>t.axis,text:n=>{let o=e()[n];return o===void 0?"":B(t,o)},place:(n,o)=>(r(e()[n])-.5)*o,arrivals:()=>t.arrivals,label:t.label})]},commands:{enter:{args:{stagger:X.custom(void 0),slide:X.number(Ut)},run:(t,e)=>{let{stagger:r,slide:n}=t.args,o=e.markers.length,i=e.label!=="",a={opacity:0,shift:n},l=[...e.markers.keys(),...i?["label"]:[]],f=t.animate(()=>({arrivals:S(l,a)}));if(o===0)return f;let{step:c,per:s,caption:p}=Bt(t.duration,o,i,r),u=x(t),P=e.markers.map((Mt,M)=>({at:(o-1-M)*c,duration:s,piece:b(t,M,a,u)})),F=i?[{at:(o-1)*c+s,duration:p,piece:b(t,"label",a,u)}]:[];return t.together([f,y(t,[...P,...F])])}}}});var Vt=24,pr=$t({key:"horizontalAxis",state:{range:d(()=>[0,1]),markers:d(()=>[]),captions:d(()=>[]),axis:R.custom(tt),label:"",overhang:R.custom({left:0,right:0}),arrivals:A()},defaults:{width:"fill",height:"fill"},children:t=>{let e=()=>U(t.axis,"top"),r=()=>[...t.markers].sort((a,l)=>a-l),n=a=>{if(a===void 0)return 0;let[l,f]=t.range;return f<=l?0:(a-l)/(f-l)},o=t.markers.map((a,l)=>{let f=()=>c.parent?.layoutBounds.width??0,c=new xt({...m(()=>t.axis.labelStyle),text:()=>{let s=r()[l];return s===void 0?"":B(t,s)},x:()=>{let s=f(),p=c.layoutBounds.width/2,u=(n(r()[l])-.5)*s;return Math.max(-s/2-t.overhang.left+p,Math.min(s/2+t.overhang.right-p,u))},opacity:()=>g(t.arrivals,l).opacity,y:()=>g(t.arrivals,l).shift});return c}),i=[new mt({width:"fill",height:"hug",padding:()=>({top:e().tick}),children:o})];return t.label!==""&&i.push(new xt({...m(()=>t.axis.titleStyle),text:t.label,opacity:()=>g(t.arrivals,"label").opacity,y:()=>g(t.arrivals,"label").shift})),[new mt({flow:"vertical",gap:()=>e().title,height:"hug",width:"fill",children:i})]},commands:{enter:{args:{stagger:R.custom(void 0),slide:R.number(Vt)},run:(t,e)=>{let{stagger:r,slide:n}=t.args,o=e.markers.length,i=e.label!=="",a={opacity:0,shift:n},l=[...e.markers.keys(),...i?["label"]:[]],f=t.animate(()=>({arrivals:S(l,a)}));if(o===0)return f;let{step:c,per:s,caption:p}=jt(t.duration,o,i,r),u=x(t),P=e.markers.map((Mt,M)=>({at:M*c,duration:s,piece:b(t,M,a,u)})),F=i?[{at:(o-1)*c+s,duration:p,piece:b(t,"label",a,u)}]:[];return t.together([f,y(t,[...P,...F])])}}}});import{Flow as E,Paint as w,Rect as qt,Shapes as Y,Text as Kt,Types as v,component2d as kt}from"@motionscript/sdk";var bt={...w.state,...E.state,...Y.corners},Jt=kt({key:"legendEntry",state:{...bt,shown:v.number(1),along:v.oneOf(["horizontal","vertical"])},commands:{...w.commands},measure:(t,e,r)=>{let n=E.measure(t,e,r,w.inset(e));return e.shown>=1?n:e.along==="vertical"?{...n,height:e.shown*n.height}:{...n,width:e.shown*n.width}},layout:(t,e,r)=>E.layout(t,e,r,w.inset(e)),render:(t,e)=>w.draw(t,e,Y.rect(t.size,e))});function Qt(t,e){if(Array.isArray(t))return t;let r=[...e??[]];for(let[n,o]of Object.entries(t))r[Number(n)]=o;return r}var yr=kt({key:"chartLegend",state:{...bt,series:d(()=>[]),swatches:d(()=>[]),legend:v.custom(_),reveal:d(()=>[],{resolve:Qt})},defaults:{flow:"horizontal",width:"hug",height:"hug",gap:t=>t.flow==="vertical"?Math.round(t.legend.itemGap*.4):t.legend.itemGap,padding:t=>t.legend.padding,align:t=>t.flow==="vertical"?"centerLeft":"center",reveal:t=>t.series.map(e=>e.enabled??!0?1:0)},children:t=>{let e=()=>t.legend.markerStyle,r=t.flow==="vertical"?"vertical":"horizontal";return t.series.map((n,o)=>Jt({flow:"horizontal",gap:()=>Math.round((t.legend.textStyle.fontSize??24)*.45),align:"center",width:"hug",height:"hug",along:r,opacity:()=>t.reveal[o]??0,gapScale:()=>t.reveal[o]??0,shown:()=>t.reveal[o]??0,children:[qt({width:()=>e().width,height:()=>e().height,cornerRadius:()=>e().borderRadius,fill:()=>t.swatches[o]??"white",stroke:()=>e().stroke,shadow:()=>e().shadow}),Kt({...m(()=>t.legend.textStyle),text:n.label||n.field})]}))},commands:{...w.commands,showSeries:{args:{index:v.number(0,{min:0,step:1})},run:(t,e)=>t.args.index in e.series?t.animate(wt(e,t.args.index,1,x(t))):t.wait(t.duration)},hideSeries:{args:{index:v.number(0,{min:0,step:1})},run:(t,e)=>t.args.index in e.series?t.animate(wt(e,t.args.index,0,x(t))):t.wait(t.duration)},spotlightSeries:{args:{index:v.number(0,{min:0,step:1})},run:(t,e,r)=>t.together(r.flatMap((n,o)=>(e.reveal[o]??0)>0?[n.to({opacity:o===t.args.index?1:K})]:[]))}},measure:(t,e,r)=>E.measure(t,e,r,w.inset(e)),layout:(t,e,r)=>E.layout(t,e,r,w.inset(e)),render:(t,e)=>w.draw(t,e,Y.rect(t.size,e))});function wt(t,e,r,n){let o=t.reveal[e]??0;return i=>({reveal:{[e]:o+(r-o)*n(i)}})}import{Flow as $,Paint as T,Rect as j,Shapes as St,Text as Zt,Types as te,clamp as ee,component2d as re,textOps as ne}from"@motionscript/sdk";var yt=16,zr=re({key:"pieLegend",state:{...T.state,...$.state,...St.corners,slices:d(()=>[]),legend:te.custom(_),dims:d(()=>[]),arrivals:A()},defaults:{flow:"vertical",align:"centerLeft",width:"hug",height:"hug",gap:t=>t.legend.itemGap/3,padding:t=>t.legend.padding},children:t=>{let e=()=>t.legend.markerStyle;return t.slices.map((r,n)=>j({width:"hug",height:"hug",flow:"freeform",opacity:()=>ee(t.dims[n]??1,0,1),children:[j({flow:"horizontal",gap:()=>Math.round(t.legend.textStyle.fontSize===void 0?12:Number(t.legend.textStyle.fontSize)*.4),align:"center",width:"hug",height:"hug",opacity:()=>g(t.arrivals,n).opacity,x:()=>g(t.arrivals,n).shift,children:[j({width:()=>e().width,height:()=>e().height,cornerRadius:()=>e().borderRadius,fill:()=>t.slices[n]?.fill??"white"}),Zt({...ne.styleProps(t.legend.textStyle),fill:()=>t.legend.textStyle.fill??"white",fontSize:()=>t.legend.textStyle.fontSize??28,fontWeight:()=>t.legend.textStyle.fontWeight??500,text:()=>t.slices[n]?.category??""})]})]}))},commands:{...T.commands,arm:(t,e)=>t.animate(()=>({arrivals:S([...e.slices.keys()],{opacity:0,shift:yt})})),enter:(t,e)=>{let r=e.slices.length;if(r===0)return t.wait(t.duration);let n={opacity:0,shift:yt},o=t.animate(()=>({arrivals:S([...e.slices.keys()],n)})),i=t.duration/(1+Math.max(0,r-1)/5),a=i/5,l=x(t),f=e.slices.map((c,s)=>({at:s*a,duration:i,piece:b(t,s,n,l)}));return t.together([o,y(t,f)])}},measure:(t,e,r)=>$.measure(t,e,r,T.inset(e)),layout:(t,e,r)=>$.layout(t,e,r,T.inset(e)),render:(t,e)=>T.draw(t,e,St.rect(t.size,e))});import{clamp as oe,fillOps as At}from"@motionscript/sdk";var Gr=Math.PI/180;function Rr(t,e,r){return t<=0?1:1-(1-oe(e,0,1))*t*(1-r)}function Pr(t,e){return{x:t*Math.sin(e),y:t*Math.cos(e)}}var Fr=.15,vt=new WeakMap;function ie(t){if(typeof t!="object"||t===null)return At.resolve(t);let e=vt.get(t);return e===void 0&&vt.set(t,e=At.resolve(t)),e}function Or(t){return t.map(e=>ie(e.fill))}export*from"@motionscript/sdk/component";export{Ge as a,Re as b,Pe as c,Fe as d,Oe as e,De as f,m as g,Ie as h,Ce as i,d as j,at as k,He as l,lt as m,dt as n,je as o,W as p,Ke as q,Je as r,Qe as s,x as t,y as u,A as v,g as w,S as x,b as y,se as z,D as A,ce as B,V as C,K as D,fe as E,de as F,he as G,tt as H,et as I,_ as J,rt as K,ue as L,ge as M,I as N,pe as O,me as P,yr as Q,B as R,U as S,Yt as T,ar as U,pr as V,ke as W,nt as X,be as Y,Se as Z,Gt as _,ye as $,ve as aa,Rt as ba,Me as ca,Pt as da,Ft as ea,Ee as fa,Te as ga,ze as ha,zr as ia,Gr as ja,Rr as ka,Pr as la,Fr as ma,ie as na,Or as oa};
-//# sourceMappingURL=chunk-R3Q5EE6E.js.map