@visa/dumbbell-plot v8.0.1

@visa/dumbbell-plot

<dumbbell-plot
  accessibility = {...}
  data = {[{"date":"2016-01-01T00:00:00.000Z","category":"Card A","value":7670994739,"offset":-8},{data}]}
  valueAccessor = {"value"}
  ordinalAccessor = {"date"}
  seriesAccessor = {"category"}
/>

# Installation Steps

• Using npm

  $ npm i @visa/dumbbell-plot

• Using yarn

  $ yarn add @visa/dumbbell-plot

# Props Documentation

# Base Props <>

ISubTitleType Definition

IKeywordsHighlightType Definition

# Data Props <>

# Accessibility Props <>

IAccessibilityType Definition

// accessibility = { ...accessibility, onChangeFunc: d => changeHandler(d)}
// example of setting updates on page based on changeFunc custom events
const changeHandler = d => {
  if (d.updated && (d.removed || d.added)) {
    let updates = 'The dumbbell chart has ';
    if (d.removed) {
      updates += 'removed ' + d.removed + ' bar' + (d.removed > 1 ? 's ' : ' ');
    }
    if (d.added) {
      updates += (d.removed ? 'and ' : '') + 'added ' + d.added + (d.removed ? '' : d.added > 1 ? ' bars' : ' bar');
    }
    setChartUpdates(updates);
  } else if (d.updated) {
    const newUpdate = "The chart's data has changed, but no bars were removed or added.";
    setChartUpdates(
      newUpdate !== chartUpdates ? newUpdate : "The chart's data has changed again, but no bars were removed or added."
    );
  }
};

# Localization Props <>

ILocalizationType Definition

# Annotation Props <>

annotations object definition

annotations is an array of objects which needs to have the following properties within them. See the detailed api specifications from d3-svg-annotation, along with additional properties layered on top of that work, documented below.

# Axis Props <>

IAxisType Definition

# Bar & Marker Props <>

IBarStyleType Definition

IMarkerStyleType Definition

IFocusStyleType Definition

# Event Props <>

Events in stencil.js dispatch Custom DOM events for other components to handle, we use Stencil's @Event() decorator to emit events (click, hover, mouseOut) from end user activity on our charts.

IClickStyleType Definition

IHoverStyleType Definition

// example of interactivity code
// note this only tracks a single click, you need your own logic to build the array of currnet selections made by user and then pass that result back to chart
//...
const clickHandler = evt => {
  const d = evt.detail.data; // data is located here
  const t = evt.detail.target; // chart mark/label clicked is located here

  this.currentClickedElement = [d]; // this is passed to clickHighlight prop
};

const hoverHandler = evt => {
  const d = evt.detail.data; // data is located here
  const t = evt.detail.target; // chart mark/label clicked is located here

  this.currentHoveredElement = d; // this is passed to hoverHighlight prop
};

const mouseOutHandler = evt => {
  this.currentHoveredElement = ''; // this is passed to hoverHighlight prop
};

// an example of calling these from within a stencil.js component
<dumbbell-plot
  data={[{ data }]}
  valueAccessor={'value'}
  ordinalAccessor={'date'}
  seriesAccessor={'category'}
  interactionKeys={['date']}
  onClickEvent={this.onClickEvent}
  clickHighlight={this.currentClickedElement}
  clickStyle={this.clickStyle}
  onHoverEvent={this.onHoverEvent}
  onMouseOutEvent={this.onMouseOut}
  hoverHighlight={this.currentHoveredElement}
  hoverStyle={this.hoverStyle}
/>;
//...

# Label Props <>

IDataLabelType Definition

IDifferenceLabelType Definition

ISeriesLabel Definition

ILegendType Definition

ITooltipLabelType Definition

# Margin & Padding Props <>

IBoxModelType Definition

# Style Props <>

# Reference Line Props <>

IReferenceStyleType Definition

referenceLines object definition

referenceLines is an array of objects which needs to have the following properties within them.

# Unit Testing Props <>

These props are used in development mode only to facilitate robust testing of charts, the should not be leveraged in a production deployments.