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

ArrowSingleValueIndicator - Domo Widget

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

var aHeight = 500;
var aWidth  = 500;

//Initialize the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({'height': 1000, 'width': 1000})
  .append("g")
  .attr("transform", "translate(250,250)")
  .chart("ArrowSingleValueIndicator")
  .c({
    width: aWidth,
    height: aHeight,
    postfixString: '%',
    prefixString: '',
    indicatorColor: '#EE6600',
    arrowOffset: -6,
    fontSize: 48,
    // fontWeight: {name:'700 - Bold', value:700},
    //offsetArrowLength: 10,
    //offsetArrowWidth: -5,
    //offsetArrowHeadWidth: 2,
    // showArrow: {name: 'Hide', value: false},
    alignment: {name: 'Center', value:'center'}
  });


//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);


/*----------------------------------------------------------------------------------
// Multi Draw Triggers
----------------------------------------------------------------------------------*/

//setTimeout(function () {
//  chart.config('showArrow', 'false').draw([['name', 50000]])
//}, 1000);
//
//setTimeout(function () {
//  chart.config('showArrow', 'true').draw([['name', -1]])
//}, 3000);
//
//
//setTimeout(function () {
//  chart.config('showArrow', 'false').draw([['name', 1]])
//}, 5000);


/*----------------------------------------------------------------------------------
// 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", "#2F3132")
//  .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
//  });