QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-740 chart subhead style edits

Browse Source
This commit is contained in:
darin.kelkhoff
2023-11-15 13:39:16 -06:00
parent fbcee2b819
commit 87d0c7d478
3 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/qqq/assets/theme/base/typography.ts
View File

@ -218,9 +218,10 @@ const typography: Types = {
}, },
h6: { h6: {
fontSize: pxToRem(16), fontSize: "1.125rem",
lineHeight: 1.625, lineHeight: 1.625,
...baseHeadingProperties, ...baseHeadingProperties,
fontWeight: 500
}, },
subtitle1: { subtitle1: {

2
src/qqq/components/widgets/Widget.tsx
View File

@ -455,7 +455,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label
let labelElement = ( let labelElement = (
<Typography sx={{position: "relative", top: -4, cursor: "default"}} variant="h6" fontWeight="medium" display="inline"> <Typography sx={{position: "relative", top: -4, cursor: "default"}} variant="h6" display="inline">
{labelToUse} {labelToUse}
</Typography> </Typography>
); );

10
src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
View File

@ -65,7 +65,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON; iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
} }
let mainNumberElement = <Typography variant="h2" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>; let mainNumberElement = <Typography variant="h3" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
if(chartSubheaderData.mainNumberUrl) if(chartSubheaderData.mainNumberUrl)
{ {
mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link> mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
@ -74,7 +74,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
let previousNumberElement = ( let previousNumberElement = (
<> <>
<Typography display="inline" variant="body2" sx={{color: colors.black.main}}> <Typography display="inline" variant="body2" sx={{color: colors.gray.main, fontSize: ".875rem", fontWeight: 500}}>
&nbsp;{chartSubheaderData.vsDescription} &nbsp;{chartSubheaderData.vsDescription}
{chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)} {chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
</Typography> </Typography>
@ -91,9 +91,9 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
{mainNumberElement} {mainNumberElement}
{ {
chartSubheaderData.vsPreviousPercent != null && iconName != null && ( chartSubheaderData.vsPreviousPercent != null && iconName != null && (
<Box display="inline-flex" alignItems="flex-end" pb={1} ml={-0.5}> <Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
<Icon fontSize="medium" sx={{color: color}}>{iconName}</Icon> <Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
<Typography display="inline" variant="body2" sx={{color: color}}>{chartSubheaderData.vsPreviousPercent}%</Typography> <Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
{previousNumberElement} {previousNumberElement}
</Box> </Box>
) )