@visa/circle-packing v7.2.2

@visa/circle-packing

<circle-packing
  accessibility = {...}
  data = {[{"id":1,"Type":"World","Country":"","value":10},{data}]}
  displayDepth = {2}
  nodeAccessor = {"Type"}
  parentAccessor = {"Country"}
  sizeAccessor = {"value"}
/>

# Installation Steps

• Using npm

  $ npm i @visa/circle-packing

• Using yarn

  $ yarn add @visa/circle-packing

# Props Documentation

# Base Props <>

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

# 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
  if ( this.shouldZoom ) { // app has a switch enabling this interactivity on chart click
    zoomHandler(d); // call handler with datum object
  }
};

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 zoomHandler = d => {
  this.zoomToElement = d; // this is passed to zoomToNode prop
};

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

// an example of calling these from within a stencil.js component
<circle-packing
  data=[{data}]
  nodeAccessor = {"Type"}
  parentAccessor = {"Country"}
  sizeAccessor = {"value"}
  interactionKeys={['Type']}
  onClickEvent={this.onClickEvent}
  clickHighlight={this.currentClickedElement}
  clickStyle={this.clickStyle}
  onHoverEvent={this.onHoverEvent}
  onMouseOutEvent={this.onMouseOut}
  hoverHighlight={this.currentHoveredElement}
  hoverStyle={this.hoverStyle}
  zoomToNode={this.zoomToElement}
/>
//...

# Label Props <>

IDataLabelType Definition

ITooltipLabelType Definition

# Margin & Padding Props <>

IBoxModelType Definition

# Style Props <>