Skip to content

Commit

Permalink
Improvments to NVD3 charts (axis labels & min bar width) (#629)
Browse files Browse the repository at this point in the history
  • Loading branch information
mistercrunch authored Jun 17, 2016
1 parent 04388a7 commit 3105c9f
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 5 deletions.
21 changes: 21 additions & 0 deletions caravel/assets/visualizations/nvd3_vis.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,24 @@ g.caravel path {
font-weight: bold;
font-size: 15px !important;
}

text.nv-axislabel {
// font-weight: bold;
font-size: 14px;
}

.dist_bar .slice_container {
overflow-x: auto;
}

.dist_bar svg.nvd3-svg {
width: auto;
}

.bar .slice_container {
overflow-x: auto;
}

.bar svg.nvd3-svg {
width: auto;
}
35 changes: 33 additions & 2 deletions caravel/assets/visualizations/nvd3_vis.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// JS
var $ = window.$ || require('jquery');
var d3 = window.d3 || require('d3');
var px = window.px || require('../javascripts/modules/caravel.js');
var nv = require('nvd3');
Expand All @@ -8,12 +7,23 @@ var nv = require('nvd3');
require('../node_modules/nvd3/build/nv.d3.min.css');
require('./nvd3_vis.css');

const minBarWidth = 15;

function nvd3Vis(slice) {
var chart;
var colorKey = 'key';

var render = function () {
d3.json(slice.jsonEndpoint(), function (error, payload) {
var width = slice.width();
var barchartWidth = function () {
var bars = d3.sum(payload.data, function (d) { return d.values.length; });
if (bars * minBarWidth > width) {
return bars * minBarWidth;
} else {
return width;
}
};
slice.container.html('');
if (error) {
if (error.responseText) {
Expand Down Expand Up @@ -53,9 +63,11 @@ function nvd3Vis(slice) {
.showControls(true)
.groupSpacing(0.1);

width = barchartWidth();
chart.width(width);
chart.xAxis
.showMaxMin(false)
.staggerLabels(true);
.staggerLabels(true)

chart.stacked(fd.bar_stacked);
break;
Expand All @@ -71,6 +83,8 @@ function nvd3Vis(slice) {
.showMaxMin(false);

chart.stacked(fd.bar_stacked);
width = barchartWidth();
chart.width(width);
break;

case 'pie':
Expand Down Expand Up @@ -206,6 +220,22 @@ function nvd3Vis(slice) {
return px.color.category21(d[colorKey]);
});

if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
var distance = 0;
if (fd.bottom_margin) {
distance = fd.bottom_margin - 50;
}
chart.xAxis.axisLabel(fd.x_axis_label).axisLabelDistance(distance);
}

if (fd.y_axis_label && fd.y_axis_label !== '' && chart.yAxis) {
chart.yAxis.axisLabel(fd.y_axis_label);
chart.margin({ left: 90 });
}

if (fd.bottom_margin) {
chart.margin({ bottom: fd.bottom_margin });
}
var svg = d3.select(slice.selector).select("svg");
if (svg.empty()) {
svg = d3.select(slice.selector).append("svg");
Expand All @@ -215,6 +245,7 @@ function nvd3Vis(slice) {
.datum(payload.data)
.transition().duration(500)
.attr('height', height)
.attr('width', width)
.call(chart);

return chart;
Expand Down
16 changes: 16 additions & 0 deletions caravel/forms.py
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,14 @@ def __init__(self, viz):
"Defines the origin where time buckets start, "
"accepts natural dates as in 'now', 'sunday' or '1970-01-01'")
}),
'bottom_margin': (FreeFormSelectField, {
"label": _("Bottom Margin"),
"choices": self.choicify([50, 75, 100, 125, 150, 200]),
"default": 50,
"description": _(
"Bottom marging, in pixels, allowing for more room for "
"axis labels"),
}),
'granularity': (FreeFormSelectField, {
"label": _("Time Granularity"),
"default": "one day",
Expand Down Expand Up @@ -549,6 +557,14 @@ def __init__(self, viz):
),
"default": 'https: //www.youtube.com/embed/JkI5rg_VcQ4',
}),
'x_axis_label': (TextField, {
"label": _("X Axis Label"),
"default": '',
}),
'y_axis_label': (TextField, {
"label": _("X Axis Label"),

This comment has been minimized.

Copy link
@xrmx

xrmx Jun 17, 2016

Contributor

typo, should be Y

This comment has been minimized.

Copy link
@mistercrunch

mistercrunch Jun 18, 2016

Author Member

Yup I fixed that in the following PR

"default": '',
}),
'where': (TextField, {
"label": _("Custom WHERE clause"),
"default": '',
Expand Down
10 changes: 7 additions & 3 deletions caravel/viz.py
Original file line number Diff line number Diff line change
Expand Up @@ -761,6 +761,7 @@ class BubbleViz(NVD3Viz):
('x_log_scale', 'y_log_scale'),
('show_legend', None),
'max_bubble_size',
('x_axis_label', 'y_axis_label'),
)
},)

Expand Down Expand Up @@ -925,8 +926,9 @@ class NVD3TimeSeriesViz(NVD3Viz):
('show_brush', 'show_legend'),
('rich_tooltip', 'y_axis_zero'),
('y_log_scale', 'contribution'),
('x_axis_format', 'y_axis_format'),
('line_interpolation', 'x_axis_showminmax'),
('x_axis_format', 'y_axis_format'),
('x_axis_label', 'y_axis_label'),
),
}, {
'label': _('Advanced Analytics'),
Expand Down Expand Up @@ -1071,7 +1073,8 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
('y_log_scale', 'contribution'),
('x_axis_format', 'y_axis_format'),
('line_interpolation', 'bar_stacked'),
('x_axis_showminmax', None),
('x_axis_showminmax', 'bottom_margin'),
('x_axis_label', 'y_axis_label'),
), }] + [NVD3TimeSeriesViz.fieldsets[2]]


Expand Down Expand Up @@ -1153,7 +1156,8 @@ class DistributionBarViz(DistributionPieViz):
'metrics',
'row_limit',
('show_legend', 'bar_stacked'),
('y_axis_format', None),
('y_axis_format', 'bottom_margin'),
('x_axis_label', 'y_axis_label'),
)
},)
form_overrides = {
Expand Down

0 comments on commit 3105c9f

Please sign in to comment.