| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- // Licensed to Cloudera, Inc. under one
- // or more contributor license agreements. See the NOTICE file
- // distributed with this work for additional information
- // regarding copyright ownership. Cloudera, Inc. licenses this file
- // to you under the Apache License, Version 2.0 (the
- // "License"); you may not use this file except in compliance
- // with the License. You may obtain a copy of the License at
- //
- // http://www.apache.org/licenses/LICENSE-2.0
- //
- // Unless required by applicable law or agreed to in writing, software
- // distributed under the License is distributed on an "AS IS" BASIS,
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- // See the License for the specific language governing permissions and
- // limitations under the License.
- ko.bindingHandlers.pieChart = {
- init: function (element, valueAccessor) {
- var _options = valueAccessor();
- var _data = _options.transformer(_options.data);
- nv.addGraph(function () {
- var _chart = nv.models.pieChart()
- .x(function (d) {
- return d.label
- })
- .y(function (d) {
- return d.value
- })
- .height($(element).width())
- .showLabels(true).showLegend(false);
- var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
- _d3.datum(_data)
- .transition().duration(350)
- .each("end", _options.onComplete)
- .call(_chart);
- nv.utils.windowResize(_chart.update);
- $(element).height($(element).width());
- return _chart;
- }, function () {
- d3.selectAll(".nv-slice").on('click',
- function (d, i) {
- _options.onClick(d);
- });
- });
- },
- update: function (element, valueAccessor) {
- var value = valueAccessor();
- // do something with the updated value
- }
- };
- ko.bindingHandlers.barChart = {
- init: function (element, valueAccessor) {
- barChart(element, valueAccessor(), false);
- },
- update: function (element, valueAccessor) {
- var value = valueAccessor();
- // do something with the updated value
- }
- };
- ko.bindingHandlers.timelineChart = {
- init: function (element, valueAccessor) {
- barChart(element, valueAccessor(), true);
- },
- update: function (element, valueAccessor) {
- var value = valueAccessor();
- // do something with the updated value
- }
- };
- function barChart(element, options, isTimeline) {
- var _data = options.transformer(options.data);
- $(element).height(300);
- nv.addGraph(function () {
- var _chart;
- if (isTimeline) {
- _chart = nv.models.multiBarWithFocusChart();
- _chart.enableSelection();
- _chart.onSelectRange(function(from, to){
- console.log("SELECT RANGE!")
- console.log(from);
- console.log(to);
- });
- }
- else {
- _chart = nv.models.multiBarChart();
- }
- _chart.margin({bottom: 100})
- .transitionDuration(300);
- _chart.multibar
- .hideable(true);
- if (isTimeline) {
- _chart.xAxis
- .showMaxMin(true)
- .tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
- }
- else {
- _chart.xAxis
- .showMaxMin(true)
- .tickFormat(d3.format(',0f'));
- }
- _chart.yAxis
- .tickFormat(d3.format(',0f'));
- var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
- _d3.datum([
- {
- key: options.label,
- values: _data
- }
- ])
- .transition().duration(350)
- .each("end", options.onComplete)
- .call(_chart);
- nv.utils.windowResize(_chart.update);
- return _chart;
- }, function () {
- d3.selectAll(".nv-bar").on('click',
- function (d, i) {
- options.onClick(d);
- });
- });
- }
|