Documentation
Tutorials
Getting started Advanced Widgets
Github Example Application

Source

widgets/bullet.js

  1. import processStructure from '@devoinc/applications-data-library/structures/bullet';
  2. import widgetFactory from '@devoinc/applications-builder/widgetFactory';
  4. /**
  5.  * The bullet chart displays a single measure and compares that
  6.  * measure to one or more measures to complement its meaning and
  7.  * displays it in the context of qualitative ranges (as varying
  8.  * intensities of a single hue) of performance, such as poor,
  9.  * satisfactory and good.
  10.  *
  11.  * @category Widgets
  12.  * @module Bullet
  13.  * @see [base](module-base.html)
  14.  * @see [collapser](module-collapser.html)
  15.  * @see [dataSearch](module-dataSearch.html)
  16.  * @see [download](module-download.html)
  17.  * @see [info](module-info.html)
  18.  * @see [lifeCycle](module-lifeCycle.html)
  19.  * @see [listeners](module-listeners.html)
  20.  * @see [loading](module-loading.html)
  21.  * @see [menu](module-menu.html)
  22.  * @see [screenshot](module-screenshot.html)
  23.  * @see [zoom](module-zoom.html)
  24.  * @tutorial widgets-bullet
  25.  */
  26. function mixin(self) {
  27.   return {
  28.     /**
  29.      * Set the column name with the field to be measured.
  30.      * @param {string} key - Column name.
  31.      * @instance
  32.      */
  33.     setKey(key) {
  34.       self.settings.key = key;
  35.     },
  37.     /**
  38.      * Set the qualitatives ranges. It's an array of three numbers.
  39.      * The qualitative ranges are displayed as varying intensities
  40.      * of a single hue.
  41.      *
  42.      * If this value is not specified, it takes the maximum value
  43.      * of the data and applies the following calculations:
  44.      * - maximum/3 for the poor value.
  45.      * - 2*maximum/3 for the average value.
  46.      * - maximum*1.1 for the good value.
  47.      * @param {number[]} ranges
  48.      * @param {number} ranges.0 - Represents a poor value.
  49.      * @param {number} ranges.1 - Represents a average value.
  50.      * @param {number} ranges.2 - Represents a good value.
  51.      * @default [max/3, 2*max/3, max * 1.1]
  52.      * @instance
  53.      */
  54.     setRanges(ranges) {
  55.       self.settings.ranges = ranges;
  56.     },
  58.     /**
  59.      * Set the column name with the value to be measured.
  60.      * @param {string} value - Column name.
  61.      * @instance
  62.      */
  63.     setValue(value) {
  64.       self.settings.value = value;
  65.     },
  67.     // Common
  68.     // -------------------------------------------------------------------------
  70.     /**
  71.      * Resize function
  72.      * @ignore
  73.      */
  74.     resize() {
  75.       //TODO
  76.     },
  78.     // Life Cycle
  79.     // -------------------------------------------------------------------------
  81.     /**
  82.      * Render function
  83.      * @param {object} orig - Data for process
  84.      * @ignore
  85.      */
  86.     render: (orig) => {
  87.       if (!self.el) return; // If not have element not render
  89.       let cfg = self.settings;
  90.       let data = processStructure(orig, cfg.key, cfg.value, cfg.ranges);
  92.       if (data && data.result && data.result.length) {
  93.         let marginLeft = 120 + ((data.longestTitle.length - 15) / 15) * 100;
  94.         let margin = { top: 20, right: 50, bottom: 20, left: marginLeft },
  95.           width = $(self.el).width() - margin.left - margin.right,
  96.           height = 70 - margin.top - margin.bottom;
  98.         let chart = d3.bullet().width(width).height(height);
  100.         d3.selectAll('#' + self.id + ' .lt-vapp-widget-graphic svg').remove();
  102.         var svg = d3
  103.           .select('#' + self.id + ' .lt-vapp-widget-graphic')
  104.           .selectAll('svg')
  105.           .data(data.result)
  106.           .enter()
  107.           .append('svg')
  108.           .attr('class', 'bullet')
  109.           .attr('width', width + margin.left + margin.right)
  110.           .attr('height', height + margin.top + margin.bottom)
  111.           .append('g')
  112.           .attr(
  113.             'transform',
  114.             'translate(' + margin.left + ',' + margin.top + ')'
  115.           )
  116.           .call(chart);
  118.         let title = svg
  119.           .append('g')
  120.           .style('text-anchor', 'end')
  121.           .attr('transform', 'translate(-6,' + height / 2 + ')');
  123.         title
  124.           .append('text')
  125.           .attr('class', 'title')
  126.           .text(function (d) {
  127.             return d.title;
  128.           });
  130.         self.widget = svg;
  131.       } else {
  132.         this.debugError({
  133.           msg: 'NO DATA',
  134.           console: {
  135.             method: 'error',
  136.             msg: 'No data arrive to render function',
  137.           },
  138.         });
  139.       }
  140.     },
  141.   };
  142. }
  144. export default widgetFactory(mixin);