Skip to content

Commit

Permalink
Merge pull request #117 from gdfreitas:custom-theme
Browse files Browse the repository at this point in the history 
add new custom theme properties for styling
  • Loading branch information
@eatyourpeas
eatyourpeas authored Oct 24, 2024
2 parents 22f81ac + 64cc9a8 commit af45a65
Show file tree
Hide file tree
Showing 17 changed files with 449 additions and 82 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@rcpch/digital-growth-charts-react-component-library",
"version": "7.1.1",
"version": "7.1.2",
"description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
"main": "build/index.js",
"module": "build/esm.index.js",
Expand Down
72 changes: 53 additions & 19 deletions src/CentileChart/CentileChart.tsx
View file
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
View file
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

0 comments on commit af45a65

Please sign in to comment.