@domoinc/arrow-single-value-indicator
v6.0.2
Published
ArrowSingleValueIndicator - Domo Widget
Downloads
22
Readme
ArrowSingleValueIndicator
Configuration Options
abbrNumber
Type: select
Default: {"name":"Abbreviate","value":true}
Set the format of the number to be fully written out or abbreviated when the value is 1000 or greater (e.g. if abbreviated, 1000 will be 1K)
alignment
Type: select
Default: {"name":"Align Text Left","value":"left"}
The horizontal alignment of the text relative to the widget's chart bounds
animationDuration
Type: number
Default: 500
Units: ms
Duration of time for the initial animation
arrowOffset
Type: number
Default: -6
Distance of arrow from the text (negative is further away)
chartName
Type: string
Default: "ArrowSingleValueIndicator"
Name of chart for Reporting.
decTrendColor
Type: color
Default: "#E4584F"
Fill color that indicates something is bad
fontSize
Type: number
Default: 48
Units: px
Font size for the text
fontWeight
Type: select
Default: {"name":"300 - Light","value":300}
Greater values correspond to increased font boldness (some fonts do not support every value)
height
Type: number
Default: 0
Units: px
hoverEvent
Type: select
Default: {"name":"Enable","value":true}
Enable or disable the animation triggered by moving the mouse over the widget
incTrendColor
Type: color
Default: "#80C25D"
Fill color that indicates something is good
indicatorColor
Type: color
Default: "#333333"
Font color for the text
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.
magnitudeFontSize
Type: number
Default: null
Units: px
Font size for the abbreviation symbol for large numbers (e.g. if 1000 abbreviates to '1K', the symbol is 'K')
noTrendColor
Type: color
Default: "#E5E5E5"
Fill color that indicates something is neutral
numDecimal
Type: select
Default: {"name":"Default"}
Set the number of decimal places to be displayed
offsetArrowHeadWidth
Type: number
Default: 0
Units: px
Width of the arrowhead (0 is default, negative and positive is narrower and wider respectively)
offsetArrowLength
Type: number
Default: 0
Units: px
Length of the arrow (0 is default, negative and positive is shorter and longer respectively)
offsetArrowWidth
Type: number
Default: 0
Units: px
Width of the arrow (0 is default, negative and positive is narrower and wider respectively)
postfixFontSize
Type: number
Default: null
Units: px
Font size for the suffix (if left empty, the font size will be the same as the font size above)
postfixString
Type: string
Default: ""
Text added after the indicator
prefixFontSize
Type: number
Default: null
Units: px
Font size for the prefix (if left empty, the font size will be the same as the font size above)
prefixString
Type: string
Default: ""
Text added before the indicator
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showArrow
Type: select
Default: {"name":"Show","value":true}
Flag that dictates if the trend arrow is drawn
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
useContrastColors
Type: boolean
Default: false
Flag that dictates whether or not to use the good and bad color configs
width
Type: number
Default: 0
Units: px
Data Definition
Label
Type: string
Default validate:
function (d) { return true; }
Default accessor:
function (line) { return 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 = [
['Sales', 100]
// ['Sales', 1234567.1234567]
];
var aHeight = 500;
var aWidth = 500;
//Initialize the widget
var chart = d3.select('#vis')
.append('svg')
.attr({'height': 500, 'width': 500})
.append('g')
.attr('transform', 'translate(250,250)')
.chart('ArrowSingleValueIndicator')
.c({
width: aWidth,
height: aHeight,
useContrastColors: true,
// postfixString: '%',
// prefixString: '$',
//indicatorColor: 'red',
//arrowOffset: -6,
//fontSize: 48,
//prefixFontSize: 40,
//magnitudeFontSize: 40,
//postfixFontSize: 40,
//useContrastColors: true,
showArrow: {name:'Hide', value: false},
abbrNumber: {name: 'Abbreviate', value: true},
// abbrNumber: {name: 'Full Form', value: false},
numDecimal: {name: 'Default', value: undefined},
// numDecimal: {name: 'None', value: 0},
// numDecimal: {name: '.0', value: 1},
// numDecimal: {name: '.00', value: 2},
// numDecimal: {name: '.000', value: 3},
// numDecimal: {name: '.0000', value: 4},
// numDecimal: {name: '.00000', value: 5},
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
/*----------------------------------------------------------------------------------
// Multi Draw Triggers
----------------------------------------------------------------------------------*/
// setTimeout(function () {
// chart
// .config('showArrow', {name:'Show', value:true})
// // .config('showArrow', {name:'Hide', value:false})
// .draw([['name', 5000000000]])
// }, 1000);
// setTimeout(function () {
// chart
// // .config('showArrow', {name:'Show', value:true})
// .config('showArrow', {name:'Hide', value:false})
// .draw([['name', -1234567]])
// }, 2000);
// setTimeout(function () {
// chart
// .config('showArrow', {name:'Show', value:true})
// // .config('showArrow', {name:'Hide', value:false})
// .draw([['name', -1]])
// }, 3000);
/*----------------------------------------------------------------------------------
// Border and Alignment Lines
----------------------------------------------------------------------------------*/
// var svg = d3.select('svg');
// svg.insert('rect', ':first-child')
// .attr('height', aHeight)
// .attr('width', aWidth)
// .attr('stroke', 'black')
// .style('fill', 'white')
// .style('fill-opacity', 0);
// svg.insert('line', ':first-child')
// .attr({
// x1: aWidth / 2.0,
// y1: 0,
// x2: aWidth / 2.0,
// y2: aHeight
// })
// .style({
// stroke: '#000000',
// 'stroke-width': 1
// });
// var offset = 165;
// svg.insert('line', ':first-child')
// .attr({
// x1: offset,
// y1: aHeight / 2.0,
// x2: aHeight - offset,
// y2: aHeight / 2.0
// })
// .style({
// stroke: '#000000',
// 'stroke-width': 1
// });