charts.ko.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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.pieChart()
  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. .call(chart);
  34. nv.utils.windowResize(chart.update);
  35. $(element).height($(element).width());
  36. return chart;
  37. }, function () {
  38. d3.selectAll(".nv-slice").on('click',
  39. function (d, i) {
  40. _options.onClick(d);
  41. });
  42. });
  43. },
  44. update: function (element, valueAccessor) {
  45. var value = valueAccessor();
  46. // do something with the updated value
  47. }
  48. };
  49. ko.bindingHandlers.barChart = {
  50. init: function (element, valueAccessor) {
  51. var _options = valueAccessor();
  52. var _data = _options.transformer(_options.data);
  53. $(element).height(300);
  54. nv.addGraph(function () {
  55. var chart = nv.models.multiBarChart()
  56. .margin({bottom: 100})
  57. .transitionDuration(300);
  58. chart.multibar
  59. .hideable(true);
  60. chart.xAxis
  61. .showMaxMin(true)
  62. .tickFormat(d3.format(',0f'));
  63. chart.yAxis
  64. .tickFormat(d3.format(',0f'));
  65. var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
  66. _d3.datum([
  67. {
  68. key: _options.field,
  69. values: _data
  70. }
  71. ])
  72. .call(chart);
  73. nv.utils.windowResize(chart.update);
  74. return chart;
  75. }, function () {
  76. d3.selectAll(".nv-bar").on('click',
  77. function (d, i) {
  78. _options.onClick(d);
  79. });
  80. });
  81. },
  82. update: function (element, valueAccessor) {
  83. var value = valueAccessor();
  84. // do something with the updated value
  85. }
  86. };