@domoinc/ca-stage-progress

CAStageProgress

Configuration Options

chartName

Type: string
Default: "CAStageProgress"

Name of chart for reporting

checkmarkColor

Type: color
Default: "#6CBEA9"

Fill color for the checkmarks

height

Type: number
Default: 250
Units: px

Height of the widget

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.

rowColorEven

Type: color
Default: "#c4e4d6"

Fill color for the odd rows

rowColorOdd

Type: color
Default: "#b0dbc8"

Fill color for the even rows

rowFontColorEven

Type: color
Default: "#4a988a"

Font color for the text in the odd rows

rowFontColorOdd

Type: color
Default: "#4a988a"

Font color for the text in the even rows

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textColor

Type: undefined
Default: "#287872"

Font color for the titles

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 500
Units: px

Width of the widget

Data Definition

isCompleted

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[3]; }

isCurrency

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[4]; }

metricName

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[1] === undefined ? undefined : String(line[1]); }

stageName

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 parseFloat(line[2]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
//stageName, metricName, value, isCompleted, isCurrency
var data = [
		['North', 'Jan', '1422', 'true', 'number'],
		['North', 'Feb', '4560000', 'true', 'currency'],
		['North', 'Mar', '4560000', 'true', 'currency'],
		['North', 'Apr', '4560000', 'true', 'currency'],
		['South', 'Jan', '1422', 'true', 'number'],
		['South', 'Feb', '4560000', 'true', 'currency'],
		['South', 'Mar', '4560000', 'true', 'currency'],
		['South', 'Apr', '4560000', 'true', 'currency'],
		['East', 'Jan', '4560000', 'true', 'currency'],
		['East', 'Feb', '4560000', 'false', 'currency'],
		['East', 'Mar', '4560000', 'false', 'currency'],
		['East', 'Apr', '4560000', 'false', 'currency'],
		['West', 'Jan', '4560000', 'false', 'currency'],
		['West', 'Feb', '4560000', 'false', 'currency'],
		['West', 'Mar', '4560000', 'false', 'currency'],
		['West', 'Apr', '4560000', 'false', 'currency'],
	];

//Initialze the widget
var height = 250;
var width = 500;

var chart = d3.select('#vis')
	.append('svg')
	.attr({
		height: 500,
		width: 500,
	})
	.append('g')
	.attr('transform', 'translate(0,125)')
	.chart('CAStageProgress')
	.c({
		height: height,
		width: width
	});

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