@domoinc/filled-shape
v4.0.3
Published
FilledShape - Domo Widget
Downloads
5
Readme
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);