@domoinc/ca-icon-trends-with-text
v6.0.9
Published
CAIconTrendsWithText - Domo Widget
Downloads
24
Readme
CAIconTrendsWithText
Configuration Options
animationDuration
Type: number
Default: 2000
Units: ms
The duration of the line animation in ms.
chartName
Type: string
Default: "CAIconTrendsWithText"
Name of chart for Reporting.
drawFromCenter
Type: boolean
Default: true
Draws line chart from center of its height box
endPointRadius
Type: number
Default: 3
Units: px
Radius of the point at the end of the sparkline.
generalFillBadColor
Type: color
Default: "#E4584F"
Color meant to indicate the line is going down.
generalFillGoodColor
Type: color
Default: "#80C25D"
Color meant to indicate the line is going up.
generalStrokeBadColor
Type: color
Default: "#C92E25"
Stroke color meant to indicate the line is going down.
generalStrokeGoodColor
Type: color
Default: "#559E38"
Stroke color meant to indicate the line is going up.
height
Type: number
Default: 250
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.
lineWidth
Type: number
Default: 2
Units: px
Thickness of the sparkline
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Width of the chart.
Data Definition
Date
Type: date
Default validate:
function (d) {
return new Date(this.accessor(d)) !== 'Invalid Date';
}
Default accessor:
function (line) {
return line[0];
}
Value
Type: number
Default validate:
function (d) {
return !isNaN(this.accessor(d));
}
Default accessor:
function (line) {
return parseFloat(line[1]);
}
Events
Dispatch Events
External Events
Example
//Setup some fake data
var data = [
["2014-01-01", 44.0234],
["2014-02-01", 40.2131],
["2014-03-01", 25.4532],
["2014-04-01", 53.0385],
["2014-05-01", 44.2341],
["2014-06-01", 40.4543],
["2014-07-01", 30.3234],
["2014-08-01", 44.2342],
["2014-09-01", 40.3423],
["2014-10-01", 56.4232]
];
//Initialze the widget
var container = d3.select('#vis');
var bBox = container.select("[id^=chartBounds]")
.node()
.getBBox();
var gWidgetGroup = container.select("[id^=DomoWidgetLockDomo]");
// Transform our chart's container to fit where the user placed the wiget
gWidgetGroup.attr("transform", "translate(" + bBox.x + "," + bBox.y + ")")
.selectAll("*")
.remove();
var chart = gWidgetGroup
.chart('CAIconTrendsWithText')
.c({
width: bBox.width,
height: bBox.height
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
// setTimeout(function () { chart.draw();}, 10000);