@domoinc/arrow-single-value-indicator/src/DomoWidget.js

ArrowSingleValueIndicator - Domo Widget

(function(){

  function create(name) {
    var configs = {
      ArrowSingleValueIndicator: {
        chartName: 'Arrow Single Value Indicator',
        showArrow: {name: 'Show', value: true},
        trend: true
      },
      SingleValueIndicator: {
        chartName: 'Single Value Number',
        showArrow: {name: 'Hide', value: false},
        trend: false
      }
    };
    var widgetConfig = configs[name];

    return function(container) {
      // Use the bBox of the 'chartBounds' rect to find out
      // the size of the chart we need to render.

      var bBox = container.select('[id^=chartBounds]')
        .node()
        .getBBox();

      // Transform our chart's container to fit where the user placed the wiget
      container.attr('transform', 'translate(' + bBox.x + ',' + bBox.y + ')')

      //Get FontSize
      var fontSize;
      var prefixFontSize;
      var magnitudeFontSize;
      var postfixFontSize;

      //Get FontSize
      if (container.select('[id^=value]')[0][0]) {
        fontSize = parseInt(container.select('[id^=value]').style('font-size'));
      }
      if (container.select('[id^=prefix]')[0][0]) {
        prefixFontSize = parseInt(container.select('[id^=prefix]').style('font-size'));
      }
      if (container.select('[id^=magnitude]')[0][0]) {
        magnitudeFontSize = parseInt(container.select('[id^=magnitude]').style('font-size'));
      }
      if (container.select('[id^=suffix]')[0][0]) {
        postfixFontSize = parseInt(container.select('[id^=suffix]').style('font-size'));
      }


      //Clean up SVG
      container.selectAll('*').remove();

      var sampleData;
      if (widgetConfig.trend) {
        sampleData = [
          ['Current Quarter', 100],
          ['Last Quarter',    50],
        ];
      } else {
        sampleData = [['Sales', 100]];
      }

      // Set the data subscription name to what user specified.
      var dataName = container.node().parentNode.id;

      // This will allow the wiring experience to show the user
      // which widget item they are powering.
      container.attr('data-dm-field', dataName);

      var sampleDataObj = {};
      sampleDataObj[dataName] = {
        defaultValue: sampleData,
        columnNames: ['Indicator Name', 'Indicator Value']
      };

      //Initialize widget and set parameters.
      var widget = AutoWidgets.baseWidget(container.chart('ArrowSingleValueIndicator'))
        .c(widgetConfig)
        .sampleData(sampleDataObj);

      //Hide configs
      if (name === 'ArrowSingleValueIndicator') {
        widget._config.indicatorColor.name = null;
      } else if (name === 'SingleValueIndicator') {
        widget._config.arrowOffset.name = null;
        widget._config.offsetArrowLength.name = null;
        widget._config.offsetArrowHeadWidth.name = null;
        widget._config.offsetArrowWidth.name = null;
        widget._config.incTrendColor.name = null;
        widget._config.noTrendColor.name = null;
        widget._config.decTrendColor.name = null;
        widget._config.showArrow.name = null;

        widget._config.chartName.value = 'SingleValueIndicator';
      }

      // Used for sample data check.
      widget._sampleData = sampleData;

      // Pass the dataname to widget object so it knows which data to call
      // on render.
      widget.dataName(dataName);

      //update the font size config for when the widget is scaled manually in the artboard
      if (AutoWidgets.configs) {
        for (var key in AutoWidgets.configs) {
          if (AutoWidgets.configs[key].config && AutoWidgets.configs[key].config.widgetName.value === widget.dataName()) {
            if (fontSize) {
              AutoWidgets.configs[key].config.fontSize.value = fontSize;
            }

            if (prefixFontSize) {
              AutoWidgets.configs[key].config.prefixFontSize.value = prefixFontSize;
            }

            if (magnitudeFontSize) {
              AutoWidgets.configs[key].config.magnitudeFontSize.value = magnitudeFontSize;
            }

            if (postfixFontSize) {
              AutoWidgets.configs[key].config.postfixFontSize.value = postfixFontSize;
            }
          }
        }
      }

      widget.rasterizeNodes = null;

      // Return wiget so to keep the methods chainable.
      return widget;
    };
  }

  // d3.select('svg').append('line')
  //   .attr({
  //     x1: 250,
  //     x2: 250,
  //     y1: 0,
  //     y2: 500,
  //   })
  //   .style({
  //     stroke: 'black'
  //   })

  // d3.select('svg').append('line')
  //   .attr({
  //     x1: 0,
  //     x2: 500,
  //     y1: 250,
  //     y2: 250,
  //   })
  //   .style({
  //     stroke: 'black'
  //   })

  // d3.select('svg').append('line')
  //   .attr({
  //     x1: 750,
  //     x2: 750,
  //     y1: 0,
  //     y2: 500,
  //   })
  //   .style({
  //     stroke: 'black'
  //   })

  // d3.select('svg').append('line')
  //   .attr({
  //     x1: 500,
  //     x2: 1000,
  //     y1: 250,
  //     y2: 250,
  //   })
  //   .style({
  //     stroke: 'black'
  //   })

  AutoWidgets.register('DomoSingleValueIndicatorDomo', create('SingleValueIndicator'));
  AutoWidgets.register('DomoArrowSingleValueIndicatorDomo', create('ArrowSingleValueIndicator'));
})();