@domoinc/multi-repeating-image-bars v2.0.1
MultiRepeatingImageBars
Configuration Options
chartName
Type: string
Default: MultiRepeatingImageBars
Name of chart for Reporting.
colors
Type: select
Default: [object Object]
height
Type: number
Default: 250
Units: px
Height of the chart
imageBarPadding
Type: number
Default: 20
Units: px
Padding below each repeating image bar
prefix
Type: string
Default:
repeatSelection
Type: d3Selection
Default: null
d3 selection of the DOM element to repeat
repeatingImagePadding
Type: number
Default: 0
Units: px
Pixels to the left of the repeating images
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
suffix
Type: string
Default: %
titleFontColor
Type: color
Default: #888888
titleFontFamily
Type: string
Default: Open Sans
titleFontSize
Type: number
Default: 12
Units: px
Text size
titleFontWeight
Type: select
Default: [object Object]
Note: Not all weights are supported by every font family.
titleLetterSpacing
Type: number
Default: 0
Units: px
The letter-spacing property increases or decreases the space between characters in a text
titlePadding
Type: number
Default: 10
Units: px
Pixels below each title
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueFontFamily
Type: string
Default: Open Sans
valueFontSize
Type: number
Default: 18
Units: px
Text size
valueFontWeight
Type: select
Default: [object Object]
Note: Not all weights are supported by every font family.
valueLetterSpacing
Type: number
Default: 0
Units: px
The letter-spacing property increases or decreases the space between characters in a text
washoutColor
Type: color
Default: #E4E5E5
Color used to indicate elements that are not being highlighted
width
Type: number
Default: 250
Units: px
Width of the chart
Data Definition
label
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return line[0] === undefined ? undefined : String(line[0]); }value
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
dispatch:mouseenter
dispatch:mouseleave
External Events
external:mouseenter
external:mouseout
Example
/*----------------------------------------------------------------------------------
Create Widget -> index.html
© 2011 - 2015 DOMO, INC.
----------------------------------------------------------------------------------*/
//Setup some fake data
var data = [
['VIDEO PLAY', 50],
['PHOTO VIEW', 89],
['LINK CLICKS', 75]
];
var aHeight = 200;
var aWidth = 400;
//Initialze the widget
var sampleDomElement = d3.select('#SampleDomElement');
var chart = d3.select("#vis")
.append("svg")
.attr({
height: '550px',
width: '550px'
})
.append("g")
.attr("transform", "translate(" + 45 + "," + 150 + ")")
.chart("MultiRepeatingImageBars")
.c({
width: aWidth,
height: aHeight,
repeatSelection: sampleDomElement,
suffix: '%'
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);