npm - @fluentui/react-charts - Versions diffs - 9.3.12 → 9.3.13 - Mend

@fluentui/react-charts 9.3.12 → 9.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/lib/components/VegaDeclarativeChart/VegaLiteTypes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/VegaDeclarativeChart/VegaLiteTypes.ts"],"sourcesContent":["/**\n * Vega-Lite TypeScript interfaces for declarative chart specifications.\n * This is a minimal subset focused on line/point charts with basic encodings.\n *\n * RECOMMENDED: For full type coverage, install the official vega-lite package:\n * ```\n * npm install vega-lite\n * ```\n * Then import `TopLevelSpec` from 'vega-lite' for complete schema support.\n *\n * The types provided here are a lightweight alternative that covers common use cases\n * without requiring the full vega-lite dependency (~5.8MB unpacked).\n *\n * Full Vega-Lite spec: https://vega.github.io/vega-lite/docs/\n *\n * TODO: Add support for:\n * - Transform operations (filter, aggregate, calculate, etc.)\n * - Remote data sources (url, named datasets)\n * - Facet and concatenation for multi-view layouts\n * - Selection interactions\n * - Additional mark types (bar, area, etc.)\n * - Conditional encodings\n * - Tooltip customization\n */\n\n/**\n * Vega-Lite data type for field encodings\n */\nexport type VegaLiteType = 'quantitative' | 'temporal' | 'ordinal' | 'nominal' | 'geojson';\n\n/**\n * Vega-Lite mark types\n */\nexport type VegaLiteMark = 'line' | 'point' | 'circle' | 'square' | 'bar' | 'area' | 'rect' | 'rule' | 'text' | 'arc';\n\n/**\n * Vega-Lite scale type\n */\nexport type VegaLiteScaleType =\n | 'linear'\n | 'log'\n | 'pow'\n | 'sqrt'\n | 'symlog'\n | 'time'\n | 'utc'\n | 'ordinal'\n | 'band'\n | 'point';\n\n/**\n * Vega-Lite interpolation method\n */\nexport type VegaLiteInterpolate =\n | 'linear'\n | 'linear-closed'\n | 'step'\n | 'step-before'\n | 'step-after'\n | 'basis'\n | 'cardinal'\n | 'monotone'\n | 'natural';\n\n/**\n * Vega-Lite axis configuration\n */\nexport interface VegaLiteAxis {\n /**\n * Axis title\n */\n title?: string | null;\n\n /**\n * Format string for axis tick labels\n * Uses d3-format for quantitative and d3-time-format for temporal\n */\n format?: string;\n\n /**\n * Tick values to display\n */\n values?: number[] | string[];\n\n /**\n * Number of ticks\n */\n tickCount?: number;\n\n /**\n * Grid visibility\n */\n grid?: boolean;\n}\n\n/**\n * Vega-Lite scale configuration\n */\nexport interface VegaLiteScale {\n /**\n * Scale type\n */\n type?: VegaLiteScaleType;\n\n /**\n * Domain values [min, max]\n */\n domain?: (number | string)[];\n\n /**\n * Range values [min, max]\n */\n range?: [number | string, number | string] | string[];\n\n /**\n * Color scheme name (e.g., 'category10', 'tableau10')\n */\n scheme?: string;\n\n /**\n * Whether scale domain should include zero\n */\n zero?: boolean;\n\n /**\n * Whether to reverse the scale\n */\n reverse?: boolean;\n}\n\n/**\n * Vega-Lite legend configuration\n */\nexport interface VegaLiteLegend {\n /**\n * Legend title\n */\n title?: string | null;\n\n /**\n * Hide the legend\n */\n disable?: boolean;\n}\n\n/**\n * Vega-Lite sort specification\n */\nexport type VegaLiteSort =\n | 'ascending'\n | 'descending'\n | null\n | {\n field?: string;\n op?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max';\n order?: 'ascending' | 'descending';\n }\n | string[];\n\n/**\n * Vega-Lite binning configuration\n */\nexport interface VegaLiteBin {\n /**\n * Maximum number of bins\n */\n maxbins?: number;\n\n /**\n * Exact step size between bins\n */\n step?: number;\n\n /**\n * Extent [min, max] for binning\n */\n extent?: [number, number];\n\n /**\n * Base for nice bin values (e.g., 10 for powers of 10)\n */\n base?: number;\n\n /**\n * Whether to include the boundary in bins\n */\n anchor?: number;\n}\n\n/**\n * Vega-Lite position encoding channel (x or y)\n */\nexport interface VegaLitePositionEncoding {\n /**\n * Field name in data\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Axis configuration\n */\n axis?: VegaLiteAxis | null;\n\n /**\n * Constant value for encoding (for reference lines and annotations)\n */\n value?: number | string | Date;\n\n /**\n * Datum value for encoding (alternative to value)\n */\n datum?: number | string | Date;\n\n /**\n * Scale configuration\n */\n scale?: VegaLiteScale | null;\n\n /**\n * Sort order for categorical axes\n * Supports: 'ascending', 'descending', null, array of values, or object with field/op/order\n */\n sort?: VegaLiteSort;\n\n /**\n * Binning configuration for histograms\n * Set to true for default binning or provide custom bin parameters\n */\n bin?: boolean | VegaLiteBin;\n\n /**\n * Stack configuration for area/bar charts\n * - null: disable stacking\n * - 'zero': stack from zero baseline (default for area charts)\n * - 'center': center stack\n * - 'normalize': normalize to 100%\n */\n stack?: null | 'zero' | 'center' | 'normalize';\n\n /**\n * Aggregate function\n */\n aggregate?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max';\n\n /**\n * Axis title (shorthand alternative to axis.title)\n */\n title?: string;\n\n /**\n * Time unit for temporal fields (e.g., 'yearmonth', 'month', 'day')\n */\n timeUnit?: string;\n}\n\n/**\n * Vega-Lite color encoding channel\n */\nexport interface VegaLiteColorEncoding {\n /**\n * Field name for color differentiation\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Legend configuration\n */\n legend?: VegaLiteLegend | null;\n\n /**\n * Scale configuration\n */\n scale?: VegaLiteScale | null;\n\n /**\n * Fixed color value\n */\n value?: string;\n}\n\n/**\n * Vega-Lite size encoding channel\n */\nexport interface VegaLiteSizeEncoding {\n /**\n * Field name for size encoding\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Fixed size value\n */\n value?: number;\n}\n\n/**\n * Vega-Lite shape encoding channel\n */\nexport interface VegaLiteShapeEncoding {\n /**\n * Field name for shape encoding\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Fixed shape value\n */\n value?: string;\n}\n\n/**\n * Vega-Lite theta encoding channel for pie/donut charts and polar coordinates\n */\nexport interface VegaLiteThetaEncoding {\n /**\n * Field name\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Aggregate function\n */\n aggregate?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max';\n\n /**\n * Axis configuration for polar charts\n */\n axis?: VegaLiteAxis | null;\n\n /**\n * Scale configuration for polar charts\n */\n scale?: VegaLiteScale | null;\n}\n\n/**\n * Vega-Lite radius encoding channel for polar charts\n */\nexport interface VegaLiteRadiusEncoding {\n /**\n * Field name\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Aggregate function\n */\n aggregate?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max';\n\n /**\n * Axis configuration\n */\n axis?: VegaLiteAxis | null;\n\n /**\n * Scale configuration\n */\n scale?: VegaLiteScale | null;\n}\n\n/**\n * Vega-Lite text encoding channel\n */\nexport interface VegaLiteTextEncoding {\n /**\n * Field name\n */\n field?: string;\n\n /**\n * Data type\n */\n type?: VegaLiteType;\n\n /**\n * Fixed text value\n */\n value?: string;\n\n /**\n * Datum value for text encoding\n */\n datum?: string | number;\n}\n\n/**\n * Vega-Lite encoding channels\n */\nexport interface VegaLiteEncoding {\n /**\n * X-axis encoding\n */\n x?: VegaLitePositionEncoding;\n\n /**\n * Y-axis encoding\n */\n y?: VegaLitePositionEncoding;\n\n /**\n * Color encoding for series differentiation\n */\n color?: VegaLiteColorEncoding;\n\n /**\n * Size encoding for point marks\n */\n size?: VegaLiteSizeEncoding;\n\n /**\n * Shape encoding for point marks\n */\n shape?: VegaLiteShapeEncoding;\n\n /**\n * Theta encoding for pie/donut charts and polar coordinates\n */\n theta?: VegaLiteThetaEncoding;\n\n /**\n * Radius encoding for polar charts\n */\n radius?: VegaLiteRadiusEncoding;\n\n /**\n * X2 encoding for interval marks (rect, rule, bar with ranges)\n */\n x2?: VegaLitePositionEncoding;\n\n /**\n * Y2 encoding for interval marks (rect, rule, bar with ranges)\n */\n y2?: VegaLitePositionEncoding;\n\n /**\n * Text encoding for text marks\n */\n text?: VegaLiteTextEncoding;\n\n /**\n * xOffset encoding for grouped bar charts\n */\n xOffset?: VegaLitePositionEncoding;\n\n /**\n * Tooltip encoding (single field or array of fields)\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n tooltip?: any;\n}\n\n/**\n * Vega-Lite mark definition (can be string or object)\n */\nexport type VegaLiteMarkDef =\n | VegaLiteMark\n | {\n type: VegaLiteMark;\n /**\n * Mark color\n */\n color?: string;\n /**\n * Line interpolation method\n */\n interpolate?: VegaLiteInterpolate;\n /**\n * Point marker visibility\n */\n point?: boolean | { filled?: boolean; size?: number };\n /**\n * Stroke width\n */\n strokeWidth?: number;\n /**\n * Stroke dash pattern (e.g., [5, 5] for dashed, [2, 2] for dotted)\n */\n strokeDash?: number[];\n /**\n * Fill opacity\n */\n fillOpacity?: number;\n /**\n * Stroke opacity\n */\n strokeOpacity?: number;\n /**\n * Overall opacity\n */\n opacity?: number;\n /**\n * Inner radius for arc/pie/donut marks (0-1 or pixel value)\n */\n innerRadius?: number;\n /**\n * Outer radius for arc/pie marks (pixel value)\n */\n outerRadius?: number;\n };\n\n/**\n * Vega-Lite inline data\n */\nexport interface VegaLiteData {\n /**\n * Inline data values (array of objects)\n */\n values?: Array<Record<string, unknown>>;\n\n /**\n * URL to load data from\n * TODO: Implement remote data loading\n */\n url?: string;\n\n /**\n * Named dataset reference\n * TODO: Implement named dataset resolution\n */\n name?: string;\n\n /**\n * Data format specification\n * TODO: Implement format parsing (csv, json, etc.)\n */\n format?: {\n type?: 'json' | 'csv' | 'tsv';\n parse?: Record<string, string>;\n };\n}\n\n/**\n * Base Vega-Lite spec unit (single view)\n */\nexport interface VegaLiteUnitSpec {\n /**\n * Mark type\n */\n mark: VegaLiteMarkDef;\n\n /**\n * Encoding channels\n */\n encoding?: VegaLiteEncoding;\n\n /**\n * Data specification\n */\n data?: VegaLiteData;\n\n /**\n * Data transformations\n * TODO: Implement transform pipeline\n */\n transform?: Array<Record<string, unknown>>;\n}\n\n/**\n * Vega-Lite layer spec (multiple overlaid views)\n */\nexport interface VegaLiteLayerSpec {\n /**\n * Layer array\n */\n layer: VegaLiteUnitSpec[];\n\n /**\n * Shared data across layers\n */\n data?: VegaLiteData;\n\n /**\n * Shared encoding across layers\n */\n encoding?: VegaLiteEncoding;\n\n /**\n * Data transformations\n * TODO: Implement transform pipeline\n */\n transform?: Array<Record<string, unknown>>;\n}\n\n/**\n * Vega-Lite title configuration with styling options\n */\nexport interface VegaLiteTitleParams {\n /**\n * Title text\n */\n text: string;\n\n /**\n * Subtitle text\n */\n subtitle?: string;\n\n /**\n * Font for the title\n */\n font?: string;\n\n /**\n * Font size for the title\n */\n fontSize?: number;\n\n /**\n * Font style for the title (e.g., 'normal', 'italic')\n */\n fontStyle?: string;\n\n /**\n * Font weight for the title (e.g., 'normal', 'bold', 100-900)\n */\n fontWeight?: string | number;\n\n /**\n * Color of the title text\n */\n color?: string;\n\n /**\n * Horizontal anchor position for the title\n * - 'start': left-aligned\n * - 'middle': centered\n * - 'end': right-aligned\n */\n anchor?: 'start' | 'middle' | 'end';\n\n /**\n * Vertical offset from the top of the chart\n */\n offset?: number;\n\n /**\n * Additional padding around the subtitle\n */\n subtitlePadding?: number;\n}\n\n/**\n * Top-level Vega-Lite specification\n */\nexport interface VegaLiteSpec {\n /**\n * Schema version\n */\n $schema?: string;\n\n /**\n * Chart title - can be a string or a detailed title configuration\n */\n title?: string | VegaLiteTitleParams;\n\n /**\n * Chart description\n */\n description?: string;\n\n /**\n * Chart width\n */\n width?: number | 'container';\n\n /**\n * Chart height\n */\n height?: number | 'container';\n\n /**\n * Data specification (for single/layer specs)\n */\n data?: VegaLiteData;\n\n /**\n * Mark type (for single view)\n */\n mark?: VegaLiteMarkDef;\n\n /**\n * Encoding channels (for single view)\n */\n encoding?: VegaLiteEncoding;\n\n /**\n * Horizontal concatenation for multi-plot layouts\n */\n hconcat?: VegaLiteSpec[];\n\n /**\n * Vertical concatenation for multi-plot layouts\n */\n vconcat?: VegaLiteSpec[];\n\n /**\n * Layer specification\n */\n layer?: VegaLiteUnitSpec[];\n\n /**\n * Data transformations\n * TODO: Implement transform pipeline\n */\n transform?: Array<Record<string, unknown>>;\n\n /**\n * Background color\n */\n background?: string;\n\n /**\n * Padding configuration\n */\n padding?: number | { top?: number; bottom?: number; left?: number; right?: number };\n\n /**\n * Auto-size configuration\n */\n autosize?: string | { type?: string; contains?: string };\n\n /**\n * Configuration overrides\n * TODO: Implement config resolution\n */\n config?: Record<string, unknown>;\n\n /**\n * Interactive selection definitions\n * TODO: Implement selection support\n */\n selection?: Record<string, unknown>;\n\n /**\n * Facet specification for small multiples\n * TODO: Implement facet support\n */\n facet?: Record<string, unknown>;\n\n /**\n * Repeat specification for small multiples\n * TODO: Implement repeat support\n */\n repeat?: Record<string, unknown>;\n\n /**\n * Scale resolution configuration\n * Controls whether scales are shared or independent across views\n */\n resolve?: {\n scale?: {\n x?: 'shared' | 'independent';\n y?: 'shared' | 'independent';\n color?: 'shared' | 'independent';\n opacity?: 'shared' | 'independent';\n size?: 'shared' | 'independent';\n shape?: 'shared' | 'independent';\n };\n axis?: {\n x?: 'shared' | 'independent';\n y?: 'shared' | 'independent';\n };\n legend?: {\n color?: 'shared' | 'independent';\n opacity?: 'shared' | 'independent';\n size?: 'shared' | 'independent';\n shape?: 'shared' | 'independent';\n };\n };\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GAED;;CAEC,GAooBD;;CAEC,GACD,WA6HC"}

package/lib/components/VegaDeclarativeChart/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './VegaDeclarativeChart';

package/lib/components/VegaDeclarativeChart/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../src/components/VegaDeclarativeChart/index.ts"],"sourcesContent":["export * from './VegaDeclarativeChart';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB"}

package/lib/index.js CHANGED Viewed

@@ -23,3 +23,4 @@ export * from './GanttChart';
 export * from './ChartTable';
 export * from './AnnotationOnlyChart';
 export * from './PolarChart';
+export * from './VegaDeclarativeChart';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './ScatterChart';\nexport * from './GaugeChart';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\nexport * from './AreaChart';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './FunnelChart';\nexport * from './GanttChart';\nexport * from './ChartTable';\nexport * from './AnnotationOnlyChart';\nexport * from './PolarChart';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,YAAY;AAC1B,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,+BAA+B;AAC7C,cAAc,iBAAiB;AAC/B,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,wBAAwB;AACtC,cAAc,eAAe"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './ScatterChart';\nexport * from './GaugeChart';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\nexport * from './AreaChart';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './FunnelChart';\nexport * from './GanttChart';\nexport * from './ChartTable';\nexport * from './AnnotationOnlyChart';\nexport * from './PolarChart';\nexport * from './VegaDeclarativeChart';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,YAAY;AAC1B,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,+BAA+B;AAC7C,cAAc,iBAAiB;AAC/B,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,wBAAwB;AACtC,cAAc,eAAe;AAC7B,cAAc,yBAAyB"}

package/lib-commonjs/VegaDeclarativeChart.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/VegaDeclarativeChart"), exports);

package/lib-commonjs/VegaDeclarativeChart.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../src/VegaDeclarativeChart.ts"],"sourcesContent":["export * from './components/VegaDeclarativeChart';\n"],"names":[],"mappings":";;;;;uBAAc,oCAAoC"}

package/lib-commonjs/components/VegaDeclarativeChart/VegaDeclarativeChart.js ADDED Viewed

@@ -0,0 +1,255 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VegaDeclarativeChart", {
+    enumerable: true,
+    get: function() {
+        return VegaDeclarativeChart;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _VegaLiteSchemaAdapter = require("./VegaLiteSchemaAdapter");
+const _index = require("../Legends/index");
+const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
+const _index1 = require("../LineChart/index");
+const _index2 = require("../VerticalBarChart/index");
+const _index3 = require("../VerticalStackedBarChart/index");
+const _index4 = require("../GroupedVerticalBarChart/index");
+const _index5 = require("../HorizontalBarChartWithAxis/index");
+const _index6 = require("../AreaChart/index");
+const _index7 = require("../ScatterChart/index");
+const _index8 = require("../DonutChart/index");
+const _index9 = require("../HeatMapChart/index");
+const _index10 = require("../PolarChart/index");
+const _VegaDeclarativeChartHooks = require("./VegaDeclarativeChartHooks");
+/**
+ * Check if spec is a horizontal concatenation
+ */ function isHConcatSpec(spec) {
+    return !!spec.hconcat && Array.isArray(spec.hconcat) && spec.hconcat.length > 0;
+}
+/**
+ * Check if spec is a vertical concatenation
+ */ function isVConcatSpec(spec) {
+    return !!spec.vconcat && Array.isArray(spec.vconcat) && spec.vconcat.length > 0;
+}
+/**
+ * Get grid properties for concat specs
+ */ function getVegaConcatGridProperties(spec) {
+    if (isHConcatSpec(spec)) {
+        return {
+            templateRows: 'auto',
+            templateColumns: `repeat(${spec.hconcat.length}, 1fr)`,
+            isHorizontal: true,
+            specs: spec.hconcat
+        };
+    }
+    if (isVConcatSpec(spec)) {
+        return {
+            templateRows: `repeat(${spec.vconcat.length}, auto)`,
+            templateColumns: '1fr',
+            isHorizontal: false,
+            specs: spec.vconcat
+        };
+    }
+    return {
+        templateRows: '1fr',
+        templateColumns: '1fr',
+        isHorizontal: false,
+        specs: [
+            spec
+        ]
+    };
+}
+const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.LineChart);
+const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.VerticalBarChart);
+const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index3.VerticalStackedBarChart);
+const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index4.GroupedVerticalBarChart);
+const ResponsiveHorizontalBarChartWithAxis = (0, _withResponsiveContainer.withResponsiveContainer)(_index5.HorizontalBarChartWithAxis);
+const ResponsiveAreaChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index6.AreaChart);
+const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index7.ScatterChart);
+const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.DonutChart);
+const ResponsiveHeatMapChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.HeatMapChart);
+const ResponsivePolarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.PolarChart);
+const vegaChartMap = {
+    line: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToLineChartProps,
+        renderer: ResponsiveLineChart
+    },
+    bar: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToVerticalBarChartProps,
+        renderer: ResponsiveVerticalBarChart
+    },
+    'stacked-bar': {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToVerticalStackedBarChartProps,
+        renderer: ResponsiveVerticalStackedBarChart
+    },
+    'grouped-bar': {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToGroupedVerticalBarChartProps,
+        renderer: ResponsiveGroupedVerticalBarChart
+    },
+    'horizontal-bar': {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToHorizontalBarChartProps,
+        renderer: ResponsiveHorizontalBarChartWithAxis
+    },
+    area: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToAreaChartProps,
+        renderer: ResponsiveAreaChart
+    },
+    scatter: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToScatterChartProps,
+        renderer: ResponsiveScatterChart
+    },
+    donut: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToDonutChartProps,
+        renderer: ResponsiveDonutChart
+    },
+    heatmap: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToHeatMapChartProps,
+        renderer: ResponsiveHeatMapChart
+    },
+    histogram: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToHistogramProps,
+        renderer: ResponsiveVerticalBarChart
+    },
+    polar: {
+        transformer: _VegaLiteSchemaAdapter.transformVegaLiteToPolarChartProps,
+        renderer: ResponsivePolarChart
+    }
+};
+/**
+ * Renders a single Vega-Lite chart spec
+ */ function renderSingleChart(spec, colorMap, isDarkTheme, interactiveCommonProps) {
+    const chartType = (0, _VegaLiteSchemaAdapter.getChartType)(spec);
+    const chartConfig = vegaChartMap[chartType.type];
+    if (!chartConfig) {
+        throw new Error(`VegaDeclarativeChart: Unsupported chart type '${chartType.type}'`);
+    }
+    const { transformer, renderer: ChartRenderer } = chartConfig;
+    const chartProps = transformer(spec, colorMap, isDarkTheme);
+    // For hconcat/vconcat sub-charts, hide per-chart legends (shared legend rendered separately)
+    if (spec._hideLegend) {
+        chartProps.hideLegend = true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return /*#__PURE__*/ _react.createElement(ChartRenderer, {
+        ...chartProps,
+        ...interactiveCommonProps
+    });
+}
+const VegaDeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    const { vegaLiteSpec, selectedLegends = [] } = props.chartSchema;
+    if (!vegaLiteSpec) {
+        throw new Error('VegaDeclarativeChart: vegaLiteSpec is required in chartSchema');
+    }
+    const colorMap = (0, _VegaDeclarativeChartHooks.useColorMapping)();
+    const isDarkTheme = (0, _VegaDeclarativeChartHooks.useIsDarkTheme)();
+    const chartRef = _react.useRef(null);
+    const [activeLegends, setActiveLegends] = _react.useState(selectedLegends);
+    const onActiveLegendsChange = (keys)=>{
+        setActiveLegends(keys);
+        if (props.onSchemaChange) {
+            props.onSchemaChange({
+                vegaLiteSpec,
+                selectedLegends: keys
+            });
+        }
+    };
+    _react.useEffect(()=>{
+        var _props_chartSchema_selectedLegends;
+        setActiveLegends((_props_chartSchema_selectedLegends = props.chartSchema.selectedLegends) !== null && _props_chartSchema_selectedLegends !== void 0 ? _props_chartSchema_selectedLegends : []);
+    }, [
+        props.chartSchema.selectedLegends
+    ]);
+    const multiSelectLegendProps = {
+        canSelectMultipleLegends: true,
+        onChange: onActiveLegendsChange,
+        selectedLegends: activeLegends
+    };
+    const interactiveCommonProps = {
+        componentRef: chartRef,
+        legendProps: multiSelectLegendProps
+    };
+    try {
+        // Check if this is a concat spec (multiple charts side-by-side or stacked)
+        if (isHConcatSpec(vegaLiteSpec) || isVConcatSpec(vegaLiteSpec)) {
+            const gridProps = getVegaConcatGridProperties(vegaLiteSpec);
+            // Build shared legend from the first sub-chart's color encoding
+            const firstSubSpec = {
+                ...gridProps.specs[0],
+                data: gridProps.specs[0].data || vegaLiteSpec.data,
+                encoding: {
+                    ...vegaLiteSpec.encoding || {},
+                    ...gridProps.specs[0].encoding || {}
+                }
+            };
+            const sharedLegendProps = (0, _VegaLiteSchemaAdapter.getVegaLiteLegendsProps)(firstSubSpec, colorMap, isDarkTheme);
+            return /*#__PURE__*/ _react.createElement("div", {
+                ref: forwardedRef,
+                className: props.className,
+                style: props.style
+            }, /*#__PURE__*/ _react.createElement("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateRows: gridProps.templateRows,
+                    gridTemplateColumns: gridProps.templateColumns,
+                    gap: '16px'
+                }
+            }, gridProps.specs.map((subSpec, index)=>{
+                // Compute default height for sub-charts
+                const defaultSubHeight = typeof vegaLiteSpec.height === 'number' ? vegaLiteSpec.height : typeof subSpec.height === 'number' ? subSpec.height : 300;
+                const mergedSpec = {
+                    ...subSpec,
+                    data: subSpec.data || vegaLiteSpec.data,
+                    encoding: {
+                        ...vegaLiteSpec.encoding || {},
+                        ...subSpec.encoding || {}
+                    },
+                    height: typeof subSpec.height === 'number' ? subSpec.height : defaultSubHeight,
+                    // Hide legends on ALL sub-charts — shared legend is rendered below
+                    _hideLegend: true
+                };
+                const cellRow = gridProps.isHorizontal ? 1 : index + 1;
+                const cellColumn = gridProps.isHorizontal ? index + 1 : 1;
+                return /*#__PURE__*/ _react.createElement("div", {
+                    key: `chart_${index}`,
+                    style: {
+                        gridRowStart: cellRow,
+                        gridRowEnd: cellRow + 1,
+                        gridColumnStart: cellColumn,
+                        gridColumnEnd: cellColumn + 1,
+                        minWidth: 0
+                    }
+                }, renderSingleChart(mergedSpec, colorMap, isDarkTheme, interactiveCommonProps));
+            })), sharedLegendProps.legends.length > 0 && /*#__PURE__*/ _react.createElement(_index.Legends, {
+                ...sharedLegendProps,
+                ...multiSelectLegendProps
+            }));
+        }
+        // Check if this is a layered spec (composite chart)
+        if (vegaLiteSpec.layer && vegaLiteSpec.layer.length > 1) {
+            // Check if it's a supported bar+line combo
+            const marks = vegaLiteSpec.layer.map((layer)=>(0, _VegaLiteSchemaAdapter.getMarkType)(layer.mark));
+            const hasBar = marks.includes('bar');
+            const hasLine = marks.includes('line') || marks.includes('point');
+            const isBarLineCombo = hasBar && hasLine;
+            // Only warn for unsupported layered specs
+            if (!isBarLineCombo) {
+            // Layered specifications with multiple chart types are not fully supported.
+            // Only the first layer will be rendered.
+            }
+        }
+        // Render single chart
+        const chartComponent = renderSingleChart(vegaLiteSpec, colorMap, isDarkTheme, interactiveCommonProps);
+        return /*#__PURE__*/ _react.createElement("div", {
+            ref: forwardedRef,
+            className: props.className,
+            style: props.style
+        }, chartComponent);
+    } catch (error) {
+        throw new Error(`Failed to transform Vega-Lite spec: ${error}`);
+    }
+});
+VegaDeclarativeChart.displayName = 'VegaDeclarativeChart';

package/lib-commonjs/components/VegaDeclarativeChart/VegaDeclarativeChart.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n transformVegaLiteToLineChartProps,\n transformVegaLiteToVerticalBarChartProps,\n transformVegaLiteToVerticalStackedBarChartProps,\n transformVegaLiteToGroupedVerticalBarChartProps,\n transformVegaLiteToHorizontalBarChartProps,\n transformVegaLiteToAreaChartProps,\n transformVegaLiteToScatterChartProps,\n transformVegaLiteToDonutChartProps,\n transformVegaLiteToHeatMapChartProps,\n transformVegaLiteToHistogramProps,\n transformVegaLiteToPolarChartProps,\n getChartType,\n getMarkType,\n getVegaLiteLegendsProps,\n} from './VegaLiteSchemaAdapter';\nimport type { VegaLiteUnitSpec, VegaLiteSpec } from './VegaLiteTypes';\nimport { Legends } from '../Legends/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { LineChart } from '../LineChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { DonutChart } from '../DonutChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { PolarChart } from '../PolarChart/index';\nimport { useIsDarkTheme, useColorMapping } from './VegaDeclarativeChartHooks';\nimport type { Chart } from '../../types/index';\n\n// Re-export the typed VegaLiteSpec for public API\nexport type { VegaLiteSpec } from './VegaLiteTypes';\n\n/**\n * Schema for VegaDeclarativeChart component\n */\nexport interface VegaSchema {\n /**\n * Vega-Lite specification\n *\n * @see https://vega.github.io/vega-lite/docs/spec.html\n */\n vegaLiteSpec: VegaLiteSpec;\n\n /**\n * Selected legends for filtering\n */\n selectedLegends?: string[];\n}\n\n/**\n * Props for VegaDeclarativeChart component\n */\nexport interface VegaDeclarativeChartProps {\n /**\n * Vega-Lite chart schema\n */\n chartSchema: VegaSchema;\n\n /**\n * Callback when schema changes (e.g., legend selection)\n */\n onSchemaChange?: (newSchema: VegaSchema) => void;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: React.CSSProperties;\n}\n\n/**\n * Check if spec is a horizontal concatenation\n */\nfunction isHConcatSpec(spec: VegaLiteSpec): boolean {\n return !!spec.hconcat && Array.isArray(spec.hconcat) && spec.hconcat.length > 0;\n}\n\n/**\n * Check if spec is a vertical concatenation\n */\nfunction isVConcatSpec(spec: VegaLiteSpec): boolean {\n return !!spec.vconcat && Array.isArray(spec.vconcat) && spec.vconcat.length > 0;\n}\n\n/**\n * Get grid properties for concat specs\n */\nfunction getVegaConcatGridProperties(spec: VegaLiteSpec): {\n templateRows: string;\n templateColumns: string;\n isHorizontal: boolean;\n specs: VegaLiteSpec[];\n} {\n if (isHConcatSpec(spec)) {\n return {\n templateRows: 'auto',\n templateColumns: `repeat(${spec.hconcat!.length}, 1fr)`,\n isHorizontal: true,\n specs: spec.hconcat!,\n };\n }\n\n if (isVConcatSpec(spec)) {\n return {\n templateRows: `repeat(${spec.vconcat!.length}, auto)`,\n templateColumns: '1fr',\n isHorizontal: false,\n specs: spec.vconcat!,\n };\n }\n\n return {\n templateRows: '1fr',\n templateColumns: '1fr',\n isHorizontal: false,\n specs: [spec],\n };\n}\n\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsivePolarChart = withResponsiveContainer(PolarChart);\n\n/**\n * Chart type mapping with transformers and renderers\n * Follows the factory functor pattern from PlotlyDeclarativeChart\n */\ntype VegaChartTypeMap = {\n line: { transformer: typeof transformVegaLiteToLineChartProps; renderer: typeof ResponsiveLineChart };\n bar: { transformer: typeof transformVegaLiteToVerticalBarChartProps; renderer: typeof ResponsiveVerticalBarChart };\n 'stacked-bar': {\n transformer: typeof transformVegaLiteToVerticalStackedBarChartProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n };\n 'grouped-bar': {\n transformer: typeof transformVegaLiteToGroupedVerticalBarChartProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n };\n 'horizontal-bar': {\n transformer: typeof transformVegaLiteToHorizontalBarChartProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n };\n area: { transformer: typeof transformVegaLiteToAreaChartProps; renderer: typeof ResponsiveAreaChart };\n scatter: { transformer: typeof transformVegaLiteToScatterChartProps; renderer: typeof ResponsiveScatterChart };\n donut: { transformer: typeof transformVegaLiteToDonutChartProps; renderer: typeof ResponsiveDonutChart };\n heatmap: { transformer: typeof transformVegaLiteToHeatMapChartProps; renderer: typeof ResponsiveHeatMapChart };\n histogram: { transformer: typeof transformVegaLiteToHistogramProps; renderer: typeof ResponsiveVerticalBarChart };\n polar: { transformer: typeof transformVegaLiteToPolarChartProps; renderer: typeof ResponsivePolarChart };\n};\n\nconst vegaChartMap: VegaChartTypeMap = {\n line: { transformer: transformVegaLiteToLineChartProps, renderer: ResponsiveLineChart },\n bar: { transformer: transformVegaLiteToVerticalBarChartProps, renderer: ResponsiveVerticalBarChart },\n 'stacked-bar': {\n transformer: transformVegaLiteToVerticalStackedBarChartProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n 'grouped-bar': {\n transformer: transformVegaLiteToGroupedVerticalBarChartProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n 'horizontal-bar': {\n transformer: transformVegaLiteToHorizontalBarChartProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n area: { transformer: transformVegaLiteToAreaChartProps, renderer: ResponsiveAreaChart },\n scatter: { transformer: transformVegaLiteToScatterChartProps, renderer: ResponsiveScatterChart },\n donut: { transformer: transformVegaLiteToDonutChartProps, renderer: ResponsiveDonutChart },\n heatmap: { transformer: transformVegaLiteToHeatMapChartProps, renderer: ResponsiveHeatMapChart },\n histogram: { transformer: transformVegaLiteToHistogramProps, renderer: ResponsiveVerticalBarChart },\n polar: { transformer: transformVegaLiteToPolarChartProps, renderer: ResponsivePolarChart },\n};\n\ninterface MultiSelectLegendProps {\n canSelectMultipleLegends: boolean;\n onChange: (keys: string[]) => void;\n selectedLegends: string[];\n}\n\n/**\n * Renders a single Vega-Lite chart spec\n */\nfunction renderSingleChart(\n spec: VegaLiteSpec,\n colorMap: React.RefObject<Map<string, string>>,\n isDarkTheme: boolean,\n interactiveCommonProps: { componentRef: React.RefObject<Chart | null>; legendProps: MultiSelectLegendProps },\n): React.ReactElement {\n const chartType = getChartType(spec);\n const chartConfig = vegaChartMap[chartType.type];\n\n if (!chartConfig) {\n throw new Error(`VegaDeclarativeChart: Unsupported chart type '${chartType.type}'`);\n }\n\n const { transformer, renderer: ChartRenderer } = chartConfig;\n const chartProps = transformer(spec, colorMap, isDarkTheme) as Record<string, unknown>;\n\n // For hconcat/vconcat sub-charts, hide per-chart legends (shared legend rendered separately)\n if ((spec as Record<string, unknown>)._hideLegend) {\n chartProps.hideLegend = true;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return <ChartRenderer {...(chartProps as any)} {...interactiveCommonProps} />;\n}\n\n/**\n * VegaDeclarativeChart - Render Vega-Lite specifications with Fluent UI styling\n *\n * Supported chart types:\n * - Line charts: mark: 'line' or 'point'\n * - Area charts: mark: 'area'\n * - Scatter charts: mark: 'point', 'circle', or 'square'\n * - Vertical bar charts: mark: 'bar' with nominal/ordinal x-axis\n * - Stacked bar charts: mark: 'bar' with color encoding\n * - Grouped bar charts: mark: 'bar' with color encoding (via configuration)\n * - Horizontal bar charts: mark: 'bar' with nominal/ordinal y-axis\n * - Donut/Pie charts: mark: 'arc' with theta encoding\n * - Heatmaps: mark: 'rect' with x, y, and color (quantitative) encodings\n * - Combo charts: Layered specs with bar + line marks render as VerticalStackedBarChart with line overlays\n *\n * Multi-plot Support:\n * - Horizontal concatenation (hconcat): Multiple charts side-by-side\n * - Vertical concatenation (vconcat): Multiple charts stacked vertically\n * - Shared data and encoding are merged from parent spec to each subplot\n *\n * Limitations:\n * - Most layered specifications (multiple chart types) are not fully supported\n * - Bar + Line combinations ARE supported and will render properly\n * - For other composite charts, only the first layer will be rendered\n * - Faceting and repeat operators are not yet supported\n * - Funnel charts are not a native Vega-Lite mark type. The conversion_funnel.json example\n * uses a horizontal bar chart (y: nominal, x: quantitative) which is the standard way to\n * represent funnel data in Vega-Lite. For specialized funnel visualizations with tapering\n * shapes, consider using Plotly's native funnel chart type instead.\n *\n * Note: Sankey, Gantt, and Gauge charts are not standard Vega-Lite marks.\n * These specialized visualizations would require custom extensions or alternative approaches.\n *\n * @example Line Chart\n * ```tsx\n * import { VegaDeclarativeChart } from '@fluentui/react-charts';\n *\n * const spec = {\n * mark: 'line',\n * data: { values: [{ x: 1, y: 10 }, { x: 2, y: 20 }] },\n * encoding: {\n * x: { field: 'x', type: 'quantitative' },\n * y: { field: 'y', type: 'quantitative' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: spec }} />\n * ```\n *\n * @example Area Chart\n * ```tsx\n * const areaSpec = {\n * mark: 'area',\n * data: { values: [{ date: '2023-01', value: 100 }, { date: '2023-02', value: 150 }] },\n * encoding: {\n * x: { field: 'date', type: 'temporal' },\n * y: { field: 'value', type: 'quantitative' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: areaSpec }} />\n * ```\n *\n * @example Scatter Chart\n * ```tsx\n * const scatterSpec = {\n * mark: 'point',\n * data: { values: [{ x: 10, y: 20, size: 100 }, { x: 15, y: 30, size: 200 }] },\n * encoding: {\n * x: { field: 'x', type: 'quantitative' },\n * y: { field: 'y', type: 'quantitative' },\n * size: { field: 'size', type: 'quantitative' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: scatterSpec }} />\n * ```\n *\n * @example Vertical Bar Chart\n * ```tsx\n * const barSpec = {\n * mark: 'bar',\n * data: { values: [{ cat: 'A', val: 28 }, { cat: 'B', val: 55 }] },\n * encoding: {\n * x: { field: 'cat', type: 'nominal' },\n * y: { field: 'val', type: 'quantitative' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: barSpec }} />\n * ```\n *\n * @example Stacked Bar Chart\n * ```tsx\n * const stackedSpec = {\n * mark: 'bar',\n * data: { values: [\n * { cat: 'A', group: 'G1', val: 28 },\n * { cat: 'A', group: 'G2', val: 15 }\n * ]},\n * encoding: {\n * x: { field: 'cat', type: 'nominal' },\n * y: { field: 'val', type: 'quantitative' },\n * color: { field: 'group', type: 'nominal' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: stackedSpec }} />\n * ```\n *\n * @example Donut Chart\n * ```tsx\n * const donutSpec = {\n * mark: 'arc',\n * data: { values: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }] },\n * encoding: {\n * theta: { field: 'value', type: 'quantitative' },\n * color: { field: 'category', type: 'nominal' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: donutSpec }} />\n * ```\n *\n * @example Heatmap\n * ```tsx\n * const heatmapSpec = {\n * mark: 'rect',\n * data: { values: [\n * { x: 'A', y: 'Mon', value: 28 },\n * { x: 'B', y: 'Mon', value: 55 },\n * { x: 'A', y: 'Tue', value: 43 }\n * ]},\n * encoding: {\n * x: { field: 'x', type: 'nominal' },\n * y: { field: 'y', type: 'nominal' },\n * color: { field: 'value', type: 'quantitative' }\n * }\n * };\n *\n * <VegaDeclarativeChart chartSchema={{ vegaLiteSpec: heatmapSpec }} />\n * ```\n */\nexport const VegaDeclarativeChart = React.forwardRef<HTMLDivElement, VegaDeclarativeChartProps>(\n (props, forwardedRef) => {\n const { vegaLiteSpec, selectedLegends = [] } = props.chartSchema;\n\n if (!vegaLiteSpec) {\n throw new Error('VegaDeclarativeChart: vegaLiteSpec is required in chartSchema');\n }\n\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ vegaLiteSpec, selectedLegends: keys });\n }\n };\n\n React.useEffect(() => {\n setActiveLegends(props.chartSchema.selectedLegends ?? []);\n }, [props.chartSchema.selectedLegends]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const interactiveCommonProps = {\n componentRef: chartRef,\n legendProps: multiSelectLegendProps,\n };\n\n try {\n // Check if this is a concat spec (multiple charts side-by-side or stacked)\n if (isHConcatSpec(vegaLiteSpec) || isVConcatSpec(vegaLiteSpec)) {\n const gridProps = getVegaConcatGridProperties(vegaLiteSpec);\n\n // Build shared legend from the first sub-chart's color encoding\n const firstSubSpec = {\n ...gridProps.specs[0],\n data: gridProps.specs[0].data || vegaLiteSpec.data,\n encoding: {\n ...(vegaLiteSpec.encoding || {}),\n ...(gridProps.specs[0].encoding || {}),\n },\n };\n const sharedLegendProps = getVegaLiteLegendsProps(firstSubSpec, colorMap, isDarkTheme);\n\n return (\n <div ref={forwardedRef} className={props.className} style={props.style}>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProps.templateRows,\n gridTemplateColumns: gridProps.templateColumns,\n gap: '16px',\n }}\n >\n {gridProps.specs.map((subSpec: VegaLiteSpec, index: number) => {\n // Compute default height for sub-charts\n const defaultSubHeight =\n typeof vegaLiteSpec.height === 'number'\n ? vegaLiteSpec.height\n : typeof subSpec.height === 'number'\n ? subSpec.height\n : 300;\n\n const mergedSpec = {\n ...subSpec,\n data: subSpec.data || vegaLiteSpec.data,\n encoding: {\n ...(vegaLiteSpec.encoding || {}),\n ...(subSpec.encoding || {}),\n },\n height: typeof subSpec.height === 'number' ? subSpec.height : defaultSubHeight,\n // Hide legends on ALL sub-charts — shared legend is rendered below\n _hideLegend: true,\n };\n\n const cellRow = gridProps.isHorizontal ? 1 : index + 1;\n const cellColumn = gridProps.isHorizontal ? index + 1 : 1;\n\n return (\n <div\n key={`chart_${index}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n minWidth: 0,\n }}\n >\n {renderSingleChart(mergedSpec, colorMap, isDarkTheme, interactiveCommonProps)}\n </div>\n );\n })}\n </div>\n {sharedLegendProps.legends.length > 0 && <Legends {...sharedLegendProps} {...multiSelectLegendProps} />}\n </div>\n );\n }\n\n // Check if this is a layered spec (composite chart)\n if (vegaLiteSpec.layer && vegaLiteSpec.layer.length > 1) {\n // Check if it's a supported bar+line combo\n const marks = vegaLiteSpec.layer.map((layer: VegaLiteUnitSpec) => getMarkType(layer.mark));\n const hasBar = marks.includes('bar');\n const hasLine = marks.includes('line') || marks.includes('point');\n const isBarLineCombo = hasBar && hasLine;\n\n // Only warn for unsupported layered specs\n if (!isBarLineCombo) {\n // Layered specifications with multiple chart types are not fully supported.\n // Only the first layer will be rendered.\n }\n }\n\n // Render single chart\n const chartComponent = renderSingleChart(vegaLiteSpec, colorMap, isDarkTheme, interactiveCommonProps);\n\n return (\n <div ref={forwardedRef} className={props.className} style={props.style}>\n {chartComponent}\n </div>\n );\n } catch (error) {\n throw new Error(`Failed to transform Vega-Lite spec: ${error}`);\n }\n },\n);\n\nVegaDeclarativeChart.displayName = 'VegaDeclarativeChart';\n"],"names":["React","transformVegaLiteToLineChartProps","transformVegaLiteToVerticalBarChartProps","transformVegaLiteToVerticalStackedBarChartProps","transformVegaLiteToGroupedVerticalBarChartProps","transformVegaLiteToHorizontalBarChartProps","transformVegaLiteToAreaChartProps","transformVegaLiteToScatterChartProps","transformVegaLiteToDonutChartProps","transformVegaLiteToHeatMapChartProps","transformVegaLiteToHistogramProps","transformVegaLiteToPolarChartProps","getChartType","getMarkType","getVegaLiteLegendsProps","Legends","withResponsiveContainer","LineChart","VerticalBarChart","VerticalStackedBarChart","GroupedVerticalBarChart","HorizontalBarChartWithAxis","AreaChart","ScatterChart","DonutChart","HeatMapChart","PolarChart","useIsDarkTheme","useColorMapping","isHConcatSpec","spec","hconcat","Array","isArray","length","isVConcatSpec","vconcat","getVegaConcatGridProperties","templateRows","templateColumns","isHorizontal","specs","ResponsiveLineChart","ResponsiveVerticalBarChart","ResponsiveVerticalStackedBarChart","ResponsiveGroupedVerticalBarChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveScatterChart","ResponsiveDonutChart","ResponsiveHeatMapChart","ResponsivePolarChart","vegaChartMap","line","transformer","renderer","bar","area","scatter","donut","heatmap","histogram","polar","renderSingleChart","colorMap","isDarkTheme","interactiveCommonProps","chartType","chartConfig","type","Error","ChartRenderer","chartProps","_hideLegend","hideLegend","VegaDeclarativeChart","forwardRef","props","forwardedRef","vegaLiteSpec","selectedLegends","chartSchema","chartRef","useRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","componentRef","legendProps","gridProps","firstSubSpec","data","encoding","sharedLegendProps","div","ref","className","style","display","gridTemplateRows","gridTemplateColumns","gap","map","subSpec","index","defaultSubHeight","height","mergedSpec","cellRow","cellColumn","key","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","minWidth","legends","layer","marks","mark","hasBar","includes","hasLine","isBarLineCombo","chartComponent","error","displayName"],"mappings":"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"}

package/lib-commonjs/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.js ADDED Viewed

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorMapping: function() {
+        return useColorMapping;
+    },
+    useIsDarkTheme: function() {
+        return useIsDarkTheme;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _tokens = require("@fluentui/tokens");
+const _d3color = require("d3-color");
+function useIsDarkTheme() {
+    const parentV9Theme = _react.useContext(_reactsharedcontexts.ThemeContext_unstable);
+    const v9Theme = parentV9Theme ? parentV9Theme : _tokens.webLightTheme;
+    const backgroundColor = (0, _d3color.hsl)(v9Theme.colorNeutralBackground1);
+    const foregroundColor = (0, _d3color.hsl)(v9Theme.colorNeutralForeground1);
+    const isDarkTheme = backgroundColor.l < foregroundColor.l;
+    return isDarkTheme;
+}
+function useColorMapping() {
+    return _react.useRef(new Map());
+}

package/lib-commonjs/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/VegaDeclarativeChart/VegaDeclarativeChartHooks.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport { hsl as d3Hsl } from 'd3-color';\n\n/**\n * Hook to determine if dark theme is active based on background/foreground luminance\n */\nexport function useIsDarkTheme(): boolean {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n const backgroundColor = d3Hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n}\n\n/**\n * Hook for color mapping across charts - maintains persistent color assignments\n */\nexport function useColorMapping(): React.RefObject<Map<string, string>> {\n return React.useRef<Map<string, string>>(new Map());\n}\n"],"names":["React","ThemeContext_unstable","V9ThemeContext","webLightTheme","hsl","d3Hsl","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","useColorMapping","useRef","Map"],"mappings":"AAAA;;;;;;;;;;;;IAyBgBgB,eAAAA;;;kBAfAV;;;;;iEARO,QAAQ;qCACyB,kCAAkC;wBACrD,mBAAmB;yBAC3B,WAAW;AAKjC,SAASA;IACd,MAAMC,gBAAgBP,OAAMQ,UAAU,CAACN,0CAAAA;IACvC,MAAMO,UAAiBF,gBAAgBA,gBAAgBJ,qBAAAA;IAEvD,MAAMO,sBAAkBL,YAAAA,EAAMI,QAAQE,uBAAuB;IAC7D,MAAMC,sBAAkBP,YAAAA,EAAMI,QAAQI,uBAAuB;IAE7D,MAAMC,cAAcJ,gBAAgBK,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAKO;IACL,OAAOd,OAAMiB,MAAM,CAAsB,IAAIC;AAC/C"}