| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389 |
- // 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);
- $(element).css("marginLeft", "auto");
- $(element).css("marginRight", "auto");
- if (typeof _options.maxWidth != "undefined"){
- var _max = _options.maxWidth*1;
- $(element).width(Math.min($(element).parent().width(), _max));
- }
- nv.addGraph(function () {
- var _chart = nv.models.growingPieChart()
- .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(150)
- .each("end", _options.onComplete)
- .call(_chart);
- if (_options.fqs) {
- $.each(_options.fqs(), function (cnt, item) {
- if (item.field() == _options.field()) {
- _chart.selectSlices(item.filter());
- }
- });
- }
- nv.utils.windowResize(_chart.update);
- $(element).height($(element).width());
- $(element).parents(".card-widget").on("resize", function(){
- if (typeof _options.maxWidth != "undefined"){
- var _max = _options.maxWidth*1;
- $(element).width(Math.min($(element).parent().width(), _max));
- }
- $(element).height($(element).width());
- _chart.update();
- });
- return _chart;
- }, function () {
- var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
- _d3.selectAll(".nv-slice").on('click',
- function (d, i) {
- chartsUpdatingState();
- _options.onClick(d);
- });
- });
- }
- };
- ko.bindingHandlers.barChart = {
- init: function (element, valueAccessor) {
- barChartBuilder(element, valueAccessor(), false);
- }
- };
- ko.bindingHandlers.timelineChart = {
- init: function (element, valueAccessor) {
- barChartBuilder(element, valueAccessor(), true);
- }
- };
- ko.bindingHandlers.lineChart = {
- init: function (element, valueAccessor) {
- lineChartBuilder(element, valueAccessor());
- }
- };
- ko.bindingHandlers.mapChart = {
- render: function (element, valueAccessor) {
- var _options = valueAccessor();
- $(element).empty();
- $(element).css("position", "relative");
- $(element).css("marginLeft", "auto");
- $(element).css("marginRight", "auto");
- if (typeof _options.maxWidth != "undefined"){
- var _max = _options.maxWidth*1;
- $(element).width(Math.min($(element).parent().width(), _max));
- }
- $(element).height($(element).width() / 2.23);
- var _scope = typeof _options.data.scope != "undefined" ? String(_options.data.scope) : "world";
- var _data = _options.transformer(_options.data);
- var _maxWeight = 0;
- $(_data).each(function(cnt, item) {
- if (item.value > _maxWeight) _maxWeight = item.value;
- });
- var _chunk = _maxWeight / _data.length;
- var _mapdata = {};
- var _maphovers = {};
- var _fills = {};
- var _noncountries = [];
- if (_options.isScale) {
- _fills["defaultFill"] = HueColors.WHITE;
- var _colors = HueColors.scale(HueColors.LIGHT_BLUE, HueColors.DARK_BLUE, _data.length);
- $(_colors).each(function(cnt, item) {
- _fills["fill_" + cnt] = item;
- });
- $(_data).each(function(cnt, item) {
- var _place = item.label.toUpperCase();
- if (_place != null){
- _mapdata[_place] = {
- fillKey: "fill_" + (Math.floor(item.value / _chunk) - 1),
- id: _place,
- cat: item.obj.cat,
- value: item.obj.value,
- selected: item.obj.selected
- };
- _maphovers[_place] = item.value;
- }
- else {
- _noncountries.push(item);
- }
- });
- }
- else {
- _fills["defaultFill"] = HueColors.LIGHT_BLUE;
- _fills["selected"] = HueColors.DARK_BLUE;
- $(_data).each(function(cnt, item) {
- var _place = item.label.toUpperCase();
- if (_place != null){
- _mapdata[_place] = {
- fillKey: "selected",
- id: _place,
- cat: item.obj.cat,
- value: item.obj.value,
- selected: item.obj.selected
- };
- _maphovers[_place] = item.value;
- }
- else {
- _noncountries.push(item);
- }
- });
- }
- var _map = null;
- function createDatamap(element, options, fills, mapData, nonCountries, mapHovers) {
- _map = new Datamap({
- element: element,
- fills: fills,
- scope: _scope,
- data: mapData,
- onClick: function(data) {
- if (typeof options.onClick != "undefined") {
- chartsUpdatingState();
- options.onClick(data);
- }
- },
- done: function(datamap) {
- var _bubbles = [];
- if (options.enableGeocoding) {
- $(nonCountries).each(function(cnt, item){
- HueGeo.getCityCoordinates(item.label, function(lat, lng){
- _bubbles.push({
- fillKey: "selected",
- label: item.label,
- value: item.value,
- radius: 4,
- latitude: lat,
- longitude: lng
- });
- _map.bubbles(_bubbles, {
- popupTemplate: function(geo, data) {
- return '<div class="hoverinfo" style="text-align: center"><strong>' + data.label + '</strong><br/>' + item.value + '</div>'
- }
- });
- });
- });
- }
- },
- geographyConfig: {
- hideAntarctica: true,
- borderWidth: 1,
- borderColor: HueColors.DARK_BLUE,
- highlightOnHover: true,
- highlightFillColor: HueColors.DARK_BLUE,
- highlightBorderColor: HueColors.BLUE,
- selectedFillColor: HueColors.DARKER_BLUE,
- selectedBorderColor: HueColors.DARKER_BLUE,
- popupTemplate: function(geography, data) {
- var _hover = '';
- if (data != null) {
- _hover = '<br/>' + mapHovers[data.id];
- }
- return '<div class="hoverinfo" style="text-align: center"><strong>' + geography.properties.name + '</strong>' + _hover + '</div>'
- }
- }
- });
- options.onComplete();
- }
- createDatamap(element, _options, _fills, _mapdata, _noncountries, _maphovers)
- $(element).parents(".card-widget").one("resize", function(){
- ko.bindingHandlers.mapChart.render(element, valueAccessor);
- });
- },
- init: function (element, valueAccessor) {
- ko.bindingHandlers.mapChart.render(element, valueAccessor)
- },
- update: function (element, valueAccessor) {
- ko.bindingHandlers.mapChart.render(element, valueAccessor);
- }
- };
- function lineChartBuilder(element, options) {
- var _datum = options.transformer(options.datum);
- $(element).height(300);
- nv.addGraph(function () {
- var _chart = nv.models.lineWithBrushChart();
- if (_datum.length > 0 && _datum[0].values.length > 10){
- _chart.enableSelection();
- }
- _chart.onSelectRange(function(from, to){
- chartsUpdatingState();
- options.onSelectRange(from, to);
- });
- _chart.xAxis.showMaxMin(false);
- _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(_datum)
- .transition().duration(150)
- .each("end", options.onComplete)
- .call(_chart);
- nv.utils.windowResize(_chart.update);
- return _chart;
- }, function () {
- var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
- _d3.selectAll(".nv-line").on('click',
- function (d, i) {
- chartsUpdatingState();
- options.onClick(d);
- });
- });
- }
- function barChartBuilder(element, options, isTimeline) {
- var _datum = options.transformer(options.datum);
- $(element).height(300);
- nv.addGraph(function () {
- var _chart;
- var insertLinebreaks = function (d) {
- var _el = d3.select(this);
- var _mom = moment(d);
- if (_mom != null && _mom.isValid()) {
- var _words = _mom.format("hh:mm:ss YYYY-MM-DD").split(" ");
- _el.text('');
- for (var i = 0; i < _words.length; i++) {
- var tspan = _el.append("tspan").text(_words[i]);
- if (i > 0) {
- tspan.attr("x", 0).attr("dy", '15');
- }
- }
- }
- };
- if (isTimeline) {
- _chart = nv.models.multiBarWithBrushChart();
- if (_datum.length > 0 && _datum[0].values.length > 10){
- _chart.enableSelection();
- }
- _chart.onSelectRange(function(from, to){
- chartsUpdatingState();
- options.onSelectRange(from, to);
- });
- _chart.xAxis.tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
- _chart.multibar.hideable(true);
- _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
- _chart.onStateChange(options.onStateChange);
- _chart.onChartUpdate(function(){
- _d3.selectAll("g.nv-x.nv-axis g text").each(insertLinebreaks);
- });
- }
- else {
- var _isDiscrete = false;
- for (var j=0;j<_datum.length;j++){
- for (var i=0;i<_datum[j].values.length;i++){
- if (isNaN(_datum[j].values[i].x * 1)){
- _isDiscrete = true;
- break;
- }
- }
- }
- if (_isDiscrete){
- _chart = nv.models.growingDiscreteBarChart()
- .x(function(d) { return d.x })
- .y(function(d) { return d.y })
- .staggerLabels(true);
- }
- else {
- _chart = nv.models.multiBarWithBrushChart();
- if (_datum.length > 0 && _datum[0].values.length > 10){
- _chart.enableSelection();
- }
- _chart.xAxis.showMaxMin(false).tickFormat(d3.format(',0f'));
- _chart.multibar.hideable(true);
- _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
- _chart.onStateChange(options.onStateChange);
- _chart.onSelectRange(function(from, to){
- chartsUpdatingState();
- options.onSelectRange(from, to);
- });
- }
- }
- _chart.transitionDuration(0);
- _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(_datum)
- .transition().duration(150)
- .each("end", function(){
- options.onComplete();
- if (isTimeline) {
- _d3.selectAll("g.nv-x.nv-axis g text").each(insertLinebreaks);
- }
- }).call(_chart);
- $.each(options.fqs(), function(cnt, item){
- if (item.field() == options.field){
- _chart.selectBars(item.filter());
- }
- });
- nv.utils.windowResize(_chart.update);
- return _chart;
- }, function () {
- var _d3 = ($(element).find('svg').length > 0) ? d3.select($(element).find('svg')[0]) : d3.select($(element)[0]).append('svg');
- _d3.selectAll(".nv-bar").on("click",
- function (d, i) {
- chartsUpdatingState();
- options.onClick(d);
- });
- });
- }
- function chartsUpdatingState() {
- $(document).find("svg").css("opacity", "0.5");
- }
|