Skip to content

Commit

Permalink
Allowing the Terms panel to have a horizontal bar chart + Sankey fix (#…
Browse files Browse the repository at this point in the history 
…338)

LGTM, thanks Peter!
  • Loading branch information
@iampeter @athana
iampeter authored and athana committed May 19, 2019
1 parent 4a786f7 commit a2c53c8
Show file tree
Hide file tree
Showing 6 changed files with 940 additions and 218 deletions.
2 changes: 1 addition & 1 deletion dist/app/panels/map/lib/map.japan.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 7 additions & 6 deletions src/app/panels/sankey/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ define([
var links = [];
var count = 0;

var addNode = function(key, category) {
var addNode = function(key, fcount, category) {
var k = category + "-" + key;
var existing = nodes[k];
if (!!existing) {
Expand All @@ -72,21 +72,22 @@ define([
nodes[k] = {
node: id,
name: key,
category: category
category: category,
// fixedValue: fcount
};

return id;
};

var processNodes = function(parent, parentCount, data, category) {
for (var ob in data) {
var id1 = addNode(data[ob].value, category + 1);
var id1 = addNode(data[ob].value, data[ob].count, category + 1);

if (parent !== null) {
links.push({
source: parent,
target: id1,
value: parentCount
value: data[ob].count
});
}

Expand Down Expand Up @@ -248,7 +249,7 @@ define([

var format = function (d) {
var f = d3.format(",.0f");
return f(d) + " TWh";
return f(d) + "";
};
var color = d3.scale.category10();

Expand Down Expand Up @@ -284,7 +285,7 @@ define([
});

link.append("title").text(function (d) {
return d.source.name + " \u2192 " + d.target.name + "\n" + format(d.value);
return d.source.name + " \u2192 " + d.target.name + ", " + d.value;
});

svg.append("g").style("font", "10px sans-serif").selectAll("text").data(nodes).enter().append("text").attr("x", function (d) {
Expand Down
8 changes: 7 additions & 1 deletion src/app/panels/terms/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@
<textarea class="input-xxlarge" type="text" ng-model="panel.chartColors" ng-list></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span6" ng-show="panel.chart == 'bar'">
<label class="small" >Bar Chart Arrangement</label>
<select class="input-small" ng-model="panel.bar_chart_arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
</div>
<div class="row-fluid">
<h5>Real-time (Auto-refresh)</h5>
<div class="span1">
Expand All @@ -96,4 +102,4 @@ <h5>Real-time (Auto-refresh)</h5>
<label class="small">Interval (seconds) <tip>The minimum value is 2.</tip></label>
<input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
</div>
</div>
</div>
14 changes: 7 additions & 7 deletions src/app/panels/terms/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@
<table class="small" ng-show="panel.arrangement == 'vertical'">
<tr ng-repeat="term in legend">
<td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
<td>{{dashboard.numberWithCommas(term.data[0][1].toFixed(panel.decimal_points))}}</td>
<td>{{dashboard.numberWithCommas(dataByAlignment(term.data).toFixed(panel.decimal_points))}}</td>
</tr>
</table>

<!-- horizontal legend above -->
<div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
<span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{dashboard.numberWithCommas(term.data[0][1].toFixed(panel.decimal_points))}}) </span>
<span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{dashboard.numberWithCommas(dataByAlignment(term.data).toFixed(panel.decimal_points))}}) </span>
</div><br>

</div>
Expand All @@ -64,7 +64,7 @@
<table class="small">
<tr ng-repeat="term in legend">
<td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
<td>{{dashboard.numberWithCommas(term.data[0][1].toFixed(panel.decimal_points))}}</td>
<td>{{dashboard.numberWithCommas(dataByAlignment(term.data).toFixed(panel.decimal_points))}}</td>
</tr>
</table>
</div>
Expand All @@ -76,13 +76,13 @@
<table class="small" ng-show="panel.arrangement == 'vertical'">
<tr ng-repeat="term in legend">
<td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
<td>{{dashboard.numberWithCommas(term.data[0][1].toFixed(panel.decimal_points))}}</td>
<td>{{dashboard.numberWithCommas(dataByAlignment(term.data).toFixed(panel.decimal_points))}}</td>
</tr>
</table>

<!-- horizontal legend below -->
<div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
<span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{dashboard.numberWithCommas(term.data[0][1].toFixed(panel.decimal_points))}}) </span>
<span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{dashboard.numberWithCommas(dataByAlignment(term.data).toFixed(panel.decimal_points))}}) </span>
</div><br>

</div>
Expand All @@ -98,7 +98,7 @@
<tbody ng-style="{height: row.height}">
<tr ng-repeat="term in data" ng-show="showMeta(term)">
<td>{{term.label}}</td>
<td>{{term.data[0][1].toFixed(panel.decimal_points)}}</td>
<td>{{dataByAlignment(term.data).toFixed(panel.decimal_points)}}</td>
<td>
<span ng-hide="term.meta == 'other'">
<i class='icon-search pointer' ng-click="build_search(term)"></i>
Expand All @@ -111,4 +111,4 @@
<!-- END Table -->
<!-- Dummy div for testing color name -->
<div id="colorTest"></div>
</div>
</div>
42 changes: 31 additions & 11 deletions src/app/panels/terms/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ function (angular, app, _, $, kbn) {
lastColor : '',
spyable : true,
show_queries:true,
bar_chart_arrangement: 'vertical',
error : '',
chartColors : querySrv.colors,
refresh: {
Expand Down Expand Up @@ -374,6 +375,10 @@ function (angular, app, _, $, kbn) {
return true;
};

$scope.dataByAlignment = function(data) {
return ($scope.panel.chart === 'bar' && $scope.panel.bar_chart_arrangement === 'horizontal') ? data[0][0] : data[0][1];
};

});

module.directive('termsChart', function(querySrv,dashboard,filterSrv) {
Expand Down Expand Up @@ -418,13 +423,13 @@ function (angular, app, _, $, kbn) {
// Add plot to scope so we can build out own legend
if(scope.panel.chart === 'bar') {

var yAxisConfig = {
var labelAxisConfig = {
show: true,
min: scope.yaxis_min,
color: "#c8c8c8"
};
if (scope.panel.logAxis) {
_.defaults(yAxisConfig, {
_.defaults(labelAxisConfig, {
ticks: function (axis) {
var res = [], v, i = 1,
ticksNumber = 8,
Expand All @@ -438,23 +443,38 @@ function (angular, app, _, $, kbn) {
} while (v < max);
return res;
},
transform: function (v) {
return v === 0 ? 0 : Math.log(v); },
inverseTransform: function (v) {
return v === 0 ? 0 : Math.exp(v); }
// transform: function (v) {
// return v === 0 ? 0 : Math.log(v); },
// inverseTransform: function (v) {
// return v === 0 ? 0 : Math.exp(v); }
});
}

plot = $.plot(elem, chartData, {
var resultChartData;

if (scope.panel.bar_chart_arrangement === 'horizontal') {
resultChartData = _.map(chartData, function(item){
var result = _.clone(item);
result.data = _.map(result.data, function(v) {
return [v[1], v[0]];
});

return result;
});
} else {
resultChartData = chartData;
}

plot = $.plot(elem, resultChartData, {
legend: { show: false },
series: {
lines: { show: false },
bars: { show: true, fill: 1, barWidth: 0.8, horizontal: false },
bars: { show: true, fill: 1, barWidth: 0.8, horizontal: scope.panel.bar_chart_arrangement === 'horizontal' },
shadowSize: 1
},
// yaxis: { show: true, min: 0, color: "#c8c8c8" },
yaxis: yAxisConfig,
xaxis: { show: false },
yaxis: scope.panel.bar_chart_arrangement === 'horizontal' ? { show: false } : labelAxisConfig,
xaxis: scope.panel.bar_chart_arrangement === 'horizontal' ? labelAxisConfig : { show: false },
grid: {
borderWidth: 0,
borderColor: '#eee',
Expand Down Expand Up @@ -538,7 +558,7 @@ function (angular, app, _, $, kbn) {
var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) {
if (item) {
var value = scope.panel.chart === 'bar' ? item.datapoint[1] : item.datapoint[1][0][1];
var value = scope.panel.chart === 'bar' ? item.datapoint[scope.panel.bar_chart_arrangement === 'horizontal' ? 0 : 1] : item.datapoint[1][0][1];
// if (scope.panel.mode === 'count') {
// value = value.toFixed(0);
// } else {
Expand Down
Loading

0 comments on commit a2c53c8

Please sign in to comment.