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: {
fontSize: pxToRem(16),
fontSize: "1.125rem",
lineHeight: 1.625,
...baseHeadingProperties,
fontWeight: 500
},
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
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}
</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;
}
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)
{
mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
@ -74,7 +74,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
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}
{chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
</Typography>
@ -91,9 +91,9 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
{mainNumberElement}
{
chartSubheaderData.vsPreviousPercent != null && iconName != null && (
<Box display="inline-flex" alignItems="flex-end" pb={1} ml={-0.5}>
<Icon fontSize="medium" sx={{color: color}}>{iconName}</Icon>
<Typography display="inline" variant="body2" sx={{color: color}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
<Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
<Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
<Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
{previousNumberElement}
</Box>
)