@fluentui/react-charts 0.0.0-nightly-20260112-0407.1 → 0.0.0-nightly-20260113-0406.1

package/CHANGELOG.md

@@ -1,26 +1,26 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Mon, 12 Jan 2026 04:22:11 GMT and should not be manually modified.
+This log was last generated on Tue, 13 Jan 2026 04:21:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20260112-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20260112-0407.1)
+## [0.0.0-nightly-20260113-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20260113-0406.1)
 
-Mon, 12 Jan 2026 04:22:11 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-20260112-0407.1)
+Tue, 13 Jan 2026 04:21:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-20260113-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20260112-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/aae0428e16522b37ce23e6485e2a897ead44f829) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
 
 ## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.8)
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { CurveFactory } from 'd3-shape';
+import type { Font } from '@fluentui/chart-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { Margin } from '@fluentui/chart-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
@@ -152,6 +153,24 @@ export declare interface AreaChartStyleProps extends CartesianChartStyleProps {
 export declare interface AreaChartStyles extends CartesianChartStyles {
 }
 
+/**
+ * Represents a areapolar series.
+ */
+export declare interface AreaPolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'areapolar' for this series.
+     */
+    type: 'areapolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
 /**
  * Specifies the ordering options for axis categories in Cartesian charts.
  *
@@ -322,6 +341,10 @@ export declare const CartesianChart: React_2.FunctionComponent<ModifiedCartesian
  * {@docCategory CartesianChart}
  */
 export declare interface CartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Below height used for resizing of the chart
      * Wrap chart in your container and send the updated height and width to these props.
@@ -1051,6 +1074,10 @@ export declare const ChartTable: React_2.FunctionComponent<ChartTableProps>;
  * {@docCategory ChartTable}
  */
 export declare interface ChartTableProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * 1d or 2d Array of header values.
      */
@@ -1075,6 +1102,10 @@ export declare interface ChartTableProps {
      * @default '650px'
      */
     height?: string | number;
+    /**
+     * Chart title to display above the table
+     */
+    chartTitle?: string;
     /**
      * Additional class name(s) to apply to the table chart
      */
@@ -1100,6 +1131,8 @@ export declare interface ChartTableStyles {
     headerCell?: string;
     bodyCell?: string;
     chart?: string;
+    chartTitle?: string;
+    svgTooltip?: string;
 }
 
 declare enum ChartTypes {
@@ -1374,6 +1407,10 @@ export declare const DonutChart: React_2.FunctionComponent<DonutChartProps>;
  * {@docCategory DonutChart}
  */
 export declare interface DonutChartProps extends CartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -1494,6 +1531,10 @@ export declare interface DonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
     /**
      * styles for axis annotation
      */
@@ -1502,6 +1543,10 @@ export declare interface DonutChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
 }
 
 export declare interface DPointType {
@@ -1571,6 +1616,10 @@ export declare interface FunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export declare interface FunnelChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data points for the funnel chart
      */
@@ -1655,10 +1704,18 @@ export declare interface FunnelChartStyles {
      * Styles for the chart
      */
     chart?: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
     /**
      * Styles for text elements
      */
     text?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
     /**
      * Styles for the callout root element
      */
@@ -1787,6 +1844,10 @@ export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
  * {@docCategory GaugeChart}
  */
 export declare interface GaugeChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Width of the chart
      */
@@ -3313,6 +3374,24 @@ export declare interface LineDataInVerticalStackedBarChart {
     lineOptions?: LineChartLineOptions;
 }
 
+/**
+ * Represents a linepolar series.
+ */
+export declare interface LinePolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'linepolar' for this series.
+     */
+    type: 'linepolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
 /**
  * Represents a line series.
  */
@@ -3529,6 +3608,223 @@ declare enum Points {
     octagon = 7
 }
 
+/**
+ * Configuration options for a polar axis.
+ * {@docCategory PolarChart}
+ */
+export declare type PolarAxisProps = AxisProps & {
+    /**
+     * Values at which ticks should be placed on the axis.
+     */
+    tickValues?: number[] | Date[] | string[];
+    /**
+     * Format string for the axis ticks.
+     * For numbers, see: https://d3js.org/d3-format.
+     * And for dates see: https://d3js.org/d3-time-format.
+     */
+    tickFormat?: string;
+    /**
+     * Number of ticks to display on the axis.
+     */
+    tickCount?: number;
+    /**
+     * Defines the order of categories on the axis.
+     * @default 'default'
+     */
+    categoryOrder?: AxisCategoryOrder;
+    /**
+     * Scale type for the axis.
+     * @default 'default'
+     */
+    scaleType?: AxisScaleType;
+    /**
+     * Start value of the axis range.
+     */
+    rangeStart?: number | Date;
+    /**
+     * End value of the axis range.
+     */
+    rangeEnd?: number | Date;
+};
+
+export declare const PolarChart: React_2.FunctionComponent<PolarChartProps>;
+
+/**
+ * Polar Chart properties
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartProps {
+    /**
+     * Data series to be rendered in the polar chart.
+     */
+    data: (AreaPolarSeries | LinePolarSeries | ScatterPolarSeries)[];
+    /**
+     * Width of the polar chart.
+     * @default 200
+     */
+    width?: number;
+    /**
+     * Height of the polar chart.
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Margins around the chart area.
+     */
+    margins?: Margins;
+    /**
+     * If true, hides the legend.
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * If true, hides the tooltip.
+     * @default false
+     */
+    hideTooltip?: boolean;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Style properties for the polar chart.
+     */
+    styles?: PolarChartStyles;
+    /**
+     * Title of the chart.
+     */
+    chartTitle?: string;
+    /**
+     * Fraction of the radius to cut out from the center of the chart.
+     * Accepts values in the range [0, 1].
+     */
+    hole?: number;
+    /**
+     * Shape of the polar chart.
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'polygon';
+    /**
+     * Direction in which the chart is drawn.
+     * @default 'counterclockwise'
+     */
+    direction?: 'clockwise' | 'counterclockwise';
+    /**
+     * Configuration options for the radial axis.
+     */
+    radialAxis?: PolarAxisProps;
+    /**
+     * Configuration options for the angular axis.
+     */
+    angularAxis?: PolarAxisProps & {
+        /**
+         * Format unit for angular values.
+         * @default 'degrees'
+         */
+        unit?: 'radians' | 'degrees';
+    };
+    /**
+     * Optional callback to access the Chart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.Ref<Chart>;
+    /**
+     * Locale identifier string used to format numbers and dates according to the specified culture.
+     * Example: 'en-US', 'fr-FR'.
+     */
+    culture?: string;
+    /**
+     * Options for localizing date values.
+     */
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * If true, date values are treated as UTC dates.
+     * @default false
+     */
+    useUTC?: boolean;
+}
+
+/**
+ * Polar Chart style properties
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartStyleProps {
+}
+
+/**
+ * Polar Chart styles
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartStyles {
+    /**
+     * Style for the root element.
+     */
+    root?: string;
+    /**
+     * Style for the chart wrapper element.
+     */
+    chartWrapper?: string;
+    /**
+     * Style for the chart element.
+     */
+    chart?: string;
+    /**
+     * Style for the inner grid lines.
+     */
+    gridLineInner?: string;
+    /**
+     * Style for the outer grid lines.
+     */
+    gridLineOuter?: string;
+    /**
+     * Style for the tick labels.
+     */
+    tickLabel?: string;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer?: string;
+}
+
+/**
+ * Represents a single data point in a polar series.
+ */
+export declare interface PolarDataPoint {
+    /**
+     * Radial value of the data point.
+     */
+    r: string | number | Date;
+    /**
+     * Angular value of the data point, specified as a category or in degrees.
+     */
+    theta: string | number;
+    /**
+     * Optional click handler for the data point.
+     */
+    onClick?: () => void;
+    /**
+     * Custom text to show in the callout in place of the radial axis value.
+     */
+    radialAxisCalloutData?: string;
+    /**
+     * Custom text to show in the callout in place of the angular axis value.
+     */
+    angularAxisCalloutData?: string;
+    /**
+     * Accessibility properties for the data point.
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * Custom marker size for the data point.
+     */
+    markerSize?: number;
+    /**
+     * Optional text to annotate or label the data point.
+     */
+    text?: string;
+    /**
+     * Color of the data point. If not provided, it will inherit the series color.
+     */
+    color?: string;
+}
+
 export declare interface PopoverComponentStyles {
     calloutContentRoot: string;
     calloutDateTimeContainer: string;
@@ -3676,6 +3972,10 @@ export declare interface SankeyChartData {
  * {@docCategory SankeyChart}
  */
 export declare interface SankeyChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -3746,6 +4046,11 @@ export declare interface SankeyChartProps {
      * The prop used to define the culture to localize the numbers and date
      */
     culture?: string;
+    /**
+     * Whether to hide the legend
+     * @default false
+     */
+    hideLegend?: boolean;
     /**
      * Props related to reflow behavior of the chart
      */
@@ -3803,6 +4108,14 @@ export declare interface SankeyChartStyles {
      * Styles for the chart svg element
      */
     chart?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
 }
 
 declare type SankeyLayoutGenerator = SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
@@ -3929,6 +4242,20 @@ export declare interface ScatterChartStyles extends CartesianChartStyles {
     markerLabel?: string;
 }
 
+/**
+ * Represents a scatterpolar series.
+ */
+export declare interface ScatterPolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'scatterpolar' for this series.
+     */
+    type: 'scatterpolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+}
+
 /**
  * DeclarativeChart schema.
  * {@docCategory DeclarativeChart}
@@ -4061,6 +4388,35 @@ declare interface TextboxProps {
     fill?: string;
 }
 
+/**
+ * Shared interface for chart title styling properties.
+ * Used by components that display a chart title with customizable font, alignment, and padding.
+ * {@docCategory TitleStyles}
+ */
+declare interface TitleStyles {
+    /**
+     * Font configuration for the title
+     */
+    titleFont?: Partial<Font>;
+    /**
+     * Horizontal anchor/alignment for the chart title
+     */
+    titleXAnchor?: 'auto' | 'left' | 'center' | 'right';
+    /**
+     * Vertical anchor/alignment for the chart title
+     */
+    titleYAnchor?: 'auto' | 'top' | 'middle' | 'bottom';
+    /**
+     * Padding for the chart title
+     */
+    titlePad?: {
+        t?: number;
+        r?: number;
+        b?: number;
+        l?: number;
+    };
+}
+
 /**
  * VerticalBarchart component
  * {@docCategory VerticalBarChart}

package/lib/PolarChart.js

@@ -0,0 +1 @@
+export * from './components/PolarChart/index';

package/lib/PolarChart.js.map

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

package/lib/components/ChartTable/ChartTable.js

@@ -5,6 +5,7 @@ import { tokens } from '@fluentui/react-theme';
 import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
 import { resolveCSSVariables } from '../../utilities/utilities';
+import { ChartTitle } from '../../utilities/index';
 import { useImageExport } from '../../utilities/hooks';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 function invertHexColor(hex) {
@@ -37,7 +38,7 @@ function getSafeBackgroundColor(chartContainer, foreground, background) {
     return invertedContrast >= 3 ? invertedBg : fallbackBg;
 }
 export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    const { headers, rows, width, height } = props;
+    const { headers, rows, width, height, chartTitle } = props;
     const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);
     const classes = useChartTableStyles(props);
     const arrowAttributes = useArrowNavigationGroup({
@@ -78,23 +79,36 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
             }
         }
     }
+    const titleHeight = chartTitle ? 30 : 0;
+    const totalHeight = typeof height === 'number' ? height : 650;
+    const tableHeight = `${totalHeight - titleHeight}px`;
+    const svgWidth = typeof width === 'number' ? width : '100%';
+    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;
+    const titleX = typeof width === 'number' ? width / 2 : 0;
     return /*#__PURE__*/ React.createElement("div", {
         ref: (el)=>{
             _rootElem.current = el;
         },
         className: classes.root,
         style: {
-            height: height ? `${height}px` : '650px',
+            height: `${totalHeight}px`,
             overflow: 'hidden'
         }
     }, /*#__PURE__*/ React.createElement("svg", {
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : '650px'
-    }, /*#__PURE__*/ React.createElement("foreignObject", {
+        width: svgWidth,
+        height: `${totalHeight}px`
+    }, chartTitle && /*#__PURE__*/ React.createElement(ChartTitle, {
+        title: chartTitle,
+        x: titleX,
+        maxWidth: titleMaxWidth,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ React.createElement("foreignObject", {
         x: "0",
-        y: "0",
+        y: titleHeight,
         width: "100%",
-        height: "100%"
+        height: tableHeight
     }, /*#__PURE__*/ React.createElement("div", {
         style: {
             maxHeight: height ? `${height}px` : '650px',

package/lib/components/ChartTable/ChartTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { useImageExport } from '../../utilities/hooks';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n  if (!chartContainer) {\n    return fallbackBg;\n  }\n\n  const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n  const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n  const fg = d3.color(resolvedFg);\n  const bg = d3.color(resolvedBg);\n\n  if (!fg || !bg) {\n    return resolvedBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height } = props;\n    const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n    const classes = useChartTableStyles(props);\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\n    }\n\n    return (\n      <div\n        ref={el => {\n          _rootElem.current = el;\n        }}\n        className={classes.root as string}\n        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n      >\n        <svg width={width ?? '100%'} height={height ?? '650px'}>\n          <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                }}\n                {...arrowAttributes}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => {\n                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","useImageExport","useArrowNavigationGroup","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartContainerRef","_rootElem","componentRef","classes","arrowAttributes","axis","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","current","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\nimport { ChartTitle } from '../../utilities/index';\nimport { useImageExport } from '../../utilities/hooks';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n  if (!chartContainer) {\n    return fallbackBg;\n  }\n\n  const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n  const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n  const fg = d3.color(resolvedFg);\n  const bg = d3.color(resolvedBg);\n\n  if (!fg || !bg) {\n    return resolvedBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height, chartTitle } = props;\n    const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);\n    const classes = useChartTableStyles(props);\n    const arrowAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\n    }\n\n    const titleHeight = chartTitle ? 30 : 0;\n    const totalHeight = typeof height === 'number' ? height : 650;\n    const tableHeight = `${totalHeight - titleHeight}px`;\n    const svgWidth = typeof width === 'number' ? width : '100%';\n    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;\n    const titleX = typeof width === 'number' ? width / 2 : 0;\n\n    return (\n      <div\n        ref={el => {\n          _rootElem.current = el;\n        }}\n        className={classes.root as string}\n        style={{ height: `${totalHeight}px`, overflow: 'hidden' }}\n      >\n        <svg width={svgWidth} height={`${totalHeight}px`}>\n          {chartTitle && (\n            <ChartTitle\n              title={chartTitle}\n              x={titleX}\n              maxWidth={titleMaxWidth}\n              className={classes.chartTitle}\n              titleStyles={props.titleStyles}\n              tooltipClassName={classes.svgTooltip}\n            />\n          )}\n          <foreignObject x=\"0\" y={titleHeight} width=\"100%\" height={tableHeight}>\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                }}\n                {...arrowAttributes}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => {\n                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","tokens","d3","getColorContrast","resolveCSSVariables","ChartTitle","useImageExport","useArrowNavigationGroup","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","chartTitle","chartContainerRef","_rootElem","componentRef","classes","arrowAttributes","axis","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","titleHeight","totalHeight","tableHeight","svgWidth","titleMaxWidth","undefined","titleX","ref","el","current","className","root","overflow","svg","title","x","maxWidth","titleStyles","tooltipClassName","svgTooltip","foreignObject","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}

package/lib/components/ChartTable/ChartTable.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Chart } from './index';\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface ChartTableProps {\n  /**\n   * 1d or 2d Array of header values.\n   */\n  headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n  /**\n   * Array of rows. Each row corresponds to one data entry under each column.\n   */\n  rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n  /**\n   * Optional width for the table\n   * @default '100%'\n   */\n  width?: string | number;\n\n  /**\n   * Optional height for the table\n   * @default '650px'\n   */\n  height?: string | number;\n\n  /**\n   * Additional class name(s) to apply to the table chart\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ChartTableStyles;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n  root?: string | React.CSSProperties;\n  table?: string;\n  headerCell?: string;\n  bodyCell?: string;\n  chart?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TitleStyles } from '../../utilities/Common.styles';\nimport { Chart } from './index';\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface ChartTableProps {\n  /**\n   * Title styles configuration for the chart title\n   */\n  titleStyles?: TitleStyles;\n\n  /**\n   * 1d or 2d Array of header values.\n   */\n  headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n  /**\n   * Array of rows. Each row corresponds to one data entry under each column.\n   */\n  rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n  /**\n   * Optional width for the table\n   * @default '100%'\n   */\n  width?: string | number;\n\n  /**\n   * Optional height for the table\n   * @default '650px'\n   */\n  height?: string | number;\n\n  /**\n   * Chart title to display above the table\n   */\n  chartTitle?: string;\n\n  /**\n   * Additional class name(s) to apply to the table chart\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ChartTableStyles;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n  root?: string | React.CSSProperties;\n  table?: string;\n  headerCell?: string;\n  bodyCell?: string;\n  chart?: string;\n  chartTitle?: string;\n  svgTooltip?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}