@domoinc/person-bubble
v3.0.2
Published
PersonBubble - Domo Widget
Downloads
25
Readme
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);