chart-bullet.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /**
  2. * Bullet charts
  3. */
  4. $.fn.sparkline.bullet = bullet = createClass($.fn.sparkline._base, {
  5. type: 'bullet',
  6. init: function (el, values, options, width, height) {
  7. var min, max, vals;
  8. bullet._super.init.call(this, el, values, options, width, height);
  9. // values: target, performance, range1, range2, range3
  10. this.values = values = normalizeValues(values);
  11. // target or performance could be null
  12. vals = values.slice();
  13. vals[0] = vals[0] === null ? vals[2] : vals[0];
  14. vals[1] = values[1] === null ? vals[2] : vals[1];
  15. min = Math.min.apply(Math, values);
  16. max = Math.max.apply(Math, values);
  17. if (options.get('base') === undefined) {
  18. min = min < 0 ? min : 0;
  19. } else {
  20. min = options.get('base');
  21. }
  22. this.min = min;
  23. this.max = max;
  24. this.range = max - min;
  25. this.shapes = {};
  26. this.valueShapes = {};
  27. this.regiondata = {};
  28. this.width = width = options.get('width') === 'auto' ? '4.0em' : width;
  29. this.target = this.$el.simpledraw(width, height, options.get('composite'));
  30. if (!values.length) {
  31. this.disabled = true;
  32. }
  33. this.initTarget();
  34. },
  35. getRegion: function (el, x, y) {
  36. var shapeid = this.target.getShapeAt(el, x, y);
  37. return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined;
  38. },
  39. getCurrentRegionFields: function () {
  40. var currentRegion = this.currentRegion;
  41. return {
  42. fieldkey: currentRegion.substr(0, 1),
  43. value: this.values[currentRegion.substr(1)],
  44. region: currentRegion
  45. };
  46. },
  47. changeHighlight: function (highlight) {
  48. var currentRegion = this.currentRegion,
  49. shapeid = this.valueShapes[currentRegion],
  50. shape;
  51. delete this.shapes[shapeid];
  52. switch (currentRegion.substr(0, 1)) {
  53. case 'r':
  54. shape = this.renderRange(currentRegion.substr(1), highlight);
  55. break;
  56. case 'p':
  57. shape = this.renderPerformance(highlight);
  58. break;
  59. case 't':
  60. shape = this.renderTarget(highlight);
  61. break;
  62. }
  63. this.valueShapes[currentRegion] = shape.id;
  64. this.shapes[shape.id] = currentRegion;
  65. this.target.replaceWithShape(shapeid, shape);
  66. },
  67. renderRange: function (rn, highlight) {
  68. var rangeval = this.values[rn],
  69. rangewidth = Math.round(this.canvasWidth * ((rangeval - this.min) / this.range)),
  70. color = this.options.get('rangeColors')[rn - 2];
  71. if (highlight) {
  72. color = this.calcHighlightColor(color, this.options);
  73. }
  74. return this.target.drawRect(0, 0, rangewidth - 1, this.canvasHeight - 1, color, color);
  75. },
  76. renderPerformance: function (highlight) {
  77. var perfval = this.values[1],
  78. perfwidth = Math.round(this.canvasWidth * ((perfval - this.min) / this.range)),
  79. color = this.options.get('performanceColor');
  80. if (highlight) {
  81. color = this.calcHighlightColor(color, this.options);
  82. }
  83. return this.target.drawRect(0, Math.round(this.canvasHeight * 0.3), perfwidth - 1,
  84. Math.round(this.canvasHeight * 0.4) - 1, color, color);
  85. },
  86. renderTarget: function (highlight) {
  87. var targetval = this.values[0],
  88. x = Math.round(this.canvasWidth * ((targetval - this.min) / this.range) - (this.options.get('targetWidth') / 2)),
  89. targettop = Math.round(this.canvasHeight * 0.10),
  90. targetheight = this.canvasHeight - (targettop * 2),
  91. color = this.options.get('targetColor');
  92. if (highlight) {
  93. color = this.calcHighlightColor(color, this.options);
  94. }
  95. return this.target.drawRect(x, targettop, this.options.get('targetWidth') - 1, targetheight - 1, color, color);
  96. },
  97. render: function () {
  98. var vlen = this.values.length,
  99. target = this.target,
  100. i, shape;
  101. if (!bullet._super.render.call(this)) {
  102. return;
  103. }
  104. for (i = 2; i < vlen; i++) {
  105. shape = this.renderRange(i).append();
  106. this.shapes[shape.id] = 'r' + i;
  107. this.valueShapes['r' + i] = shape.id;
  108. }
  109. if (this.values[1] !== null) {
  110. shape = this.renderPerformance().append();
  111. this.shapes[shape.id] = 'p1';
  112. this.valueShapes.p1 = shape.id;
  113. }
  114. if (this.values[0] !== null) {
  115. shape = this.renderTarget().append();
  116. this.shapes[shape.id] = 't0';
  117. this.valueShapes.t0 = shape.id;
  118. }
  119. target.render();
  120. }
  121. });