aspect-ratio

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcpch/digital-growth-charts-react-component-library",
-  "version": "7.0.12",
+  "version": "7.0.13",
   "description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
   "main": "build/index.js",
   "module": "build/esm.index.js",

src/CentileChart/CentileChart.tsx

@@ -12,7 +12,6 @@ import {
     VictoryLabel,
     VictoryArea,
     DomainPropType,
-    VictoryPortal,
 } from 'victory';
 
 // helper functions
@@ -89,6 +88,9 @@ function CentileChart({
     midParentalHeightData,
     enableZoom,
     styles,
+    height,
+    width,
+    textScaleFactor,
     enableExport,
     exportChartCallback,
     clinicianFocus
@@ -277,8 +279,8 @@ function CentileChart({
                 {/* Tooltips are here as it is the parent component. More information of tooltips in centiles below. */}
 
                 <VictoryChart
-                    width={1000}
-                    height={800}
+                    width={width}
+                    height={height}
                     style={styles.chartMisc}
                     domain={computedDomains}
                     containerComponent={
@@ -314,7 +316,7 @@ function CentileChart({
                                     cornerRadius={0}
                                     flyoutHeight={(datum) => {
                                         const numberOfLines = datum.text.length;
-                                        return numberOfLines * 18;    // 18 is the line height
+                                        return numberOfLines * 18 * textScaleFactor;    // 18 is the line height
                                     }}
                                     flyoutStyle={{
                                         ...styles.toolTipFlyout,

src/CentileChart/CentileChart.types.ts

@@ -28,6 +28,9 @@ export interface CentileChartProps {
     midParentalHeightData?: MidParentalHeightObject | null;
     enableZoom?: boolean;
     styles: { [key: string]: any };
+    width?: number;
+    height?: number;
+    textScaleFactor?: number;
     enableExport?: boolean;
     exportChartCallback(svg: any): any;
     clinicianFocus?: boolean | undefined | null;

src/RCPCHChart/RCPCHChart.mdx

@@ -28,6 +28,8 @@ Other props are:
 -   `exportChartCallback(svg?: any): any;` Names the function within the client to return the exported SVG to.
 -   `clinicianFocus?: boolean | undefined | null;` Toggles tooltip advice between those aimed at clinicians and those more appropriate for patients/lay people.
 -   `theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom'`
+-   `height?: number` : defaults to 800px
+-   `width?:  number`: defaults to 1000px
 -   `customThemeStyles?`: discussed below
 
 ### `measurements`

src/RCPCHChart/RCPCHChart.stories.tsx

@@ -60,6 +60,8 @@ export const CentileChart: Story = {
     enableExport: false,
     exportChartCallback: ()=>{},
     theme: 'tanner2',
+    height: 800,
+    width: 1000,
     customThemeStyles: {}
   },
 };

src/RCPCHChart/RCPCHChart.tsx

@@ -1,7 +1,7 @@
 // packages/libraries
 import * as React from 'react';
 
-import { createGlobalStyle } from 'styled-components';
+import { styled } from 'styled-components';
 
 // props and interfaces
 import { RCPCHChartProps } from './RCPCHChart.types';
@@ -27,7 +27,7 @@ import { montserratItalic } from '../fonts/montserrat-italic-b64';
 // const VERSION_LOG = '[VI]Version: {version} - built on {date}[/VI]'; 
 const VERSION = '[VI]v{version}[/VI]'; // uses version injector plugin to Rollup to report package.json version
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = styled.div`
   @font-face {
     font-family: 'Montserrat';
     src: url(${montserratRegular}) format('truetype'),
@@ -70,7 +70,9 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
     exportChartCallback,
     clinicianFocus,
     theme,
-    customThemeStyles
+    customThemeStyles,
+    height,
+    width
 }) => {
 
     clinicianFocus = defineNonStylePropDefaults('clinicianFocus', clinicianFocus);
@@ -96,8 +98,20 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
     // spread styles into individual objects
     const { chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle } = all_styles
 
+    // 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
+    const referenceWidth = 1000;
+    const referenceHeight = 800;
+    const referenceGeometricMean = Math.sqrt(referenceWidth * referenceHeight);
+    let textScaleFactor = 1;
+    if (height != undefined && width != undefined){
+        // Calculate the geometric mean of width and height
+        const geometricMean = Math.sqrt(width * height);
+        // Use the geometric mean to create a scaling factor
+        textScaleFactor = geometricMean / referenceGeometricMean; 
+    }
+
     // make granular styles to pass into charts
-    const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle);
+    const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, textScaleFactor);
 
 
     // uncomment in development
@@ -118,7 +132,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
 
         return (
             <ErrorBoundary styles={styles}>
-                <GlobalStyle />
+                <GlobalStyle>
                 <CentileChart
                     chartsVersion={VERSION}
                     reference={reference}
@@ -130,10 +144,14 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
                     sex={sex}
                     enableZoom={enableZoom}
                     styles={styles}
+                    height={height ?? 800}
+                    width={width ?? 1000}
+                    textScaleFactor={textScaleFactor}
                     enableExport={enableExport}
                     exportChartCallback={exportChartCallback}
                     clinicianFocus={clinicianFocus}
                 />
+                </GlobalStyle>
             </ErrorBoundary>
         );
     } else {
@@ -150,7 +168,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
 
         return (
             <ErrorBoundary styles={styles}>
-                <GlobalStyle />
+                <GlobalStyle>
                 <SDSChart
                     chartsVersion={VERSION}
                     reference={reference}
@@ -162,10 +180,14 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
                     sex={sex}
                     enableZoom={enableZoom}
                     styles={styles}
+                    height={height ?? 800}
+                    width={width ?? 1000}
+                    textScaleFactor={textScaleFactor}
                     enableExport={enableExport}
                     exportChartCallback={exportChartCallback}
                     clinicianFocus={clinicianFocus}
                 />
+                </GlobalStyle>
             </ErrorBoundary>
         );
     }

src/RCPCHChart/RCPCHChart.types.ts

@@ -16,6 +16,8 @@ export interface RCPCHChartProps {
     exportChartCallback(svg?: any): any;
     clinicianFocus?: boolean | undefined | null;
     theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom';
+    height?: number
+    width?: number
     customThemeStyles?: {
         chartStyle?: ChartStyle 
         axisStyle?: AxisStyle

src/SDSChart/SDSChart.tsx

@@ -68,6 +68,9 @@ const SDSChart: React.FC<SDSChartProps> = (
         sex,
         enableZoom,
         styles,
+        height,
+        width,
+        textScaleFactor,
         enableExport,
         exportChartCallback
     }
@@ -257,8 +260,8 @@ const SDSChart: React.FC<SDSChartProps> = (
             {/* It has an animation object and the domains are the thresholds of ages rendered. This is calculated from the child data supplied by the user. */}
             {/* Tooltips are here as it is the parent component. More information of tooltips in centiles below. */}
             <VictoryChart
-                width={1000}
-                height={800}
+                width={width}
+                height={height}
                 style={styles.chartMisc}
                 containerComponent={
                     <VictoryVoronoiContainer
@@ -485,7 +488,12 @@ const SDSChart: React.FC<SDSChartProps> = (
                                 fill: "#FFFFFF"
                             },
                             title: {
-                                fontSize: 12,
+                                fontSize: 12*textScaleFactor,
+                                fontFamily: 'Montserrat',
+                                fontStyle: 'italic'
+                            },
+                            labels: {
+                                fontSize: 10*textScaleFactor,
                                 fontFamily: 'Montserrat',
                                 fontStyle: 'italic'
                             }

src/SDSChart/SDSChart.types.ts

@@ -1,5 +1,4 @@
 import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
-import { ClientStyle } from '../interfaces/ClientStyleObjects';
 import { MidParentalHeightObject } from '../interfaces/MidParentalHeightObject';
 export interface SDSChartProps {
     chartsVersion: string;
@@ -12,6 +11,9 @@ export interface SDSChartProps {
     sex: 'male' | 'female';
     enableZoom: boolean;
     styles: { [key: string]: any };
+    height?: number;
+    width?: number;
+    textScaleFactor?: number;
     enableExport: boolean;
     exportChartCallback(svg: any): any;
     clinicianFocus?: boolean | undefined | null;

src/functions/buildListOfMeasurementMethods.ts

@@ -1,6 +1,4 @@
-import { VictoryLegendProps } from "victory";
 import { ClientMeasurementObject } from "../interfaces/ClientMeasurementObject";
-import { ClientStyle } from "../interfaces/ClientStyleObjects";
 import { nameForMeasurementMethod } from "./nameForMeasurementMethod";
 import { symbolForMeasurementType } from "./symbolForMeasurementType";
 import { VictoryLegendDatum } from "../interfaces/VictoryLegendData";

src/functions/makeAllStyles.ts

@@ -33,6 +33,7 @@ function makeAllStyles(
     centileStyle?: CentileStyle,
     sdsStyle?: SDSStyle,
     measurementStyle?: MeasurementStyle,
+    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
 ) {
 
     let newGridlineStyle = {
@@ -57,14 +58,14 @@ function makeAllStyles(
         chartMisc: {
             background: {
                 fill: chartStyle?.backgroundColour ?? white,
-            },
+            }
         },
         toolTipFlyout: {
             stroke: chartStyle?.tooltipStroke ?? midGrey, // tooltip border colour
             fill: chartStyle?.tooltipBackgroundColour ?? midGrey, // tooltip backgroundcolour
         },
         toolTipMain: {
-            fontSize: chartStyle?.tooltipTextStyle?.size ?? 14,
+            fontSize: (chartStyle?.tooltipTextStyle?.size ?? 14) * (textMultiplier ?? 1),
             fill: chartStyle?.tooltipTextStyle?.colour ?? black,
             fontFamily: chartStyle?.tooltipTextStyle?.name ?? 'Montserrat',
             fontStyle: chartStyle?.tooltipTextStyle?.style ?? 'normal',
@@ -89,7 +90,7 @@ function makeAllStyles(
                 strokeWidth: 1.0,
             },
             axisLabel: {
-                fontSize: axisStyle?.axisLabelTextStyle?.size ?? 10,
+                fontSize: (axisStyle?.axisLabelTextStyle?.size ?? 10) * (textMultiplier ?? 1),
                 padding: 20,
                 fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
@@ -99,7 +100,7 @@ function makeAllStyles(
                 stroke: axisStyle?.tickLabelTextStyle?.colour ?? black,
             },
             tickLabels: {
-                fontSize: axisStyle?.tickLabelTextStyle?.size ?? 8,
+                fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
                 padding: 5,
                 fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
                 color: axisStyle?.tickLabelTextStyle?.colour ?? black,
@@ -112,7 +113,7 @@ function makeAllStyles(
         },
         xTicklabel: {
             fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
-            fontSize: axisStyle?.tickLabelTextStyle?.size ?? 8,
+            fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
             fontFamily: axisStyle?.tickLabelTextStyle?.name ?? 'Arial',
             fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
         },
@@ -122,7 +123,7 @@ function makeAllStyles(
                 strokeWidth: 1.0,
             },
             axisLabel: {
-                fontSize: axisStyle?.axisLabelTextStyle?.size ?? 10,
+                fontSize: (axisStyle?.axisLabelTextStyle?.size ?? 10) * (textMultiplier ?? 1),
                 padding: 25,
                 fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
@@ -132,7 +133,7 @@ function makeAllStyles(
                 stroke: axisStyle?.tickLabelTextStyle?.colour ?? black,
             },
             tickLabels: {
-                fontSize: axisStyle?.tickLabelTextStyle?.size ?? 8,
+                fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
                 padding: 5,
                 fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
@@ -156,7 +157,7 @@ function makeAllStyles(
             },
         },
         delayedPubertyThresholdLabel: {
-            fontSize: 9,
+            fontSize: (9) * (textMultiplier ?? 1),
             fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
             fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
             textAlign: 'start',
@@ -185,7 +186,7 @@ function makeAllStyles(
             },
         },
         centileLabel: {
-            fontSize: 6,
+            fontSize: (6) * (textMultiplier ?? 1),
             fontFamily: 'Montserrat',
             fill: centileStyle?.centileStroke ?? black
         },
@@ -257,7 +258,7 @@ function makeAllStyles(
             }
         },
         eventTextStyle: {
-            size: measurementStyle?.eventTextStyle?.size ?? 14,
+            size: (measurementStyle?.eventTextStyle?.size ?? 14) * (textMultiplier ?? 1),
             name: measurementStyle?.eventTextStyle?.name ?? 'Montserrat',
             colour: measurementStyle?.eventTextStyle?.colour ?? black,
             style: measurementStyle?.eventTextStyle?.style ?? 'normal'