@domoinc/anthem-trend-indicator

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 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 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

symbolAlignment

Type: select
Default: {"name":"Align Text Bottom","value":"bottom"}

The vertical alignment of the prefix, suffix, and abbreviation symbol relative to the number value

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

trendType

Type: select
Default: {"name":"Percent Change","value":true}

Trend percentage

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

useTrendPercentLogic

Type: boolean
Default: false

Flag that dictates whether or not to use the trend percent config

width

Type: number
Default: 0
Units: px

Data Definition

CurrentValue

Type: number

Default validate:

function (d) { return this.accessor(d) || this.accessor(d) === 0; }

Default accessor:

function (line) { return parseFloat(line[0]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  // ['Sales', 100]
  [100, 50]
];

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,

    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},

    symbolAlignment: {name: 'Align Text Top', value: 'top'},
    // symbolAlignment: {name: 'Align Text Bottom', value: 'bottom'},

    alignment: {name: 'Center Text', value: 'center'},
  });


if (chart._newConfig.showArrow.value.value) {
  chart._dataDefinition.PreviousValue = {
    type: 'number',
    validate: function(d) { return this.accessor(d) || this.accessor(d) === 0; },
    accessor: function(line) { return parseFloat(line[1]); }
  }
}

//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
 // });