@motionscript/charts 0.0.0-stage → 0.1.0-alpha.0

package/dist/bar-chart/bar-chart.js

@@ -0,0 +1,610 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var BarChart_1;
+import { command, node, Node2D, Rect, easeOut, property, } from "@motionscript/core";
+import { ChartBorder } from "../kit/chart-border.js";
+import { ChartCanvas } from "../kit/chart-canvas.js";
+import { ChartLegend } from "../kit/chart-legend.js";
+import { VerticalAxis } from "../kit/vertical-axis.js";
+import { clampUnit, formatMarker, lerpAxisDomain, markerValues, num, resolveAxisDomain, } from "../kit/shared.js";
+import { formatNumber } from "@motionscript/core/component";
+import { drive, hold, sequence as sequenceOf, together, } from "@motionscript/core/component";
+import { CategoryAxis } from "./category-axis.js";
+import { ChartBars } from "./chart-bars.js";
+import { DEFAULT_BAR_CHART_THEME, barCategories, barSpans, lerpBarChartTheme, resolveBarChartTheme, resolveBarFill, resolveBarScale, stackCapIndex, } from "./shared.js";
+/**
+ * Layout constants for the composition, all in px — the line chart's, so the two
+ * sit at the same size in the same box and a scene can swap one for the other
+ * without re-tuning its layout.
+ */
+/** Left gutter reserved for the value axis markers. */
+const Y_AXIS_GUTTER = 64;
+/** Bottom gutter (within the chart area) reserved for the category captions. */
+const X_AXIS_GUTTER = 40;
+/** Height reserved below the chart area for the legend row. */
+const LEGEND_GUTTER = 56;
+/** Extra left/bottom room when an axis caption is shown. */
+const Y_LABEL_GUTTER = 34;
+const X_LABEL_GUTTER = 30;
+/** Headroom above the plot, so a column reaching the top marker isn't flush to it. */
+const TOP_HEADROOM = 24;
+/** Right gutter so the last slot isn't flush with the box edge. */
+const RIGHT_GUTTER = 20;
+/** How far the legend starts below its slot when it enters, in px. */
+const LEGEND_SLIDE = 20;
+const AXES_SHARE = 0.35;
+const BARS_SHARE = 0.5;
+const LEGEND_SHARE = 0.15;
+/**
+ * A grouped or stacked bar chart, composed from independent parts rather than
+ * one monolithic draw — the sibling of the {@link LineChart} family, built the
+ * same way and out of several of the same pieces:
+ *
+ * - `ChartCanvas` — the plot panel with a horizontal grid, under everything.
+ * - `VerticalAxis` — the numeric value markers, staggering in bottom-to-top.
+ * - {@link CategoryAxis} — the row of names beneath the baseline, one per row of
+ *   the data, staggering in left-to-right.
+ * - {@link ChartBars} (one per series) — that series' column in every category,
+ *   plus the figures printed on them.
+ * - `ChartLegend` — a row of entries below the chart, one per series.
+ *
+ * The parts are laid out from this node's `layoutBounds` exactly as the line
+ * chart's are: a left gutter for the value axis, a bottom gutter for the
+ * captions, the plot filling what's left, and the legend row beneath the whole
+ * thing. Every child's position and size is bound reactively, so the chart
+ * re-flows if its box changes, and the bars read the same resolved scale the
+ * axis does, so a column's end lands exactly on its marker.
+ *
+ * **Resting state is the finished chart** — the same bargain the line chart
+ * makes: the studio paints a node's Initial state on a paused canvas, so a chart
+ * that only appeared once a command had run would be edited blind. {@link enter}
+ * arms every part back to its pre-entrance state before animating.
+ *
+ * **Zero is always on the scale** (see `barValueExtent`), and the columns
+ * grow about it rather than about the plot floor, so a negative value draws
+ * downward out of the same `growth` signal that draws a positive one up.
+ *
+ * Past the entrance, two things move the chart:
+ * {@link showSeries}/{@link hideSeries}/{@link spotlightSeries} pick out a
+ * *series* — and hiding one **reflows the group**, the remaining columns
+ * widening into the space as it goes, rather than leaving a hole where it was —
+ * while {@link spotlightCategory}/{@link clearCategory} pick out a *column of
+ * the table*, dimming every other category and its caption with it.
+ */
+let BarChart = class BarChart extends Node2D {
+    static { BarChart_1 = this; }
+    // ---- Part handles (built in the constructor) --------------------------
+    vAxis;
+    cAxis;
+    legend = null;
+    barSets = [];
+    /**
+     * `this.theme` read back through its *resolved* shape — the same
+     * loose-declared/resolved-stored idiom as a shape's `fill`/`stroke`, and as
+     * the line chart's own theme.
+     */
+    get resolvedTheme() {
+        return this.theme;
+    }
+    // ---- Derived scale ----------------------------------------------------
+    /** Fallback marker count when the value axis states no ticks. */
+    static DEFAULT_MARKERS = 5;
+    get valueScale() {
+        const divisions = (this.valueAxis.ticks?.length ?? BarChart_1.DEFAULT_MARKERS) - 1;
+        return resolveBarScale(this.data, this.series, this.stacked, this.valueAxis.range, divisions);
+    }
+    /**
+     * A value written down as this chart's value axis says — the axis ticks and
+     * the figures printed on the columns both read through here, so the two
+     * cannot disagree about what a number looks like.
+     */
+    valueLabel(value) {
+        const pattern = this.valueAxis.format;
+        return pattern === undefined
+            ? formatMarker(value)
+            : formatNumber(value, pattern);
+    }
+    /** The value axis ticks: the explicit ones, else five across the scale. */
+    get resolvedMarkers() {
+        return (this.valueAxis.ticks ??
+            markerValues(this.valueScale, BarChart_1.DEFAULT_MARKERS - 1));
+    }
+    // ---- Plot geometry, all derived from layoutBounds -----------------------
+    get hasValueLabel() {
+        return this.valueAxis.label !== "";
+    }
+    get hasCategoryLabel() {
+        return this.categoryAxis.label !== "";
+    }
+    get leftInset() {
+        return Y_AXIS_GUTTER + (this.hasValueLabel ? Y_LABEL_GUTTER : 0);
+    }
+    get bottomInset() {
+        return X_AXIS_GUTTER + (this.hasCategoryLabel ? X_LABEL_GUTTER : 0);
+    }
+    /** The plot rectangle in node space: `{ left, right, top, bottom }` (y-up). */
+    plotBox() {
+        const W = this.layoutBounds.width;
+        const H = this.layoutBounds.height;
+        const areaTop = H / 2;
+        const areaBottom = -H / 2 + (this.legend ? LEGEND_GUTTER : 0);
+        const left = -W / 2 + this.leftInset;
+        const right = W / 2 - RIGHT_GUTTER;
+        const top = areaTop - TOP_HEADROOM;
+        const bottom = areaBottom + this.bottomInset;
+        return { left, right, top, bottom };
+    }
+    /** Width and height of the plot, in px. */
+    plotSize() {
+        const { left, right, top, bottom } = this.plotBox();
+        return { w: right - left, h: top - bottom };
+    }
+    /** Map a value onto the plot's **centred** pixel space (origin at its centre, y-up). */
+    valueToY(value) {
+        const [min, max] = this.valueScale;
+        const { h } = this.plotSize();
+        if (max <= min)
+            return -h / 2;
+        return ((value - min) / (max - min) - 0.5) * h;
+    }
+    /**
+     * Pixel y of the line every column grows from.
+     *
+     * Zero, clamped onto the scale — so an author who *did* crop the axis to
+     * `[40, 100]` gets columns rising from the plot floor rather than from a
+     * baseline off the bottom of the panel.
+     */
+    get baselinePx() {
+        const [min, max] = this.valueScale;
+        return this.valueToY(Math.min(Math.max(0, min), max));
+    }
+    // ---- Slot geometry ----------------------------------------------------
+    /** Width of one category's slot across the plot. */
+    get slotWidth() {
+        const n = this.data.length;
+        return n > 0 ? this.plotSize().w / n : 0;
+    }
+    /** Centre x of category `i`'s slot, in the plot's centred space. */
+    slotCenter(index) {
+        return -this.plotSize().w / 2 + this.slotWidth * (index + 0.5);
+    }
+    /** The part of a slot the columns fill — the rest is the channel between categories. */
+    get slotInner() {
+        return this.slotWidth * clampUnit(this.resolvedTheme.bar.slotFill);
+    }
+    /** Series `i`'s live share of the slot; 0 once it has been hidden. */
+    weightAt(index) {
+        return Math.max(0, this.weights[index] ?? 1);
+    }
+    /** Total live share across the series — the slot's inner width divides by this. */
+    get totalWeight() {
+        let sum = 0;
+        for (let i = 0; i < this.series.length; i++)
+            sum += this.weightAt(i);
+        return sum > 0 ? sum : 1;
+    }
+    /** Live share of every series *before* `index`, for the grouped offset. */
+    weightBefore(index) {
+        let sum = 0;
+        for (let i = 0; i < index; i++)
+            sum += this.weightAt(i);
+        return sum;
+    }
+    /**
+     * Series `index`'s columns, mapped into the plot's centred pixel space.
+     *
+     * Both modes come out of one walk over the rows: a grouped series divides the
+     * slot with its siblings and every column runs from zero, a stacked one takes
+     * the whole slot and each column runs from the running total below it. The
+     * live {@link weights} scale the grouped widths and the stacked contributions
+     * alike, which is what lets `hideSeries` reflow rather than punch a hole.
+     */
+    seriesBars(index) {
+        const series = this.series[index];
+        if (!series)
+            return [];
+        const stacked = this.stacked;
+        const inner = this.slotInner;
+        const gap = this.resolvedTheme.bar.groupGap;
+        const unit = inner / this.totalWeight;
+        const weight = this.weightAt(index);
+        return this.data.map((row, rowIndex) => {
+            // The stack is built from the *live* contributions, so a series fading out
+            // lowers the segments above it as it goes instead of dropping them by a
+            // step when it finally switches off. A grouped row needs no such scaling —
+            // there its weight moves the column's width, not its length.
+            const spans = barSpans(stacked ? this.weightedRow(row) : row, this.series, stacked);
+            const span = spans[index] ?? { from: 0, to: 0, value: 0 };
+            const cap = stacked ? stackCapIndex(row, this.series) : index;
+            const slotLeft = this.slotCenter(rowIndex) - inner / 2;
+            const x = stacked
+                ? this.slotCenter(rowIndex)
+                : slotLeft + unit * this.weightBefore(index) + (unit * weight) / 2;
+            const width = stacked
+                ? inner
+                : Math.max(0, unit * weight - (this.series.length > 1 ? gap : 0));
+            return {
+                x,
+                width,
+                from: this.valueToY(span.from),
+                to: this.valueToY(span.to),
+                round: cap === index,
+                // The figure printed is the row's own value, not the weighted one — a
+                // series on its way out should not be seen counting down.
+                value: num(row, series.field),
+            };
+        });
+    }
+    /**
+     * `row` with each series' value scaled by that series' live {@link weights}
+     * entry — what the stacked spans are measured from.
+     */
+    weightedRow(row) {
+        const scaled = { ...row };
+        this.series.forEach((s, i) => {
+            const value = row[s.field];
+            if (typeof value === "number")
+                scaled[s.field] = value * this.weightAt(i);
+        });
+        return scaled;
+    }
+    /**
+     * How far each category is dimmed by the spotlight, one entry per row —
+     * 1 while nothing is spotlit, falling to the theme's `dimOpacity` for every
+     * category but the chosen one as the reveal climbs.
+     */
+    categoryDims() {
+        const focus = clampUnit(this.spotlightReveal);
+        const dim = this.resolvedTheme.spotlight.dimOpacity;
+        const chosen = this.spotlight;
+        return this.data.map((_, i) => focus <= 0 || chosen === i ? 1 : 1 - (1 - dim) * focus);
+    }
+    // ---- Build ------------------------------------------------------------
+    constructor(props) {
+        super(props);
+        // The whole chart is composed from plain props/`data` — no context needed,
+        // so the parts are built here (super() applied the props above). Everything
+        // a *leaf* reads live in `renderSelf` — each series' geometry, paint and
+        // dim, the panel's fill, the border's stroke — is passed as a closure rather
+        // than a snapshot, so `chart.to({ theme })` and
+        // `chart.to({ valueAxis: { range } })` genuinely animate the drawn chart.
+        const enabled = this.series.map((s) => s.enabled ?? true);
+        this.weights = enabled.map((on) => (on ? 1 : 0));
+        const showLegend = props?.showLegend !== false;
+        const showValues = props?.showValues === true;
+        this.vAxis = new VerticalAxis({
+            range: () => this.valueScale,
+            markers: () => this.resolvedMarkers,
+            axis: () => this.resolvedTheme.yAxis,
+            label: this.valueAxis.label ?? "",
+            width: "hug",
+            height: "fill",
+        });
+        this.vAxis.labelFor = (value) => this.valueLabel(value);
+        this.cAxis = new CategoryAxis({
+            categories: barCategories(this.data, this.categoryField),
+            axis: () => this.resolvedTheme.xAxis,
+            label: this.categoryAxis.label ?? "",
+            dims: () => this.categoryDims(),
+            width: "fill",
+            height: "hug",
+        });
+        this.barSets = this.series.map((s, i) => new ChartBars({
+            bars: () => this.seriesBars(i),
+            baseline: () => this.baselinePx,
+            fill: () => resolveBarFill(this.resolvedTheme.seriesFills, s, i),
+            barStroke: () => this.resolvedTheme.bar.stroke,
+            barShadow: () => this.resolvedTheme.bar.shadow,
+            cornerRadius: () => this.resolvedTheme.bar.cornerRadius,
+            growth: () => this.growth,
+            dims: () => this.categoryDims(),
+            showValues,
+            valueStyle: this.resolvedTheme.valueStyle,
+            enabled: enabled[i],
+        }));
+        // The figures on the columns are the same numbers the value axis ticks, so
+        // they read through the same format.
+        for (const set of this.barSets)
+            set.labelFor = (value) => this.valueLabel(value);
+        if (showLegend) {
+            this.legend = new ChartLegend({
+                series: this.series,
+                swatches: () => this.series.map((s, i) => resolveBarFill(this.resolvedTheme.seriesFills, s, i)),
+                legend: () => this.resolvedTheme.legend,
+            });
+        }
+        const plot = new Rect({
+            clip: true,
+            children: [
+                new ChartCanvas({
+                    fill: () => this.resolvedTheme.plotArea.fill,
+                    shadow: () => this.resolvedTheme.plotArea.shadow,
+                    xGridStroke: () => this.resolvedTheme.xAxis.lineStyle,
+                    yGridStroke: () => this.resolvedTheme.yAxis.lineStyle,
+                    // No vertical rules: the horizontal axis is categorical, so there is
+                    // no numeric position along it for a grid line to mark. The channel
+                    // between slots does that job, and better.
+                    xMarkers: [],
+                    yMarkers: () => this.resolvedMarkers,
+                    xExtent: () => [0, 1],
+                    yExtent: () => this.valueScale,
+                }),
+                ...this.barSets,
+                new ChartBorder({
+                    stroke: () => this.resolvedTheme.plotArea.stroke,
+                }),
+            ],
+        });
+        // Invisible twin of the value axis, reserving the same left gutter under the
+        // plot so the category row starts at the plot's left edge rather than the
+        // chart's — and so a caption lands under the columns it names.
+        const gutterSpacer = new VerticalAxis({
+            opacity: 0,
+            range: () => this.valueScale,
+            markers: () => this.resolvedMarkers,
+            axis: () => this.resolvedTheme.yAxis,
+            label: this.valueAxis.label ?? "",
+            width: "hug",
+            height: 0,
+        });
+        const below = [this.cAxis];
+        if (this.legend)
+            below.push(this.legend);
+        this.add(new Rect({ flow: "vertical",
+            width: "fill",
+            height: "fill",
+            children: [
+                new Rect({ flow: "horizontal",
+                    height: "fill",
+                    width: "fill",
+                    children: [this.vAxis, plot],
+                }),
+                new Rect({ flow: "horizontal",
+                    width: "fill",
+                    children: [
+                        gutterSpacer,
+                        new Rect({ flow: "vertical", width: "fill", gap: 20, children: below }),
+                    ],
+                }),
+            ],
+        }));
+    }
+    // ---- Orchestrated entrance --------------------------------------------
+    /**
+     * Prime every part at its pre-entrance state — axis markers and captions
+     * shifted and transparent, columns collapsed onto the baseline, legend dropped
+     * and transparent.
+     *
+     * Called by {@link enter} before its first frame so nothing flashes ahead of
+     * its beat. Idempotent, and public so a scene can hide a chart ahead of time
+     * without starting the entrance.
+     */
+    arm() {
+        this.vAxis.arm();
+        this.cAxis.arm();
+        this.growth = 0;
+        this.legend?.set({ opacity: 0, y: -LEGEND_SLIDE });
+    }
+    /**
+     * Animate the whole chart in: the two axes stagger their markers and captions
+     * in, the columns rise from the baseline, and the legend fades up last.
+     *
+     * `duration` is the **whole** entrance. The phases are shares of it, not
+     * multiples — a command that declares 1.4 seconds has to take 1.4 seconds,
+     * because that is the slot the timeline lays out for it, the length its
+     * parallel siblings are timed against, and its contribution to the scene's own
+     * duration.
+     */
+    enter(args) {
+        const { duration } = args;
+        const easing = args.easing ?? easeOut();
+        this.arm();
+        return sequenceOf(together(this.vAxis.enter({ data: { slide: 24 }, duration: duration * AXES_SHARE, easing }), this.cAxis.enter({ data: { slide: 24 }, duration: duration * AXES_SHARE, easing })), this.riseBars(duration * BARS_SHARE, easing), ...(this.legend
+            ? [this.legend.to({ data: { opacity: 1, y: 0 }, duration: duration * LEGEND_SHARE, easing })]
+            : []));
+    }
+    /** Tween {@link growth} `0 → 1`, raising every column about the baseline. */
+    riseBars(duration, easing) {
+        // No priming to 0 first: the value at `t` is a function of `t`, so a repeat
+        // call re-raises by definition rather than by having reset something.
+        return this.command((t) => ({ growth: t }), duration, easing);
+    }
+    /**
+     * Show series `index`: bring its columns back, the group reflowing to make
+     * room as they arrive, in lockstep with its legend entry growing in.
+     */
+    showSeries(args) {
+        const { seriesIndex = 0 } = args.data ?? {};
+        return this.toggleSeries(seriesIndex, 1, args.duration ?? 0.35, args.easing ?? easeOut());
+    }
+    /**
+     * Hide series `index`: its columns narrow away (or, stacked, sink out of the
+     * stack) while the rest of the group widens into the space, its legend entry
+     * shrinking beside them — the mirror of {@link showSeries}.
+     */
+    hideSeries(args) {
+        const { seriesIndex = 0 } = args.data ?? {};
+        return this.toggleSeries(seriesIndex, 0, args.duration ?? 0.35, args.easing ?? easeOut());
+    }
+    /**
+     * Move series `index`'s slot share to `target`, with its legend entry.
+     *
+     * One method for both directions, so the pair cannot drift apart. `enabled`
+     * rides in the same value as the weight rather than being set before or after,
+     * which is what makes arriving at a time backwards show what arriving forwards
+     * does.
+     */
+    toggleSeries(index, target, duration, easing) {
+        const bars = this.barSets[index];
+        if (!bars)
+            return hold(duration);
+        return together(this.tweenWeight(index, target, duration, easing), drive(duration, (t) => {
+            const share = t >= 1 ? target : Math.max(target, 1 - t);
+            bars.set({ enabled: target > 0 || share > 0 });
+        }), ...(this.legend
+            ? [
+                target > 0
+                    ? this.legend.showSeries({ data: { index }, duration, easing })
+                    : this.legend.hideSeries({ data: { index }, duration, easing }),
+            ]
+            : []));
+    }
+    /**
+     * Fade out every other series — its columns **and its legend entry** — to
+     * focus attention on `index`, which comes back to full. Nothing moves, so the
+     * group doesn't reflow.
+     */
+    spotlightSeries(args) {
+        const { seriesIndex = 0 } = args.data ?? {};
+        const duration = args.duration ?? 0.35;
+        const easing = args.easing ?? easeOut();
+        const dim = this.resolvedTheme.spotlight.dimOpacity;
+        return together(...this.barSets.map((bars, i) => bars.to({ data: { opacity: i === seriesIndex ? 1 : dim }, duration, easing })), ...(this.legend
+            ? [this.legend.spotlightSeries({ data: { index: seriesIndex }, duration, easing })]
+            : []));
+    }
+    /** Ease series `index`'s slot share toward `target`, reflowing the group. */
+    tweenWeight(index, target, duration, easing) {
+        // Read through `weightAt` rather than off the array, so a chart whose stored
+        // weights are short (or absent) still tweens from the 1 it is drawing at.
+        const from = this.series.map((_, i) => this.weightAt(i));
+        const start = from[index] ?? 1;
+        if (start === target)
+            return hold(duration);
+        return drive(duration, (t) => {
+            const next = [...from];
+            next[index] = start + (target - start) * easing(t);
+            this.weights = next;
+        });
+    }
+    // ---- Per-category ------------------------------------------------------
+    /**
+     * Spotlight one **category** — one column of the table rather than one series:
+     * every other category's bars and its caption fade to the theme's
+     * `dimOpacity`, and the chosen one stays full.
+     *
+     * The counterpart of the line chart's `spotlightRegion`, and the same shape of
+     * thing: it picks out a slice of the plot without changing what is drawn.
+     * Calling it while another category is already lit moves the focus directly —
+     * only the dimming changes, so there is nothing to retract first.
+     */
+    spotlightCategory(args) {
+        const { categoryIndex = 0 } = args.data ?? {};
+        const duration = args.duration ?? 0.4;
+        const easing = args.easing ?? easeOut();
+        if (categoryIndex < 0 || categoryIndex >= this.data.length)
+            return this.holdSpotlight(duration);
+        const from = this.spotlightReveal;
+        // Which category is lit is part of the value, set from the first frame: the
+        // focus moves directly, so unlike the line chart's region there is nothing to
+        // retract before it.
+        return this.command((t) => ({ spotlight: categoryIndex, spotlightReveal: from + (1 - from) * t }), duration, easing);
+    }
+    /**
+     * Drop the category spotlight, bringing every category back to full. A no-op
+     * when nothing is lit — but it still takes its slot on the timeline, for the
+     * reason `LineChart.clearRegion` does.
+     */
+    clearCategory(args) {
+        const duration = args.duration ?? 0.4;
+        const easing = args.easing ?? easeOut();
+        const from = this.spotlightReveal;
+        if (from === 0)
+            return this.holdSpotlight(duration);
+        // The lit category is held until the fade lands — cleared at `t === 1` rather
+        // than up front, or there would be nothing left to fade.
+        return this.command((t) => t >= 1
+            ? { spotlight: null, spotlightReveal: 0 }
+            : { spotlightReveal: from * (1 - t) }, duration, easing);
+    }
+    /** The no-op both of the above return — see {@link hold}. */
+    holdSpotlight(duration) {
+        return this.command(() => ({}), duration);
+    }
+};
+__decorate([
+    property({ default: () => [] })
+], BarChart.prototype, "data", void 0);
+__decorate([
+    property({ default: "" })
+], BarChart.prototype, "categoryField", void 0);
+__decorate([
+    property({ default: () => [] })
+], BarChart.prototype, "series", void 0);
+__decorate([
+    property({ default: false })
+], BarChart.prototype, "stacked", void 0);
+__decorate([
+    property({
+        default: {},
+        mapper: resolveAxisDomain,
+        tween: lerpAxisDomain,
+    })
+], BarChart.prototype, "valueAxis", void 0);
+__decorate([
+    property({
+        default: {},
+        mapper: resolveAxisDomain,
+        tween: lerpAxisDomain,
+    })
+], BarChart.prototype, "categoryAxis", void 0);
+__decorate([
+    property({
+        default: DEFAULT_BAR_CHART_THEME,
+        mapper: resolveBarChartTheme,
+        tween: lerpBarChartTheme,
+    })
+], BarChart.prototype, "theme", void 0);
+__decorate([
+    property({ default: 1 })
+], BarChart.prototype, "growth", void 0);
+__decorate([
+    property({ default: () => [] })
+], BarChart.prototype, "weights", void 0);
+__decorate([
+    property({ default: null })
+], BarChart.prototype, "spotlight", void 0);
+__decorate([
+    property({ default: 0 })
+], BarChart.prototype, "spotlightReveal", void 0);
+__decorate([
+    command()
+], BarChart.prototype, "enter", null);
+__decorate([
+    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
+], BarChart.prototype, "showSeries", null);
+__decorate([
+    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
+], BarChart.prototype, "hideSeries", null);
+__decorate([
+    command({ args: [{ key: "seriesIndex", kind: "series", default: 0, min: 0, step: 1 }] })
+], BarChart.prototype, "spotlightSeries", null);
+__decorate([
+    command({ args: [{ key: "categoryIndex", kind: "number", default: 0, min: 0, step: 1 }] })
+], BarChart.prototype, "spotlightCategory", null);
+__decorate([
+    command()
+], BarChart.prototype, "clearCategory", null);
+BarChart = BarChart_1 = __decorate([
+    node({
+        key: "barChart",
+        parentKey: "node",
+        forkable: true,
+        layout: {
+            children: "freeform",
+            defaultWidthMode: "fixed",
+            defaultHeightMode: "fixed",
+            acceptsChildren: true,
+        },
+        seed: {
+            width: 760,
+            height: 460,
+        },
+    })
+], BarChart);
+export { BarChart };
+//# sourceMappingURL=bar-chart.js.map