Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 22:55:35 +00:00
Code Issues Projects Releases Wiki Activity

Chart UI Tweaks

Browse Source
This commit is contained in:
Colin McLeod
2015-09-21 20:58:13 -07:00
parent e2096ba9f4
commit 8dc3725b47
3 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/js/directives/directive-bar-chart.js
View File

@@ -6,12 +6,14 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
function insertLinebreaks(d) { function insertLinebreaks(d) {
var el = d3.select(this); var el = d3.select(this);
var words = d.split('\n'); var lines = d.split('\n');
el.text('').attr('y', -6); el.text('').attr('y', -6);
for (var i = 0; i < words.length; i++) { for (var i = 0; i < lines.length; i++) {
var tspan = el.append('tspan').text(words[i]); var tspan = el.append('tspan').text(lines[i].length > 18 ? lines[i].substring(0,15) + '...' : lines[i]);
if (i > 0) { if (i > 0) {
tspan.attr('x', -9).attr('dy', '1em'); tspan.attr('x', -9).attr('dy', '1em');
} else {
tspan.attr('class', 'primary');
} }
} }
} }

17
app/js/directives/directive-line-chart.js
View File

@@ -11,7 +11,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
link: function(scope, element) { link: function(scope, element) {
var seriesConfig = scope.series, var seriesConfig = scope.series,
series = seriesConfig.series, series = seriesConfig.series,
color = d3.scale.ordinal().range([ '#ff8c0d']), color = d3.scale.ordinal().range(scope.series.colors ? scope.series.colors : ['#ff8c0d']),
config = scope.config, config = scope.config,
labels = config.labels, labels = config.labels,
margin = { top: 15, right: 15, bottom: 35, left: 60 }, margin = { top: 15, right: 15, bottom: 35, left: 60 },
@@ -42,16 +42,15 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
.attr('transform', 'rotate(-90)') .attr('transform', 'rotate(-90)')
.attr('y', -50) .attr('y', -50)
.attr('dy', '.1em') .attr('dy', '.1em')
.style('text-anchor', 'middle') .style('text-anchor', 'middle');
.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
// Create X Axis SVG Elements // Create X Axis SVG Elements
var xLbl = vis.append('g').attr('class', 'x axis'); var xLbl = vis.append('g').attr('class', 'x axis');
var xTxt = xLbl.append('text') var xTxt = xLbl.append('text')
.attr('class', 'cap') .attr('class', 'cap')
.attr('y', 30) .attr('y', 30)
.attr('dy', '.1em') .attr('dy', '.1em')
.style('text-anchor', 'middle') .style('text-anchor', 'middle');
.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
// Create and Add tooltip // Create and Add tooltip
var tipHeight = 2 + (1.25 * (series ? series.length : 0.75)); var tipHeight = 2 + (1.25 * (series ? series.length : 0.75));
@@ -200,10 +199,10 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
tipWidth = 0, tipWidth = 0,
minTransY = (tips.selectAll('rect').node().getBoundingClientRect().height / 2) - margin.top; minTransY = (tips.selectAll('rect').node().getBoundingClientRect().height / 2) - margin.top;
tips.selectAll('text.label.y').text(function(d, i) { tips.selectAll('text.label.y').html(function(d, i) {
var yVal = series ? y0[series[i]] : y0; var yVal = series ? y0[series[i]] : y0;
yTotal += yVal; yTotal += yVal;
return (series ? series[i] : '') + ' ' + fmtLong(yVal) + ' ' + $translate.instant(labels.yAxis.unit); return (series ? series[i] : '') + ' <tspan class="metric">' + fmtLong(yVal) + ' ' + $translate.instant(labels.yAxis.unit) + '</tspan>';
}); });
tips.selectAll('text').each(function() { tips.selectAll('text').each(function() {
@@ -225,8 +224,8 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
} }
function updateFormats() { function updateFormats() {
xTxt.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')'); xTxt.html($translate.instant(labels.xAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.xAxis.unit) + ')</tspan>');
yTxt.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')'); yTxt.html($translate.instant(labels.yAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.yAxis.unit) + ')</tspan>');
fmtLong = $rootScope.localeFormat.numberFormat('.2f'); fmtLong = $rootScope.localeFormat.numberFormat('.2f');
xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r')); xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r')); yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r'));

12
app/less/charts.less
View File

@@ -39,12 +39,14 @@ svg {
fill: @primary-disabled; fill: @primary-disabled;
} }
&.y { }
text tspan:first-child {
fill: @primary;
}
}
.label {
text-transform: capitalize;
}
.metric {
text-transform: none;
} }
.marker { .marker {