Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-08 22:33:24 +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) {
var el = d3.select(this);
var words = d.split('\n');
var lines = d.split('\n');
el.text('').attr('y', -6);
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
for (var i = 0; i < lines.length; i++) {
var tspan = el.append('tspan').text(lines[i].length > 18 ? lines[i].substring(0,15) + '...' : lines[i]);
if (i > 0) {
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) {
var seriesConfig = scope.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,
labels = config.labels,
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('y', -50)
.attr('dy', '.1em')
.style('text-anchor', 'middle')
.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
.style('text-anchor', 'middle');
// Create X Axis SVG Elements
var xLbl = vis.append('g').attr('class', 'x axis');
var xTxt = xLbl.append('text')
.attr('class', 'cap')
.attr('y', 30)
.attr('dy', '.1em')
.style('text-anchor', 'middle')
.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
.style('text-anchor', 'middle');
// Create and Add tooltip
var tipHeight = 2 + (1.25 * (series ? series.length : 0.75));
@@ -200,10 +199,10 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
tipWidth = 0,
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;
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() {
@@ -225,8 +224,8 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
}
function updateFormats() {
xTxt.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
yTxt.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
xTxt.html($translate.instant(labels.xAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.xAxis.unit) + ')</tspan>');
yTxt.html($translate.instant(labels.yAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.yAxis.unit) + ')</tspan>');
fmtLong = $rootScope.localeFormat.numberFormat('.2f');
xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r'));

12
app/less/charts.less
View File

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