@fluentui/react-charting 5.23.45 → 5.23.46

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.
@@ -8,6 +8,9 @@ export var getStyles = function (props) {
8
8
  theme.fonts.medium,
9
9
  'ms-GaugeChart',
10
10
  {
11
+ alignItems: 'center',
12
+ display: 'flex',
13
+ flexDirection: 'column',
11
14
  width: '100%',
12
15
  height: '100%',
13
16
  },
@@ -1 +1 @@
1
- {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
1
+ {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
@@ -10,6 +10,9 @@ define(["require", "exports", "tslib", "@fluentui/react"], function (require, ex
10
10
  theme.fonts.medium,
11
11
  'ms-GaugeChart',
12
12
  {
13
+ alignItems: 'center',
14
+ display: 'flex',
15
+ flexDirection: 'column',
13
16
  width: '100%',
14
17
  height: '100%',
15
18
  },
@@ -1 +1 @@
1
- {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
1
+ {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
@@ -11,6 +11,9 @@ var getStyles = function (props) {
11
11
  theme.fonts.medium,
12
12
  'ms-GaugeChart',
13
13
  {
14
+ alignItems: 'center',
15
+ display: 'flex',
16
+ flexDirection: 'column',
14
17
  width: '100%',
15
18
  height: '100%',
16
19
  },
@@ -1 +1 @@
1
- {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
1
+ {"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\n },\n\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...theme.fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelectorBlack]: {\n color: 'rgb(255, 255, 255)',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-charting",
3
- "version": "5.23.45",
3
+ "version": "5.23.46",
4
4
  "description": "React web charting controls for Microsoft fluentui system.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",