Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 24x 24x 126x 18x | import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';
import { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';
export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
const { theme, chartValueSize, chartWidth, chartHeight, className, lineColor, toDrawShape } = props;
return {
root: [
theme.fonts.medium,
'ms-GaugeChart',
{
width: '100%',
height: '100%',
},
className,
],
chart: {
display: 'block',
width: chartWidth,
height: chartHeight,
},
limits: {
fontSize: FontSizes.small,
fontWeight: FontWeights.semibold,
fill: theme.palette.neutralPrimary,
},
chartValue: {
fontSize: chartValueSize,
fontWeight: FontWeights.semibold,
fill: theme.palette.neutralPrimary,
},
sublabel: {
fontSize: FontSizes.small,
fontWeight: FontWeights.semibold,
fill: theme.palette.neutralPrimary,
},
needle: {
fill: theme.palette.black,
stroke: theme.semanticColors.bodyBackground,
},
chartTitle: {
fontSize: FontSizes.small,
fill: theme.palette.neutralPrimary,
},
segment: {
outline: 'none',
stroke: theme.semanticColors.focusBorder,
},
legendsContainer: {
width: chartWidth,
},
calloutContentRoot: [
{
display: 'grid',
overflow: 'hidden',
padding: '11px 16px 10px 16px',
backgroundColor: theme.semanticColors.bodyBackground,
backgroundBlendMode: 'normal, luminosity',
},
],
calloutDateTimeContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
calloutContentX: [
{
...theme.fonts.small,
lineHeight: '16px',
opacity: '0.8',
color: theme.semanticColors.bodySubtext,
},
],
calloutBlockContainer: [
theme.fonts.mediumPlus,
{
marginTop: '13px',
color: theme.semanticColors.bodyText,
},
!toDrawShape && {
selectors: {
[HighContrastSelector]: {
forcedColorAdjust: 'none',
},
},
borderLeft: `4px solid ${lineColor}`,
paddingLeft: '8px',
},
toDrawShape && {
display: 'flex',
},
],
shapeStyles: {
marginRight: '8px',
},
calloutlegendText: {
...theme.fonts.small,
lineHeight: '16px',
selectors: {
[HighContrastSelectorBlack]: {
color: 'rgb(255, 255, 255)',
},
},
color: theme.semanticColors.bodySubtext,
},
calloutContentY: [
{
...theme.fonts.mediumPlus,
fontWeight: 'bold',
lineHeight: '22px',
selectors: {
[HighContrastSelectorBlack]: {
color: 'rgb(255, 255, 255)',
},
},
},
],
descriptionMessage: [
theme.fonts.small,
{
selectors: {
[HighContrastSelectorBlack]: {
color: 'rgb(255, 255, 255)',
},
},
color: theme.semanticColors.bodyText,
marginTop: '10px',
paddingTop: '10px',
borderTop: `1px solid ${theme.semanticColors.menuDivider}`,
},
],
};
};
|