@fluentui/react-charts 9.2.1 → 9.2.3
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 +57 -2
- package/dist/index.d.ts +168 -15
- package/lib/ChartTable.js +1 -0
- package/lib/ChartTable.js.map +1 -0
- package/lib/components/AreaChart/AreaChart.js +4 -1
- package/lib/components/AreaChart/AreaChart.js.map +1 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.js +2 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js +2 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
- package/lib/components/ChartTable/ChartTable.js +58 -0
- package/lib/components/ChartTable/ChartTable.js.map +1 -0
- package/lib/components/ChartTable/ChartTable.types.js +1 -0
- package/lib/components/ChartTable/ChartTable.types.js.map +1 -0
- package/lib/components/ChartTable/index.js +3 -0
- package/lib/components/ChartTable/index.js.map +1 -0
- package/lib/components/ChartTable/useChartTableStyles.styles.js +93 -0
- package/lib/components/ChartTable/useChartTableStyles.styles.js.map +1 -0
- package/lib/components/ChartTable/useChartTableStyles.styles.raw.js +55 -0
- package/lib/components/ChartTable/useChartTableStyles.styles.raw.js.map +1 -0
- package/lib/components/CommonComponents/CartesianChart.js +170 -100
- package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib/components/CommonComponents/ChartPopover.types.js.map +1 -1
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +13 -0
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js +12 -0
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +180 -102
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +100 -0
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -0
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +890 -211
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.js +2 -2
- package/lib/components/DonutChart/DonutChart.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib/components/DonutChart/Pie/Pie.js.map +1 -1
- package/lib/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib/components/GanttChart/GanttChart.js.map +1 -1
- package/lib/components/GanttChart/useGanttChartStyles.styles.js +2 -1
- package/lib/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
- package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js +2 -1
- package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +185 -144
- 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/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +2 -1
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.js +175 -114
- package/lib/components/HeatMapChart/HeatMapChart.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/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
- package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
- package/lib/components/HorizontalBarChart/HorizontalBarChart.types.js.map +1 -1
- package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +26 -6
- package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.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/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +2 -1
- package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
- package/lib/components/Legends/Legends.js.map +1 -1
- package/lib/components/Legends/OverflowMenu.js.map +1 -1
- package/lib/components/LineChart/LineChart.js +251 -78
- 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 +10 -3
- package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib/components/LineChart/useLineChartStyles.styles.raw.js +14 -2
- package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +56 -37
- package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.types.js.map +1 -1
- package/lib/components/ScatterChart/useScatterChartStyles.styles.js +21 -4
- package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +16 -3
- package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.js +38 -14
- package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +214 -96
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.types.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/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/types/DataPoint.js.map +1 -1
- package/lib/utilities/FocusableTooltipText.js.map +1 -1
- package/lib/utilities/utilities.js +41 -42
- package/lib/utilities/utilities.js.map +1 -1
- package/lib/utilities/vbc-utils.js +24 -0
- package/lib/utilities/vbc-utils.js.map +1 -1
- package/lib-commonjs/ChartTable.js +6 -0
- package/lib-commonjs/ChartTable.js.map +1 -0
- package/lib-commonjs/components/AreaChart/AreaChart.js +4 -1
- package/lib-commonjs/components/AreaChart/AreaChart.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/AreaChart/useAreaChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ChartTable/ChartTable.js +69 -0
- package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -0
- package/lib-commonjs/components/ChartTable/ChartTable.types.js +6 -0
- package/lib-commonjs/components/ChartTable/ChartTable.types.js.map +1 -0
- package/lib-commonjs/components/ChartTable/index.js +8 -0
- package/lib-commonjs/components/ChartTable/index.js.map +1 -0
- package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js +196 -0
- package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js.map +1 -0
- package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js +69 -0
- package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +169 -98
- 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/ChartPopover.types.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +13 -0
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +12 -0
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +176 -100
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +128 -0
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -0
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +909 -209
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Pie/Pie.js.map +1 -1
- package/lib-commonjs/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib-commonjs/components/GanttChart/GanttChart.js.map +1 -1
- package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js +2 -1
- package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +183 -142
- 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/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.js +174 -113
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.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/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +25 -5
- package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.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/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Legends/Legends.js.map +1 -1
- package/lib-commonjs/components/Legends/OverflowMenu.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.js +250 -78
- 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 +12 -3
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +14 -2
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +56 -37
- package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.types.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +30 -3
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +15 -2
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +37 -13
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +213 -95
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.types.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/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types/DataPoint.js.map +1 -1
- package/lib-commonjs/utilities/FocusableTooltipText.js.map +1 -1
- package/lib-commonjs/utilities/utilities.js +44 -41
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/lib-commonjs/utilities/vbc-utils.js +27 -0
- package/lib-commonjs/utilities/vbc-utils.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n tooltip: 'fui-line__tooltip',\n lineBorder: 'fui-line_lineBorder',\n root: 'fui-line__root',\n xAxis: 'fui-line__xAxis',\n yAxis: 'fui-line__yAxis',\n legendContainer: 'fui-line__legendContainer',\n hover: 'fui-line__hover',\n descriptionMessage: 'fui-line__descriptionMessage',\n axisTitle: 'fui-line__axisTitle',\n chartTitle: 'fui-line__chartTitle',\n opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n shapeStyles: 'fui-line__shapeStyles',\n chartWrapper: 'fui-line__chartWrapper',\n svgTooltip: '',\n chart: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n tooltip: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n fill: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none'\n },\n lineBorder: {\n stroke: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n stroke: 'Canvas'\n }\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n tooltip: 'fui-line__tooltip',\n lineBorder: 'fui-line_lineBorder',\n markerLabel: 'fui-line__markerLabel',\n root: 'fui-line__root',\n xAxis: 'fui-line__xAxis',\n yAxis: 'fui-line__yAxis',\n legendContainer: 'fui-line__legendContainer',\n hover: 'fui-line__hover',\n descriptionMessage: 'fui-line__descriptionMessage',\n axisTitle: 'fui-line__axisTitle',\n chartTitle: 'fui-line__chartTitle',\n opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n shapeStyles: 'fui-line__shapeStyles',\n chartWrapper: 'fui-line__chartWrapper',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n tooltip: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n fill: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none'\n },\n lineBorder: {\n stroke: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n stroke: 'Canvas'\n }\n },\n markerLabel: {\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n }\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAM,OAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAhC,UAAA;IAAAiC,MAAA;IAAAC,OAAA;EAAA;EAAAjC,WAAA;IAAAyB,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEL,YAAY,CAACI,mBAAmB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEN,YAAY,CAACI,mBAAmB,CAACE,UAAU,EAAEyC,UAAU,CAACzC,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAEP,YAAY,CAACI,mBAAmB,CAACG,WAAW,EAAEwC,UAAU,CAACxC,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}
|
|
@@ -6,6 +6,7 @@ import { HighContrastSelector } from '../../utilities/index';
|
|
|
6
6
|
*/ export const linechartClassNames = {
|
|
7
7
|
tooltip: 'fui-line__tooltip',
|
|
8
8
|
lineBorder: 'fui-line_lineBorder',
|
|
9
|
+
markerLabel: 'fui-line__markerLabel',
|
|
9
10
|
root: 'fui-line__root',
|
|
10
11
|
xAxis: 'fui-line__xAxis',
|
|
11
12
|
yAxis: 'fui-line__yAxis',
|
|
@@ -18,7 +19,8 @@ import { HighContrastSelector } from '../../utilities/index';
|
|
|
18
19
|
shapeStyles: 'fui-line__shapeStyles',
|
|
19
20
|
chartWrapper: 'fui-line__chartWrapper',
|
|
20
21
|
svgTooltip: '',
|
|
21
|
-
chart: ''
|
|
22
|
+
chart: '',
|
|
23
|
+
axisAnnotation: ''
|
|
22
24
|
};
|
|
23
25
|
/**
|
|
24
26
|
* Base Styles
|
|
@@ -39,6 +41,15 @@ import { HighContrastSelector } from '../../utilities/index';
|
|
|
39
41
|
[HighContrastSelector]: {
|
|
40
42
|
stroke: 'Canvas'
|
|
41
43
|
}
|
|
44
|
+
},
|
|
45
|
+
markerLabel: {
|
|
46
|
+
fill: tokens.colorNeutralForeground1,
|
|
47
|
+
textAnchor: 'middle',
|
|
48
|
+
selectors: {
|
|
49
|
+
[HighContrastSelector]: {
|
|
50
|
+
fill: 'CanvasText'
|
|
51
|
+
}
|
|
52
|
+
}
|
|
42
53
|
}
|
|
43
54
|
});
|
|
44
55
|
/**
|
|
@@ -47,6 +58,7 @@ import { HighContrastSelector } from '../../utilities/index';
|
|
|
47
58
|
const baseStyles = useStyles();
|
|
48
59
|
return {
|
|
49
60
|
tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
|
|
50
|
-
lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )
|
|
61
|
+
lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),
|
|
62
|
+
markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )
|
|
51
63
|
};
|
|
52
64
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n tooltip: 'fui-line__tooltip',\n lineBorder: 'fui-line_lineBorder',\n root: 'fui-line__root',\n xAxis: 'fui-line__xAxis',\n yAxis: 'fui-line__yAxis',\n legendContainer: 'fui-line__legendContainer',\n hover: 'fui-line__hover',\n descriptionMessage: 'fui-line__descriptionMessage',\n axisTitle: 'fui-line__axisTitle',\n chartTitle: 'fui-line__chartTitle',\n opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n shapeStyles: 'fui-line__shapeStyles',\n chartWrapper: 'fui-line__chartWrapper',\n svgTooltip: '',\n chart: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n tooltip: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n fill: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n },\n lineBorder: {\n stroke: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n stroke: 'Canvas',\n },\n },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;
|
|
1
|
+
{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n tooltip: 'fui-line__tooltip',\n lineBorder: 'fui-line_lineBorder',\n markerLabel: 'fui-line__markerLabel',\n root: 'fui-line__root',\n xAxis: 'fui-line__xAxis',\n yAxis: 'fui-line__yAxis',\n legendContainer: 'fui-line__legendContainer',\n hover: 'fui-line__hover',\n descriptionMessage: 'fui-line__descriptionMessage',\n axisTitle: 'fui-line__axisTitle',\n chartTitle: 'fui-line__chartTitle',\n opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n shapeStyles: 'fui-line__shapeStyles',\n chartWrapper: 'fui-line__chartWrapper',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n tooltip: {\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n fill: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n },\n lineBorder: {\n stroke: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n stroke: 'Canvas',\n },\n },\n markerLabel: {\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,WAAW;IAC3BM,SAAS;QACPkB,SAAS;QACTC,eAAe;QACf,GAAGvB,WAAWwB,OAAO,CAACvB,OAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,OAAO4B,mBAAmB;QAC/BC,MAAM7B,OAAO8B,uBAAuB;QACpCC,cAAc/B,OAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,YAAY;QACV8B,QAAQlC,OAAO8B,uBAAuB;QACtC,CAAC7B,qBAAqB,EAAE;YACtBiC,QAAQ;QACV;IACF;IACA7B,aAAa;QACXwB,MAAM7B,OAAOmC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACpC,qBAAqB,EAAE;gBACtB4B,MAAM;YACR;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLjB,SAASL,aAAaI,oBAAoBC,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC7FC,YAAYN,aAAaI,oBAAoBE,UAAU,EAAEoC,WAAWpC,UAAU,CAAC,0BAA0B;QACzGC,aAAaP,aAAaI,oBAAoBG,WAAW,EAAEmC,WAAWnC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
|
|
@@ -21,7 +21,7 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
21
21
|
const _tooltipId = useId('ScatterChartTooltipId_');
|
|
22
22
|
const _firstRenderOptimization = true;
|
|
23
23
|
const _emptyChartId = useId('_ScatterChart_empty');
|
|
24
|
-
let _points = _injectIndexPropertyInScatterChartData(props.data.
|
|
24
|
+
let _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
|
|
25
25
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
26
26
|
let _calloutPoints = calloutData(_points) || [];
|
|
27
27
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -75,15 +75,15 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
77
|
}, []);
|
|
78
|
-
const _xAxisType = props.data.
|
|
78
|
+
const _xAxisType = props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData[0].data && props.data.scatterChartData[0].data.length > 0 ? getTypeOfAxis(props.data.scatterChartData[0].data[0].x, true) : XAxisTypes.StringAxis;
|
|
79
79
|
const pointsRef = React.useRef([]);
|
|
80
80
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
81
81
|
const calloutPointsRef = React.useRef([]);
|
|
82
82
|
React.useEffect(()=>{
|
|
83
83
|
/** note that height and width are not used to resize or set as dimesions of the chart,
|
|
84
84
|
* fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
|
|
85
|
-
*/ if (_points !== _injectIndexPropertyInScatterChartData(props.data.
|
|
86
|
-
pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.
|
|
85
|
+
*/ if (_points !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) || props.data !== _points) {
|
|
86
|
+
pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
|
|
87
87
|
calloutPointsRef.current = calloutData(pointsRef.current);
|
|
88
88
|
}
|
|
89
89
|
}, [
|
|
@@ -157,21 +157,30 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
157
157
|
function _createLegends(data) {
|
|
158
158
|
const { legendProps } = props;
|
|
159
159
|
const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
|
|
160
|
-
const
|
|
161
|
-
|
|
160
|
+
const mapLegendToPoints = {};
|
|
161
|
+
data.forEach((point)=>{
|
|
162
|
+
if (point.legend) {
|
|
163
|
+
if (!mapLegendToPoints[point.legend]) {
|
|
164
|
+
mapLegendToPoints[point.legend] = [];
|
|
165
|
+
}
|
|
166
|
+
mapLegendToPoints[point.legend].push(point);
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
|
|
170
|
+
const representativePoint = points[0];
|
|
162
171
|
// mapping data to the format Legends component needs
|
|
163
172
|
const legend = {
|
|
164
|
-
title:
|
|
165
|
-
color,
|
|
173
|
+
title: legendTitle,
|
|
174
|
+
color: representativePoint.color,
|
|
166
175
|
onMouseOutAction: ()=>{
|
|
167
176
|
setActiveLegend('');
|
|
168
177
|
},
|
|
169
178
|
hoverAction: ()=>{
|
|
170
179
|
_handleChartMouseLeave();
|
|
171
|
-
setActiveLegend(
|
|
180
|
+
setActiveLegend(legendTitle);
|
|
172
181
|
},
|
|
173
|
-
...
|
|
174
|
-
shape:
|
|
182
|
+
...representativePoint.legendShape && {
|
|
183
|
+
shape: representativePoint.legendShape
|
|
175
184
|
}
|
|
176
185
|
};
|
|
177
186
|
return legend;
|
|
@@ -209,12 +218,18 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
209
218
|
return seriesColor;
|
|
210
219
|
}
|
|
211
220
|
}
|
|
221
|
+
function _getRangeForScatterMarkerSize(yScale, yPadding, xMin, xMax, xPadding) {
|
|
222
|
+
const extraXPixels = _isRTL ? _xAxisScale(xMax - xPadding) - _xAxisScale(xMax) : _xAxisScale(xMin + xPadding) - _xAxisScale(xMin);
|
|
223
|
+
const yMin = yScale.domain()[0];
|
|
224
|
+
const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
|
|
225
|
+
return Math.min(extraXPixels, extraYPixels);
|
|
226
|
+
}
|
|
212
227
|
function _createPlot(xElement, containerHeight) {
|
|
213
228
|
const series = [];
|
|
214
229
|
if (isSelectedLegend) {
|
|
215
230
|
_points = selectedLegendPoints;
|
|
216
231
|
} else {
|
|
217
|
-
_points = _injectIndexPropertyInScatterChartData(props.data.
|
|
232
|
+
_points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
|
|
218
233
|
}
|
|
219
234
|
const yMax = d3Max(points, (point)=>{
|
|
220
235
|
return d3Max(point.data, (item)=>item.y);
|
|
@@ -223,36 +238,32 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
223
238
|
return d3Min(point.data, (item)=>item.y);
|
|
224
239
|
});
|
|
225
240
|
const yPadding = (yMax - yMin) * 0.1;
|
|
226
|
-
|
|
227
|
-
let
|
|
228
|
-
let
|
|
241
|
+
let xPadding = 0;
|
|
242
|
+
let xMin = 0;
|
|
243
|
+
let xMax = 0;
|
|
229
244
|
if (_xAxisType === XAxisTypes.StringAxis) {
|
|
230
245
|
_xBandwidth = _xAxisScale.bandwidth() / 2;
|
|
231
|
-
xPaddingRange = _xBandwidth;
|
|
232
246
|
} else if (_xAxisType === XAxisTypes.DateAxis) {
|
|
233
|
-
|
|
247
|
+
xMin = d3Min(_points, (point)=>{
|
|
234
248
|
return d3Min(point.data, (item)=>item.x);
|
|
235
|
-
});
|
|
236
|
-
|
|
249
|
+
}).getTime();
|
|
250
|
+
xMax = d3Max(_points, (point)=>{
|
|
237
251
|
return d3Max(point.data, (item)=>{
|
|
238
252
|
return item.x;
|
|
239
253
|
});
|
|
240
|
-
});
|
|
241
|
-
|
|
242
|
-
xPaddingRange = Math.abs(_xAxisScale(new Date(xMin.getTime() + xPadding)) - _xAxisScale(xMin));
|
|
254
|
+
}).getTime();
|
|
255
|
+
xPadding = (xMax - xMin) * 0.1;
|
|
243
256
|
} else {
|
|
244
|
-
|
|
257
|
+
xMin = d3Min(_points, (point)=>{
|
|
245
258
|
return d3Min(point.data, (item)=>item.x);
|
|
246
259
|
});
|
|
247
|
-
|
|
260
|
+
xMax = d3Max(_points, (point)=>{
|
|
248
261
|
return d3Max(point.data, (item)=>{
|
|
249
262
|
return item.x;
|
|
250
263
|
});
|
|
251
264
|
});
|
|
252
|
-
|
|
253
|
-
xPaddingRange = Math.abs(_xAxisScale(xMin + xPadding) - _xAxisScale(xMin));
|
|
265
|
+
xPadding = (xMax - xMin) * 0.1;
|
|
254
266
|
}
|
|
255
|
-
maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
|
|
256
267
|
const maxMarkerSize = d3Max(_points, (point)=>{
|
|
257
268
|
return d3Max(point.data, (item)=>{
|
|
258
269
|
return item.markerSize;
|
|
@@ -264,20 +275,22 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
264
275
|
const seriesColor = _points[i].color;
|
|
265
276
|
const verticaLineHeight = containerHeight - margins.bottom + 6;
|
|
266
277
|
for(let j = 0; j < _points[i].data.length; j++){
|
|
278
|
+
var _points_i_data_j;
|
|
267
279
|
const seriesId = `${_seriesId}_${i}_${j}`;
|
|
268
280
|
const circleId = `${_circleId}_${i}_${j}`;
|
|
269
281
|
const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];
|
|
270
|
-
let circleRadius = 3.5;
|
|
271
282
|
const pointMarkerSize = _points[i].data[j].markerSize;
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
283
|
+
const extraMaxPixels = _xAxisType !== XAxisTypes.StringAxis ? _getRangeForScatterMarkerSize(_yAxisScale, yPadding, xMin, xMax, xPadding) : 0;
|
|
284
|
+
const minPixel = 4;
|
|
285
|
+
const maxPixel = 16;
|
|
286
|
+
const circleRadius = pointMarkerSize && maxMarkerSize !== 0 ? _xAxisType !== XAxisTypes.StringAxis ? pointMarkerSize * extraMaxPixels / maxMarkerSize : minPixel + (pointMarkerSize - minPixel) / (maxMarkerSize - minPixel) * (maxPixel - minPixel) : activePoint === circleId ? 6 : 4;
|
|
275
287
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
276
288
|
const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
|
|
277
|
-
|
|
289
|
+
const text = _points === null || _points === void 0 ? void 0 : (_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.text;
|
|
290
|
+
pointsForSeries.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
|
|
278
291
|
id: circleId,
|
|
279
292
|
key: circleId,
|
|
280
|
-
r: circleRadius,
|
|
293
|
+
r: Math.max(circleRadius, 4),
|
|
281
294
|
cx: _xAxisScale(x) + _xBandwidth,
|
|
282
295
|
cy: _yAxisScale(y),
|
|
283
296
|
"data-is-focusable": isLegendSelected,
|
|
@@ -293,7 +306,12 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
293
306
|
role: "img",
|
|
294
307
|
"aria-label": _getAriaLabel(i, j),
|
|
295
308
|
tabIndex: isLegendSelected ? 0 : undefined
|
|
296
|
-
})
|
|
309
|
+
}), ",", text && /*#__PURE__*/ React.createElement("text", {
|
|
310
|
+
key: `${circleId}-label`,
|
|
311
|
+
x: _xAxisScale(x) + _xBandwidth,
|
|
312
|
+
y: _yAxisScale(y) + Math.max(circleRadius + 12, 16),
|
|
313
|
+
className: classes.markerLabel
|
|
314
|
+
}, text)));
|
|
297
315
|
}
|
|
298
316
|
series.push(/*#__PURE__*/ React.createElement("g", {
|
|
299
317
|
key: `series_${i}`,
|
|
@@ -418,10 +436,11 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
418
436
|
return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
|
|
419
437
|
}
|
|
420
438
|
function _isChartEmpty() {
|
|
421
|
-
return !(props.data && props.data.
|
|
439
|
+
return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
|
|
422
440
|
}
|
|
441
|
+
const _getMinMaxofXAxis = React.useCallback((points, yAxisType)=>_getNumericMinMaxOfY(points, yAxisType), []);
|
|
423
442
|
const { legendProps, tickValues, tickFormat } = props;
|
|
424
|
-
_points = _injectIndexPropertyInScatterChartData(props.data.
|
|
443
|
+
_points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
|
|
425
444
|
let points = _points;
|
|
426
445
|
if (legendProps && !!legendProps.canSelectMultipleLegends) {
|
|
427
446
|
points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
|
|
@@ -467,7 +486,7 @@ import { toImage } from '../../utilities/image-export-utils';
|
|
|
467
486
|
getmargins: _getMargins,
|
|
468
487
|
getGraphData: _initializeScatterChartData,
|
|
469
488
|
xAxisType: _xAxisType,
|
|
470
|
-
getMinMaxOfYAxis:
|
|
489
|
+
getMinMaxOfYAxis: _getMinMaxofXAxis,
|
|
471
490
|
getDomainNRangeValues: _getDomainNRangeValues,
|
|
472
491
|
createYAxis: createNumericYAxis,
|
|
473
492
|
createStringYAxis: createStringYAxis,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScatterChartProps } from './ScatterChart.types';\nimport { useScatterChartStyles } from './useScatterChartStyles.styles';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { select as d3Select } from 'd3-selection';\nimport { Legend, Legends } from '../Legends/index';\nimport { max as d3Max, min as d3Min } from 'd3-array';\nimport { useId } from '@fluentui/react-utilities';\nimport {\n areArraysEqual,\n createNumericYAxis,\n createStringYAxis,\n domainRangeOfDateForScatterChart,\n domainRangeOfNumericForScatterChart,\n domainRangeOfXStringAxis,\n find,\n findNumericMinMaxOfY,\n IDomainNRange,\n YAxisType,\n useRtl,\n} from '../../utilities/index';\nimport {\n AccessibilityProps,\n CartesianChart,\n ChildProps,\n LineChartPoints,\n CustomizedCalloutData,\n Margins,\n RefArrayData,\n ScatterChartDataPoint,\n Chart,\n ImageExportOptions,\n LegendContainer,\n} from '../../index';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n calloutData,\n ChartTypes,\n XAxisTypes,\n tooltipOfAxislabels,\n getTypeOfAxis,\n getNextColor,\n getColorFromToken,\n formatDate,\n} from '../../utilities/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\ntype NumericAxis = D3Axis<number | { valueOf(): number }>;\n\ntype ScatterChartDataWithIndex = LineChartPoints & { index: number };\n\n// Create a ScatterChart variant which uses these default styles and this styled subcomponent.\n/**\n * ScatterChart component\n * {@docCategory ScatterChart}\n */\nexport const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.forwardRef<\n HTMLDivElement,\n ScatterChartProps\n>((props, forwardedRef) => {\n const _circleId: string = useId('circle');\n const _seriesId: string = useId('seriesID');\n const _verticalLine: string = useId('verticalLine');\n const _tooltipId: string = useId('ScatterChartTooltipId_');\n const _firstRenderOptimization = true;\n const _emptyChartId: string = useId('_ScatterChart_empty');\n let _points: ScatterChartDataWithIndex[] = _injectIndexPropertyInScatterChartData(props.data.lineChartData);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _calloutPoints: any[] = calloutData(_points) || [];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _xAxisScale: any = '';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _yAxisScale: any = '';\n let _uniqueCallOutID: string | null = '';\n let _refArray: RefArrayData[] = [];\n let margins: Margins;\n let renderSeries: JSX.Element[];\n let _xAxisLabels: string[] = [];\n let xAxisCalloutAccessibilityData: AccessibilityProps = {};\n let _xBandwidth = 0;\n const cartesianChartRef = React.useRef<Chart>(null);\n const classes = useScatterChartStyles(props);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n const [hoverXValue, setHoverXValue] = React.useState<string | number>('');\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n const [YValueHover, setYValueHover] = React.useState<[]>([]);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [selectedLegendPoints, setSelectedLegendPoints] = React.useState<any[]>([]);\n const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);\n const [activePoint, setActivePoint] = React.useState<string>('');\n const [stackCalloutProps, setStackCalloutProps] = React.useState<CustomizedCalloutData>();\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n const prevSelectedLegendsRef = React.useRef<string[] | undefined>(undefined);\n\n React.useEffect(() => {\n if (\n prevSelectedLegendsRef.current &&\n !areArraysEqual(prevSelectedLegendsRef.current, props.legendProps?.selectedLegends)\n ) {\n setSelectedLegends(props.legendProps?.selectedLegends || []);\n }\n prevSelectedLegendsRef.current = props.legendProps?.selectedLegends;\n }, [props.legendProps?.selectedLegends]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: cartesianChartRef.current?.chartContainer ?? null,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n const _xAxisType: XAxisTypes =\n props.data.lineChartData! &&\n props.data.lineChartData!.length > 0 &&\n props.data.lineChartData![0].data &&\n props.data.lineChartData![0].data.length > 0\n ? (getTypeOfAxis(props.data.lineChartData![0].data[0].x, true) as XAxisTypes)\n : XAxisTypes.StringAxis;\n\n const pointsRef = React.useRef<ScatterChartDataWithIndex[] | []>([]);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const calloutPointsRef = React.useRef<any[]>([]);\n React.useEffect(() => {\n /** note that height and width are not used to resize or set as dimesions of the chart,\n * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart\n */\n\n if (_points !== _injectIndexPropertyInScatterChartData(props.data.lineChartData) || props.data !== _points) {\n pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.lineChartData);\n calloutPointsRef.current = calloutData(pointsRef.current);\n }\n }, [props.height, props.width, props.data, _points]);\n\n function _injectIndexPropertyInScatterChartData(\n scatterChartData?: LineChartPoints[],\n ): ScatterChartDataWithIndex[] | [] {\n return scatterChartData\n ? scatterChartData.map((item: LineChartPoints, index: number) => {\n let color: string;\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0);\n } else {\n color = getColorFromToken(item.color);\n }\n return {\n ...item,\n index: -1,\n color,\n };\n })\n : [];\n }\n\n function updatePosition(newX: number, newY: number) {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n function _getNumericMinMaxOfY(\n points: LineChartPoints[],\n yAxisType?: YAxisType,\n ): { startValue: number; endValue: number } {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType);\n let yPadding = 0;\n yPadding = (endValue - startValue) * 0.1;\n\n return {\n startValue: startValue - yPadding,\n endValue: endValue + yPadding,\n };\n }\n\n function _getDomainNRangeValues(\n points: any,\n margins: Margins,\n width: number,\n chartType: ChartTypes,\n isRTL: boolean,\n xAxisType: XAxisTypes,\n barWidth: number,\n tickValues: Date[] | number[] | undefined,\n shiftX: number,\n ) {\n let domainNRangeValue: IDomainNRange;\n if (xAxisType === XAxisTypes.NumericAxis) {\n domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);\n } else if (xAxisType === XAxisTypes.DateAxis) {\n domainNRangeValue = domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues! as Date[]);\n } else {\n domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);\n }\n return domainNRangeValue;\n }\n\n function _getMargins(_margins: Margins) {\n margins = _margins;\n }\n\n function _initializeScatterChartData(\n xScale: NumericAxis,\n yScale: NumericAxis,\n containerHeight: number,\n containerWidth: number,\n xElement: SVGElement | null,\n ) {\n _xAxisScale = xScale;\n _yAxisScale = yScale;\n renderSeries = _createPlot(xElement!, containerHeight!);\n }\n\n function _onHoverCardHide() {\n setSelectedLegendPoints([]);\n setIsSelectedLegend(false);\n }\n\n function _createLegends(data: ScatterChartDataWithIndex[]): JSX.Element {\n const { legendProps } = props;\n const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);\n const legendDataItems = data.map((point: ScatterChartDataWithIndex) => {\n const color: string = point.color!;\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: point.legend!,\n color,\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(point.legend);\n },\n ...(point.legendShape && {\n shape: point.legendShape,\n }),\n };\n return legend;\n });\n\n return (\n <Legends\n legends={[...legendDataItems]}\n enabledWrapLines={props.enabledLegendsWrapLines}\n overflowText={props.legendsOverflowText}\n {...(isLegendMultiSelectEnabled && { onLegendHoverCardLeave: _onHoverCardHide })}\n {...props.legendProps}\n selectedLegends={selectedLegends}\n onChange={_onLegendSelectionChange}\n legendRef={_legendsRef}\n />\n );\n }\n\n function _onLegendSelectionChange(\n legendsSelected: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: Legend,\n ): void {\n if (props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(legendsSelected);\n } else {\n setSelectedLegends(legendsSelected.slice(-1));\n }\n\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(legendsSelected, event, currentLegend);\n }\n }\n\n function _getPointFill(seriesColor: string, pointId: string, pointIndex: number, isLastPoint: boolean) {\n if (activePoint === pointId) {\n return tokens.colorNeutralBackground1;\n } else {\n return seriesColor;\n }\n }\n\n function _createPlot(xElement: SVGElement, containerHeight: number): JSX.Element[] {\n const series: JSX.Element[] = [];\n if (isSelectedLegend) {\n _points = selectedLegendPoints;\n } else {\n _points = _injectIndexPropertyInScatterChartData(props.data.lineChartData);\n }\n\n const yMax = d3Max(points, (point: LineChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.y)!;\n })!;\n const yMin = d3Min(points, (point: LineChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.y)!;\n })!;\n const yPadding = (yMax - yMin) * 0.1;\n const yPaddingRange = Math.abs(_yAxisScale(yMin + yPadding) - _yAxisScale(yMin));\n\n let maxMarkerRange = 40;\n let xPaddingRange = 0;\n if (_xAxisType === XAxisTypes.StringAxis) {\n _xBandwidth = _xAxisScale.bandwidth() / 2;\n xPaddingRange = _xBandwidth;\n } else if (_xAxisType === XAxisTypes.DateAxis) {\n const xMin = d3Min(points, (point: LineChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.x as Date)!;\n })!;\n\n const xMax = d3Max(points, (point: LineChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.x as Date;\n });\n })!;\n\n const xPadding = (xMax.getTime() - xMin.getTime()) * 0.1;\n xPaddingRange = Math.abs(_xAxisScale(new Date(xMin.getTime() + xPadding)) - _xAxisScale(xMin));\n } else {\n const xMin = d3Min(points, (point: LineChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.x as number)!;\n })!;\n\n const xMax = d3Max(points, (point: LineChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.x as number;\n });\n })!;\n\n const xPadding = (xMax - xMin) * 0.1;\n xPaddingRange = Math.abs(_xAxisScale(xMin + xPadding) - _xAxisScale(xMin));\n }\n maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));\n\n const maxMarkerSize = d3Max(_points, (point: LineChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.markerSize as number;\n });\n })!;\n\n for (let i = _points.length - 1; i >= 0; i--) {\n const pointsForSeries: JSX.Element[] = [];\n\n const legendVal: string = _points[i].legend;\n const seriesColor: string = _points[i].color!;\n const verticaLineHeight = containerHeight - margins.bottom! + 6;\n\n for (let j = 0; j < _points[i].data.length; j++) {\n const seriesId = `${_seriesId}_${i}_${j}`;\n const circleId = `${_circleId}_${i}_${j}`;\n const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];\n let circleRadius = 3.5;\n const pointMarkerSize = (_points[i].data[j] as ScatterChartDataPoint).markerSize;\n if ((pointMarkerSize as number) !== undefined) {\n circleRadius = Math.min((pointMarkerSize! * maxMarkerRange) / maxMarkerSize, pointMarkerSize!);\n }\n\n const isLegendSelected: boolean = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;\n\n const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;\n pointsForSeries.push(\n <circle\n id={circleId}\n key={circleId}\n r={circleRadius}\n cx={_xAxisScale(x) + _xBandwidth}\n cy={_yAxisScale(y)}\n data-is-focusable={isLegendSelected}\n onMouseOver={(event: React.MouseEvent<SVGElement>) =>\n _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event)\n }\n onMouseMove={(event: React.MouseEvent<SVGElement>) =>\n _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event)\n }\n onMouseOut={_handleMouseOut}\n onFocus={event =>\n _handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)\n }\n onBlur={_handleMouseOut}\n {..._getClickHandler(_points[i].data[j].onDataPointClick)}\n opacity={isLegendSelected && !currentPointHidden ? 1 : 0.1}\n fill={_getPointFill(seriesColor, circleId, j, false)}\n stroke={seriesColor}\n role=\"img\"\n aria-label={_getAriaLabel(i, j)}\n tabIndex={isLegendSelected ? 0 : undefined}\n />,\n );\n }\n\n series.push(\n <g\n key={`series_${i}`}\n role=\"region\"\n aria-label={`${legendVal}, series ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`}\n >\n {pointsForSeries}\n </g>,\n );\n }\n // Removing un wanted tooltip div from DOM, when prop not provided.\n if (!props.showXAxisLablesTooltip) {\n try {\n document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n // Used to display tooltip at x axis labels.\n if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {\n const xAxisElement = d3Select(xElement).call(_xAxisScale);\n try {\n document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n const tooltipProps = {\n tooltipCls: classes.tooltip!,\n id: _tooltipId,\n axis: xAxisElement,\n };\n xAxisElement && tooltipOfAxislabels(tooltipProps);\n }\n return series;\n }\n\n function _handleFocus(\n event: React.FocusEvent<SVGCircleElement, Element>,\n seriesId: string,\n x: number | Date | string,\n xAxisCalloutData: string | undefined,\n circleId: string,\n xAxisCalloutAccessibilityData?: AccessibilityProps,\n ) {\n let cx = 0;\n let cy = 0;\n\n const targetRect = (event.target as SVGCircleElement).getBoundingClientRect();\n cx = targetRect.left + targetRect.width / 2;\n cy = targetRect.top + targetRect.height / 2;\n updatePosition(cx, cy);\n _uniqueCallOutID = circleId;\n const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;\n const xVal = x instanceof Date ? x.getTime() : x;\n const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal);\n // if no points need to be called out then don't show vertical line and callout card\n\n if (found) {\n d3Select(`#${_verticalLine}`)\n .attr('transform', () => `translate(${_xAxisScale(x) + _xBandwidth}, 0)`)\n .attr('visibility', 'visibility');\n _refArray.forEach((obj: RefArrayData) => {\n if (obj.index === seriesId) {\n setPopoverOpen(true);\n xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n setYValueHover(found.values);\n setStackCalloutProps(found!);\n setActivePoint(circleId);\n }\n });\n } else {\n setActivePoint(circleId);\n }\n }\n\n function _handleHover(\n x: number | Date | string,\n y: number | Date,\n lineHeight: number,\n xAxisCalloutData: string | undefined,\n circleId: string,\n xAxisCalloutAccessibilityData: AccessibilityProps | undefined,\n mouseEvent: React.MouseEvent<SVGElement>,\n ) {\n mouseEvent?.persist();\n const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;\n const xVal = x instanceof Date ? x.getTime() : x;\n const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal);\n // if no points need to be called out then don't show vertical line and callout card\n\n if (found) {\n d3Select(`#${_verticalLine}`)\n .attr('transform', () => `translate(${_xAxisScale(x) + _xBandwidth}, ${_yAxisScale(y)})`)\n .attr('visibility', 'visibility')\n .attr('y2', `${lineHeight - _yAxisScale(y)}`);\n\n if (_uniqueCallOutID !== circleId) {\n _uniqueCallOutID = circleId;\n updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n setYValueHover(found.values);\n setStackCalloutProps(found!);\n setActivePoint(circleId);\n }\n } else {\n setActivePoint(circleId);\n }\n }\n\n /**\n * Screen readers announce an element as clickable if the onClick attribute is set.\n * This function sets the attribute only when a click event handler is provided.*/\n\n function _getClickHandler(func?: () => void): { onClick?: () => void } {\n if (func) {\n return {\n onClick: func,\n };\n }\n\n return {};\n }\n\n function _handleMouseOut() {\n d3Select(`#${_verticalLine}`).attr('visibility', 'hidden');\n }\n\n function _handleChartMouseLeave() {\n _uniqueCallOutID = null;\n setActivePoint('');\n if (isPopoverOpen) {\n setPopoverOpen(false);\n }\n }\n\n /**\n * This function checks if the given legend is highlighted or not.\n * A legend can be highlighted in 2 ways:\n * 1. selection: if the user clicks on it\n * 2. hovering: if there is no selected legend and the user hovers over it*/\n\n function _legendHighlighted(legend: string): boolean {\n return _getHighlightedLegend().includes(legend);\n }\n\n /**\n * This function checks if none of the legends is selected or hovered.*/\n\n function _noLegendHighlighted(): boolean {\n return _getHighlightedLegend().length === 0;\n }\n\n function _getHighlightedLegend(): string[] {\n return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n }\n\n function _getAriaLabel(seriesIndex: number, pointIndex: number): string {\n const series = _points[seriesIndex];\n const point = series.data[pointIndex];\n const formattedDate = point.x instanceof Date ? formatDate(point.x, props.useUTC) : point.x;\n const xValue = point.xAxisCalloutData || formattedDate;\n const legend = series.legend;\n const yValue = point.yAxisCalloutData || point.y;\n return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.lineChartData &&\n props.data.lineChartData.length > 0 &&\n props.data.lineChartData.filter((item: LineChartPoints) => item.data.length).length > 0\n );\n }\n\n const { legendProps, tickValues, tickFormat } = props;\n _points = _injectIndexPropertyInScatterChartData(props.data.lineChartData);\n\n let points = _points;\n if (legendProps && !!legendProps.canSelectMultipleLegends) {\n points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;\n _calloutPoints = calloutData(points);\n }\n\n let legendBars = null;\n // reduce computation cost by only creating legendBars\n // if when hideLegend is false.\n // NOTE: they are rendered only when hideLegend is false in CartesianChart.\n if (!props.hideLegend) {\n legendBars = _createLegends(_points!); // ToDo: Memoize legends to improve performance.\n }\n const calloutProps = {\n YValueHover,\n hoverXValue,\n descriptionMessage:\n props.getCalloutDescriptionMessage && stackCalloutProps\n ? props.getCalloutDescriptionMessage(stackCalloutProps)\n : undefined,\n 'data-is-focusable': true,\n xAxisCalloutAccessibilityData,\n ...props.calloutProps,\n clickPosition,\n isPopoverOpen,\n isCalloutForStack: true,\n culture: props.culture ?? 'en-us',\n isCartesian: true,\n };\n const tickParams = {\n tickValues,\n tickFormat,\n };\n\n const xAxisLabels: string[] = _points\n .map((point: ScatterChartDataWithIndex) => point.data.map((dp: ScatterChartDataPoint) => dp.x as string))\n .flat();\n\n _xAxisLabels = [...new Set(xAxisLabels)];\n\n return !_isChartEmpty() ? (\n <CartesianChart\n {...props}\n chartTitle={props.data.chartTitle}\n points={points}\n chartType={ChartTypes.ScatterChart}\n calloutProps={calloutProps}\n tickParams={tickParams}\n legendBars={legendBars}\n getmargins={_getMargins}\n getGraphData={_initializeScatterChartData}\n xAxisType={_xAxisType}\n getMinMaxOfYAxis={_getNumericMinMaxOfY}\n getDomainNRangeValues={_getDomainNRangeValues}\n createYAxis={createNumericYAxis}\n createStringYAxis={createStringYAxis}\n onChartMouseLeave={_handleChartMouseLeave}\n enableFirstRenderOptimization={_firstRenderOptimization}\n datasetForXAxisDomain={_xAxisLabels}\n componentRef={cartesianChartRef}\n /* eslint-disable react/jsx-no-bind */\n // eslint-disable-next-line react/no-children-prop\n children={(props: ChildProps) => {\n _xAxisScale = props.xScale!;\n _yAxisScale = props.yScalePrimary!;\n return (\n <>\n <g>\n <line\n x1={0}\n y1={0}\n x2={0}\n y2={props.containerHeight}\n stroke={'#323130'}\n id={_verticalLine}\n visibility={'hidden'}\n strokeDasharray={'5,5'}\n />\n <g>{renderSeries}</g>\n </g>\n </>\n );\n }}\n />\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n});\nScatterChart.displayName = 'ScatterChart';\n"],"names":["React","useScatterChartStyles","select","d3Select","Legends","max","d3Max","min","d3Min","useId","areArraysEqual","createNumericYAxis","createStringYAxis","domainRangeOfDateForScatterChart","domainRangeOfNumericForScatterChart","domainRangeOfXStringAxis","find","findNumericMinMaxOfY","useRtl","CartesianChart","tokens","calloutData","ChartTypes","XAxisTypes","tooltipOfAxislabels","getTypeOfAxis","getNextColor","getColorFromToken","formatDate","toImage","ScatterChart","forwardRef","props","forwardedRef","_circleId","_seriesId","_verticalLine","_tooltipId","_firstRenderOptimization","_emptyChartId","_points","_injectIndexPropertyInScatterChartData","data","lineChartData","_calloutPoints","_xAxisScale","_yAxisScale","_uniqueCallOutID","_refArray","margins","renderSeries","_xAxisLabels","xAxisCalloutAccessibilityData","_xBandwidth","cartesianChartRef","useRef","classes","_legendsRef","_isRTL","hoverXValue","setHoverXValue","useState","activeLegend","setActiveLegend","YValueHover","setYValueHover","selectedLegendPoints","setSelectedLegendPoints","isSelectedLegend","setIsSelectedLegend","activePoint","setActivePoint","stackCalloutProps","setStackCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","selectedLegends","setSelectedLegends","legendProps","prevSelectedLegendsRef","undefined","useEffect","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_xAxisType","length","StringAxis","pointsRef","calloutPointsRef","height","width","scatterChartData","map","item","index","color","updatePosition","newX","newY","threshold","distance","Math","sqrt","pow","_getNumericMinMaxOfY","points","yAxisType","startValue","endValue","yPadding","_getDomainNRangeValues","chartType","isRTL","xAxisType","barWidth","tickValues","shiftX","domainNRangeValue","NumericAxis","DateAxis","_getMargins","_margins","_initializeScatterChartData","xScale","yScale","containerHeight","containerWidth","xElement","_createPlot","_onHoverCardHide","_createLegends","isLegendMultiSelectEnabled","canSelectMultipleLegends","legendDataItems","point","legend","title","onMouseOutAction","hoverAction","_handleChartMouseLeave","legendShape","shape","legends","enabledWrapLines","enabledLegendsWrapLines","overflowText","legendsOverflowText","onLegendHoverCardLeave","onChange","_onLegendSelectionChange","legendRef","legendsSelected","event","currentLegend","slice","_getPointFill","seriesColor","pointId","pointIndex","isLastPoint","colorNeutralBackground1","series","yMax","yMin","yPaddingRange","abs","maxMarkerRange","xPaddingRange","bandwidth","xMin","xMax","xPadding","getTime","Date","maxMarkerSize","markerSize","i","pointsForSeries","legendVal","verticaLineHeight","bottom","j","seriesId","circleId","xAxisCalloutData","circleRadius","pointMarkerSize","isLegendSelected","_legendHighlighted","_noLegendHighlighted","currentPointHidden","hideNonActiveDots","push","circle","id","key","r","cx","cy","data-is-focusable","onMouseOver","_handleHover","onMouseMove","onMouseOut","_handleMouseOut","onFocus","_handleFocus","onBlur","_getClickHandler","onDataPointClick","opacity","fill","stroke","role","aria-label","_getAriaLabel","tabIndex","g","showXAxisLablesTooltip","document","getElementById","remove","e","wrapXAxisLables","xAxisElement","call","tooltipProps","tooltipCls","tooltip","axis","targetRect","target","getBoundingClientRect","left","top","formattedData","useUTC","xVal","found","element","attr","forEach","obj","values","lineHeight","mouseEvent","persist","clientX","clientY","func","onClick","_getHighlightedLegend","includes","seriesIndex","formattedDate","xValue","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_isChartEmpty","filter","tickFormat","legendBars","hideLegend","calloutProps","descriptionMessage","getCalloutDescriptionMessage","isCalloutForStack","culture","isCartesian","tickParams","xAxisLabels","dp","flat","Set","chartTitle","getmargins","getGraphData","getMinMaxOfYAxis","getDomainNRangeValues","createYAxis","onChartMouseLeave","enableFirstRenderOptimization","datasetForXAxisDomain","children","yScalePrimary","line","x1","y1","x2","y2","visibility","strokeDasharray","div","style","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ScatterChart/ScatterChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScatterChartProps } from './ScatterChart.types';\nimport { useScatterChartStyles } from './useScatterChartStyles.styles';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { select as d3Select } from 'd3-selection';\nimport { Legend, Legends } from '../Legends/index';\nimport { max as d3Max, min as d3Min } from 'd3-array';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {\n areArraysEqual,\n createNumericYAxis,\n createStringYAxis,\n domainRangeOfDateForScatterChart,\n domainRangeOfNumericForScatterChart,\n domainRangeOfXStringAxis,\n find,\n findNumericMinMaxOfY,\n IDomainNRange,\n YAxisType,\n useRtl,\n} from '../../utilities/index';\nimport {\n AccessibilityProps,\n CartesianChart,\n ChildProps,\n CustomizedCalloutData,\n Margins,\n RefArrayData,\n ScatterChartDataPoint,\n Chart,\n ImageExportOptions,\n LegendContainer,\n ScatterChartPoints,\n} from '../../index';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n calloutData,\n ChartTypes,\n XAxisTypes,\n tooltipOfAxislabels,\n getTypeOfAxis,\n getNextColor,\n getColorFromToken,\n formatDate,\n} from '../../utilities/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { ScaleLinear } from 'd3-scale';\n\ntype NumericAxis = D3Axis<number | { valueOf(): number }>;\n\ntype ScatterChartDataWithIndex = ScatterChartPoints & { index: number };\n\n// Create a ScatterChart variant which uses these default styles and this styled subcomponent.\n/**\n * ScatterChart component\n * {@docCategory ScatterChart}\n */\nexport const ScatterChart: React.FunctionComponent<ScatterChartProps> = React.forwardRef<\n HTMLDivElement,\n ScatterChartProps\n>((props, forwardedRef) => {\n const _circleId: string = useId('circle');\n const _seriesId: string = useId('seriesID');\n const _verticalLine: string = useId('verticalLine');\n const _tooltipId: string = useId('ScatterChartTooltipId_');\n const _firstRenderOptimization = true;\n const _emptyChartId: string = useId('_ScatterChart_empty');\n let _points: ScatterChartDataWithIndex[] = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _calloutPoints: any[] = calloutData(_points) || [];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _xAxisScale: any = '';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let _yAxisScale: any = '';\n let _uniqueCallOutID: string | null = '';\n let _refArray: RefArrayData[] = [];\n let margins: Margins;\n let renderSeries: JSXElement[];\n let _xAxisLabels: string[] = [];\n let xAxisCalloutAccessibilityData: AccessibilityProps = {};\n let _xBandwidth = 0;\n const cartesianChartRef = React.useRef<Chart>(null);\n const classes = useScatterChartStyles(props);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n const [hoverXValue, setHoverXValue] = React.useState<string | number>('');\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n const [YValueHover, setYValueHover] = React.useState<[]>([]);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [selectedLegendPoints, setSelectedLegendPoints] = React.useState<any[]>([]);\n const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);\n const [activePoint, setActivePoint] = React.useState<string>('');\n const [stackCalloutProps, setStackCalloutProps] = React.useState<CustomizedCalloutData>();\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n const prevSelectedLegendsRef = React.useRef<string[] | undefined>(undefined);\n\n React.useEffect(() => {\n if (\n prevSelectedLegendsRef.current &&\n !areArraysEqual(prevSelectedLegendsRef.current, props.legendProps?.selectedLegends)\n ) {\n setSelectedLegends(props.legendProps?.selectedLegends || []);\n }\n prevSelectedLegendsRef.current = props.legendProps?.selectedLegends;\n }, [props.legendProps?.selectedLegends]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: cartesianChartRef.current?.chartContainer ?? null,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n const _xAxisType: XAxisTypes =\n props.data.scatterChartData! &&\n props.data.scatterChartData!.length > 0 &&\n props.data.scatterChartData![0].data &&\n props.data.scatterChartData![0].data.length > 0\n ? (getTypeOfAxis(props.data.scatterChartData![0].data[0].x, true) as XAxisTypes)\n : XAxisTypes.StringAxis;\n\n const pointsRef = React.useRef<ScatterChartDataWithIndex[] | []>([]);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const calloutPointsRef = React.useRef<any[]>([]);\n React.useEffect(() => {\n /** note that height and width are not used to resize or set as dimesions of the chart,\n * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart\n */\n\n if (_points !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) || props.data !== _points) {\n pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n calloutPointsRef.current = calloutData(pointsRef.current);\n }\n }, [props.height, props.width, props.data, _points]);\n\n function _injectIndexPropertyInScatterChartData(\n scatterChartData?: ScatterChartPoints[],\n ): ScatterChartDataWithIndex[] | [] {\n return scatterChartData\n ? scatterChartData.map((item: ScatterChartPoints, index: number) => {\n let color: string;\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0);\n } else {\n color = getColorFromToken(item.color);\n }\n return {\n ...item,\n index: -1,\n color,\n };\n })\n : [];\n }\n\n function updatePosition(newX: number, newY: number) {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n function _getNumericMinMaxOfY(\n points: ScatterChartPoints[],\n yAxisType?: YAxisType,\n ): { startValue: number; endValue: number } {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType);\n let yPadding = 0;\n yPadding = (endValue - startValue) * 0.1;\n\n return {\n startValue: startValue - yPadding,\n endValue: endValue + yPadding,\n };\n }\n\n function _getDomainNRangeValues(\n points: any,\n margins: Margins,\n width: number,\n chartType: ChartTypes,\n isRTL: boolean,\n xAxisType: XAxisTypes,\n barWidth: number,\n tickValues: Date[] | number[] | undefined,\n shiftX: number,\n ) {\n let domainNRangeValue: IDomainNRange;\n if (xAxisType === XAxisTypes.NumericAxis) {\n domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);\n } else if (xAxisType === XAxisTypes.DateAxis) {\n domainNRangeValue = domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues! as Date[]);\n } else {\n domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);\n }\n return domainNRangeValue;\n }\n\n function _getMargins(_margins: Margins) {\n margins = _margins;\n }\n\n function _initializeScatterChartData(\n xScale: NumericAxis,\n yScale: NumericAxis,\n containerHeight: number,\n containerWidth: number,\n xElement: SVGElement | null,\n ) {\n _xAxisScale = xScale;\n _yAxisScale = yScale;\n renderSeries = _createPlot(xElement!, containerHeight!);\n }\n\n function _onHoverCardHide() {\n setSelectedLegendPoints([]);\n setIsSelectedLegend(false);\n }\n\n function _createLegends(data: ScatterChartDataWithIndex[]): JSXElement {\n const { legendProps } = props;\n const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);\n const mapLegendToPoints: Record<string, ScatterChartDataWithIndex[]> = {};\n data.forEach((point: ScatterChartDataWithIndex) => {\n if (point.legend) {\n if (!mapLegendToPoints[point.legend]) {\n mapLegendToPoints[point.legend] = [];\n }\n mapLegendToPoints[point.legend].push(point);\n }\n });\n const legendDataItems: Legend[] = Object.entries(mapLegendToPoints).map(([legendTitle, points]) => {\n const representativePoint = points[0];\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: legendTitle,\n color: representativePoint.color!,\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(legendTitle);\n },\n ...(representativePoint.legendShape && {\n shape: representativePoint.legendShape,\n }),\n };\n return legend;\n });\n\n return (\n <Legends\n legends={[...legendDataItems]}\n enabledWrapLines={props.enabledLegendsWrapLines}\n overflowText={props.legendsOverflowText}\n {...(isLegendMultiSelectEnabled && { onLegendHoverCardLeave: _onHoverCardHide })}\n {...props.legendProps}\n selectedLegends={selectedLegends}\n onChange={_onLegendSelectionChange}\n legendRef={_legendsRef}\n />\n );\n }\n\n function _onLegendSelectionChange(\n legendsSelected: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: Legend,\n ): void {\n if (props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(legendsSelected);\n } else {\n setSelectedLegends(legendsSelected.slice(-1));\n }\n\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(legendsSelected, event, currentLegend);\n }\n }\n\n function _getPointFill(seriesColor: string, pointId: string, pointIndex: number, isLastPoint: boolean) {\n if (activePoint === pointId) {\n return tokens.colorNeutralBackground1;\n } else {\n return seriesColor;\n }\n }\n\n function _getRangeForScatterMarkerSize(\n yScale: ScaleLinear<number, number>,\n yPadding: number,\n xMin: number,\n xMax: number,\n xPadding: number,\n ): number {\n const extraXPixels = _isRTL\n ? _xAxisScale(xMax - xPadding) - _xAxisScale(xMax)\n : _xAxisScale(xMin + xPadding) - _xAxisScale(xMin);\n\n const yMin = yScale.domain()[0];\n const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);\n return Math.min(extraXPixels, extraYPixels);\n }\n\n function _createPlot(xElement: SVGElement, containerHeight: number): JSXElement[] {\n const series: JSXElement[] = [];\n if (isSelectedLegend) {\n _points = selectedLegendPoints;\n } else {\n _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n }\n\n const yMax = d3Max(points, (point: ScatterChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.y)!;\n })!;\n const yMin = d3Min(points, (point: ScatterChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.y)!;\n })!;\n const yPadding = (yMax - yMin) * 0.1;\n\n let xPadding = 0;\n let xMin: number = 0;\n let xMax: number = 0;\n if (_xAxisType === XAxisTypes.StringAxis) {\n _xBandwidth = _xAxisScale.bandwidth() / 2;\n } else if (_xAxisType === XAxisTypes.DateAxis) {\n xMin = d3Min(_points, (point: ScatterChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.x as Date)!;\n })!.getTime();\n\n xMax = d3Max(_points, (point: ScatterChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.x as Date;\n });\n })!.getTime();\n\n xPadding = (xMax - xMin) * 0.1;\n } else {\n xMin = d3Min(_points, (point: ScatterChartPoints) => {\n return d3Min(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => item.x as number)!;\n })!;\n\n xMax = d3Max(_points, (point: ScatterChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.x as number;\n });\n })!;\n\n xPadding = (xMax - xMin) * 0.1;\n }\n\n const maxMarkerSize = d3Max(_points, (point: ScatterChartPoints) => {\n return d3Max(point.data as ScatterChartDataPoint[], (item: ScatterChartDataPoint) => {\n return item.markerSize as number;\n });\n })!;\n\n for (let i = _points.length - 1; i >= 0; i--) {\n const pointsForSeries: JSXElement[] = [];\n\n const legendVal: string = _points[i].legend;\n const seriesColor: string = _points[i].color!;\n const verticaLineHeight = containerHeight - margins.bottom! + 6;\n\n for (let j = 0; j < _points[i].data.length; j++) {\n const seriesId = `${_seriesId}_${i}_${j}`;\n const circleId = `${_circleId}_${i}_${j}`;\n const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];\n const pointMarkerSize = (_points[i].data[j] as ScatterChartDataPoint).markerSize;\n const extraMaxPixels =\n _xAxisType !== XAxisTypes.StringAxis\n ? _getRangeForScatterMarkerSize(_yAxisScale, yPadding, xMin, xMax, xPadding)\n : 0;\n const minPixel = 4;\n const maxPixel = 16;\n const circleRadius =\n pointMarkerSize && maxMarkerSize !== 0\n ? _xAxisType !== XAxisTypes.StringAxis\n ? (pointMarkerSize * extraMaxPixels) / maxMarkerSize\n : minPixel + ((pointMarkerSize - minPixel) / (maxMarkerSize - minPixel)) * (maxPixel - minPixel)\n : activePoint === circleId\n ? 6\n : 4;\n\n const isLegendSelected: boolean = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;\n\n const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;\n const text = _points?.[i].data[j]?.text;\n pointsForSeries.push(\n <>\n <circle\n id={circleId}\n key={circleId}\n r={Math.max(circleRadius, 4)}\n cx={_xAxisScale(x) + _xBandwidth}\n cy={_yAxisScale(y)}\n data-is-focusable={isLegendSelected}\n onMouseOver={(event: React.MouseEvent<SVGElement>) =>\n _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event)\n }\n onMouseMove={(event: React.MouseEvent<SVGElement>) =>\n _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event)\n }\n onMouseOut={_handleMouseOut}\n onFocus={event =>\n _handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)\n }\n onBlur={_handleMouseOut}\n {..._getClickHandler(_points[i].data[j].onDataPointClick)}\n opacity={isLegendSelected && !currentPointHidden ? 1 : 0.1}\n fill={_getPointFill(seriesColor, circleId, j, false)}\n stroke={seriesColor}\n role=\"img\"\n aria-label={_getAriaLabel(i, j)}\n tabIndex={isLegendSelected ? 0 : undefined}\n />\n ,\n {text && (\n <text\n key={`${circleId}-label`}\n x={_xAxisScale(x) + _xBandwidth}\n y={_yAxisScale(y) + Math.max(circleRadius + 12, 16)}\n className={classes.markerLabel}\n >\n {text}\n </text>\n )}\n </>,\n );\n }\n\n series.push(\n <g\n key={`series_${i}`}\n role=\"region\"\n aria-label={`${legendVal}, series ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`}\n >\n {pointsForSeries}\n </g>,\n );\n }\n // Removing un wanted tooltip div from DOM, when prop not provided.\n if (!props.showXAxisLablesTooltip) {\n try {\n document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n // Used to display tooltip at x axis labels.\n if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {\n const xAxisElement = d3Select(xElement).call(_xAxisScale);\n try {\n document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n const tooltipProps = {\n tooltipCls: classes.tooltip!,\n id: _tooltipId,\n axis: xAxisElement,\n };\n xAxisElement && tooltipOfAxislabels(tooltipProps);\n }\n return series;\n }\n\n function _handleFocus(\n event: React.FocusEvent<SVGCircleElement, Element>,\n seriesId: string,\n x: number | Date | string,\n xAxisCalloutData: string | undefined,\n circleId: string,\n xAxisCalloutAccessibilityData?: AccessibilityProps,\n ) {\n let cx = 0;\n let cy = 0;\n\n const targetRect = (event.target as SVGCircleElement).getBoundingClientRect();\n cx = targetRect.left + targetRect.width / 2;\n cy = targetRect.top + targetRect.height / 2;\n updatePosition(cx, cy);\n _uniqueCallOutID = circleId;\n const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;\n const xVal = x instanceof Date ? x.getTime() : x;\n const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal);\n // if no points need to be called out then don't show vertical line and callout card\n\n if (found) {\n d3Select(`#${_verticalLine}`)\n .attr('transform', () => `translate(${_xAxisScale(x) + _xBandwidth}, 0)`)\n .attr('visibility', 'visibility');\n _refArray.forEach((obj: RefArrayData) => {\n if (obj.index === seriesId) {\n setPopoverOpen(true);\n xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n setYValueHover(found.values);\n setStackCalloutProps(found!);\n setActivePoint(circleId);\n }\n });\n } else {\n setActivePoint(circleId);\n }\n }\n\n function _handleHover(\n x: number | Date | string,\n y: number | Date,\n lineHeight: number,\n xAxisCalloutData: string | undefined,\n circleId: string,\n xAxisCalloutAccessibilityData: AccessibilityProps | undefined,\n mouseEvent: React.MouseEvent<SVGElement>,\n ) {\n mouseEvent?.persist();\n const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;\n const xVal = x instanceof Date ? x.getTime() : x;\n const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal);\n // if no points need to be called out then don't show vertical line and callout card\n\n if (found) {\n d3Select(`#${_verticalLine}`)\n .attr('transform', () => `translate(${_xAxisScale(x) + _xBandwidth}, ${_yAxisScale(y)})`)\n .attr('visibility', 'visibility')\n .attr('y2', `${lineHeight - _yAxisScale(y)}`);\n\n if (_uniqueCallOutID !== circleId) {\n _uniqueCallOutID = circleId;\n updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n setYValueHover(found.values);\n setStackCalloutProps(found!);\n setActivePoint(circleId);\n }\n } else {\n setActivePoint(circleId);\n }\n }\n\n /**\n * Screen readers announce an element as clickable if the onClick attribute is set.\n * This function sets the attribute only when a click event handler is provided.*/\n\n function _getClickHandler(func?: () => void): { onClick?: () => void } {\n if (func) {\n return {\n onClick: func,\n };\n }\n\n return {};\n }\n\n function _handleMouseOut() {\n d3Select(`#${_verticalLine}`).attr('visibility', 'hidden');\n }\n\n function _handleChartMouseLeave() {\n _uniqueCallOutID = null;\n setActivePoint('');\n if (isPopoverOpen) {\n setPopoverOpen(false);\n }\n }\n\n /**\n * This function checks if the given legend is highlighted or not.\n * A legend can be highlighted in 2 ways:\n * 1. selection: if the user clicks on it\n * 2. hovering: if there is no selected legend and the user hovers over it*/\n\n function _legendHighlighted(legend: string): boolean {\n return _getHighlightedLegend().includes(legend);\n }\n\n /**\n * This function checks if none of the legends is selected or hovered.*/\n\n function _noLegendHighlighted(): boolean {\n return _getHighlightedLegend().length === 0;\n }\n\n function _getHighlightedLegend(): string[] {\n return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n }\n\n function _getAriaLabel(seriesIndex: number, pointIndex: number): string {\n const series = _points[seriesIndex];\n const point = series.data[pointIndex];\n const formattedDate = point.x instanceof Date ? formatDate(point.x, props.useUTC) : point.x;\n const xValue = point.xAxisCalloutData || formattedDate;\n const legend = series.legend;\n const yValue = point.yAxisCalloutData || point.y;\n return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.scatterChartData &&\n props.data.scatterChartData.length > 0 &&\n props.data.scatterChartData.filter((item: ScatterChartPoints) => item.data.length).length > 0\n );\n }\n\n const _getMinMaxofXAxis = React.useCallback(\n (points: ScatterChartPoints[], yAxisType: YAxisType | undefined) =>\n _getNumericMinMaxOfY(points as ScatterChartPoints[], yAxisType),\n [],\n );\n\n const { legendProps, tickValues, tickFormat } = props;\n _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n\n let points = _points as ScatterChartPoints[];\n if (legendProps && !!legendProps.canSelectMultipleLegends) {\n points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;\n _calloutPoints = calloutData(points);\n }\n\n let legendBars = null;\n // reduce computation cost by only creating legendBars\n // if when hideLegend is false.\n // NOTE: they are rendered only when hideLegend is false in CartesianChart.\n if (!props.hideLegend) {\n legendBars = _createLegends(_points!); // ToDo: Memoize legends to improve performance.\n }\n const calloutProps = {\n YValueHover,\n hoverXValue,\n descriptionMessage:\n props.getCalloutDescriptionMessage && stackCalloutProps\n ? props.getCalloutDescriptionMessage(stackCalloutProps)\n : undefined,\n 'data-is-focusable': true,\n xAxisCalloutAccessibilityData,\n ...props.calloutProps,\n clickPosition,\n isPopoverOpen,\n isCalloutForStack: true,\n culture: props.culture ?? 'en-us',\n isCartesian: true,\n };\n const tickParams = {\n tickValues,\n tickFormat,\n };\n\n const xAxisLabels: string[] = _points\n .map((point: ScatterChartDataWithIndex) => point.data.map((dp: ScatterChartDataPoint) => dp.x as string))\n .flat();\n\n _xAxisLabels = [...new Set(xAxisLabels)];\n\n return !_isChartEmpty() ? (\n <CartesianChart\n {...props}\n chartTitle={props.data.chartTitle}\n points={points}\n chartType={ChartTypes.ScatterChart}\n calloutProps={calloutProps}\n tickParams={tickParams}\n legendBars={legendBars}\n getmargins={_getMargins}\n getGraphData={_initializeScatterChartData}\n xAxisType={_xAxisType}\n getMinMaxOfYAxis={_getMinMaxofXAxis}\n getDomainNRangeValues={_getDomainNRangeValues}\n createYAxis={createNumericYAxis}\n createStringYAxis={createStringYAxis}\n onChartMouseLeave={_handleChartMouseLeave}\n enableFirstRenderOptimization={_firstRenderOptimization}\n datasetForXAxisDomain={_xAxisLabels}\n componentRef={cartesianChartRef}\n /* eslint-disable react/jsx-no-bind */\n // eslint-disable-next-line react/no-children-prop\n children={(props: ChildProps) => {\n _xAxisScale = props.xScale!;\n _yAxisScale = props.yScalePrimary!;\n return (\n <>\n <g>\n <line\n x1={0}\n y1={0}\n x2={0}\n y2={props.containerHeight}\n stroke={'#323130'}\n id={_verticalLine}\n visibility={'hidden'}\n strokeDasharray={'5,5'}\n />\n <g>{renderSeries}</g>\n </g>\n </>\n );\n }}\n />\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n});\nScatterChart.displayName = 'ScatterChart';\n"],"names":["React","useScatterChartStyles","select","d3Select","Legends","max","d3Max","min","d3Min","useId","areArraysEqual","createNumericYAxis","createStringYAxis","domainRangeOfDateForScatterChart","domainRangeOfNumericForScatterChart","domainRangeOfXStringAxis","find","findNumericMinMaxOfY","useRtl","CartesianChart","tokens","calloutData","ChartTypes","XAxisTypes","tooltipOfAxislabels","getTypeOfAxis","getNextColor","getColorFromToken","formatDate","toImage","ScatterChart","forwardRef","props","forwardedRef","_circleId","_seriesId","_verticalLine","_tooltipId","_firstRenderOptimization","_emptyChartId","_points","_injectIndexPropertyInScatterChartData","data","scatterChartData","_calloutPoints","_xAxisScale","_yAxisScale","_uniqueCallOutID","_refArray","margins","renderSeries","_xAxisLabels","xAxisCalloutAccessibilityData","_xBandwidth","cartesianChartRef","useRef","classes","_legendsRef","_isRTL","hoverXValue","setHoverXValue","useState","activeLegend","setActiveLegend","YValueHover","setYValueHover","selectedLegendPoints","setSelectedLegendPoints","isSelectedLegend","setIsSelectedLegend","activePoint","setActivePoint","stackCalloutProps","setStackCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","selectedLegends","setSelectedLegends","legendProps","prevSelectedLegendsRef","undefined","useEffect","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_xAxisType","length","StringAxis","pointsRef","calloutPointsRef","height","width","map","item","index","color","updatePosition","newX","newY","threshold","distance","Math","sqrt","pow","_getNumericMinMaxOfY","points","yAxisType","startValue","endValue","yPadding","_getDomainNRangeValues","chartType","isRTL","xAxisType","barWidth","tickValues","shiftX","domainNRangeValue","NumericAxis","DateAxis","_getMargins","_margins","_initializeScatterChartData","xScale","yScale","containerHeight","containerWidth","xElement","_createPlot","_onHoverCardHide","_createLegends","isLegendMultiSelectEnabled","canSelectMultipleLegends","mapLegendToPoints","forEach","point","legend","push","legendDataItems","Object","entries","legendTitle","representativePoint","title","onMouseOutAction","hoverAction","_handleChartMouseLeave","legendShape","shape","legends","enabledWrapLines","enabledLegendsWrapLines","overflowText","legendsOverflowText","onLegendHoverCardLeave","onChange","_onLegendSelectionChange","legendRef","legendsSelected","event","currentLegend","slice","_getPointFill","seriesColor","pointId","pointIndex","isLastPoint","colorNeutralBackground1","_getRangeForScatterMarkerSize","xMin","xMax","xPadding","extraXPixels","yMin","domain","extraYPixels","series","yMax","bandwidth","getTime","maxMarkerSize","markerSize","i","pointsForSeries","legendVal","verticaLineHeight","bottom","j","seriesId","circleId","xAxisCalloutData","pointMarkerSize","extraMaxPixels","minPixel","maxPixel","circleRadius","isLegendSelected","_legendHighlighted","_noLegendHighlighted","currentPointHidden","hideNonActiveDots","text","circle","id","key","r","cx","cy","data-is-focusable","onMouseOver","_handleHover","onMouseMove","onMouseOut","_handleMouseOut","onFocus","_handleFocus","onBlur","_getClickHandler","onDataPointClick","opacity","fill","stroke","role","aria-label","_getAriaLabel","tabIndex","className","markerLabel","g","showXAxisLablesTooltip","document","getElementById","remove","e","wrapXAxisLables","xAxisElement","call","tooltipProps","tooltipCls","tooltip","axis","targetRect","target","getBoundingClientRect","left","top","formattedData","Date","useUTC","xVal","found","element","attr","obj","values","lineHeight","mouseEvent","persist","clientX","clientY","func","onClick","_getHighlightedLegend","includes","seriesIndex","formattedDate","xValue","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_isChartEmpty","filter","_getMinMaxofXAxis","useCallback","tickFormat","legendBars","hideLegend","calloutProps","descriptionMessage","getCalloutDescriptionMessage","isCalloutForStack","culture","isCartesian","tickParams","xAxisLabels","dp","flat","Set","chartTitle","getmargins","getGraphData","getMinMaxOfYAxis","getDomainNRangeValues","createYAxis","onChartMouseLeave","enableFirstRenderOptimization","datasetForXAxisDomain","children","yScalePrimary","line","x1","y1","x2","y2","visibility","strokeDasharray","div","style","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ScatterChart/ScatterChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n ChartProps,\n LineChartPoints,\n Margins,\n Basestate,\n RefArrayData,\n CustomizedCalloutData,\n} from '../../types/index';\nimport {\n CartesianChartProps,\n CartesianChartStyleProps,\n CartesianChartStyles,\n ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ScatterChartProps extends CartesianChartProps {\n /**\n * Data to render in the chart.\n */\n data: ChartProps;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: ScatterChartStyles;\n\n /**\n * Define a custom callout renderer for a data point\n */\n onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n /**\n * Callback for getting callout description message\n */\n getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n}\n\n/**\n * Scatter Chart styles\n * {@docCategory ScatterChart}\n */\nexport interface ScatterChartStyles extends CartesianChartStyles {}\n\n/**\n * Scatter Chart style properties\n * {@docCategory ScatterChart}\n */\nexport interface ScatterChartStyleProps extends CartesianChartStyleProps {}\n"],"names":[],"mappings":"AAAA,uDAAuD,
|
|
1
|
+
{"version":3,"sources":["../src/components/ScatterChart/ScatterChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n ChartProps,\n LineChartPoints,\n Margins,\n Basestate,\n RefArrayData,\n CustomizedCalloutData,\n} from '../../types/index';\nimport {\n CartesianChartProps,\n CartesianChartStyleProps,\n CartesianChartStyles,\n ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ScatterChartProps extends CartesianChartProps {\n /**\n * Data to render in the chart.\n */\n data: ChartProps;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: ScatterChartStyles;\n\n /**\n * Define a custom callout renderer for a data point\n */\n onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n /**\n * Callback for getting callout description message\n */\n getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n}\n\n/**\n * Scatter Chart styles\n * {@docCategory ScatterChart}\n */\nexport interface ScatterChartStyles extends CartesianChartStyles {\n /**\n * Style for the marker label\n */\n markerLabel?: string;\n}\n\n/**\n * Scatter Chart style properties\n * {@docCategory ScatterChart}\n */\nexport interface ScatterChartStyleProps extends CartesianChartStyleProps {}\n"],"names":[],"mappings":"AAAA,uDAAuD,GA6DvD;;;CAGC,GACD,WAA2E"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
import { HighContrastSelector } from '../../utilities/index';
|
|
3
4
|
/**
|
|
4
5
|
* @internal
|
|
5
6
|
*/
|
|
6
7
|
export const scatterChartClassNames = {
|
|
7
8
|
tooltip: 'fui-line__tooltip',
|
|
9
|
+
markerLabel: 'fui-line__markerLabel',
|
|
8
10
|
root: 'fui-line__root',
|
|
9
11
|
xAxis: 'fui-line__xAxis',
|
|
10
12
|
yAxis: 'fui-line__yAxis',
|
|
@@ -17,7 +19,8 @@ export const scatterChartClassNames = {
|
|
|
17
19
|
shapeStyles: 'fui-line__shapeStyles',
|
|
18
20
|
chartWrapper: 'fui-line__chartWrapper',
|
|
19
21
|
svgTooltip: '',
|
|
20
|
-
chart: ''
|
|
22
|
+
chart: '',
|
|
23
|
+
axisAnnotation: ''
|
|
21
24
|
};
|
|
22
25
|
/**
|
|
23
26
|
* Base Styles
|
|
@@ -40,18 +43,32 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
40
43
|
B7oj6ja: 0,
|
|
41
44
|
Dimara: "fq9zq91",
|
|
42
45
|
Bkecrkj: "f1aehjj5"
|
|
46
|
+
},
|
|
47
|
+
markerLabel: {
|
|
48
|
+
Bahqtrf: "fk6fouc",
|
|
49
|
+
Be2twd7: "fkhj508",
|
|
50
|
+
Bhrd7zp: "figsok6",
|
|
51
|
+
Bg96gwp: "f1i3iumi",
|
|
52
|
+
Bkfmm31: "fhuob2q",
|
|
53
|
+
jzqdnp: "fdxigdc",
|
|
54
|
+
a6j6cd: "folz2wl"
|
|
43
55
|
}
|
|
44
56
|
}, {
|
|
45
57
|
d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".f5q6cfr{fill:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
|
|
46
58
|
p: -1
|
|
47
|
-
}], ".f1aehjj5{pointer-events:none;}"]
|
|
59
|
+
}], ".f1aehjj5{pointer-events:none;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}"],
|
|
60
|
+
m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
|
|
61
|
+
m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
|
|
62
|
+
}]]
|
|
48
63
|
});
|
|
49
64
|
/**
|
|
50
65
|
* Apply styling to the Carousel slots based on the state
|
|
51
66
|
*/
|
|
52
67
|
export const useScatterChartStyles = props => {
|
|
68
|
+
var _props_styles;
|
|
53
69
|
const baseStyles = useStyles();
|
|
54
70
|
return {
|
|
55
|
-
tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/)
|
|
71
|
+
tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),
|
|
72
|
+
markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)
|
|
56
73
|
};
|
|
57
74
|
};
|