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 | 24x 24x 220x 20x | import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';
import { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';
export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {
const {
className,
width,
barHeight,
shouldHighlight,
theme,
href,
benchmarkColor,
benchmarkRatio,
targetColor,
targetRatio,
showTriangle,
} = props;
return {
root: [
theme.fonts.medium,
'ms-StackedBarChart',
{
width: width ? width : '100%',
display: 'flex',
flexDirection: 'column',
},
className,
],
chart: {
width: '100%',
height: barHeight ? barHeight : 12,
display: 'block',
marginBottom: showTriangle ? '16px' : '10px',
overflow: 'visible',
},
chartTitle: {
...theme.fonts.small,
display: 'flex',
justifyContent: 'space-between',
},
chartTitleLeft: {
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: 'block',
color: theme.palette.neutralPrimary,
marginBottom: '5px',
},
legendContainer: {
margin: '4px 0px 0px 4px',
},
opacityChangeOnHover: {
opacity: shouldHighlight ? '' : '0.1',
cursor: href ? 'pointer' : 'default',
selectors: {
'&:focus': {
stroke: theme.palette.black,
strokeWidth: '2px',
},
},
},
ratioNumerator: {
fontSize: FontSizes.medium,
fontWeight: FontWeights.semibold,
color: theme.palette.neutralPrimary,
},
ratioDenominator: {
fontSize: FontSizes.medium,
color: theme.palette.neutralPrimary,
},
benchmarkContainer: {
position: 'relative',
height: '7px',
marginTop: '-3px',
marginBottom: '-1px',
},
benchmark: {
position: 'absolute',
left: 'calc(' + benchmarkRatio + '% - 4px)',
width: '0',
height: '0',
borderLeft: '4px solid transparent',
borderRight: '4px solid transparent',
borderTop: '7px solid',
borderTopColor: benchmarkColor,
marginBottom: '4px',
selectors: {
[HighContrastSelector]: {
border: '0px',
height: '7px',
width: '7px',
clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,
} as IStyle,
},
},
target: {
position: 'absolute',
left: 'calc(' + targetRatio + '% - 4px)',
width: '0',
height: '0',
borderLeft: '4px solid transparent',
borderRight: '4px solid transparent',
borderTop: '7px solid',
borderTopColor: targetColor,
marginBottom: '4px',
selectors: {
[HighContrastSelector]: {
border: '0px',
height: '7px',
width: '7px',
clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,
} as IStyle,
},
},
};
};
|