@visa/parallel-plot v6.3.0

@visa/parallel-plot

<parallel-plot
  accessibility = {...}
  data = {[{"peer":"peers","filter":"all","spend":0.69},{data}]}
  valueAccessor = {"spend"}
  ordinalAccessor = {"peer"}
  seriesAccessor = {"filter"}
/>

# Installation Steps

• Using npm

  $ npm i @visa/parallel-plot

• Using yarn

  $ yarn add @visa/parallel-plot

# Props Documentation

# Base Props <>

ISubTitleType Definition

# Data Props <>

ISecondaryType Definition

# 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 parallel plot has ';
    if (d.removed) {
      updates += 'removed ' + d.removed + ' data point' + (d.removed > 1 ? 's ' : ' ');
    }
    if (d.added) {
      updates +=
        (d.removed ? 'and ' : '') +
        'added ' +
        d.added +
        (d.removed ? '' : d.added > 1 ? ' data points' : ' data point');
    }
    setChartUpdates(updates);
  } else if (d.updated) {
    const newUpdate = "The chart's data has changed, but no data points were removed or added.";
    setChartUpdates(
      newUpdate !== chartUpdates
        ? newUpdate
        : "The chart's data has changed again, but no data points 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

# 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
<parallel-plot
  data={[{ data }]}
  valueAccessor={'spend'}
  ordinalAccessor={'peer'}
  seriesAccessor={'filter'}
  interactionKeys={['filter']}
  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

ISeriesLabel Definition

ILegendType Definition

ITooltipLabelType Definition

# Margin & Padding Props <>

IBoxModelType Definition

# Style Props <>