pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

[vis] fix line chart when slice is really narrow (#2620)

Browse Source 
* only show legend if larger than small breakpoint

* fix text length getter, it was returning -Infinity
This commit is contained in:
Alanna Scott 2017-04-18 14:29:51 -07:00 committed by GitHub
parent db6cd21504
commit 2bd60c0747
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
superset/assets/visualizations/nvd3_vis.js
View File

@ -19,6 +19,10 @@ const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
const minBarWidth = 15; const minBarWidth = 15;
const animationTime = 1000; const animationTime = 1000;
const BREAKPOINTS = {
small: 340,
};
const addTotalBarValues = function (chart, data, stacked) { const addTotalBarValues = function (chart, data, stacked) {
const svg = d3.select('svg'); const svg = d3.select('svg');
const format = d3.format('.3s'); const format = d3.format('.3s');
@ -65,13 +69,12 @@ function hideTooltips() {
$('.nvtooltip').css({ opacity: 0 }); $('.nvtooltip').css({ opacity: 0 });
} }
function getMaxLabelSize(container, axisClass, widthOrHeight) { function getMaxLabelSize(container, axisClass) {
// axis class = .nv-y2 // second y axis on dual line chart // axis class = .nv-y2 // second y axis on dual line chart
// axis class = .nv-x // x axis on time series line chart // axis class = .nv-x // x axis on time series line chart
const labelEls = container.find(`.${axisClass} .tick text`); const labelEls = container.find(`.${axisClass} text`);
const labelDimensions = labelEls.map(i => labelEls[i].getBoundingClientRect()[widthOrHeight]); const labelDimensions = labelEls.map(i => labelEls[i].getComputedTextLength());
const max = Math.max(...labelDimensions); return Math.max(...labelDimensions);
return max;
} }
function nvd3Vis(slice, payload) { function nvd3Vis(slice, payload) {
@ -286,7 +289,11 @@ function nvd3Vis(slice, payload) {
} }
if ('showLegend' in chart && typeof fd.show_legend !== 'undefined') { if ('showLegend' in chart && typeof fd.show_legend !== 'undefined') {
chart.showLegend(fd.show_legend); if (width < BREAKPOINTS.small && vizType !== 'pie') {
chart.showLegend(false);
} else {
chart.showLegend(fd.show_legend);
}
} }
let height = slice.height() - 15; let height = slice.height() - 15;
@ -385,7 +392,7 @@ function nvd3Vis(slice, payload) {
chart.yAxis1.tickFormat(yAxisFormatter1); chart.yAxis1.tickFormat(yAxisFormatter1);
chart.yAxis2.tickFormat(yAxisFormatter2); chart.yAxis2.tickFormat(yAxisFormatter2);
customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]); customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
chart.showLegend(true); chart.showLegend(width > BREAKPOINTS.small);
} }
svg svg
.datum(payload.data) .datum(payload.data)
@ -406,7 +413,7 @@ function nvd3Vis(slice, payload) {
// ---- (x axis labels are rotated 45 degrees so we use height), // ---- (x axis labels are rotated 45 degrees so we use height),
// - adjust margins based on these measures and render again // - adjust margins based on these measures and render again
if (isTimeSeries && vizType !== 'bar') { if (isTimeSeries && vizType !== 'bar') {
const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x', 'height'); const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x');
const marginPad = isExplore ? width * 0.01 : width * 0.03; const marginPad = isExplore ? width * 0.01 : width * 0.03;
const chartMargins = { const chartMargins = {
bottom: maxXAxisLabelHeight + marginPad, bottom: maxXAxisLabelHeight + marginPad,
@ -414,7 +421,7 @@ function nvd3Vis(slice, payload) {
}; };
if (vizType === 'dual_line') { if (vizType === 'dual_line') {
const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2', 'width'); const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2');
// use y axis width if it's wider than axis width/height // use y axis width if it's wider than axis width/height
if (maxYAxis2LabelWidth > maxXAxisLabelHeight) { if (maxYAxis2LabelWidth > maxXAxisLabelHeight) {
chartMargins.right = maxYAxis2LabelWidth + marginPad; chartMargins.right = maxYAxis2LabelWidth + marginPad;