Skip to content

Commit

Permalink
Merge pull request #100 from rcpch/centile-labels-prop
Browse files Browse the repository at this point in the history 
Centile labels prop
  • Loading branch information
@eatyourpeas
eatyourpeas authored Apr 1, 2024
2 parents 7fb6b39 + a3310b3 commit 96b24c5
Show file tree
Hide file tree
Showing 10 changed files with 300 additions and 435 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rcpchgrowth-react",
"version": "4.1.3",
"version": "5.0.0",
"private": false,
"license": "MIT",
"repository": {
Expand All @@ -9,7 +9,7 @@
},
"homepage": "http://rcpch.github.io/digital-growth-charts-react-client",
"dependencies": {
"@rcpch/digital-growth-charts-react-component-library": "6.1.15",
"@rcpch/digital-growth-charts-react-component-library": "^7.0.0",
"axios": "^0.21.1",
"moment": "^2.29.1",
"react": "^17.0.2",
Expand All @@ -27,7 +27,7 @@
"semantic-ui-less": "^2.4.1"
},
"scripts": {
"start": "craco start",
"start": "export NODE_OPTIONS=--openssl-legacy-provider && craco start",
"debug": "craco start --verbose",
"build": "craco build",
"eject": "craco eject",
Expand Down
62 changes: 9 additions & 53 deletions src/api/Chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import { canvasFromSVG } from "../functions/canvasFromSVG";

function ChartData(props) {
const isLoading = props.isLoading;
const titles = setTitle(props);

let measurements = props.measurementsArray; // if SDS charts, the array already is in the structure { measurementMethod: [measurementsArray]}
if (props.chartType === "centile") {
// as of 7.0.0 the results now need to be presented as an object where the key is the measurement method
measurements = { [props.measurementMethod]: props.measurementsArray };
}

return (
<div>
Expand All @@ -18,16 +23,10 @@ function ChartData(props) {
reference={props.reference}
measurementMethod={props.measurementMethod}
sex={props.sex}
title={titles.title}
subtitle={titles.subtitle}
measurementsArray={props.measurementsArray} // this is the plottable child data
title={"Name - Hospital Number"}
measurements={measurements} // this is the plottable child data: NOTE IN Charts 7.0.0 this has changed
midParentalHeightData={props.midParentalHeightData}
chartStyle={props.chartStyle}
measurementStyle={props.measurementStyle}
centileStyle={props.centileStyle}
sdsStyle={props?.sdsStyle}
gridlineStyle={props.gridlineStyle}
axisStyle={props.axisStyle}
theme={props.theme}
enableZoom
chartType={props.chartType}
enableExport={true}
Expand All @@ -44,47 +43,4 @@ function exportChartCallback(svg) {
});
}

function setTitle(props) {
// set the title of the chart
let title = "";
let subTitle = "";
if (props.reference === "uk-who") {
title = "UK-WHO";
} else if (props.reference === "turner") {
title = "Turner's Syndrome";
} else if (props.reference === "trisomy-21") {
title = "Trisomy 21 (Down's Syndrome)";
}

let sexText = "";
let measurementText = "";
if (props.sex === "male") {
sexText = "Boys";
} else {
sexText = "Girls";
}

switch (props.measurementMethod) {
case "height":
measurementText = "Height / Length";
break;
case "weight":
measurementText = "Weight";
break;
case "bmi":
measurementText = "Body Mass Index";
break;
case "ofc":
measurementText = "Head Circumference";
break;
default:
measurementText = "";
break;
}

subTitle = measurementText + " - " + sexText;

return { subtitle: subTitle, title: title };
}

export default ChartData;
123 changes: 43 additions & 80 deletions src/components/MeasurementSegment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
import { useState, useEffect, useMemo, Fragment } from "react";

//themes
import RCPCHTheme1 from "../components/chartThemes/rcpchTheme1";
import RCPCHTheme2 from "../components/chartThemes/rcpchTheme2";
import RCPCHTheme3 from "../components/chartThemes/rcpchTheme3";
import RCPCHThemeMonochrome from "../components/chartThemes/rcpchThemeMonochrome";
import RCPCHThemeTraditionalBoy from "../components/chartThemes/RCPCHThemeTraditionalBoy";
import RCPCHThemeTraditionalGirl from "../components/chartThemes/RCPCHThemeTraditionalGirl";
// import RCPCHTheme1 from "../components/chartThemes/rcpchTheme1";
// import RCPCHTheme2 from "../components/chartThemes/rcpchTheme2";
// import RCPCHTheme3 from "../components/chartThemes/rcpchTheme3";
// import RCPCHThemeMonochrome from "../components/chartThemes/rcpchThemeMonochrome";
// import RCPCHThemeTraditionalBoy from "../components/chartThemes/RCPCHThemeTraditionalBoy";
// import RCPCHThemeTraditionalGirl from "../components/chartThemes/RCPCHThemeTraditionalGirl";

// Semantic UI React
import {
Expand All @@ -31,19 +31,19 @@ import FictionalChildForm from "./FictionalChildForm";
import useRcpchApi from "../hooks/useRcpchApi";
import useGlobalState from "../hooks/useGlobalState";

const defaultTheme = RCPCHThemeMonochrome;
// const defaultTheme = RCPCHThemeMonochrome;

function MeasurementSegment() {
const [chartStyle, setChartSyle] = useState(defaultTheme.chart);
const [axisStyle, setAxisStyle] = useState(defaultTheme.axes);
const [centileStyle, setCentileStyle] = useState(defaultTheme.centiles);
const [sdsStyle, setSDSStyle] = useState(defaultTheme.sds);
// const [chartStyle, setChartSyle] = useState(defaultTheme.chart);
// const [axisStyle, setAxisStyle] = useState(defaultTheme.axes);
// const [centileStyle, setCentileStyle] = useState(defaultTheme.centiles);
// const [sdsStyle, setSDSStyle] = useState(defaultTheme.sds);
const [centile, setCentile] = useState(true);
const [measurementStyle, setMeasurementStyle] = useState(
defaultTheme.measurements
);
// const [measurementStyle, setMeasurementStyle] = useState(
// defaultTheme.measurements
// );
const [theme, setTheme] = useState({
value: "tanner4",
value: "monochrome",
text: "Monochrome",
});

Expand Down Expand Up @@ -112,26 +112,26 @@ function MeasurementSegment() {
}
}, [errors, apiErrors, clearApiErrors, updateGlobalState]);

useEffect(() => {
let selectedTheme = RCPCHThemeMonochrome;
if (theme.value === "trad") {
selectedTheme =
sex === "male" ? RCPCHThemeTraditionalBoy : RCPCHThemeTraditionalGirl;
}
if (theme.value === "tanner1") {
selectedTheme = RCPCHTheme1;
}
if (theme.value === "tanner2") {
selectedTheme = RCPCHTheme2;
}
if (theme.value === "tanner3") {
selectedTheme = RCPCHTheme3;
}
setCentileStyle(selectedTheme.centiles);
setChartSyle(selectedTheme.chart);
setMeasurementStyle(selectedTheme.measurements);
setAxisStyle(selectedTheme.axes);
}, [sex, theme.value]);
// useEffect(() => {
// let selectedTheme = RCPCHThemeMonochrome;
// if (theme.value === "trad") {
// selectedTheme =
// sex === "male" ? RCPCHThemeTraditionalBoy : RCPCHThemeTraditionalGirl;
// }
// if (theme.value === "tanner1") {
// selectedTheme = RCPCHTheme1;
// }
// if (theme.value === "tanner2") {
// selectedTheme = RCPCHTheme2;
// }
// if (theme.value === "tanner3") {
// selectedTheme = RCPCHTheme3;
// }
// setCentileStyle(selectedTheme.centiles);
// setChartSyle(selectedTheme.chart);
// setMeasurementStyle(selectedTheme.measurements);
// setAxisStyle(selectedTheme.axes);
// }, [sex, theme.value]);

useEffect(() => {
if (results[reference][measurementMethod].length > 0) {
Expand Down Expand Up @@ -195,39 +195,11 @@ function MeasurementSegment() {
};

const handleChangeTheme = (event, { value }) => {
let selectedTheme;
let text;

if (value === "trad") {
if (sex === "male") {
selectedTheme = RCPCHThemeTraditionalBoy;
} else {
selectedTheme = RCPCHThemeTraditionalGirl;
}
text = "Traditional";
}
if (value === "tanner1") {
selectedTheme = RCPCHTheme1;
text = "Tanner 1";
}
if (value === "tanner2") {
selectedTheme = RCPCHTheme2;
text = "Tanner 2";
}
if (value === "tanner3") {
selectedTheme = RCPCHTheme3;
text = "Tanner 3";
}
if (value === "monochrome") {
selectedTheme = RCPCHThemeMonochrome;
text = "Monochrome";
}
// callback from select theme
// matches themeOptions by key and returns text to dropdown and value to chart for rerender in new theme
const selectedOption = themeOptions.find((o) => o.key === value);
const text = selectedOption["text"];

setCentileStyle(selectedTheme.centiles);
setSDSStyle(selectedTheme?.sds);
setChartSyle(selectedTheme.chart);
setMeasurementStyle(selectedTheme.measurements);
setAxisStyle(selectedTheme.axes);
setTheme({ value: value, text: text });
};

Expand Down Expand Up @@ -320,11 +292,7 @@ function MeasurementSegment() {
measurementMethod={details.measurementName}
measurementsArray={results[reference][details.measurementName]}
midParentalHeightData={results[reference]["midParentalHeights"]}
chartStyle={chartStyle}
axisStyle={axisStyle}
gridlineStyle={defaultTheme.gridlines}
centileStyle={centileStyle}
measurementStyle={measurementStyle}
theme={theme.value}
isLoading={isLoading}
chartType="centile"
clinicianFocus={clinician}
Expand All @@ -339,12 +307,7 @@ function MeasurementSegment() {
measurementMethod={details.measurementName}
measurementsArray={results[reference]}
midParentalHeightData={results[reference]["midParentalHeights"]}
chartStyle={chartStyle}
axisStyle={axisStyle}
gridlineStyle={defaultTheme.gridlines}
centileStyle={centileStyle}
sdsStyle={sdsStyle}
measurementStyle={measurementStyle}
theme={theme.value}
isLoading={isLoading}
chartType="sds"
/>
Expand Down Expand Up @@ -380,7 +343,7 @@ function MeasurementSegment() {
updateGlobalState={updateGlobalState}
className="measurement-form"
handleUtilitiesFormDataSubmit={utilitiesFormDataSubmit}
themeColour={centileStyle.centileStroke}
// themeColour={centileStyle.centileStroke}
/>
</Tab.Pane>
),
Expand Down Expand Up @@ -537,7 +500,7 @@ const panesBlueprint = [

const themeOptions = [
{ key: "monochrome", value: "monochrome", text: "Monochrome" },
{ key: "trad", value: "trad", text: "Traditional" },
{ key: "traditional", value: "traditional", text: "Traditional" },
{ key: "tanner1", value: "tanner1", text: "Tanner 1" },
{ key: "tanner2", value: "tanner2", text: "Tanner 2" },
{ key: "tanner3", value: "tanner3", text: "Tanner 3" },
Expand Down
8 changes: 1 addition & 7 deletions src/components/chartThemes/RCPCHThemeTraditionalBoy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
AxesObject,
TextStyleObject,
SDSObject,
PaddingObject,
} from "./themes";

/*
Expand Down Expand Up @@ -53,7 +52,7 @@ const subTitleStyle = new TextStyleObject("Arial", "#000000", 14, "normal");
const tooltipTextStyle = new TextStyleObject(
"Montserrat",
tooltipTextColour,
0.25,
18,
"normal"
);
const infoBoxTextStyle = new TextStyleObject(
Expand All @@ -66,8 +65,6 @@ const infoBoxTextStyle = new TextStyleObject(
const axisLabelTextStyle = new TextStyleObject("Arial", "000000", 10, "normal");
const tickLabelTextStyle = new TextStyleObject("Arial", "000000", 8, "normal");

const chartPadding = new PaddingObject(50, 50, 25, 40);

const lineStrokeWidth = 1.5;
const heightSDSStroke = "#00a3de";
const weightSDSStroke = "#32b5e4";
Expand All @@ -76,9 +73,6 @@ const bmiSDSStroke = "#b2e3f5";

const RCPCHChart = new ChartObject(
backgroundColour,
700,
475,
chartPadding,
titleStyle,
subTitleStyle,
tooltipBackgroundColour,
Expand Down
8 changes: 1 addition & 7 deletions src/components/chartThemes/RCPCHThemeTraditionalGirl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
AxesObject,
TextStyleObject,
SDSObject,
PaddingObject,
} from "./themes";

/*
Expand Down Expand Up @@ -49,7 +48,7 @@ const subTitleStyle = new TextStyleObject("Arial", "#000000", 14, "normal");
const tooltipTextStyle = new TextStyleObject(
"Montserrat",
tooltipTextColour,
0.25,
18,
"normal"
);
const infoBoxTextStyle = new TextStyleObject(
Expand All @@ -62,8 +61,6 @@ const infoBoxTextStyle = new TextStyleObject(
const axisLabelTextStyle = new TextStyleObject("Arial", "000000", 10, "normal");
const tickLabelTextStyle = new TextStyleObject("Arial", "000000", 8, "normal");

const chartPadding = new PaddingObject(50, 50, 25, 40);

const lineStrokeWidth = 1.5;
const heightSDSStroke = "#c9559d";
const weightSDSStroke = "#d376b0";
Expand All @@ -72,9 +69,6 @@ const bmiSDSStroke = "#eecce1";

const RCPCHChart = new ChartObject(
backgroundColour,
700,
475,
chartPadding,
titleStyle,
subTitleStyle,
tooltipBackgroundColour,
Expand Down
Loading

0 comments on commit 96b24c5

Please sign in to comment.