Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Latest commit

 

History

History
191 lines (156 loc) · 7.76 KB

PairedResult.md

File metadata and controls

191 lines (156 loc) · 7.76 KB
Raw

Paired Result

A native paired result graph, representing a pair of result with an optional median value. A pair can be represented in any co-ordinate on a graph. Most common pattern used is charting a Blood Pressure graph where the pair - High, low, mid are vertical data points connected by a vertical line.

Usage

Structure

You will not need all the properties in the example below. Check out optional/required properties explained in the JSON Properties section.

var root = {
    bindTo: "#root",
    axis: {
        x: {
            label: "Some X Label",
            lowerLimit: 0,
            upperLimit: 1000
        },
        y: {
            label: "Some Y Label",
            lowerLimit: 0,
            upperLimit: 200
        }
    },
    showLabel: true,
    showLegend: true,
    showVGrid: true,
    showHGrid: true
};
var data = {
    key: "uid_1",
    regions: {
        high: [
            {
                axis: "y",
                start: 120,
                end: 170,
                color: "#c8cacb"
            }
        ],
        low: [
            {
                axis: "y",
                start: 20,
                end: 100
            }
        ]
    },
    onClick: (onCloseCB, key, index, value) => {
        // onCloseCB needs to called by the consumer after popup is closed;
        // This is so that graphing api can remove the selected indicator from data point
    },
    values: [
        {
            high: {
                x: 200,
                y: 150,
                isCritical: true,
                region: {
                    start: 120,
                    end: 170,
                    color: "#c8cacb"
                }
            },
            low: {
                x: 200,
                y: 10
            },
            mid: {
                x: 200,
                y: 40
            }
        }
    ]
};
var pairedGraph = Carbon.api.graph(root);
pairedGraph.loadContent(Carbon.api.pairedResult(data));

JSON Properties

Root

Refer Graph Root for more details.

Data

Required

Property Name Expected Description
key string Unique id which represents the data-set
values Array Values

Optional

Property Name Expected Default Description
color string COLORS.BLACK Color for the data point
label object {} Display value for the data-set which the data points belong to
legendOptions object undefined Toggle to show shape, line and legend. Refer LegendOptions
onClick Function undefined Any action that can be performed when clicking on the data point
regions object {} Refer Regions
shape string SHAPES.DARK.CIRCLE Shape for representing the data points
yAxis string "y" Setting for using different Y based axis. For now: its either Y or Y2

LegendOptions

Each paired result can have a legendOptions object in Values level.

Optional

Property Name Expected Default Description
showLine boolean false Display Line in the legend.
showShape boolean true Display Shape in the legend.
style object {} Any style that can be applied. Refer Styles
showElement boolean true Toggle to hide legend when legend item has no data.
Style

Each paired result can have a style object in Values level.

Optional
Property Name Expected Default Description
strokeDashArray string "0" Applies stroke-dasharray CSS property to the SVG line.

Values

Property Name Expected Value Description
high object {x: "", y: "", isCritical: true, region: {}} Data point co-ordinate x and y, Refer Regions
low object {x: "", y: "", isCritical: true, region: {}} Data point co-ordinate x and y, Refer Regions
mid object {x: "", y: "", isCritical: true, region: {}} Data point co-ordinate x and y, Refer Regions

Note:

  • At least one of the high/low/medium should be provided with valid data.
  • isCritical toggle is disabled by default
  • When isCritical toggle is enabled, an indicator will be shown surrounding the data point
  • Providing invalid data to x or y will lead to an error.

Regions

Draws a Horizontal area along the X-Axis

  • Each data-set can have 1 or more regions for high, low and/or mid,
  • Each value can have a region object for high, low and/or mid,
  • Each pair type mentioned above needs to have a start and end,
  • If at least one region is defined for a value in the element, it will take precedence over the element's region and the element's region will not be displayed.
Property Name Expected Value Description
high object {start: number, end: number} Start and end @type: number
low object {start: number, end: number} Start and end @type: number
mid object {start: number, end: number} Start and end @type: number

Optional type properties

Property Name Expected Default Description
axis string "y" Defines which axis if represents from
color string #f4f4f4 #f4f4f4 Default color of the region area

Constraints

  • If data-set label display is not provided for high, low and mid, the legend item will not be shown as well