@domoinc/person-bubble v3.0.2

PersonBubble

Configuration Options

animationDelay

Type: number
Default: 0
Units: ms

Specify the delay for widget animations

animationDuration

Type: number
Default: 1500
Units: ms

Specify the length you want the animation to animate for

animationType

Type: string
Default: "zoom"

Specify the type of D3 animation for the intro

chartName

Type: string
Default: "PersonBubble"

Name of chart for Reporting.

clippingPathID

Type: string
Default: null

If null, sets up automatic clipping path. If changed, uses the ID as the clipping path of the widget

height

Type: number
Default: 250
Units: px

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

radius

Type: number
Default: 30
Units: px

Sets the radius of the circle

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textSize

Type: number
Default: 12
Units: px

Font size of the initials

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 250
Units: px

Data Definition

ImageURL

Type: string

Default validate:

function (d) { return true; }

Default accessor:

function (line) { return String(line[1]); }

Name

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return String(line[0]); }

Events

Dispatch Events

dispatch:mouseover
dispatch:mouseout
dispatch:click

External Events

Example

//Setup some fake data
var data = [
  ['James Stewart', 'https://domo.domo.com/domoweb/avatar/full/domo/1193336668'],
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    width: 500,
    height: 500
  })
  .append('g')
  .chart('PersonBubble')
  .c({
    'radius': 100,
    'animationDuration': 2000,
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);