From 2ec47984b63b34f641461c538a5ecabebfa825f8 Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Sat, 15 Jun 2024 10:39:03 +0100 Subject: [PATCH 1/5] unique id to age radiobutton name property --- src/CentileChart/CentileChart.tsx | 180 +++++++++++----------- src/SubComponents/AgeRadioButtonGroup.tsx | 23 +-- 2 files changed, 107 insertions(+), 96 deletions(-) diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index bee61a0..5a6f08c 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -102,7 +102,8 @@ function CentileChart({ const [userDomains, setUserDomains] = useState(null); const [storedChildMeasurements, setStoredChildMeasurements] = useState(childMeasurements) - const { defaultShowCorrected, defaultShowChronological, showToggle } = defaultToggles(childMeasurements); + const { defaultShowCorrected, defaultShowChronological, showToggle } = { defaultShowCorrected: true, defaultShowChronological: false, showToggle: true }; + // const { defaultShowCorrected, defaultShowChronological, showToggle } = defaultToggles(childMeasurements); const [showChronologicalAge, setShowChronologicalAge] = useState(defaultShowChronological); const [showCorrectedAge, setShowCorrectedAge] = useState(defaultShowCorrected); const chartRef=useRef(); @@ -221,17 +222,22 @@ function CentileChart({ case 'unadjusted': setShowChronologicalAge(true); setShowCorrectedAge(false); + break; case 'adjusted': - setShowChronologicalAge(false); - setShowCorrectedAge(true); - break; + setShowChronologicalAge(false); + setShowCorrectedAge(true); + + break; case 'both': - setShowChronologicalAge(true); - setShowCorrectedAge(true); + setShowChronologicalAge(true); + setShowCorrectedAge(true); + break; default: console.warn('Fall through case on toggle adjusted age function'); + + } setUserDomains(null); }; @@ -243,7 +249,7 @@ function CentileChart({ const renderGradientLabels = () => { setCentileLabels(!centileLabels); } - + // always reset zoom to default when measurements array changes useLayoutEffect(() => { setUserDomains(null); @@ -297,8 +303,8 @@ function CentileChart({ backgroundPadding={5} pointerLength={5} cornerRadius={0} - flyoutStyle={styles.toolTipFlyout} - style={styles.toolTipMain} + flyoutStyle={{...styles.toolTipFlyout}} + style={{...styles.toolTipMain}} /> } labels={({ datum }) => { @@ -456,88 +462,90 @@ function CentileChart({ {/* Tooltips are found in the parent element (VictoryChart). Tooltips included: */} {/* 1 for each centile, 1 for the shaded area, 1 at 2years to indicate children are measured standing leading */} {/* to a step down in height weight and bmi in the data set. There is another tool tip at 4 years to indicate transition from datasets. */} + + {centileData && + centileData.map((referenceData, referenceIndex) => { - {centileData && - centileData.map((referenceData, referenceIndex) => { - - return ( - - {referenceData.map((centile: ICentile, centileIndex: number) => { + return ( + + + { referenceData.map((centile: ICentile, centileIndex: number) => { - // BMI charts also have SDS lines at -5, -4, -3, -2, 2, 3, 4, 5 + // BMI charts also have SDS lines at -5, -4, -3, -2, 2, 3, 4, 5 - if (centile.data.length < 1){ - // prevents a css `width` infinity error if no data presented to centile line - return - } + if (centile.data.length < 1){ + // prevents a css `width` infinity error if no data presented to centile line + return + } - - if (centileIndex % 2 === 0) { - // even index - centile is dashed - return ( - centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [addOrdinalSuffix(centile.centile)]: null} - labelComponent={ - { - return labelAngle(centile.data, index, chartScaleType, measurementMethod, domains); - } + if (centileIndex % 2 === 0) { + // even index - centile is dashed + + return ( + centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [addOrdinalSuffix(centile.centile)]: null} + labelComponent={ + { + return labelAngle(centile.data, index, chartScaleType, measurementMethod, domains); + } + } + style={styles.centileLabel} + backgroundStyle={{fill:'white'}} + backgroundPadding={{top: 1, bottom: 1, left: 3, right:3}} + textAnchor={'middle'} + verticalAnchor={'middle'} + dy={0} + /> } - style={styles.centileLabel} - backgroundStyle={{fill:'white'}} - backgroundPadding={{top: 1, bottom: 1, left: 3, right:3}} - textAnchor={'middle'} - verticalAnchor={'middle'} - dy={0} /> - } - /> - ); - } else { - // uneven index - centile is continuous - - return ( - centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [addOrdinalSuffix(centile.centile)]: null} - labelComponent={ - { - return labelAngle(centile.data, index, chartScaleType, measurementMethod, domains); + ); + + } else{ + // uneven index - centile is continuous + + return ( + centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [addOrdinalSuffix(centile.centile)]: null} + labelComponent={ + { + return labelAngle(centile.data, index, chartScaleType, measurementMethod, domains); + } } - } - style={[{ fill: styles.centileLabel.fill, fontFamily: styles.centileLabel.fontFamily, fontSize: styles.centileLabel.fontSize }]} - backgroundStyle={{fill:'white'}} - backgroundPadding={{top: 0, bottom: 0, left: 3, right:3}} - textAnchor={'middle'} - verticalAnchor={'middle'} - dy={0} - /> - } - /> - ); - } - })} - - ); - }) - } + style={[{ fill: styles.centileLabel.fill, fontFamily: styles.centileLabel.fontFamily, fontSize: styles.centileLabel.fontSize }]} + backgroundStyle={{fill:'white'}} + backgroundPadding={{top: 0, bottom: 0, left: 3, right:3}} + textAnchor={'middle'} + verticalAnchor={'middle'} + dy={0} + /> + } + /> + ); + } + })} + + ); + }) + } { /* BMI SDS lines */ @@ -556,7 +564,7 @@ function CentileChart({ // prevents a css `width` infinity error if no data presented to sds line return } - + // sds line is dashed return ( diff --git a/src/SubComponents/AgeRadioButtonGroup.tsx b/src/SubComponents/AgeRadioButtonGroup.tsx index 6ee0f39..6f77b01 100644 --- a/src/SubComponents/AgeRadioButtonGroup.tsx +++ b/src/SubComponents/AgeRadioButtonGroup.tsx @@ -1,35 +1,38 @@ import * as React from 'react'; export const AgeRadioButtonGroup = (props: any) => { + + const uniqueId = Math.random().toString(36); + return ( -
+
- + - + - +
); }; \ No newline at end of file From 91fd82c21438de441e5c4ce9c138fc7270ab0400 Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Sat, 15 Jun 2024 10:43:22 +0100 Subject: [PATCH 2/5] add margin and border-radius to reset zoom button --- src/SubComponents/StyledResetZoomButton.tsx | 2 ++ src/functions/makeAllStyles.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/src/SubComponents/StyledResetZoomButton.tsx b/src/SubComponents/StyledResetZoomButton.tsx index e0e01c6..dd54310 100644 --- a/src/SubComponents/StyledResetZoomButton.tsx +++ b/src/SubComponents/StyledResetZoomButton.tsx @@ -14,6 +14,8 @@ export const StyledResetZoomButton = styled.button<{ align-self: flex-end; background-color: ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)}; border: 2px solid ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)}; + border-radius: 0px; + margin: ${({ $margin }) => $margin}; font-family: Arial; font-size: 14px; min-height: 30px; diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index 5ec95f8..1a776d7 100644 --- a/src/functions/makeAllStyles.ts +++ b/src/functions/makeAllStyles.ts @@ -270,6 +270,7 @@ function makeAllStyles( color: chartStyle?.toggleButtonTextStyle?.colour ?? white, fontSize: chartStyle?.toggleButtonTextStyle?.size ?? 14, fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal', + margin: 0 }, }; } From ef20711d6c26e10f17aeac60aa6170a79e055a7b Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Sat, 15 Jun 2024 11:19:31 +0100 Subject: [PATCH 3/5] refactor tanner2 to be orange and blue --- src/RCPCHChart/RCPCHChart.stories.tsx | 2 +- src/testParameters/styles/tanner2Styles.ts | 28 +++++++++++----------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx index c70d022..5b795e1 100644 --- a/src/RCPCHChart/RCPCHChart.stories.tsx +++ b/src/RCPCHChart/RCPCHChart.stories.tsx @@ -100,7 +100,7 @@ export const PrematureSDSChart: Story = { chartType: 'sds', enableExport: false, exportChartCallback: ()=>{}, - theme: 'tanner3', + theme: 'tanner2', customThemeStyles: {} }, }; diff --git a/src/testParameters/styles/tanner2Styles.ts b/src/testParameters/styles/tanner2Styles.ts index fc19547..2b621a7 100644 --- a/src/testParameters/styles/tanner2Styles.ts +++ b/src/testParameters/styles/tanner2Styles.ts @@ -34,11 +34,11 @@ export const Tanner2ChartStyles: ChartStyle = { size: 12, style: 'italic' }, - tooltipBackgroundColour: "#fdc300", - tooltipStroke: "#fdc300", + tooltipBackgroundColour: "#3366cc", + tooltipStroke: "##3366cc", tooltipTextStyle: { name: "Montserrat", - colour: "#000000", + colour: "#FFFFFF", size: 14, style: 'normal' }, @@ -63,10 +63,10 @@ export const Tanner2GridlineStyles: GridlineStyle = { export const Tanner2CentileStyles: CentileStyle = { sdsStroke: "#A9A9A9", - centileStroke: "#7159aa", - delayedPubertyAreaFill: "#c6bddd", + centileStroke: "#ff8000", + delayedPubertyAreaFill: "#ffc080", midParentalCentileStroke: "#ff8000", - midParentalAreaFill: "#c6bddd", + midParentalAreaFill: "#ffc080", } export const Tanner2MeasurementStyles: MeasurementStyle = { @@ -80,10 +80,10 @@ export const Tanner2MeasurementStyles: MeasurementStyle = { } } export const Tanner2SDSStyles: SDSStyle = { - heightStroke: "#ff8000ff", - weightStroke: "#ff80007f", - ofcStroke: "#ff80003f", - bmiStroke: "#ff80001f", + heightStroke: "#7159aa", + weightStroke: "#ff8000", + ofcStroke: "#e60700", + bmiStroke: "#c2a712", } /* @@ -234,28 +234,28 @@ export const Tanner2Styles = { }, "heightSDS": { "data": { - "stroke": "#ff8000ff", + "stroke": "#7159aa", "strokeWidth": 1.5, "strokeLinecap": "round" } }, "weightSDS": { "data": { - "stroke": "#ff80007f", + "stroke": "#ff8000", "strokeWidth": 1.5, "strokeLinecap": "round" } }, "ofcSDS": { "data": { - "stroke": "#ff80003f", + "stroke": "#e60700", "strokeWidth": 1.5, "strokeLinecap": "round" } }, "bmiSDS": { "data": { - "stroke": "#ff80001f", + "stroke": "#c2a712", "strokeWidth": 1.5, "strokeLinecap": "round" } From fc12ccdee02d6b03c688c184860dcd18d687d728 Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Sat, 15 Jun 2024 11:22:34 +0100 Subject: [PATCH 4/5] fix age toggle for sds charts --- src/SDSChart/SDSChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SDSChart/SDSChart.tsx b/src/SDSChart/SDSChart.tsx index 70d7b3b..b5198de 100644 --- a/src/SDSChart/SDSChart.tsx +++ b/src/SDSChart/SDSChart.tsx @@ -597,7 +597,7 @@ const SDSChart: React.FC = ( $fontStyle={styles.toggleStyle.fontStyle} $color={styles.toggleStyle.color} $className={"toggleButtons"} - handleClick={onSelectRadioButton} + handleClickAgeRadio={onSelectRadioButton} correctedAge={showCorrectedAge} chronologicalAge={showChronologicalAge} /> From a9dbee35ae656a079183ee83b524af316f8925b3 Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Sat, 15 Jun 2024 11:24:53 +0100 Subject: [PATCH 5/5] patch package version increment --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9cebd4c..cf4319d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rcpch/digital-growth-charts-react-component-library", - "version": "7.0.1", + "version": "7.0.2", "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",