@domoinc/filled-shape v4.0.3

FilledShape

Enter an svg of any shape and the widget will make a transition fill

Configuration Options

chartName

Type: string
Default: "FilledShape"

Name of chart for Reporting

dashedOutline

Type: select
Default: {"name":"Show","value":true}

Show or hide the outline

delayTime

Type: number
Default: 250
Units: ms

Duration of time before the animation begins

height

Type: undefined
Default: undefined

Height of the chart

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

Maximum value for the gauge

minValue

Type: number
Default: 0

Minimum value for the gauge

outlineOpacity

Type: number
Default: 80
Units: %

Transparency factor of the outline (0 is transparent, 100 is full color)

shape

Type: d3 selection
Default: ""

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

strokeWidth

Type: number
Default: 1
Units: px

Width of the element's outline

transitionTime

Type: number
Default: 1000
Units: ms

Duration of time for the animation

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: undefined
Default: undefined

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)); }

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Item', 90]
];

var shape = d3.select('#ChangeMe');
// Initialize the widget
var chart = d3.select("[id^=DomoWidgetLockDomo]")
  .chart("FilledShape")
  .c({
    minValue: 0,
    maxValue: 100,
    delayTime: 250,
    transitionTime: 1000,
    strokeWidth: 1,
    shape: shape
  });

//Render the chart with data
chart.draw(data);

// setTimeout(function(){
//   chart.draw([['Item', 40]]);
// }, 3000);

// setTimeout(function(){
//   chart.draw([['Item', 50]]);
// }, 6000);