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 | 23x 23x 23x 232x 29x | import {
IMultiStackedBarChartStyleProps,
IMultiStackedBarChartStyles,
MultiStackedBarChartVariant,
} from './MultiStackedBarChart.types';
import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {
const { className, width, barHeight, shouldHighlight, theme, href, variant, hideLabels } = props;
return {
root: [
theme.fonts.medium,
'ms-StackedBarChart',
{
display: 'flex',
flexDirection: 'column',
width: width ? width : '100%',
},
className,
],
items: {
marginBottom: '11px',
},
chart: {
width: '100%',
height: barHeight ? barHeight : 12,
display: 'block',
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: variant === MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',
},
singleChartRoot: {
width: width ? width : '100%',
display: 'flex',
flexDirection: 'column',
marginBottom: variant === MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',
},
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,
},
placeHolderOnHover: {
opacity: shouldHighlight ? '' : '0.1',
cursor: 'default',
selectors: {
'&:focus': {
stroke: theme.palette.black,
strokeWidth: '2px',
},
},
},
legendContainer: {
margin: '5px 0px 0px 4px',
},
noData: {
cursor: href ? 'pointer' : 'default',
},
barLabel: {
fontSize: FontSizes.small,
fontWeight: FontWeights.semibold,
fill: theme.palette.neutralPrimary,
},
chartWrapper: {
paddingRight: variant === MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,
},
};
};
|