Skip to content

Commit 51c79a4

Browse files
gdfreitasgdfreitas
committed
update default theme weight/style properties
1 parent 24a0151 commit 51c79a4

9 files changed

+61
-68
lines changed

‎src/CentileChart/CentileChart.tsx

+48-55
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import RenderTickLabel from '../SubComponents/RenderTickLabel';
4242
import { TitleContainer } from '../SubComponents/TitleContainer';
4343
import { StyledRadioButtonGroup } from '../SubComponents/StyledRadioButtonGroup';
4444
import { StyledResetZoomButton } from '../SubComponents/StyledResetZoomButton';
45-
import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton';
45+
import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton'
4646
import { StyledButtonTooltip } from '../SubComponents/StyledButtonTooltip';
4747
import { ButtonContainer } from '../SubComponents/ButtonContainer';
4848
import { ThreeButtonContainer } from '../SubComponents/ThreeButtonContainer';
@@ -72,7 +72,10 @@ import icon from '../images/icon.png';
7272
import ukca from '../images/ukca.png';
7373

7474
// allows two top level containers: zoom and voronoi
75-
const VictoryZoomVoronoiContainer: any = createContainer('zoom', 'voronoi');
75+
const VictoryZoomVoronoiContainer:any = createContainer(
76+
'zoom',
77+
'voronoi',
78+
);
7679

7780
function CentileChart({
7881
chartsVersion,
@@ -90,17 +93,17 @@ function CentileChart({
9093
textScaleFactor,
9194
enableExport,
9295
exportChartCallback,
93-
clinicianFocus,
96+
clinicianFocus
9497
}: CentileChartProps) {
9598
const [userDomains, setUserDomains] = useState(null);
9699

97100
const [storedChildMeasurements, setStoredChildMeasurements] = useState(childMeasurements);
98101
const { defaultShowCorrected, defaultShowChronological, showToggle } = defaultToggles(childMeasurements);
99102
const [showChronologicalAge, setShowChronologicalAge] = useState(defaultShowChronological);
100103
const [showCorrectedAge, setShowCorrectedAge] = useState(defaultShowCorrected);
101-
const chartRef = useRef<any>();
104+
const chartRef=useRef<any>();
102105
const [active, setActive] = useState(false);
103-
const [fullScreen, setFullScreen] = useState(true);
106+
const [fullScreen, setFullScreen]=useState(true);
104107
const [centileLabels, setCentileLabels] = useState(false);
105108

106109
// save & destruct domains and data on initial render and when dependencies change
@@ -113,15 +116,15 @@ function CentileChart({
113116
measurementMethod,
114117
reference,
115118
showCorrectedAge,
116-
showChronologicalAge,
119+
showChronologicalAge
117120
),
118121
[storedChildMeasurements, sex, measurementMethod, reference, showCorrectedAge, showChronologicalAge],
119122
);
120123

121124
// get the highest reference index of visible centile data
122125
let maxVisibleReferenceIndex: number = null;
123126
let minimumArrayLength;
124-
centileData.forEach((item, index) => {
127+
centileData.forEach((item,index)=>{
125128
switch (index) {
126129
case 0:
127130
minimumArrayLength = 3; // neonates label gap
@@ -158,13 +161,15 @@ function CentileChart({
158161
pubertyThresholds = makePubertyThresholds(domains, sex);
159162
}
160163
if (reference === 'uk-who') {
161-
nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex);
164+
nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex)
162165
}
163166

164-
const filteredMidParentalHeightData = useMemo(
165-
() => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex),
166-
[reference, childMeasurements, midParentalHeightData, sex],
167-
);
167+
const filteredMidParentalHeightData = useMemo(() => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex),[
168+
reference,
169+
childMeasurements,
170+
midParentalHeightData,
171+
sex
172+
]);
168173

169174
// Create the shaded area at term
170175
let termAreaData: null | any[] = null;
@@ -196,37 +201,34 @@ function CentileChart({
196201
setActive(true);
197202
exportChartCallback(chartRef.current.firstChild); // this passes the raw SVG back to the client for converting
198203
}
199-
};
204+
}
200205

201206
// label fade on cut
202207
const labelFadeEnd = () => {
203208
setActive(false);
204-
};
209+
}
205210

206211
// full screen button action
207212
const fullScreenPressed = () => {
208213
setFullScreen(!fullScreen);
209214
fullScreen ? setStoredChildMeasurements([]) : setStoredChildMeasurements(childMeasurements);
210-
};
215+
}
211216

212217
// toggle between corrected/uncorrected/both
213218
const onSelectRadioButton = (event: MouseEvent<HTMLButtonElement>) => {
214219
switch ((event.target as HTMLInputElement).value) {
215220
case 'unadjusted':
216221
setShowChronologicalAge(true);
217222
setShowCorrectedAge(false);
218-
219223
break;
220224
case 'adjusted':
221-
setShowChronologicalAge(false);
222-
setShowCorrectedAge(true);
223-
224-
break;
225+
setShowChronologicalAge(false);
226+
setShowCorrectedAge(true);
227+
break;
225228
case 'both':
226-
setShowChronologicalAge(true);
227-
setShowCorrectedAge(true);
228-
229-
break;
229+
setShowChronologicalAge(true);
230+
setShowCorrectedAge(true);
231+
break;
230232
default:
231233
console.warn('Fall through case on toggle adjusted age function');
232234
}
@@ -239,7 +241,7 @@ function CentileChart({
239241

240242
const renderGradientLabels = () => {
241243
setCentileLabels(!centileLabels);
242-
};
244+
}
243245

244246
// always reset zoom to default when measurements array changes
245247
useLayoutEffect(() => {
@@ -253,9 +255,11 @@ function CentileChart({
253255
<IndividualLogoContainer>
254256
<img src={icon} width={24} height={24} />
255257
</IndividualLogoContainer>
256-
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
258+
<VersionLabel
259+
fontFamily={styles.chartTitle.fontFamily}
260+
>{chartsVersion}</VersionLabel>
257261
<IndividualLogoContainer>
258-
<img src={ukca} width={18} height={18} />
262+
<img src={ukca} width={18} height={18}/>
259263
</IndividualLogoContainer>
260264
</LogoContainer>
261265
</TopContainer>
@@ -278,9 +282,7 @@ function CentileChart({
278282
containerComponent={
279283
<VictoryZoomVoronoiContainer
280284
data-testid="label-container"
281-
containerRef={(ref) => {
282-
chartRef.current = ref;
283-
}}
285+
containerRef={ref => { chartRef.current=ref} }
284286
allowZoom={allowZooming}
285287
allowPan={allowZooming}
286288
onZoomDomainChange={handleZoomChange}
@@ -296,15 +298,15 @@ function CentileChart({
296298
datum,
297299
midParentalHeightData,
298300
clinicianFocus,
299-
sex,
300-
);
301-
if (tooltipTextList) {
301+
sex
302+
)
303+
if (tooltipTextList){
302304
return tooltipTextList.join('\n').replace(/^\s+|\s+$/g, '');
303-
}
305+
}
304306
}}
305307
labelComponent={
306308
<VictoryTooltip
307-
data-testid="tooltip"
309+
data-testid='tooltip'
308310
constrainToVisibleArea
309311
backgroundPadding={5}
310312
pointerLength={5}
@@ -316,23 +318,16 @@ function CentileChart({
316318
flyoutStyle={{
317319
...styles.toolTipFlyout,
318320
}}
319-
style={{ ...styles.toolTipMain }}
321+
style={{...styles.toolTipMain}}
320322
/>
321323
}
322-
voronoiBlacklist={[
323-
'linkLine',
324-
'chronologicalboneagelinkline',
325-
'correctedboneagelinkline',
326-
'areaMPH',
327-
]}
324+
voronoiBlacklist={['linkLine', 'chronologicalboneagelinkline', 'correctedboneagelinkline', 'areaMPH']}
328325
/>
329326
}
330327
>
331328
{
332329
/* Term child shaded area: */
333-
termAreaData !== null && reference == 'uk-who' && (
334-
<VictoryArea style={styles.termArea} data={termAreaData} />
335-
)
330+
termAreaData !== null && reference=="uk-who" && <VictoryArea style={styles.termArea} data={termAreaData} />
336331
}
337332

338333
{/* X axis: */}
@@ -364,8 +359,7 @@ function CentileChart({
364359
{/* Any measurements plotting here are likely due to delayed puberty */}
365360
{/* The upper border is the 0.4th centile so this must come before the centiles */}
366361

367-
{reference === 'uk-who' &&
368-
measurementMethod === 'height' &&
362+
{ reference==="uk-who" && measurementMethod === "height" &&
369363
// delayed puberty area:
370364
pubertyThresholds !== null && (
371365
<VictoryArea
@@ -374,24 +368,23 @@ function CentileChart({
374368
style={styles.delayedPubertyArea}
375369
name="delayed"
376370
/>
377-
)}
371+
)
372+
}
378373

379374
{/*
380375
midparental height centiles
381376
These are three lines, the MPH centile, a centile 2SD above it, and another 2SD below
382377
There is an area fill between the highest and lowest
383-
*/}
378+
*/
379+
}
384380

385-
{(reference === 'uk-who' || reference === 'cdc') &&
386-
measurementMethod === 'height' &&
387-
filteredMidParentalHeightData &&
388-
filteredMidParentalHeightData.map((reference, index) => {
381+
{ (reference==="uk-who" || reference==="cdc") && measurementMethod==="height" && filteredMidParentalHeightData && filteredMidParentalHeightData.map((reference, index)=>{
389382
// this function filters the midparental height centile data to only those values
390383
// one month either side of the most recent measurement, or 20 y if no measurements
391384
// supplied.
392-
if (index === 0) {
385+
if (index === 0){
393386
// neonates - remove
394-
return;
387+
return
395388
}
396389

397390
const lowerData = reference.lowerParentalCentile;

‎src/RCPCHChart/RCPCHChart.stories.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,7 @@ export const CustomThemeStylesChart: Story = {
484484
chartStyle: {
485485
backgroundColour: '#FAF8F5',
486486
titleStyle: {
487-
weight: 600,
487+
weight: 800,
488488
colour: '#706A80',
489489
name: 'sans-serif',
490490
size: 16,
@@ -523,7 +523,7 @@ export const CustomThemeStylesChart: Story = {
523523
weight: 500,
524524
colour: '#706A80',
525525
name: 'sans-serif',
526-
size: 14,
526+
size: 18,
527527
},
528528
axisThresholdLabelTextStyle: {
529529
weight: 500,
@@ -555,10 +555,10 @@ export const CustomThemeStylesChart: Story = {
555555
},
556556
measurementStyle: {
557557
eventTextStyle: {
558-
size: 16,
558+
size: 14,
559559
name: 'sans-serif',
560-
weight: 500,
561-
colour: '#706A80',
560+
weight: 400,
561+
colour: '#760050',
562562
},
563563
highlightedMeasurementFill: '#B89F81',
564564
measurementFill: '#760050',

‎src/functions/makeAllStyles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function makeAllStyles(
7777
},
7878
chartTitle: {
7979
fontFamily: chartStyle?.titleStyle?.name ?? 'Arial',
80-
fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
80+
fontWeight: chartStyle?.titleStyle?.weight ?? 700,
8181
color: chartStyle?.titleStyle?.colour ?? black,
8282
fontSize: chartStyle?.titleStyle?.size ?? 14,
8383
fontStyle: chartStyle?.titleStyle?.style === 'italic' ? 'italic' : 'normal',

‎src/testParameters/styles/monochromeStyles.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const monochromeChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",
@@ -317,7 +317,7 @@ export const chartObject: ChartStyle = {
317317
"name": "Arial",
318318
"colour": "#000000",
319319
"size": 14,
320-
"style": "bold"
320+
"weight": "700"
321321
},
322322
"subTitleStyle": {
323323
"name": "Arial",

‎src/testParameters/styles/tanner1Styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Tanner1ChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",

‎src/testParameters/styles/tanner2Styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Tanner2ChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",

‎src/testParameters/styles/tanner3Styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Tanner3ChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",

‎src/testParameters/styles/traditionalBoysStyles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const traditionalBoyChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",

‎src/testParameters/styles/traditionalGirlsStyles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const traditionalGirlChartStyles: ChartStyle = {
2626
name: "Arial",
2727
colour: "#000000",
2828
size: 14,
29-
style: 'bold'
29+
weight: '700'
3030
},
3131
subTitleStyle: {
3232
name: "Arial",

0 commit comments

Comments
 (0)