@fluentui/react-charts 9.2.2 → 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 +35 -2
- package/dist/index.d.ts +89 -10
- 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 +3 -2
- package/lib/components/ChartTable/ChartTable.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.js +60 -19
- package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +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 +175 -107
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +6 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +791 -199
- 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/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 +29 -8
- 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/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/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 +27 -4
- 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 +158 -46
- 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/types/DataPoint.js.map +1 -1
- package/lib/utilities/utilities.js +15 -5
- package/lib/utilities/utilities.js.map +1 -1
- 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 +3 -2
- package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +60 -18
- package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +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 +171 -105
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +9 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +810 -197
- 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/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 +28 -7
- 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/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/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 +26 -3
- 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 +157 -45
- 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/types/DataPoint.js.map +1 -1
- package/lib-commonjs/utilities/utilities.js +15 -4
- package/lib-commonjs/utilities/utilities.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 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 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: 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.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[]): JSXElement {\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): JSXElement[] {\n const series: JSXElement[] = [];\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: 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 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
|
};
|