@fluentui/react-charts 0.0.0-nightly-20251013-0407.1 → 0.0.0-nightly-20251014-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/lib/components/AreaChart/AreaChart.js +20 -24
- package/lib/components/AreaChart/AreaChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +2 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.js +1 -2
- package/lib/components/DonutChart/DonutChart.js.map +1 -1
- package/lib/components/LineChart/LineChart.js +70 -59
- package/lib/components/LineChart/LineChart.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +7 -11
- package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib/utilities/utilities.js +14 -8
- package/lib/utilities/utilities.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.js +19 -23
- package/lib-commonjs/components/AreaChart/AreaChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +2 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js +1 -2
- package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.js +69 -58
- package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +6 -10
- package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib-commonjs/utilities/utilities.js +17 -8
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/package.json +12 -12
|
@@ -250,7 +250,6 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
|
|
|
250
250
|
const chartData = _elevateToMinimums(points.filter((d)=>d.data >= 0));
|
|
251
251
|
const valueInsideDonut = props.innerRadius > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut, chartData) : '';
|
|
252
252
|
const focusAttributes = useFocusableGroup();
|
|
253
|
-
var _props_culture;
|
|
254
253
|
return !_isChartEmpty() ? /*#__PURE__*/ React.createElement("div", {
|
|
255
254
|
className: classes.root,
|
|
256
255
|
ref: (rootElem)=>_rootElem.current = rootElem,
|
|
@@ -288,7 +287,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
|
|
|
288
287
|
}))), /*#__PURE__*/ React.createElement(ChartPopover, {
|
|
289
288
|
xCalloutValue: xCalloutValue,
|
|
290
289
|
yCalloutValue: yCalloutValue,
|
|
291
|
-
culture:
|
|
290
|
+
culture: props.culture,
|
|
292
291
|
positioning: {
|
|
293
292
|
target: refSelected
|
|
294
293
|
},
|
|
@@ -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 ?? 'en-us'}\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 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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"}
|
|
@@ -7,7 +7,7 @@ import { Legends } from '../Legends/index';
|
|
|
7
7
|
import { line as d3Line } from 'd3-shape';
|
|
8
8
|
import { max as d3Max } from 'd3-array';
|
|
9
9
|
import { useId } from '@fluentui/react-utilities';
|
|
10
|
-
import { find } from '../../utilities/index';
|
|
10
|
+
import { find, findCalloutPoints } from '../../utilities/index';
|
|
11
11
|
import { CartesianChart } from '../../index';
|
|
12
12
|
import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
|
|
13
13
|
import { tokens } from '@fluentui/react-theme';
|
|
@@ -98,8 +98,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
98
98
|
let _isScatterPolar = false;
|
|
99
99
|
let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
|
|
100
100
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
101
|
-
let _calloutPoints = calloutData(_points) || [];
|
|
102
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
103
101
|
let _xAxisScale = '';
|
|
104
102
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
105
103
|
let _yScalePrimary = '';
|
|
@@ -129,7 +127,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
129
127
|
props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
|
|
130
128
|
const [hoverXValue, setHoverXValue] = React.useState('');
|
|
131
129
|
const [activeLegend, setActiveLegend] = React.useState('');
|
|
132
|
-
const [
|
|
130
|
+
const [yValueHover, setYValueHover] = React.useState([]);
|
|
133
131
|
const [selectedLegend, setSelectedLegend] = React.useState('');
|
|
134
132
|
const [selectedLegendPoints, setSelectedLegendPoints] = React.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
|
|
135
133
|
const [selectedColorBarLegend, setSelectedColorBarLegend] = React.useState([]);
|
|
@@ -149,7 +147,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
149
147
|
const [lineColor, setLineColor] = React.useState('');
|
|
150
148
|
const [refSelected, setRefSelected] = React.useState(null);
|
|
151
149
|
const pointsRef = React.useRef([]);
|
|
152
|
-
const calloutPointsRef = React.useRef(
|
|
150
|
+
const calloutPointsRef = React.useRef({});
|
|
153
151
|
const classes = useLineChartStyles(props);
|
|
154
152
|
React.useEffect(()=>{
|
|
155
153
|
/** note that height and width are not used to resize or set as dimesions of the chart,
|
|
@@ -421,7 +419,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
421
419
|
});
|
|
422
420
|
});
|
|
423
421
|
for(let i = _points.length - 1; i >= 0; i--){
|
|
424
|
-
var _points_i_gaps, _points_i_lineOptions;
|
|
422
|
+
var _points_i_gaps, _points_i_lineOptions, _points_i_lineOptions1;
|
|
425
423
|
const linesForLine = [];
|
|
426
424
|
const bordersForLine = [];
|
|
427
425
|
const pointsForLine = [];
|
|
@@ -446,11 +444,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
446
444
|
const xPoint = _xAxisScale(x1);
|
|
447
445
|
const yPoint = yScale(y1);
|
|
448
446
|
if (isPlottable(xPoint, yPoint)) {
|
|
449
|
-
var _points_i_lineOptions_mode,
|
|
447
|
+
var _points_i_lineOptions_mode, _points_i_lineOptions2;
|
|
450
448
|
const circleId = `${_circleId}_${i}`;
|
|
451
449
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
452
450
|
const currentMarkerSize = _points[i].data[0].markerSize;
|
|
453
|
-
const supportsTextMode = (
|
|
451
|
+
const supportsTextMode = (_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions2.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
|
|
454
452
|
const text = _points[i].data[0].text;
|
|
455
453
|
const targetElement = document.getElementById(circleId);
|
|
456
454
|
var _points_i_data__text;
|
|
@@ -494,13 +492,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
494
492
|
const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
|
|
495
493
|
// Use path rendering technique for larger datasets to optimize performance.
|
|
496
494
|
if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
|
|
497
|
-
var
|
|
495
|
+
var _points_i_lineOptions3, _points_i_lineOptions4;
|
|
498
496
|
const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
499
497
|
.x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
500
498
|
.y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve)).defined((d)=>isPlottable(_xAxisScale(d[0]), yScale(d[1])));
|
|
501
499
|
const lineId = `${_lineId}_${i}`;
|
|
502
500
|
const borderId = `${_borderId}_${i}`;
|
|
503
|
-
const strokeWidth = ((
|
|
501
|
+
const strokeWidth = ((_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
504
502
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
505
503
|
const lineData = [];
|
|
506
504
|
for(let k = 0; k < _points[i].data.length; k++){
|
|
@@ -510,22 +508,22 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
510
508
|
]);
|
|
511
509
|
}
|
|
512
510
|
// Check if lines should be drawn based on mode
|
|
513
|
-
const lineMode = (
|
|
511
|
+
const lineMode = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.mode;
|
|
514
512
|
const shouldDrawLines = lineMode !== 'markers';
|
|
515
513
|
if (shouldDrawLines && isLegendSelected) {
|
|
516
|
-
var
|
|
517
|
-
const lineBorderWidth = ((
|
|
514
|
+
var _points_i_lineOptions5, _points_i_lineOptions6, _points_i_lineOptions7;
|
|
515
|
+
const lineBorderWidth = ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
518
516
|
if (lineBorderWidth > 0) {
|
|
519
|
-
var
|
|
517
|
+
var _points_i_lineOptions8, _points_i_lineOptions9;
|
|
520
518
|
var _points_i_lineOptions_strokeLinecap;
|
|
521
519
|
bordersForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
522
520
|
id: borderId,
|
|
523
521
|
key: borderId,
|
|
524
522
|
d: line(lineData),
|
|
525
523
|
fill: "transparent",
|
|
526
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (
|
|
524
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
|
|
527
525
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
528
|
-
stroke: ((
|
|
526
|
+
stroke: ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
529
527
|
opacity: 1
|
|
530
528
|
}));
|
|
531
529
|
}
|
|
@@ -538,8 +536,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
538
536
|
"data-is-focusable": true,
|
|
539
537
|
stroke: lineColor,
|
|
540
538
|
strokeWidth: strokeWidth,
|
|
541
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (
|
|
542
|
-
strokeDasharray: (
|
|
539
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
|
|
540
|
+
strokeDasharray: (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeDasharray,
|
|
543
541
|
onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
544
542
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
545
543
|
onMouseOut: _handleMouseOut,
|
|
@@ -548,7 +546,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
548
546
|
tabIndex: isLegendSelected ? 0 : undefined
|
|
549
547
|
}));
|
|
550
548
|
} else if (shouldDrawLines) {
|
|
551
|
-
var
|
|
549
|
+
var _points_i_lineOptions10, _points_i_lineOptions11;
|
|
552
550
|
var _points_i_lineOptions_strokeLinecap2;
|
|
553
551
|
linesForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
554
552
|
id: lineId,
|
|
@@ -558,8 +556,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
558
556
|
"data-is-focusable": false,
|
|
559
557
|
stroke: lineColor,
|
|
560
558
|
strokeWidth: strokeWidth,
|
|
561
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (
|
|
562
|
-
strokeDasharray: (
|
|
559
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
|
|
560
|
+
strokeDasharray: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDasharray,
|
|
563
561
|
opacity: 0.1
|
|
564
562
|
}));
|
|
565
563
|
}
|
|
@@ -579,7 +577,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
579
577
|
onMouseOut: _handleMouseOut
|
|
580
578
|
}));
|
|
581
579
|
// Add individual markers if mode includes 'markers'
|
|
582
|
-
const showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'))
|
|
580
|
+
const showMarkers = !!(lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'));
|
|
583
581
|
if (showMarkers) {
|
|
584
582
|
for(let k = 0; k < _points[i].data.length; k++){
|
|
585
583
|
const { x, y } = _points[i].data[k];
|
|
@@ -607,7 +605,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
607
605
|
}
|
|
608
606
|
} else if (!props.optimizeLargeData) {
|
|
609
607
|
for(let j = 1; j < _points[i].data.length; j++){
|
|
610
|
-
var
|
|
608
|
+
var _points_i_lineOptions12, _points_i_lineOptions_mode1, _points_i_lineOptions13, _points_i_lineOptions_mode2, _points_i_lineOptions14;
|
|
611
609
|
const gapResult = _checkInGap(j, gaps, gapIndex);
|
|
612
610
|
const isInGap = gapResult.isInGap;
|
|
613
611
|
gapIndex = gapResult.gapIndex;
|
|
@@ -620,18 +618,18 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
620
618
|
const yPoint1 = yScale(y1);
|
|
621
619
|
const xPoint2 = _xAxisScale(x2);
|
|
622
620
|
const yPoint2 = yScale(y2);
|
|
623
|
-
const strokeWidth = ((
|
|
621
|
+
const strokeWidth = ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
624
622
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
625
623
|
const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
|
|
626
|
-
const supportsTextMode = (
|
|
624
|
+
const supportsTextMode = (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
|
|
627
625
|
const text = _points[i].data[j - 1].text;
|
|
628
626
|
let currentMarkerSize = _points[i].data[j - 1].markerSize;
|
|
629
627
|
if (isPlottable(xPoint1, yPoint1)) {
|
|
630
|
-
var _points_i_lineOptions_mode3,
|
|
628
|
+
var _points_i_lineOptions_mode3, _points_i_lineOptions15, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
|
|
631
629
|
const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
|
|
632
630
|
const targetElement = document.getElementById(circleId);
|
|
633
631
|
var _points_i_data__text1;
|
|
634
|
-
pointsForLine.push(((
|
|
632
|
+
pointsForLine.push(((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions15.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('markers')) || supportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
|
|
635
633
|
id: circleId,
|
|
636
634
|
key: circleId,
|
|
637
635
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
@@ -677,23 +675,23 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
677
675
|
}));
|
|
678
676
|
}
|
|
679
677
|
if (j + 1 === _points[i].data.length) {
|
|
680
|
-
var _points_i_lineOptions_mode4,
|
|
678
|
+
var _points_i_lineOptions_mode4, _points_i_lineOptions16;
|
|
681
679
|
// If this is last point of the line segment.
|
|
682
680
|
const lastCircleId = `${circleId}${j}L`;
|
|
683
681
|
const hiddenHoverCircleId = `${circleId}${j}D`;
|
|
684
682
|
const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
|
|
685
683
|
const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
|
|
686
684
|
currentMarkerSize = _points[i].data[j].markerSize;
|
|
687
|
-
const lastSupportsTextMode = (
|
|
685
|
+
const lastSupportsTextMode = (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions16.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
|
|
688
686
|
const lastText = _points[i].data[j].text;
|
|
689
687
|
if (isPlottable(xPoint2, yPoint2)) {
|
|
690
|
-
var _points_i_lineOptions_mode5,
|
|
688
|
+
var _points_i_lineOptions_mode5, _points_i_lineOptions17, _points_i_data_j, _points_i_data_j1;
|
|
691
689
|
const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
|
|
692
690
|
const targetElement = document.getElementById(lastCircleId);
|
|
693
691
|
var _points_i_data_j_text;
|
|
694
692
|
pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
|
|
695
693
|
key: `${lastCircleId}_container`
|
|
696
|
-
}, ((
|
|
694
|
+
}, ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions17.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
|
|
697
695
|
id: lastCircleId,
|
|
698
696
|
key: lastCircleId,
|
|
699
697
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
@@ -752,15 +750,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
752
750
|
})));
|
|
753
751
|
}
|
|
754
752
|
}
|
|
755
|
-
if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((
|
|
753
|
+
if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions14.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
|
|
756
754
|
if (isLegendSelected) {
|
|
757
755
|
// don't draw line if it is in a gap
|
|
758
756
|
if (!isInGap) {
|
|
759
|
-
var
|
|
760
|
-
const lineBorderWidth = ((
|
|
757
|
+
var _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20, _points_i_lineOptions21;
|
|
758
|
+
const lineBorderWidth = ((_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
761
759
|
const targetElement = document.getElementById(circleId);
|
|
762
760
|
if (lineBorderWidth > 0) {
|
|
763
|
-
var
|
|
761
|
+
var _points_i_lineOptions22, _points_i_lineOptions23;
|
|
764
762
|
var _points_i_lineOptions_strokeLinecap3;
|
|
765
763
|
bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
766
764
|
id: borderId,
|
|
@@ -769,9 +767,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
769
767
|
y1: yPoint1,
|
|
770
768
|
x2: xPoint2,
|
|
771
769
|
y2: yPoint2,
|
|
772
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (
|
|
770
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
|
|
773
771
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
774
|
-
stroke: ((
|
|
772
|
+
stroke: ((_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
775
773
|
opacity: 1
|
|
776
774
|
}));
|
|
777
775
|
}
|
|
@@ -791,16 +789,16 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
791
789
|
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
792
790
|
onMouseOut: _handleMouseOut,
|
|
793
791
|
stroke: lineColor,
|
|
794
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (
|
|
795
|
-
strokeDasharray: (
|
|
796
|
-
strokeDashoffset: (
|
|
792
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
|
|
793
|
+
strokeDasharray: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDasharray,
|
|
794
|
+
strokeDashoffset: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDashoffset,
|
|
797
795
|
opacity: 1,
|
|
798
796
|
..._getClickHandler(_points[i].onLineClick)
|
|
799
797
|
}));
|
|
800
798
|
}
|
|
801
799
|
} else {
|
|
802
800
|
if (!isInGap) {
|
|
803
|
-
var
|
|
801
|
+
var _points_i_lineOptions24, _points_i_lineOptions25, _points_i_lineOptions26;
|
|
804
802
|
var _points_i_lineOptions_strokeLinecap5;
|
|
805
803
|
linesForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
806
804
|
id: lineId,
|
|
@@ -811,9 +809,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
811
809
|
y2: yPoint2,
|
|
812
810
|
strokeWidth: strokeWidth,
|
|
813
811
|
stroke: lineColor,
|
|
814
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (
|
|
815
|
-
strokeDasharray: (
|
|
816
|
-
strokeDashoffset: (
|
|
812
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
|
|
813
|
+
strokeDasharray: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDasharray,
|
|
814
|
+
strokeDashoffset: (_points_i_lineOptions26 = _points[i].lineOptions) === null || _points_i_lineOptions26 === void 0 ? void 0 : _points_i_lineOptions26.strokeDashoffset,
|
|
817
815
|
opacity: 0.1
|
|
818
816
|
}));
|
|
819
817
|
}
|
|
@@ -821,6 +819,26 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
821
819
|
}
|
|
822
820
|
}
|
|
823
821
|
}
|
|
822
|
+
// Add filled area for scatterpolar charts
|
|
823
|
+
const fillMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.fill;
|
|
824
|
+
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
825
|
+
if (fillMode === 'toself' && _points[i].data.length >= 3 && isLegendSelected && _isScatterPolar) {
|
|
826
|
+
const getScaledXValue = (dataPoint)=>_xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
|
|
827
|
+
const fillPathGenerator = d3Line().x((dataPoint)=>getScaledXValue(dataPoint)).y((dataPoint)=>yScale(dataPoint.y)).curve(getCurveFactory(lineCurve)).defined((dataPoint)=>isPlottable(getScaledXValue(dataPoint), yScale(dataPoint.y)));
|
|
828
|
+
const fillPath = fillPathGenerator(_points[i].data);
|
|
829
|
+
if (fillPath) {
|
|
830
|
+
linesForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
831
|
+
key: `scatterpolar_fill_${i}`,
|
|
832
|
+
d: `${fillPath}Z`,
|
|
833
|
+
fill: lineColor,
|
|
834
|
+
fillOpacity: 0.5,
|
|
835
|
+
stroke: lineColor,
|
|
836
|
+
strokeWidth: 2,
|
|
837
|
+
strokeOpacity: 0.8,
|
|
838
|
+
pointerEvents: "none"
|
|
839
|
+
}));
|
|
840
|
+
}
|
|
841
|
+
}
|
|
824
842
|
if (_isScatterPolar) {
|
|
825
843
|
var _points_i1;
|
|
826
844
|
pointsForLine.push(...renderScatterPolarCategoryLabels({
|
|
@@ -973,11 +991,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
973
991
|
}
|
|
974
992
|
const { xAxisCalloutData } = lineChartData[linenumber].data[index];
|
|
975
993
|
const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
|
|
976
|
-
const
|
|
977
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
978
|
-
const found = find(_calloutPoints, (element)=>{
|
|
979
|
-
return element.x === modifiedXVal;
|
|
980
|
-
});
|
|
994
|
+
const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight);
|
|
981
995
|
const pointToHighlight = lineChartData[linenumber].data[index];
|
|
982
996
|
const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
|
|
983
997
|
// if no points need to be called out then don't show vertical line and callout card
|
|
@@ -1004,8 +1018,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1004
1018
|
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
|
|
1005
1019
|
_uniqueCallOutID = circleId;
|
|
1006
1020
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
1007
|
-
const
|
|
1008
|
-
const found = find(_calloutPoints, (element)=>element.x === xVal);
|
|
1021
|
+
const found = findCalloutPoints(calloutPointsRef.current, x);
|
|
1009
1022
|
// if no points need to be called out then don't show vertical line and callout card
|
|
1010
1023
|
if (found) {
|
|
1011
1024
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, 0)`).attr('visibility', 'visibility');
|
|
@@ -1027,15 +1040,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1027
1040
|
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
|
|
1028
1041
|
mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
|
|
1029
1042
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
1030
|
-
const
|
|
1031
|
-
const yVal = y instanceof Date ? y.getTime() : y;
|
|
1032
|
-
const found = find(_calloutPoints, (element)=>element.x === xVal);
|
|
1043
|
+
const found = findCalloutPoints(calloutPointsRef.current, x);
|
|
1033
1044
|
let hoverDp = undefined;
|
|
1034
1045
|
if (props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
|
|
1035
|
-
const dp = find(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) ===
|
|
1046
|
+
const dp = find(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === y);
|
|
1036
1047
|
if (dp) {
|
|
1037
1048
|
hoverDp = {
|
|
1038
|
-
x
|
|
1049
|
+
x,
|
|
1039
1050
|
values: [
|
|
1040
1051
|
dp
|
|
1041
1052
|
]
|
|
@@ -1051,7 +1062,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1051
1062
|
setPopoverOpen(true);
|
|
1052
1063
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
1053
1064
|
setYValueHover(found.values);
|
|
1054
|
-
setYValue(
|
|
1065
|
+
setYValue(y);
|
|
1055
1066
|
setLegendVal(legendVal);
|
|
1056
1067
|
setLineColor(lineColor);
|
|
1057
1068
|
setStackCalloutProps(found);
|
|
@@ -1188,7 +1199,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1188
1199
|
let points = _points;
|
|
1189
1200
|
if (legendProps && !!legendProps.canSelectMultipleLegends) {
|
|
1190
1201
|
points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
|
|
1191
|
-
|
|
1202
|
+
calloutPointsRef.current = calloutData(points);
|
|
1192
1203
|
}
|
|
1193
1204
|
let legendBars = null;
|
|
1194
1205
|
// reduce computation cost by only creating legendBars
|
|
@@ -1198,7 +1209,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1198
1209
|
legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
|
|
1199
1210
|
}
|
|
1200
1211
|
const calloutProps = {
|
|
1201
|
-
YValueHover:
|
|
1212
|
+
YValueHover: yValueHover,
|
|
1202
1213
|
hoverXValue: hoverXValue,
|
|
1203
1214
|
YValue: YValue,
|
|
1204
1215
|
legend: legendVal,
|