Skip to content

Commit af45a65

Browse files
eatyourpeaseatyourpeas
authored
Merge pull request #117 from gdfreitas:custom-theme
add new custom theme properties for styling
2 parents 22f81ac + 64cc9a8 commit af45a65

17 files changed

+449
-82
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rcpch/digital-growth-charts-react-component-library",
3-
"version": "7.1.1",
3+
"version": "7.1.2",
44
"description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
55
"main": "build/index.js",
66
"module": "build/esm.index.js",

‎src/CentileChart/CentileChart.tsx

+53-19
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ function CentileChart({
321321
constrainToVisibleArea
322322
backgroundPadding={5}
323323
pointerLength={5}
324-
cornerRadius={0}
324+
cornerRadius={styles.toolTipBorderRadius}
325325
flyoutHeight={(datum) => {
326326
const numberOfLines = datum.text.length;
327327
return numberOfLines * 18 * textScaleFactor; // 18 is the line height
@@ -655,7 +655,12 @@ function CentileChart({
655655
textAnchor="start"
656656
angle={-90}
657657
dx={5}
658-
dy={10}
658+
dy={
659+
// adjust label margins relatively to font size so text doesn't overlap the line
660+
styles.delayedPubertyThresholdLabel?.fontSize
661+
? styles.delayedPubertyThresholdLabel.fontSize * 1.15
662+
: 10
663+
}
659664
style={styles.delayedPubertyThresholdLabel}
660665
/>
661666
}
@@ -683,8 +688,13 @@ function CentileChart({
683688
textAnchor="start"
684689
angle={-90}
685690
dx={5}
686-
dy={10}
687-
style={styles.delayedPubertyThresholdLabel}
691+
dy={
692+
// adjust label margins relatively to font size so text doesn't overlap the line
693+
styles.nondisjunctionThresholdLabel?.fontSize
694+
? styles.nondisjunctionThresholdLabel.fontSize * 1.15
695+
: 10
696+
}
697+
style={styles.nondisjunctionThresholdLabel}
688698
/>
689699
}
690700
/>
@@ -892,11 +902,11 @@ function CentileChart({
892902
})}
893903
</VictoryChart>
894904
<ChartTitle
895-
fontSize={8}
896-
fontFamily={'Arial'}
897-
color={'#000000'}
898-
fontWeight={'200'}
899-
fontStyle='normal'
905+
fontSize={styles.referenceTextStyle.fontSize}
906+
fontFamily={styles.referenceTextStyle.fontFamily}
907+
color={styles.referenceTextStyle.color}
908+
fontWeight={styles.referenceTextStyle.fontWeight}
909+
fontStyle={styles.referenceTextStyle.fontStyle}
900910
>{referenceText(reference)}</ChartTitle>
901911
</ChartContainer>
902912

@@ -909,7 +919,15 @@ function CentileChart({
909919
{/* Creates the Centile Label toggle button */}
910920
{
911921
<GradientLabelsButtonWrapper>
912-
<StyledButtonTooltip>
922+
<StyledButtonTooltip
923+
$backgroundColor={styles.toggleTooltipStyle.backgroundColor}
924+
$color={styles.toggleTooltipStyle.color}
925+
$fontSize={styles.toggleTooltipStyle.fontSize}
926+
$fontFamily={styles.toggleTooltipStyle.fontFamily}
927+
$fontWeight={styles.toggleTooltipStyle.fontWeight}
928+
$fontStyle={styles.toggleTooltipStyle.fontStyle}
929+
$borderRadius={styles.toggleTooltipStyle.borderRadius}
930+
>
913931
<StyledGradientLabelsButton
914932
$color={styles.toggleStyle.activeColour}
915933
size={5}
@@ -921,21 +939,29 @@ function CentileChart({
921939
:
922940
<ShowCentileLabelIcon/>
923941
}
924-
{ centileLabels ?
925-
<div className='tooltip'>Hide Centile Labels</div>
926-
:
927-
<div className='tooltip'>Show Centile Labels</div>
928-
}
929-
</StyledGradientLabelsButton>
930942

943+
</StyledGradientLabelsButton>
944+
{ centileLabels ?
945+
<div className='tooltip'>Hide Centile Labels</div>
946+
:
947+
<div className='tooltip'>Show Centile Labels</div>
948+
}
931949
</StyledButtonTooltip>
932950
</GradientLabelsButtonWrapper>
933951
}
934952

935953
{/* Creates the Zoom to see whole lifespan button */}
936954
{ childMeasurements.length > 0 &&
937955
<FullScreenButtonWrapper>
938-
<StyledButtonTooltip>
956+
<StyledButtonTooltip
957+
$backgroundColor={styles.toggleTooltipStyle.backgroundColor}
958+
$color={styles.toggleTooltipStyle.color}
959+
$fontSize={styles.toggleTooltipStyle.fontSize}
960+
$fontFamily={styles.toggleTooltipStyle.fontFamily}
961+
$fontWeight={styles.toggleTooltipStyle.fontWeight}
962+
$fontStyle={styles.toggleTooltipStyle.fontStyle}
963+
$borderRadius={styles.toggleTooltipStyle.borderRadius}
964+
>
939965
<StyledFullScreenButton
940966
onClick={()=> fullScreenPressed()}
941967
$color={styles.toggleStyle.activeColour}
@@ -956,7 +982,15 @@ function CentileChart({
956982
{/* Creates the Copy button */}
957983
{ enableExport && (
958984
<ShareButtonWrapper>
959-
<StyledButtonTooltip>
985+
<StyledButtonTooltip
986+
$backgroundColor={styles.toggleTooltipStyle.backgroundColor}
987+
$color={styles.toggleTooltipStyle.color}
988+
$fontSize={styles.toggleTooltipStyle.fontSize}
989+
$fontFamily={styles.toggleTooltipStyle.fontFamily}
990+
$fontWeight={styles.toggleTooltipStyle.fontWeight}
991+
$fontStyle={styles.toggleTooltipStyle.fontStyle}
992+
$borderRadius={styles.toggleTooltipStyle.borderRadius}
993+
>
960994
<StyledShareButton
961995
$color={styles.toggleStyle.activeColour}
962996
size={5}
@@ -1024,4 +1058,4 @@ function CentileChart({
10241058
);
10251059
}
10261060

1027-
export default CentileChart;
1061+
export default CentileChart;

‎src/RCPCHChart/RCPCHChart.mdx

+127-12
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Other props are:
1818

1919
- `title: string;` the title of the chart : could include patient name and identifiers
2020
- `measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';` _must_ be one of the options provided
21-
- `reference: 'uk-who' | 'turner' | 'trisomy-21';` _must_ be one of the options provided
21+
- `reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';` _must_ be one of the options provided
2222
- `sex: 'male' | 'female';` _must_ be one of the options provided
2323
- `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**
2424
- `midParentalHeightData?: MidParentalHeightObject | undefined;` an RCPCH object returned from the RCPCH Growth API. Should not be edited or manipulated
@@ -332,7 +332,7 @@ Themes are collections of styles. The RCPCH have created some suggested themes:
332332
5. Tanner 3: Red and yellow
333333
6. Custom
334334

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

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

348349
The attributes of each of these are below:
349350

350351
#### `ChartStyle`
351352

352353
- `backgroundColour?: string;` //background colour of chart
353-
- `titleStyle?: TextStyle `| undefined; // style of text in title: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
354-
- `subTitleStyle?: TextStyle `| undefined; // style of text in subtitle: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
354+
- `titleStyle?: TextStyle`; // style of text in title: includes fontFamily, fontSize, colour, style, weight
355+
- `subTitleStyle?: TextStyle`; // style of text in subtitle: includes fontFamily, fontSize, colour, style, weight
355356
- `tooltipBackgroundColour?: string;` //background colour of tooltip
356357
- `tooltipStroke?: string;` //border colour of tooltip
357-
- `tooltipTextStyle?: TextStyle `| undefined; // tooltip text: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
358+
- `tooltipTextStyle?: TextStyle`; // tooltip text: includes fontFamily, fontSize, colour, style, weight
358359
- `termFill?: string;` // background colour of weight term area
359360
- `termStroke?: string;` // border colour of weight term area
360361
- `toggleButtonInactiveColour?: string;` // buttons - inactive colour
361362
- `toggleButtonActiveColour?: string;` // buttons - active colour
362-
- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, weight (regular/bold/italic)
363+
- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, style, weight
363364

364365
#### `MeasurementStyle`
365366

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

370371
#### `CentileStyle`
371372

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

378382
#### `SDSStyle`
379383

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

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

398404
#### `TextStyle`
399405

400406
- `name?: string;`
401407
- `colour?: string;`
402408
- `size?: number;`
403-
- `style?: 'bold' | 'italic' | 'normal';`
409+
- `style?: 'italic' | 'normal';`
410+
- `weight?: number | string;`
404411

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

407-
```js
414+
```tsx
408415
const customChartStyle: ChartStyle = {
409416
backgroundColour: "tomato"
410417
}
@@ -416,7 +423,7 @@ const customStyles = {
416423

417424
And in the JSX:
418425

419-
```js
426+
```tsx
420427
<RCPCHChart
421428
reference={'uk-who'}
422429
measurementMethod={'height'}
@@ -437,3 +444,111 @@ And in the JSX:
437444
yields:
438445

439446
<Canvas of={RCPCHChartStories.TomatoCentileChart} />
447+
448+
Or even build a whole new theme to match a custom Design System
449+
450+
```tsx
451+
const customStyles = {
452+
chartStyle: {
453+
backgroundColour: '#FAF8F5',
454+
titleStyle: {
455+
weight: 800,
456+
colour: '#706A80',
457+
name: 'sans-serif',
458+
size: 16,
459+
},
460+
subTitleStyle: {
461+
weight: 400,
462+
colour: '#706A80',
463+
name: 'sans-serif',
464+
size: 13,
465+
},
466+
tooltipStroke: '#5a526b',
467+
tooltipBorderRadius: 4,
468+
tooltipBackgroundColour: '#5a526b',
469+
tooltipTextStyle: {
470+
colour: '#fffdfd',
471+
name: 'sans-serif',
472+
size: 14,
473+
},
474+
toggleButtonActiveColour: '#B89F81',
475+
toggleButtonInactiveColour: '#e8dbcc',
476+
toggleButtonTextStyle: {
477+
colour: 'white',
478+
name: 'sans-serif',
479+
size: 16,
480+
weight: 400,
481+
},
482+
toggleButtonTooltipStyle: {
483+
backgroundColour: '#5a526b',
484+
borderRadius: 4,
485+
colour: 'white',
486+
size: 14,
487+
name: 'sans-serif',
488+
weight: 400,
489+
}
490+
},
491+
axisStyle: {
492+
axisStroke: '#EDE7DD',
493+
tickLabelTextStyle: {
494+
colour: '#706A80',
495+
size: 12,
496+
weight: 400,
497+
name: 'sans-serif',
498+
},
499+
axisLabelTextStyle: {
500+
weight: 500,
501+
colour: '#706A80',
502+
name: 'sans-serif',
503+
size: 15,
504+
},
505+
axisThresholdLabelTextStyle: {
506+
weight: 500,
507+
colour: '#706A80',
508+
name: 'sans-serif',
509+
size: 12.5,
510+
},
511+
axisThresholdLineStyle: {
512+
colour: '#706A80',
513+
},
514+
},
515+
gridlineStyle: {
516+
dashed: true,
517+
stroke: '#EDE7DD',
518+
strokeWidth: 1,
519+
gridlines: true,
520+
},
521+
centileStyle: {
522+
centileTextStyle: {
523+
name: 'sans-serif',
524+
size: 12.5,
525+
weight: 400,
526+
},
527+
centileStroke: '#B89F81',
528+
midParentalAreaFill: '#B89F81',
529+
midParentalCentileStroke: '#B89F81',
530+
delayedPubertyAreaFill: '#B89F81',
531+
sdsStroke: '#B89F81',
532+
},
533+
measurementStyle: {
534+
eventTextStyle: {
535+
size: 14,
536+
name: 'sans-serif',
537+
weight: 400,
538+
colour: '#760050',
539+
},
540+
highlightedMeasurementFill: '#B89F81',
541+
measurementFill: '#760050',
542+
},
543+
referenceStyle: {
544+
weight: 500,
545+
colour: '#706A80',
546+
name: 'sans-serif',
547+
size: 13,
548+
},
549+
},
550+
```
551+
552+
yields:
553+
554+
<Canvas of={RCPCHChartStories.CustomThemeStylesChart} />

0 commit comments

Comments
 (0)