@fluentui/react-charts 0.0.0-nightly-20251014-0406.1 → 0.0.0-nightly-20251015-0406.1
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.
- package/CHANGELOG.md +15 -15
- package/dist/index.d.ts +7 -0
- package/lib/components/DeclarativeChart/DeclarativeChart.js +15 -5
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +63 -18
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +78 -70
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.js +7 -2
- package/lib/components/DonutChart/DonutChart.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +15 -5
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +65 -18
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +78 -70
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js +7 -2
- package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
- package/package.json +12 -12
|
@@ -95,6 +95,11 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
95
95
|
return elevatedData;
|
|
96
96
|
}
|
|
97
97
|
function _createLegends(chartData) {
|
|
98
|
+
if (props.order === 'sorted') {
|
|
99
|
+
chartData.sort((a, b)=>{
|
|
100
|
+
return b.data - a.data;
|
|
101
|
+
});
|
|
102
|
+
}
|
|
98
103
|
const legendDataItems = chartData.map((point, index)=>{
|
|
99
104
|
const color = point.color;
|
|
100
105
|
// mapping data to the format Legends component needs
|
|
@@ -250,11 +255,11 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
250
255
|
const { data, hideLegend = false } = props;
|
|
251
256
|
const points = _addDefaultColors(data === null || data === void 0 ? void 0 : data.chartData);
|
|
252
257
|
const classes = (0, _useDonutChartStylesstyles.useDonutChartStyles)(props);
|
|
253
|
-
const legendBars = _createLegends(points);
|
|
258
|
+
const legendBars = _createLegends(points.filter((d)=>d.data >= 0));
|
|
254
259
|
const donutMarginHorizontal = props.hideLabels ? 0 : 80;
|
|
255
260
|
const donutMarginVertical = props.hideLabels ? 0 : 40;
|
|
256
261
|
const outerRadius = Math.min(_width - donutMarginHorizontal, _height - donutMarginVertical) / 2;
|
|
257
|
-
const chartData = _elevateToMinimums(points
|
|
262
|
+
const chartData = _elevateToMinimums(points);
|
|
258
263
|
const valueInsideDonut = props.innerRadius > _index1.MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut, chartData) : '';
|
|
259
264
|
const focusAttributes = (0, _reacttabster.useFocusableGroup)();
|
|
260
265
|
return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n (props, forwardedRef) => {\n const _rootElem = React.useRef<HTMLDivElement | null>(null);\n const _uniqText: string = useId('_Pie_');\n /* eslint-disable @typescript-eslint/no-explicit-any */\n let _calloutAnchorPoint: ChartDataPoint | null;\n let _emptyChartId: string | null;\n const legendContainer = React.useRef<HTMLDivElement | null>(null);\n const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n const [value, setValue] = React.useState<string | undefined>('');\n const [legend, setLegend] = React.useState<string | undefined>('');\n const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n const [color, setColor] = React.useState<string | undefined>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n React.useEffect(() => {\n _fitParentContainer();\n }, []);\n\n React.useEffect(() => {\n if (prevPropsRef.current) {\n const prevProps = prevPropsRef.current;\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n setSelectedLegends(props.legendProps?.selectedLegends || []);\n }\n }\n prevPropsRef.current = props;\n }, [props]);\n\n React.useEffect(() => {\n if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n _fitParentContainer();\n }\n prevSize.current.height = props.height;\n prevSize.current.width = props.width;\n }, [props.width, props.height]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n function _elevateToMinimums(data: ChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: ChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent * sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color!;\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(point.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend(undefined);\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowText={props.legendsOverflowText}\n {...props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onLegendSelectionChange}\n legendRef={_legendsRef}\n />\n );\n return legends;\n }\n function _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: Legend,\n ): void {\n if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(selectedLegends);\n } else {\n setSelectedLegends(selectedLegends.slice(-1));\n }\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n function _focusCallback(\n data: ChartDataPoint,\n id: string,\n e: React.FocusEvent<SVGPathElement>,\n targetElement?: HTMLElement | null,\n ): void {\n setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setFocusedArcId(id);\n setDataPointCalloutProps(data);\n setRefSelected(targetElement!);\n }\n\n function _hoverCallback(\n data: ChartDataPoint,\n e: React.MouseEvent<SVGPathElement>,\n targetElement?: HTMLElement | null,\n ): void {\n if (_calloutAnchorPoint !== data) {\n _calloutAnchorPoint = data;\n setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setDataPointCalloutProps(data);\n setRefSelected(targetElement!);\n }\n }\n function _onBlur(): void {\n setFocusedArcId('');\n }\n\n function _hoverLeave(): void {\n /**/\n }\n\n function _handleChartMouseLeave() {\n _calloutAnchorPoint = null;\n setPopoverOpen(false);\n }\n\n function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n const highlightedLegends = _getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n function _toLocaleString(data: string | number | undefined) {\n const localeString = formatToLocaleString(data, props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /**\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n function _getHighlightedLegend() {\n return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n }\n\n function _isLegendHighlighted(legend: string | undefined): boolean {\n return _getHighlightedLegend().includes(legend!);\n }\n\n function _noLegendsHighlighted(): boolean {\n return _getHighlightedLegend().length === 0;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.chartData &&\n props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let defaultColor: string;\n if (typeof item.color === 'undefined') {\n defaultColor = getNextColor(index, 0);\n } else {\n defaultColor = getColorFromToken(item.color);\n }\n return { ...item, defaultColor };\n })\n : [];\n }\n\n /**\n * When screen resizes, along with screen, chart also auto adjusted.\n * This method used to adjust height and width of the charts.\n */\n function _fitParentContainer(): void {\n //_reqID = requestAnimationFrame(() => {\n let legendContainerHeight;\n if (props.hideLegend) {\n // If there is no legend, need not to allocate some space from total chart space.\n legendContainerHeight = 0;\n } else {\n const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n legendContainerHeight =\n ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n MIN_LEGEND_CONTAINER_HEIGHT) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n }\n if (props.parentRef || _rootElem.current) {\n const container = props.parentRef ? props.parentRef : _rootElem.current!;\n const currentContainerWidth = container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 200;\n const shouldResize =\n _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setWidth(currentContainerWidth);\n setHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n const { data, hideLegend = false } = props;\n const points = _addDefaultColors(data?.chartData);\n\n const classes = useDonutChartStyles(props);\n\n const legendBars = _createLegends(points);\n const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n const donutMarginVertical = props.hideLabels ? 0 : 40;\n const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n const valueInsideDonut =\n props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n const focusAttributes = useFocusableGroup();\n return !_isChartEmpty() ? (\n <div\n className={classes.root}\n ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n onMouseLeave={_handleChartMouseLeave}\n >\n {props.xAxisAnnotation && (\n <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n {props.xAxisAnnotation}\n </text>\n )}\n <div className={classes.chartWrapper} {...focusAttributes}>\n <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n <Pie\n width={_width!}\n height={_height!}\n outerRadius={outerRadius}\n innerRadius={props.innerRadius!}\n data={chartData!}\n onFocusCallback={_focusCallback}\n hoverOnCallback={_hoverCallback}\n hoverLeaveCallback={_hoverLeave}\n uniqText={_uniqText}\n onBlurCallback={_onBlur}\n activeArc={_getHighlightedLegend()}\n focusedArcId={focusedArcId || ''}\n href={props.href!}\n valueInsideDonut={_toLocaleString(valueInsideDonut)}\n showLabelsInPercent={props.showLabelsInPercent}\n hideLabels={props.hideLabels}\n />\n </svg>\n </div>\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture}\n positioning={{\n target: refSelected,\n }}\n isPopoverOpen={\n !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend))\n }\n legend={legend!}\n YValue={value!}\n color={color}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerDataPoint\n ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n innerRadius: 0,\n hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","refSelected","setRefSelected","isPopoverOpen","setPopoverOpen","prevPropsRef","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","prevProps","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","Math","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n (props, forwardedRef) => {\n const _rootElem = React.useRef<HTMLDivElement | null>(null);\n const _uniqText: string = useId('_Pie_');\n /* eslint-disable @typescript-eslint/no-explicit-any */\n let _calloutAnchorPoint: ChartDataPoint | null;\n let _emptyChartId: string | null;\n const legendContainer = React.useRef<HTMLDivElement | null>(null);\n const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n const [value, setValue] = React.useState<string | undefined>('');\n const [legend, setLegend] = React.useState<string | undefined>('');\n const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n const [color, setColor] = React.useState<string | undefined>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n React.useEffect(() => {\n _fitParentContainer();\n }, []);\n\n React.useEffect(() => {\n if (prevPropsRef.current) {\n const prevProps = prevPropsRef.current;\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n setSelectedLegends(props.legendProps?.selectedLegends || []);\n }\n }\n prevPropsRef.current = props;\n }, [props]);\n\n React.useEffect(() => {\n if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n _fitParentContainer();\n }\n prevSize.current.height = props.height;\n prevSize.current.width = props.width;\n }, [props.width, props.height]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n function _elevateToMinimums(data: ChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: ChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent * sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n if (props.order === 'sorted') {\n chartData.sort((a: ChartDataPoint, b: ChartDataPoint) => {\n return b.data! - a.data!;\n });\n }\n const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color!;\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(point.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend(undefined);\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowText={props.legendsOverflowText}\n {...props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onLegendSelectionChange}\n legendRef={_legendsRef}\n />\n );\n return legends;\n }\n function _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: Legend,\n ): void {\n if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(selectedLegends);\n } else {\n setSelectedLegends(selectedLegends.slice(-1));\n }\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n function _focusCallback(\n data: ChartDataPoint,\n id: string,\n e: React.FocusEvent<SVGPathElement>,\n targetElement?: HTMLElement | null,\n ): void {\n setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setFocusedArcId(id);\n setDataPointCalloutProps(data);\n setRefSelected(targetElement!);\n }\n\n function _hoverCallback(\n data: ChartDataPoint,\n e: React.MouseEvent<SVGPathElement>,\n targetElement?: HTMLElement | null,\n ): void {\n if (_calloutAnchorPoint !== data) {\n _calloutAnchorPoint = data;\n setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setDataPointCalloutProps(data);\n setRefSelected(targetElement!);\n }\n }\n function _onBlur(): void {\n setFocusedArcId('');\n }\n\n function _hoverLeave(): void {\n /**/\n }\n\n function _handleChartMouseLeave() {\n _calloutAnchorPoint = null;\n setPopoverOpen(false);\n }\n\n function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n const highlightedLegends = _getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n function _toLocaleString(data: string | number | undefined) {\n const localeString = formatToLocaleString(data, props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /**\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n function _getHighlightedLegend() {\n return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n }\n\n function _isLegendHighlighted(legend: string | undefined): boolean {\n return _getHighlightedLegend().includes(legend!);\n }\n\n function _noLegendsHighlighted(): boolean {\n return _getHighlightedLegend().length === 0;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.chartData &&\n props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let defaultColor: string;\n if (typeof item.color === 'undefined') {\n defaultColor = getNextColor(index, 0);\n } else {\n defaultColor = getColorFromToken(item.color);\n }\n return { ...item, defaultColor };\n })\n : [];\n }\n\n /**\n * When screen resizes, along with screen, chart also auto adjusted.\n * This method used to adjust height and width of the charts.\n */\n function _fitParentContainer(): void {\n //_reqID = requestAnimationFrame(() => {\n let legendContainerHeight;\n if (props.hideLegend) {\n // If there is no legend, need not to allocate some space from total chart space.\n legendContainerHeight = 0;\n } else {\n const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n legendContainerHeight =\n ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n MIN_LEGEND_CONTAINER_HEIGHT) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n }\n if (props.parentRef || _rootElem.current) {\n const container = props.parentRef ? props.parentRef : _rootElem.current!;\n const currentContainerWidth = container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 200;\n const shouldResize =\n _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setWidth(currentContainerWidth);\n setHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n const { data, hideLegend = false } = props;\n const points = _addDefaultColors(data?.chartData);\n\n const classes = useDonutChartStyles(props);\n\n const legendBars = _createLegends(points.filter(d => d.data! >= 0));\n const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n const donutMarginVertical = props.hideLabels ? 0 : 40;\n const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n const chartData = _elevateToMinimums(points);\n const valueInsideDonut =\n props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n const focusAttributes = useFocusableGroup();\n return !_isChartEmpty() ? (\n <div\n className={classes.root}\n ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n onMouseLeave={_handleChartMouseLeave}\n >\n {props.xAxisAnnotation && (\n <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n {props.xAxisAnnotation}\n </text>\n )}\n <div className={classes.chartWrapper} {...focusAttributes}>\n <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n <Pie\n width={_width!}\n height={_height!}\n outerRadius={outerRadius}\n innerRadius={props.innerRadius!}\n data={chartData!}\n onFocusCallback={_focusCallback}\n hoverOnCallback={_hoverCallback}\n hoverLeaveCallback={_hoverLeave}\n uniqText={_uniqText}\n onBlurCallback={_onBlur}\n activeArc={_getHighlightedLegend()}\n focusedArcId={focusedArcId || ''}\n href={props.href!}\n valueInsideDonut={_toLocaleString(valueInsideDonut)}\n showLabelsInPercent={props.showLabelsInPercent}\n hideLabels={props.hideLabels}\n />\n </svg>\n </div>\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture}\n positioning={{\n target: refSelected,\n }}\n isPopoverOpen={\n !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend))\n }\n legend={legend!}\n YValue={value!}\n color={color}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerDataPoint\n ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n innerRadius: 0,\n hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","refSelected","setRefSelected","isPopoverOpen","setPopoverOpen","prevPropsRef","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","prevProps","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","order","sort","a","b","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","Math","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n /**\n * Data to render in the chart.\n */\n data?: ChartProps;\n\n /**\n * inner radius for donut size\n */\n innerRadius?: number;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: DonutChartStyles;\n\n /**\n * props for inside donut value\n */\n valueInsideDonut?: string | number;\n\n /**\n * Define a custom callout renderer for a data point\n */\n onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n /**\n * Define a custom callout props override\n */\n calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n /**\n * props for the callout in the chart\n */\n calloutProps?: ChartPopoverProps;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop to show the arc labels in percentage format\n * @default false\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop to hide the arc labels\n * @default true\n */\n hideLabels?: boolean;\n\n /**\n * Below height used for resizing of the chart\n * Wrap chart in your container and send the updated height and width to these props.\n * These values decide wheather chart re render or not. Please check examples for reference\n */\n height?: number;\n\n /**\n * Below width used for resizing of the chart\n * Wrap chart in your container and send the updated height and width to these props.\n * These values decide wheather chart re render or not. Please check examples for reference\n */\n width?: number;\n\n /**\n * this prop takes its parent as a HTML element to define the width and height of the chart\n */\n parentRef?: HTMLElement | null;\n\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n legendsOverflowText?: any;\n\n /*\n * props for the legends in the chart\n */\n legendProps?: Partial<LegendsProps>;\n\n /** decides wether to show/hide legends\n * @defaultvalue false\n */\n hideLegend?: boolean;\n\n /**\n * Url that the data-viz needs to redirect to upon clicking on it\n */\n href?: string;\n\n /**\n * Do not show tooltips in chart\n * @default false\n */\n hideTooltip?: boolean;\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.RefObject<Chart>;\n\n /**\n * Prop to enable the round corners in the chart\n * @default false\n */\n roundCorners?: boolean;\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n /**\n * Style for the root element.\n */\n root?: string;\n\n /**\n * Style for the chart.\n */\n chart?: string;\n /**\n * Style for the legend container.\n */\n legendContainer: string;\n\n /**\n * styles for axis annotation\n */\n axisAnnotation?: string;\n\n /**\n * Styles for the chart wrapper div\n */\n chartWrapper?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n /**\n * Data to render in the chart.\n */\n data?: ChartProps;\n\n /**\n * inner radius for donut size\n */\n innerRadius?: number;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: DonutChartStyles;\n\n /**\n * props for inside donut value\n */\n valueInsideDonut?: string | number;\n\n /**\n * Define a custom callout renderer for a data point\n */\n onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n /**\n * Define a custom callout props override\n */\n calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n /**\n * props for the callout in the chart\n */\n calloutProps?: ChartPopoverProps;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop to show the arc labels in percentage format\n * @default false\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop to hide the arc labels\n * @default true\n */\n hideLabels?: boolean;\n\n /**\n * Below height used for resizing of the chart\n * Wrap chart in your container and send the updated height and width to these props.\n * These values decide wheather chart re render or not. Please check examples for reference\n */\n height?: number;\n\n /**\n * Below width used for resizing of the chart\n * Wrap chart in your container and send the updated height and width to these props.\n * These values decide wheather chart re render or not. Please check examples for reference\n */\n width?: number;\n\n /**\n * this prop takes its parent as a HTML element to define the width and height of the chart\n */\n parentRef?: HTMLElement | null;\n\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n legendsOverflowText?: any;\n\n /*\n * props for the legends in the chart\n */\n legendProps?: Partial<LegendsProps>;\n\n /** decides wether to show/hide legends\n * @defaultvalue false\n */\n hideLegend?: boolean;\n\n /**\n * Url that the data-viz needs to redirect to upon clicking on it\n */\n href?: string;\n\n /**\n * Do not show tooltips in chart\n * @default false\n */\n hideTooltip?: boolean;\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.RefObject<Chart>;\n\n /**\n * Prop to enable the round corners in the chart\n * @default false\n */\n roundCorners?: boolean;\n\n /**\n * Rendering order of the legend\n * @default 'default'\n * 'default' - as per data provided\n * 'sorted' - in descending order of value\n */\n order?: 'default' | 'sorted';\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n /**\n * Style for the root element.\n */\n root?: string;\n\n /**\n * Style for the chart.\n */\n chart?: string;\n /**\n * Style for the legend container.\n */\n legendContainer: string;\n\n /**\n * styles for axis annotation\n */\n axisAnnotation?: string;\n\n /**\n * Styles for the chart wrapper div\n */\n chartWrapper?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charts",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20251015-0406.1",
|
|
4
4
|
"description": "React web chart controls for Microsoft fluentui v9 system.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,21 +22,21 @@
|
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@fluentui/eslint-plugin": "*",
|
|
25
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
26
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
25
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20251015-0406.1",
|
|
26
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20251015-0406.1",
|
|
27
27
|
"@fluentui/scripts-api-extractor": "*"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@fluentui/chart-utilities": "^1.1.33",
|
|
31
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
32
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-overflow": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-popover": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-tooltip": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-button": "0.0.0-nightly-20251015-0406.1",
|
|
32
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20251015-0406.1",
|
|
33
|
+
"@fluentui/react-overflow": "0.0.0-nightly-20251015-0406.1",
|
|
34
|
+
"@fluentui/react-popover": "0.0.0-nightly-20251015-0406.1",
|
|
35
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20251015-0406.1",
|
|
36
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20251015-0406.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20251015-0406.1",
|
|
38
|
+
"@fluentui/react-tooltip": "0.0.0-nightly-20251015-0406.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20251015-0406.1",
|
|
40
40
|
"@griffel/react": "^1.5.22",
|
|
41
41
|
"@swc/helpers": "^0.5.1",
|
|
42
42
|
"@types/d3-array": "^3.0.0",
|