diff --git a/package-lock.json b/package-lock.json
index 29cc287..7b014b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
"packages": {
"": {
"name": "@rcpch/digital-growth-charts-react-component-library",
- "version": "7.0.12",
+ "version": "7.0.10",
"license": "AGPL-3.0-or-later",
"dependencies": {
"sass": "1.70.0",
@@ -146,12 +146,12 @@
}
},
"node_modules/@babel/generator": {
- "version": "7.25.5",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
- "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
+ "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
"dev": true,
"dependencies": {
- "@babel/types": "^7.25.4",
+ "@babel/types": "^7.25.6",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1"
@@ -422,13 +422,13 @@
}
},
"node_modules/@babel/helpers": {
- "version": "7.25.0",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
- "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
+ "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
"dev": true,
"dependencies": {
"@babel/template": "^7.25.0",
- "@babel/types": "^7.25.0"
+ "@babel/types": "^7.25.6"
},
"engines": {
"node": ">=6.9.0"
@@ -521,12 +521,12 @@
}
},
"node_modules/@babel/parser": {
- "version": "7.25.4",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
- "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+ "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
"dev": true,
"dependencies": {
- "@babel/types": "^7.25.4"
+ "@babel/types": "^7.25.6"
},
"bin": {
"parser": "bin/babel-parser.js"
@@ -717,12 +717,12 @@
}
},
"node_modules/@babel/plugin-syntax-import-assertions": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.7.tgz",
- "integrity": "sha512-Ec3NRUMoi8gskrkBe3fNmEQfxDvY8bgfQpz6jlk/41kX9eUjvpyqWU7PBP/pLAvMaSQjbMNKJmvX57jP+M6bPg==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
+ "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
"dev": true,
"dependencies": {
- "@babel/helper-plugin-utils": "^7.24.7"
+ "@babel/helper-plugin-utils": "^7.24.8"
},
"engines": {
"node": ">=6.9.0"
@@ -732,12 +732,12 @@
}
},
"node_modules/@babel/plugin-syntax-import-attributes": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.7.tgz",
- "integrity": "sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.6.tgz",
+ "integrity": "sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==",
"dev": true,
"dependencies": {
- "@babel/helper-plugin-utils": "^7.24.7"
+ "@babel/helper-plugin-utils": "^7.24.8"
},
"engines": {
"node": ">=6.9.0"
@@ -2140,16 +2140,16 @@
}
},
"node_modules/@babel/traverse": {
- "version": "7.25.4",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
- "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
+ "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.24.7",
- "@babel/generator": "^7.25.4",
- "@babel/parser": "^7.25.4",
+ "@babel/generator": "^7.25.6",
+ "@babel/parser": "^7.25.6",
"@babel/template": "^7.25.0",
- "@babel/types": "^7.25.4",
+ "@babel/types": "^7.25.6",
"debug": "^4.3.1",
"globals": "^11.1.0"
},
@@ -2158,9 +2158,9 @@
}
},
"node_modules/@babel/types": {
- "version": "7.25.4",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
- "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
+ "version": "7.25.6",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+ "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
"dev": true,
"dependencies": {
"@babel/helper-string-parser": "^7.24.8",
@@ -4603,9 +4603,9 @@
}
},
"node_modules/@storybook/core/node_modules/@types/node": {
- "version": "18.19.46",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.46.tgz",
- "integrity": "sha512-vnRgMS7W6cKa1/0G3/DTtQYpVrZ8c0Xm6UkLaVFrb9jtcVC3okokW09Ki1Qdrj9ISokszD69nY4WDLRlvHlhAA==",
+ "version": "18.19.49",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.49.tgz",
+ "integrity": "sha512-ALCeIR6n0nQ7j0FUF1ycOhrp6+XutJWqEu/vtdEqXFUQwkBfgUA5cEg3ZNmjWGF/ZYA/FcF9QMkL55Ar0O6UrA==",
"dev": true,
"dependencies": {
"undici-types": "~5.26.4"
@@ -7548,9 +7548,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001653",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
- "integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==",
+ "version": "1.0.30001655",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz",
+ "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==",
"dev": true,
"funding": [
{
@@ -9857,9 +9857,9 @@
"dev": true
},
"node_modules/flow-parser": {
- "version": "0.244.0",
- "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.244.0.tgz",
- "integrity": "sha512-Dkc88m5k8bx1VvHTO9HEJ7tvMcSb3Zvcv1PY4OHK7pHdtdY2aUjhmPy6vpjVJ2uUUOIybRlb91sXE8g4doChtA==",
+ "version": "0.245.1",
+ "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.245.1.tgz",
+ "integrity": "sha512-KaVIjRdCY+APtxQijfV1c7GN1bofByIlR7E6omQLW0sghkA8hh8uufQOqTf3oAAVTExsSLafmdL/QwyvE/gdEg==",
"dev": true,
"engines": {
"node": ">=0.4.0"
@@ -14744,9 +14744,9 @@
}
},
"node_modules/picocolors": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
- "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+ "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
},
"node_modules/picomatch": {
"version": "2.3.1",
diff --git a/package.json b/package.json
index 10f47b2..001a707 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
"@rollup/plugin-node-resolve": "15.2.3",
"@rollup/plugin-terser": "0.4.4",
"@rollup/plugin-typescript": "11.1.6",
- "@rollup/plugin-url": "8.0.2",
"@storybook/addon-essentials": "^8.0.4",
"@storybook/addon-interactions": "^8.0.4",
"@storybook/addon-links": "^8.0.4",
diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx
index ecc48bb..8838c0e 100644
--- a/src/CentileChart/CentileChart.tsx
+++ b/src/CentileChart/CentileChart.tsx
@@ -617,6 +617,375 @@ function CentileChart({
name={`puberty-${dataArray[0].x}`}
style={styles.delayedPubertyThresholdLine}
data={dataArray}
+ labelComponent={
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
+ }
+ />
+ );
+ } else {
+ return null;
+ }
+ })
+ }
+
+ {
+ // nondisjunction lines uk90->uk-who->uk-who
+ nondisjunctionThresholds !== null &&
+ nondisjunctionThresholds.map((dataArray) => {
+ if (dataArray[0].x > domains.x[0] && dataArray[1].x < domains.x[1]) {
+ return (
+
{referenceText(reference)}
+ fontSize={styles.referenceTextStyle.fontSize}
+ fontFamily={styles.referenceTextStyle.fontFamily}
+ color={styles.referenceTextStyle.color}
+ fontWeight={styles.referenceTextStyle.fontWeight}
+ fontStyle={styles.referenceTextStyle.fontStyle}
+ >
+ {referenceText(reference)}
+
{(showToggle || allowZooming || enableExport || childMeasurements.length > 0) && (
diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx
index bf11717..9843be4 100644
--- a/src/RCPCHChart/RCPCHChart.stories.tsx
+++ b/src/RCPCHChart/RCPCHChart.stories.tsx
@@ -123,4 +123,104 @@ export const MultipleMeasurementSDSChart: Story = {
customThemeStyles: {}
},
-}
\ No newline at end of file
+}
+
+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: '#B89F81',
+ name: 'sans-serif',
+ size: 14,
+ },
+ },
+ 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',
+ },
+ },
+ },
+};
\ No newline at end of file
diff --git a/src/RCPCHChart/RCPCHChart.types.ts b/src/RCPCHChart/RCPCHChart.types.ts
index 4ed252b..2b14464 100644
--- a/src/RCPCHChart/RCPCHChart.types.ts
+++ b/src/RCPCHChart/RCPCHChart.types.ts
@@ -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
}
\ No newline at end of file
diff --git a/src/SDSChart/SDSChart.tsx b/src/SDSChart/SDSChart.tsx
index 48bfb5e..0f84369 100644
--- a/src/SDSChart/SDSChart.tsx
+++ b/src/SDSChart/SDSChart.tsx
@@ -559,12 +559,14 @@ const SDSChart: React.FC = (
{referenceText(reference)}
+ fontSize={styles.referenceTextStyle.fontSize}
+ fontFamily={styles.referenceTextStyle.fontFamily}
+ color={styles.referenceTextStyle.color}
+ fontWeight={styles.referenceTextStyle.fontWeight}
+ fontStyle={styles.referenceTextStyle.fontStyle}
+ >
+ {referenceText(reference)}
+
diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts
index 86f2665..8493ea3 100644
--- a/src/functions/makeAllStyles.ts
+++ b/src/functions/makeAllStyles.ts
@@ -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,6 +35,7 @@ function makeAllStyles(
centileStyle?: CentileStyle,
sdsStyle?: SDSStyle,
measurementStyle?: MeasurementStyle,
+ referenceStyle?: ReferenceStyle,
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
) {
@@ -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 ?? 'Montserrat',
+ 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',
+ fontFamily: chartStyle?.subTitleStyle?.name ?? 'Montserrat',
+ fontWeight: chartStyle?.subTitleStyle?.weight ?? 700,
color: chartStyle?.subTitleStyle?.colour ?? black,
fontSize: chartStyle?.subTitleStyle?.size ?? 14,
fontStyle: chartStyle?.subTitleStyle?.style === 'italic' ? 'italic' : 'normal',
@@ -96,6 +100,7 @@ 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: {
@@ -107,6 +112,7 @@ function makeAllStyles(
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: {
@@ -159,9 +168,10 @@ function makeAllStyles(
},
},
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: {
@@ -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: {
@@ -278,8 +289,16 @@ function makeAllStyles(
color: chartStyle?.toggleButtonTextStyle?.colour ?? white,
fontSize: chartStyle?.toggleButtonTextStyle?.size ?? 14,
fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal',
+ fontWeight: chartStyle?.toggleButtonTextStyle?.weight ?? 400,
margin: 0
},
+ referenceTextStyle: {
+ fontSize: referenceStyle?.size ?? 8,
+ fontFamily: referenceStyle?.name ?? 'Arial',
+ color: referenceStyle?.colour ?? black,
+ fontWeight: referenceStyle?.weight ?? 200,
+ fontStyle: referenceStyle?.style ?? 'normal',
+ },
};
}
diff --git a/src/functions/stylesForTheme.ts b/src/functions/stylesForTheme.ts
index 6ba2682..0b69993 100644
--- a/src/functions/stylesForTheme.ts
+++ b/src/functions/stylesForTheme.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 };
}
\ No newline at end of file
diff --git a/src/interfaces/StyleObjects.ts b/src/interfaces/StyleObjects.ts
index 0ab3355..08367e8 100644
--- a/src/interfaces/StyleObjects.ts
+++ b/src/interfaces/StyleObjects.ts
@@ -24,6 +24,7 @@ export interface CentileStyle {
delayedPubertyAreaFill?: string; // delayed puberty area colour
midParentalCentileStroke?: string; // Midparental height centile line colour
midParentalAreaFill?: string; // Midparental height area colour
+ centileTextStyle?: Omit | undefined;
}
export interface SDSStyle {
@@ -40,13 +41,21 @@ export interface GridlineStyle {
}
export interface AxisStyle {
axisStroke?: string; // Axis colour
+ axisThresholdLabelTextStyle?: TextStyle | undefined; // Axis label text: : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
axisLabelTextStyle?: TextStyle | undefined; // Axis label text: : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
- tickLabelTextStyle?: TextStyle | undefined; // Tick label text : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
+ tickLabelTextStyle?: TickLabelTextStyle | undefined; // Tick label text : includes fontFamily, fontSize, colour, weight (regular/bold/italic)
}
+export interface TickLabelTextStyle extends TextStyle {
+ padding?: number;
+}
+
+export interface ReferenceStyle extends TextStyle {}
export interface TextStyle {
name?: string;
colour?: string;
size?: number;
- style?: 'bold' | 'italic' | 'normal';
+ style?: 'italic' | 'normal';
+ weight?: number;
}
+