@cratis/scene.primereact 4.4.0 → 4.6.0

package/README.md

@@ -113,11 +113,33 @@ not through the `--p-*` properties, which only PrimeReact's own components read.
 
 | Component | Why |
 | --- | --- |
-| `chart` | PrimeReact's `Chart` is a thin wrapper over Chart.js and does nothing without `chart.js` installed and a full Chart.js configuration object. Adding a charting library as a dependency of a component-mapping package is out of scope; charting deserves its own Scene package with its own vocabulary. |
 | `editor` | `Editor` wraps Quill and needs `quill` installed. Same reasoning — a rich-text editor is a product decision, not a mapping. |
 
-Both are genuinely useful and both are deliberate omissions, not oversights. A profile needing them
-should activate a package that owns that dependency.
+The editor is a deliberate omission, not an oversight. A profile needing it should activate a package
+that owns its dependency.
+
+## Chart.js peer dependency
+
+PrimeReact 11 removed its former Chart.js wrapper, so the Scene `chart` adapter mounts a Chart.js canvas
+itself. `chart.js@^4.5.1` is an optional peer dependency of `@cratis/scene.primereact`, optional only in that
+a host that never renders a chart can omit it. **A host that renders charts must install `chart.js`**,
+including when a bundler resolves imports statically: without it the build can fail to resolve
+`chart.js/auto`, or the chart reports that it could not be drawn.
+
+The adapter only imports Chart.js after its canvas mounts, which keeps SSR safe. It rebuilds the chart when
+the type, data or options change in content, not when a document edit hands it equal data in a new object.
+
+`chart` accepts canonical string types (`bar`, `line`, `pie`, `doughnut`, `polarArea`, `radar`, `bubble`,
+`scatter`), the numeric values `0` to `7` of the old .NET enum, and that enum's Pascal case names, without
+rewriting the stored element. Any other type is reported instead of drawn as a bar chart. A chart without data
+points shows its `emptyLabel`.
+
+## Browser specifications
+
+Most specifications run under jsdom with `yarn test`. Painted pixels, keyboard behavior and computed theme
+styles need a real browser, so `yarn test:browser` bundles the controls and drives headless Chromium through
+`playwright-core`. Install the browser once with `yarn playwright-core install chromium`. These specifications
+are not part of `yarn test` and fail, rather than skip, when Chromium is missing.
 
 Also worth knowing: `column` renders nothing on its own, and since PrimeReact 11 that is *our* semantics
 rather than PrimeReact's. v11 removed `primereact/column`, so `data/Column.tsx` is a Cratis-owned

package/chart/ChartGallery.stories.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { SceneElementView } from '@cratis/scene.react';
+import { primeReactComponents } from '../primeReactComponents';
+import { sceneComponent } from '../storyElements';
+
+const meta = {
+    title: 'PrimeReact/Chart',
+    component: SceneElementView,
+    tags: ['autodocs'],
+} satisfies Meta<typeof SceneElementView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** A Chart.js chart rendered through the Scene element and package registry. */
+const salesData = {
+    labels: ['January', 'February', 'March'],
+    datasets: [{ label: 'Sales', data: [12, 19, 8], backgroundColor: '#6366f1' }],
+};
+
+export const Bar: Story = {
+    args: {
+        element: sceneComponent('sales', 'chart', {
+            type: 'bar', data: salesData, options: { maintainAspectRatio: false }, style: { height: 240 }, ariaLabel: 'Monthly sales',
+        }),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};
+
+/** A migrated chart that has no data yet. It says so instead of drawing a blank canvas or inventing values. */
+export const MigratedWithoutData: Story = {
+    args: {
+        element: sceneComponent('legacy-empty', 'chart', { type: 0, style: { height: 72 }, ariaLabel: 'Migrated chart without data', legacyType: 'PrimeReact.Chart' }),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};
+
+/** A chart type the renderer does not know is reported rather than drawn as a bar chart. */
+export const UnsupportedType: Story = {
+    args: {
+        element: sceneComponent('unsupported', 'chart', { type: 8, data: salesData }),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};
+
+/** A migrated element that retains the original numeric ChartType enum value in its own properties. */
+export const MigratedLegacyBar: Story = {
+    args: {
+        element: sceneComponent('legacy-sales', 'chart', {
+            type: 0, data: salesData, options: { maintainAspectRatio: false }, style: { height: 240 }, ariaLabel: 'Migrated monthly sales',
+            legacyType: 'PrimeReact.Chart', legacyExtras: { canvas: { x: 256, y: 184 } },
+        }),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/chart/ChartType.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** The canonical names of the Chart.js chart types Scene's `chart` component supports. */
+export enum ChartType {
+    Bar = 'bar',
+    Line = 'line',
+    Pie = 'pie',
+    Doughnut = 'doughnut',
+    PolarArea = 'polarArea',
+    Radar = 'radar',
+    Bubble = 'bubble',
+    Scatter = 'scatter',
+}

package/chart/ChartTypeResolution.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ChartType } from './ChartType';
+
+/**
+ * What an authored chart `type` resolved to: a Chart.js type, or the reason it names none.
+ *
+ * A value that is not a known type is never replaced by a default. Drawing a bar chart for a document that
+ * asked for something else hides a data problem behind a plausible picture.
+ */
+export type ChartTypeResolution =
+    | { isValid: true; type: ChartType }
+    | { isValid: false; value: unknown; message: string };

package/chart/PrimeChart.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, useMemo, useRef } from 'react';
+import type { ChartConfiguration, ChartData, ChartOptions } from 'chart.js';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, recordProperty, stringProperty } from '../properties';
+import { useStructuralValue } from '../useStructuralValue';
+import { chartHasData } from './chartHasData';
+import { resolveChartType } from './resolveChartType';
+import { useChart } from './useChart';
+
+/**
+ * The `PrimeReact:chart` component, rendered by Chart.js because PrimeReact 11 no longer ships its
+ * former Chart.js wrapper.
+ *
+ * Three states are explicit rather than a blank canvas: an unsupported `type` is reported (the right chart
+ * cannot be guessed), a chart with no data points shows its `emptyLabel` (data is never invented), and a
+ * chart Chart.js could not draw says why. Only a chart with data and a supported type reaches Chart.js.
+ *
+ * Chart.js is an optional peer dependency of this package: a host that renders charts must install
+ * `chart.js` itself. The chart rebuilds only when its resolved type, data or options change in content -
+ * every edit to a Scene document clones the whole document, and a clone with equal content is not a change.
+ *
+ * The chart fills the authored size: `maintainAspectRatio` defaults to `false` here (Chart.js defaults to
+ * `true`, which shrinks the chart inside its box) and an authored `options.maintainAspectRatio` wins. The
+ * `responsive` property is authoritative over `options.responsive` when both are set.
+ */
+export function PrimeChart({ element, interactions }: RegisteredComponentProps) {
+    const canvas = useRef<HTMLCanvasElement>(null);
+    const resolution = resolveChartType(element);
+    const data = useStructuralValue(recordProperty(element, 'data') as ChartData | undefined);
+    const options = useStructuralValue(recordProperty(element, 'options') as ChartOptions | undefined);
+    const style = recordProperty(element, 'style') as CSSProperties | undefined;
+    const responsive = booleanProperty(element, 'responsive', options?.responsive ?? true);
+    const ariaLabel = stringProperty(element, 'ariaLabel', element.name || 'Chart');
+    const emptyLabel = stringProperty(element, 'emptyLabel', 'No chart data');
+    const hasData = chartHasData(data);
+    const type = resolution.isValid ? resolution.type : undefined;
+    const enabled = type !== undefined && hasData;
+
+    const configuration = useMemo(() => ({
+        type,
+        data: data ?? { datasets: [] },
+        options: { maintainAspectRatio: false, ...options, responsive },
+    }) as unknown as ChartConfiguration, [type, data, options, responsive]);
+
+    const failure = useChart(canvas, configuration, enabled);
+
+    return (
+        <div
+            data-scene-id={element.id}
+            data-scene-component='chart'
+            style={{ position: 'relative', width: element.size.width ?? '100%', height: element.size.height ?? '100%', ...style }}
+            {...interactions}>
+            {!resolution.isValid && <div role='alert' data-scene-state='unsupported-type'>{resolution.message}</div>}
+            {resolution.isValid && !hasData && <div role='status' data-scene-state='empty'>{emptyLabel}</div>}
+            {failure !== undefined && <div role='alert' data-scene-state='unavailable'>{`The chart could not be drawn: ${failure}`}</div>}
+            {enabled && <canvas ref={canvas} role='img' aria-label={ariaLabel} hidden={failure !== undefined} />}
+        </div>
+    );
+}

package/chart/chartHasData.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * Whether chart data holds at least one data point to draw.
+ *
+ * Datasets whose `data` is empty (or absent) draw nothing but axes, so the chart reports it instead.
+ * A dataset may also give its points as keyed records (Chart.js `parsing` over an object), which counts
+ * when it has any keys.
+ */
+export function chartHasData(data: unknown): boolean {
+    if (data === null || typeof data !== 'object') return false;
+    const datasets = (data as Record<string, unknown>).datasets;
+    if (!Array.isArray(datasets)) return false;
+
+    return datasets.some(dataset => {
+        if (dataset === null || typeof dataset !== 'object') return false;
+        const points = (dataset as Record<string, unknown>).data;
+        if (Array.isArray(points)) return points.length > 0;
+        return points !== null && typeof points === 'object' && Object.keys(points).length > 0;
+    });
+}

package/chart/chartTypeChoices.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PropertyChoice } from '@cratis/scene.model';
+import { ChartType } from './ChartType';
+import { legacyChartTypes } from './resolveChartType';
+
+const chartTypeLabels: Record<ChartType, string> = {
+    [ChartType.Bar]: 'Bar',
+    [ChartType.Line]: 'Line',
+    [ChartType.Pie]: 'Pie',
+    [ChartType.Doughnut]: 'Doughnut',
+    [ChartType.PolarArea]: 'Polar area',
+    [ChartType.Radar]: 'Radar',
+    [ChartType.Bubble]: 'Bubble',
+    [ChartType.Scatter]: 'Scatter',
+};
+
+/**
+ * The chart type choices: the stable names new documents use, then the ordinals migrated documents carry,
+ * then the Pascal case member names of the original .NET enum that a serialized enum produces.
+ * A migrated chart stores its original `type`; offering every form the renderer accepts keeps that stored
+ * value valid (and its type visible and re-selectable) without rewriting it to another form behind the
+ * author's back. The choices are the same set `resolveChartType` accepts, so what the renderer draws is
+ * exactly what the descriptor allows.
+ */
+export const chartTypeChoices: PropertyChoice[] = [
+    ...Object.values(ChartType).map(type => ({ value: type, label: chartTypeLabels[type] })),
+    ...legacyChartTypes.map((type, ordinal) => ({ value: ordinal, label: `${chartTypeLabels[type]} (legacy ${ordinal})`, description: `The ordinal ${ordinal} of the original chart type enum, as stored by migrated documents.` })),
+    ...(Object.keys(ChartType) as (keyof typeof ChartType)[]).map(name => ({ value: name, label: `${chartTypeLabels[ChartType[name]]} (legacy name ${name})`, description: `The member name ${name} of the original chart type enum, as a serialized enum stores it.` })),
+];
+

package/chart/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './ChartType';
+export * from './ChartTypeResolution';
+export * from './PrimeChart';
+export * from './resolveChartType';

package/chart/resolveChartType.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneElement } from '@cratis/scene.model';
+import { ChartType } from './ChartType';
+import { ChartTypeResolution } from './ChartTypeResolution';
+
+/**
+ * The ordinals of the original .NET `PrimeReact.Charts.ChartType` enum, in declaration order
+ * (`Studio/Source/PrimeReact/Charts/Chart.cs`). Migrated documents keep the ordinal, so the position of
+ * each entry here is part of the stored-data contract and must never be reordered.
+ */
+export const legacyChartTypes: readonly ChartType[] = [
+    ChartType.Bar,
+    ChartType.Line,
+    ChartType.Pie,
+    ChartType.Doughnut,
+    ChartType.PolarArea,
+    ChartType.Radar,
+    ChartType.Bubble,
+    ChartType.Scatter,
+];
+
+/**
+ * Resolves an authored chart type to the Chart.js vocabulary.
+ *
+ * Three forms are accepted, and the stored value is never rewritten:
+ * - a canonical Chart.js name from {@link ChartType} (`'polarArea'`), which new documents use;
+ * - the ordinal of the original .NET enum (`4`), which migrated documents carry;
+ * - the .NET member name in its original Pascal case (`'PolarArea'`), which a JSON serialization of that
+ *   enum produces.
+ *
+ * Anything else - an unknown or fractional ordinal, a numeric string, a differently cased name, `null` -
+ * resolves to a finding with a message, because the right chart cannot be known. An absent `type` is the
+ * one default: the original control defaulted to `Bar`.
+ */
+export function resolveChartType(element: SceneElement): ChartTypeResolution {
+    const value = element.properties.type;
+    if (value === undefined) return { isValid: true, type: ChartType.Bar };
+
+    if (typeof value === 'number') {
+        const type = Number.isInteger(value) ? legacyChartTypes[value] : undefined;
+        return type === undefined ? unsupported(value) : { isValid: true, type };
+    }
+
+    if (typeof value === 'string') {
+        if (Object.values(ChartType).includes(value as ChartType)) return { isValid: true, type: value as ChartType };
+        if (Object.hasOwn(ChartType, value)) return { isValid: true, type: ChartType[value as keyof typeof ChartType] };
+    }
+
+    return unsupported(value);
+}
+
+function unsupported(value: unknown): ChartTypeResolution {
+    const shown = typeof value === 'string' ? `'${value}'` : JSON.stringify(value) ?? String(value);
+    return {
+        isValid: false,
+        value,
+        message: `Unsupported chart type ${shown}. Use one of ${Object.values(ChartType).join(', ')}, or a legacy ordinal from 0 to ${legacyChartTypes.length - 1}.`,
+    };
+}

package/chart/useChart.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RefObject, useEffect, useState } from 'react';
+import type { ChartConfiguration } from 'chart.js';
+
+/**
+ * Draws a Chart.js chart on a canvas and owns its lifetime.
+ *
+ * Chart.js loads only after the canvas has mounted, which keeps server rendering independent of browser
+ * globals. The chart is destroyed before it is rebuilt and when the component unmounts - Chart.js owns
+ * listeners and resize observers, so a retained instance would draw twice and leak them.
+ *
+ * A chart that cannot be drawn is reported rather than left as a blank canvas: `chart.js` not being
+ * installed (it is an optional peer dependency), a failed dynamic import and a rejected configuration all
+ * come back as the returned failure message. A rejected configuration is released from the canvas as well,
+ * so correcting it draws again on the same canvas.
+ *
+ * @param canvas The canvas to draw on. It must be rendered whenever `enabled` is true.
+ * @param configuration The Chart.js configuration. Pass a structurally stable value (see
+ * {@link useStructuralValue}); a new identity rebuilds the chart.
+ * @param enabled Whether there is something to draw.
+ * @returns The reason the chart could not be drawn, or `undefined`.
+ */
+export function useChart(canvas: RefObject<HTMLCanvasElement | null>, configuration: ChartConfiguration, enabled: boolean): string | undefined {
+    const [failure, setFailure] = useState<string | undefined>(undefined);
+
+    useEffect(() => {
+        setFailure(undefined);
+        const target = canvas.current;
+        if (!enabled || target === null) return undefined;
+
+        let disposed = false;
+        let instance: { destroy(): void } | undefined;
+
+        const create = async () => {
+            let chartType: typeof import('chart.js/auto').default | undefined;
+            try {
+                chartType = (await import('chart.js/auto')).default;
+                if (disposed) return;
+                instance = new chartType(target, structuredClone(configuration));
+            } catch (error) {
+                // Chart.js registers a chart on its canvas before the constructor finishes, so a constructor
+                // that throws still leaves a registered instance behind - one `instance` never points at. Left
+                // alone it makes every later attempt fail with "Canvas is already in use" and hides the real
+                // reason, so release whatever is bound to this canvas before reporting.
+                chartType?.getChart(target)?.destroy();
+                if (!disposed) setFailure(error instanceof Error ? error.message : String(error));
+            }
+        };
+
+        void create();
+        return () => {
+            disposed = true;
+            instance?.destroy();
+            instance = undefined;
+        };
+    }, [canvas, configuration, enabled]);
+
+    return failure;
+}

package/dist/cjs/chart/ChartType.js

@@ -0,0 +1,18 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The canonical names of the Chart.js chart types Scene's `chart` component supports. */ var ChartType = /*#__PURE__*/ function(ChartType) {
+    ChartType["Bar"] = "bar";
+    ChartType["Line"] = "line";
+    ChartType["Pie"] = "pie";
+    ChartType["Doughnut"] = "doughnut";
+    ChartType["PolarArea"] = "polarArea";
+    ChartType["Radar"] = "radar";
+    ChartType["Bubble"] = "bubble";
+    ChartType["Scatter"] = "scatter";
+    return ChartType;
+}({});
+
+exports.ChartType = ChartType;
+//# sourceMappingURL=ChartType.js.map

package/dist/cjs/chart/ChartType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartType.js","sources":["../../../chart/ChartType.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/** The canonical names of the Chart.js chart types Scene's `chart` component supports. */\nexport enum ChartType {\n    Bar = 'bar',\n    Line = 'line',\n    Pie = 'pie',\n    Doughnut = 'doughnut',\n    PolarArea = 'polarArea',\n    Radar = 'radar',\n    Bubble = 'bubble',\n    Scatter = 'scatter',\n}\n"],"names":["ChartType"],"mappings":";;AAAA;AACA;AAEA,2FACO,IAAKA,SAAAA,iBAAAA,SAAAA,SAAAA,EAAAA;;;;;;;;;AAAAA,IAAAA,OAAAA,SAAAA;AASX,CAAA,CAAA,EAAA;;"}

package/dist/cjs/chart/PrimeChart.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var properties = require('../properties.js');
+var useStructuralValue = require('../useStructuralValue.js');
+var chartHasData = require('./chartHasData.js');
+var resolveChartType = require('./resolveChartType.js');
+var useChart = require('./useChart.js');
+
+/**
+ * The `PrimeReact:chart` component, rendered by Chart.js because PrimeReact 11 no longer ships its
+ * former Chart.js wrapper.
+ *
+ * Three states are explicit rather than a blank canvas: an unsupported `type` is reported (the right chart
+ * cannot be guessed), a chart with no data points shows its `emptyLabel` (data is never invented), and a
+ * chart Chart.js could not draw says why. Only a chart with data and a supported type reaches Chart.js.
+ *
+ * Chart.js is an optional peer dependency of this package: a host that renders charts must install
+ * `chart.js` itself. The chart rebuilds only when its resolved type, data or options change in content -
+ * every edit to a Scene document clones the whole document, and a clone with equal content is not a change.
+ *
+ * The chart fills the authored size: `maintainAspectRatio` defaults to `false` here (Chart.js defaults to
+ * `true`, which shrinks the chart inside its box) and an authored `options.maintainAspectRatio` wins. The
+ * `responsive` property is authoritative over `options.responsive` when both are set.
+ */ function PrimeChart({ element, interactions }) {
+    const canvas = react.useRef(null);
+    const resolution = resolveChartType.resolveChartType(element);
+    const data = useStructuralValue.useStructuralValue(properties.recordProperty(element, 'data'));
+    const options = useStructuralValue.useStructuralValue(properties.recordProperty(element, 'options'));
+    const style = properties.recordProperty(element, 'style');
+    const responsive = properties.booleanProperty(element, 'responsive', options?.responsive ?? true);
+    const ariaLabel = properties.stringProperty(element, 'ariaLabel', element.name || 'Chart');
+    const emptyLabel = properties.stringProperty(element, 'emptyLabel', 'No chart data');
+    const hasData = chartHasData.chartHasData(data);
+    const type = resolution.isValid ? resolution.type : undefined;
+    const enabled = type !== undefined && hasData;
+    const configuration = react.useMemo(()=>({
+            type,
+            data: data ?? {
+                datasets: []
+            },
+            options: {
+                maintainAspectRatio: false,
+                ...options,
+                responsive
+            }
+        }), [
+        type,
+        data,
+        options,
+        responsive
+    ]);
+    const failure = useChart.useChart(canvas, configuration, enabled);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        "data-scene-id": element.id,
+        "data-scene-component": "chart",
+        style: {
+            position: 'relative',
+            width: element.size.width ?? '100%',
+            height: element.size.height ?? '100%',
+            ...style
+        },
+        ...interactions,
+        children: [
+            !resolution.isValid && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                role: "alert",
+                "data-scene-state": "unsupported-type",
+                children: resolution.message
+            }),
+            resolution.isValid && !hasData && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                role: "status",
+                "data-scene-state": "empty",
+                children: emptyLabel
+            }),
+            failure !== undefined && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                role: "alert",
+                "data-scene-state": "unavailable",
+                children: `The chart could not be drawn: ${failure}`
+            }),
+            enabled && /*#__PURE__*/ jsxRuntime.jsx("canvas", {
+                ref: canvas,
+                role: "img",
+                "aria-label": ariaLabel,
+                hidden: failure !== undefined
+            })
+        ]
+    });
+}
+
+exports.PrimeChart = PrimeChart;
+//# sourceMappingURL=PrimeChart.js.map

package/dist/cjs/chart/PrimeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeChart.js","sources":["../../../chart/PrimeChart.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { CSSProperties, useMemo, useRef } from 'react';\nimport type { ChartConfiguration, ChartData, ChartOptions } from 'chart.js';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, recordProperty, stringProperty } from '../properties';\nimport { useStructuralValue } from '../useStructuralValue';\nimport { chartHasData } from './chartHasData';\nimport { resolveChartType } from './resolveChartType';\nimport { useChart } from './useChart';\n\n/**\n * The `PrimeReact:chart` component, rendered by Chart.js because PrimeReact 11 no longer ships its\n * former Chart.js wrapper.\n *\n * Three states are explicit rather than a blank canvas: an unsupported `type` is reported (the right chart\n * cannot be guessed), a chart with no data points shows its `emptyLabel` (data is never invented), and a\n * chart Chart.js could not draw says why. Only a chart with data and a supported type reaches Chart.js.\n *\n * Chart.js is an optional peer dependency of this package: a host that renders charts must install\n * `chart.js` itself. The chart rebuilds only when its resolved type, data or options change in content -\n * every edit to a Scene document clones the whole document, and a clone with equal content is not a change.\n *\n * The chart fills the authored size: `maintainAspectRatio` defaults to `false` here (Chart.js defaults to\n * `true`, which shrinks the chart inside its box) and an authored `options.maintainAspectRatio` wins. The\n * `responsive` property is authoritative over `options.responsive` when both are set.\n */\nexport function PrimeChart({ element, interactions }: RegisteredComponentProps) {\n    const canvas = useRef<HTMLCanvasElement>(null);\n    const resolution = resolveChartType(element);\n    const data = useStructuralValue(recordProperty(element, 'data') as ChartData | undefined);\n    const options = useStructuralValue(recordProperty(element, 'options') as ChartOptions | undefined);\n    const style = recordProperty(element, 'style') as CSSProperties | undefined;\n    const responsive = booleanProperty(element, 'responsive', options?.responsive ?? true);\n    const ariaLabel = stringProperty(element, 'ariaLabel', element.name || 'Chart');\n    const emptyLabel = stringProperty(element, 'emptyLabel', 'No chart data');\n    const hasData = chartHasData(data);\n    const type = resolution.isValid ? resolution.type : undefined;\n    const enabled = type !== undefined && hasData;\n\n    const configuration = useMemo(() => ({\n        type,\n        data: data ?? { datasets: [] },\n        options: { maintainAspectRatio: false, ...options, responsive },\n    }) as unknown as ChartConfiguration, [type, data, options, responsive]);\n\n    const failure = useChart(canvas, configuration, enabled);\n\n    return (\n        <div\n            data-scene-id={element.id}\n            data-scene-component='chart'\n            style={{ position: 'relative', width: element.size.width ?? '100%', height: element.size.height ?? '100%', ...style }}\n            {...interactions}>\n            {!resolution.isValid && <div role='alert' data-scene-state='unsupported-type'>{resolution.message}</div>}\n            {resolution.isValid && !hasData && <div role='status' data-scene-state='empty'>{emptyLabel}</div>}\n            {failure !== undefined && <div role='alert' data-scene-state='unavailable'>{`The chart could not be drawn: ${failure}`}</div>}\n            {enabled && <canvas ref={canvas} role='img' aria-label={ariaLabel} hidden={failure !== undefined} />}\n        </div>\n    );\n}\n"],"names":["PrimeChart","element","interactions","canvas","useRef","resolution","resolveChartType","data","useStructuralValue","recordProperty","options","style","responsive","booleanProperty","ariaLabel","stringProperty","name","emptyLabel","hasData","chartHasData","type","isValid","undefined","enabled","configuration","useMemo","datasets","maintainAspectRatio","failure","useChart","_jsxs","div","data-scene-id","id","data-scene-component","position","width","size","height","_jsx","role","data-scene-state","message","ref","aria-label","hidden"],"mappings":"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"}

package/dist/cjs/chart/chartHasData.js

@@ -0,0 +1,24 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Whether chart data holds at least one data point to draw.
+ *
+ * Datasets whose `data` is empty (or absent) draw nothing but axes, so the chart reports it instead.
+ * A dataset may also give its points as keyed records (Chart.js `parsing` over an object), which counts
+ * when it has any keys.
+ */ function chartHasData(data) {
+    if (data === null || typeof data !== 'object') return false;
+    const datasets = data.datasets;
+    if (!Array.isArray(datasets)) return false;
+    return datasets.some((dataset)=>{
+        if (dataset === null || typeof dataset !== 'object') return false;
+        const points = dataset.data;
+        if (Array.isArray(points)) return points.length > 0;
+        return points !== null && typeof points === 'object' && Object.keys(points).length > 0;
+    });
+}
+
+exports.chartHasData = chartHasData;
+//# sourceMappingURL=chartHasData.js.map

package/dist/cjs/chart/chartHasData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartHasData.js","sources":["../../../chart/chartHasData.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * Whether chart data holds at least one data point to draw.\n *\n * Datasets whose `data` is empty (or absent) draw nothing but axes, so the chart reports it instead.\n * A dataset may also give its points as keyed records (Chart.js `parsing` over an object), which counts\n * when it has any keys.\n */\nexport function chartHasData(data: unknown): boolean {\n    if (data === null || typeof data !== 'object') return false;\n    const datasets = (data as Record<string, unknown>).datasets;\n    if (!Array.isArray(datasets)) return false;\n\n    return datasets.some(dataset => {\n        if (dataset === null || typeof dataset !== 'object') return false;\n        const points = (dataset as Record<string, unknown>).data;\n        if (Array.isArray(points)) return points.length > 0;\n        return points !== null && typeof points === 'object' && Object.keys(points).length > 0;\n    });\n}\n"],"names":["chartHasData","data","datasets","Array","isArray","some","dataset","points","length","Object","keys"],"mappings":";;AAAA;AACA;AAEA;;;;;;IAOO,SAASA,YAAAA,CAAaC,IAAa,EAAA;AACtC,IAAA,IAAIA,IAAAA,KAAS,IAAA,IAAQ,OAAOA,IAAAA,KAAS,UAAU,OAAO,KAAA;IACtD,MAAMC,QAAAA,GAAW,IAACD,CAAiCC,QAAQ;AAC3D,IAAA,IAAI,CAACC,KAAAA,CAAMC,OAAO,CAACF,WAAW,OAAO,KAAA;IAErC,OAAOA,QAAAA,CAASG,IAAI,CAACC,CAAAA,OAAAA,GAAAA;AACjB,QAAA,IAAIA,OAAAA,KAAY,IAAA,IAAQ,OAAOA,OAAAA,KAAY,UAAU,OAAO,KAAA;QAC5D,MAAMC,MAAAA,GAAS,OAACD,CAAoCL,IAAI;AACxD,QAAA,IAAIE,MAAMC,OAAO,CAACG,SAAS,OAAOA,MAAAA,CAAOC,MAAM,GAAG,CAAA;QAClD,OAAOD,MAAAA,KAAW,IAAA,IAAQ,OAAOA,MAAAA,KAAW,QAAA,IAAYE,OAAOC,IAAI,CAACH,MAAAA,CAAAA,CAAQC,MAAM,GAAG,CAAA;AACzF,IAAA,CAAA,CAAA;AACJ;;"}

package/dist/cjs/chart/chartTypeChoices.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var ChartType = require('./ChartType.js');
+var resolveChartType = require('./resolveChartType.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const chartTypeLabels = {
+    [ChartType.ChartType.Bar]: 'Bar',
+    [ChartType.ChartType.Line]: 'Line',
+    [ChartType.ChartType.Pie]: 'Pie',
+    [ChartType.ChartType.Doughnut]: 'Doughnut',
+    [ChartType.ChartType.PolarArea]: 'Polar area',
+    [ChartType.ChartType.Radar]: 'Radar',
+    [ChartType.ChartType.Bubble]: 'Bubble',
+    [ChartType.ChartType.Scatter]: 'Scatter'
+};
+/**
+ * The chart type choices: the stable names new documents use, then the ordinals migrated documents carry,
+ * then the Pascal case member names of the original .NET enum that a serialized enum produces.
+ * A migrated chart stores its original `type`; offering every form the renderer accepts keeps that stored
+ * value valid (and its type visible and re-selectable) without rewriting it to another form behind the
+ * author's back. The choices are the same set `resolveChartType` accepts, so what the renderer draws is
+ * exactly what the descriptor allows.
+ */ const chartTypeChoices = [
+    ...Object.values(ChartType.ChartType).map((type)=>({
+            value: type,
+            label: chartTypeLabels[type]
+        })),
+    ...resolveChartType.legacyChartTypes.map((type, ordinal)=>({
+            value: ordinal,
+            label: `${chartTypeLabels[type]} (legacy ${ordinal})`,
+            description: `The ordinal ${ordinal} of the original chart type enum, as stored by migrated documents.`
+        })),
+    ...Object.keys(ChartType.ChartType).map((name)=>({
+            value: name,
+            label: `${chartTypeLabels[ChartType.ChartType[name]]} (legacy name ${name})`,
+            description: `The member name ${name} of the original chart type enum, as a serialized enum stores it.`
+        }))
+];
+
+exports.chartTypeChoices = chartTypeChoices;
+//# sourceMappingURL=chartTypeChoices.js.map

package/dist/cjs/chart/chartTypeChoices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartTypeChoices.js","sources":["../../../chart/chartTypeChoices.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyChoice } from '@cratis/scene.model';\nimport { ChartType } from './ChartType';\nimport { legacyChartTypes } from './resolveChartType';\n\nconst chartTypeLabels: Record<ChartType, string> = {\n    [ChartType.Bar]: 'Bar',\n    [ChartType.Line]: 'Line',\n    [ChartType.Pie]: 'Pie',\n    [ChartType.Doughnut]: 'Doughnut',\n    [ChartType.PolarArea]: 'Polar area',\n    [ChartType.Radar]: 'Radar',\n    [ChartType.Bubble]: 'Bubble',\n    [ChartType.Scatter]: 'Scatter',\n};\n\n/**\n * The chart type choices: the stable names new documents use, then the ordinals migrated documents carry,\n * then the Pascal case member names of the original .NET enum that a serialized enum produces.\n * A migrated chart stores its original `type`; offering every form the renderer accepts keeps that stored\n * value valid (and its type visible and re-selectable) without rewriting it to another form behind the\n * author's back. The choices are the same set `resolveChartType` accepts, so what the renderer draws is\n * exactly what the descriptor allows.\n */\nexport const chartTypeChoices: PropertyChoice[] = [\n    ...Object.values(ChartType).map(type => ({ value: type, label: chartTypeLabels[type] })),\n    ...legacyChartTypes.map((type, ordinal) => ({ value: ordinal, label: `${chartTypeLabels[type]} (legacy ${ordinal})`, description: `The ordinal ${ordinal} of the original chart type enum, as stored by migrated documents.` })),\n    ...(Object.keys(ChartType) as (keyof typeof ChartType)[]).map(name => ({ value: name, label: `${chartTypeLabels[ChartType[name]]} (legacy name ${name})`, description: `The member name ${name} of the original chart type enum, as a serialized enum stores it.` })),\n];\n\n"],"names":["chartTypeLabels","ChartType","Bar","Line","Pie","Doughnut","PolarArea","Radar","Bubble","Scatter","chartTypeChoices","Object","values","map","type","value","label","legacyChartTypes","ordinal","description","keys","name"],"mappings":";;;;;AAAA;AACA;AAMA,MAAMA,eAAAA,GAA6C;IAC/C,CAACC,mBAAAA,CAAUC,GAAG,GAAG,KAAA;IACjB,CAACD,mBAAAA,CAAUE,IAAI,GAAG,MAAA;IAClB,CAACF,mBAAAA,CAAUG,GAAG,GAAG,KAAA;IACjB,CAACH,mBAAAA,CAAUI,QAAQ,GAAG,UAAA;IACtB,CAACJ,mBAAAA,CAAUK,SAAS,GAAG,YAAA;IACvB,CAACL,mBAAAA,CAAUM,KAAK,GAAG,OAAA;IACnB,CAACN,mBAAAA,CAAUO,MAAM,GAAG,QAAA;IACpB,CAACP,mBAAAA,CAAUQ,OAAO,GAAG;AACzB,CAAA;AAEA;;;;;;;UAQaC,gBAAAA,GAAqC;AAC3CC,IAAAA,GAAAA,MAAAA,CAAOC,MAAM,CAACX,mBAAAA,CAAAA,CAAWY,GAAG,CAACC,CAAAA,QAAS;YAAEC,KAAAA,EAAOD,IAAAA;YAAME,KAAAA,EAAOhB,eAAe,CAACc,IAAAA;SAAM,CAAA,CAAA;AAClFG,IAAAA,GAAAA,iCAAAA,CAAiBJ,GAAG,CAAC,CAACC,IAAAA,EAAMI,WAAa;YAAEH,KAAAA,EAAOG,OAAAA;YAASF,KAAAA,EAAO,CAAA,EAAGhB,eAAe,CAACc,IAAAA,CAAK,CAAC,SAAS,EAAEI,OAAAA,CAAQ,CAAC,CAAC;AAAEC,YAAAA,WAAAA,EAAa,CAAC,YAAY,EAAED,OAAAA,CAAQ,kEAAkE;SAAE,CAAA,CAAA;OAC1N,MAACP,CAAOS,IAAI,CAACnB,mBAAAA,CAAAA,CAA0CY,GAAG,CAACQ,CAAAA,QAAS;YAAEN,KAAAA,EAAOM,IAAAA;AAAML,YAAAA,KAAAA,EAAO,CAAA,EAAGhB,eAAe,CAACC,mBAAS,CAACoB,IAAAA,CAAK,CAAC,CAAC,cAAc,EAAEA,IAAAA,CAAK,CAAC,CAAC;AAAEF,YAAAA,WAAAA,EAAa,CAAC,gBAAgB,EAAEE,IAAAA,CAAK,iEAAiE;SAAE,CAAA;;;"}