@fluentui/react-charts 9.0.6 → 9.1.0
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 +35 -2
- package/dist/index.d.ts +12 -0
- package/lib/components/AreaChart/useAreaChartStyles.styles.js +2 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.js +7 -4
- package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +16 -4
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +2 -2
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +0 -9
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/GaugeChart/useGaugeChartStyles.styles.js +18 -17
- package/lib/components/GaugeChart/useGaugeChartStyles.styles.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -1
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
- package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +2 -1
- package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
- package/lib/components/LineChart/LineChart.js +14 -11
- package/lib/components/LineChart/LineChart.js.map +1 -1
- package/lib/components/LineChart/LineChart.types.js.map +1 -1
- package/lib/components/LineChart/useLineChartStyles.styles.js +14 -3
- package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +1 -1
- package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib/components/ScatterChart/useScatterChartStyles.styles.js +2 -1
- package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib/components/Sparkline/useSparklineStyles.styles.js +2 -12
- package/lib/components/Sparkline/useSparklineStyles.styles.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.js +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.types.js.map +1 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +14 -3
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
- package/lib/utilities/SVGTooltipText.js +6 -13
- package/lib/utilities/SVGTooltipText.js.map +1 -1
- package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js +2 -1
- package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +7 -4
- package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +25 -3
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +0 -12
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/GaugeChart/useGaugeChartStyles.styles.js +18 -17
- package/lib-commonjs/components/GaugeChart/useGaugeChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +2 -1
- package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.js +14 -11
- package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.types.js.map +1 -1
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js +19 -3
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +2 -1
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Sparkline/useSparklineStyles.styles.js +3 -24
- package/lib-commonjs/components/Sparkline/useSparklineStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.types.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +19 -3
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/utilities/SVGTooltipText.js +6 -13
- package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useRtl } from './utilities';\n\ninterface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textX, setTextX] = useState(0);\n const [textY, setTextY] = useState(0);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 4;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextX(bbox.x);\n setTextY(bbox.y);\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const backgroundColor = tokens.colorNeutralBackground1;\n const isRTL = useRtl();\n const rectX = isRTL ? (textX ?? 0) + (textWidth ?? 0) - PADDING : (textX ?? 0) - PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={(textY ?? 0) - PADDING}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + 2 * PADDING}\n fill={backgroundColor}\n transform={props.textProps?.transform}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","tokens","useRtl","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textX","setTextX","textY","setTextY","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","x","y","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","backgroundColor","colorNeutralBackground1","isRTL","rectX","showBackground","rect","fill","transform","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\ninterface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 4;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + 2 * PADDING}\n transform={props.textProps?.transform}\n className={props.className}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const areaChartClassNames = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: ''\n};\nconst useStyles = makeStyles({\n tooltip: {\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n }\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n };\n};\n"],"names":["areaChartClassNames","useAreaChartStyles","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","props","baseStyles","mergeClasses"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const areaChartClassNames = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: ''\n};\nconst useStyles = makeStyles({\n tooltip: {\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n }\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n };\n};\n"],"names":["areaChartClassNames","useAreaChartStyles","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,mBAAmB;eAAnBA;;IAgCIC,kBAAkB;eAAlBA;;;uBAlCoC;AAE9C,MAAMD,sBAAsB;IAC/BE,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;AAChB;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAd,SAAA;QAAAe,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA;AAiBP,MAAMtC,qBAAsBuC,CAAAA;IACnC,MAAMC,aAAa1B;IACnB,OAAO;QACHb,SAASwC,IAAAA,mBAAY,EAAC1C,oBAAoBE,OAAO,EAAEuC,WAAWvC,OAAO,CAAC,uBAAA;IAC1E;AACJ"}
|
|
@@ -433,7 +433,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
433
433
|
},
|
|
434
434
|
maxWidth: xAxisTitleMaximumAllowedWidth,
|
|
435
435
|
wrapContent: _index.wrapContent,
|
|
436
|
-
showBackground: true
|
|
436
|
+
showBackground: true,
|
|
437
|
+
className: classes.svgTooltip
|
|
437
438
|
}), /*#__PURE__*/ _react.createElement("g", {
|
|
438
439
|
ref: (e)=>{
|
|
439
440
|
yAxisElement.current = e;
|
|
@@ -460,12 +461,13 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
460
461
|
},
|
|
461
462
|
maxWidth: yAxisTitleMaximumAllowedHeight,
|
|
462
463
|
wrapContent: _index.wrapContent,
|
|
463
|
-
showBackground: true
|
|
464
|
+
showBackground: true,
|
|
465
|
+
className: classes.svgTooltip
|
|
464
466
|
})), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
|
|
465
467
|
content: props.yAxisTitle,
|
|
466
468
|
textProps: {
|
|
467
469
|
x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
|
|
468
|
-
y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2
|
|
470
|
+
y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 - titleMargin,
|
|
469
471
|
textAnchor: 'middle',
|
|
470
472
|
transform: `translate(0,
|
|
471
473
|
${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
|
|
@@ -473,7 +475,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
473
475
|
},
|
|
474
476
|
maxWidth: yAxisTitleMaximumAllowedHeight,
|
|
475
477
|
wrapContent: _index.wrapContent,
|
|
476
|
-
showBackground: true
|
|
478
|
+
showBackground: true,
|
|
479
|
+
className: classes.svgTooltip
|
|
477
480
|
}))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
|
|
478
481
|
ref: (e)=>legendContainer = e,
|
|
479
482
|
className: classes.legendContainer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CartesianChart.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { ModifiedCartesianChartProps, HorizontalBarChartWithAxisDataPoint, HeatMapChartDataPoint } from '../../index';\nimport { useCartesianChartStyles } from './useCartesianChartStyles.styles';\nimport {\n createNumericXAxis,\n createStringXAxis,\n IAxisData,\n getDomainNRangeValues,\n createDateXAxis,\n createYAxis,\n createStringYAxis,\n IMargins,\n getMinMaxOfYAxis,\n XAxisTypes,\n YAxisType,\n createWrapOfXLabels,\n rotateXAxisLabels,\n calculateLongestLabelWidth,\n createYAxisLabels,\n ChartTypes,\n wrapContent,\n useRtl,\n} from '../../utilities/index';\nimport { SVGTooltipText } from '../../utilities/SVGTooltipText';\nimport { ChartPopover } from './ChartPopover';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Cartesian Chart component\n * {@docCategory CartesianChart}\n */\nexport const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<\n HTMLDivElement,\n ModifiedCartesianChartProps\n>((props, forwardedRef) => {\n const chartContainer = React.useRef<HTMLDivElement>();\n let legendContainer: HTMLDivElement;\n const minLegendContainerHeight: number = 40;\n const xAxisElement = React.useRef<SVGSVGElement>();\n const yAxisElement = React.useRef<SVGSVGElement>();\n const yAxisElementSecondary = React.useRef<SVGSVGElement>();\n let margins: IMargins;\n const idForGraph: string = 'chart_';\n let _reqID: number;\n const _useRtl: boolean = useRtl();\n let _tickValues: (string | number)[];\n const titleMargin: number = 8;\n const _isFirstRender = React.useRef<boolean>(true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _xScale: any;\n let isIntegralDataset: boolean = true;\n\n const [containerWidth, setContainerWidth] = React.useState<number>(0);\n const [containerHeight, setContainerHeight] = React.useState<number>(0);\n const [isRemoveValCalculated, setIsRemoveValCalculated] = React.useState<boolean>(true);\n const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = React.useState<number>(0);\n const [startFromX, setStartFromX] = React.useState<number>(0);\n const [prevProps, setPrevProps] = React.useState<ModifiedCartesianChartProps | null>(null);\n\n const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart];\n /**\n * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.\n * So that, in RTL, left margins becomes right margins and viceversa.\n * As graph needs to be drawn perfecty, these values consider as default values.\n * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.\n */\n // eslint-disable-next-line prefer-const\n margins = {\n top: props.margins?.top ?? 20,\n bottom: props.margins?.bottom ?? 35,\n right: _useRtl ? props.margins?.left ?? 40 : props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20,\n left: _useRtl ? (props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20) : props.margins?.left ?? 40,\n };\n if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {\n margins.bottom! = props.margins?.bottom ?? 55;\n }\n if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {\n margins.left! = _useRtl\n ? props.margins?.right ?? props?.secondaryYAxistitle\n ? 80\n : 40\n : props.margins?.left ?? 60;\n margins.right! = _useRtl ? props.margins?.left ?? 60 : props.margins?.right ?? props?.secondaryYAxistitle ? 80 : 40;\n }\n\n const classes = useCartesianChartStyles(props);\n const focusAttributes = useFocusableGroup();\n const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal' });\n // ComponentdidMount and Componentwillunmount logic\n React.useEffect(() => {\n _fitParentContainer();\n if (props !== null) {\n setPrevProps(props);\n }\n if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n if (startFromX !== maxYAxisLabelLength) {\n setStartFromX(maxYAxisLabelLength);\n }\n } else if (startFromX !== 0) {\n setStartFromX(0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n return () => {\n cancelAnimationFrame(_reqID);\n };\n }, [props]);\n\n // ComponentDidUpdate logic\n React.useEffect(() => {\n if (prevProps) {\n if (prevProps.height !== props.height || prevProps.width !== props.width) {\n _fitParentContainer();\n }\n }\n if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n if (startFromX !== maxYAxisLabelLength) {\n setStartFromX(maxYAxisLabelLength);\n }\n } else if (startFromX !== 0) {\n setStartFromX(0);\n }\n if (prevProps !== null && prevProps.points !== props.points) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n }\n }, [props, prevProps]);\n\n React.useEffect(() => {\n if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n const rotateLabelProps = {\n node: xAxisElement.current!,\n xAxis: _xScale,\n };\n const rotatedHeight = rotateXAxisLabels(rotateLabelProps);\n\n if (\n isRemoveValCalculated &&\n removalValueForTextTuncate !== rotatedHeight! + margins.bottom! &&\n rotatedHeight! > 0\n ) {\n setRemovalValueForTextTuncate(rotatedHeight! + margins.bottom!);\n setIsRemoveValCalculated(false);\n }\n }\n });\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: chartContainer.current ?? null,\n }),\n [],\n );\n\n /**\n * Dedicated function to return the Callout JSX Element , which can further be used to only call this when\n * only the calloutprops and charthover props changes.\n * @param calloutProps\n * @param chartHoverProps\n * @returns\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function _generateCallout(calloutProps: any): JSX.Element {\n return <ChartPopover {...calloutProps} />;\n }\n\n function calculateMaxYAxisLabelLength(\n chartType: ChartTypes,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n points: any[],\n className: string,\n ): number {\n if (chartType === ChartTypes.HeatMapChart) {\n return calculateLongestLabelWidth(\n points[0]?.data?.map((point: HeatMapChartDataPoint) => point.y),\n `.${className} text`,\n );\n } else {\n return calculateLongestLabelWidth(\n points?.map((point: HorizontalBarChartWithAxisDataPoint) => point.y),\n `.${className} text`,\n );\n }\n }\n\n const {\n calloutProps,\n points,\n chartType,\n svgProps,\n culture,\n dateLocalizeOptions,\n timeFormatLocale,\n customDateTimeFormatter,\n } = props;\n if (props.parentRef) {\n _fitParentContainer();\n }\n const margin = { ...margins };\n if (chartTypesToCheck.includes(props.chartType)) {\n if (!_useRtl) {\n margin.left! += startFromX;\n } else {\n margin.right! += startFromX;\n }\n }\n // Callback for margins to the chart\n props.getmargins && props.getmargins(margin);\n\n let callout: JSX.Element | null = null;\n\n let children = null;\n if ((props.enableFirstRenderOptimization && chartContainer.current) || !props.enableFirstRenderOptimization) {\n _isFirstRender.current = false;\n const XAxisParams = {\n domainNRangeValues: getDomainNRangeValues(\n points,\n props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,\n containerWidth,\n chartType,\n _useRtl,\n props.xAxisType,\n props.barwidth!,\n props.tickValues!,\n // This is only used for Horizontal Bar Chart with Axis for y as string axis\n startFromX,\n ),\n containerHeight: containerHeight - removalValueForTextTuncate!,\n margins: margins,\n xAxisElement: xAxisElement.current!,\n showRoundOffXTickValues: true,\n xAxisCount: props.xAxisTickCount,\n xAxistickSize: props.xAxistickSize,\n tickPadding: props.tickPadding || props.showXAxisLablesTooltip ? 5 : 10,\n xAxisPadding: props.xAxisPadding,\n xAxisInnerPadding: props.xAxisInnerPadding,\n xAxisOuterPadding: props.xAxisOuterPadding,\n containerWidth: containerWidth,\n hideTickOverlap:\n props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables,\n };\n\n const YAxisParams = {\n margins: margins,\n containerWidth: containerWidth,\n containerHeight: containerHeight - removalValueForTextTuncate!,\n yAxisElement: yAxisElement.current,\n yAxisTickFormat: props.yAxisTickFormat!,\n yAxisTickCount: props.yAxisTickCount!,\n yMinValue: props.yMinValue || 0,\n yMaxValue: props.yMaxValue || 0,\n tickPadding: 10,\n maxOfYVal: props.maxOfYVal,\n yMinMaxValues: getMinMaxOfYAxis(points, chartType, props.yAxisType),\n // please note these padding default values must be consistent in here\n // and the parent chart(HBWA/Vertical etc..) for more details refer example\n // http://using-d3js.com/04_07_ordinal_scales.html\n yAxisPadding: props.yAxisPadding || 0,\n };\n /**\n * These scales used for 2 purposes.\n * 1. To create x and y axis\n * 2. To draw the graph.\n * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let xScale: any;\n let tickValues: (string | number)[];\n switch (props.xAxisType!) {\n case XAxisTypes.NumericAxis:\n ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n break;\n case XAxisTypes.DateAxis:\n ({ xScale, tickValues } = createDateXAxis(\n XAxisParams,\n props.tickParams!,\n culture,\n dateLocalizeOptions,\n timeFormatLocale,\n customDateTimeFormatter,\n props.useUTC,\n ));\n break;\n case XAxisTypes.StringAxis:\n ({ xScale, tickValues } = createStringXAxis(\n XAxisParams,\n props.tickParams!,\n props.datasetForXAxisDomain!,\n culture,\n ));\n break;\n default:\n ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n }\n _xScale = xScale;\n _tickValues = tickValues;\n\n /*\n * To enable wrapping of x axis tick values or to display complete x axis tick values,\n * we need to calculate how much space it needed to render the text.\n * No need to re-calculate every time the chart renders and same time need to get an update. So using set\n * Required space will be calculated first time chart rendering and if any width/height of chart updated.\n * */\n if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {\n const wrapLabelProps = {\n node: xAxisElement.current!,\n xAxis: xScale,\n showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,\n noOfCharsToTruncate: props.noOfCharsToTruncate || 4,\n };\n const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);\n // this value need to be updated for draw graph updated. So instead of using private value, using set\n if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {\n setRemovalValueForTextTuncate(temp);\n setIsRemoveValCalculated(false);\n }\n }\n /**\n * These scales used for 2 purposes.\n * 1. To create x and y axis\n * 2. To draw the graph.\n * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let yScale: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let yScaleSecondary: any;\n const axisData: IAxisData = { yAxisDomainValues: [] };\n if (props.yAxisType && props.yAxisType === YAxisType.StringAxis) {\n yScale = createStringYAxis(\n YAxisParams,\n props.stringDatasetForYAxisDomain!,\n _useRtl,\n props.chartType,\n props.barwidth,\n culture,\n );\n } else {\n if (props?.secondaryYScaleOptions) {\n const YAxisParamsSecondary = {\n margins: margins,\n containerWidth: containerWidth,\n containerHeight: containerHeight - removalValueForTextTuncate!,\n yAxisElement: yAxisElementSecondary.current,\n yAxisTickFormat: props.yAxisTickFormat!,\n yAxisTickCount: props.yAxisTickCount!,\n yMinValue: props.secondaryYScaleOptions?.yMinValue || 0,\n yMaxValue: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n tickPadding: 10,\n maxOfYVal: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n yMinMaxValues: getMinMaxOfYAxis(points, chartType),\n yAxisPadding: props.yAxisPadding,\n };\n\n yScaleSecondary = createYAxis(\n YAxisParamsSecondary,\n _useRtl,\n axisData,\n chartType,\n props.barwidth!,\n isIntegralDataset,\n true,\n props.roundedTicks!,\n );\n }\n yScale = createYAxis(\n YAxisParams,\n _useRtl,\n axisData,\n chartType,\n props.barwidth!,\n isIntegralDataset,\n false,\n props.roundedTicks!,\n );\n }\n\n /*\n * To create y axis tick values by if specified\n truncating the rest of the text and showing elipsis\n or showing the whole string,\n * */\n chartTypesToCheck.includes(props.chartType) &&\n yScale &&\n createYAxisLabels(\n yAxisElement.current!,\n yScale,\n props.noOfCharsToTruncate || 4,\n props.showYAxisLablesTooltip || false,\n startFromX,\n _useRtl,\n );\n\n // Call back to the chart.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const _getData = (xScale: any, yScale: any) => {\n props.getGraphData &&\n props.getGraphData(\n xScale,\n yScale,\n containerHeight - removalValueForTextTuncate!,\n containerWidth,\n xAxisElement.current,\n yAxisElement.current,\n );\n };\n\n props.getAxisData && props.getAxisData(axisData);\n // Callback function for chart, returns axis\n _getData(xScale, yScale);\n\n children = props.children({\n xScale,\n yScale,\n yScaleSecondary,\n containerHeight,\n containerWidth,\n });\n\n if (!props.hideTooltip && calloutProps!.isPopoverOpen) {\n callout = _generateCallout(calloutProps);\n }\n }\n const svgDimensions = {\n width: containerWidth,\n height: containerHeight,\n };\n\n const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left! - margins.right! - startFromX!;\n const yAxisTitleMaximumAllowedHeight =\n svgDimensions.height - margins.bottom! - margins.top! - removalValueForTextTuncate! - titleMargin;\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 && getComputedStyle(legendContainer);\n legendContainerHeight =\n ((legendContainer && legendContainer.getBoundingClientRect().height) || minLegendContainerHeight) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n }\n if (props.parentRef || chartContainer.current) {\n const container = props.parentRef ? props.parentRef : chartContainer.current!;\n const currentContainerWidth =\n props.reflowProps?.mode === 'min-width' && !_isFirstRender.current\n ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth())\n : container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 350;\n const shouldResize =\n containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setContainerWidth(currentContainerWidth);\n setContainerHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n function _onChartLeave(): void {\n props.onChartMouseLeave && props.onChartMouseLeave();\n }\n\n function _calculateChartMinWidth(): number {\n let labelWidth = 10; // Total padding on the left and right sides of the label\n\n // Case: rotated labels\n if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));\n }\n // Case: truncated labels\n else if (props.showXAxisLablesTooltip) {\n const tickValues = _tickValues.map(val => {\n const numChars = props.noOfCharsToTruncate || 4;\n return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;\n });\n\n const longestLabelWidth = calculateLongestLabelWidth(tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth);\n }\n // Case: wrapped labels\n else if (props.wrapXAxisLables) {\n const words: string[] = [];\n _tickValues.forEach((val: string) => {\n words.push(...val.toString().split(/\\s+/));\n });\n\n const longestLabelWidth = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);\n labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);\n }\n // Default case\n else {\n const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth);\n }\n\n let minChartWidth = margins.left! + margins.right! + labelWidth * (_tickValues.length - 1);\n\n if (\n [ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes(\n props.chartType,\n )\n ) {\n const minDomainMargin = 8;\n minChartWidth += minDomainMargin * 2;\n }\n\n return minChartWidth;\n }\n\n /**\n * We have use the {@link defaultTabbableElement } to fix\n * the Focus not landing on chart while tabbing, instead goes to legend.\n * This issue is observed in Area, line chart after performance optimization done in the PR {@link https://github.com/microsoft/fluentui/pull/27721 }\n * This issue is observed in Bar charts after the changes done by FocusZone team in the PR: {@link https://github.com/microsoft/fluentui/pull/24175 }\n * The issue in Bar Charts(VB and VSB) is due to a {@link FocusZone } update where previously an event listener was\n * attached on keydown to the window, so that whenever the tab key is pressed all outer FocusZone's\n * tab-indexes are updated (an outer FocusZone is a FocusZone that is not within another one).\n * But now after the above PR : they are attaching the\n * listeners to the FocusZone elements instead of the window. So in the first render cycle in Bar charts\n * bars are not created as in the first render cycle the size of the chart container is not known( or is 0)\n * which creates bars of height 0 so instead we do not create any bars and instead return empty fragments.\n *\n * We have tried 2 Approaches to fix the issue:\n * 1. Using the {@link elementRef} property of FocusZone where we dispatch event for tab keydown\n * after the second render cycle which triggers an update of the tab index in FocusZone.\n * But this is a hacky solution and not a proper fix and also elementRef is deprecated.\n * 2. Using the default tabbable element to fix the issue.\n */\n\n return (\n <div\n id={idForGraph}\n className={classes.root}\n role={'presentation'}\n ref={(rootElem: HTMLDivElement) => (chartContainer.current = rootElem)}\n onMouseLeave={_onChartLeave}\n >\n <div className={classes.chartWrapper} {...focusAttributes} {...arrowAttributes}>\n {_isFirstRender.current}\n <svg\n width={svgDimensions.width}\n height={svgDimensions.height}\n aria-label={props.chartTitle}\n style={{ display: 'block' }}\n {...svgProps}\n >\n <g\n ref={(e: SVGSVGElement | null) => {\n xAxisElement.current = e!;\n }}\n id={`xAxisGElement${idForGraph}`}\n // To add wrap of x axis lables feature, need to remove word height from svg height.\n transform={`translate(0, ${svgDimensions.height - margins.bottom! - removalValueForTextTuncate!})`}\n className={classes.xAxis}\n />\n {props.xAxisTitle !== undefined && props.xAxisTitle !== '' && (\n <SVGTooltipText\n content={props.xAxisTitle}\n textProps={{\n x: margins.left! + startFromX + xAxisTitleMaximumAllowedWidth / 2,\n y: svgDimensions.height - titleMargin,\n className: classes.axisTitle!,\n textAnchor: 'middle',\n }}\n maxWidth={xAxisTitleMaximumAllowedWidth}\n wrapContent={wrapContent}\n showBackground={true}\n />\n )}\n <g\n ref={(e: SVGSVGElement | null) => {\n yAxisElement.current = e!;\n }}\n id={`yAxisGElement${idForGraph}`}\n transform={`translate(${\n _useRtl ? svgDimensions.width - margins.right! - startFromX : margins.left! + startFromX\n }, 0)`}\n className={classes.yAxis}\n />\n {props.secondaryYScaleOptions && (\n <g>\n <g\n ref={(e: SVGSVGElement | null) => {\n yAxisElementSecondary.current = e!;\n }}\n id={`yAxisGElementSecondary${idForGraph}`}\n transform={`translate(${\n _useRtl ? margins.left! + startFromX : svgDimensions.width - margins.right! - startFromX\n }, 0)`}\n className={classes.yAxis}\n />\n {props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && (\n <SVGTooltipText\n content={props.secondaryYAxistitle}\n textProps={{\n x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right!,\n textAnchor: 'middle',\n transform: `translate(${\n _useRtl ? margins.right! / 2 - titleMargin : margins.right! / 2 + titleMargin\n },\n ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n className: classes.axisTitle!,\n }}\n maxWidth={yAxisTitleMaximumAllowedHeight}\n wrapContent={wrapContent}\n showBackground={true}\n />\n )}\n </g>\n )}\n {children}\n {props.yAxisTitle !== undefined && props.yAxisTitle !== '' && (\n <SVGTooltipText\n content={props.yAxisTitle}\n textProps={{\n x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n y: _useRtl\n ? svgDimensions.width - margins.right! / 2 + titleMargin\n : margins.left! / 2 + startFromX - titleMargin,\n textAnchor: 'middle',\n transform: `translate(0,\n ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n className: classes.axisTitle!,\n }}\n maxWidth={yAxisTitleMaximumAllowedHeight}\n wrapContent={wrapContent}\n showBackground={true}\n />\n )}\n </svg>\n </div>\n\n {!props.hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer = e)} className={classes.legendContainer}>\n {props.legendBars}\n </div>\n )}\n {/** The callout is used for narration, so keep it mounted on the DOM */}\n {callout && <React.Suspense fallback={<div>Loading...</div>}>{callout}</React.Suspense>}\n </div>\n );\n});\nCartesianChart.displayName = 'CartesianChart';\nCartesianChart.defaultProps = {\n hideTickOverlap: true,\n};\n"],"names":["CartesianChart","React","forwardRef","props","forwardedRef","chartContainer","useRef","legendContainer","minLegendContainerHeight","xAxisElement","yAxisElement","yAxisElementSecondary","margins","idForGraph","_reqID","_useRtl","useRtl","_tickValues","titleMargin","_isFirstRender","_xScale","isIntegralDataset","containerWidth","setContainerWidth","useState","containerHeight","setContainerHeight","isRemoveValCalculated","setIsRemoveValCalculated","removalValueForTextTuncate","setRemovalValueForTextTuncate","startFromX","setStartFromX","prevProps","setPrevProps","chartTypesToCheck","ChartTypes","HorizontalBarChartWithAxis","HeatMapChart","top","bottom","right","left","secondaryYScaleOptions","xAxisTitle","undefined","yAxisTitle","secondaryYAxistitle","classes","useCartesianChartStyles","focusAttributes","useFocusableGroup","arrowAttributes","useArrowNavigationGroup","axis","useEffect","_fitParentContainer","includes","chartType","showYAxisLables","maxYAxisLabelLength","calculateMaxYAxisLabelLength","points","yAxis","some","point","y","cancelAnimationFrame","height","width","wrapXAxisLables","rotateXAxisLables","xAxisType","XAxisTypes","StringAxis","rotateLabelProps","node","current","xAxis","rotatedHeight","rotateXAxisLabels","useImperativeHandle","componentRef","_generateCallout","calloutProps","createElement","ChartPopover","className","calculateLongestLabelWidth","data","map","svgProps","culture","dateLocalizeOptions","timeFormatLocale","customDateTimeFormatter","parentRef","margin","getmargins","callout","children","enableFirstRenderOptimization","XAxisParams","domainNRangeValues","getDomainNRangeValues","getDomainMargins","barwidth","tickValues","showRoundOffXTickValues","xAxisCount","xAxisTickCount","xAxistickSize","tickPadding","showXAxisLablesTooltip","xAxisPadding","xAxisInnerPadding","xAxisOuterPadding","hideTickOverlap","YAxisParams","yAxisTickFormat","yAxisTickCount","yMinValue","yMaxValue","maxOfYVal","yMinMaxValues","getMinMaxOfYAxis","yAxisType","yAxisPadding","xScale","NumericAxis","createNumericXAxis","tickParams","DateAxis","createDateXAxis","useUTC","createStringXAxis","datasetForXAxisDomain","wrapLabelProps","noOfCharsToTruncate","temp","createWrapOfXLabels","yScale","yScaleSecondary","axisData","yAxisDomainValues","YAxisType","createStringYAxis","stringDatasetForYAxisDomain","YAxisParamsSecondary","createYAxis","roundedTicks","createYAxisLabels","showYAxisLablesTooltip","_getData","getGraphData","getAxisData","hideTooltip","isPopoverOpen","svgDimensions","xAxisTitleMaximumAllowedWidth","yAxisTitleMaximumAllowedHeight","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","container","currentContainerWidth","reflowProps","mode","Math","max","_calculateChartMinWidth","currentContainerHeight","shouldResize","_onChartLeave","onChartMouseLeave","labelWidth","longestLabelWidth","ceil","cos","PI","val","numChars","toString","length","slice","words","forEach","push","split","minChartWidth","GroupedVerticalBarChart","VerticalBarChart","VerticalStackedBarChart","minDomainMargin","div","id","root","role","ref","rootElem","onMouseLeave","chartWrapper","svg","aria-label","chartTitle","style","display","g","e","transform","SVGTooltipText","content","textProps","x","axisTitle","textAnchor","maxWidth","wrapContent","showBackground","legendBars","Suspense","fallback","displayName","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["CartesianChart.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { ModifiedCartesianChartProps, HorizontalBarChartWithAxisDataPoint, HeatMapChartDataPoint } from '../../index';\nimport { useCartesianChartStyles } from './useCartesianChartStyles.styles';\nimport {\n createNumericXAxis,\n createStringXAxis,\n IAxisData,\n getDomainNRangeValues,\n createDateXAxis,\n createYAxis,\n createStringYAxis,\n IMargins,\n getMinMaxOfYAxis,\n XAxisTypes,\n YAxisType,\n createWrapOfXLabels,\n rotateXAxisLabels,\n calculateLongestLabelWidth,\n createYAxisLabels,\n ChartTypes,\n wrapContent,\n useRtl,\n} from '../../utilities/index';\nimport { SVGTooltipText } from '../../utilities/SVGTooltipText';\nimport { ChartPopover } from './ChartPopover';\nimport { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Cartesian Chart component\n * {@docCategory CartesianChart}\n */\nexport const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps> = React.forwardRef<\n HTMLDivElement,\n ModifiedCartesianChartProps\n>((props, forwardedRef) => {\n const chartContainer = React.useRef<HTMLDivElement>();\n let legendContainer: HTMLDivElement;\n const minLegendContainerHeight: number = 40;\n const xAxisElement = React.useRef<SVGSVGElement>();\n const yAxisElement = React.useRef<SVGSVGElement>();\n const yAxisElementSecondary = React.useRef<SVGSVGElement>();\n let margins: IMargins;\n const idForGraph: string = 'chart_';\n let _reqID: number;\n const _useRtl: boolean = useRtl();\n let _tickValues: (string | number)[];\n const titleMargin: number = 8;\n const _isFirstRender = React.useRef<boolean>(true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _xScale: any;\n let isIntegralDataset: boolean = true;\n\n const [containerWidth, setContainerWidth] = React.useState<number>(0);\n const [containerHeight, setContainerHeight] = React.useState<number>(0);\n const [isRemoveValCalculated, setIsRemoveValCalculated] = React.useState<boolean>(true);\n const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = React.useState<number>(0);\n const [startFromX, setStartFromX] = React.useState<number>(0);\n const [prevProps, setPrevProps] = React.useState<ModifiedCartesianChartProps | null>(null);\n\n const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart];\n /**\n * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.\n * So that, in RTL, left margins becomes right margins and viceversa.\n * As graph needs to be drawn perfecty, these values consider as default values.\n * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.\n */\n // eslint-disable-next-line prefer-const\n margins = {\n top: props.margins?.top ?? 20,\n bottom: props.margins?.bottom ?? 35,\n right: _useRtl ? props.margins?.left ?? 40 : props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20,\n left: _useRtl ? (props.margins?.right ?? props?.secondaryYScaleOptions ? 40 : 20) : props.margins?.left ?? 40,\n };\n if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {\n margins.bottom! = props.margins?.bottom ?? 55;\n }\n if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {\n margins.left! = _useRtl\n ? props.margins?.right ?? props?.secondaryYAxistitle\n ? 80\n : 40\n : props.margins?.left ?? 60;\n margins.right! = _useRtl ? props.margins?.left ?? 60 : props.margins?.right ?? props?.secondaryYAxistitle ? 80 : 40;\n }\n\n const classes = useCartesianChartStyles(props);\n const focusAttributes = useFocusableGroup();\n const arrowAttributes = useArrowNavigationGroup({ axis: 'horizontal' });\n // ComponentdidMount and Componentwillunmount logic\n React.useEffect(() => {\n _fitParentContainer();\n if (props !== null) {\n setPrevProps(props);\n }\n if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n if (startFromX !== maxYAxisLabelLength) {\n setStartFromX(maxYAxisLabelLength);\n }\n } else if (startFromX !== 0) {\n setStartFromX(0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n return () => {\n cancelAnimationFrame(_reqID);\n };\n }, [props]);\n\n // ComponentDidUpdate logic\n React.useEffect(() => {\n if (prevProps) {\n if (prevProps.height !== props.height || prevProps.width !== props.width) {\n _fitParentContainer();\n }\n }\n if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {\n const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis!);\n if (startFromX !== maxYAxisLabelLength) {\n setStartFromX(maxYAxisLabelLength);\n }\n } else if (startFromX !== 0) {\n setStartFromX(0);\n }\n if (prevProps !== null && prevProps.points !== props.points) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n isIntegralDataset = !props.points.some((point: { y: number }) => point.y % 1 !== 0);\n }\n }, [props, prevProps]);\n\n React.useEffect(() => {\n if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n const rotateLabelProps = {\n node: xAxisElement.current!,\n xAxis: _xScale,\n };\n const rotatedHeight = rotateXAxisLabels(rotateLabelProps);\n\n if (\n isRemoveValCalculated &&\n removalValueForTextTuncate !== rotatedHeight! + margins.bottom! &&\n rotatedHeight! > 0\n ) {\n setRemovalValueForTextTuncate(rotatedHeight! + margins.bottom!);\n setIsRemoveValCalculated(false);\n }\n }\n });\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: chartContainer.current ?? null,\n }),\n [],\n );\n\n /**\n * Dedicated function to return the Callout JSX Element , which can further be used to only call this when\n * only the calloutprops and charthover props changes.\n * @param calloutProps\n * @param chartHoverProps\n * @returns\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function _generateCallout(calloutProps: any): JSX.Element {\n return <ChartPopover {...calloutProps} />;\n }\n\n function calculateMaxYAxisLabelLength(\n chartType: ChartTypes,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n points: any[],\n className: string,\n ): number {\n if (chartType === ChartTypes.HeatMapChart) {\n return calculateLongestLabelWidth(\n points[0]?.data?.map((point: HeatMapChartDataPoint) => point.y),\n `.${className} text`,\n );\n } else {\n return calculateLongestLabelWidth(\n points?.map((point: HorizontalBarChartWithAxisDataPoint) => point.y),\n `.${className} text`,\n );\n }\n }\n\n const {\n calloutProps,\n points,\n chartType,\n svgProps,\n culture,\n dateLocalizeOptions,\n timeFormatLocale,\n customDateTimeFormatter,\n } = props;\n if (props.parentRef) {\n _fitParentContainer();\n }\n const margin = { ...margins };\n if (chartTypesToCheck.includes(props.chartType)) {\n if (!_useRtl) {\n margin.left! += startFromX;\n } else {\n margin.right! += startFromX;\n }\n }\n // Callback for margins to the chart\n props.getmargins && props.getmargins(margin);\n\n let callout: JSX.Element | null = null;\n\n let children = null;\n if ((props.enableFirstRenderOptimization && chartContainer.current) || !props.enableFirstRenderOptimization) {\n _isFirstRender.current = false;\n const XAxisParams = {\n domainNRangeValues: getDomainNRangeValues(\n points,\n props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins,\n containerWidth,\n chartType,\n _useRtl,\n props.xAxisType,\n props.barwidth!,\n props.tickValues!,\n // This is only used for Horizontal Bar Chart with Axis for y as string axis\n startFromX,\n ),\n containerHeight: containerHeight - removalValueForTextTuncate!,\n margins: margins,\n xAxisElement: xAxisElement.current!,\n showRoundOffXTickValues: true,\n xAxisCount: props.xAxisTickCount,\n xAxistickSize: props.xAxistickSize,\n tickPadding: props.tickPadding || props.showXAxisLablesTooltip ? 5 : 10,\n xAxisPadding: props.xAxisPadding,\n xAxisInnerPadding: props.xAxisInnerPadding,\n xAxisOuterPadding: props.xAxisOuterPadding,\n containerWidth: containerWidth,\n hideTickOverlap:\n props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables,\n };\n\n const YAxisParams = {\n margins: margins,\n containerWidth: containerWidth,\n containerHeight: containerHeight - removalValueForTextTuncate!,\n yAxisElement: yAxisElement.current,\n yAxisTickFormat: props.yAxisTickFormat!,\n yAxisTickCount: props.yAxisTickCount!,\n yMinValue: props.yMinValue || 0,\n yMaxValue: props.yMaxValue || 0,\n tickPadding: 10,\n maxOfYVal: props.maxOfYVal,\n yMinMaxValues: getMinMaxOfYAxis(points, chartType, props.yAxisType),\n // please note these padding default values must be consistent in here\n // and the parent chart(HBWA/Vertical etc..) for more details refer example\n // http://using-d3js.com/04_07_ordinal_scales.html\n yAxisPadding: props.yAxisPadding || 0,\n };\n /**\n * These scales used for 2 purposes.\n * 1. To create x and y axis\n * 2. To draw the graph.\n * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let xScale: any;\n let tickValues: (string | number)[];\n switch (props.xAxisType!) {\n case XAxisTypes.NumericAxis:\n ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n break;\n case XAxisTypes.DateAxis:\n ({ xScale, tickValues } = createDateXAxis(\n XAxisParams,\n props.tickParams!,\n culture,\n dateLocalizeOptions,\n timeFormatLocale,\n customDateTimeFormatter,\n props.useUTC,\n ));\n break;\n case XAxisTypes.StringAxis:\n ({ xScale, tickValues } = createStringXAxis(\n XAxisParams,\n props.tickParams!,\n props.datasetForXAxisDomain!,\n culture,\n ));\n break;\n default:\n ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams!, props.chartType, culture));\n }\n _xScale = xScale;\n _tickValues = tickValues;\n\n /*\n * To enable wrapping of x axis tick values or to display complete x axis tick values,\n * we need to calculate how much space it needed to render the text.\n * No need to re-calculate every time the chart renders and same time need to get an update. So using set\n * Required space will be calculated first time chart rendering and if any width/height of chart updated.\n * */\n if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {\n const wrapLabelProps = {\n node: xAxisElement.current!,\n xAxis: xScale,\n showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,\n noOfCharsToTruncate: props.noOfCharsToTruncate || 4,\n };\n const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);\n // this value need to be updated for draw graph updated. So instead of using private value, using set\n if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {\n setRemovalValueForTextTuncate(temp);\n setIsRemoveValCalculated(false);\n }\n }\n /**\n * These scales used for 2 purposes.\n * 1. To create x and y axis\n * 2. To draw the graph.\n * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let yScale: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let yScaleSecondary: any;\n const axisData: IAxisData = { yAxisDomainValues: [] };\n if (props.yAxisType && props.yAxisType === YAxisType.StringAxis) {\n yScale = createStringYAxis(\n YAxisParams,\n props.stringDatasetForYAxisDomain!,\n _useRtl,\n props.chartType,\n props.barwidth,\n culture,\n );\n } else {\n if (props?.secondaryYScaleOptions) {\n const YAxisParamsSecondary = {\n margins: margins,\n containerWidth: containerWidth,\n containerHeight: containerHeight - removalValueForTextTuncate!,\n yAxisElement: yAxisElementSecondary.current,\n yAxisTickFormat: props.yAxisTickFormat!,\n yAxisTickCount: props.yAxisTickCount!,\n yMinValue: props.secondaryYScaleOptions?.yMinValue || 0,\n yMaxValue: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n tickPadding: 10,\n maxOfYVal: props.secondaryYScaleOptions?.yMaxValue ?? 100,\n yMinMaxValues: getMinMaxOfYAxis(points, chartType),\n yAxisPadding: props.yAxisPadding,\n };\n\n yScaleSecondary = createYAxis(\n YAxisParamsSecondary,\n _useRtl,\n axisData,\n chartType,\n props.barwidth!,\n isIntegralDataset,\n true,\n props.roundedTicks!,\n );\n }\n yScale = createYAxis(\n YAxisParams,\n _useRtl,\n axisData,\n chartType,\n props.barwidth!,\n isIntegralDataset,\n false,\n props.roundedTicks!,\n );\n }\n\n /*\n * To create y axis tick values by if specified\n truncating the rest of the text and showing elipsis\n or showing the whole string,\n * */\n chartTypesToCheck.includes(props.chartType) &&\n yScale &&\n createYAxisLabels(\n yAxisElement.current!,\n yScale,\n props.noOfCharsToTruncate || 4,\n props.showYAxisLablesTooltip || false,\n startFromX,\n _useRtl,\n );\n\n // Call back to the chart.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const _getData = (xScale: any, yScale: any) => {\n props.getGraphData &&\n props.getGraphData(\n xScale,\n yScale,\n containerHeight - removalValueForTextTuncate!,\n containerWidth,\n xAxisElement.current,\n yAxisElement.current,\n );\n };\n\n props.getAxisData && props.getAxisData(axisData);\n // Callback function for chart, returns axis\n _getData(xScale, yScale);\n\n children = props.children({\n xScale,\n yScale,\n yScaleSecondary,\n containerHeight,\n containerWidth,\n });\n\n if (!props.hideTooltip && calloutProps!.isPopoverOpen) {\n callout = _generateCallout(calloutProps);\n }\n }\n const svgDimensions = {\n width: containerWidth,\n height: containerHeight,\n };\n\n const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left! - margins.right! - startFromX!;\n const yAxisTitleMaximumAllowedHeight =\n svgDimensions.height - margins.bottom! - margins.top! - removalValueForTextTuncate! - titleMargin;\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 && getComputedStyle(legendContainer);\n legendContainerHeight =\n ((legendContainer && legendContainer.getBoundingClientRect().height) || minLegendContainerHeight) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n }\n if (props.parentRef || chartContainer.current) {\n const container = props.parentRef ? props.parentRef : chartContainer.current!;\n const currentContainerWidth =\n props.reflowProps?.mode === 'min-width' && !_isFirstRender.current\n ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth())\n : container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 350;\n const shouldResize =\n containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setContainerWidth(currentContainerWidth);\n setContainerHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n function _onChartLeave(): void {\n props.onChartMouseLeave && props.onChartMouseLeave();\n }\n\n function _calculateChartMinWidth(): number {\n let labelWidth = 10; // Total padding on the left and right sides of the label\n\n // Case: rotated labels\n if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType! === XAxisTypes.StringAxis) {\n const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));\n }\n // Case: truncated labels\n else if (props.showXAxisLablesTooltip) {\n const tickValues = _tickValues.map(val => {\n const numChars = props.noOfCharsToTruncate || 4;\n return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;\n });\n\n const longestLabelWidth = calculateLongestLabelWidth(tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth);\n }\n // Case: wrapped labels\n else if (props.wrapXAxisLables) {\n const words: string[] = [];\n _tickValues.forEach((val: string) => {\n words.push(...val.toString().split(/\\s+/));\n });\n\n const longestLabelWidth = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);\n labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);\n }\n // Default case\n else {\n const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);\n labelWidth += Math.ceil(longestLabelWidth);\n }\n\n let minChartWidth = margins.left! + margins.right! + labelWidth * (_tickValues.length - 1);\n\n if (\n [ChartTypes.GroupedVerticalBarChart, ChartTypes.VerticalBarChart, ChartTypes.VerticalStackedBarChart].includes(\n props.chartType,\n )\n ) {\n const minDomainMargin = 8;\n minChartWidth += minDomainMargin * 2;\n }\n\n return minChartWidth;\n }\n\n /**\n * We have use the {@link defaultTabbableElement } to fix\n * the Focus not landing on chart while tabbing, instead goes to legend.\n * This issue is observed in Area, line chart after performance optimization done in the PR {@link https://github.com/microsoft/fluentui/pull/27721 }\n * This issue is observed in Bar charts after the changes done by FocusZone team in the PR: {@link https://github.com/microsoft/fluentui/pull/24175 }\n * The issue in Bar Charts(VB and VSB) is due to a {@link FocusZone } update where previously an event listener was\n * attached on keydown to the window, so that whenever the tab key is pressed all outer FocusZone's\n * tab-indexes are updated (an outer FocusZone is a FocusZone that is not within another one).\n * But now after the above PR : they are attaching the\n * listeners to the FocusZone elements instead of the window. So in the first render cycle in Bar charts\n * bars are not created as in the first render cycle the size of the chart container is not known( or is 0)\n * which creates bars of height 0 so instead we do not create any bars and instead return empty fragments.\n *\n * We have tried 2 Approaches to fix the issue:\n * 1. Using the {@link elementRef} property of FocusZone where we dispatch event for tab keydown\n * after the second render cycle which triggers an update of the tab index in FocusZone.\n * But this is a hacky solution and not a proper fix and also elementRef is deprecated.\n * 2. Using the default tabbable element to fix the issue.\n */\n\n return (\n <div\n id={idForGraph}\n className={classes.root}\n role={'presentation'}\n ref={(rootElem: HTMLDivElement) => (chartContainer.current = rootElem)}\n onMouseLeave={_onChartLeave}\n >\n <div className={classes.chartWrapper} {...focusAttributes} {...arrowAttributes}>\n {_isFirstRender.current}\n <svg\n width={svgDimensions.width}\n height={svgDimensions.height}\n aria-label={props.chartTitle}\n style={{ display: 'block' }}\n {...svgProps}\n >\n <g\n ref={(e: SVGSVGElement | null) => {\n xAxisElement.current = e!;\n }}\n id={`xAxisGElement${idForGraph}`}\n // To add wrap of x axis lables feature, need to remove word height from svg height.\n transform={`translate(0, ${svgDimensions.height - margins.bottom! - removalValueForTextTuncate!})`}\n className={classes.xAxis}\n />\n {props.xAxisTitle !== undefined && props.xAxisTitle !== '' && (\n <SVGTooltipText\n content={props.xAxisTitle}\n textProps={{\n x: margins.left! + startFromX + xAxisTitleMaximumAllowedWidth / 2,\n y: svgDimensions.height - titleMargin,\n className: classes.axisTitle!,\n textAnchor: 'middle',\n }}\n maxWidth={xAxisTitleMaximumAllowedWidth}\n wrapContent={wrapContent}\n showBackground={true}\n className={classes.svgTooltip}\n />\n )}\n <g\n ref={(e: SVGSVGElement | null) => {\n yAxisElement.current = e!;\n }}\n id={`yAxisGElement${idForGraph}`}\n transform={`translate(${\n _useRtl ? svgDimensions.width - margins.right! - startFromX : margins.left! + startFromX\n }, 0)`}\n className={classes.yAxis}\n />\n {props.secondaryYScaleOptions && (\n <g>\n <g\n ref={(e: SVGSVGElement | null) => {\n yAxisElementSecondary.current = e!;\n }}\n id={`yAxisGElementSecondary${idForGraph}`}\n transform={`translate(${\n _useRtl ? margins.left! + startFromX : svgDimensions.width - margins.right! - startFromX\n }, 0)`}\n className={classes.yAxis}\n />\n {props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && (\n <SVGTooltipText\n content={props.secondaryYAxistitle}\n textProps={{\n x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right!,\n textAnchor: 'middle',\n transform: `translate(${\n _useRtl ? margins.right! / 2 - titleMargin : margins.right! / 2 + titleMargin\n },\n ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n className: classes.axisTitle!,\n }}\n maxWidth={yAxisTitleMaximumAllowedHeight}\n wrapContent={wrapContent}\n showBackground={true}\n className={classes.svgTooltip}\n />\n )}\n </g>\n )}\n {children}\n {props.yAxisTitle !== undefined && props.yAxisTitle !== '' && (\n <SVGTooltipText\n content={props.yAxisTitle}\n textProps={{\n x: (yAxisTitleMaximumAllowedHeight - margins.bottom!) / 2 + removalValueForTextTuncate!,\n y: _useRtl ? svgDimensions.width - margins.right! / 2 + titleMargin : margins.left! / 2 - titleMargin,\n textAnchor: 'middle',\n transform: `translate(0,\n ${svgDimensions.height - margins.bottom! - margins.top! - titleMargin})rotate(-90)`,\n className: classes.axisTitle!,\n }}\n maxWidth={yAxisTitleMaximumAllowedHeight}\n wrapContent={wrapContent}\n showBackground={true}\n className={classes.svgTooltip}\n />\n )}\n </svg>\n </div>\n\n {!props.hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer = e)} className={classes.legendContainer}>\n {props.legendBars}\n </div>\n )}\n {/** The callout is used for narration, so keep it mounted on the DOM */}\n {callout && <React.Suspense fallback={<div>Loading...</div>}>{callout}</React.Suspense>}\n </div>\n );\n});\nCartesianChart.displayName = 'CartesianChart';\nCartesianChart.defaultProps = {\n hideTickOverlap: true,\n};\n"],"names":["CartesianChart","React","forwardRef","props","forwardedRef","chartContainer","useRef","legendContainer","minLegendContainerHeight","xAxisElement","yAxisElement","yAxisElementSecondary","margins","idForGraph","_reqID","_useRtl","useRtl","_tickValues","titleMargin","_isFirstRender","_xScale","isIntegralDataset","containerWidth","setContainerWidth","useState","containerHeight","setContainerHeight","isRemoveValCalculated","setIsRemoveValCalculated","removalValueForTextTuncate","setRemovalValueForTextTuncate","startFromX","setStartFromX","prevProps","setPrevProps","chartTypesToCheck","ChartTypes","HorizontalBarChartWithAxis","HeatMapChart","top","bottom","right","left","secondaryYScaleOptions","xAxisTitle","undefined","yAxisTitle","secondaryYAxistitle","classes","useCartesianChartStyles","focusAttributes","useFocusableGroup","arrowAttributes","useArrowNavigationGroup","axis","useEffect","_fitParentContainer","includes","chartType","showYAxisLables","maxYAxisLabelLength","calculateMaxYAxisLabelLength","points","yAxis","some","point","y","cancelAnimationFrame","height","width","wrapXAxisLables","rotateXAxisLables","xAxisType","XAxisTypes","StringAxis","rotateLabelProps","node","current","xAxis","rotatedHeight","rotateXAxisLabels","useImperativeHandle","componentRef","_generateCallout","calloutProps","createElement","ChartPopover","className","calculateLongestLabelWidth","data","map","svgProps","culture","dateLocalizeOptions","timeFormatLocale","customDateTimeFormatter","parentRef","margin","getmargins","callout","children","enableFirstRenderOptimization","XAxisParams","domainNRangeValues","getDomainNRangeValues","getDomainMargins","barwidth","tickValues","showRoundOffXTickValues","xAxisCount","xAxisTickCount","xAxistickSize","tickPadding","showXAxisLablesTooltip","xAxisPadding","xAxisInnerPadding","xAxisOuterPadding","hideTickOverlap","YAxisParams","yAxisTickFormat","yAxisTickCount","yMinValue","yMaxValue","maxOfYVal","yMinMaxValues","getMinMaxOfYAxis","yAxisType","yAxisPadding","xScale","NumericAxis","createNumericXAxis","tickParams","DateAxis","createDateXAxis","useUTC","createStringXAxis","datasetForXAxisDomain","wrapLabelProps","noOfCharsToTruncate","temp","createWrapOfXLabels","yScale","yScaleSecondary","axisData","yAxisDomainValues","YAxisType","createStringYAxis","stringDatasetForYAxisDomain","YAxisParamsSecondary","createYAxis","roundedTicks","createYAxisLabels","showYAxisLablesTooltip","_getData","getGraphData","getAxisData","hideTooltip","isPopoverOpen","svgDimensions","xAxisTitleMaximumAllowedWidth","yAxisTitleMaximumAllowedHeight","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","container","currentContainerWidth","reflowProps","mode","Math","max","_calculateChartMinWidth","currentContainerHeight","shouldResize","_onChartLeave","onChartMouseLeave","labelWidth","longestLabelWidth","ceil","cos","PI","val","numChars","toString","length","slice","words","forEach","push","split","minChartWidth","GroupedVerticalBarChart","VerticalBarChart","VerticalStackedBarChart","minDomainMargin","div","id","root","role","ref","rootElem","onMouseLeave","chartWrapper","svg","aria-label","chartTitle","style","display","g","e","transform","SVGTooltipText","content","textProps","x","axisTitle","textAnchor","maxWidth","wrapContent","showBackground","svgTooltip","legendBars","Suspense","fallback","displayName","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n\n /**\n * Width of the chart.\n */\n width?: number;\n\n /**\n * Height of the chart.\n */\n height?: number;\n\n /**\n * Color of the chart.\n */\n color?: string;\n\n /**\n * Link to redirect if click action for graph\n */\n href?: string;\n\n /**\n * prop to check if the chart is selected or hovered upon to determine opacity\n */\n shouldHighlight?: boolean;\n\n /**\n * prop to check if the Page is in Rtl\n */\n useRtl?: boolean;\n\n /**\n * color of the line\n */\n lineColor?: string;\n\n /**\n * boolean flag which determines if shape is drawn in callout\n */\n toDrawShape?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n /**\n * Style for the root element.\n */\n root?: string;\n\n /**\n * Style for the element containing the x-axis.\n */\n xAxis?: string;\n\n /**\n * Style for the element containing the y-axis.\n */\n yAxis?: string;\n\n /**\n * Style for legend container\n */\n legendContainer?: string;\n\n /**\n * line hover box css\n */\n hover?: string;\n\n /**\n * styles for description message\n */\n descriptionMessage?: string;\n\n /**\n * styles for tooltip\n */\n tooltip?: string;\n\n /**\n * styles for tooltip\n */\n axisTitle?: string;\n\n /**\n * Style for the chart Title.\n */\n chartTitle?: string;\n\n /**\n * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n */\n opacityChangeOnHover?: string;\n\n /**\n * styles for the shape object in the callout\n */\n shapeStyles?: string;\n\n /**\n * Styles for the chart wrapper div\n */\n chartWrapper?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\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 /**\n * Margins for the chart\n * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n */\n margins?: Margins;\n\n /** decides wether to show/hide legends\n * @defaultvalue false\n */\n hideLegend?: boolean;\n\n /**\n * Do not show tooltips in chart\n * @default false\n */\n hideTooltip?: boolean;\n\n /**\n * this prop takes values that you want the chart to render on x-axis\n * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n */\n tickValues?: number[] | Date[] | string[] | undefined;\n\n /**\n * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n */\n tickFormat?: string;\n\n /**\n * Width of line stroke\n */\n strokeWidth?: number;\n\n /**\n * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n * @default 10\n */\n xAxisTickPadding?: number;\n\n /**\n * the format in for the data on y-axis. For data object this can be specified to your requirement.\n * Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n * Please look at https://github.com/d3/d3-format for all the formats supported\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yAxisTickFormat?: any;\n\n /**\n * Secondary y-scale options\n * By default this is not defined, meaning there will be no secondary y-scale.\n */\n secondaryYScaleOptions?: {\n /** Minimum value (0 by default) */\n yMinValue?: number;\n /** Maximum value (100 by default) */\n yMaxValue?: number;\n };\n\n /**\n * minimum data value point in y-axis\n */\n yMinValue?: number;\n\n /**\n * maximum data value point in y-axis\n */\n yMaxValue?: number;\n\n /**\n * maximum data value point in x-axis\n */\n xMaxValue?: number;\n\n /**\n * Number of ticks on the y-axis.\n * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n * @default 4\n */\n yAxisTickCount?: number;\n\n /**\n * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n * Does not work for string axis.\n * @default 6\n */\n xAxisTickCount?: number;\n\n /**\n * define the size of the tick lines on the x-axis\n * @default 10\n */\n xAxistickSize?: number;\n\n /**\n * defines the space between the tick line and the data label\n * @default 10\n */\n tickPadding?: number;\n\n /**\n * Url that the data-viz needs to redirect to upon clicking on it\n */\n href?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n legendsOverflowText?: any;\n\n /**\n * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n */\n enabledLegendsWrapLines?: boolean;\n\n /*\n * props for the legends in the chart\n */\n legendProps?: Partial<LegendsProps>;\n\n /**\n *@default false\n *Used for to elipse x axis labes and show tooltip on x axis labels\n */\n showXAxisLablesTooltip?: boolean;\n\n /**\n * @default 4\n * Used for X axis labels\n * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n */\n noOfCharsToTruncate?: number;\n\n /**\n * @default false\n * Used to wrap x axis labels values (whole value)\n */\n wrapXAxisLables?: boolean;\n\n /**\n * @default false\n * Used to rotate x axis labels by 45 degrees\n */\n rotateXAxisLables?: boolean;\n\n /**\n * The prop used to define the date time localization options\n */\n dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n /**\n * The prop used to define a custom locale for the date time format.\n */\n timeFormatLocale?: TimeLocaleDefinition;\n\n /**\n * The prop used to define a custom datetime formatter for date axis.\n */\n customDateTimeFormatter?: (dateTime: Date) => string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: CartesianChartStyles;\n\n /**\n * Callout customization props\n */\n calloutProps?: Partial<ChartPopoverProps>;\n\n /**\n * props for the svg; use this to include aria-* or other attributes on the tag\n */\n svgProps?: React.SVGProps<SVGSVGElement>;\n\n /**\n * Props related to reflow behavior of the chart\n */\n reflowProps?: {\n /**\n * Determines the reflow behavior of the chart.\n * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n * @default 'none'\n */\n mode: 'none' | 'min-width';\n };\n\n /**\n * Prop to set the x axis title\n * @default undefined\n * Minimum bottom margin required for x axis title is 55px\n */\n\n xAxisTitle?: string;\n\n /**\n * Prop to set the y axis title\n * @default undefined\n * Minimum left margin required for y axis title is 60px and for RTL is 40px\n * Minimum right margin required for y axis title is 40px and for RTL is 60px\n */\n yAxisTitle?: string;\n\n /**\n * Prop to set the secondary y axis title\n * @default undefined\n * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n */\n secondaryYAxistitle?: string;\n\n /**\n * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n * @default true\n */\n useUTC?: string | boolean;\n\n /**\n * @default false\n * The prop used to decide rounded ticks on y axis\n */\n roundedTicks?: boolean;\n\n /**\n * Determines whether overlapping x-axis tick labels should be hidden.\n * @default true\n */\n hideTickOverlap?: boolean;\n\n /**\n * Define a custom callout props override\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\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\nexport interface YValueHover {\n legend?: string;\n y?: number;\n color?: string;\n data?: string | number;\n shouldDrawBorderBottom?: boolean;\n yAxisCalloutData?: string | { [id: string]: number };\n index?: number;\n callOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface ChildProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale?: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yScale?: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yScaleSecondary?: any;\n containerHeight?: number;\n containerWidth?: number;\n optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\n /**\n * Define the chart title\n */\n chartTitle?: string;\n\n /**\n * Only used for Area chart\n * Value used to draw y axis of that chart.\n */\n maxOfYVal?: number;\n\n /**\n * Data of the chart\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n points: any;\n\n /**\n * Define type of the chart\n */\n chartType: ChartTypes;\n\n /** X axis type */\n xAxisType: XAxisTypes;\n\n /** Y axis type */\n yAxisType?: YAxisType;\n\n /**\n * Legends of the chart.\n */\n legendBars: JSX.Element | null;\n\n /**\n * Callout props\n */\n calloutProps?: ChartPopoverProps;\n\n /**\n * Callback method used for to get margins to the chart.\n */\n getmargins?: (margins: Margins) => void;\n\n /**\n * This is a call back method to the chart from cartesian chart.\n * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n * It also contians an optional param xAxisElement - defines as x axis scale element.\n * This param used to enable feature word wrap of Xaxis.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n getGraphData?: any;\n\n /**\n * Used for bar chart graphs.\n * To define width of the bar\n */\n barwidth?: number;\n\n /**\n * Used for tick styles of the x axis of the chart\n * Tick params are applicable for date axis only.\n */\n tickParams?: {\n tickValues?: number[] | Date[] | string[];\n tickFormat?: string;\n };\n\n /**\n * it's padding between bar's or lines in the graph\n */\n xAxisPadding?: number;\n\n /**\n * it's padding between bar's or lines in the graph\n */\n yAxisPadding?: number;\n\n /**\n * Children elements specific to derived chart types.\n */\n children(props: ChildProps): React.ReactNode;\n\n /**\n * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.\n * @default false\n * @type \\{boolean \\}\n */\n isCalloutForStack?: boolean;\n\n /** dataset values to find out domain of the String axis\n * Present using for only vertical stacked bar chart and grouped vertical bar chart\n */\n datasetForXAxisDomain?: string[];\n\n /** Own callout design */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customizedCallout?: any;\n\n /**\n * if the data points for the y-axis is of type string, then we need to give this\n * prop to construct the y-axis\n */\n stringDatasetForYAxisDomain?: string[];\n\n /**\n * The prop used to define the culture to localize the numbers and date\n */\n culture?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n getAxisData?: any;\n\n /**\n * Callback method used when mouse leaves the chart boundary.\n */\n onChartMouseLeave?: () => void;\n\n /** Callback method to get extra margins for domain */\n getDomainMargins?: (containerWidth: number) => Margins;\n\n /** Padding between each bar/line-point */\n xAxisInnerPadding?: number;\n\n /** Padding before first bar/line-point and after last bar/line-point */\n xAxisOuterPadding?: number;\n\n /**\n *@default false\n *Used for to elipse y axis labes and show tooltip on x axis labels\n */\n showYAxisLablesTooltip?: boolean;\n\n /**\n *@default false\n *Used for showing complete y axis lables */\n showYAxisLables?: boolean;\n\n /**\n * @default false\n * Used to control the first render cycle Performance optimization code.\n */\n enableFirstRenderOptimization?: boolean;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\n /**\n * Additional CSS class(es) to apply to the Chart.\n */\n className?: string;\n\n /**\n * Width of the chart.\n */\n width?: number;\n\n /**\n * Height of the chart.\n */\n height?: number;\n\n /**\n * Color of the chart.\n */\n color?: string;\n\n /**\n * Link to redirect if click action for graph\n */\n href?: string;\n\n /**\n * prop to check if the chart is selected or hovered upon to determine opacity\n */\n shouldHighlight?: boolean;\n\n /**\n * prop to check if the Page is in Rtl\n */\n useRtl?: boolean;\n\n /**\n * color of the line\n */\n lineColor?: string;\n\n /**\n * boolean flag which determines if shape is drawn in callout\n */\n toDrawShape?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n /**\n * Style for the root element.\n */\n root?: string;\n\n /**\n * Style for the element containing the x-axis.\n */\n xAxis?: string;\n\n /**\n * Style for the element containing the y-axis.\n */\n yAxis?: string;\n\n /**\n * Style for legend container\n */\n legendContainer?: string;\n\n /**\n * line hover box css\n */\n hover?: string;\n\n /**\n * styles for description message\n */\n descriptionMessage?: string;\n\n /**\n * styles for tooltip\n */\n tooltip?: string;\n\n /**\n * styles for tooltip\n */\n axisTitle?: string;\n\n /**\n * Style for the chart Title.\n */\n chartTitle?: string;\n\n /**\n * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n */\n opacityChangeOnHover?: string;\n\n /**\n * styles for the shape object in the callout\n */\n shapeStyles?: string;\n\n /**\n * Styles for the chart wrapper div\n */\n chartWrapper?: string;\n\n /**\n * Styles for the svg tooltip\n */\n svgTooltip?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\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 /**\n * Margins for the chart\n * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n */\n margins?: Margins;\n\n /** decides wether to show/hide legends\n * @defaultvalue false\n */\n hideLegend?: boolean;\n\n /**\n * Do not show tooltips in chart\n * @default false\n */\n hideTooltip?: boolean;\n\n /**\n * this prop takes values that you want the chart to render on x-axis\n * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n */\n tickValues?: number[] | Date[] | string[] | undefined;\n\n /**\n * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n */\n tickFormat?: string;\n\n /**\n * Width of line stroke\n */\n strokeWidth?: number;\n\n /**\n * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n * @default 10\n */\n xAxisTickPadding?: number;\n\n /**\n * the format in for the data on y-axis. For data object this can be specified to your requirement.\n * Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n * Please look at https://github.com/d3/d3-format for all the formats supported\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yAxisTickFormat?: any;\n\n /**\n * Secondary y-scale options\n * By default this is not defined, meaning there will be no secondary y-scale.\n */\n secondaryYScaleOptions?: {\n /** Minimum value (0 by default) */\n yMinValue?: number;\n /** Maximum value (100 by default) */\n yMaxValue?: number;\n };\n\n /**\n * minimum data value point in y-axis\n */\n yMinValue?: number;\n\n /**\n * maximum data value point in y-axis\n */\n yMaxValue?: number;\n\n /**\n * maximum data value point in x-axis\n */\n xMaxValue?: number;\n\n /**\n * Number of ticks on the y-axis.\n * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n * @default 4\n */\n yAxisTickCount?: number;\n\n /**\n * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n * Does not work for string axis.\n * @default 6\n */\n xAxisTickCount?: number;\n\n /**\n * define the size of the tick lines on the x-axis\n * @default 10\n */\n xAxistickSize?: number;\n\n /**\n * defines the space between the tick line and the data label\n * @default 10\n */\n tickPadding?: number;\n\n /**\n * Url that the data-viz needs to redirect to upon clicking on it\n */\n href?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n legendsOverflowText?: any;\n\n /**\n * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n */\n enabledLegendsWrapLines?: boolean;\n\n /*\n * props for the legends in the chart\n */\n legendProps?: Partial<LegendsProps>;\n\n /**\n *@default false\n *Used for to elipse x axis labes and show tooltip on x axis labels\n */\n showXAxisLablesTooltip?: boolean;\n\n /**\n * @default 4\n * Used for X axis labels\n * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n */\n noOfCharsToTruncate?: number;\n\n /**\n * @default false\n * Used to wrap x axis labels values (whole value)\n */\n wrapXAxisLables?: boolean;\n\n /**\n * @default false\n * Used to rotate x axis labels by 45 degrees\n */\n rotateXAxisLables?: boolean;\n\n /**\n * The prop used to define the date time localization options\n */\n dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n /**\n * The prop used to define a custom locale for the date time format.\n */\n timeFormatLocale?: TimeLocaleDefinition;\n\n /**\n * The prop used to define a custom datetime formatter for date axis.\n */\n customDateTimeFormatter?: (dateTime: Date) => string;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: CartesianChartStyles;\n\n /**\n * Callout customization props\n */\n calloutProps?: Partial<ChartPopoverProps>;\n\n /**\n * props for the svg; use this to include aria-* or other attributes on the tag\n */\n svgProps?: React.SVGProps<SVGSVGElement>;\n\n /**\n * Props related to reflow behavior of the chart\n */\n reflowProps?: {\n /**\n * Determines the reflow behavior of the chart.\n * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n * @default 'none'\n */\n mode: 'none' | 'min-width';\n };\n\n /**\n * Prop to set the x axis title\n * @default undefined\n * Minimum bottom margin required for x axis title is 55px\n */\n\n xAxisTitle?: string;\n\n /**\n * Prop to set the y axis title\n * @default undefined\n * Minimum left margin required for y axis title is 60px and for RTL is 40px\n * Minimum right margin required for y axis title is 40px and for RTL is 60px\n */\n yAxisTitle?: string;\n\n /**\n * Prop to set the secondary y axis title\n * @default undefined\n * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n */\n secondaryYAxistitle?: string;\n\n /**\n * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n * @default true\n */\n useUTC?: string | boolean;\n\n /**\n * @default false\n * The prop used to decide rounded ticks on y axis\n */\n roundedTicks?: boolean;\n\n /**\n * Determines whether overlapping x-axis tick labels should be hidden.\n * @default true\n */\n hideTickOverlap?: boolean;\n\n /**\n * Define a custom callout props override\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\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\nexport interface YValueHover {\n legend?: string;\n y?: number;\n color?: string;\n data?: string | number;\n shouldDrawBorderBottom?: boolean;\n yAxisCalloutData?: string | { [id: string]: number };\n index?: number;\n callOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface ChildProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale?: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yScale?: any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n yScaleSecondary?: any;\n containerHeight?: number;\n containerWidth?: number;\n optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\n /**\n * Define the chart title\n */\n chartTitle?: string;\n\n /**\n * Only used for Area chart\n * Value used to draw y axis of that chart.\n */\n maxOfYVal?: number;\n\n /**\n * Data of the chart\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n points: any;\n\n /**\n * Define type of the chart\n */\n chartType: ChartTypes;\n\n /** X axis type */\n xAxisType: XAxisTypes;\n\n /** Y axis type */\n yAxisType?: YAxisType;\n\n /**\n * Legends of the chart.\n */\n legendBars: JSX.Element | null;\n\n /**\n * Callout props\n */\n calloutProps?: ChartPopoverProps;\n\n /**\n * Callback method used for to get margins to the chart.\n */\n getmargins?: (margins: Margins) => void;\n\n /**\n * This is a call back method to the chart from cartesian chart.\n * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n * It also contians an optional param xAxisElement - defines as x axis scale element.\n * This param used to enable feature word wrap of Xaxis.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n getGraphData?: any;\n\n /**\n * Used for bar chart graphs.\n * To define width of the bar\n */\n barwidth?: number;\n\n /**\n * Used for tick styles of the x axis of the chart\n * Tick params are applicable for date axis only.\n */\n tickParams?: {\n tickValues?: number[] | Date[] | string[];\n tickFormat?: string;\n };\n\n /**\n * it's padding between bar's or lines in the graph\n */\n xAxisPadding?: number;\n\n /**\n * it's padding between bar's or lines in the graph\n */\n yAxisPadding?: number;\n\n /**\n * Children elements specific to derived chart types.\n */\n children(props: ChildProps): React.ReactNode;\n\n /**\n * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.\n * @default false\n * @type \\{boolean \\}\n */\n isCalloutForStack?: boolean;\n\n /** dataset values to find out domain of the String axis\n * Present using for only vertical stacked bar chart and grouped vertical bar chart\n */\n datasetForXAxisDomain?: string[];\n\n /** Own callout design */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n customizedCallout?: any;\n\n /**\n * if the data points for the y-axis is of type string, then we need to give this\n * prop to construct the y-axis\n */\n stringDatasetForYAxisDomain?: string[];\n\n /**\n * The prop used to define the culture to localize the numbers and date\n */\n culture?: string;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n getAxisData?: any;\n\n /**\n * Callback method used when mouse leaves the chart boundary.\n */\n onChartMouseLeave?: () => void;\n\n /** Callback method to get extra margins for domain */\n getDomainMargins?: (containerWidth: number) => Margins;\n\n /** Padding between each bar/line-point */\n xAxisInnerPadding?: number;\n\n /** Padding before first bar/line-point and after last bar/line-point */\n xAxisOuterPadding?: number;\n\n /**\n *@default false\n *Used for to elipse y axis labes and show tooltip on x axis labels\n */\n showYAxisLablesTooltip?: boolean;\n\n /**\n *@default false\n *Used for showing complete y axis lables */\n showYAxisLables?: boolean;\n\n /**\n * @default false\n * Used to control the first render cycle Performance optimization code.\n */\n enableFirstRenderOptimization?: boolean;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -26,6 +26,7 @@ const cartesianchartClassNames = {
|
|
|
26
26
|
yAxis: 'fui-cart__yAxis',
|
|
27
27
|
opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
|
|
28
28
|
legendContainer: 'fui-cart__legendContainer',
|
|
29
|
+
svgTooltip: 'fui-cart_svgTooltip',
|
|
29
30
|
shapeStyles: 'fui-cart__shapeStyles',
|
|
30
31
|
descriptionMessage: 'fui-cart__descriptionMessage',
|
|
31
32
|
hover: 'fui-cart__hover',
|
|
@@ -61,7 +62,8 @@ const cartesianchartClassNames = {
|
|
|
61
62
|
B80ckks: "fmd4ok8",
|
|
62
63
|
fsow6f: "f17mccla",
|
|
63
64
|
sj55zd: "fkfq4zb",
|
|
64
|
-
Bkfmm31: "fhuob2q"
|
|
65
|
+
Bkfmm31: "fhuob2q",
|
|
66
|
+
a6j6cd: "folz2wl"
|
|
65
67
|
},
|
|
66
68
|
xAxis: {
|
|
67
69
|
Bifops1: "fk6onyz",
|
|
@@ -102,6 +104,10 @@ const cartesianchartClassNames = {
|
|
|
102
104
|
"ff3wqvv",
|
|
103
105
|
"f1l2akhw"
|
|
104
106
|
]
|
|
107
|
+
},
|
|
108
|
+
svgTooltip: {
|
|
109
|
+
Bkfmm31: "f5q6cfr",
|
|
110
|
+
a6j6cd: "f14egcv9"
|
|
105
111
|
}
|
|
106
112
|
}, {
|
|
107
113
|
d: [
|
|
@@ -148,7 +154,22 @@ const cartesianchartClassNames = {
|
|
|
148
154
|
".f158kwzp{cursor:default;}",
|
|
149
155
|
".frnwi6n{margin-top:var(--spacingVerticalS);}",
|
|
150
156
|
".ff3wqvv{margin-left:var(--spacingHorizontalXL);}",
|
|
151
|
-
".f1l2akhw{margin-right:var(--spacingHorizontalXL);}"
|
|
157
|
+
".f1l2akhw{margin-right:var(--spacingHorizontalXL);}",
|
|
158
|
+
".f5q6cfr{fill:var(--colorNeutralBackground1);}"
|
|
159
|
+
],
|
|
160
|
+
m: [
|
|
161
|
+
[
|
|
162
|
+
"@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}",
|
|
163
|
+
{
|
|
164
|
+
m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
|
|
165
|
+
}
|
|
166
|
+
],
|
|
167
|
+
[
|
|
168
|
+
"@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f14egcv9{fill:Canvas;}}",
|
|
169
|
+
{
|
|
170
|
+
m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
|
|
171
|
+
}
|
|
172
|
+
]
|
|
152
173
|
]
|
|
153
174
|
});
|
|
154
175
|
const useCartesianChartStyles = (props)=>{
|
|
@@ -161,6 +182,7 @@ const useCartesianChartStyles = (props)=>{
|
|
|
161
182
|
xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
|
|
162
183
|
yAxis: (0, _react.mergeClasses)(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),
|
|
163
184
|
opacityChangeOnHover: (0, _react.mergeClasses)(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
|
|
164
|
-
legendContainer: (0, _react.mergeClasses)(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ )
|
|
185
|
+
legendContainer: (0, _react.mergeClasses)(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),
|
|
186
|
+
svgTooltip: (0, _react.mergeClasses)(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )
|
|
165
187
|
};
|
|
166
188
|
}; //# sourceMappingURL=useCartesianChartStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useRtl } from '../../utilities/utilities';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n chartTitle: 'fui-cart__chartTitle'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1\n },\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/ ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ )\n };\n};\n"],"names":["cartesianchartClassNames","useCartesianChartStyles","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","d","p","props","_useRtl","useRtl","baseStyles","mergeClasses"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n chartTitle: 'fui-cart__chartTitle'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n },\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/ ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/ )\n };\n};\n"],"names":["cartesianchartClassNames","useCartesianChartStyles","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","d","p","m","props","_useRtl","useRtl","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -117,7 +117,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
|
|
|
117
117
|
const xValues = plotlyInputWithValidData.data[0].x;
|
|
118
118
|
const isXDate = (0, _chartutilities.isDateArray)(xValues);
|
|
119
119
|
const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
|
|
120
|
-
const isXMonth = (0,
|
|
120
|
+
const isXMonth = (0, _chartutilities.isMonthArray)(xValues);
|
|
121
121
|
// Consider year as categorical variable not numeric continuous variable
|
|
122
122
|
// Also year is not considered a date variable as it is represented as a point
|
|
123
123
|
// in time and brings additional complexity of handling timezone and locale
|