add new custom theme properties for styling

Author: gdfreitas

src/CentileChart/CentileChart.tsx

@@ -23,7 +23,7 @@ export default meta;
 type Story = StoryObj<typeof RCPCHChart>;
 
 const customChartStyle: ChartStyle = {
-  backgroundColour: "tomato"
+  backgroundColour: "tomato",
 }
 
 const customStyles = {
@@ -463,4 +463,107 @@ export const MultipleMeasurementSDSChart: Story = {
     customThemeStyles: {}
   },
 
-}
+}
+
+export const CustomThemeStylesChart: Story = {
+  args: {
+      title: 'Patient Name - Hospital Number',
+      measurementMethod: 'height',
+      reference: 'uk-who',
+      sex: 'female',
+      measurements: {
+          height: twoToEight,
+      },
+      midParentalHeightData: {},
+      enableZoom: true,
+      chartType: 'centile',
+      enableExport: false,
+      exportChartCallback: () => {},
+      theme: 'custom',
+      customThemeStyles: {
+          chartStyle: {
+              titleStyle: {
+                  weight: 600,
+                  colour: '#706A80',
+                  name: 'sans-serif',
+                  size: 16,
+              },
+              subTitleStyle: {
+                  weight: 400,
+                  colour: '#706A80',
+                  name: 'sans-serif',
+                  size: 13,
+              },
+              toggleButtonActiveColour: '#B89F81',
+              toggleButtonInactiveColour: '#e8dbcc',
+              toggleButtonTextStyle: {
+                  colour: 'white',
+                  name: 'sans-serif',
+                  size: 16,
+                  weight: 400,
+              },
+              backgroundColour: '#FAF8F5',
+              tooltipStroke: '#EBE1D3',
+              tooltipBackgroundColour: '#FFFDFD',
+              tooltipTextStyle: {
+                  colour: '#706A80',
+                  name: 'sans-serif',
+                  size: 17,
+              },
+          },
+          axisStyle: {
+              axisStroke: '#EDE7DD',
+              tickLabelTextStyle: {
+                  colour: '#706A80',
+                  size: 12,
+                  weight: 400,
+                  name: 'sans-serif',
+              },
+              axisLabelTextStyle: {
+                  weight: 500,
+                  colour: '#706A80',
+                  name: 'sans-serif',
+                  size: 14,
+              },
+              axisThresholdLabelTextStyle: {
+                  weight: 500,
+                  colour: '#706A80',
+                  name: 'sans-serif',
+                  size: 12.5,
+              },
+              axisThresholdLineStyle: {
+                  colour: '#706A80',
+              },
+          },
+          referenceStyle: {
+              weight: 500,
+              colour: '#706A80',
+              name: 'sans-serif',
+              size: 13,
+          },
+          gridlineStyle: {
+              dashed: true,
+              stroke: '#EDE7DD',
+              strokeWidth: 1,
+              gridlines: true,
+          },
+          centileStyle: {
+              centileStroke: '#B89F81',
+              midParentalAreaFill: '#B89F81',
+              midParentalCentileStroke: '#B89F81',
+              delayedPubertyAreaFill: '#B89F81',
+              sdsStroke: '#B89F81',
+          },
+          measurementStyle: {
+              eventTextStyle: {
+                  size: 16,
+                  name: 'sans-serif',
+                  weight: 500,
+                  colour: '#706A80',
+              },
+              highlightedMeasurementFill: '#B89F81',
+              measurementFill: '#760050',
+          },
+      },
+  },
+};

src/RCPCHChart/RCPCHChart.stories.tsx

@@ -96,7 +96,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
 
 
     // spread styles into individual objects
-    const { chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle } = all_styles
+    const { chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, referenceStyle } = 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;
@@ -111,7 +111,7 @@ const RCPCHChart: React.FC<RCPCHChartProps> = ({
     }
 
     // make granular styles to pass into charts
-    const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, textScaleFactor);
+    const styles = makeAllStyles(chartStyle, axisStyle, gridlineStyle, centileStyle, sdsStyle, measurementStyle, textScaleFactor, referenceStyle);
 
 
     // uncomment in development

src/RCPCHChart/RCPCHChart.tsx

@@ -1,6 +1,6 @@
 import { Measurement } from '../interfaces/RCPCHMeasurementObject';
 import { MidParentalHeightObject } from '../interfaces/MidParentalHeightObject';
-import { AxisStyle, CentileStyle, ChartStyle, GridlineStyle, MeasurementStyle, SDSStyle } from '../interfaces/StyleObjects';
+import { AxisStyle, CentileStyle, ChartStyle, GridlineStyle, MeasurementStyle, ReferenceStyle, SDSStyle } from '../interfaces/StyleObjects';
 import { ClientMeasurementObject } from '../interfaces/ClientMeasurementObject';
 
 export interface RCPCHChartProps {
@@ -25,5 +25,6 @@ export interface RCPCHChartProps {
         measurementStyle?: MeasurementStyle
         centileStyle?: CentileStyle
         sdsStyle?: SDSStyle
+        referenceStyle?: ReferenceStyle
     } // individual styles to override in each theme. If 'custom' theme is selected, 'monochrome' styles are defaulted and styles passed here override them 
 }

src/RCPCHChart/RCPCHChart.types.ts

@@ -559,11 +559,11 @@ const SDSChart: React.FC<SDSChartProps> = (
             </VictoryChart>
 
             <ChartTitle
-                    fontSize={8}
-                    fontFamily={'Arial'}
-                    color={'#000000'}
-                    fontWeight={'200'}
-                    fontStyle='normal'
+                    fontSize={styles.referenceTextStyle.fontSize}
+                    fontFamily={styles.referenceTextStyle.fontFamily}
+                    color={styles.referenceTextStyle.color}
+                    fontWeight={styles.referenceTextStyle.fontWeight}
+                    fontStyle={styles.referenceTextStyle.fontStyle}
                 >{referenceText(reference)}</ChartTitle>
 
         </ChartContainer>

src/SDSChart/SDSChart.tsx

@@ -14,7 +14,7 @@ Most of the properties in each of the interfaces are optionals, as users may not
 This function therefore instantiates defaults where user values have not been provided.
 This creates a styles object that is passed to the chart.
 */
-import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, MeasurementStyle } from '../interfaces/StyleObjects';
+import { AxisStyle, CentileStyle, SDSStyle, ChartStyle, GridlineStyle, MeasurementStyle, ReferenceStyle } from '../interfaces/StyleObjects';
 
 const black = '#000000';
 const white = '#FFFFFF';
@@ -35,7 +35,8 @@ 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
+    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
+    referenceStyle?: ReferenceStyle,
 ) {
 
     let newGridlineStyle = {
@@ -70,17 +71,20 @@ function makeAllStyles(
             fontSize: (chartStyle?.tooltipTextStyle?.size ?? 14) * (textMultiplier ?? 1),
             fill: chartStyle?.tooltipTextStyle?.colour ?? black,
             fontFamily: chartStyle?.tooltipTextStyle?.name ?? 'Montserrat',
+            fontWeight: chartStyle?.tooltipTextStyle?.weight ?? 400,
             fontStyle: chartStyle?.tooltipTextStyle?.style ?? 'normal',
             textAnchor: "start"
         },
         chartTitle: {
-            fontFamily:  chartStyle?.titleStyle?.name ?? 'Arial',
+            fontFamily: chartStyle?.titleStyle?.name ?? 'Arial',
+            fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
             color: chartStyle?.titleStyle?.colour ?? black,
             fontSize: chartStyle?.titleStyle?.size ?? 14,
             fontStyle: chartStyle?.titleStyle?.style === 'italic' ? 'italic' : 'normal',
         },
         chartSubTitle: {
             fontFamily: chartStyle?.subTitleStyle?.name ?? 'Arial', 
+            fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
             color: chartStyle?.subTitleStyle?.colour ?? black,
             fontSize: chartStyle?.subTitleStyle?.size ?? 14,
             fontStyle: chartStyle?.subTitleStyle?.style === 'italic' ? 'italic' : 'normal',
@@ -96,17 +100,19 @@ function makeAllStyles(
                 padding: 20,
                 fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
+                fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
                 fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
             },
             ticks: {
                 stroke: axisStyle?.tickLabelTextStyle?.colour ?? black,
             },
             tickLabels: {
                 fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
-                padding: 5,
+                padding: axisStyle?.tickLabelTextStyle?.padding ?? 5,
                 fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
                 color: axisStyle?.tickLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
+                fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
                 fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
             },
             grid: {
@@ -117,6 +123,7 @@ function makeAllStyles(
             fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
             fontSize: (axisStyle?.tickLabelTextStyle?.size ?? 8) * (textMultiplier ?? 1),
             fontFamily: axisStyle?.tickLabelTextStyle?.name ?? 'Arial',
+            fontWeight: axisStyle?.tickLabelTextStyle?.weight ?? 400,
             fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
         },
         yAxis: {
@@ -129,6 +136,7 @@ function makeAllStyles(
                 padding: 25,
                 fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
+                fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
                 fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
             },
             ticks: {
@@ -139,6 +147,7 @@ function makeAllStyles(
                 padding: 5,
                 fill: axisStyle?.tickLabelTextStyle?.colour ?? black,
                 fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
+                fontWeight: axisStyle?.axisLabelTextStyle?.weight ?? 400,
                 fontStyle: axisStyle?.axisLabelTextStyle?.style ?? 'normal',
             },
             grid: {
@@ -154,19 +163,20 @@ function makeAllStyles(
         },
         delayedPubertyThresholdLine: {
             data: {
-                stroke: charcoal,
+                stroke: axisStyle.axisThresholdLineStyle?.colour ?? charcoal,
                 strokeWidth: 1,
             },
         },
         delayedPubertyThresholdLabel: {
-            fontSize: (9) * (textMultiplier ?? 1),
-            fill: axisStyle?.axisLabelTextStyle?.colour ?? black,
-            fontFamily: axisStyle?.axisLabelTextStyle?.name ?? 'Arial',
+            fontSize: (axisStyle?.axisThresholdLabelTextStyle?.size ?? 9) * (textMultiplier ?? 1),
+            fill: axisStyle?.axisThresholdLabelTextStyle?.colour ?? black,
+            fontFamily: axisStyle?.axisThresholdLabelTextStyle?.name ?? 'Arial',
+            fontWeight: axisStyle?.axisThresholdLabelTextStyle?.weight ?? 400,
             textAlign: 'start',
         },
         nondisjunctionThresholdLine: {
             data: {
-                stroke: charcoal,
+                stroke: axisStyle.axisThresholdLineStyle?.colour ?? charcoal,
                 strokeWidth: 1,
             },
         },
@@ -194,9 +204,10 @@ function makeAllStyles(
             },
         },
         centileLabel: {
-            fontSize: (6) * (textMultiplier ?? 1),
-            fontFamily: 'Montserrat',
-            fill: centileStyle?.centileStroke ?? black
+            fontSize: (centileStyle.centileTextStyle?.size ?? 6) * (textMultiplier ?? 1),
+            fontFamily: centileStyle.centileTextStyle?.name ?? 'Montserrat',
+            fontWeight: centileStyle.centileTextStyle?.weight ?? 400,
+            fill: centileStyle?.centileStroke ?? black,
         },
         heightSDS: {
             data: {
@@ -275,11 +286,19 @@ function makeAllStyles(
             activeColour: chartStyle?.toggleButtonActiveColour ?? black,
             inactiveColour: chartStyle?.toggleButtonInactiveColour ?? midGrey,
             fontFamily: chartStyle?.toggleButtonTextStyle?.name ?? 'Arial',
+            fontWeight: chartStyle?.toggleButtonTextStyle?.weight ?? 400,
             color: chartStyle?.toggleButtonTextStyle?.colour ?? white,
             fontSize: chartStyle?.toggleButtonTextStyle?.size ?? 14,
             fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal',
             margin: 0
         },
+        referenceTextStyle: {
+            fontSize: referenceStyle?.size ?? 8,
+            fontFamily: referenceStyle?.name ?? 'Arial',
+            color: referenceStyle?.colour ?? black,
+            fontWeight: referenceStyle?.weight ?? 200,
+            fontStyle: referenceStyle?.style ?? 'normal',
+        },
     };
 }
 

src/functions/makeAllStyles.ts

@@ -4,14 +4,23 @@ import { Tanner2AxisStyles, Tanner2ChartStyles, Tanner2GridlineStyles, Tanner2Ce
 import { Tanner3AxisStyles, Tanner3ChartStyles, Tanner3GridlineStyles, Tanner3CentileStyles, Tanner3MeasurementStyles, Tanner3SDSStyles } from '../testParameters/styles/tanner3Styles';
 import { traditionalBoyAxisStyles, traditionalBoyChartStyles, traditionalBoyGridlineStyles, traditionalBoyCentileStyles, traditionalBoyMeasurementStyles, traditionalBoySDSStyles } from '../testParameters/styles/traditionalBoysStyles';
 import { traditionalGirlAxisStyles, traditionalGirlChartStyles, traditionalGirlGridlineStyles, traditionalGirlCentileStyles, traditionalGirlMeasurementStyles, traditionalGirlSDSStyles } from '../testParameters/styles/traditionalGirlsStyles';
-import { ChartStyle, AxisStyle, GridlineStyle, CentileStyle, SDSStyle, MeasurementStyle } from '../interfaces/StyleObjects';
+import { ChartStyle, AxisStyle, GridlineStyle, CentileStyle, SDSStyle, MeasurementStyle, ReferenceStyle } from '../interfaces/StyleObjects';
+
+const defaultReferenceStyle: ReferenceStyle = {
+    colour: '#000000',
+    name: 'Arial',
+    size: 8,
+    style: 'normal',
+    weight: 200,
+};
 
 export const stylesForTheme = (theme: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom', sex: 'male' | 'female')=>{
     // Returns the styles objects for a theme. If custom is selected, monochrome is selected to be customized later
-    let chartStyle:ChartStyle, axisStyle:AxisStyle, gridlineStyle:GridlineStyle, centileStyle:CentileStyle, sdsStyle:SDSStyle, measurementStyle:MeasurementStyle;
+    let chartStyle:ChartStyle, axisStyle:AxisStyle, gridlineStyle:GridlineStyle, centileStyle:CentileStyle, sdsStyle:SDSStyle, measurementStyle:MeasurementStyle, referenceStyle:ReferenceStyle = defaultReferenceStyle;
 
     switch (theme) {
-        case 'monochrome' || 'custom':
+        case 'monochrome':
+        case 'custom':
             chartStyle = monochromeChartStyles
             axisStyle = monochromeAxisStyles
             gridlineStyle = monochromeGridlineStyle
@@ -65,6 +74,6 @@ export const stylesForTheme = (theme: 'monochrome' | 'traditional' | 'tanner1' |
             throw new Error("Please select a valid theme or select custom.");
     }
 
-    return { chartStyle, axisStyle,gridlineStyle,centileStyle,sdsStyle,measurementStyle };
+    return { chartStyle, axisStyle,gridlineStyle,centileStyle,sdsStyle,measurementStyle,referenceStyle };
 
 }