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 | 2x 2x 4x 1x | import { IChartHoverCardStyles, IChartHoverCardStyleProps } from './ChartHoverCard.types';
import { FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';
export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChartHoverCardStyles => {
const { color, XValue, theme, isRatioPresent = false } = props;
return {
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.xxLarge,
{
marginTop: XValue ? '13px' : 'unset',
paddingLeft: '8px',
lineHeight: '22px',
color: theme.semanticColors.bodyText,
borderLeft: `4px solid ${color}`,
selectors: {
[HighContrastSelector]: {
forcedColorAdjust: 'none',
},
},
},
],
calloutlegendText: [
theme.fonts.small,
{
lineHeight: '16px',
color: theme.semanticColors.bodyText,
selectors: {
[HighContrastSelectorBlack]: {
color: 'rgb(255, 255, 255)',
},
},
},
],
calloutContentY: [
theme.fonts.xxLarge,
{
color: color ? color : theme.semanticColors.bodyText,
fontWeight: 'bold',
lineHeight: '36px',
selectors: {
[HighContrastSelectorBlack]: {
color: 'rgb(255, 255, 255)',
},
},
},
],
calloutInfoContainer: [
isRatioPresent && {
display: 'flex',
alignItems: 'flex-end',
},
],
ratio: [
theme.fonts.small,
{
marginLeft: '6px',
color: theme.semanticColors.bodyText,
},
],
numerator: {
fontWeight: FontWeights.bold,
},
denominator: {
fontWeight: FontWeights.semibold,
},
descriptionMessage: [
theme.fonts.small,
{
color: theme.semanticColors.bodyText,
marginTop: '10px',
paddingTop: '10px',
borderTop: `1px solid ${theme.semanticColors.menuDivider}`,
},
],
};
};
|