Skip to content

Commit bfb4b8f

Browse files
gdfreitasgdfreitas
committedOct 22, 2024
add new custom theme properties for styling
1 parent 22f81ac commit bfb4b8f

File tree

8 files changed

+200
-42
lines changed

8 files changed

+200
-42
lines changed
 

‎src/CentileChart/CentileChart.tsx

+18-8
Original file line numberDiff line numberDiff line change
@@ -655,7 +655,12 @@ function CentileChart({
655655
textAnchor="start"
656656
angle={-90}
657657
dx={5}
658-
dy={10}
658+
dy={
659+
// adjusts margins relatively to font size
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+
// adjusts margins relatively to font size
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

‎src/RCPCHChart/RCPCHChart.stories.tsx

+108-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ export default meta;
2323
type Story = StoryObj<typeof RCPCHChart>;
2424

2525
const customChartStyle: ChartStyle = {
26-
backgroundColour: "tomato"
26+
backgroundColour: "tomato",
27+
subTitleStyle: {
28+
weight: ''
29+
}
2730
}
2831

2932
const customStyles = {
@@ -463,4 +466,107 @@ export const MultipleMeasurementSDSChart: Story = {
463466
customThemeStyles: {}
464467
},
465468

466-
}
469+
}
470+
471+
export const CustomThemeStylesChart: Story = {
472+
args: {
473+
title: 'Patient Name - Hospital Number',
474+
measurementMethod: 'height',
475+
reference: 'uk-who',
476+
sex: 'female',
477+
measurements: {
478+
height: twoToEight,
479+
},
480+
midParentalHeightData: {},
481+
enableZoom: true,
482+
chartType: 'centile',
483+
enableExport: false,
484+
exportChartCallback: () => {},
485+
theme: 'custom',
486+
customThemeStyles: {
487+
chartStyle: {
488+
titleStyle: {
489+
weight: 600,
490+
colour: '#706A80',
491+
name: 'sans-serif',
492+
size: 16,
493+
},
494+
subTitleStyle: {
495+
weight: 400,
496+
colour: '#706A80',
497+
name: 'sans-serif',
498+
size: 13,
499+
},
500+
toggleButtonActiveColour: '#B89F81',
501+
toggleButtonInactiveColour: '#e8dbcc',
502+
toggleButtonTextStyle: {
503+
colour: 'white',
504+
name: 'sans-serif',
505+
size: 16,
506+
weight: 400,
507+
},
508+
backgroundColour: '#FAF8F5',
509+
tooltipStroke: '#EBE1D3',
510+
tooltipBackgroundColour: '#FFFDFD',
511+
tooltipTextStyle: {
512+
colour: '#706A80',
513+
name: 'sans-serif',
514+
size: 17,
515+
},
516+
},
517+
axisStyle: {
518+
axisStroke: '#EDE7DD',
519+
tickLabelTextStyle: {
520+
colour: '#706A80',
521+
size: 12,
522+
weight: 400,
523+
name: 'sans-serif',
524+
},
525+
axisLabelTextStyle: {
526+
weight: 500,
527+
colour: '#706A80',
528+
name: 'sans-serif',
529+
size: 14,
530+
},
531+
axisThresholdLabelTextStyle: {
532+
weight: 500,
533+
colour: '#706A80',
534+
name: 'sans-serif',
535+
size: 12.5,
536+
},
537+
axisThresholdLineStyle: {
538+
colour: '#706A80',
539+
},
540+
},
541+
referenceStyle: {
542+
weight: 500,
543+
colour: '#706A80',
544+
name: 'sans-serif',
545+
size: 13,
546+
},
547+
gridlineStyle: {
548+
dashed: true,
549+
stroke: '#EDE7DD',
550+
strokeWidth: 1,
551+
gridlines: true,
552+
},
553+
centileStyle: {
554+
centileStroke: '#B89F81',
555+
midParentalAreaFill: '#B89F81',
556+
midParentalCentileStroke: '#B89F81',
557+
delayedPubertyAreaFill: '#B89F81',
558+
sdsStroke: '#B89F81',
559+
},
560+
measurementStyle: {
561+
eventTextStyle: {
562+
size: 16,
563+
name: 'sans-serif',
564+
weight: 500,
565+
colour: '#706A80',
566+
},
567+
highlightedMeasurementFill: '#B89F81',
568+
measurementFill: '#760050',
569+
},
570+
},
571+
},
572+
};

‎src/RCPCHChart/RCPCHChart.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
9696

9797

9898
// spread styles into individual objects
99-
const { chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle } = all_styles
99+
const { chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, referenceStyle } = all_styles
100100

101101
// use height and width if provided to set text size also - text in SVG does not scale with the chart so we need to adjust it
102102
const referenceWidth = 1000;
@@ -111,7 +111,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
111111
}
112112

113113
// make granular styles to pass into charts
114-
const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, textScaleFactor);
114+
const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, textScaleFactor, referenceStyle);
115115

116116

117117
// uncomment in development

‎src/RCPCHChart/RCPCHChart.types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Measurement } from '../interfaces/RCPCHMeasurementObject';
22
import { MidParentalHeightObject } from '../interfaces/MidParentalHeightObject';
3-
import { AxisStyle, CentileStyle, ChartStyle, GridlineStyle, MeasurementStyle, SDSStyle } from '../interfaces/StyleObjects';
3+
import { AxisStyle, CentileStyle, ChartStyle, GridlineStyle, MeasurementStyle, ReferenceStyle, SDSStyle } from '../interfaces/StyleObjects';
44
import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
55

66
export interface RCPCHChartProps {
@@ -25,5 +25,6 @@ export interface RCPCHChartProps {
2525
measurementStyle?: MeasurementStyle
2626
centileStyle?: CentileStyle
2727
sdsStyle?: SDSStyle
28+
referenceStyle?: ReferenceStyle
2829
} // individual styles to override in each theme. If 'custom' theme is selected, 'monochrome' styles are defaulted and styles passed here override them
2930
}

‎src/SDSChart/SDSChart.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -559,11 +559,11 @@ const SDSChart: React.FC<SDSChartProps> = (
559559
</VictoryChart>
560560

561561
<ChartTitle
562-
fontSize={8}
563-
fontFamily={'Arial'}
564-
color={'#000000'}
565-
fontWeight={'200'}
566-
fontStyle='normal'
562+
fontSize={styles.referenceTextStyle.fontSize}
563+
fontFamily={styles.referenceTextStyle.fontFamily}
564+
color={styles.referenceTextStyle.color}
565+
fontWeight={styles.referenceTextStyle.fontWeight}
566+
fontStyle={styles.referenceTextStyle.fontStyle}
567567
>{referenceText(reference)}</ChartTitle>
568568

569569
</ChartContainer>

‎src/functions/makeAllStyles.ts

+31-12
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Most of the properties in each of the interfaces are optionals, as users may not
1414
This function therefore instantiates defaults where user values have not been provided.
1515
This creates a styles object that is passed to the chart.
1616
*/
17-
import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, MeasurementStyle } from '../interfaces/StyleObjects';
17+
import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, MeasurementStyle, ReferenceStyle } from '../interfaces/StyleObjects';
1818

1919
const black = '#000000';
2020
const white = '#FFFFFF';
@@ -35,7 +35,8 @@ function makeAllStyles(
3535
centileStyle?: CentileStyle,
3636
sdsStyle?: SDSStyle,
3737
measurementStyle?: MeasurementStyle,
38-
textMultiplier?: number // this is used to scale text size based on the aspect ratio of the chart using the height and width. Default is 1
38+
textMultiplier?: number, // this is used to scale text size based on the aspect ratio of the chart using the height and width. Default is 1
39+
referenceStyle?: ReferenceStyle,
3940
) {
4041

4142
let newGridlineStyle = {
@@ -70,17 +71,20 @@ function makeAllStyles(
7071
fontSize: (chartStyle?.tooltipTextStyle?.size ?? 14) * (textMultiplier ?? 1),
7172
fill: chartStyle?.tooltipTextStyle?.colour ?? black,
7273
fontFamily: chartStyle?.tooltipTextStyle?.name ?? 'Montserrat',
74+
fontWeight: chartStyle?.tooltipTextStyle?.weight ?? 400,
7375
fontStyle: chartStyle?.tooltipTextStyle?.style ?? 'normal',
7476
textAnchor: "start"
7577
},
7678
chartTitle: {
77-
fontFamily: chartStyle?.titleStyle?.name ?? 'Arial',
79+
fontFamily: chartStyle?.titleStyle?.name ?? 'Arial',
80+
fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
7881
color: chartStyle?.titleStyle?.colour ?? black,
7982
fontSize: chartStyle?.titleStyle?.size ?? 14,
8083
fontStyle: chartStyle?.titleStyle?.style === 'italic' ? 'italic' : 'normal',
8184
},
8285
chartSubTitle: {
8386
fontFamily: chartStyle?.subTitleStyle?.name ?? 'Arial',
87+
fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
8488
color: chartStyle?.subTitleStyle?.colour ?? black,
8589
fontSize: chartStyle?.subTitleStyle?.size ?? 14,
8690
fontStyle: chartStyle?.subTitleStyle?.style === 'italic' ? 'italic' : 'normal',
@@ -96,17 +100,19 @@ function makeAllStyles(
96100
padding: 20,
97101
fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
98102
fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
103+
fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
99104
fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
100105
},
101106
ticks: {
102107
stroke: axisStyle?.tickLabelTextStyle?.colour ?? black,
103108
},
104109
tickLabels: {
105110
fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
106-
padding: 5,
111+
padding: axisStyle?.tickLabelTextStyle?.padding ?? 5,
107112
fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
108113
color: axisStyle?.tickLabelTextStyle?.colour ?? black,
109114
fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
115+
fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
110116
fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
111117
},
112118
grid: {
@@ -117,6 +123,7 @@ function makeAllStyles(
117123
fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
118124
fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
119125
fontFamily: axisStyle?.tickLabelTextStyle?.name ?? 'Arial',
126+
fontWeight: axisStyle?.tickLabelTextStyle?.weight ?? 400,
120127
fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
121128
},
122129
yAxis: {
@@ -129,6 +136,7 @@ function makeAllStyles(
129136
padding: 25,
130137
fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
131138
fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
139+
fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
132140
fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
133141
},
134142
ticks: {
@@ -139,6 +147,7 @@ function makeAllStyles(
139147
padding: 5,
140148
fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
141149
fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
150+
fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
142151
fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
143152
},
144153
grid: {
@@ -154,19 +163,20 @@ function makeAllStyles(
154163
},
155164
delayedPubertyThresholdLine: {
156165
data: {
157-
stroke: charcoal,
166+
stroke: axisStyle.axisThresholdLineStyle?.colour ?? charcoal,
158167
strokeWidth: 1,
159168
},
160169
},
161170
delayedPubertyThresholdLabel: {
162-
fontSize: (9) * (textMultiplier ?? 1),
163-
fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
164-
fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
171+
fontSize: (axisStyle?.axisThresholdLabelTextStyle?.size ?? 9) * (textMultiplier ?? 1),
172+
fill: axisStyle?.axisThresholdLabelTextStyle?.colour ?? black,
173+
fontFamily: axisStyle?.axisThresholdLabelTextStyle?.name ?? 'Arial',
174+
fontWeight: axisStyle?.axisThresholdLabelTextStyle?.weight ?? 400,
165175
textAlign: 'start',
166176
},
167177
nondisjunctionThresholdLine: {
168178
data: {
169-
stroke: charcoal,
179+
stroke: axisStyle.axisThresholdLineStyle?.colour ?? charcoal,
170180
strokeWidth: 1,
171181
},
172182
},
@@ -194,9 +204,10 @@ function makeAllStyles(
194204
},
195205
},
196206
centileLabel: {
197-
fontSize: (6) * (textMultiplier ?? 1),
198-
fontFamily: 'Montserrat',
199-
fill: centileStyle?.centileStroke ?? black
207+
fontSize: (centileStyle.centileTextStyle?.size ?? 6) * (textMultiplier ?? 1),
208+
fontFamily: centileStyle.centileTextStyle?.name ?? 'Montserrat',
209+
fontWeight: centileStyle.centileTextStyle?.weight ?? 400,
210+
fill: centileStyle?.centileStroke ?? black,
200211
},
201212
heightSDS: {
202213
data: {
@@ -275,11 +286,19 @@ function makeAllStyles(
275286
activeColour: chartStyle?.toggleButtonActiveColour ?? black,
276287
inactiveColour: chartStyle?.toggleButtonInactiveColour ?? midGrey,
277288
fontFamily: chartStyle?.toggleButtonTextStyle?.name ?? 'Arial',
289+
fontWeight: chartStyle?.toggleButtonTextStyle?.weight ?? 400,
278290
color: chartStyle?.toggleButtonTextStyle?.colour ?? white,
279291
fontSize: chartStyle?.toggleButtonTextStyle?.size ?? 14,
280292
fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal',
281293
margin: 0
282294
},
295+
referenceTextStyle: {
296+
fontSize: referenceStyle?.size ?? 8,
297+
fontFamily: referenceStyle?.name ?? 'Arial',
298+
color: referenceStyle?.colour ?? black,
299+
fontWeight: referenceStyle?.weight ?? 200,
300+
fontStyle: referenceStyle?.style ?? 'normal',
301+
},
283302
};
284303
}
285304

0 commit comments

Comments
 (0)