@domoinc/growing-shape v3.0.1

GrowingShape

A shape that can grow or shrink to a given value with a shadow shape at 100% size

Configuration Options

centerX

Type: number
Default: 0
Units: px

Set the x value where the shape will grow from (0 corresponds to the center of the shape)

centerY

Type: number
Default: 0
Units: px

Set the y value where the shape will grow from (0 corresponds to the center of the shape)

chartName

Type: string
Default: "GrowingShape"

Name of chart for Reporting

height

Type: number
Default: 250
Units: px

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.

maxScale

Type: number
Default: 1

The shape will never be scaled more than this value

maxValue

Type: number
Default: 100

Maximum value for the gauge

minScale

Type: number
Default: 0

The shape will always be scaled by at least this value

minValue

Type: number
Default: 0

Minimum value for the gauge

shape

Type: d3 selection
Default: ""

undefined

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showTransparentMaxShape

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

Show or hide the outline shape

updateSizeableConfigs

Type: boolean
Default: true

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

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

External Events

Example

//Setup some fake data
var data = [['name', 40]];

//Initialize the widget
var svg = d3.select('[id^=DomoWidgetLockDomo]');
var shape = d3.select('[id^=ChangeMe]');

var chart = svg.chart('GrowingShape')
  .c({
    shape: shape
  });

// chart.c('maxScale', 0.6);

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

var data2 = [['name', 100]];

setTimeout(function() {
  chart.draw(data2);
}, 1500);

setTimeout(function() {
  chart.draw(data);
}, 3000);