Skip to content

Commit 60f1c08

Browse files
eatyourpeaseatyourpeas
authored
Merge pull request #119 from gdfreitas/logo-presets
add support for different logo variants
2 parents fb72cc2 + a3fad42 commit 60f1c08

11 files changed

+204
-73
lines changed

‎src/CentileChart/CentileChart.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,7 @@ describe('All tests relate to rendering the text in the height centile chart for
479479
enableExport: false,
480480
exportChartCallback: () => null,
481481
clinicianFocus: false,
482+
logoVariant: 'top',
482483
};
483484
});
484485

‎src/CentileChart/CentileChart.tsx

+46-14
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ import { GradientLabelsButtonWrapper } from '../SubComponents/GradientLabelsButt
7070
// RCPCH Icon:
7171
import icon from '../images/icon.png';
7272
import ukca from '../images/ukca.png';
73+
import { BottomContainer } from '../SubComponents/BottomContainer';
74+
import { BottomLogoContainer } from '../SubComponents/BottomLogoContainer';
7375

7476
// allows two top level containers: zoom and voronoi
7577
const VictoryZoomVoronoiContainer: any = createContainer('zoom', 'voronoi');
@@ -91,6 +93,7 @@ function CentileChart({
9193
enableExport,
9294
exportChartCallback,
9395
clinicianFocus,
96+
logoVariant
9497
}: CentileChartProps) {
9598
const [userDomains, setUserDomains] = useState(null);
9699

@@ -248,17 +251,23 @@ function CentileChart({
248251

249252
return (
250253
<MainContainer>
251-
<TopContainer>
252-
<LogoContainer>
253-
<IndividualLogoContainer>
254-
<img src={icon} width={24} height={24} />
255-
</IndividualLogoContainer>
256-
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
257-
<IndividualLogoContainer>
258-
<img src={ukca} width={18} height={18} />
259-
</IndividualLogoContainer>
260-
</LogoContainer>
261-
</TopContainer>
254+
255+
{logoVariant === 'top' && (
256+
<TopContainer>
257+
<LogoContainer>
258+
<IndividualLogoContainer>
259+
<img src={icon} width={24} height={24} />
260+
</IndividualLogoContainer>
261+
<VersionLabel
262+
fontFamily={styles.chartTitle.fontFamily}
263+
>{chartsVersion}</VersionLabel>
264+
<IndividualLogoContainer>
265+
<img src={ukca} width={18} height={18}/>
266+
</IndividualLogoContainer>
267+
</LogoContainer>
268+
269+
</TopContainer>
270+
)}
262271

263272
<ChartContainer>
264273
<TitleContainer>
@@ -960,9 +969,32 @@ function CentileChart({
960969
color={styles.referenceTextStyle.color}
961970
fontWeight={styles.referenceTextStyle.fontWeight}
962971
fontStyle={styles.referenceTextStyle.fontStyle}
963-
>
964-
{referenceText(reference)}
965-
</ChartTitle>
972+
>{referenceText(reference)}</ChartTitle>
973+
974+
{logoVariant === 'legend' && (
975+
<ChartTitle
976+
fontSize={styles.referenceTextStyle.fontSize}
977+
fontFamily={styles.referenceTextStyle.fontFamily}
978+
color={styles.referenceTextStyle.color}
979+
fontWeight={styles.referenceTextStyle.fontWeight}
980+
fontStyle={styles.referenceTextStyle.fontStyle}
981+
>Powered by RCPCH Digital Growth Charts - {chartsVersion}</ChartTitle>
982+
)}
983+
984+
{logoVariant === 'bottom' && (
985+
<BottomContainer>
986+
<BottomLogoContainer>
987+
<IndividualLogoContainer>
988+
<img src={icon} width={24} height={24} />
989+
</IndividualLogoContainer>
990+
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
991+
<IndividualLogoContainer>
992+
<img src={ukca} width={18} height={18}/>
993+
</IndividualLogoContainer>
994+
</BottomLogoContainer>
995+
</BottomContainer>
996+
)}
997+
966998
</ChartContainer>
967999

9681000
{(showToggle || allowZooming || enableExport || childMeasurements.length > 0) && (

‎src/CentileChart/CentileChart.types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,5 @@ export interface CentileChartProps {
3434
enableExport?: boolean;
3535
exportChartCallback(svg: any): any;
3636
clinicianFocus?: boolean | undefined | null;
37+
logoVariant?: 'top' | 'bottom' | 'legend';
3738
}

‎src/RCPCHChart/RCPCHChart.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Other props are:
2020
- `measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';` _must_ be one of the options provided
2121
- `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
23+
- `logoVariant?: 'top' | 'bottom' | 'legend';` Where to place the logo. Top is the default
2324
- `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**
2425
- `midParentalHeightData?: MidParentalHeightObject | undefined;` an RCPCH object returned from the RCPCH Growth API. Should not be edited or manipulated
2526
- `enableZoom?: boolean;` Allows the user to zoom and pan the charts if set to true. If disabled, hides the buttons associated with this.

‎src/RCPCHChart/RCPCHChart.stories.tsx

+42-1
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,13 @@ export const SDSChartUKWHO: Story = {
5353
},
5454
};
5555

56-
export const CentileChartUKWHOGirlsHeightWithMeasurements: Story = {
56+
export const CentileChartUKWHOGirlsHeightWithMeasurementsLegend: Story = {
5757
args: {
5858
title: 'Patient Name - Hospital Number',
5959
measurementMethod: 'height',
6060
reference: 'uk-who',
6161
sex: 'female',
62+
logoVariant: 'legend',
6263
measurements: { height: twoToEight },
6364
midParentalHeightData: {},
6465
enableZoom: true,
@@ -72,6 +73,46 @@ export const CentileChartUKWHOGirlsHeightWithMeasurements: Story = {
7273
},
7374
};
7475

76+
export const CentileChartPrematureUKWHOGirlsHeightWithMeasurementsLegend: Story = {
77+
args: {
78+
title: 'Patient Name - Hospital Number',
79+
measurementMethod: 'height',
80+
reference: 'uk-who',
81+
sex: 'female',
82+
logoVariant: 'legend',
83+
measurements: { height: prematureGirlOverThreeHeight },
84+
midParentalHeightData: {},
85+
enableZoom: true,
86+
chartType: 'centile',
87+
enableExport: false,
88+
exportChartCallback: () => {},
89+
theme: 'tanner2',
90+
height: 800,
91+
width: 1000,
92+
customThemeStyles: {},
93+
},
94+
};
95+
96+
export const CentileChartPrematureUKWHOGirlsHeightWithMeasurementsBottom: Story = {
97+
args: {
98+
title: 'Patient Name - Hospital Number',
99+
measurementMethod: 'height',
100+
reference: 'uk-who',
101+
sex: 'female',
102+
logoVariant: 'bottom',
103+
measurements: { height: prematureGirlOverThreeHeight },
104+
midParentalHeightData: {},
105+
enableZoom: true,
106+
chartType: 'centile',
107+
enableExport: false,
108+
exportChartCallback: () => {},
109+
theme: 'tanner2',
110+
height: 800,
111+
width: 1000,
112+
customThemeStyles: {},
113+
},
114+
};
115+
75116
export const CentileChartUKWHOGirlsHeight: Story = {
76117
args: {
77118
title: 'Patient Name - Hospital Number',

‎src/RCPCHChart/RCPCHChart.tsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
7272
customThemeStyles,
7373
height,
7474
width,
75+
logoVariant = 'top',
7576
}) => {
7677
clinicianFocus = defineNonStylePropDefaults('clinicianFocus', clinicianFocus);
7778
enableExport = defineNonStylePropDefaults('enableExport', enableExport);
@@ -142,24 +143,25 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
142143
return (
143144
<ErrorBoundary styles={styles}>
144145
<GlobalStyle>
145-
<CentileChart
146-
chartsVersion={VERSION}
147-
reference={reference}
148-
title={title}
149-
subtitle={subtitle}
150-
childMeasurements={measurements[measurementMethod]}
151-
midParentalHeightData={midParentalHeightData || {}}
152-
measurementMethod={measurementMethod}
153-
sex={sex}
154-
enableZoom={enableZoom}
155-
styles={styles}
156-
height={height ?? 800}
157-
width={width ?? 1000}
158-
textScaleFactor={textScaleFactor}
159-
enableExport={enableExport}
160-
exportChartCallback={exportChartCallback}
161-
clinicianFocus={clinicianFocus}
162-
/>
146+
<CentileChart
147+
chartsVersion={VERSION}
148+
reference={reference}
149+
title={title}
150+
subtitle={subtitle}
151+
childMeasurements={ measurements[measurementMethod] }
152+
midParentalHeightData={midParentalHeightData || {}}
153+
measurementMethod={measurementMethod}
154+
sex={sex}
155+
enableZoom={enableZoom}
156+
styles={styles}
157+
height={height ?? 800}
158+
width={width ?? 1000}
159+
textScaleFactor={textScaleFactor}
160+
enableExport={enableExport}
161+
exportChartCallback={exportChartCallback}
162+
clinicianFocus={clinicianFocus}
163+
logoVariant={logoVariant}
164+
/>
163165
</GlobalStyle>
164166
</ErrorBoundary>
165167
);

‎src/RCPCHChart/RCPCHChart.types.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ export interface RCPCHChartProps {
2424
exportChartCallback(svg?: any): any;
2525
clinicianFocus?: boolean | undefined | null;
2626
theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom';
27-
height?: number;
28-
width?: number;
27+
height?: number
28+
width?: number
29+
logoVariant?: 'top' | 'bottom' | 'legend';
2930
customThemeStyles?: {
3031
chartStyle?: ChartStyle;
3132
axisStyle?: AxisStyle;

‎src/SDSChart/SDSChart.tsx

+74-38
Original file line numberDiff line numberDiff line change
@@ -56,24 +56,29 @@ import { referenceText } from '../functions/referenceText';
5656

5757
// style sheets
5858
import { StyledButtonTooltip } from '../SubComponents/StyledButtonTooltip';
59-
60-
const SDSChart: React.FC<SDSChartProps> = ({
61-
chartsVersion,
62-
reference,
63-
title,
64-
subtitle,
65-
measurementMethod,
66-
childMeasurements,
67-
midParentalHeightData,
68-
sex,
69-
enableZoom,
70-
styles,
71-
height,
72-
width,
73-
textScaleFactor,
74-
enableExport,
75-
exportChartCallback,
76-
}) => {
59+
import { BottomContainer } from '../SubComponents/BottomContainer';
60+
import { BottomLogoContainer } from '../SubComponents/BottomLogoContainer';
61+
62+
const SDSChart: React.FC<SDSChartProps> = (
63+
{
64+
chartsVersion,
65+
reference,
66+
title,
67+
subtitle,
68+
measurementMethod,
69+
childMeasurements,
70+
midParentalHeightData,
71+
sex,
72+
enableZoom,
73+
styles,
74+
height,
75+
width,
76+
textScaleFactor,
77+
enableExport,
78+
exportChartCallback,
79+
logoVariant = 'top'
80+
}
81+
) => {
7782
const [userDomains, setUserDomains] = useState(null);
7883

7984
let measurements: Measurement[] = [];
@@ -231,17 +236,23 @@ const SDSChart: React.FC<SDSChartProps> = ({
231236

232237
return (
233238
<MainContainer>
234-
<TopContainer>
235-
<LogoContainer>
236-
<IndividualLogoContainer>
237-
<img src={icon} width={24} height={24} />
238-
</IndividualLogoContainer>
239-
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
240-
<IndividualLogoContainer>
241-
<img src={ukca} width={18} height={18} />
242-
</IndividualLogoContainer>
243-
</LogoContainer>
244-
</TopContainer>
239+
240+
{logoVariant === 'top' && (
241+
<TopContainer>
242+
<LogoContainer>
243+
<IndividualLogoContainer>
244+
<img src={icon} width={24} height={24} />
245+
</IndividualLogoContainer>
246+
<VersionLabel
247+
fontFamily={styles.chartTitle.fontFamily}
248+
>{chartsVersion}</VersionLabel>
249+
<IndividualLogoContainer>
250+
<img src={ukca} width={18} height={18}/>
251+
</IndividualLogoContainer>
252+
</LogoContainer>
253+
254+
</TopContainer>
255+
)}
245256

246257
<ChartContainer>
247258
<TitleContainer>
@@ -563,15 +574,40 @@ const SDSChart: React.FC<SDSChartProps> = ({
563574
color={styles.referenceTextStyle.color}
564575
fontWeight={styles.referenceTextStyle.fontWeight}
565576
fontStyle={styles.referenceTextStyle.fontStyle}
566-
>
567-
{referenceText(reference)}
568-
</ChartTitle>
569-
</ChartContainer>
570-
571-
{(showToggle || enableExport) && (
572-
<ButtonContainer>
573-
{/* Creates the Copy button - note if user has disabled this, must have an empty div to allow the toggle buttons to remain in the center */}
574-
{enableExport ? (
577+
>{referenceText(reference)}</ChartTitle>
578+
579+
{logoVariant === 'legend' && (
580+
<ChartTitle
581+
fontSize={8}
582+
fontFamily={'Arial'}
583+
color={'#000000'}
584+
fontWeight={'200'}
585+
fontStyle='normal'
586+
>Powered by RCPCH Digital Growth Charts - {chartsVersion}</ChartTitle>
587+
)}
588+
589+
{logoVariant === 'bottom' && (
590+
<BottomContainer>
591+
<BottomLogoContainer>
592+
<IndividualLogoContainer>
593+
<img src={icon} width={24} height={24} />
594+
</IndividualLogoContainer>
595+
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
596+
<IndividualLogoContainer>
597+
<img src={ukca} width={18} height={18}/>
598+
</IndividualLogoContainer>
599+
</BottomLogoContainer>
600+
</BottomContainer>
601+
)}
602+
603+
</ChartContainer>
604+
605+
{(showToggle || enableExport) && (
606+
<ButtonContainer>
607+
608+
{/* Creates the Copy button - note if user has disabled this, must have an empty div to allow the toggle buttons to remain in the center */}
609+
{ enableExport ? (
610+
575611
<ShareButtonWrapper>
576612
<StyledButtonTooltip
577613
$backgroundColor={styles.toggleTooltipStyle.backgroundColor}

‎src/SDSChart/SDSChart.types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@ export interface SDSChartProps {
1717
enableExport: boolean;
1818
exportChartCallback(svg: any): any;
1919
clinicianFocus?: boolean | undefined | null;
20+
logoVariant?: 'top' | 'bottom' | 'legend';
2021
}

‎src/SubComponents/BottomContainer.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components';
2+
3+
export const BottomContainer = styled.div`
4+
display: flex;
5+
flex-direction: row;
6+
justify-content: center;
7+
gap: 4px;
8+
`;

‎src/SubComponents/BottomLogoContainer.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from 'styled-components';
2+
3+
export const BottomLogoContainer = styled.div`
4+
display: flex;
5+
flex-direction: row;
6+
align-items: center;
7+
`;

0 commit comments

Comments
 (0)