@domoinc/arrow-single-value-indicator/README.md

ArrowSingleValueIndicator - Domo Widget

# 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:  
```js
function (d) { return true; }
```

Default accessor:  
```js
function (line) { return String(line[0]); }
```

#### Value
Type: `number`

Default validate:  
```js
function (d) { return !isNaN(this.accessor(d)); }
```

Default accessor:  
```js
function (line) { return Number(line[1]); }
```

## Events


#### Dispatch Events

#### External Events


## Example

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