From 3105c9f9aefed64a13ec49c8cd6f909af77d8347 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Fri, 17 Jun 2016 08:11:53 -0700 Subject: [PATCH] Improvments to NVD3 charts (axis labels & min bar width) (#629) --- caravel/assets/visualizations/nvd3_vis.css | 21 +++++++++++++ caravel/assets/visualizations/nvd3_vis.js | 35 ++++++++++++++++++++-- caravel/forms.py | 16 ++++++++++ caravel/viz.py | 10 +++++-- 4 files changed, 77 insertions(+), 5 deletions(-) diff --git a/caravel/assets/visualizations/nvd3_vis.css b/caravel/assets/visualizations/nvd3_vis.css index 0d63c69ba2..bfa08daa6a 100644 --- a/caravel/assets/visualizations/nvd3_vis.css +++ b/caravel/assets/visualizations/nvd3_vis.css @@ -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; +} diff --git a/caravel/assets/visualizations/nvd3_vis.js b/caravel/assets/visualizations/nvd3_vis.js index affd15d19e..201537425e 100644 --- a/caravel/assets/visualizations/nvd3_vis.js +++ b/caravel/assets/visualizations/nvd3_vis.js @@ -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'); @@ -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) { @@ -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; @@ -71,6 +83,8 @@ function nvd3Vis(slice) { .showMaxMin(false); chart.stacked(fd.bar_stacked); + width = barchartWidth(); + chart.width(width); break; case 'pie': @@ -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"); @@ -215,6 +245,7 @@ function nvd3Vis(slice) { .datum(payload.data) .transition().duration(500) .attr('height', height) + .attr('width', width) .call(chart); return chart; diff --git a/caravel/forms.py b/caravel/forms.py index efce723bec..e13418d1af 100644 --- a/caravel/forms.py +++ b/caravel/forms.py @@ -285,6 +285,14 @@ class FormFactory(object): "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", @@ -549,6 +557,14 @@ class FormFactory(object): ), "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"), + "default": '', + }), 'where': (TextField, { "label": _("Custom WHERE clause"), "default": '', diff --git a/caravel/viz.py b/caravel/viz.py index e16502ce85..ebeea92f78 100644 --- a/caravel/viz.py +++ b/caravel/viz.py @@ -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'), ) },) @@ -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'), @@ -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]] @@ -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 = {