Skip to content

Commit cdfcead

Browse files
gdfreitasgdfreitas
committed
add support for different logo variants
1 parent 22f81ac commit cdfcead

10 files changed

+111
-31
lines changed

‎src/CentileChart/CentileChart.tsx

+44-15
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(
@@ -94,7 +96,8 @@ function CentileChart({
9496
textScaleFactor,
9597
enableExport,
9698
exportChartCallback,
97-
clinicianFocus
99+
clinicianFocus,
100+
logoVariant
98101
}: CentileChartProps) {
99102
const [userDomains, setUserDomains] = useState(null);
100103

@@ -259,20 +262,22 @@ function CentileChart({
259262

260263
return (
261264
<MainContainer>
262-
<TopContainer>
263-
<LogoContainer>
264-
<IndividualLogoContainer>
265-
<img src={icon} width={24} height={24} />
266-
</IndividualLogoContainer>
267-
<VersionLabel
268-
fontFamily={styles.chartTitle.fontFamily}
269-
>{chartsVersion}</VersionLabel>
270-
<IndividualLogoContainer>
271-
<img src={ukca} width={18} height={18}/>
272-
</IndividualLogoContainer>
273-
</LogoContainer>
274-
275-
</TopContainer>
265+
{logoVariant === 'top' && (
266+
<TopContainer>
267+
<LogoContainer>
268+
<IndividualLogoContainer>
269+
<img src={icon} width={24} height={24} />
270+
</IndividualLogoContainer>
271+
<VersionLabel
272+
fontFamily={styles.chartTitle.fontFamily}
273+
>{chartsVersion}</VersionLabel>
274+
<IndividualLogoContainer>
275+
<img src={ukca} width={18} height={18}/>
276+
</IndividualLogoContainer>
277+
</LogoContainer>
278+
279+
</TopContainer>
280+
)}
276281

277282
<ChartContainer>
278283

@@ -898,6 +903,30 @@ function CentileChart({
898903
fontWeight={'200'}
899904
fontStyle='normal'
900905
>{referenceText(reference)}</ChartTitle>
906+
907+
{logoVariant === 'legend' && (
908+
<ChartTitle
909+
fontSize={8}
910+
fontFamily={'Arial'}
911+
color={'#000000'}
912+
fontWeight={'200'}
913+
fontStyle='normal'
914+
>Powered by RCPCH - {chartsVersion}</ChartTitle>
915+
)}
916+
917+
{logoVariant === 'bottom' && (
918+
<BottomContainer>
919+
<BottomLogoContainer>
920+
<IndividualLogoContainer>
921+
<img src={icon} width={24} height={24} />
922+
</IndividualLogoContainer>
923+
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
924+
<IndividualLogoContainer>
925+
<img src={ukca} width={18} height={18}/>
926+
</IndividualLogoContainer>
927+
</BottomLogoContainer>
928+
</BottomContainer>
929+
)}
901930
</ChartContainer>
902931

903932
{(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';` _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

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const CentileChartUKWHOGirlsHeightWithMeasurements: Story = {
5959
measurementMethod: 'height',
6060
reference: 'uk-who',
6161
sex: 'female',
62+
logoVariant: 'legend',
6263
measurements: {height: twoToEight},
6364
midParentalHeightData: {},
6465
enableZoom: true,

‎src/RCPCHChart/RCPCHChart.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
7272
theme,
7373
customThemeStyles,
7474
height,
75-
width
75+
width,
76+
logoVariant = 'top',
7677
}) => {
7778

7879
clinicianFocus = defineNonStylePropDefaults('clinicianFocus', clinicianFocus);
@@ -152,6 +153,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
152153
enableExport={enableExport}
153154
exportChartCallback={exportChartCallback}
154155
clinicianFocus={clinicianFocus}
156+
logoVariant={logoVariant}
155157
/>
156158
</GlobalStyle>
157159
</ErrorBoundary>

‎src/RCPCHChart/RCPCHChart.types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface RCPCHChartProps {
1818
theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom';
1919
height?: number
2020
width?: number
21+
logoVariant?: 'top' | 'bottom' | 'legend';
2122
customThemeStyles?: {
2223
chartStyle?: ChartStyle
2324
axisStyle?: AxisStyle

‎src/SDSChart/SDSChart.tsx

+44-15
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ import { referenceText } from '../functions/referenceText';
5555

5656
// style sheets
5757
import { StyledButtonTooltip } from '../SubComponents/StyledButtonTooltip';
58+
import { BottomContainer } from '../SubComponents/BottomContainer';
59+
import { BottomLogoContainer } from '../SubComponents/BottomLogoContainer';
5860

5961
const SDSChart: React.FC<SDSChartProps> = (
6062
{
@@ -72,7 +74,8 @@ const SDSChart: React.FC<SDSChartProps> = (
7274
width,
7375
textScaleFactor,
7476
enableExport,
75-
exportChartCallback
77+
exportChartCallback,
78+
logoVariant = 'top'
7679
}
7780
) => {
7881
const [userDomains, setUserDomains] = useState(null);
@@ -234,20 +237,22 @@ const SDSChart: React.FC<SDSChartProps> = (
234237

235238
return (
236239
<MainContainer>
237-
<TopContainer>
238-
<LogoContainer>
239-
<IndividualLogoContainer>
240-
<img src={icon} width={24} height={24} />
241-
</IndividualLogoContainer>
242-
<VersionLabel
243-
fontFamily={styles.chartTitle.fontFamily}
244-
>{chartsVersion}</VersionLabel>
245-
<IndividualLogoContainer>
246-
<img src={ukca} width={18} height={18}/>
247-
</IndividualLogoContainer>
248-
</LogoContainer>
249-
250-
</TopContainer>
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+
)}
251256

252257
<ChartContainer>
253258

@@ -565,6 +570,30 @@ const SDSChart: React.FC<SDSChartProps> = (
565570
fontWeight={'200'}
566571
fontStyle='normal'
567572
>{referenceText(reference)}</ChartTitle>
573+
574+
{logoVariant === 'legend' && (
575+
<ChartTitle
576+
fontSize={8}
577+
fontFamily={'Arial'}
578+
color={'#000000'}
579+
fontWeight={'200'}
580+
fontStyle='normal'
581+
>Powered by RCPCH - {chartsVersion}</ChartTitle>
582+
)}
583+
584+
{logoVariant === 'bottom' && (
585+
<BottomContainer>
586+
<BottomLogoContainer>
587+
<IndividualLogoContainer>
588+
<img src={icon} width={24} height={24} />
589+
</IndividualLogoContainer>
590+
<VersionLabel fontFamily={styles.chartTitle.fontFamily}>{chartsVersion}</VersionLabel>
591+
<IndividualLogoContainer>
592+
<img src={ukca} width={18} height={18}/>
593+
</IndividualLogoContainer>
594+
</BottomLogoContainer>
595+
</BottomContainer>
596+
)}
568597

569598
</ChartContainer>
570599

‎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)