enarratio-astro 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -7,6 +7,18 @@ every such change is listed here.
 
 ## [Unreleased]
 
+## [0.4.2] - 2026-11-03
+
+### Changed
+
+- Draws with Enarratio 0.7.3: charts no longer move the page when the enhancement layer loads. The redraw keeps the
+  height the server drawing showed, a legend entry has its button's box before it is a button, and an interactive
+  chart's figure holds the controls the layer adds (Show table, Play as sound, the downloads), inert until it
+  arrives.
+- A chart that is not interactive leaves those controls out (Enarratio's `controls: false`), since no layer ever
+  makes them work. `renderChart` takes a second argument, `{ interactive }`, for this; it defaults to true, as
+  Enarratio does.
+
 ## [0.4.1] - 2026-11-03
 
 ### Changed

package/dist/chart.d.ts

@@ -63,10 +63,19 @@ export type ChartResult = {
     readonly ok: false;
     readonly error: string;
 };
+/** How a chart is drawn, beside what it shows. */
+export interface RenderOptions {
+    /**
+     * Whether the page enhances the chart (`<Chart interactive>`). An enhanced chart's figure holds
+     * the controls the enhancement layer adds, inert until it arrives, so the page does not move;
+     * a chart that is never enhanced leaves them out. Defaults to true, as Enarratio does.
+     */
+    readonly interactive?: boolean | undefined;
+}
 /**
  * Draws a chart. Bar, line and area charts come from `enarratio/lite`, which builds the SVG as a
  * string with no DOM, the cheapest render on a Worker; scatter plots and heatmaps load
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export declare function renderChart(spec: ChartSpec): Promise<ChartResult>;
+export declare function renderChart(spec: ChartSpec, options?: RenderOptions): Promise<ChartResult>;

package/dist/chart.js

@@ -22,8 +22,8 @@ function numeric(table, name) {
     if (bad)
         throw new Error(`The column "${name}" should hold numbers, but has "${bad[name]}".`);
 }
-/** The options every chart type shares: text, the data table and the id. */
-function figure(spec) {
+/** The options every chart type shares: text, the data table, the id and the pending controls. */
+function figure(spec, options) {
     const alt = text(spec.alt);
     if (!alt)
         throw new Error("Add a description (alt): one sentence on what the chart shows.");
@@ -43,14 +43,15 @@ function figure(spec) {
         ...(source ? { source: sourceHref ? { name: source, href: sourceHref } : source } : {}),
         ...(id ? { id } : {}),
         dataTable: spec.dataTable === "visually-hidden" ? "visually-hidden" : "details",
+        ...(options.interactive === false ? { controls: false } : {}),
     };
 }
-async function draw(spec) {
+async function draw(spec, options) {
     const type = (text(spec.type) ?? "bar").toLowerCase();
     if (!CHART_TYPES.includes(type)) {
         throw new Error(`There is no chart type "${spec.type}". Use one of: ${CHART_TYPES.join(", ")}.`);
     }
-    const common = figure(spec);
+    const common = figure(spec, options);
     const table = typeof spec.data === "string" ? parseTable(spec.data) : tableFromRows(spec.data);
     const x = column(table, spec.x, "x axis");
     const seriesName = text(spec.series) ? column(table, spec.series, "series") : undefined;
@@ -109,9 +110,9 @@ async function draw(spec) {
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export async function renderChart(spec) {
+export async function renderChart(spec, options = {}) {
     try {
-        return { ok: true, html: await draw(spec) };
+        return { ok: true, html: await draw(spec, options) };
     }
     catch (error) {
         return { ok: false, error: error instanceof Error ? error.message : String(error) };

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @packageDocumentation
  */
-export { CHART_TYPES, type ChartResult, type ChartSpec, type ChartType, renderChart, } from "./chart.js";
+export { CHART_TYPES, type ChartResult, type ChartSpec, type ChartType, type RenderOptions, renderChart, } from "./chart.js";
 export { type Cell, parseTable, type Table, tableFromRows } from "./data.js";
 export { chartMarkup } from "./figure.js";
 export { chartStyles, type StyleOptions, type Styles } from "./styles.js";

package/dist/markdown.js

@@ -69,7 +69,7 @@ async function chartHtml(source, first, options) {
     let markup;
     try {
         const { interactive, ...spec } = parseChartBlock(source);
-        const result = await renderChart(spec);
+        const result = await renderChart(spec, { interactive });
         if (!result.ok)
             console.warn(`[enarratio-astro] Markdown chart not drawn: ${result.error}`);
         markup = chartMarkup(result, interactive);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enarratio-astro",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Accessible charts for Astro: a Chart component and charts in Markdown, drawn on the server by Enarratio",
   "keywords": [
     "astro",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@observablehq/plot": "0.6.17",
-    "enarratio": "0.7.2",
+    "enarratio": "0.7.3",
     "linkedom": "0.18.14"
   },
   "publishConfig": {

package/src/Chart.astro

@@ -21,7 +21,7 @@ interface Props extends ChartSpec, StyleOptions {
 }
 
 const { interactive = false, styles, theme, stylesheetOptions, ...spec } = Astro.props;
-const result = await renderChart(spec);
+const result = await renderChart(spec, { interactive });
 const css = firstOnPage(Astro.request) ? chartStyles({ styles, theme, stylesheetOptions }) : "";
 if (!result.ok) console.warn(`[enarratio-astro] chart ${spec.id ?? ""} not drawn: ${result.error}`);
 ---

package/src/chart.ts

@@ -88,8 +88,18 @@ function numeric(table: Table, name: string): void {
   if (bad) throw new Error(`The column "${name}" should hold numbers, but has "${bad[name]}".`);
 }
 
-/** The options every chart type shares: text, the data table and the id. */
-function figure(spec: ChartSpec) {
+/** How a chart is drawn, beside what it shows. */
+export interface RenderOptions {
+  /**
+   * Whether the page enhances the chart (`<Chart interactive>`). An enhanced chart's figure holds
+   * the controls the enhancement layer adds, inert until it arrives, so the page does not move;
+   * a chart that is never enhanced leaves them out. Defaults to true, as Enarratio does.
+   */
+  readonly interactive?: boolean | undefined;
+}
+
+/** The options every chart type shares: text, the data table, the id and the pending controls. */
+function figure(spec: ChartSpec, options: RenderOptions) {
   const alt = text(spec.alt);
   if (!alt) throw new Error("Add a description (alt): one sentence on what the chart shows.");
   const title = text(spec.title);
@@ -111,17 +121,18 @@ function figure(spec: ChartSpec) {
     ...(id ? { id } : {}),
     dataTable:
       spec.dataTable === "visually-hidden" ? ("visually-hidden" as const) : ("details" as const),
+    ...(options.interactive === false ? { controls: false } : {}),
   };
 }
 
-async function draw(spec: ChartSpec): Promise<string> {
+async function draw(spec: ChartSpec, options: RenderOptions): Promise<string> {
   const type = (text(spec.type) ?? "bar").toLowerCase();
   if (!CHART_TYPES.includes(type as ChartType)) {
     throw new Error(
       `There is no chart type "${spec.type}". Use one of: ${CHART_TYPES.join(", ")}.`,
     );
   }
-  const common = figure(spec);
+  const common = figure(spec, options);
   const table = typeof spec.data === "string" ? parseTable(spec.data) : tableFromRows(spec.data);
   const x = column(table, spec.x, "x axis");
   const seriesName = text(spec.series) ? column(table, spec.series, "series") : undefined;
@@ -186,9 +197,12 @@ async function draw(spec: ChartSpec): Promise<string> {
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export async function renderChart(spec: ChartSpec): Promise<ChartResult> {
+export async function renderChart(
+  spec: ChartSpec,
+  options: RenderOptions = {},
+): Promise<ChartResult> {
   try {
-    return { ok: true, html: await draw(spec) };
+    return { ok: true, html: await draw(spec, options) };
   } catch (error) {
     return { ok: false, error: error instanceof Error ? error.message : String(error) };
   }

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   type ChartResult,
   type ChartSpec,
   type ChartType,
+  type RenderOptions,
   renderChart,
 } from "./chart.js";
 export { type Cell, parseTable, type Table, tableFromRows } from "./data.js";

package/src/markdown.ts

@@ -78,7 +78,7 @@ async function chartHtml(
   let markup: string;
   try {
     const { interactive, ...spec } = parseChartBlock(source);
-    const result = await renderChart(spec);
+    const result = await renderChart(spec, { interactive });
     if (!result.ok) console.warn(`[enarratio-astro] Markdown chart not drawn: ${result.error}`);
     markup = chartMarkup(result, interactive);
   } catch (error) {