@fluentui/react-charts 9.2.2 → 9.2.4
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 +74 -2
- package/dist/index.d.ts +187 -15
- package/lib/components/AreaChart/AreaChart.js +7 -4
- package/lib/components/AreaChart/AreaChart.js.map +1 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.js +4 -3
- package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
- package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js +5 -16
- package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
- package/lib/components/ChartTable/ChartTable.js +90 -6
- package/lib/components/ChartTable/ChartTable.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.js +83 -38
- 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 +19 -3
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js +8 -23
- package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +214 -107
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +25 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +1618 -259
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/Arc/useArcStyles.styles.js +8 -3
- package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map +1 -1
- package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js +6 -2
- package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.js +8 -3
- package/lib/components/DonutChart/DonutChart.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib/components/DonutChart/useDonutChartStyles.styles.js +21 -4
- package/lib/components/DonutChart/useDonutChartStyles.styles.js.map +1 -1
- package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js +8 -4
- package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js.map +1 -1
- package/lib/components/FunnelChart/FunnelChart.js +4 -2
- package/lib/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib/components/FunnelChart/funnelGeometry.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/GaugeChart/GaugeChart.js +1 -2
- package/lib/components/GaugeChart/GaugeChart.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +31 -10
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +6 -18
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +6 -22
- package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.js +175 -114
- package/lib/components/HeatMapChart/HeatMapChart.js.map +1 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
- package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
- package/lib/components/HorizontalBarChart/HorizontalBarChart.js +1 -1
- package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
- package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js +7 -3
- package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js.map +1 -1
- package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.raw.js +5 -2
- package/lib/components/HorizontalBarChart/useHorizontalBarChartStyles.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 +349 -176
- 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 +28 -8
- package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib/components/LineChart/useLineChartStyles.styles.raw.js +9 -14
- package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
- package/lib/components/ResponsiveContainer/withResponsiveContainer.js.map +1 -1
- package/lib/components/SankeyChart/SankeyChart.js.map +1 -1
- package/lib/components/SankeyChart/useSankeyChartStyles.styles.js +12 -25
- package/lib/components/SankeyChart/useSankeyChartStyles.styles.js.map +1 -1
- package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js +2 -12
- package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +139 -81
- 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 +29 -8
- package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +10 -15
- package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.js +28 -5
- package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +10 -7
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +7 -20
- package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +159 -47
- 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 +9 -7
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +6 -20
- package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
- package/lib/types/DataPoint.js +3 -1
- package/lib/types/DataPoint.js.map +1 -1
- package/lib/utilities/Common.styles.js +47 -0
- package/lib/utilities/Common.styles.js.map +1 -0
- package/lib/utilities/Common.styles.raw.js +47 -0
- package/lib/utilities/Common.styles.raw.js.map +1 -0
- package/lib/utilities/SVGTooltipText.js.map +1 -1
- package/lib/utilities/image-export-utils.js.map +1 -1
- package/lib/utilities/index.js +1 -0
- package/lib/utilities/index.js.map +1 -1
- package/lib/utilities/scatterpolar-utils.js +52 -0
- package/lib/utilities/scatterpolar-utils.js.map +1 -0
- package/lib/utilities/utilities.js +324 -147
- package/lib/utilities/utilities.js.map +1 -1
- package/lib/utilities/vbc-utils.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.js +6 -3
- 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 +4 -15
- package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ChartTable/ChartTable.js +90 -6
- package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +83 -37
- 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 +17 -2
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +6 -22
- package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +212 -107
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +31 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +1652 -260
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js +12 -3
- package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.raw.js +6 -2
- package/lib-commonjs/components/DonutChart/Arc/useArcStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js +7 -2
- package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js +32 -4
- package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.raw.js +8 -4
- package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/FunnelChart/FunnelChart.js +4 -2
- package/lib-commonjs/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib-commonjs/components/FunnelChart/funnelGeometry.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/GaugeChart/GaugeChart.js +1 -2
- package/lib-commonjs/components/GaugeChart/GaugeChart.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +30 -9
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +4 -20
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +5 -21
- package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.js +174 -113
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js +1 -1
- package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js +10 -3
- package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.styles.raw.js +5 -2
- package/lib-commonjs/components/HorizontalBarChart/useHorizontalBarChartStyles.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 +347 -175
- 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 +35 -5
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +7 -13
- package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js.map +1 -1
- package/lib-commonjs/components/SankeyChart/SankeyChart.js.map +1 -1
- package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js +23 -33
- package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js +1 -12
- package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +137 -79
- 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 +39 -6
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +9 -14
- package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +27 -4
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +7 -4
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +5 -18
- package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +158 -46
- 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 +7 -4
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +5 -19
- package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/types/DataPoint.js +3 -1
- package/lib-commonjs/types/DataPoint.js.map +1 -1
- package/lib-commonjs/utilities/Common.styles.js +71 -0
- package/lib-commonjs/utilities/Common.styles.js.map +1 -0
- package/lib-commonjs/utilities/Common.styles.raw.js +71 -0
- package/lib-commonjs/utilities/Common.styles.raw.js.map +1 -0
- package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
- package/lib-commonjs/utilities/image-export-utils.js.map +1 -1
- package/lib-commonjs/utilities/index.js +1 -0
- package/lib-commonjs/utilities/index.js.map +1 -1
- package/lib-commonjs/utilities/scatterpolar-utils.js +67 -0
- package/lib-commonjs/utilities/scatterpolar-utils.js.map +1 -0
- package/lib-commonjs/utilities/utilities.js +337 -137
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/lib-commonjs/utilities/vbc-utils.js.map +1 -1
- package/package.json +10 -10
package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { VerticalStackedBarChartProps, VerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBarChartStyles> = {\n opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n tooltip: 'fui-vsbc__tooltip',\n barLabel: 'fui-vsbc__barLabel',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n cursor: 'default',\n },\n tooltip: getTooltipStyle() as GriffelStyle,\n barLabel: getBarLabelStyle() as GriffelStyle,\n});\n\nexport const useVerticalStackedBarChartStyles = (\n props: VerticalStackedBarChartProps,\n): VerticalStackedBarChartStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(\n verticalstackedbarchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover,\n props.href ? 'pointer' : 'default',\n ),\n tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,wBAAwB;AAE1E,OAAO,MAAMC,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYrB,WAAW;IAC3BK,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAASH;IACTI,UAAUL;AACZ;AAEA,OAAO,MAAMqB,mCAAmC,CAC9CC;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLhB,sBAAsBJ,aACpBG,kCAAkCC,oBAAoB,EACtDoB,WAAWpB,oBAAoB,EAC/BmB,MAAME,IAAI,GAAG,YAAY;QAE3BpB,SAASL,aAAaG,kCAAkCE,OAAO,EAAEmB,WAAWnB,OAAO;QACnFC,UAAUN,aAAaG,kCAAkCG,QAAQ,EAAEkB,WAAWlB,QAAQ;IACxF;AACF,EAAE"}
|
package/lib/types/DataPoint.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types/DataPoint.ts"],"sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\n\nexport interface Basestate {\n _width?: number;\n _height?: number;\n activeLegend?: string;\n color?: string;\n dataForHoverCard?: number;\n isCalloutVisible: boolean;\n isLegendSelected?: boolean;\n isLegendHovered?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected?: any;\n YValueHover?: { legend?: string; y?: number; color?: string }[];\n hoverYValue?: string | number | null;\n hoverXValue?: string | number | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n lineColor?: string;\n hoveredLineColor?: string;\n selectedLegend?: string;\n containerWidth?: number;\n containerHeight?: number;\n}\n\nexport interface RefArrayData {\n index?: string;\n refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface Margins {\n /**\n * left margin for the chart.\n */\n left?: number;\n /**\n * Right margin for the chart.\n */\n right?: number;\n /**\n * Top margin for the chart.\n */\n top?: number;\n /**\n * Bottom margin for the chart.\n */\n bottom?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface DataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n // NOTE: VerticalStackedBarChart, PieChart\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n * If data type on x is Date, then the data is spaced evenly by d3-scale.\n */\n x: number | string | Date;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number;\n\n /**\n * Total value of a single point bar chart.\n */\n total?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface ChartDataPoint {\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * data the datapoint in the chart\n */\n data?: number;\n\n /**\n * data the datapoint in the chart\n */\n horizontalBarChartdata?: HorizontalDataPoint;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n */\n color?: string;\n\n /**\n * placeholder data point\n */\n placeHolder?: boolean;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalBarChartDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * data to render the line along with bars\n */\n lineData?: LineDataInVerticalBarChart;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalBarChartWithAxisDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: number;\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalBarChart {\n y: VerticalBarChartDataPoint['y'];\n yAxisCalloutData?: string | undefined;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\ninterface BaseDataPoint {\n /**\n * Defines the function that is executed on clicking line\n */\n onDataPointClick?: () => void;\n\n /**\n * Callout data for x axis\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n */\n yAxisCalloutData?: string | { [id: string]: number };\n\n /**\n * Whether to hide callout data for the point.\n */\n hideCallout?: boolean;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * X axis Accessibility data for callout\n */\n xAxisCalloutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartDataPoint extends BaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory ChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface ScatterChartDataPoint extends BaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Marker size of the points\n */\n markerSize?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartGap {\n /**\n * Starting index of the gap.\n */\n startIndex: number;\n\n /**\n * Ending index of the gap.\n */\n endIndex: number;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface LineChartLineOptions extends SVGProps<SVGPathElement> {\n /**\n * Width of the line/stroke.\n * Overrides the strokeWidth set on ICartesianChartProps level.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n */\n strokeWidth?: number | string;\n\n /**\n * Pattern of dashes and gaps.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n */\n strokeDasharray?: string | number;\n\n /**\n * Offset on rendering of stroke dash array.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n */\n strokeDashoffset?: string | number;\n\n /**\n * Shape at the end of a subpath.\n * Default round.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n */\n strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n /**\n * Width of border around the line. Default no border.\n */\n lineBorderWidth?: string | number;\n\n /**\n * Color of border around the line. Default white.\n */\n lineBorderColor?: string;\n\n /**\n * Defines the type of interpolation used to render the line.\n * @default 'linear'\n */\n curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: LineChartDataPoint[] | ScatterChartDataPoint[];\n\n /**\n * gaps in the line chart where a line is not drawn\n */\n gaps?: LineChartGap[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * options for the line drawn\n */\n lineOptions?: LineChartLineOptions;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Defines the function that is executed on clicking line\n */\n onLineClick?: () => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface ChartProps {\n /**\n * chart title for the chart\n */\n chartTitle?: string;\n\n /**\n * Accessibility data for chart title\n */\n chartTitleAccessibilityData?: AccessibilityProps;\n /**\n * data for the points in the chart\n */\n chartData?: ChartDataPoint[];\n\n /**\n * Accessibility data for chart data\n */\n chartDataAccessibilityData?: AccessibilityProps;\n\n /**\n * data for the points in the line chart\n */\n lineChartData?: LineChartPoints[];\n\n /**\n * data for the points in the line chart\n */\n SankeyChartData?: SankeyChartData;\n\n /**\n * data for the points in the line chart\n */\n pointOptions?: SVGProps<SVGCircleElement>;\n\n /**\n * data for the dotted line on hovering the point\n */\n pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface AccessibilityProps {\n /**\n * Accessibility aria-label\n */\n ariaLabel?: string;\n\n /**\n * Accessibility aria-labelledBy\n */\n ariaLabelledBy?: string;\n\n /**\n * Accessibility aria-describedBy\n */\n ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VSChartDataPoint {\n /**\n * data the datapoint in the chart\n */\n data: number;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface VerticalStackedChartProps {\n /**\n * data for the points in the chart\n */\n chartData: VSChartDataPoint[];\n\n /**\n * Data for x axis label for multistacked Vertical bar chart\n */\n xAxisPoint: number | string | Date;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given, legend will take\n */\n xAxisCalloutData?: string;\n /**\n * line data to render lines on stacked bar chart\n */\n lineData?: LineDataInVerticalStackedBarChart[];\n /**\n * Accessibility data for Whole stack callout\n */\n stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalStackedBarChart {\n y: number;\n color: string;\n legend: string;\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n /**\n * Data to show in callout\n */\n data?: number;\n yAxisCalloutData?: string;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n /**\n * options for the line drawn\n */\n lineOptions?: LineChartLineOptions;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GVBarChartSeriesPoint {\n /**\n * Text for // need to check use of this\n */\n key: string;\n\n /**\n * Data for bar height of Grouped vertical bar chart\n */\n data: number;\n\n /**\n * Color for the legend in the chart\n */\n color: string;\n\n /**\n * Legend text in the chart\n */\n legend: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GroupedVerticalBarChartData {\n /**\n * Data for X axis label\n */\n name: string;\n\n /**\n * Data points for Grouped vertical bar chart\n */\n series: GVBarChartSeriesPoint[];\n\n /**\n * Accessibility data for Group Bars Stack Callout\n */\n stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface GVDataPoint {\n /**\n * This interface used for - While forming datapoints from given prop \"data\" in code\n * datapoints are used for to draw graph\n */\n [key: string]: number | string;\n}\n\nexport interface GVSingleDataPoint {\n /**\n * While forming datapoints from given prop \"data\" in code.\n * These datapoints are used for to draw graph easily.\n */\n [key: string]: GVDataPoint;\n}\n\nexport interface GVForBarChart {\n /**\n * While forming datapoints from given prop \"data\"\n * These datapoints are used for to draw graph.\n */\n [key: string]: GVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutDataPoint {\n legend: string;\n y: number;\n color: string;\n xAxisCalloutData?: string;\n yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutData {\n x: number | string | Date;\n values: CustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface Chart {\n chartContainer: HTMLElement | null;\n toImage?: (opts?: ImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface ImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport interface HeatMapChartDataPoint {\n x: string | Date | number;\n y: string | Date | number;\n value: number;\n /**\n * The value/ text to be rendered in the rectange\n */\n rectText?: string | number;\n /**\n * denomination to show in the callout\n */\n ratio?: [number, number];\n /**\n * description message to the callout\n */\n descriptionMessage?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HeatMapChartData {\n /**\n * name of the legend\n */\n legend: string;\n data: HeatMapChartDataPoint[];\n /**\n * This number will be used to get the color for the legend\n */\n value: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface SankeyChartData {\n nodes: SNode[];\n links: SLink[];\n}\n\ninterface SNodeExtra {\n /**\n * A unique identifier for this node.\n */\n nodeId: number | string;\n /**\n * The display name for this node in the UX.\n */\n name: string;\n color?: string;\n borderColor?: string;\n actualValue?: number;\n layer?: number;\n}\n\ninterface SLinkExtra {\n /**\n * The index within `ISankeyChartData.nodes` of the source node.\n */\n source: number;\n /**\n * The index within `ISankeyChartData.nodes` of the target node.\n */\n target: number;\n /**\n * The weight of this link between the two nodes.\n */\n value: number;\n unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<SNodeExtra, SLinkExtra>;\nexport type SLink = SankeyLink<SNodeExtra, SLinkExtra>;\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n * In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n | 'default'\n | 'data'\n | string[]\n | 'category ascending'\n | 'category descending'\n | 'total ascending'\n | 'total descending'\n | 'min ascending'\n | 'min descending'\n | 'max ascending'\n | 'max descending'\n | 'sum ascending'\n | 'sum descending'\n | 'mean ascending'\n | 'mean descending'\n | 'median ascending'\n | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface GanttChartDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: {\n start: Date | number;\n end: Date | number;\n };\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n"],"names":[],"mappings":"AA+3BA;;CAEC,GACD,WAqDC"}
|
|
1
|
+
{"version":3,"sources":["../src/types/DataPoint.ts"],"sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\n\nexport interface Basestate {\n _width?: number;\n _height?: number;\n activeLegend?: string;\n color?: string;\n dataForHoverCard?: number | string;\n isCalloutVisible: boolean;\n isLegendSelected?: boolean;\n isLegendHovered?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected?: any;\n YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n hoverYValue?: string | number | null;\n hoverXValue?: string | number | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n lineColor?: string;\n hoveredLineColor?: string;\n selectedLegend?: string;\n containerWidth?: number;\n containerHeight?: number;\n}\n\nexport interface RefArrayData {\n index?: string;\n refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface Margins {\n /**\n * left margin for the chart.\n */\n left?: number;\n /**\n * Right margin for the chart.\n */\n right?: number;\n /**\n * Top margin for the chart.\n */\n top?: number;\n /**\n * Bottom margin for the chart.\n */\n bottom?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface DataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n // NOTE: VerticalStackedBarChart, PieChart\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n * If data type on x is Date, then the data is spaced evenly by d3-scale.\n */\n x: number | string | Date;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number;\n\n /**\n * Total value of a single point bar chart.\n */\n total?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface ChartDataPoint {\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * data the datapoint in the chart\n */\n data?: number;\n\n /**\n * data the datapoint in the chart\n */\n horizontalBarChartdata?: HorizontalDataPoint;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n */\n color?: string;\n\n /**\n * placeholder data point\n */\n placeHolder?: boolean;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalBarChartDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * data to render the line along with bars\n */\n lineData?: LineDataInVerticalBarChart;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalBarChartWithAxisDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: number;\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalBarChart {\n y: VerticalBarChartDataPoint['y'];\n yAxisCalloutData?: string | undefined;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\ninterface BaseDataPoint {\n /**\n * Defines the function that is executed on clicking line\n */\n onDataPointClick?: () => void;\n\n /**\n * Callout data for x axis\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n */\n yAxisCalloutData?: string | { [id: string]: number };\n\n /**\n * Whether to hide callout data for the point.\n */\n hideCallout?: boolean;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * X axis Accessibility data for callout\n */\n xAxisCalloutAccessibilityData?: AccessibilityProps;\n\n /**\n * Marker size of the points\n */\n markerSize?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartDataPoint extends BaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * text labels of marker points\n */\n text?: string;\n}\n\n/**\n * {@docCategory ChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface ScatterChartDataPoint extends BaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Marker size of the points\n */\n markerSize?: number;\n\n /**\n * text labels of marker points\n */\n text?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartGap {\n /**\n * Starting index of the gap.\n */\n startIndex: number;\n\n /**\n * Ending index of the gap.\n */\n endIndex: number;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface LineChartLineOptions extends SVGProps<SVGPathElement> {\n /**\n * Width of the line/stroke.\n * Overrides the strokeWidth set on ICartesianChartProps level.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n */\n strokeWidth?: number | string;\n\n /**\n * Pattern of dashes and gaps.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n */\n strokeDasharray?: string | number;\n\n /**\n * Offset on rendering of stroke dash array.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n */\n strokeDashoffset?: string | number;\n\n /**\n * Shape at the end of a subpath.\n * Default round.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n */\n strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n /**\n * Width of border around the line. Default no border.\n */\n lineBorderWidth?: string | number;\n\n /**\n * Color of border around the line. Default white.\n */\n lineBorderColor?: string;\n\n /**\n * Defines the type of interpolation used to render the line.\n * @default 'linear'\n */\n curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n /**\n * Defines the mode of points to be rendered.\n */\n mode?:\n | 'lines'\n | 'markers'\n | 'text'\n | 'lines+markers'\n | 'text+markers'\n | 'text+lines'\n | 'text+lines+markers'\n | 'none'\n | 'gauge'\n | 'number'\n | 'delta'\n | 'number+delta'\n | 'gauge+number'\n | 'gauge+number+delta'\n | 'gauge+delta'\n | 'markers+text'\n | 'lines+text'\n | 'lines+markers+text';\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: LineChartDataPoint[] | ScatterChartDataPoint[];\n\n /**\n * gaps in the line chart where a line is not drawn\n */\n gaps?: LineChartGap[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * options for the line drawn\n */\n lineOptions?: LineChartLineOptions;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Defines the function that is executed on clicking line\n */\n onLineClick?: () => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface ChartProps {\n /**\n * chart title for the chart\n */\n chartTitle?: string;\n\n /**\n * Accessibility data for chart title\n */\n chartTitleAccessibilityData?: AccessibilityProps;\n /**\n * data for the points in the chart\n */\n chartData?: ChartDataPoint[];\n\n /**\n * Accessibility data for chart data\n */\n chartDataAccessibilityData?: AccessibilityProps;\n\n /**\n * data for the points in the line chart\n */\n lineChartData?: LineChartPoints[];\n\n /**\n * data for the points in the scatter chart\n */\n scatterChartData?: ScatterChartPoints[];\n\n /**\n * data for the points in the line chart\n */\n SankeyChartData?: SankeyChartData;\n\n /**\n * data for the points in the line chart\n */\n pointOptions?: SVGProps<SVGCircleElement>;\n\n /**\n * data for the dotted line on hovering the point\n */\n pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface AccessibilityProps {\n /**\n * Accessibility aria-label\n */\n ariaLabel?: string;\n\n /**\n * Accessibility aria-labelledBy\n */\n ariaLabelledBy?: string;\n\n /**\n * Accessibility aria-describedBy\n */\n ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VSChartDataPoint {\n /**\n * data the datapoint in the chart\n */\n data: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface VerticalStackedChartProps {\n /**\n * data for the points in the chart\n */\n chartData: VSChartDataPoint[];\n\n /**\n * Data for x axis label for multistacked Vertical bar chart\n */\n xAxisPoint: number | string | Date;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given, legend will take\n */\n xAxisCalloutData?: string;\n /**\n * line data to render lines on stacked bar chart\n */\n lineData?: LineDataInVerticalStackedBarChart[];\n /**\n * Accessibility data for Whole stack callout\n */\n stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalStackedBarChart {\n y: number | string;\n color: string;\n legend: string;\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n /**\n * Data to show in callout\n */\n data?: number | string;\n yAxisCalloutData?: string;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n /**\n * options for the line drawn\n */\n lineOptions?: LineChartLineOptions;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GVBarChartSeriesPoint {\n /**\n * Text for // need to check use of this\n */\n key: string;\n\n /**\n * Data for bar height of Grouped vertical bar chart\n */\n data: number;\n\n /**\n * Color for the legend in the chart\n */\n color: string;\n\n /**\n * Legend text in the chart\n */\n legend: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GroupedVerticalBarChartData {\n /**\n * Data for X axis label\n */\n name: string;\n\n /**\n * Data points for Grouped vertical bar chart\n */\n series: GVBarChartSeriesPoint[];\n\n /**\n * Accessibility data for Group Bars Stack Callout\n */\n stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface GVDataPoint {\n /**\n * This interface used for - While forming datapoints from given prop \"data\" in code\n * datapoints are used for to draw graph\n */\n [key: string]: number | string;\n}\n\nexport interface GVSingleDataPoint {\n /**\n * While forming datapoints from given prop \"data\" in code.\n * These datapoints are used for to draw graph easily.\n */\n [key: string]: GVDataPoint;\n}\n\nexport interface GVForBarChart {\n /**\n * While forming datapoints from given prop \"data\"\n * These datapoints are used for to draw graph.\n */\n [key: string]: GVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutDataPoint {\n legend: string;\n y: number;\n color: string;\n xAxisCalloutData?: string;\n yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutData {\n x: number | string | Date;\n values: CustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface Chart {\n chartContainer: HTMLElement | null;\n toImage?: (opts?: ImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface ImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport interface HeatMapChartDataPoint {\n x: string | Date | number;\n y: string | Date | number;\n value: number;\n /**\n * The value/ text to be rendered in the rectange\n */\n rectText?: string | number;\n /**\n * denomination to show in the callout\n */\n ratio?: [number, number];\n /**\n * description message to the callout\n */\n descriptionMessage?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HeatMapChartData {\n /**\n * name of the legend\n */\n legend: string;\n data: HeatMapChartDataPoint[];\n /**\n * This number will be used to get the color for the legend\n */\n value: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface SankeyChartData {\n nodes: SNode[];\n links: SLink[];\n}\n\ninterface SNodeExtra {\n /**\n * A unique identifier for this node.\n */\n nodeId: number | string;\n /**\n * The display name for this node in the UX.\n */\n name: string;\n color?: string;\n borderColor?: string;\n actualValue?: number;\n layer?: number;\n}\n\ninterface SLinkExtra {\n /**\n * The index within `ISankeyChartData.nodes` of the source node.\n */\n source: number;\n /**\n * The index within `ISankeyChartData.nodes` of the target node.\n */\n target: number;\n /**\n * The weight of this link between the two nodes.\n */\n value: number;\n unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<SNodeExtra, SLinkExtra>;\nexport type SLink = SankeyLink<SNodeExtra, SLinkExtra>;\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n * In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n | 'default'\n | 'data'\n | string[]\n | 'category ascending'\n | 'category descending'\n | 'total ascending'\n | 'total descending'\n | 'min ascending'\n | 'min descending'\n | 'max ascending'\n | 'max descending'\n | 'sum ascending'\n | 'sum descending'\n | 'mean ascending'\n | 'mean descending'\n | 'median ascending'\n | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface GanttChartDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: {\n start: Date | number;\n end: Date | number;\n };\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ScatterChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: ScatterChartDataPoint[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * Available scale types for axes.\n *\n * - `'default'`: Uses an automatic scale (linear, band, or time) based on axis data type.\n * - `'log'`: Uses a logarithmic scale. Only supported for numeric axes in LineChart and ScatterChart.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisScaleType = 'default' | 'log';\n\n/**\n * Configuration options for an axis.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisProps = {\n /**\n * Defines the step between tick marks on the axis.\n * Works in combination with `tick0`.\n * Must be a positive number.\n *\n * - **Log scale**:\n * - Ticks are placed at `10^(n * tickStep)` where `n` is the tick index.\n * - Example: `tickStep = 2` → ticks at 1, 100, 10,000...\n * - Example: `tickStep = log10(5)` → ticks at 1, 5, 25, 125...\n * - Special format `\"L<f>\"`: Creates ticks that are linearly spaced in value (not position).\n * - Example: `tick0 = 0.1`, `tickStep = \"L0.5\"` → ticks at 0.1, 0.6, 1.1, 1.6...\n *\n * - **Date axis**:\n * - Must be in milliseconds.\n * - Example: one day = `tickStep = 86400000`.\n * - Special format `\"M<n>\"`: Places ticks every `n` months.\n * - Example: `tick0 = \"2000-01-15\"`, `tickStep = \"M3\"` → ticks on the 15th every third month.\n * - Example: `tickStep = \"M48\"` → ticks every 4 years.\n */\n tickStep?: number | string;\n\n /**\n * Sets the reference value for axis ticks.\n * Works in combination with `tickStep`.\n *\n * - **Log scale**:\n * - `tick0` must be given as the logarithm of the reference tick.\n * - Example: to align ticks with 100, use `tick0 = 2`.\n * - Exception: when `tickStep` uses `\"L<f>\"`, you can specify the raw value directly.\n */\n tick0?: number | Date;\n};\n"],"names":[],"mappings":"AA6hCA;;;;CAIC,GACD,WAgCE"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { HighContrastSelector } from '../utilities/utilities';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
import { shorthands } from '@griffel/react';
|
|
4
|
+
export const getTooltipStyle = () => {
|
|
5
|
+
return {
|
|
6
|
+
...typographyStyles.body1,
|
|
7
|
+
display: 'flex',
|
|
8
|
+
flexDirection: 'column',
|
|
9
|
+
...shorthands.padding(tokens.spacingHorizontalS),
|
|
10
|
+
position: 'absolute',
|
|
11
|
+
textAlign: 'center',
|
|
12
|
+
top: tokens.spacingVerticalNone,
|
|
13
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
14
|
+
borderRadius: tokens.borderRadiusSmall,
|
|
15
|
+
pointerEvents: 'none',
|
|
16
|
+
color: tokens.colorNeutralForeground1
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export const getAxisTitleStyle = () => {
|
|
20
|
+
return {
|
|
21
|
+
...typographyStyles.caption2Strong,
|
|
22
|
+
fontStyle: 'normal',
|
|
23
|
+
textAlign: 'center',
|
|
24
|
+
color: tokens.colorNeutralForeground2,
|
|
25
|
+
fill: tokens.colorNeutralForeground1,
|
|
26
|
+
[HighContrastSelector]: {
|
|
27
|
+
fill: 'CanvasText'
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export const getBarLabelStyle = () => {
|
|
32
|
+
return {
|
|
33
|
+
...typographyStyles.caption1Strong,
|
|
34
|
+
fill: tokens.colorNeutralForeground1,
|
|
35
|
+
forcedColorAdjust: 'auto'
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export const getMarkerLabelStyle = () => {
|
|
39
|
+
return {
|
|
40
|
+
...typographyStyles.body1,
|
|
41
|
+
fill: tokens.colorNeutralForeground1,
|
|
42
|
+
textAnchor: 'middle',
|
|
43
|
+
[HighContrastSelector]: {
|
|
44
|
+
fill: 'CanvasText'
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"sources":["Common.styles.js"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nexport const getTooltipStyle = ()=>{\n return {\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n };\n};\nexport const getAxisTitleStyle = ()=>{\n return {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n };\n};\nexport const getBarLabelStyle = ()=>{\n return {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n };\n};\nexport const getMarkerLabelStyle = ()=>{\n return {\n ...typographyStyles.body1,\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n };\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAI;EAC/B,OAAO;IACH,GAAGF,gBAAgB,CAACG,KAAK;IACzBC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvB,GAAGJ,UAAU,CAACK,OAAO,CAACP,MAAM,CAACQ,kBAAkB,CAAC;IAChDC,QAAQ,EAAE,UAAU;IACpBC,SAAS,EAAE,QAAQ;IACnBC,GAAG,EAAEX,MAAM,CAACY,mBAAmB;IAC/BC,eAAe,EAAEb,MAAM,CAACc,uBAAuB;IAC/CC,YAAY,EAAEf,MAAM,CAACgB,iBAAiB;IACtCC,aAAa,EAAE,MAAM;IACrBC,KAAK,EAAElB,MAAM,CAACmB;EAClB,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAI;EACjC,OAAO;IACH,GAAGnB,gBAAgB,CAACoB,cAAc;IAClCC,SAAS,EAAE,QAAQ;IACnBZ,SAAS,EAAE,QAAQ;IACnBQ,KAAK,EAAElB,MAAM,CAACuB,uBAAuB;IACrCC,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpC,CAACpB,oBAAoB,GAAG;MACpByB,IAAI,EAAE;IACV;EACJ,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAI;EAChC,OAAO;IACH,GAAGxB,gBAAgB,CAACyB,cAAc;IAClCF,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpCQ,iBAAiB,EAAE;EACvB,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAI;EACnC,OAAO;IACH,GAAG3B,gBAAgB,CAACG,KAAK;IACzBoB,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpCU,UAAU,EAAE,QAAQ;IACpB,CAAC9B,oBAAoB,GAAG;MACpByB,IAAI,EAAE;IACV;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { HighContrastSelector } from '../utilities/utilities';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
import { shorthands } from '@griffel/react';
|
|
4
|
+
export const getTooltipStyle = ()=>{
|
|
5
|
+
return {
|
|
6
|
+
...typographyStyles.body1,
|
|
7
|
+
display: 'flex',
|
|
8
|
+
flexDirection: 'column',
|
|
9
|
+
...shorthands.padding(tokens.spacingHorizontalS),
|
|
10
|
+
position: 'absolute',
|
|
11
|
+
textAlign: 'center',
|
|
12
|
+
top: tokens.spacingVerticalNone,
|
|
13
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
14
|
+
borderRadius: tokens.borderRadiusSmall,
|
|
15
|
+
pointerEvents: 'none',
|
|
16
|
+
color: tokens.colorNeutralForeground1
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export const getAxisTitleStyle = ()=>{
|
|
20
|
+
return {
|
|
21
|
+
...typographyStyles.caption2Strong,
|
|
22
|
+
fontStyle: 'normal',
|
|
23
|
+
textAlign: 'center',
|
|
24
|
+
color: tokens.colorNeutralForeground2,
|
|
25
|
+
fill: tokens.colorNeutralForeground1,
|
|
26
|
+
[HighContrastSelector]: {
|
|
27
|
+
fill: 'CanvasText'
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export const getBarLabelStyle = ()=>{
|
|
32
|
+
return {
|
|
33
|
+
...typographyStyles.caption1Strong,
|
|
34
|
+
fill: tokens.colorNeutralForeground1,
|
|
35
|
+
forcedColorAdjust: 'auto'
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export const getMarkerLabelStyle = ()=>{
|
|
39
|
+
return {
|
|
40
|
+
...typographyStyles.body1,
|
|
41
|
+
fill: tokens.colorNeutralForeground1,
|
|
42
|
+
textAnchor: 'middle',
|
|
43
|
+
[HighContrastSelector]: {
|
|
44
|
+
fill: 'CanvasText'
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utilities/Common.styles.ts"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands, type GriffelStyle } from '@griffel/react';\n\nexport const getTooltipStyle = (): GriffelStyle => {\n return {\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1,\n };\n};\n\nexport const getAxisTitleStyle = (): GriffelStyle => {\n return {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n };\n};\n\nexport const getBarLabelStyle = (): GriffelStyle => {\n return {\n ...typographyStyles.caption1Strong, // Confirm styles\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n };\n};\n\nexport const getMarkerLabelStyle = (): GriffelStyle => {\n return {\n ...typographyStyles.body1,\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,UAAU,QAA2B,iBAAiB;AAE/D,OAAO,MAAMC,kBAAkB;IAC7B,OAAO;QACL,GAAGF,iBAAiBG,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGJ,WAAWK,OAAO,CAACP,OAAOQ,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAKX,OAAOY,mBAAmB;QAC/BC,iBAAiBb,OAAOc,uBAAuB;QAC/CC,cAAcf,OAAOgB,iBAAiB;QACtCC,eAAe;QACfC,OAAOlB,OAAOmB,uBAAuB;IACvC;AACF,EAAE;AAEF,OAAO,MAAMC,oBAAoB;IAC/B,OAAO;QACL,GAAGnB,iBAAiBoB,cAAc;QAClCC,WAAW;QACXZ,WAAW;QACXQ,OAAOlB,OAAOuB,uBAAuB;QACrCC,MAAMxB,OAAOmB,uBAAuB;QACpC,CAACpB,qBAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE;AAEF,OAAO,MAAMC,mBAAmB;IAC9B,OAAO;QACL,GAAGxB,iBAAiByB,cAAc;QAClCF,MAAMxB,OAAOmB,uBAAuB;QACpCQ,mBAAmB;IACrB;AACF,EAAE;AAEF,OAAO,MAAMC,sBAAsB;IACjC,OAAO;QACL,GAAG3B,iBAAiBG,KAAK;QACzBoB,MAAMxB,OAAOmB,uBAAuB;QACpCU,YAAY;QACZ,CAAC9B,qBAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\ninterface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 3;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + PADDING}\n transform={props.textProps?.transform}\n className={props.className}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\nexport interface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 3;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + PADDING}\n transform={props.textProps?.transform}\n className={props.className}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/image-export-utils.ts"],"sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { copyStyle, createMeasurementSpan, resolveCSSVariables } from './index';\nimport { ImageExportOptions } from '../types/index';\nimport { Legend, LegendContainer } from '../Legends';\nimport {\n LEGEND_CONTAINER_MARGIN_TOP,\n LEGEND_CONTAINER_MARGIN_START,\n LEGEND_PADDING,\n LEGEND_HEIGHT,\n LEGEND_SHAPE_BORDER,\n LEGEND_SHAPE_SIZE,\n LEGEND_SHAPE_MARGIN_END,\n INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/useLegendsStyles.styles';\n\nexport function toImage(\n chartContainer: HTMLElement | null | undefined,\n legendsToSvgCallback?: LegendContainer['toSVG'],\n isRTL: boolean = false,\n opts: ImageExportOptions = {},\n): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n\n const svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);\n if (!svg.node) {\n return reject(new Error('SVG node is null'));\n }\n\n let svgData = new XMLSerializer().serializeToString(svg.node);\n // This node is already detached from the DOM, so there's no need to call remove() on it.\n // Just clear the reference.\n svg.node = null;\n\n let svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgData = null as any;\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgDataUrl = null as any;\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nconst SVG_STYLE_PROPERTIES = [\n 'display',\n 'fill',\n 'fill-opacity',\n 'opacity',\n 'stroke',\n 'stroke-width',\n 'transform',\n 'border-collapse',\n];\nconst SVG_TEXT_STYLE_PROPERTIES = [\n 'font-family',\n 'font-size',\n 'font-weight',\n 'text-anchor',\n 'background-color',\n 'color',\n 'padding',\n 'text-align',\n 'border',\n];\n\nfunction toSVG(\n chartContainer: HTMLElement,\n legendsToSvgCallback: LegendContainer['toSVG'] | undefined,\n isRTL: boolean,\n background: string,\n) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n let clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n let svgElements = svg.getElementsByTagName('*');\n let clonedSvgElements = clonedSvg.node()!.getElementsByTagName('*');\n\n const TEXT_ELEMENTS = ['text'];\n const TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];\n\n for (let i = 0; i < svgElements.length; i++) {\n const tag = svgElements[i].tagName.toLowerCase();\n\n if (TEXT_ELEMENTS.includes(tag) || TABLE_ELEMENTS.includes(tag)) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgElements = null as any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvgElements = null as any;\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const legendGroup =\n typeof legendsToSvgCallback === 'function'\n ? legendsToSvgCallback(svgWidth, isRTL)\n : { node: null, width: 0, height: 0 };\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n\n if (legendGroup.node) {\n d3Select(legendGroup.node).attr('transform', `translate(0, ${svgHeight})`);\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n clonedSvg\n .attr('width', w1)\n .attr('height', h1)\n .attr('viewBox', `0 0 ${w1} ${h1}`)\n .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n const result = {\n node: clonedSvg.node(),\n width: w1,\n height: h1,\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvg = null as any;\n\n return result;\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n legends: Legend[],\n svgWidth: number,\n config: {\n selectedLegends: Record<string, boolean>;\n centerLegends: boolean;\n textClassName: string;\n isRTL: boolean;\n },\n legendContainer?: HTMLElement | null,\n) {\n if (legends.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n for (let i = 0; i < legends.length; i++) {\n const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n const legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);\n const legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;\n const legendItem = legendGroup.append('g');\n\n legendLine.push({ elem: legendItem, width: legendWidth });\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [{ elem: legendItem, width: legendWidth }];\n legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n legendY += LEGEND_HEIGHT;\n }\n\n const isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;\n\n legendItem\n .append('rect')\n .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('width', LEGEND_SHAPE_SIZE)\n .attr('height', LEGEND_SHAPE_SIZE)\n .style('fill', isLegendActive ? legends[i].color : 'transparent')\n .style('stroke-width', LEGEND_SHAPE_BORDER)\n .style('stroke', legends[i].color);\n\n legendItem\n .append('text')\n .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('dominant-baseline', 'hanging')\n .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n .text(legends[i].title)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()!));\n\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += LEGEND_HEIGHT;\n\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n let remLineWidth = legendLineWidths[idx];\n let itemOffsetX = 0;\n ln.forEach(item => {\n const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n } else if (isRTL) {\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n legendLines.forEach(ln => {\n let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n ln.forEach(item => {\n const newOffsetX = remLineWidth - item.width - itemOffsetX;\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"],"names":["create","d3Create","select","d3Select","copyStyle","createMeasurementSpan","resolveCSSVariables","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","toImage","chartContainer","legendsToSvgCallback","isRTL","opts","Promise","resolve","reject","Error","background","svg","toSVG","node","svgData","XMLSerializer","serializeToString","svgDataUrl","btoa","unescapePonyfill","encodeURIComponent","svgToPng","width","height","scale","then","catch","err","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","TEXT_ELEMENTS","TABLE_ELEMENTS","i","length","tag","tagName","toLowerCase","includes","svgWidth","svgHeight","getBoundingClientRect","legendGroup","w1","Math","max","h1","append","insert","result","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","cloneLegendsToSVG","legends","config","legendContainer","selectedLegends","centerLegends","textClassName","legendX","legendY","legendLine","legendLines","legendLineWidths","noLegendsSelected","Object","keys","textOffset","legendText","title","legendWidth","legendItem","push","elem","pop","isLegendActive","style","text","call","selection","forEach","ln","idx","lineOffsetX","remLineWidth","itemOffsetX","item","newOffsetX","w0","h0","canvas","document","createElement","img","Image","onload","ctx","getContext","clearRect","drawImage","imgData","toDataURL","onerror","src","hex2","hex4","str","index","chr","part","charAt","slice","exec","String","fromCharCode","parseInt"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utilities/image-export-utils.ts"],"sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { copyStyle, createMeasurementSpan, resolveCSSVariables } from './index';\nimport { ImageExportOptions } from '../types/index';\nimport { Legend, LegendContainer } from '../Legends';\nimport {\n LEGEND_CONTAINER_MARGIN_TOP,\n LEGEND_CONTAINER_MARGIN_START,\n LEGEND_PADDING,\n LEGEND_HEIGHT,\n LEGEND_SHAPE_BORDER,\n LEGEND_SHAPE_SIZE,\n LEGEND_SHAPE_MARGIN_END,\n INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/useLegendsStyles.styles';\n\nexport function toImage(\n chartContainer: HTMLElement | null | undefined,\n legendsToSvgCallback?: LegendContainer['toSVG'],\n isRTL: boolean = false,\n opts: ImageExportOptions = {},\n): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n\n const svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);\n if (!svg.node) {\n return reject(new Error('SVG node is null'));\n }\n\n let svgData = new XMLSerializer().serializeToString(svg.node);\n // This node is already detached from the DOM, so there's no need to call remove() on it.\n // Just clear the reference.\n svg.node = null;\n\n let svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgData = null as any;\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgDataUrl = null as any;\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nconst SVG_STYLE_PROPERTIES = [\n 'display',\n 'fill',\n 'fill-opacity',\n 'opacity',\n 'stroke',\n 'stroke-width',\n 'transform',\n 'border-collapse',\n];\nconst SVG_TEXT_STYLE_PROPERTIES = [\n 'font-family',\n 'font-size',\n 'font-weight',\n 'text-anchor',\n 'background-color',\n 'color',\n 'padding',\n 'text-align',\n 'border',\n];\n\nfunction toSVG(\n chartContainer: HTMLElement,\n legendsToSvgCallback: LegendContainer['toSVG'] | undefined,\n isRTL: boolean,\n background: string,\n) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n let clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n let svgElements = svg.getElementsByTagName('*');\n let clonedSvgElements = clonedSvg.node()!.getElementsByTagName('*');\n\n const TEXT_ELEMENTS = ['text'];\n const TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];\n\n for (let i = 0; i < svgElements.length; i++) {\n const tag = svgElements[i].tagName.toLowerCase();\n\n if (TEXT_ELEMENTS.includes(tag) || TABLE_ELEMENTS.includes(tag)) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgElements = null as any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvgElements = null as any;\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const legendGroup =\n typeof legendsToSvgCallback === 'function'\n ? legendsToSvgCallback(svgWidth, isRTL)\n : { node: null, width: 0, height: 0 };\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n\n if (legendGroup.node) {\n d3Select(legendGroup.node).attr('transform', `translate(0, ${svgHeight})`);\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n clonedSvg\n .attr('width', w1)\n .attr('height', h1)\n .attr('viewBox', `0 0 ${w1} ${h1}`)\n .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n const result = {\n node: clonedSvg.node(),\n width: w1,\n height: h1,\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvg = null as any;\n\n return result;\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n legends: Legend[],\n svgWidth: number,\n config: {\n selectedLegends: Record<string, boolean>;\n centerLegends: boolean;\n textClassName: string;\n isRTL: boolean;\n },\n legendContainer?: HTMLElement | null,\n): {\n node: SVGGElement | null;\n width: number;\n height: number;\n} {\n if (legends.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n for (let i = 0; i < legends.length; i++) {\n const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n const legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);\n const legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;\n const legendItem = legendGroup.append('g');\n\n legendLine.push({ elem: legendItem, width: legendWidth });\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [{ elem: legendItem, width: legendWidth }];\n legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n legendY += LEGEND_HEIGHT;\n }\n\n const isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;\n\n legendItem\n .append('rect')\n .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('width', LEGEND_SHAPE_SIZE)\n .attr('height', LEGEND_SHAPE_SIZE)\n .style('fill', isLegendActive ? legends[i].color : 'transparent')\n .style('stroke-width', LEGEND_SHAPE_BORDER)\n .style('stroke', legends[i].color);\n\n legendItem\n .append('text')\n .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('dominant-baseline', 'hanging')\n .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n .text(legends[i].title)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()!));\n\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += LEGEND_HEIGHT;\n\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n let remLineWidth = legendLineWidths[idx];\n let itemOffsetX = 0;\n ln.forEach(item => {\n const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n } else if (isRTL) {\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n legendLines.forEach(ln => {\n let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n ln.forEach(item => {\n const newOffsetX = remLineWidth - item.width - itemOffsetX;\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: ImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"],"names":["create","d3Create","select","d3Select","copyStyle","createMeasurementSpan","resolveCSSVariables","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","toImage","chartContainer","legendsToSvgCallback","isRTL","opts","Promise","resolve","reject","Error","background","svg","toSVG","node","svgData","XMLSerializer","serializeToString","svgDataUrl","btoa","unescapePonyfill","encodeURIComponent","svgToPng","width","height","scale","then","catch","err","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","TEXT_ELEMENTS","TABLE_ELEMENTS","i","length","tag","tagName","toLowerCase","includes","svgWidth","svgHeight","getBoundingClientRect","legendGroup","w1","Math","max","h1","append","insert","result","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","cloneLegendsToSVG","legends","config","legendContainer","selectedLegends","centerLegends","textClassName","legendX","legendY","legendLine","legendLines","legendLineWidths","noLegendsSelected","Object","keys","textOffset","legendText","title","legendWidth","legendItem","push","elem","pop","isLegendActive","style","text","call","selection","forEach","ln","idx","lineOffsetX","remLineWidth","itemOffsetX","item","newOffsetX","w0","h0","canvas","document","createElement","img","Image","onload","ctx","getContext","clearRect","drawImage","imgData","toDataURL","onerror","src","hex2","hex4","str","index","chr","part","charAt","slice","exec","String","fromCharCode","parseInt"],"mappings":"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"}
|
package/lib/utilities/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/index.ts"],"sourcesContent":["export * from './utilities';\nexport * from './colors';\nexport * from './vbc-utils';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,cAAc"}
|
|
1
|
+
{"version":3,"sources":["../src/utilities/index.ts"],"sourcesContent":["export * from './utilities';\nexport * from './colors';\nexport * from './vbc-utils';\nexport * from './Common.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series
|
|
4
|
+
* Now places labels at equal angles for all unique texts, regardless of data positions.
|
|
5
|
+
*/ export function renderScatterPolarCategoryLabels({ xAxisScale, yAxisScale, className, lineOptions, minPixelGap = 40 }) {
|
|
6
|
+
const maybeLineOptions = extractMaybeLineOptions(lineOptions);
|
|
7
|
+
var _maybeLineOptions_axisLabel;
|
|
8
|
+
// Always use axisLabel from lineOptions to display the labels
|
|
9
|
+
const uniqueTexts = (_maybeLineOptions_axisLabel = maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.axisLabel) !== null && _maybeLineOptions_axisLabel !== void 0 ? _maybeLineOptions_axisLabel : [];
|
|
10
|
+
// Place labels at equal angles
|
|
11
|
+
const renderedLabels = [];
|
|
12
|
+
const placedPositions = [];
|
|
13
|
+
const labelRadius = 0.7; // You can adjust this value for more/less offset
|
|
14
|
+
const numLabels = uniqueTexts.length;
|
|
15
|
+
// Respect schema or prop rotation and direction (default ccw, 0°)
|
|
16
|
+
const dirMultiplier = (maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.direction) === 'clockwise' ? -1 : 1;
|
|
17
|
+
var _maybeLineOptions_rotation;
|
|
18
|
+
const rotationRad = ((_maybeLineOptions_rotation = maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.rotation) !== null && _maybeLineOptions_rotation !== void 0 ? _maybeLineOptions_rotation : 0) * Math.PI / 180;
|
|
19
|
+
uniqueTexts.forEach((text, i)=>{
|
|
20
|
+
const angle = rotationRad + dirMultiplier * (2 * Math.PI / numLabels) * i;
|
|
21
|
+
const originXOffset = (maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.originXOffset) || 0;
|
|
22
|
+
const x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);
|
|
23
|
+
const y = yAxisScale(labelRadius * Math.sin(angle));
|
|
24
|
+
// Check distance from all previously placed labels
|
|
25
|
+
const isFarEnough = placedPositions.every((pos)=>Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2) >= minPixelGap);
|
|
26
|
+
if (renderedLabels.length === 0 || isFarEnough) {
|
|
27
|
+
renderedLabels.push(/*#__PURE__*/ React.createElement("text", {
|
|
28
|
+
key: `scatterpolar-label-${text}`,
|
|
29
|
+
x: x,
|
|
30
|
+
y: y,
|
|
31
|
+
className: className,
|
|
32
|
+
textAnchor: "middle",
|
|
33
|
+
alignmentBaseline: "middle",
|
|
34
|
+
opacity: 1
|
|
35
|
+
}, text));
|
|
36
|
+
placedPositions.push({
|
|
37
|
+
x,
|
|
38
|
+
y
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return renderedLabels;
|
|
43
|
+
}
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
45
|
+
export function extractMaybeLineOptions(lineOptions) {
|
|
46
|
+
return lineOptions ? {
|
|
47
|
+
originXOffset: lineOptions.originXOffset,
|
|
48
|
+
direction: lineOptions.direction === 'clockwise' || lineOptions.direction === 'counterclockwise' ? lineOptions.direction : undefined,
|
|
49
|
+
rotation: lineOptions.rotation,
|
|
50
|
+
axisLabel: Array.isArray(lineOptions.axisLabel) ? lineOptions.axisLabel : undefined
|
|
51
|
+
} : undefined;
|
|
52
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utilities/scatterpolar-utils.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScaleLinear } from 'd3-scale';\nimport { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series\n * Now places labels at equal angles for all unique texts, regardless of data positions.\n */\nexport function renderScatterPolarCategoryLabels({\n xAxisScale,\n yAxisScale,\n className,\n lineOptions,\n minPixelGap = 40,\n}: {\n xAxisScale: ScaleLinear<number, number>;\n yAxisScale: ScaleLinear<number, number>;\n className: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n lineOptions?: any;\n minPixelGap?: number;\n}): JSXElement[] {\n const maybeLineOptions = extractMaybeLineOptions(lineOptions);\n\n // Always use axisLabel from lineOptions to display the labels\n const uniqueTexts: string[] = maybeLineOptions?.axisLabel ?? [];\n\n // Place labels at equal angles\n const renderedLabels: JSXElement[] = [];\n const placedPositions: { x: number; y: number }[] = [];\n const labelRadius = 0.7; // You can adjust this value for more/less offset\n const numLabels = uniqueTexts.length;\n\n // Respect schema or prop rotation and direction (default ccw, 0°)\n const dirMultiplier = maybeLineOptions?.direction === 'clockwise' ? -1 : 1;\n const rotationRad = ((maybeLineOptions?.rotation ?? 0) * Math.PI) / 180;\n\n uniqueTexts.forEach((text, i) => {\n const angle = rotationRad + dirMultiplier * ((2 * Math.PI) / numLabels) * i;\n const originXOffset = maybeLineOptions?.originXOffset || 0;\n const x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);\n const y = yAxisScale(labelRadius * Math.sin(angle));\n\n // Check distance from all previously placed labels\n const isFarEnough = placedPositions.every(pos => Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2) >= minPixelGap);\n\n if (renderedLabels.length === 0 || isFarEnough) {\n renderedLabels.push(\n <text\n key={`scatterpolar-label-${text}`}\n x={x}\n y={y}\n className={className}\n textAnchor=\"middle\"\n alignmentBaseline=\"middle\"\n opacity={1}\n >\n {text}\n </text>,\n );\n placedPositions.push({ x, y });\n }\n });\n\n return renderedLabels;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function extractMaybeLineOptions(lineOptions: any):\n | {\n originXOffset?: number;\n direction?: 'clockwise' | 'counterclockwise';\n rotation?: number;\n axisLabel?: string[];\n }\n | undefined {\n return lineOptions\n ? {\n originXOffset: lineOptions.originXOffset,\n direction:\n lineOptions.direction === 'clockwise' || lineOptions.direction === 'counterclockwise'\n ? lineOptions.direction\n : undefined,\n rotation: lineOptions.rotation,\n axisLabel: Array.isArray(lineOptions.axisLabel) ? lineOptions.axisLabel : undefined,\n }\n : undefined;\n}\n"],"names":["React","renderScatterPolarCategoryLabels","xAxisScale","yAxisScale","className","lineOptions","minPixelGap","maybeLineOptions","extractMaybeLineOptions","uniqueTexts","axisLabel","renderedLabels","placedPositions","labelRadius","numLabels","length","dirMultiplier","direction","rotationRad","rotation","Math","PI","forEach","text","i","angle","originXOffset","x","cos","y","sin","isFarEnough","every","pos","sqrt","push","key","textAnchor","alignmentBaseline","opacity","undefined","Array","isArray"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,iCAAiC,EAC/CC,UAAU,EACVC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,cAAc,EAAE,EAQjB;IACC,MAAMC,mBAAmBC,wBAAwBH;QAGnBE;IAD9B,8DAA8D;IAC9D,MAAME,cAAwBF,CAAAA,8BAAAA,6BAAAA,uCAAAA,iBAAkBG,SAAS,cAA3BH,yCAAAA,8BAA+B,EAAE;IAE/D,+BAA+B;IAC/B,MAAMI,iBAA+B,EAAE;IACvC,MAAMC,kBAA8C,EAAE;IACtD,MAAMC,cAAc,KAAK,iDAAiD;IAC1E,MAAMC,YAAYL,YAAYM,MAAM;IAEpC,kEAAkE;IAClE,MAAMC,gBAAgBT,CAAAA,6BAAAA,uCAAAA,iBAAkBU,SAAS,MAAK,cAAc,CAAC,IAAI;QACnDV;IAAtB,MAAMW,cAAc,AAAEX,CAAAA,CAAAA,6BAAAA,6BAAAA,uCAAAA,iBAAkBY,QAAQ,cAA1BZ,wCAAAA,6BAA8B,CAAA,IAAKa,KAAKC,EAAE,GAAI;IAEpEZ,YAAYa,OAAO,CAAC,CAACC,MAAMC;QACzB,MAAMC,QAAQP,cAAcF,gBAAiB,CAAA,AAAC,IAAII,KAAKC,EAAE,GAAIP,SAAQ,IAAKU;QAC1E,MAAME,gBAAgBnB,CAAAA,6BAAAA,uCAAAA,iBAAkBmB,aAAa,KAAI;QACzD,MAAMC,IAAIzB,WAAWW,cAAcO,KAAKQ,GAAG,CAACH,SAASC,gBAAgB;QACrE,MAAMG,IAAI1B,WAAWU,cAAcO,KAAKU,GAAG,CAACL;QAE5C,mDAAmD;QACnD,MAAMM,cAAcnB,gBAAgBoB,KAAK,CAACC,CAAAA,MAAOb,KAAKc,IAAI,CAAC,AAACP,CAAAA,IAAIM,IAAIN,CAAC,AAADA,KAAM,IAAI,AAACE,CAAAA,IAAII,IAAIJ,CAAC,AAADA,KAAM,MAAMvB;QAEnG,IAAIK,eAAeI,MAAM,KAAK,KAAKgB,aAAa;YAC9CpB,eAAewB,IAAI,eACjB,oBAACZ;gBACCa,KAAK,CAAC,mBAAmB,EAAEb,MAAM;gBACjCI,GAAGA;gBACHE,GAAGA;gBACHzB,WAAWA;gBACXiC,YAAW;gBACXC,mBAAkB;gBAClBC,SAAS;eAERhB;YAGLX,gBAAgBuB,IAAI,CAAC;gBAAER;gBAAGE;YAAE;QAC9B;IACF;IAEA,OAAOlB;AACT;AAEA,8DAA8D;AAC9D,OAAO,SAASH,wBAAwBH,WAAgB;IAQtD,OAAOA,cACH;QACEqB,eAAerB,YAAYqB,aAAa;QACxCT,WACEZ,YAAYY,SAAS,KAAK,eAAeZ,YAAYY,SAAS,KAAK,qBAC/DZ,YAAYY,SAAS,GACrBuB;QACNrB,UAAUd,YAAYc,QAAQ;QAC9BT,WAAW+B,MAAMC,OAAO,CAACrC,YAAYK,SAAS,IAAIL,YAAYK,SAAS,GAAG8B;IAC5E,IACAA;AACN"}
|