Source

widgets/bullet.js

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