@domoinc/repeating-image-bar v1.0.2

RepeatingImageBar

Configuration Options

chartName

Type: string
Default: "RepeatingImageBar"

Name of chart for Reporting.

color

Type: color
Default: "#CA0000"

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.

maxValue

Type: number
Default: 100

Max value to use when scaling this widget

notFilledColor

Type: color
Default: "#D9D9D9"

Fill color that indicates something has no data

prefix

Type: string
Default: ""

repeatSelection

Type: d3Selection
Default: null

d3 selection of the DOM element to repeat

repeatingImagePadding

Type: number
Default: 0

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

suffix

Type: string
Default: ""

titleFontColor

Type: color
Default: "#888888"

Font color for the text

titleFontFamily

Type: string
Default: "Open Sans"

Font type for the text

titleFontSize

Type: number
Default: 12
Units: px

Font size for the text

titleFontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

Greater values correspond to increased font boldness (some fonts do not support every value)

titleLetterSpacing

Type: number
Default: 0
Units: px

Space between characters in the text

titlePadding

Type: number
Default: 10

updateSizeableConfigs

Type: boolean
Default: true

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

valueFontFamily

Type: string
Default: "Open Sans"

Font type for the text

valueFontSize

Type: number
Default: 18
Units: px

Font size for the text

valueFontWeight

Type: select
Default: {"name":"400 - Regular","value":400}

Greater values correspond to increased font boldness (some fonts do not support every value)

washoutColor

Type: color
Default: "#E4E5E5"

Fill color that indicates something is not highlighted

width

Type: number
Default: 250
Units: px

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:mouseover
external:mouseleave
external:mouseout

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['PAGE VIEWS', 42],
  ['PAGE VIEWS', 62]
];

var aHeight = 500;
var aWidth = 400;

//Initialize SVG
var g = d3.select('#vis')
  .append('svg')
  .attr({
    height: '550px',
    width: '550px'
  })
  .append('g')
  .attr('transform', 'translate(' + 50 + ', ' + 0 + ')');

g.append('rect')
  .attr('height', aHeight)
  .attr('width', aWidth)
  .attr('stroke', 'black')
  .style('fill', 'white')
  .style('fill-opacity', 0);


//Initialize Widget
var sampleDomElement = d3.select('#SampleDomElement');
var chart = g.chart('RepeatingImageBar')
  .c({
    width: aWidth,
    maxValue: 200,
    repeatSelection: sampleDomElement,
    suffix: '%',
    prefix: '$',
    notFilledColor: 'red'
  });

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



/*----------------------------------------------------------------------------------
Event Test
----------------------------------------------------------------------------------*/

//chart.on('dispatch:mouseenter', function (d) {console.log('ON: ',d)});
//chart.on('dispatch:mouseleave', function (d) {console.log('OFF: ', d)});

//setTimeout(function () {
//    chart.trigger('external:mouseenter', {})
//}, 1000);
//setTimeout(function () {
//    chart.trigger('external:mouseenter', {name:'PAGE VIEWS'})
//}, 2000);setTimeout(function () {
//    chart.trigger('external:mouseenter', {})
//}, 3000);
//setTimeout(function () {
//    chart.trigger('external:mouseout', {name:'PAGE VIEWS'})
//}, 4000);


setTimeout(function() {
  chart.c('color', 'blue')
    .draw(data)
}, 2000);