@cerner/terra-graphs-docs

Consumer documentation

For documentation on code: JSDocs

• Consumer documentation
  • Guides
  • Colors
  • Shapes
    • Dark
    • Light
  • Locale
    • Format
  • Important information
    • Errors
      • Input
      • Axis Type: Timeseries
    • Constraints
      • Legend
      • Axis
      • Data-point OnClick
      • Locale
      • Data-point values

Guides

• Carbon Lifecycle
• Dateline
• Eventline
• Axes
• Shape

Colors

Dark Colors

Constant	Value
BLUE	#176ba0
GREEN	#076e00
ORANGE	#b54900
PINK	#ae0868
PURPLE	#9c19a3
YELLOW	#ffc20a

Light Colors

Constant	Value
LIGHT_BLUE	#008fe0
LIGHT_GREEN	#4b9b1c
LIGHT_ORANGE	#e46511
LIGHT_PINK	#e16092
LIGHT_PURPLE	#bc70c7
LIGHT_YELLOW	#ffda6c

Common Colors

Constant	Value
BLACK	#1c1f21
GREY	#a7aaab
LAVENDER	#8374c2
WHITE	#ffffff

Note:

• In accordance with accessibility guidelines, Carbon colors must meet a contrast ratio of 3:1. Therefore, COLORS.YELLOW and COLORS.LIGHT_YELLOW will eventually be removed from the color palette in a future major release.
• If you are currently using COLORS.YELLOW or COLORS.LIGHT_YELLOW, please switch to a different color.

Shapes

Dark

Used via Carbon.helpers.SHAPES.DARK

Constant	Rendered as
CIRCLE
CROSS
DIAMOND
RHOMBUS
SQUARE
TEAR_DROP
TEAR_ALT
TRIANGLE
TRIANGLE_DOWN
VERTICAL_BAR
X

Light

Used via Carbon.helpers.SHAPES.LIGHT

Constant	Rendered as
CIRCLE
CROSS
DIAMOND
RHOMBUS
SQUARE
TEAR_DROP
TEAR_ALT
TRIANGLE
TRIANGLE_DOWN
VERTICAL_BAR
X

Carbon supports custom shapes as well! For more information on custom icon support, refer Carbon Shape

Locale

Language
de_DE
en_AU
en_CA
en_GB
en_US
es_ES
fr_FR
ja_JP
pt_BR
nl_NL
sv_SE

Format

Consumers can provide a JSON for any locale, the format needs to be:

const locale_custom = {
    decimal: ",",
    thousands: ".",
    grouping: [3],
    currency: ["", " €"],
    dateTime: "%A, der %e. %B %Y, %X",
    date: "%d.%m.%Y",
    time: "%H:%M:%S",
    days: [
        "Sonntag",
        "Montag",
        "Dienstag",
        "Mittwoch",
        "Donnerstag",
        "Freitag",
        "Samstag"
    ],
    shortDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    months: [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember"
    ],
    shortMonths: [
        "Jan",
        "Feb",
        "Mrz",
        "Apr",
        "Mai",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Okt",
        "Nov",
        "Dez"
    ],
    noData: "No Data"
};

Resources on locale based tick formatting:

• Number formatting
• Datetime formatting

Important information

Errors

Input

• No bind id is provided
• No axes information is provided [x, y]
• No lower and upper limits are provided for axes
• No Y axis label is provided
• No data is provided
• No data key is provided
• Data keys are not unique (If multiple data-sets are provided)
• No data values are not provided

Axis Type: Timeseries

• Data points are type timeseries but the x-axis bounds are default
• Data points are type default but the x-axis bounds are timeseries
• Data point values provided should be in UTC
• Data point values provided should be in RFC 3339 format

Constraints

Legend

• Legend only loads if the data-set label is provided
  • This is part of a functionality, any content using Graph API will have the ability to load data within graph and not show legend item
• Graph and Legend can be loaded in a separate containers when bindTo and bindLegendTo element id's are provided respectively

Axis

• If y2 axis is enabled, then the data-sets expect the yAxis: "y2" property

Data-point OnClick

• The onClick property needs to be a callback function
• Callback function will be called on click of a data point, this function will determine the action performed

Locale

• If locale is provided, ticks.format is expected to be provided as well otherwise there is no effect on the graph itself.

Data-point values

• values will not be subjected to any kind of pre-processing before generating the graph. values co-ordinates are expected to be linear/sorted.