Age Correction RadioButton and styles fixes

Fix for age correction radiobutton group, manifesting in toggle errors when two or more instances of the chart component were running in the same page.

Thanks to @dmc-cambric for picking this up.

v7.0.1

refactor styled-component props (enabled, margin, inactiveColour and activeColour) in to be transient as causing advisory error in console.

v7.0.0

Major Update

Breaking changes

Features

• Centile labels with toggle
• deprecates style props in favour of themes
• introduces Storybook 8.0
• introduces Jest and React Testing Library

Implementation breaking changes

• measurementsArray prop deprecated, replaced with measurements prop. This takes the form { [measurementMethod]: measurementsArray }
• All styles props have been deprecated and replaced by a theme prop which must be one of

Documentation

Props

The prop to define which chart type is rendered is: chartType?: 'centile' | 'sds'

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
• 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
• enableZoom?: boolean; Allows the user to zoom and pan the charts if set to true. If disabled, hides the buttons associated with this.
• chartType?: 'centile' | 'sds'; These are addressed below
• enableExport?: boolean | undefined; Cut/Paste button. Returns an SVG snapshot of the chart (without title) if set to true. If false, the buttons associated with this are hidden.
• exportChartCallback(svg?: any): any; Names the function within the client to return the exported SVG to.
• clinicianFocus?: boolean | undefined | null; Toggles tooltip advice between those aimed at clinicians and those more appropriate for patients/lay people.
• theme?: 'monochrome' | 'traditional' | 'tanner1' | 'tanner2' | 'tanner3' | 'custom'
• customThemeStyles?: discussed below

measurements

Note in v7.0.0 this prop has changed. Formerly measurementsArray, the structure has changed to conform to the following structure:

{
    height?: Measurement[]
    weight?: Measurment[]
    bmi?: Measurement[]
    ofc?: Measurement[]
}

Measurements should be passed to the component through the measurements prop using this structure.

This aligns the SDS and centile charts to accept the same structure. SDS and centile charts differ,
in that SDS charts multiple measurement methods on a single chart, whereas centile charts must have one instance for each measurement method.

Example

An array of height measurements for a girl returned from the RCPCH Growth API:

<RCPCHChart
    reference={'uk-who'}
    measurementMethod={'height'}
    sex={'female'}
    title={"Arthur Scargill - 12345678A"}
    measurements={
        height: [
            {
                birth_data: {
                    ...
                },
                bone_age: {
                    ...
                },
                child_observation_value: {
                    ...
                },
                events_data: {
                    ...
                },
                measurement_calculated_values: {
                    ...
                },
                measurement_dates: {
                    ...
                },
                plottable_data: {
                    ...
                }
            },
            ...
        ]
    } // this is the plottable child data
    midParentalHeightData={[]} // this is the optional plottable midparental height data from the RCPCH API
    theme={'traditional'}
    enableZoom
    chartType={'centile'}
    enableExport={false}
    exportChartCallback={()=>{}} // this is a callback for the export chart function if true
    clinicianFocus={false}
/>

In the same way, an implementation for the sds charts would be:

<RCPCHChart
    reference={'uk-who'}
    measurementMethod={'height'}
    sex={'female'}
    title={"Arthur Scargill - 12345678A"}
    measurements={
        height: [
            {
                birth_data: {
                    ...
                },
                bone_age: {
                    ...
                },
                child_observation_value: {
                    ...
                },
                events_data: {
                    ...
                },
                measurement_calculated_values: {
                    ...
                },
                measurement_dates: {
                    ...
                },
                plottable_data: {
                    ...
                }
            },
            ...
        ],
        weight: [
            {
                birth_data: {
                    ...
                },
                bone_age: {
                    ...
                },
                child_observation_value: {
                    ...
                },
                events_data: {
                    ...
                },
                measurement_calculated_values: {
                    ...
                },
                measurement_dates: {
                    ...
                },
                plottable_data: {
                    ...
                }
            },
            ...
        ],
        ofc: [],
        bmi: []
    } // this is the plottable child data
    midParentalHeightData={[]} // this is the optional plottable midparental height data from the RCPCH API
    theme={'traditional'}
    enableZoom
    chartType={'sds'}
    enableExport={false}
    exportChartCallback={()=>{}} // this is a callback for the export chart function if true
    clinicianFocus={false}
/>

For information the structure of the Measurement interface is provided here. This matches the response object from the RCPCH Growth API, therefore implementers should not need to use this interface:

export interface Measurement {
    birth_data: {
        birth_date: string;
        estimated_date_delivery: string;
        estimated_date_delivery_string: string;
        gestation_weeks: number;
        gestation_days: number;
        sex: 'male' | 'female';
    };
    child_observation_value: {
        measurement_method: 'height' | 'weight' | 'bmi' | 'ofc';
        observation_value: number;
        observation_value_error?: string;
    };
    measurement_dates: {
        chronological_calendar_age: string;
        chronological_decimal_age: number;
        corrected_calendar_age: string;
        corrected_decimal_age: number;
        corrected_gestational_age?: {
            corrected_gestation_weeks?: number;
            corrected_gestation_days?: number;
        };
        comments?:{
            clinician_corrected_decimal_age_comment?: string;
            lay_corrected_decimal_age_comment?: string;
            clinician_chronological_decimal_age_comment: string;
            lay_chronological_decimal_age_comment: string;
        }
        observation_date: string;
        corrected_decimal_age_error?: string;
        chronological_decimal_age_error?: string;
    };
    measurement_calculated_values: {
        chronological_centile: number;
        chronological_centile_band: string;
        chronological_measurement_error?: string;
        chronological_sds: number;
        corrected_centile: number;
        corrected_centile_band: string;
        corrected_measurement_error?: string;
        corrected_percentage_median_bmi?: number
        chronological_percentage_median_bmi?: number
        corrected_sds: number;
    };
    plottable_data: {
        centile_data: {
            chronological_decimal_age_data: {
                age_error?: string;
                age_type: 'chronological_age' | 'corrected_age';
                calendar_age: string;
                centile_band: string;
                clinician_comment: string;
                lay_comment: string;
                observation_error?: string;
                observation_value_error?: string;
                x: number;
                y: number;
                b?: number;
                centile?: number;
                sds?: number;
                bone_age_label?: string;
                events_text?: string[];
                bone_age_type?: string;
                bone_age_sds?: number;
                bone_age_centile?: number;
            };
            corrected_decimal_age_data: {
                age_error?: string;
                age_type: 'chronological_age' | 'corrected_age';
                calendar_age: string;
                centile_band: string;
                clinician_comment: string;
                lay_comment: string;
                observation_error?: string;
                observation_value_error?: string;
                x: number;
                y: number;
                b?: number;
                centile?: number;
                sds?: number;
                bone_age_label?: string;
                events_text?: string[];
                bone_age_type?: string;
                bone_age_sds?: number;
                bone_age_centile?: number;
                corrected_gestational_age?: string;
            };
        };
        sds_data: {
            chronological_decimal_age_data: {
                age_error?: string;
                age_type: 'chronological_age' | 'corrected_age';
                calendar_age: string;
                centile_band: string;
                clinician_comment: string;
                lay_comment: string;
                observation_error?: string;
                observation_value_error?: st...

v6.1.15

Fix for date parse error in tooltip for observation date
Identified by @NicoletteSutton and Ryan Lewis from the DHCW team.

v6.1.13

Patch for situation when measurements supplied begin at term and cross 2y and no age correction is recommended. This had the effect of the initial measurement not being rendered. (Thanks to @snield1150 for identifying this).

Other housekeeping issues - moving some dependencies into devDependencies.

v6.1.12

Refactor uncorrected to chronological

v6.1.1

Fix for bone age sds showing in bone age centile tooltip

v6.1.0

This release adds new features to 6.0 to include:

• new toggle button to view whole chart
• dates in tooltips
• new optional prop (clinicianFocus) which allows user to toggle between advice strings aimed at clinicians and those aimed at families

What's Changed

• Salford by @eatyourpeas in #32

Full Changelog: v6.0.1...v6.1.0

v6.0.1

Corrections to readme