@domoinc/ca-stage-progress v2.0.3
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);