|
|
@@ -14,35 +14,54 @@
|
|
|
// See the License for the specific language governing permissions and
|
|
|
// limitations under the License.
|
|
|
|
|
|
+ko.HUE_CHARTS = {
|
|
|
+ TYPES: {
|
|
|
+ LINECHART: "lines",
|
|
|
+ BARCHART: "bars",
|
|
|
+ POINTCHART: "points",
|
|
|
+ PIECHART: "pie",
|
|
|
+ MAP: "map"
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
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));
|
|
|
- }
|
|
|
+ update: 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));
|
|
|
+ }
|
|
|
|
|
|
+ if ($(element).find('svg').length > 0 && _data.length == 0) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_data.length > 0 && isNaN(_data[0].value)) {
|
|
|
+ _data = [];
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+
|
|
|
+ if ($(element).is(":visible")) {
|
|
|
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);
|
|
|
+ .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);
|
|
|
+ .transition().duration(150)
|
|
|
+ .each("end", _options.onComplete != null ? _options.onComplete : void(0))
|
|
|
+ .call(_chart);
|
|
|
if (_options.fqs) {
|
|
|
$.each(_options.fqs(), function (cnt, item) {
|
|
|
if (item.field() == _options.field()) {
|
|
|
@@ -53,9 +72,9 @@ ko.bindingHandlers.pieChart = {
|
|
|
|
|
|
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).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());
|
|
|
@@ -66,32 +85,112 @@ ko.bindingHandlers.pieChart = {
|
|
|
}, 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);
|
|
|
- });
|
|
|
+ function (d, i) {
|
|
|
+ if (typeof _options.onClick != "undefined") {
|
|
|
+ chartsUpdatingState();
|
|
|
+ _options.onClick(d);
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
ko.bindingHandlers.barChart = {
|
|
|
- init: function (element, valueAccessor) {
|
|
|
+ update: function (element, valueAccessor) {
|
|
|
barChartBuilder(element, valueAccessor(), false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
ko.bindingHandlers.timelineChart = {
|
|
|
- init: function (element, valueAccessor) {
|
|
|
+ update: function (element, valueAccessor) {
|
|
|
barChartBuilder(element, valueAccessor(), true);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
ko.bindingHandlers.lineChart = {
|
|
|
- init: function (element, valueAccessor) {
|
|
|
+ update: function (element, valueAccessor) {
|
|
|
lineChartBuilder(element, valueAccessor());
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ko.bindingHandlers.leafletMapChart = {
|
|
|
+ update: function (element, valueAccessor) {
|
|
|
+ var _options = valueAccessor();
|
|
|
+ var _data = _options.transformer(valueAccessor().datum);
|
|
|
+
|
|
|
+
|
|
|
+ function getMapBounds(lats, lngs) {
|
|
|
+ lats = lats.sort();
|
|
|
+ lngs = lngs.sort();
|
|
|
+ return [
|
|
|
+ [lats[lats.length - 1], lngs[lngs.length - 1]], // north-east
|
|
|
+ [lats[0], lngs[0]] // south-west
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ if ($(element).data("map") != null) {
|
|
|
+ try {
|
|
|
+ $(element).data("map").remove();
|
|
|
+ }
|
|
|
+ catch (err) {
|
|
|
+ if (typeof console != "undefined") {
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var _lats = [];
|
|
|
+ _data.forEach(function (item) {
|
|
|
+ if (item.lat != null) {
|
|
|
+ _lats.push(item.lat);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var _lngs = [];
|
|
|
+ _data.forEach(function (item) {
|
|
|
+ if (item.lng != null) {
|
|
|
+ _lngs.push(item.lng);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $(element).height($(element).parents(".tab-pane").height() - 100);
|
|
|
+
|
|
|
+ var _map = null;
|
|
|
+ if (element._map != null) {
|
|
|
+ element._leaflet = false;
|
|
|
+ element._map.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_lats.length > 0 && _lngs.length > 0) {
|
|
|
+ try {
|
|
|
+ if (_map == null) {
|
|
|
+ _map = L.map($(element).attr("id"));
|
|
|
+ L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
|
|
|
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributorss'
|
|
|
+ }).addTo(_map);
|
|
|
+ }
|
|
|
+
|
|
|
+ _map.fitBounds(getMapBounds(_lats, _lngs));
|
|
|
+
|
|
|
+ _data.forEach(function (item) {
|
|
|
+ if (item.lng != null && item.lat != null) {
|
|
|
+ var _marker = L.marker([item.lat, item.lng]).addTo(_map);
|
|
|
+ if (item.label != null) {
|
|
|
+ _marker.bindPopup(item.label);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ catch (err) {
|
|
|
+ $.jHueNotify.error(err.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ element._map = _map;
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
ko.bindingHandlers.mapChart = {
|
|
|
render: function (element, valueAccessor) {
|
|
|
|
|
|
@@ -103,17 +202,17 @@ ko.bindingHandlers.mapChart = {
|
|
|
$(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));
|
|
|
- }
|
|
|
+ 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) {
|
|
|
+ $(_data).each(function (cnt, item) {
|
|
|
if (item.value > _maxWeight) _maxWeight = item.value;
|
|
|
});
|
|
|
|
|
|
@@ -127,12 +226,12 @@ ko.bindingHandlers.mapChart = {
|
|
|
if (_options.isScale) {
|
|
|
_fills["defaultFill"] = HueColors.WHITE;
|
|
|
var _colors = HueColors.scale(HueColors.LIGHT_BLUE, HueColors.DARK_BLUE, _data.length);
|
|
|
- $(_colors).each(function(cnt, item) {
|
|
|
+ $(_colors).each(function (cnt, item) {
|
|
|
_fills["fill_" + cnt] = item;
|
|
|
});
|
|
|
- $(_data).each(function(cnt, item) {
|
|
|
+ $(_data).each(function (cnt, item) {
|
|
|
var _place = item.label.toUpperCase();
|
|
|
- if (_place != null){
|
|
|
+ if (_place != null) {
|
|
|
_mapdata[_place] = {
|
|
|
fillKey: "fill_" + (Math.floor(item.value / _chunk) - 1),
|
|
|
id: _place,
|
|
|
@@ -150,9 +249,9 @@ ko.bindingHandlers.mapChart = {
|
|
|
else {
|
|
|
_fills["defaultFill"] = HueColors.LIGHT_BLUE;
|
|
|
_fills["selected"] = HueColors.DARK_BLUE;
|
|
|
- $(_data).each(function(cnt, item) {
|
|
|
- var _place = item.label.toUpperCase();
|
|
|
- if (_place != null){
|
|
|
+ $(_data).each(function (cnt, item) {
|
|
|
+ var _place = item.label.toUpperCase();
|
|
|
+ if (_place != null) {
|
|
|
_mapdata[_place] = {
|
|
|
fillKey: "selected",
|
|
|
id: _place,
|
|
|
@@ -169,37 +268,38 @@ ko.bindingHandlers.mapChart = {
|
|
|
}
|
|
|
|
|
|
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) {
|
|
|
+ onClick: function (data) {
|
|
|
if (typeof options.onClick != "undefined") {
|
|
|
chartsUpdatingState();
|
|
|
options.onClick(data);
|
|
|
}
|
|
|
},
|
|
|
- done: function(datamap) {
|
|
|
+ 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>'
|
|
|
- }
|
|
|
- });
|
|
|
+ $(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>'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -212,21 +312,23 @@ ko.bindingHandlers.mapChart = {
|
|
|
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];
|
|
|
- }
|
|
|
+ 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();
|
|
|
+ if (options.onComplete != null) {
|
|
|
+ options.onComplete();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
createDatamap(element, _options, _fills, _mapdata, _noncountries, _maphovers)
|
|
|
|
|
|
- $(element).parents(".card-widget").one("resize", function(){
|
|
|
+ $(element).parents(".card-widget").one("resize", function () {
|
|
|
ko.bindingHandlers.mapChart.render(element, valueAccessor);
|
|
|
});
|
|
|
},
|
|
|
@@ -239,43 +341,55 @@ ko.bindingHandlers.mapChart = {
|
|
|
};
|
|
|
|
|
|
|
|
|
-
|
|
|
function lineChartBuilder(element, options) {
|
|
|
var _datum = options.transformer(options.datum);
|
|
|
$(element).height(300);
|
|
|
+ if ($(element).find('svg').length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+ if (_datum.length > 0 && _datum[0].values.length > 0 && (isNaN(_datum[0].values[0].x) || isNaN(_datum[0].values[0].y))) {
|
|
|
+ _datum = [];
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
|
|
|
- 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'));
|
|
|
+ if ($(element).is(":visible")) {
|
|
|
+ nv.addGraph(function () {
|
|
|
+ var _chart = nv.models.lineWithBrushChart();
|
|
|
+ if (_datum.length > 0 && _datum[0].values.length > 10) {
|
|
|
+ _chart.enableSelection();
|
|
|
+ }
|
|
|
+ if (options.showControls != null) {
|
|
|
+ _chart.showControls(false);
|
|
|
+ }
|
|
|
+ _chart.onSelectRange(function (from, to) {
|
|
|
+ chartsUpdatingState();
|
|
|
+ options.onSelectRange(from, to);
|
|
|
+ });
|
|
|
+ _chart.xAxis.showMaxMin(false);
|
|
|
|
|
|
- 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);
|
|
|
+ _chart.yAxis
|
|
|
+ .tickFormat(d3.format(',0f'));
|
|
|
|
|
|
- nv.utils.windowResize(_chart.update);
|
|
|
+ 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 != null ? options.onComplete : void(0))
|
|
|
+ .call(_chart);
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
- });
|
|
|
+ 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) {
|
|
|
+ if (typeof options.onClick != "undefined") {
|
|
|
+ chartsUpdatingState();
|
|
|
+ options.onClick(d);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -283,105 +397,133 @@ 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 ($(element).find('svg').length > 0 && (_datum.length == 0 || _datum[0].values.length == 0)) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_datum.length > 0 && _datum[0].values.length > 0 && isNaN(_datum[0].values[0].y)) {
|
|
|
+ _datum = [];
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+
|
|
|
+ if ($(element).is(":visible")) {
|
|
|
+ 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 (isTimeline) {
|
|
|
+ if ($(element).find('svg').length > 0 && $(element).find('.nv-discreteBarWithAxes').length > 0) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
}
|
|
|
- }
|
|
|
- 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){
|
|
|
+ if (_datum.length > 0 && _datum[0].values.length > 10) {
|
|
|
_chart.enableSelection();
|
|
|
}
|
|
|
- _chart.xAxis.showMaxMin(false).tickFormat(d3.format(',0f'));
|
|
|
+ _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.onSelectRange(function(from, to){
|
|
|
- chartsUpdatingState();
|
|
|
- options.onSelectRange(from, to);
|
|
|
+ _chart.onChartUpdate(function () {
|
|
|
+ _d3.selectAll("g.nv-x.nv-axis g text").each(insertLinebreaks);
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
- _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);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- }).call(_chart);
|
|
|
-
|
|
|
- $.each(options.fqs(), function(cnt, item){
|
|
|
- if (item.field() == options.field){
|
|
|
- _chart.selectBars(item.filter());
|
|
|
+ }
|
|
|
+ if (_isDiscrete) {
|
|
|
+ if ($(element).find('svg').length > 0 && $(element).find('.nv-multiBarWithLegend').length > 0) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+ _chart = nv.models.growingDiscreteBarChart()
|
|
|
+ .x(function (d) {
|
|
|
+ return d.x
|
|
|
+ })
|
|
|
+ .y(function (d) {
|
|
|
+ return d.y
|
|
|
+ })
|
|
|
+ .staggerLabels(true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if ($(element).find('svg').length > 0 && $(element).find('.nv-discreteBarWithAxes').length > 0) {
|
|
|
+ $(element).find('svg').empty();
|
|
|
+ }
|
|
|
+ _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);
|
|
|
|
|
|
- nv.utils.windowResize(_chart.update);
|
|
|
+ _chart.yAxis
|
|
|
+ .tickFormat(d3.format(',0f'));
|
|
|
|
|
|
- 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);
|
|
|
+ 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 () {
|
|
|
+ if (options.onComplete != null) {
|
|
|
+ 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) {
|
|
|
+ if (typeof options.onClick != "undefined") {
|
|
|
+ chartsUpdatingState();
|
|
|
+ options.onClick(d);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function chartsUpdatingState() {
|