HexagonJS
Edit Page
Visualization Bar
A component for showing a collection of status segments
Examples

HTML

<div id="visualizationBar" class="hx-flag-typography"></div>

JavaScript

hx.select('#visualizationBar').set([
  hx.visualizationBar({
    segments: [
      {
        id: 'late',
        label: 'Late',
        count: 11,
        type: 'danger',
      },
      {
        id: 'predictedDelays',
        label: 'Predicted Delays',
        count: 17,
        type: 'warning',
      },
      {
        id: 'onTime',
        label: 'On Time',
        count: 52,
      },
    ],
  }),
  hx.visualizationBar({
    title: 'Three segments',
    segments: [
      {
        id: 'healthy-used',
        label: 'Healthy and used',
        count: 22,
        type: 'dark',
      },
      {
        id: 'healthy-unused',
        label: 'Healthy and not in use',
        count: 3,
        type: 'medium',
      },
      {
        id: 'not-in-use',
        label: 'Unavailable',
        count: 99,
        type: 'light',
      },
    ],
  }),
  hx.visualizationBar({
    title: 'Two segments',
    segments: [
      {
        id: 'healthy-used',
        label: 'Healthy and used',
        count: 5,
        type: 'medium',
      },
      {
        id: 'healthy-unused',
        label: 'Healthy and not in use',
        count: 0,
        type: 'light',
      },
    ],
  }),
]);
Api
Prototypes
hx.VisualizationBaradded
Constructors
hx.VisualizationBarselectorString / HTMLElement / SelectionoptionsObject
Arguments
selectorString / HTMLElement / Selection
The selector to create the visualization bar inside
options
Properties
breakdownString
The 'breakdown text' to display below the visualization bar. This can be used to explain what each segment is, or how the calculation is performed.
segmentsArray[Segment]
The array of segments to display. At least one segment is required to render a visualization bar. Segments can also be shown with a zero value.
Segment
Properties
countNumber
The number to display in this segment. A count is required for each segment, however it can be 0
A unique identifier string used to ensure segments are rendered in the correct order
labelString
The text label shown below the segment. If a label is provided, the percentage of the total for the segment is also shown.
If no label is provided, only the count is shown on the segment.
typeString
The type (i.e. colour) of the segment.
Available types are:
  • default (or undefined type)
  • light
  • medium
  • dark
  • danger
  • warning
  • done
  • in-progress
  • todo
titleString
The title to display above the visualization bar
Functions
hx.visualizationBaroptionsObjectadded
Create a visualization bar component wrapped in a selection
Arguments
options
Properties
breakdownString
The 'breakdown text' to display below the visualization bar. This can be used to explain what each segment is, or how the calculation is performed.
segmentsArray[Segment]
The array of segments to display. At least one segment is required to render a visualization bar. Segments can also be shown with a zero value.
Segment
Properties
countNumber
The number to display in this segment. A count is required for each segment, however it can be 0
A unique identifier string used to ensure segments are rendered in the correct order
labelString
The text label shown below the segment. If a label is provided, the percentage of the total for the segment is also shown.
If no label is provided, only the count is shown on the segment.
typeString
The type (i.e. colour) of the segment.
Available types are:
  • default (or undefined type)
  • light
  • medium
  • dark
  • danger
  • warning
  • done
  • in-progress
  • todo
titleString
The title to display above the visualization bar