From 90683c5fc04c357d016bfdcacf38572eb49613bf Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Tue, 22 Oct 2024 13:42:47 -0300 Subject: [PATCH 1/7] add new custom theme properties for styling --- src/CentileChart/CentileChart.tsx | 972 ++++++++++++++------------ src/RCPCHChart/RCPCHChart.stories.tsx | 107 ++- src/RCPCHChart/RCPCHChart.tsx | 4 +- src/RCPCHChart/RCPCHChart.types.ts | 3 +- src/SDSChart/SDSChart.tsx | 10 +- src/functions/makeAllStyles.ts | 43 +- src/functions/stylesForTheme.ts | 17 +- src/interfaces/StyleObjects.ts | 29 +- 8 files changed, 687 insertions(+), 498 deletions(-) diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index dd06a29..3f8b4b0 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -42,7 +42,7 @@ import RenderTickLabel from '../SubComponents/RenderTickLabel'; import { TitleContainer } from '../SubComponents/TitleContainer'; import { StyledRadioButtonGroup } from '../SubComponents/StyledRadioButtonGroup'; import { StyledResetZoomButton } from '../SubComponents/StyledResetZoomButton'; -import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton' +import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton'; import { StyledButtonTooltip } from '../SubComponents/StyledButtonTooltip'; import { ButtonContainer } from '../SubComponents/ButtonContainer'; import { ThreeButtonContainer } from '../SubComponents/ThreeButtonContainer'; @@ -72,11 +72,7 @@ import icon from '../images/icon.png'; import ukca from '../images/ukca.png'; // allows two top level containers: zoom and voronoi -const VictoryZoomVoronoiContainer:any = createContainer( - 'zoom', - 'voronoi', -); - +const VictoryZoomVoronoiContainer: any = createContainer('zoom', 'voronoi'); function CentileChart({ chartsVersion, @@ -94,7 +90,7 @@ function CentileChart({ textScaleFactor, enableExport, exportChartCallback, - clinicianFocus + clinicianFocus, }: CentileChartProps) { const [userDomains, setUserDomains] = useState(null); @@ -102,9 +98,9 @@ function CentileChart({ const { defaultShowCorrected, defaultShowChronological, showToggle } = defaultToggles(childMeasurements); const [showChronologicalAge, setShowChronologicalAge] = useState(defaultShowChronological); const [showCorrectedAge, setShowCorrectedAge] = useState(defaultShowCorrected); - const chartRef=useRef(); + const chartRef = useRef(); const [active, setActive] = useState(false); - const [fullScreen, setFullScreen]=useState(true); + const [fullScreen, setFullScreen] = useState(true); const [centileLabels, setCentileLabels] = useState(false); // save & destruct domains and data on initial render and when dependencies change @@ -117,16 +113,15 @@ function CentileChart({ measurementMethod, reference, showCorrectedAge, - showChronologicalAge + showChronologicalAge, ), [storedChildMeasurements, sex, measurementMethod, reference, showCorrectedAge, showChronologicalAge], ); - // get the highest reference index of visible centile data let maxVisibleReferenceIndex: number = null; let minimumArrayLength; - centileData.forEach((item,index)=>{ + centileData.forEach((item, index) => { switch (index) { case 0: minimumArrayLength = 3; // neonates label gap @@ -144,8 +139,8 @@ function CentileChart({ minimumArrayLength = 6; break; } - - if (item[0].data !== null && item[0].data.length > minimumArrayLength){ + + if (item[0].data !== null && item[0].data.length > minimumArrayLength) { maxVisibleReferenceIndex = index; } }); @@ -163,15 +158,13 @@ function CentileChart({ pubertyThresholds = makePubertyThresholds(domains, sex); } if (reference === 'uk-who') { - nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex) + nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex); } - const filteredMidParentalHeightData = useMemo(() => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex),[ - reference, - childMeasurements, - midParentalHeightData, - sex - ]); + const filteredMidParentalHeightData = useMemo( + () => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex), + [reference, childMeasurements, midParentalHeightData, sex], + ); // Create the shaded area at term let termAreaData: null | any[] = null; @@ -201,20 +194,20 @@ function CentileChart({ const exportPressed = () => { if (enableExport) { setActive(true); - exportChartCallback(chartRef.current.firstChild) // this passes the raw SVG back to the client for converting + exportChartCallback(chartRef.current.firstChild); // this passes the raw SVG back to the client for converting } - } + }; // label fade on cut const labelFadeEnd = () => { setActive(false); - } + }; // full screen button action const fullScreenPressed = () => { setFullScreen(!fullScreen); fullScreen ? setStoredChildMeasurements([]) : setStoredChildMeasurements(childMeasurements); - } + }; // toggle between corrected/uncorrected/both const onSelectRadioButton = (event: MouseEvent) => { @@ -222,22 +215,20 @@ 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); }; @@ -248,15 +239,13 @@ function CentileChart({ const renderGradientLabels = () => { setCentileLabels(!centileLabels); - } + }; // always reset zoom to default when measurements array changes useLayoutEffect(() => { setUserDomains(null); }, [storedChildMeasurements]); - - return ( @@ -264,18 +253,14 @@ function CentileChart({ - {chartsVersion} + {chartsVersion} - + - - {title} {subtitle} @@ -293,7 +278,9 @@ function CentileChart({ containerComponent={ { chartRef.current=ref} } + containerRef={(ref) => { + chartRef.current = ref; + }} allowZoom={allowZooming} allowPan={allowZooming} onZoomDomainChange={handleZoomChange} @@ -302,44 +289,50 @@ function CentileChart({ // This the tool tip text, and accepts a large number of arguments // tool tips return contextual information for each datapoint, as well as the centile // and SDS lines, as well as bone ages, events and midparental heights - + const tooltipTextList = tooltipText( reference, measurementMethod, datum, midParentalHeightData, clinicianFocus, - sex - ) - if (tooltipTextList){ + sex, + ); + if (tooltipTextList) { return tooltipTextList.join('\n').replace(/^\s+|\s+$/g, ''); - } + } }} labelComponent={ { const numberOfLines = datum.text.length; - return numberOfLines * 18 * textScaleFactor; // 18 is the line height + return numberOfLines * 18 * textScaleFactor; // 18 is the line height }} flyoutStyle={{ ...styles.toolTipFlyout, }} - style={{...styles.toolTipMain}} + style={{ ...styles.toolTipMain }} /> } - voronoiBlacklist={['linkLine', 'chronologicalboneagelinkline', 'correctedboneagelinkline', 'areaMPH']} + voronoiBlacklist={[ + 'linkLine', + 'chronologicalboneagelinkline', + 'correctedboneagelinkline', + 'areaMPH', + ]} /> } > - { /* Term child shaded area: */ - termAreaData !== null && reference=="uk-who" && + termAreaData !== null && reference == 'uk-who' && ( + + ) } {/* X axis: */} @@ -371,7 +364,8 @@ function CentileChart({ {/* Any measurements plotting here are likely due to delayed puberty */} {/* The upper border is the 0.4th centile so this must come before the centiles */} - { reference==="uk-who" && measurementMethod === "height" && + {reference === 'uk-who' && + measurementMethod === 'height' && // delayed puberty area: pubertyThresholds !== null && ( - ) - } + )} {/* midparental height centiles These are three lines, the MPH centile, a centile 2SD above it, and another 2SD below There is an area fill between the highest and lowest - */ - } - - { (reference==="uk-who" || reference==="cdc") && measurementMethod==="height" && filteredMidParentalHeightData && - - filteredMidParentalHeightData.map((reference, index)=>{ + */} + {(reference === 'uk-who' || reference === 'cdc') && + measurementMethod === 'height' && + filteredMidParentalHeightData && + filteredMidParentalHeightData.map((reference, index) => { // this function filters the midparental height centile data to only those values // one month either side of the most recent measurement, or 20 y if no measurements // supplied. - if (index === 0){ + if (index === 0) { // neonates - remove - return + return; } const lowerData = reference.lowerParentalCentile; @@ -408,79 +400,75 @@ function CentileChart({ return ( - { - upperData.map((centile: ICentile, centileIndex: number)=>{ + {upperData.map((centile: ICentile, centileIndex: number) => { // area lower and and upper boundaries const newData: any = centile.data.map((data, index) => { - let o: any = Object.assign({}, data) - o.y0 = lowerData[centileIndex].data[index].y + let o: any = Object.assign({}, data); + o.y0 = lowerData[centileIndex].data[index].y; return o; - }) - if (newData.length < 1){ + }); + if (newData.length < 1) { // prevents a css `width` infinity error if no data presented to centile line; - return + return; } - - return ( - - ) - }) - } - { lowerData.map((lowercentile: ICentile, centileIndex: number) => { - if (lowercentile.data.length < 1){ - // prevents a css `width` infinity error if no data presented to centile line - return - } - return ( - - ); + + return ( + + ); + })} + {lowerData.map((lowercentile: ICentile, centileIndex: number) => { + if (lowercentile.data.length < 1) { + // prevents a css `width` infinity error if no data presented to centile line + return; + } + return ( + + ); })} {midData.map((centile: ICentile, centileIndex: number) => { - if (centile.data.length < 1){ - // prevents a css `width` infinity error if no data presented to centile line - return - } - return ( - - ); + if (centile.data.length < 1) { + // prevents a css `width` infinity error if no data presented to centile line + return; + } + return ( + + ); })} {upperData.map((uppercentile: ICentile, centileIndex: number) => { - if (uppercentile.data.length < 1){ - // prevents a css `width` infinity error if no data presented to centile line - return - } - return ( - - ); + if (uppercentile.data.length < 1) { + // prevents a css `width` infinity error if no data presented to centile line + return; + } + return ( + + ); })} - ); - }) - } + })} {/* Render the centiles - loop through the data set, create a line for each centile */} {/* On the old charts the 50th centile was thicker and darker and this led parents to believe it was therefore */} @@ -495,150 +483,190 @@ 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) => { - if (reference === "cdc"){ - if(referenceIndex === 0 || (measurementMethod === "ofc" && referenceIndex > 1)){ + {centileData && + centileData.map((referenceData, referenceIndex) => { + if (reference === 'cdc') { + if (referenceIndex === 0 || (measurementMethod === 'ofc' && referenceIndex > 1)) { // this is a hack that needs fixing in future. It arrises because of the null data in the CDC neonate dataset (Fenton). Once the data is fixed, this can be removed. Only for weight is renders a line in the under ones. // it also removes the duplicate tooltips in the head circumference chart - return - } + return; } + } - 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 !== null && centile.data.length < 1) { + // prevents a css `width` infinity error if no data presented to centile line + return; + } - if (centile.data !== null && centile.data.length < 1){ - // prevents a css `width` infinity error if no data presented to centile line - return - } + if (centileIndex % 2) { + // even index - centile is dashed - if (centileIndex %2) { - // 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} - /> - } + 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} /> - ); - - } 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} - /> - } - /> - ); - } - })} - - ); - }) - } + } + /> + ); + } 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} + /> + } + /> + ); + } + })} + + ); + })} { /* BMI SDS lines */ - measurementMethod === "bmi" && bmiSDSData && reference === "uk-who" && // only render for UK-WHO BMI charts since other references do not have SDS lines + measurementMethod === 'bmi' && + bmiSDSData && + reference === 'uk-who' && // only render for UK-WHO BMI charts since other references do not have SDS lines bmiSDSData.map((sdsReferenceData, index) => { return ( - + {sdsReferenceData.map((sdsLine: ICentile, sdsIndex: number) => { - // BMI charts have SDS lines at -5, -4, -3, 3, 3.33, 3.67, 4 - if (sdsLine.data.length < 1){ + if (sdsLine.data.length < 1) { // prevents a css `width` infinity error if no data presented to sds line - return + return; } - - // sds line is dashed - return ( - centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [sdsLine.sds]: null} - labelComponent={ - { - return labelAngle(sdsLine.data, index, chartScaleType, measurementMethod, domains); - } - } - style={{fill: styles.sdsLine.data.stroke, fontSize: 10.0}} - backgroundStyle={{fill:'white'}} - textAnchor={'end'} - dy={5} - /> - } - /> - ); + // sds line is dashed + return ( + + centileLabels && + labelIndexInterval(chartScaleType, props.index) && + props.index > 0 + ? [sdsLine.sds] + : null + } + labelComponent={ + { + return labelAngle( + sdsLine.data, + index, + chartScaleType, + measurementMethod, + domains, + ); + }} + style={{ fill: styles.sdsLine.data.stroke, fontSize: 10.0 }} + backgroundStyle={{ fill: 'white' }} + textAnchor={'end'} + dy={5} + /> + } + /> + ); })} - ) + ); }) } - { // puberty threshold lines uk90: pubertyThresholds !== null && @@ -655,7 +683,12 @@ function CentileChart({ textAnchor="start" angle={-90} dx={5} - dy={10} + dy={ + // adjusts margins relatively to font size + styles.delayedPubertyThresholdLabel?.fontSize + ? styles.delayedPubertyThresholdLabel.fontSize * 1.15 + : 10 + } style={styles.delayedPubertyThresholdLabel} /> } @@ -683,8 +716,13 @@ function CentileChart({ textAnchor="start" angle={-90} dx={5} - dy={10} - style={styles.delayedPubertyThresholdLabel} + dy={ + // adjusts margins relatively to font size + styles.nondisjunctionThresholdLabel?.fontSize + ? styles.nondisjunctionThresholdLabel.fontSize * 1.15 + : 10 + } + style={styles.nondisjunctionThresholdLabel} /> } /> @@ -698,8 +736,7 @@ function CentileChart({ {/* create a series for each child measurements data point: a circle for chronological age, a cross for corrected */} {/* If data points are close together, reduce the size of the point */} - {childMeasurements.map((childMeasurement: Measurement, index) => { - + {childMeasurements.map((childMeasurement: Measurement, index) => { const chronData: any = { age_type: 'chronological_age', age_error: childMeasurement.measurement_dates.chronological_decimal_age_error, @@ -712,16 +749,23 @@ function CentileChart({ gestational_age: childMeasurement.measurement_dates.corrected_gestational_age, centile: childMeasurement.measurement_calculated_values.chronological_centile, centile_band: childMeasurement.measurement_calculated_values.chronological_centile_band, - clinician_comment: childMeasurement.measurement_dates.comments.clinician_chronological_decimal_age_comment, - lay_comment: childMeasurement.measurement_dates.comments.lay_chronological_decimal_age_comment, - observation_date: new Date(childMeasurement.measurement_dates.observation_date).toLocaleDateString('en-UK'), + clinician_comment: + childMeasurement.measurement_dates.comments.clinician_chronological_decimal_age_comment, + lay_comment: + childMeasurement.measurement_dates.comments.lay_chronological_decimal_age_comment, + observation_date: new Date( + childMeasurement.measurement_dates.observation_date, + ).toLocaleDateString('en-UK'), observation_value_error: childMeasurement.child_observation_value.observation_value_error, - chronological_measurement_error: childMeasurement.measurement_calculated_values.chronological_measurement_error, - chronological_decimal_age_error: childMeasurement.measurement_dates.chronological_decimal_age_error, + chronological_measurement_error: + childMeasurement.measurement_calculated_values.chronological_measurement_error, + chronological_decimal_age_error: + childMeasurement.measurement_dates.chronological_decimal_age_error, x: childMeasurement.measurement_dates.chronological_decimal_age, y: childMeasurement.child_observation_value.observation_value, sds: childMeasurement.measurement_calculated_values.chronological_sds, - chronological_percentage_median_bmi: childMeasurement.measurement_calculated_values.chronological_percentage_median_bmi + chronological_percentage_median_bmi: + childMeasurement.measurement_calculated_values.chronological_percentage_median_bmi, }; const correctData: any = { age_type: 'corrected_age', @@ -731,20 +775,28 @@ function CentileChart({ bone_age_sds: childMeasurement.bone_age.bone_age_sds, bone_age_centile: childMeasurement.bone_age.bone_age_centile, bone_age_type: childMeasurement.bone_age.bone_age_type, - calendar_age: childMeasurement.measurement_dates.corrected_decimal_age < 0.0383 ? childMeasurement.measurement_dates.chronological_calendar_age : childMeasurement.measurement_dates.corrected_calendar_age, // calendar age not corrected if < EDD + calendar_age: + childMeasurement.measurement_dates.corrected_decimal_age < 0.0383 + ? childMeasurement.measurement_dates.chronological_calendar_age + : childMeasurement.measurement_dates.corrected_calendar_age, // calendar age not corrected if < EDD gestational_age: childMeasurement.measurement_dates.corrected_gestational_age, centile: childMeasurement.measurement_calculated_values.corrected_centile, centile_band: childMeasurement.measurement_calculated_values.corrected_centile_band, - clinician_comment: childMeasurement.measurement_dates.comments.clinician_corrected_decimal_age_comment, + clinician_comment: + childMeasurement.measurement_dates.comments.clinician_corrected_decimal_age_comment, lay_comment: childMeasurement.measurement_dates.comments.lay_corrected_decimal_age_comment, - observation_date: new Date(childMeasurement.measurement_dates.observation_date).toLocaleDateString('en-UK'), + observation_date: new Date( + childMeasurement.measurement_dates.observation_date, + ).toLocaleDateString('en-UK'), observation_value_error: childMeasurement.child_observation_value.observation_value_error, - corrected_measurement_error: childMeasurement.measurement_calculated_values.corrected_measurement_error, + corrected_measurement_error: + childMeasurement.measurement_calculated_values.corrected_measurement_error, corrected_decimal_age_error: childMeasurement.measurement_dates.corrected_decimal_age_error, x: childMeasurement.measurement_dates.corrected_decimal_age, y: childMeasurement.child_observation_value.observation_value, sds: childMeasurement.measurement_calculated_values.corrected_sds, - corrected_percentage_median_bmi: childMeasurement.measurement_calculated_values.corrected_percentage_median_bmi + corrected_percentage_median_bmi: + childMeasurement.measurement_calculated_values.corrected_percentage_median_bmi, }; if (isChartCrowded) { @@ -757,157 +809,167 @@ function CentileChart({ return ( - - { childMeasurement.events_data.events_text && childMeasurement.events_data.events_text.length > 0 && ( - - showChronologicalAge && !showCorrectedAge ? + {childMeasurement.events_data.events_text && + childMeasurement.events_data.events_text.length > 0 && + (showChronologicalAge && !showCorrectedAge ? ( // Events against chronological age only if corrected age not showing - - } - /> - : + + } + /> + ) : ( // Events against corrected age - - - } - /> - - ) - } - - { showChronologicalAge && childMeasurement.bone_age.bone_age && ( showChronologicalAge || showCorrectedAge ) && !( showCorrectedAge && showChronologicalAge ) && // bone age linked to chronological age - - } - /> - } - { showCorrectedAge && childMeasurement.bone_age.bone_age && // bone age linked to corrected age - - } - /> - } - { showChronologicalAge && !showCorrectedAge && childMeasurement.bone_age.bone_age &&// bone age line linked to chronological age - } - }} - /> - } - - { showCorrectedAge && childMeasurement.bone_age.bone_age && // bone age line linked to corrected age - + ))} + + {showChronologicalAge && + childMeasurement.bone_age.bone_age && + (showChronologicalAge || showCorrectedAge) && + !(showCorrectedAge && showChronologicalAge) && ( // bone age linked to chronological age + } - }} - /> - } - { showChronologicalAge && ( + /> + )} + + {showCorrectedAge && + childMeasurement.bone_age.bone_age && ( // bone age linked to corrected age + + } + /> + )} + {showChronologicalAge && + !showCorrectedAge && + childMeasurement.bone_age.bone_age && ( // bone age line linked to chronological age + + )} + + {showCorrectedAge && + childMeasurement.bone_age.bone_age && ( // bone age line linked to corrected age + + )} + {showChronologicalAge && ( )} - { showCorrectedAge && ( + {showCorrectedAge && ( + } style={styles.measurementPoint} name="corrected_age" /> )} - { showChronologicalAge && + {showChronologicalAge && showCorrectedAge && ( // only show the line if both cross and dot are rendered - )} + )} ); })} {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) && ( - - - {/* Creates the Centile Label toggle button */} - { + { - { centileLabels ? - - : - - } - { centileLabels ? -
Hide Centile Labels
- : -
Show Centile Labels
- } + {centileLabels ? : } + {centileLabels ? ( +
Hide Centile Labels
+ ) : ( +
Show Centile Labels
+ )} - } {/* Creates the Zoom to see whole lifespan button */} - { childMeasurements.length > 0 && - - - fullScreenPressed()} - $color={styles.toggleStyle.activeColour} - size={5} - data-testid="zoom-button" - > - { fullScreen ? - - : - - } - -
Toggle Full Lifespan
- - - } + {childMeasurements.length > 0 && ( + + + fullScreenPressed()} + $color={styles.toggleStyle.activeColour} + size={5} + data-testid="zoom-button" + > + {fullScreen ? : } + +
Toggle Full Lifespan
+ + + )} {/* Creates the Copy button */} - { enableExport && ( - - - - - -
Copy Chart
- - - Copied! - - - ) - } - + {enableExport && ( + + + + + +
Copy Chart
+ + + Copied! + + + )} {showToggle && ( - - ) - } + + )} {/* {allowZooming && ( */} - + setUserDomains(null)} > - setUserDomains(null)} - > - Reset Zoom - - - {/* ) + Reset Zoom + + + {/* ) } */} )} diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx index 0d4f684..07a691b 100644 --- a/src/RCPCHChart/RCPCHChart.stories.tsx +++ b/src/RCPCHChart/RCPCHChart.stories.tsx @@ -23,7 +23,7 @@ export default meta; type Story = StoryObj; const customChartStyle: ChartStyle = { - backgroundColour: "tomato" + backgroundColour: "tomato", } const customStyles = { @@ -463,4 +463,107 @@ 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: '#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', + }, + }, + }, +}; \ No newline at end of file diff --git a/src/RCPCHChart/RCPCHChart.tsx b/src/RCPCHChart/RCPCHChart.tsx index 78ddcb9..f783d0f 100644 --- a/src/RCPCHChart/RCPCHChart.tsx +++ b/src/RCPCHChart/RCPCHChart.tsx @@ -96,7 +96,7 @@ const RCPCHChart: React.FC = ({ // 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 = ({ } // 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 diff --git a/src/RCPCHChart/RCPCHChart.types.ts b/src/RCPCHChart/RCPCHChart.types.ts index 7b19037..c2d60c0 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 659a653..7098eb1 100644 --- a/src/SDSChart/SDSChart.tsx +++ b/src/SDSChart/SDSChart.tsx @@ -559,11 +559,11 @@ const SDSChart: React.FC = ( {referenceText(reference)} diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index 86f2665..42cbbb9 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,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,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: { @@ -103,10 +108,11 @@ function makeAllStyles( }, 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', + }, }; } diff --git a/src/functions/stylesForTheme.ts b/src/functions/stylesForTheme.ts index 6ba2682..16f1220 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..c577294 100644 --- a/src/interfaces/StyleObjects.ts +++ b/src/interfaces/StyleObjects.ts @@ -1,20 +1,20 @@ export interface ChartStyle { backgroundColour?: string; //background colour of chart - titleStyle?: TextStyle | undefined; // style of text in title: includes fontFamily, fontSize, colour, weight (regular/bold/italic) - subTitleStyle?: TextStyle | undefined; // style of text in subtitle: includes fontFamily, fontSize, colour, weight (regular/bold/italic) + titleStyle?: TextStyle; // style of text in title: includes fontFamily, fontSize, colour, style, weight + subTitleStyle?: TextStyle; // style of text in subtitle: includes fontFamily, fontSize, colour, style, weight tooltipBackgroundColour?: string; //background colour of tooltip tooltipStroke?: string; //border colour of tooltip - tooltipTextStyle?: TextStyle | undefined; // tooltip text: includes fontFamily, fontSize, colour, weight (regular/bold/italic) + tooltipTextStyle?: TextStyle; // tooltip text: includes fontFamily, fontSize, colour, style, weight termFill?: string; // background colour of weight term area termStroke?: string; // border colour of weight term area toggleButtonInactiveColour?: string; // buttons - inactive colour toggleButtonActiveColour?: string; // buttons - active colour - toggleButtonTextStyle?: TextStyle | undefined; // buttons text: includes fontFamily, fontSize, colour, weight (regular/bold/italic) + toggleButtonTextStyle?: TextStyle; // buttons text: includes fontFamily, fontSize, colour, style, weight } export interface MeasurementStyle { measurementFill?: string; // measurement point fill colour - only apply to SDS charts highlightedMeasurementFill?: string; // measurement point fill colour when hightlighted (SDS charts) - eventTextStyle?: TextStyle; // styles for text of events: includes fontFamily, fontSize, colour, weight (regular/bold/italic) + eventTextStyle?: TextStyle; // styles for text of events: includes fontFamily, fontSize, colour, style, weight } export interface CentileStyle { sdsStroke?: string; // sds line colour @@ -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?: Pick; // centile text style : includes name, size, weight } export interface SDSStyle { @@ -40,13 +41,25 @@ export interface GridlineStyle { } export interface AxisStyle { axisStroke?: string; // Axis colour - 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) + axisThresholdLabelTextStyle?: TextStyle; // Axis label text: : includes fontFamily, fontSize, colour, style, weight + axisThresholdLineStyle?: AxisThresholdLineStyle; // Axis line: includes colour + axisLabelTextStyle?: TextStyle; // Axis label text: : includes fontFamily, fontSize, colour, style, weight + tickLabelTextStyle?: TickLabelTextStyle; // Tick label text : includes fontFamily, fontSize, colour, style, weight } +export interface TickLabelTextStyle extends TextStyle { + padding?: number; +} + +export interface AxisThresholdLineStyle { + colour?: string; +} + +export interface ReferenceStyle extends TextStyle {} export interface TextStyle { name?: string; colour?: string; size?: number; - style?: 'bold' | 'italic' | 'normal'; + style?: 'italic' | 'normal'; + weight?: number | string; } From bd7037505d2e3f1f0c306760b3d5ed7f00bcebf2 Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Tue, 22 Oct 2024 14:28:31 -0300 Subject: [PATCH 2/7] document new styling properties to storybook --- src/RCPCHChart/RCPCHChart.mdx | 126 +++++++++++++++++++++++--- src/RCPCHChart/RCPCHChart.stories.tsx | 15 +-- src/functions/makeAllStyles.ts | 7 ++ src/interfaces/StyleObjects.ts | 2 +- 4 files changed, 130 insertions(+), 20 deletions(-) diff --git a/src/RCPCHChart/RCPCHChart.mdx b/src/RCPCHChart/RCPCHChart.mdx index f90127b..65015bc 100644 --- a/src/RCPCHChart/RCPCHChart.mdx +++ b/src/RCPCHChart/RCPCHChart.mdx @@ -18,7 +18,7 @@ Other props are: - `title: string;` the title of the chart : could include patient name and identifiers - `measurementMethod: 'height' | 'weight' | 'ofc' | 'bmi';` _must_ be one of the options provided -- `reference: 'uk-who' | 'turner' | 'trisomy-21';` _must_ be one of the options provided +- `reference: 'uk-who' | 'turner' | 'trisomy-21' | 'cdc';` _must_ be one of the options provided - `sex: 'male' | 'female';` _must_ be one of the options provided - `measurements: { measurementMethod: Measurement[]};` array of measurements returned from RCPCH Growth API. This should not be edited or manipulated. **NOTE this has changed in v7.0.0** - `midParentalHeightData?: MidParentalHeightObject | undefined;` an RCPCH object returned from the RCPCH Growth API. Should not be edited or manipulated @@ -332,7 +332,7 @@ Themes are collections of styles. The RCPCH have created some suggested themes: 5. Tanner 3: Red and yellow 6. Custom -These themes all have predefined attributes for `fontFamily`, `color`, `size`, `stroke` and `strokeWidth` for different aspects of the charts. +These themes all have predefined attributes for `fontFamily`, `color`, `size`, `weight`, `stroke` and `strokeWidth` for different aspects of the charts. If these attributes are too prescriptive and users would like either to build their own theme, or override styles within an existing theme, this can be done by passing in custom styles through the `customThemeStyles` prop. @@ -344,36 +344,40 @@ All attributes are optional, therefore only those attributes where changes are r - `centileStyle?: CentileStyle;` - `sdsStyle?: SDSStyle;` - `measurementStyle?: MeasurementStyle;` +- `referenceStyle?: ReferenceStyle;` The attributes of each of these are below: #### `ChartStyle` - `backgroundColour?: string;` //background colour of chart -- `titleStyle?: TextStyle `| undefined; // style of text in title: includes fontFamily, fontSize, colour, weight (regular/bold/italic) -- `subTitleStyle?: TextStyle `| undefined; // style of text in subtitle: includes fontFamily, fontSize, colour, weight (regular/bold/italic) +- `titleStyle?: TextStyle`; // style of text in title: includes fontFamily, fontSize, colour, style, weight +- `subTitleStyle?: TextStyle`; // style of text in subtitle: includes fontFamily, fontSize, colour, style, weight - `tooltipBackgroundColour?: string;` //background colour of tooltip - `tooltipStroke?: string;` //border colour of tooltip -- `tooltipTextStyle?: TextStyle `| undefined; // tooltip text: includes fontFamily, fontSize, colour, weight (regular/bold/italic) +- `tooltipTextStyle?: TextStyle`; // tooltip text: includes fontFamily, fontSize, colour, style, weight - `termFill?: string;` // background colour of weight term area - `termStroke?: string;` // border colour of weight term area - `toggleButtonInactiveColour?: string;` // buttons - inactive colour - `toggleButtonActiveColour?: string;` // buttons - active colour -- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, weight (regular/bold/italic) +- `toggleButtonTextStyle?: TextStyle | undefined;` // buttons text: includes fontFamily, fontSize, colour, style, weight #### `MeasurementStyle` - `measurementFill?: string;` // measurement point fill colour - only apply to SDS charts - `highlightedMeasurementFill?: string;` // measurement point fill colour when hightlighted (SDS charts) -- `eventTextStyle?: TextStyle;` // styles for text of events: includes fontFamily, fontSize, colour, weight (regular/bold/italic) +- `eventTextStyle?: TextStyle;` // styles for text of events: includes fontFamily, fontSize, colour, style, weight #### `CentileStyle` - `sdsStroke?: string;` // sds line colour - `centileStroke?: string;` // centile line colour +- `nondisjunctionThresholdLabel ?: string;` // label for nondisjunctionThresholdLabel +- `nondisjunctionThresholdLine ?: string;` // colour of nondisjunctionThresholdLine - `delayedPubertyAreaFill?: string;` // delayed puberty area colour - `midParentalCentileStroke?: string;` // Midparental height centile line colour - `midParentalAreaFill?: string;` // Midparental height area colour +- `centileTextStyle?: Pick;` // centile text style : includes name, size, weight #### `SDSStyle` @@ -392,19 +396,22 @@ The attributes of each of these are below: #### `AxisStyle` - `axisStroke?: string;` // Axis colour -- `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) +- `axisThresholdLabelTextStyle?: TextStyle;` // Axis label text: : includes fontFamily, fontSize, colour, style, weight +- `axisThresholdLineStyle?: AxisThresholdLineStyle;` // Axis line: includes colour +- `axisLabelTextStyle?: TextStyle;` // Axis label text: : includes fontFamily, fontSize, colour, style, weight +- `tickLabelTextStyle?: TickLabelTextStyle;` // Tick label text : includes fontFamily, fontSize, colour, style, weight and padding #### `TextStyle` - `name?: string;` - `colour?: string;` - `size?: number;` -- `style?: 'bold' | 'italic' | 'normal';` +- `style?: 'italic' | 'normal';` +- `weight?: number | string;` For example, if a user wished to override the background colour of the existing 'monochrome' theme: -```js +```tsx const customChartStyle: ChartStyle = { backgroundColour: "tomato" } @@ -416,7 +423,7 @@ const customStyles = { And in the JSX: -```js +```tsx + +Or even build a whole new theme to match a custom Design System + +```tsx +const customStyles = { + chartStyle: { + backgroundColour: '#FAF8F5', + 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, + }, + + 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', + }, + }, + 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', + }, + referenceStyle: { + weight: 500, + colour: '#706A80', + name: 'sans-serif', + size: 13, + }, +}, +``` + +yields: + + \ No newline at end of file diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx index 07a691b..f347bbb 100644 --- a/src/RCPCHChart/RCPCHChart.stories.tsx +++ b/src/RCPCHChart/RCPCHChart.stories.tsx @@ -482,6 +482,7 @@ export const CustomThemeStylesChart: Story = { theme: 'custom', customThemeStyles: { chartStyle: { + backgroundColour: '#FAF8F5', titleStyle: { weight: 600, colour: '#706A80', @@ -502,7 +503,7 @@ export const CustomThemeStylesChart: Story = { size: 16, weight: 400, }, - backgroundColour: '#FAF8F5', + tooltipStroke: '#EBE1D3', tooltipBackgroundColour: '#FFFDFD', tooltipTextStyle: { @@ -535,12 +536,6 @@ export const CustomThemeStylesChart: Story = { colour: '#706A80', }, }, - referenceStyle: { - weight: 500, - colour: '#706A80', - name: 'sans-serif', - size: 13, - }, gridlineStyle: { dashed: true, stroke: '#EDE7DD', @@ -564,6 +559,12 @@ export const CustomThemeStylesChart: Story = { highlightedMeasurementFill: '#B89F81', measurementFill: '#760050', }, + referenceStyle: { + weight: 500, + colour: '#706A80', + name: 'sans-serif', + size: 13, + }, }, }, }; \ No newline at end of file diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index 42cbbb9..006497e 100644 --- a/src/functions/makeAllStyles.ts +++ b/src/functions/makeAllStyles.ts @@ -180,6 +180,13 @@ function makeAllStyles( strokeWidth: 1, }, }, + nondisjunctionThresholdLabel: { + fontSize: (axisStyle?.axisThresholdLabelTextStyle?.size ?? 9) * (textMultiplier ?? 1), + fill: axisStyle?.axisThresholdLabelTextStyle?.colour ?? black, + fontFamily: axisStyle?.axisThresholdLabelTextStyle?.name ?? 'Arial', + fontWeight: axisStyle?.axisThresholdLabelTextStyle?.weight ?? 400, + textAlign: 'start', + }, sdsLine: { // these are the sds lines on the BMI chart data: { stroke: centileStyle?.sdsStroke ?? '#A9A9A9', diff --git a/src/interfaces/StyleObjects.ts b/src/interfaces/StyleObjects.ts index c577294..4c99f44 100644 --- a/src/interfaces/StyleObjects.ts +++ b/src/interfaces/StyleObjects.ts @@ -44,7 +44,7 @@ export interface AxisStyle { axisThresholdLabelTextStyle?: TextStyle; // Axis label text: : includes fontFamily, fontSize, colour, style, weight axisThresholdLineStyle?: AxisThresholdLineStyle; // Axis line: includes colour axisLabelTextStyle?: TextStyle; // Axis label text: : includes fontFamily, fontSize, colour, style, weight - tickLabelTextStyle?: TickLabelTextStyle; // Tick label text : includes fontFamily, fontSize, colour, style, weight + tickLabelTextStyle?: TickLabelTextStyle; // Tick label text : includes fontFamily, fontSize, colour, style, weight and padding } export interface TickLabelTextStyle extends TextStyle { From 24a01510be97cc8565a9e331b199f12708348dd8 Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Tue, 22 Oct 2024 15:31:50 -0300 Subject: [PATCH 3/7] add centileTextStyle to storybook --- src/RCPCHChart/RCPCHChart.mdx | 5 +++++ src/RCPCHChart/RCPCHChart.stories.tsx | 12 ++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/RCPCHChart/RCPCHChart.mdx b/src/RCPCHChart/RCPCHChart.mdx index 65015bc..4c3981b 100644 --- a/src/RCPCHChart/RCPCHChart.mdx +++ b/src/RCPCHChart/RCPCHChart.mdx @@ -511,6 +511,11 @@ const customStyles = { gridlines: true, }, centileStyle: { + centileTextStyle: { + name: 'sans-serif', + size: 12.5, + weight: 400, + }, centileStroke: '#B89F81', midParentalAreaFill: '#B89F81', midParentalCentileStroke: '#B89F81', diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx index f347bbb..f8707ca 100644 --- a/src/RCPCHChart/RCPCHChart.stories.tsx +++ b/src/RCPCHChart/RCPCHChart.stories.tsx @@ -503,13 +503,12 @@ export const CustomThemeStylesChart: Story = { size: 16, weight: 400, }, - tooltipStroke: '#EBE1D3', - tooltipBackgroundColour: '#FFFDFD', + tooltipBackgroundColour: '#5a526b', tooltipTextStyle: { - colour: '#706A80', + colour: '#fffdfd', name: 'sans-serif', - size: 17, + size: 14, }, }, axisStyle: { @@ -543,6 +542,11 @@ export const CustomThemeStylesChart: Story = { gridlines: true, }, centileStyle: { + centileTextStyle: { + name: 'sans-serif', + size: 12.5, + weight: 400, + }, centileStroke: '#B89F81', midParentalAreaFill: '#B89F81', midParentalCentileStroke: '#B89F81', From 6fee41fb4e9148fd0b4e80e6e2c92aa0859b0914 Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Tue, 22 Oct 2024 15:48:38 -0300 Subject: [PATCH 4/7] update default theme weight/style properties --- src/CentileChart/CentileChart.tsx | 952 +++++++++--------- src/RCPCHChart/RCPCHChart.stories.tsx | 10 +- src/functions/makeAllStyles.ts | 2 +- src/testParameters/styles/monochromeStyles.ts | 4 +- src/testParameters/styles/tanner1Styles.ts | 2 +- src/testParameters/styles/tanner2Styles.ts | 2 +- src/testParameters/styles/tanner3Styles.ts | 2 +- .../styles/traditionalBoysStyles.ts | 2 +- .../styles/traditionalGirlsStyles.ts | 2 +- 9 files changed, 472 insertions(+), 506 deletions(-) diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index 3f8b4b0..9346594 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -42,7 +42,7 @@ import RenderTickLabel from '../SubComponents/RenderTickLabel'; import { TitleContainer } from '../SubComponents/TitleContainer'; import { StyledRadioButtonGroup } from '../SubComponents/StyledRadioButtonGroup'; import { StyledResetZoomButton } from '../SubComponents/StyledResetZoomButton'; -import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton'; +import { StyledGradientLabelsButton } from '../SubComponents/StyledGradientLabelsButton' import { StyledButtonTooltip } from '../SubComponents/StyledButtonTooltip'; import { ButtonContainer } from '../SubComponents/ButtonContainer'; import { ThreeButtonContainer } from '../SubComponents/ThreeButtonContainer'; @@ -72,7 +72,11 @@ import icon from '../images/icon.png'; import ukca from '../images/ukca.png'; // allows two top level containers: zoom and voronoi -const VictoryZoomVoronoiContainer: any = createContainer('zoom', 'voronoi'); +const VictoryZoomVoronoiContainer:any = createContainer( + 'zoom', + 'voronoi', +); + function CentileChart({ chartsVersion, @@ -90,7 +94,7 @@ function CentileChart({ textScaleFactor, enableExport, exportChartCallback, - clinicianFocus, + clinicianFocus }: CentileChartProps) { const [userDomains, setUserDomains] = useState(null); @@ -98,9 +102,9 @@ function CentileChart({ const { defaultShowCorrected, defaultShowChronological, showToggle } = defaultToggles(childMeasurements); const [showChronologicalAge, setShowChronologicalAge] = useState(defaultShowChronological); const [showCorrectedAge, setShowCorrectedAge] = useState(defaultShowCorrected); - const chartRef = useRef(); + const chartRef=useRef(); const [active, setActive] = useState(false); - const [fullScreen, setFullScreen] = useState(true); + const [fullScreen, setFullScreen]=useState(true); const [centileLabels, setCentileLabels] = useState(false); // save & destruct domains and data on initial render and when dependencies change @@ -113,15 +117,16 @@ function CentileChart({ measurementMethod, reference, showCorrectedAge, - showChronologicalAge, + showChronologicalAge ), [storedChildMeasurements, sex, measurementMethod, reference, showCorrectedAge, showChronologicalAge], ); + // get the highest reference index of visible centile data let maxVisibleReferenceIndex: number = null; let minimumArrayLength; - centileData.forEach((item, index) => { + centileData.forEach((item,index)=>{ switch (index) { case 0: minimumArrayLength = 3; // neonates label gap @@ -139,8 +144,8 @@ function CentileChart({ minimumArrayLength = 6; break; } - - if (item[0].data !== null && item[0].data.length > minimumArrayLength) { + + if (item[0].data !== null && item[0].data.length > minimumArrayLength){ maxVisibleReferenceIndex = index; } }); @@ -158,13 +163,15 @@ function CentileChart({ pubertyThresholds = makePubertyThresholds(domains, sex); } if (reference === 'uk-who') { - nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex); + nondisjunctionThresholds = makeNonDisjunctionThresholds(domains, sex) } - const filteredMidParentalHeightData = useMemo( - () => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex), - [reference, childMeasurements, midParentalHeightData, sex], - ); + const filteredMidParentalHeightData = useMemo(() => getFilteredMidParentalHeightData(reference, childMeasurements, midParentalHeightData, sex),[ + reference, + childMeasurements, + midParentalHeightData, + sex + ]); // Create the shaded area at term let termAreaData: null | any[] = null; @@ -194,20 +201,20 @@ function CentileChart({ const exportPressed = () => { if (enableExport) { setActive(true); - exportChartCallback(chartRef.current.firstChild); // this passes the raw SVG back to the client for converting + exportChartCallback(chartRef.current.firstChild) // this passes the raw SVG back to the client for converting } - }; + } // label fade on cut const labelFadeEnd = () => { setActive(false); - }; + } // full screen button action const fullScreenPressed = () => { setFullScreen(!fullScreen); fullScreen ? setStoredChildMeasurements([]) : setStoredChildMeasurements(childMeasurements); - }; + } // toggle between corrected/uncorrected/both const onSelectRadioButton = (event: MouseEvent) => { @@ -215,20 +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); }; @@ -239,13 +248,15 @@ function CentileChart({ const renderGradientLabels = () => { setCentileLabels(!centileLabels); - }; + } // always reset zoom to default when measurements array changes useLayoutEffect(() => { setUserDomains(null); }, [storedChildMeasurements]); + + return ( @@ -253,14 +264,18 @@ function CentileChart({ - {chartsVersion} + {chartsVersion} - + + + {title} {subtitle} @@ -278,9 +293,7 @@ function CentileChart({ containerComponent={ { - chartRef.current = ref; - }} + containerRef={ref => { chartRef.current=ref} } allowZoom={allowZooming} allowPan={allowZooming} onZoomDomainChange={handleZoomChange} @@ -289,50 +302,44 @@ function CentileChart({ // This the tool tip text, and accepts a large number of arguments // tool tips return contextual information for each datapoint, as well as the centile // and SDS lines, as well as bone ages, events and midparental heights - + const tooltipTextList = tooltipText( reference, measurementMethod, datum, midParentalHeightData, clinicianFocus, - sex, - ); - if (tooltipTextList) { + sex + ) + if (tooltipTextList){ return tooltipTextList.join('\n').replace(/^\s+|\s+$/g, ''); - } + } }} labelComponent={ { const numberOfLines = datum.text.length; - return numberOfLines * 18 * textScaleFactor; // 18 is the line height + return numberOfLines * 18 * textScaleFactor; // 18 is the line height }} flyoutStyle={{ ...styles.toolTipFlyout, }} - style={{ ...styles.toolTipMain }} + style={{...styles.toolTipMain}} /> } - voronoiBlacklist={[ - 'linkLine', - 'chronologicalboneagelinkline', - 'correctedboneagelinkline', - 'areaMPH', - ]} + voronoiBlacklist={['linkLine', 'chronologicalboneagelinkline', 'correctedboneagelinkline', 'areaMPH']} /> } > + { /* Term child shaded area: */ - termAreaData !== null && reference == 'uk-who' && ( - - ) + termAreaData !== null && reference=="uk-who" && } {/* X axis: */} @@ -364,8 +371,7 @@ function CentileChart({ {/* Any measurements plotting here are likely due to delayed puberty */} {/* The upper border is the 0.4th centile so this must come before the centiles */} - {reference === 'uk-who' && - measurementMethod === 'height' && + { reference==="uk-who" && measurementMethod === "height" && // delayed puberty area: pubertyThresholds !== null && ( - )} + ) + } {/* midparental height centiles These are three lines, the MPH centile, a centile 2SD above it, and another 2SD below There is an area fill between the highest and lowest - */} + */ + } + + { (reference==="uk-who" || reference==="cdc") && measurementMethod==="height" && filteredMidParentalHeightData && + + filteredMidParentalHeightData.map((reference, index)=>{ - {(reference === 'uk-who' || reference === 'cdc') && - measurementMethod === 'height' && - filteredMidParentalHeightData && - filteredMidParentalHeightData.map((reference, index) => { // this function filters the midparental height centile data to only those values // one month either side of the most recent measurement, or 20 y if no measurements // supplied. - if (index === 0) { + if (index === 0){ // neonates - remove - return; + return } const lowerData = reference.lowerParentalCentile; @@ -400,75 +408,79 @@ function CentileChart({ return ( - {upperData.map((centile: ICentile, centileIndex: number) => { + { + upperData.map((centile: ICentile, centileIndex: number)=>{ // area lower and and upper boundaries const newData: any = centile.data.map((data, index) => { - let o: any = Object.assign({}, data); - o.y0 = lowerData[centileIndex].data[index].y; + let o: any = Object.assign({}, data) + o.y0 = lowerData[centileIndex].data[index].y return o; - }); - if (newData.length < 1) { + }) + if (newData.length < 1){ // prevents a css `width` infinity error if no data presented to centile line; - return; + return } - - return ( - - ); - })} - {lowerData.map((lowercentile: ICentile, centileIndex: number) => { - if (lowercentile.data.length < 1) { - // prevents a css `width` infinity error if no data presented to centile line - return; - } - return ( - - ); + + return ( + + ) + }) + } + { lowerData.map((lowercentile: ICentile, centileIndex: number) => { + if (lowercentile.data.length < 1){ + // prevents a css `width` infinity error if no data presented to centile line + return + } + return ( + + ); })} {midData.map((centile: ICentile, centileIndex: number) => { - if (centile.data.length < 1) { - // prevents a css `width` infinity error if no data presented to centile line - return; - } - return ( - - ); + if (centile.data.length < 1){ + // prevents a css `width` infinity error if no data presented to centile line + return + } + return ( + + ); })} {upperData.map((uppercentile: ICentile, centileIndex: number) => { - if (uppercentile.data.length < 1) { - // prevents a css `width` infinity error if no data presented to centile line - return; - } - return ( - - ); + if (uppercentile.data.length < 1){ + // prevents a css `width` infinity error if no data presented to centile line + return + } + return ( + + ); })} + ); - })} + }) + } {/* Render the centiles - loop through the data set, create a line for each centile */} {/* On the old charts the 50th centile was thicker and darker and this led parents to believe it was therefore */} @@ -483,190 +495,150 @@ 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) => { - if (reference === 'cdc') { - if (referenceIndex === 0 || (measurementMethod === 'ofc' && referenceIndex > 1)) { + if (reference === "cdc"){ + if(referenceIndex === 0 || (measurementMethod === "ofc" && referenceIndex > 1)){ // this is a hack that needs fixing in future. It arrises because of the null data in the CDC neonate dataset (Fenton). Once the data is fixed, this can be removed. Only for weight is renders a line in the under ones. // it also removes the duplicate tooltips in the head circumference chart - return; + return + } } - } - return ( - - {referenceData.map((centile: ICentile, centileIndex: number) => { - // BMI charts also have SDS lines at -5, -4, -3, -2, 2, 3, 4, 5 - - if (centile.data !== null && centile.data.length < 1) { - // prevents a css `width` infinity error if no data presented to centile line - return; - } + return ( + + + { referenceData.map((centile: ICentile, centileIndex: number) => { - if (centileIndex % 2) { - // even index - centile is dashed + // BMI charts also have SDS lines at -5, -4, -3, -2, 2, 3, 4, 5 - 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} - /> - } - /> - ); - } else { - // uneven index - centile is continuous + if (centile.data !== null && centile.data.length < 1){ + // prevents a css `width` infinity error if no data presented to centile line + return + } - 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} + if (centileIndex %2) { + // 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} + /> + } /> - } - /> - ); - } - })} - - ); - })} + ); + + } 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} + /> + } + /> + ); + } + })} + + ); + }) + } { /* BMI SDS lines */ - measurementMethod === 'bmi' && - bmiSDSData && - reference === 'uk-who' && // only render for UK-WHO BMI charts since other references do not have SDS lines + measurementMethod === "bmi" && bmiSDSData && reference === "uk-who" && // only render for UK-WHO BMI charts since other references do not have SDS lines bmiSDSData.map((sdsReferenceData, index) => { return ( - + {sdsReferenceData.map((sdsLine: ICentile, sdsIndex: number) => { + // BMI charts have SDS lines at -5, -4, -3, 3, 3.33, 3.67, 4 - if (sdsLine.data.length < 1) { + if (sdsLine.data.length < 1){ // prevents a css `width` infinity error if no data presented to sds line - return; + return } + + // sds line is dashed + return ( + centileLabels && labelIndexInterval(chartScaleType, props.index) && props.index > 0 ? [sdsLine.sds]: null} + labelComponent={ + { + return labelAngle(sdsLine.data, index, chartScaleType, measurementMethod, domains); + } + } + style={{fill: styles.sdsLine.data.stroke, fontSize: 10.0}} + backgroundStyle={{fill:'white'}} + textAnchor={'end'} + dy={5} + /> + } + /> + ); - // sds line is dashed - return ( - - centileLabels && - labelIndexInterval(chartScaleType, props.index) && - props.index > 0 - ? [sdsLine.sds] - : null - } - labelComponent={ - { - return labelAngle( - sdsLine.data, - index, - chartScaleType, - measurementMethod, - domains, - ); - }} - style={{ fill: styles.sdsLine.data.stroke, fontSize: 10.0 }} - backgroundStyle={{ fill: 'white' }} - textAnchor={'end'} - dy={5} - /> - } - /> - ); })} - ); + ) }) } + { // puberty threshold lines uk90: pubertyThresholds !== null && @@ -684,7 +656,7 @@ function CentileChart({ angle={-90} dx={5} dy={ - // adjusts margins relatively to font size + // adjust label margins relatively to font size so text doesn't overlap the line styles.delayedPubertyThresholdLabel?.fontSize ? styles.delayedPubertyThresholdLabel.fontSize * 1.15 : 10 @@ -717,7 +689,7 @@ function CentileChart({ angle={-90} dx={5} dy={ - // adjusts margins relatively to font size + // adjust label margins relatively to font size so text doesn't overlap the line styles.nondisjunctionThresholdLabel?.fontSize ? styles.nondisjunctionThresholdLabel.fontSize * 1.15 : 10 @@ -736,7 +708,8 @@ function CentileChart({ {/* create a series for each child measurements data point: a circle for chronological age, a cross for corrected */} {/* If data points are close together, reduce the size of the point */} - {childMeasurements.map((childMeasurement: Measurement, index) => { + {childMeasurements.map((childMeasurement: Measurement, index) => { + const chronData: any = { age_type: 'chronological_age', age_error: childMeasurement.measurement_dates.chronological_decimal_age_error, @@ -749,23 +722,16 @@ function CentileChart({ gestational_age: childMeasurement.measurement_dates.corrected_gestational_age, centile: childMeasurement.measurement_calculated_values.chronological_centile, centile_band: childMeasurement.measurement_calculated_values.chronological_centile_band, - clinician_comment: - childMeasurement.measurement_dates.comments.clinician_chronological_decimal_age_comment, - lay_comment: - childMeasurement.measurement_dates.comments.lay_chronological_decimal_age_comment, - observation_date: new Date( - childMeasurement.measurement_dates.observation_date, - ).toLocaleDateString('en-UK'), + clinician_comment: childMeasurement.measurement_dates.comments.clinician_chronological_decimal_age_comment, + lay_comment: childMeasurement.measurement_dates.comments.lay_chronological_decimal_age_comment, + observation_date: new Date(childMeasurement.measurement_dates.observation_date).toLocaleDateString('en-UK'), observation_value_error: childMeasurement.child_observation_value.observation_value_error, - chronological_measurement_error: - childMeasurement.measurement_calculated_values.chronological_measurement_error, - chronological_decimal_age_error: - childMeasurement.measurement_dates.chronological_decimal_age_error, + chronological_measurement_error: childMeasurement.measurement_calculated_values.chronological_measurement_error, + chronological_decimal_age_error: childMeasurement.measurement_dates.chronological_decimal_age_error, x: childMeasurement.measurement_dates.chronological_decimal_age, y: childMeasurement.child_observation_value.observation_value, sds: childMeasurement.measurement_calculated_values.chronological_sds, - chronological_percentage_median_bmi: - childMeasurement.measurement_calculated_values.chronological_percentage_median_bmi, + chronological_percentage_median_bmi: childMeasurement.measurement_calculated_values.chronological_percentage_median_bmi }; const correctData: any = { age_type: 'corrected_age', @@ -775,28 +741,20 @@ function CentileChart({ bone_age_sds: childMeasurement.bone_age.bone_age_sds, bone_age_centile: childMeasurement.bone_age.bone_age_centile, bone_age_type: childMeasurement.bone_age.bone_age_type, - calendar_age: - childMeasurement.measurement_dates.corrected_decimal_age < 0.0383 - ? childMeasurement.measurement_dates.chronological_calendar_age - : childMeasurement.measurement_dates.corrected_calendar_age, // calendar age not corrected if < EDD + calendar_age: childMeasurement.measurement_dates.corrected_decimal_age < 0.0383 ? childMeasurement.measurement_dates.chronological_calendar_age : childMeasurement.measurement_dates.corrected_calendar_age, // calendar age not corrected if < EDD gestational_age: childMeasurement.measurement_dates.corrected_gestational_age, centile: childMeasurement.measurement_calculated_values.corrected_centile, centile_band: childMeasurement.measurement_calculated_values.corrected_centile_band, - clinician_comment: - childMeasurement.measurement_dates.comments.clinician_corrected_decimal_age_comment, + clinician_comment: childMeasurement.measurement_dates.comments.clinician_corrected_decimal_age_comment, lay_comment: childMeasurement.measurement_dates.comments.lay_corrected_decimal_age_comment, - observation_date: new Date( - childMeasurement.measurement_dates.observation_date, - ).toLocaleDateString('en-UK'), + observation_date: new Date(childMeasurement.measurement_dates.observation_date).toLocaleDateString('en-UK'), observation_value_error: childMeasurement.child_observation_value.observation_value_error, - corrected_measurement_error: - childMeasurement.measurement_calculated_values.corrected_measurement_error, + corrected_measurement_error: childMeasurement.measurement_calculated_values.corrected_measurement_error, corrected_decimal_age_error: childMeasurement.measurement_dates.corrected_decimal_age_error, x: childMeasurement.measurement_dates.corrected_decimal_age, y: childMeasurement.child_observation_value.observation_value, sds: childMeasurement.measurement_calculated_values.corrected_sds, - corrected_percentage_median_bmi: - childMeasurement.measurement_calculated_values.corrected_percentage_median_bmi, + corrected_percentage_median_bmi: childMeasurement.measurement_calculated_values.corrected_percentage_median_bmi }; if (isChartCrowded) { @@ -809,147 +767,136 @@ function CentileChart({ return ( - {childMeasurement.events_data.events_text && - childMeasurement.events_data.events_text.length > 0 && - (showChronologicalAge && !showCorrectedAge ? ( + + { childMeasurement.events_data.events_text && childMeasurement.events_data.events_text.length > 0 && ( + + showChronologicalAge && !showCorrectedAge ? // Events against chronological age only if corrected age not showing - - } - /> - ) : ( + + } + /> + : // Events against corrected age + + + } + /> + + ) + } - - } - /> - ))} - - {showChronologicalAge && - childMeasurement.bone_age.bone_age && - (showChronologicalAge || showCorrectedAge) && - !(showCorrectedAge && showChronologicalAge) && ( // bone age linked to chronological age - + { showChronologicalAge && childMeasurement.bone_age.bone_age && ( showChronologicalAge || showCorrectedAge ) && !( showCorrectedAge && showChronologicalAge ) && // bone age linked to chronological age + + } + /> + } + + { showCorrectedAge && childMeasurement.bone_age.bone_age && // bone age linked to corrected age + + } + /> + } + { showChronologicalAge && !showCorrectedAge && childMeasurement.bone_age.bone_age &&// bone age line linked to chronological age + - )} - - {showCorrectedAge && - childMeasurement.bone_age.bone_age && ( // bone age linked to corrected age - + }} + /> + } + + { showCorrectedAge && childMeasurement.bone_age.bone_age && // bone age line linked to corrected age + - )} - {showChronologicalAge && - !showCorrectedAge && - childMeasurement.bone_age.bone_age && ( // bone age line linked to chronological age - - )} - - {showCorrectedAge && - childMeasurement.bone_age.bone_age && ( // bone age line linked to corrected age - - )} - {showChronologicalAge && ( + }} + /> + } + { showChronologicalAge && ( )} - {showCorrectedAge && ( + { showCorrectedAge && ( + } style={styles.measurementPoint} name="corrected_age" /> )} - {showChronologicalAge && + { showChronologicalAge && showCorrectedAge && ( // only show the line if both cross and dot are rendered - )} + )} ); })} @@ -960,16 +907,17 @@ function CentileChart({ color={styles.referenceTextStyle.color} fontWeight={styles.referenceTextStyle.fontWeight} fontStyle={styles.referenceTextStyle.fontStyle} - > - {referenceText(reference)} - + >{referenceText(reference)} {(showToggle || allowZooming || enableExport || childMeasurements.length > 0) && ( + + + {/* Creates the Centile Label toggle button */} - { + { - {centileLabels ? : } - {centileLabels ? ( -
Hide Centile Labels
- ) : ( -
Show Centile Labels
- )} + { centileLabels ? + + : + + } + { centileLabels ? +
Hide Centile Labels
+ : +
Show Centile Labels
+ } + } {/* Creates the Zoom to see whole lifespan button */} - {childMeasurements.length > 0 && ( - - - fullScreenPressed()} - $color={styles.toggleStyle.activeColour} - size={5} - data-testid="zoom-button" - > - {fullScreen ? : } - -
Toggle Full Lifespan
- - - )} + { childMeasurements.length > 0 && + + + fullScreenPressed()} + $color={styles.toggleStyle.activeColour} + size={5} + data-testid="zoom-button" + > + { fullScreen ? + + : + + } + +
Toggle Full Lifespan
+ + + } {/* Creates the Copy button */} - {enableExport && ( - - - - - -
Copy Chart
- - - Copied! - - - )} + { enableExport && ( + + + + + +
Copy Chart
+ + + Copied! + + + ) + } + {showToggle && ( - - )} + + ) + } {/* {allowZooming && ( */} - - setUserDomains(null)} + - Reset Zoom - - - {/* ) + setUserDomains(null)} + > + Reset Zoom + + + {/* ) } */} )} @@ -1068,4 +1034,4 @@ function CentileChart({ ); } -export default CentileChart; +export default CentileChart; \ No newline at end of file diff --git a/src/RCPCHChart/RCPCHChart.stories.tsx b/src/RCPCHChart/RCPCHChart.stories.tsx index f8707ca..a92d415 100644 --- a/src/RCPCHChart/RCPCHChart.stories.tsx +++ b/src/RCPCHChart/RCPCHChart.stories.tsx @@ -484,7 +484,7 @@ export const CustomThemeStylesChart: Story = { chartStyle: { backgroundColour: '#FAF8F5', titleStyle: { - weight: 600, + weight: 800, colour: '#706A80', name: 'sans-serif', size: 16, @@ -523,7 +523,7 @@ export const CustomThemeStylesChart: Story = { weight: 500, colour: '#706A80', name: 'sans-serif', - size: 14, + size: 15, }, axisThresholdLabelTextStyle: { weight: 500, @@ -555,10 +555,10 @@ export const CustomThemeStylesChart: Story = { }, measurementStyle: { eventTextStyle: { - size: 16, + size: 14, name: 'sans-serif', - weight: 500, - colour: '#706A80', + weight: 400, + colour: '#760050', }, highlightedMeasurementFill: '#B89F81', measurementFill: '#760050', diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index 006497e..a7bd58e 100644 --- a/src/functions/makeAllStyles.ts +++ b/src/functions/makeAllStyles.ts @@ -77,7 +77,7 @@ function makeAllStyles( }, chartTitle: { fontFamily: chartStyle?.titleStyle?.name ?? 'Arial', - fontWeight: chartStyle?.subTitleStyle?.weight ?? 700, + fontWeight: chartStyle?.titleStyle?.weight ?? 700, color: chartStyle?.titleStyle?.colour ?? black, fontSize: chartStyle?.titleStyle?.size ?? 14, fontStyle: chartStyle?.titleStyle?.style === 'italic' ? 'italic' : 'normal', diff --git a/src/testParameters/styles/monochromeStyles.ts b/src/testParameters/styles/monochromeStyles.ts index fceda3e..b29ad1d 100644 --- a/src/testParameters/styles/monochromeStyles.ts +++ b/src/testParameters/styles/monochromeStyles.ts @@ -26,7 +26,7 @@ export const monochromeChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", @@ -317,7 +317,7 @@ export const chartObject: ChartStyle = { "name": "Arial", "colour": "#000000", "size": 14, - "style": "bold" + "weight": "700" }, "subTitleStyle": { "name": "Arial", diff --git a/src/testParameters/styles/tanner1Styles.ts b/src/testParameters/styles/tanner1Styles.ts index 57a3239..acffd41 100644 --- a/src/testParameters/styles/tanner1Styles.ts +++ b/src/testParameters/styles/tanner1Styles.ts @@ -26,7 +26,7 @@ export const Tanner1ChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", diff --git a/src/testParameters/styles/tanner2Styles.ts b/src/testParameters/styles/tanner2Styles.ts index 19e9d37..153da17 100644 --- a/src/testParameters/styles/tanner2Styles.ts +++ b/src/testParameters/styles/tanner2Styles.ts @@ -26,7 +26,7 @@ export const Tanner2ChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", diff --git a/src/testParameters/styles/tanner3Styles.ts b/src/testParameters/styles/tanner3Styles.ts index 2b21bbb..ff35c7a 100644 --- a/src/testParameters/styles/tanner3Styles.ts +++ b/src/testParameters/styles/tanner3Styles.ts @@ -26,7 +26,7 @@ export const Tanner3ChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", diff --git a/src/testParameters/styles/traditionalBoysStyles.ts b/src/testParameters/styles/traditionalBoysStyles.ts index b25434c..4b68867 100644 --- a/src/testParameters/styles/traditionalBoysStyles.ts +++ b/src/testParameters/styles/traditionalBoysStyles.ts @@ -26,7 +26,7 @@ export const traditionalBoyChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", diff --git a/src/testParameters/styles/traditionalGirlsStyles.ts b/src/testParameters/styles/traditionalGirlsStyles.ts index fcc08e5..40b1a34 100644 --- a/src/testParameters/styles/traditionalGirlsStyles.ts +++ b/src/testParameters/styles/traditionalGirlsStyles.ts @@ -26,7 +26,7 @@ export const traditionalGirlChartStyles: ChartStyle = { name: "Arial", colour: "#000000", size: 14, - style: 'bold' + weight: '700' }, subTitleStyle: { name: "Arial", From 222afb0970d913b734931fde101fe5999897f547 Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Tue, 22 Oct 2024 19:23:16 -0300 Subject: [PATCH 5/7] add props to customize tooltips --- src/CentileChart/CentileChart.tsx | 44 ++++++++++++++++----- src/RCPCHChart/RCPCHChart.mdx | 48 +++++++++++++---------- src/RCPCHChart/RCPCHChart.stories.tsx | 27 ++++++++----- src/SDSChart/SDSChart.tsx | 12 +++++- src/SubComponents/StyledButtonTooltip.tsx | 22 ++++++++--- src/functions/makeAllStyles.ts | 10 +++++ src/interfaces/StyleObjects.ts | 8 ++++ 7 files changed, 124 insertions(+), 47 deletions(-) diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index 9346594..8817a00 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -321,7 +321,7 @@ function CentileChart({ constrainToVisibleArea backgroundPadding={5} pointerLength={5} - cornerRadius={0} + cornerRadius={styles.toolTipBorderRadius} flyoutHeight={(datum) => { const numberOfLines = datum.text.length; return numberOfLines * 18 * textScaleFactor; // 18 is the line height @@ -919,7 +919,15 @@ function CentileChart({ {/* Creates the Centile Label toggle button */} { - + } - { centileLabels ? -
Hide Centile Labels
- : -
Show Centile Labels
- } - + + { centileLabels ? +
Hide Centile Labels
+ : +
Show Centile Labels
+ } } @@ -945,7 +953,15 @@ function CentileChart({ {/* Creates the Zoom to see whole lifespan button */} { childMeasurements.length > 0 && - + fullScreenPressed()} $color={styles.toggleStyle.activeColour} @@ -966,7 +982,15 @@ function CentileChart({ {/* Creates the Copy button */} { enableExport && ( - + {}, + enableExport: true, + exportChartCallback: (svg) => console.log(svg), theme: 'custom', customThemeStyles: { chartStyle: { @@ -495,6 +495,14 @@ export const CustomThemeStylesChart: Story = { name: 'sans-serif', size: 13, }, + tooltipStroke: '#5a526b', + tooltipBorderRadius: 4, + tooltipBackgroundColour: '#5a526b', + tooltipTextStyle: { + colour: '#fffdfd', + name: 'sans-serif', + size: 14, + }, toggleButtonActiveColour: '#B89F81', toggleButtonInactiveColour: '#e8dbcc', toggleButtonTextStyle: { @@ -503,13 +511,14 @@ export const CustomThemeStylesChart: Story = { size: 16, weight: 400, }, - tooltipStroke: '#EBE1D3', - tooltipBackgroundColour: '#5a526b', - tooltipTextStyle: { - colour: '#fffdfd', - name: 'sans-serif', - size: 14, - }, + toggleButtonTooltipStyle: { + backgroundColour: '#5a526b', + borderRadius: 4, + colour: 'white', + size: 14, + name: 'sans-serif', + weight: 400, + } }, axisStyle: { axisStroke: '#EDE7DD', diff --git a/src/SDSChart/SDSChart.tsx b/src/SDSChart/SDSChart.tsx index 7098eb1..622ae23 100644 --- a/src/SDSChart/SDSChart.tsx +++ b/src/SDSChart/SDSChart.tsx @@ -270,7 +270,7 @@ const SDSChart: React.FC = ( @@ -574,7 +574,15 @@ const SDSChart: React.FC = ( {/* Creates the Copy button - note if user has disabled this, must have an empty div to allow the toggle buttons to remain in the center */} { enableExport ? ( - + ` position: relative; .tooltip { @@ -9,12 +17,14 @@ export const StyledButtonTooltip = styled.div` left: 50%; transform: translateX(-50%); display: none; - background-color: #333; - color: #fff; + background-color: ${(props) => props.backgroundColor}; + color: ${(props) => props.color}; padding: 5px; - border-radius: 4px; - font-size: 14px; - font-family: 'Montserrat', Helvetica, Arial, sans-serif; + border-radius: ${(props) => props.borderRadius}px; + font-size: ${(props) => props.fontSize}px; + font-weight: ${(props) => props.fontWeight}; + font-style: ${(props) => props.fontStyle}; + font-family: ${(props) => props.fontFamily}; } &:hover .tooltip { diff --git a/src/functions/makeAllStyles.ts b/src/functions/makeAllStyles.ts index a7bd58e..795b5be 100644 --- a/src/functions/makeAllStyles.ts +++ b/src/functions/makeAllStyles.ts @@ -63,6 +63,7 @@ function makeAllStyles( fill: chartStyle?.backgroundColour ?? white, } }, + toolTipBorderRadius: chartStyle?.tooltipBorderRadius ?? 0, toolTipFlyout: { stroke: chartStyle?.tooltipStroke ?? midGrey, // tooltip border colour fill: chartStyle?.tooltipBackgroundColour ?? midGrey, // tooltip backgroundcolour @@ -299,6 +300,15 @@ function makeAllStyles( fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal', margin: 0 }, + toggleTooltipStyle: { + backgroundColor: chartStyle?.toggleButtonTooltipStyle?.backgroundColour ?? '#333', + color: chartStyle?.toggleButtonTooltipStyle?.colour ?? '#fff', + fontSize: chartStyle?.toggleButtonTooltipStyle?.size ?? 14, + fontFamily: chartStyle?.toggleButtonTooltipStyle?.name ?? `'Montserrat', Helvetica, Arial, sans-serif;`, + fontWeight: chartStyle?.toggleButtonTooltipStyle?.weight ?? 400, + fontStyle: chartStyle?.toggleButtonTooltipStyle?.style ?? 'regular', + borderRadius: chartStyle?.toggleButtonTooltipStyle?.borderRadius ?? 4, + }, referenceTextStyle: { fontSize: referenceStyle?.size ?? 8, fontFamily: referenceStyle?.name ?? 'Arial', diff --git a/src/interfaces/StyleObjects.ts b/src/interfaces/StyleObjects.ts index 4c99f44..d8ef237 100644 --- a/src/interfaces/StyleObjects.ts +++ b/src/interfaces/StyleObjects.ts @@ -4,12 +4,14 @@ export interface ChartStyle { subTitleStyle?: TextStyle; // style of text in subtitle: includes fontFamily, fontSize, colour, style, weight tooltipBackgroundColour?: string; //background colour of tooltip tooltipStroke?: string; //border colour of tooltip + tooltipBorderRadius?: number; // border radius of tooltip tooltipTextStyle?: TextStyle; // tooltip text: includes fontFamily, fontSize, colour, style, weight termFill?: string; // background colour of weight term area termStroke?: string; // border colour of weight term area toggleButtonInactiveColour?: string; // buttons - inactive colour toggleButtonActiveColour?: string; // buttons - active colour toggleButtonTextStyle?: TextStyle; // buttons text: includes fontFamily, fontSize, colour, style, weight + toggleButtonTooltipStyle?: ToggleButtonTooltipStyle; } export interface MeasurementStyle { measurementFill?: string; // measurement point fill colour - only apply to SDS charts @@ -56,6 +58,12 @@ export interface AxisThresholdLineStyle { } export interface ReferenceStyle extends TextStyle {} + +export interface ToggleButtonTooltipStyle extends TextStyle { + backgroundColour?: string; + borderRadius?: number; +} + export interface TextStyle { name?: string; colour?: string; From 2cf9007d5e733e0a43c3803753f3e296927acd9f Mon Sep 17 00:00:00 2001 From: eatyourpeas Date: Wed, 23 Oct 2024 19:47:47 +0100 Subject: [PATCH 6/7] patch --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bb49532..14f8007 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rcpch/digital-growth-charts-react-component-library", - "version": "7.1.1", + "version": "7.1.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", From 64cc9a878d57e21f0961787c04a63577b0bb031f Mon Sep 17 00:00:00 2001 From: Gabriel Freitas Date: Thu, 24 Oct 2024 14:26:45 -0300 Subject: [PATCH 7/7] add new styles to test parameters --- src/CentileChart/CentileChart.tsx | 42 +++++++++---------- src/SDSChart/SDSChart.tsx | 14 +++---- src/SubComponents/StyledButtonTooltip.tsx | 28 ++++++------- src/testParameters/styles/monochromeStyles.ts | 18 +++++++- 4 files changed, 59 insertions(+), 43 deletions(-) diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx index 8817a00..ac1fc5b 100644 --- a/src/CentileChart/CentileChart.tsx +++ b/src/CentileChart/CentileChart.tsx @@ -920,13 +920,13 @@ function CentileChart({ { 0 && fullScreenPressed()} @@ -983,13 +983,13 @@ function CentileChart({ { enableExport && ( = ( { enableExport ? ( ` position: relative; @@ -17,14 +17,14 @@ export const StyledButtonTooltip = styled.div<{ left: 50%; transform: translateX(-50%); display: none; - background-color: ${(props) => props.backgroundColor}; - color: ${(props) => props.color}; + background-color: ${(props) => props.$backgroundColor}; + color: ${(props) => props.$color}; padding: 5px; - border-radius: ${(props) => props.borderRadius}px; - font-size: ${(props) => props.fontSize}px; - font-weight: ${(props) => props.fontWeight}; - font-style: ${(props) => props.fontStyle}; - font-family: ${(props) => props.fontFamily}; + border-radius: ${(props) => props.$borderRadius}px; + font-size: ${(props) => props.$fontSize}px; + font-weight: ${(props) => props.$fontWeight}; + font-style: ${(props) => props.$fontStyle}; + font-family: ${(props) => props.$fontFamily}; } &:hover .tooltip { diff --git a/src/testParameters/styles/monochromeStyles.ts b/src/testParameters/styles/monochromeStyles.ts index b29ad1d..51be789 100644 --- a/src/testParameters/styles/monochromeStyles.ts +++ b/src/testParameters/styles/monochromeStyles.ts @@ -308,6 +308,22 @@ export const monochromeStyles = { "fontSize": 14, "fontWeight": "normal", "fontStyle": "normal" + }, + "toggleTooltipStyle": { + "backgroundColor": "#333", + "color": "#fff", + "fontSize": 14, + "fontFamily": "'Montserrat', Helvetica, Arial, sans-serif;", + "fontWeight": 400, + "fontStyle": "regular", + "borderRadius": 4, + }, + "referenceTextStyle": { + "fontSize": 8, + "fontFamily": "Arial", + "color": "#000000", + "fontWeight":200, + "fontStyle": "normal", } } @@ -342,7 +358,7 @@ export const chartObject: ChartStyle = { "colour": "#000000", "size": 0.25, "style": "normal" - } + }, } export const measurementObjects: MeasurementStyle = {