Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add new custom theme properties for styling #117

Merged
merged 7 commits into from
Oct 24, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 53 additions & 19 deletions src/CentileChart/CentileChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ function CentileChart({
constrainToVisibleArea
backgroundPadding={5}
pointerLength={5}
cornerRadius={0}
cornerRadius={styles.toolTipBorderRadius}
flyoutHeight={(datum) => {
const numberOfLines = datum.text.length;
return numberOfLines * 18 * textScaleFactor; // 18 is the line height
Expand Down Expand Up @@ -655,7 +655,12 @@ function CentileChart({
textAnchor="start"
angle={-90}
dx={5}
dy={10}
dy={
// adjust label margins relatively to font size so text doesn't overlap the line
styles.delayedPubertyThresholdLabel?.fontSize
? styles.delayedPubertyThresholdLabel.fontSize * 1.15
: 10
}
style={styles.delayedPubertyThresholdLabel}
/>
}
Expand Down Expand Up @@ -683,8 +688,13 @@ function CentileChart({
textAnchor="start"
angle={-90}
dx={5}
dy={10}
style={styles.delayedPubertyThresholdLabel}
dy={
// adjust label margins relatively to font size so text doesn't overlap the line
styles.nondisjunctionThresholdLabel?.fontSize
? styles.nondisjunctionThresholdLabel.fontSize * 1.15
: 10
}
style={styles.nondisjunctionThresholdLabel}
/>
}
/>
Expand Down Expand Up @@ -892,11 +902,11 @@ function CentileChart({
})}
</VictoryChart>
<ChartTitle
fontSize={8}
fontFamily={'Arial'}
color={'#000000'}
fontWeight={'200'}
fontStyle='normal'
fontSize={styles.referenceTextStyle.fontSize}
fontFamily={styles.referenceTextStyle.fontFamily}
color={styles.referenceTextStyle.color}
fontWeight={styles.referenceTextStyle.fontWeight}
fontStyle={styles.referenceTextStyle.fontStyle}
>{referenceText(reference)}</ChartTitle>
</ChartContainer>

Expand All @@ -909,7 +919,15 @@ function CentileChart({
{/* Creates the Centile Label toggle button */}
{
<GradientLabelsButtonWrapper>
<StyledButtonTooltip>
<StyledButtonTooltip
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
color={styles.toggleTooltipStyle.color}
fontSize={styles.toggleTooltipStyle.fontSize}
fontFamily={styles.toggleTooltipStyle.fontFamily}
fontWeight={styles.toggleTooltipStyle.fontWeight}
fontStyle={styles.toggleTooltipStyle.fontStyle}
borderRadius={styles.toggleTooltipStyle.borderRadius}
>
<StyledGradientLabelsButton
$color={styles.toggleStyle.activeColour}
size={5}
Expand All @@ -921,21 +939,29 @@ function CentileChart({
:
<ShowCentileLabelIcon/>
}
{ centileLabels ?
<div className='tooltip'>Hide Centile Labels</div>
:
<div className='tooltip'>Show Centile Labels</div>
}
</StyledGradientLabelsButton>

</StyledGradientLabelsButton>
{ centileLabels ?
<div className='tooltip'>Hide Centile Labels</div>
:
<div className='tooltip'>Show Centile Labels</div>
}
</StyledButtonTooltip>
</GradientLabelsButtonWrapper>
}

{/* Creates the Zoom to see whole lifespan button */}
{ childMeasurements.length > 0 &&
<FullScreenButtonWrapper>
<StyledButtonTooltip>
<StyledButtonTooltip
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
color={styles.toggleTooltipStyle.color}
fontSize={styles.toggleTooltipStyle.fontSize}
fontFamily={styles.toggleTooltipStyle.fontFamily}
fontWeight={styles.toggleTooltipStyle.fontWeight}
fontStyle={styles.toggleTooltipStyle.fontStyle}
borderRadius={styles.toggleTooltipStyle.borderRadius}
>
<StyledFullScreenButton
onClick={()=> fullScreenPressed()}
$color={styles.toggleStyle.activeColour}
Expand All @@ -956,7 +982,15 @@ function CentileChart({
{/* Creates the Copy button */}
{ enableExport && (
<ShareButtonWrapper>
<StyledButtonTooltip>
<StyledButtonTooltip
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
color={styles.toggleTooltipStyle.color}
fontSize={styles.toggleTooltipStyle.fontSize}
fontFamily={styles.toggleTooltipStyle.fontFamily}
fontWeight={styles.toggleTooltipStyle.fontWeight}
fontStyle={styles.toggleTooltipStyle.fontStyle}
borderRadius={styles.toggleTooltipStyle.borderRadius}
>
<StyledShareButton
$color={styles.toggleStyle.activeColour}
size={5}
Expand Down Expand Up @@ -1024,4 +1058,4 @@ function CentileChart({
);
}

export default CentileChart;
export default CentileChart;
139 changes: 127 additions & 12 deletions src/RCPCHChart/RCPCHChart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Other props are:

- `title: string;` the title of the chart : could include patient name and identifiers
- `measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';` _must_ be one of the options provided
- `reference: 'uk-who' | 'turner' | 'trisomy-21';` _must_ be one of the options provided
- `reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';` _must_ be one of the options provided
- `sex: 'male' | 'female';` _must_ be one of the options provided
- `measurements: { measurementMethod: Measurement[]};` array of measurements returned from RCPCH Growth API. This should not be edited or manipulated. **NOTE this has changed in v7.0.0**
- `midParentalHeightData?: MidParentalHeightObject | undefined;` an RCPCH object returned from the RCPCH Growth API. Should not be edited or manipulated
Expand Down Expand Up @@ -332,7 +332,7 @@ Themes are collections of styles. The RCPCH have created some suggested themes:
5. Tanner 3: Red and yellow
6. Custom

These themes all have predefined attributes for `fontFamily`, `color`, `size`, `stroke` and `strokeWidth` for different aspects of the charts.
These themes all have predefined attributes for `fontFamily`, `color`, `size`, `weight`, `stroke` and `strokeWidth` for different aspects of the charts.
If these attributes are too prescriptive and users would like either to build their own theme,
or override styles within an existing theme, this can be done by passing in custom styles through the `customThemeStyles` prop.

Expand All @@ -344,36 +344,40 @@ All attributes are optional, therefore only those attributes where changes are r
- `centileStyle?: CentileStyle;`
- `sdsStyle?: SDSStyle;`
- `measurementStyle?: MeasurementStyle;`
- `referenceStyle?: ReferenceStyle;`

The attributes of each of these are below:

#### `ChartStyle`

- `backgroundColour?: string;` //background colour of chart
- `titleStyle?: TextStyle `| undefined; // style of text in title: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `subTitleStyle?: TextStyle `| undefined; // style of text in subtitle: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `titleStyle?: TextStyle`; // style of text in title: includes fontFamily, fontSize, colour, style, weight
- `subTitleStyle?: TextStyle`; // style of text in subtitle: includes fontFamily, fontSize, colour, style, weight
- `tooltipBackgroundColour?: string;` //background colour of tooltip
- `tooltipStroke?: string;` //border colour of tooltip
- `tooltipTextStyle?: TextStyle `| undefined; // tooltip text: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `tooltipTextStyle?: TextStyle`; // tooltip text: includes fontFamily, fontSize, colour, style, weight
- `termFill?: string;` // background colour of weight term area
- `termStroke?: string;` // border colour of weight term area
- `toggleButtonInactiveColour?: string;` // buttons - inactive colour
- `toggleButtonActiveColour?: string;` // buttons - active colour
- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, style, weight

#### `MeasurementStyle`

- `measurementFill?: string;` // measurement point fill colour - only apply to SDS charts
- `highlightedMeasurementFill?: string;` // measurement point fill colour when hightlighted (SDS charts)
- `eventTextStyle?: TextStyle;` // styles for text of events: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `eventTextStyle?: TextStyle;` // styles for text of events: includes fontFamily, fontSize, colour, style, weight

#### `CentileStyle`

- `sdsStroke?: string;` // sds line colour
- `centileStroke?: string;` // centile line colour
- `nondisjunctionThresholdLabel ?: string;` // label for nondisjunctionThresholdLabel
- `nondisjunctionThresholdLine ?: string;` // colour of nondisjunctionThresholdLine
- `delayedPubertyAreaFill?: string;` // delayed puberty area colour
- `midParentalCentileStroke?: string;` // Midparental height centile line colour
- `midParentalAreaFill?: string;` // Midparental height area colour
- `centileTextStyle?: Pick<TextStyle, 'name' | 'size' | 'weight'>;` // centile text style : includes name, size, weight

#### `SDSStyle`

Expand All @@ -392,19 +396,22 @@ The attributes of each of these are below:
#### `AxisStyle`

- `axisStroke?: string;` // Axis colour
- `axisLabelTextStyle?: TextStyle | undefined;` // Axis label text: : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `tickLabelTextStyle?: TextStyle | undefined;` // Tick label text : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- `axisThresholdLabelTextStyle?: TextStyle;` // Axis label text: : includes fontFamily, fontSize, colour, style, weight
- `axisThresholdLineStyle?: AxisThresholdLineStyle;` // Axis line: includes colour
- `axisLabelTextStyle?: TextStyle;` // Axis label text: : includes fontFamily, fontSize, colour, style, weight
- `tickLabelTextStyle?: TickLabelTextStyle;` // Tick label text : includes fontFamily, fontSize, colour, style, weight and padding

#### `TextStyle`

- `name?: string;`
- `colour?: string;`
- `size?: number;`
- `style?: 'bold' | 'italic' | 'normal';`
- `style?: 'italic' | 'normal';`
- `weight?: number | string;`

For example, if a user wished to override the background colour of the existing 'monochrome' theme:

```js
```tsx
const customChartStyle: ChartStyle = {
backgroundColour: "tomato"
}
Expand All @@ -416,7 +423,7 @@ const customStyles = {

And in the JSX:

```js
```tsx
<RCPCHChart
reference={'uk-who'}
measurementMethod={'height'}
Expand All @@ -437,3 +444,111 @@ And in the JSX:
yields:

<Canvas of={RCPCHChartStories.TomatoCentileChart} />

Or even build a whole new theme to match a custom Design System

```tsx
const customStyles = {
chartStyle: {
backgroundColour: '#FAF8F5',
titleStyle: {
weight: 800,
colour: '#706A80',
name: 'sans-serif',
size: 16,
},
subTitleStyle: {
weight: 400,
colour: '#706A80',
name: 'sans-serif',
size: 13,
},
tooltipStroke: '#5a526b',
tooltipBorderRadius: 4,
tooltipBackgroundColour: '#5a526b',
tooltipTextStyle: {
colour: '#fffdfd',
name: 'sans-serif',
size: 14,
},
toggleButtonActiveColour: '#B89F81',
toggleButtonInactiveColour: '#e8dbcc',
toggleButtonTextStyle: {
colour: 'white',
name: 'sans-serif',
size: 16,
weight: 400,
},
toggleButtonTooltipStyle: {
backgroundColour: '#5a526b',
borderRadius: 4,
colour: 'white',
size: 14,
name: 'sans-serif',
weight: 400,
}
},
axisStyle: {
axisStroke: '#EDE7DD',
tickLabelTextStyle: {
colour: '#706A80',
size: 12,
weight: 400,
name: 'sans-serif',
},
axisLabelTextStyle: {
weight: 500,
colour: '#706A80',
name: 'sans-serif',
size: 15,
},
axisThresholdLabelTextStyle: {
weight: 500,
colour: '#706A80',
name: 'sans-serif',
size: 12.5,
},
axisThresholdLineStyle: {
colour: '#706A80',
},
},
gridlineStyle: {
dashed: true,
stroke: '#EDE7DD',
strokeWidth: 1,
gridlines: true,
},
centileStyle: {
centileTextStyle: {
name: 'sans-serif',
size: 12.5,
weight: 400,
},
centileStroke: '#B89F81',
midParentalAreaFill: '#B89F81',
midParentalCentileStroke: '#B89F81',
delayedPubertyAreaFill: '#B89F81',
sdsStroke: '#B89F81',
},
measurementStyle: {
eventTextStyle: {
size: 14,
name: 'sans-serif',
weight: 400,
colour: '#760050',
},
highlightedMeasurementFill: '#B89F81',
measurementFill: '#760050',
},
referenceStyle: {
weight: 500,
colour: '#706A80',
name: 'sans-serif',
size: 13,
},
},
```

yields:

<Canvas of={RCPCHChartStories.CustomThemeStylesChart} />
Loading