@domoinc/arrow-single-value-indicator/CreateWidget.js

ArrowSingleValueIndicator - Domo Widget

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

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

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