charts.ko.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. ko.bindingHandlers.pieChart = {
  17. init: function (element, valueAccessor) {
  18. var _options = valueAccessor();
  19. var _data = _options.transformer(_options.data);
  20. nv.addGraph(function () {
  21. var _chart = nv.models.growingPieChart()
  22. .x(function (d) {
  23. return d.label
  24. })
  25. .y(function (d) {
  26. return d.value
  27. })
  28. .height($(element).width())
  29. .showLabels(true).showLegend(false);
  30. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  31. _d3.datum(_data)
  32. .transition().duration(350)
  33. .each("end", _options.onComplete)
  34. .call(_chart);
  35. $.each(_options.fqs(), function(cnt, item){
  36. if (item.field() == _options.field()){
  37. _chart.selectSlices(item.filter());
  38. }
  39. });
  40. nv.utils.windowResize(_chart.update);
  41. $(element).height($(element).width());
  42. return _chart;
  43. }, function () {
  44. d3.selectAll(".nv-slice").on('click',
  45. function (d, i) {
  46. _options.onClick(d);
  47. });
  48. });
  49. },
  50. update: function (element, valueAccessor) {
  51. var value = valueAccessor();
  52. // do something with the updated value
  53. }
  54. };
  55. ko.bindingHandlers.barChart = {
  56. init: function (element, valueAccessor) {
  57. barChart(element, valueAccessor(), false);
  58. },
  59. update: function (element, valueAccessor) {
  60. var value = valueAccessor();
  61. // do something with the updated value
  62. }
  63. };
  64. ko.bindingHandlers.timelineChart = {
  65. init: function (element, valueAccessor) {
  66. barChart(element, valueAccessor(), true);
  67. },
  68. update: function (element, valueAccessor) {
  69. var value = valueAccessor();
  70. // do something with the updated value
  71. }
  72. };
  73. function barChart(element, options, isTimeline) {
  74. var _data = options.transformer(options.data);
  75. $(element).height(300);
  76. nv.addGraph(function () {
  77. var _chart;
  78. if (isTimeline) {
  79. _chart = nv.models.multiBarWithFocusChart();
  80. _chart.enableSelection();
  81. _chart.onSelectRange(options.onSelectRange);
  82. }
  83. else {
  84. _chart = nv.models.multiBarChart();
  85. }
  86. _chart.margin({bottom: 100})
  87. .transitionDuration(300);
  88. _chart.multibar
  89. .hideable(true);
  90. if (isTimeline) {
  91. _chart.xAxis
  92. .showMaxMin(true)
  93. .tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
  94. }
  95. else {
  96. _chart.xAxis
  97. .showMaxMin(true)
  98. .tickFormat(d3.format(',0f'));
  99. }
  100. _chart.yAxis
  101. .tickFormat(d3.format(',0f'));
  102. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  103. _d3.datum([
  104. {
  105. key: options.label,
  106. values: _data
  107. }
  108. ])
  109. .transition().duration(350)
  110. .each("end", options.onComplete)
  111. .call(_chart);
  112. nv.utils.windowResize(_chart.update);
  113. return _chart;
  114. }, function () {
  115. d3.selectAll(".nv-bar").on('click',
  116. function (d, i) {
  117. options.onClick(d);
  118. });
  119. });
  120. }