mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[bug num vis] fix sizing for single digits (#2548)
* fix sizing for single digits * measure x axis labels too and use the longest to determine margins
This commit is contained in:
parent
d40ce52139
commit
3d2c791ff1
@ -13,6 +13,20 @@ function getNumTicks(data, slice, margin) {
|
|||||||
return numTicks;
|
return numTicks;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getMargin(valueExt, data, f) {
|
||||||
|
const yAxisLabelWidths = valueExt.map(value => getTextWidth(f(value), '10px Roboto'));
|
||||||
|
const xAxisLabelWidths = data.map(d => getTextWidth(formatDate(d[0]), '10px Roboto'));
|
||||||
|
const yAxisMaxWidth = Math.max(...yAxisLabelWidths);
|
||||||
|
const xAxisMaxWidth = Math.max(...xAxisLabelWidths);
|
||||||
|
let margin;
|
||||||
|
if (yAxisMaxWidth > xAxisMaxWidth) {
|
||||||
|
margin = yAxisMaxWidth + (yAxisMaxWidth / 2);
|
||||||
|
} else if (xAxisMaxWidth > yAxisMaxWidth) {
|
||||||
|
margin = xAxisMaxWidth + (xAxisMaxWidth / 2);
|
||||||
|
}
|
||||||
|
return margin;
|
||||||
|
}
|
||||||
|
|
||||||
function bigNumberVis(slice, payload) {
|
function bigNumberVis(slice, payload) {
|
||||||
const div = d3.select(slice.selector);
|
const div = d3.select(slice.selector);
|
||||||
// Define the percentage bounds that define color from red to green
|
// Define the percentage bounds that define color from red to green
|
||||||
@ -48,10 +62,7 @@ function bigNumberVis(slice, payload) {
|
|||||||
}
|
}
|
||||||
const dateExt = d3.extent(data, (d) => d[0]);
|
const dateExt = d3.extent(data, (d) => d[0]);
|
||||||
const valueExt = d3.extent(data, (d) => d[1]);
|
const valueExt = d3.extent(data, (d) => d[1]);
|
||||||
const yAxisLabelWidths = valueExt.map(value => getTextWidth(f(value), '10px Roboto'));
|
const margin = getMargin(valueExt, data, f);
|
||||||
const yAxisMaxWidth = Math.max(...yAxisLabelWidths);
|
|
||||||
const margin = yAxisMaxWidth + (yAxisMaxWidth / 2);
|
|
||||||
|
|
||||||
const scaleX = d3.time.scale.utc().domain(dateExt).range([margin, width - margin]);
|
const scaleX = d3.time.scale.utc().domain(dateExt).range([margin, width - margin]);
|
||||||
const scaleY = d3.scale.linear().domain(valueExt).range([height - (margin), margin]);
|
const scaleY = d3.scale.linear().domain(valueExt).range([height - (margin), margin]);
|
||||||
const colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
|
const colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
|
||||||
@ -71,6 +82,10 @@ function bigNumberVis(slice, payload) {
|
|||||||
const formattedNumber = f(v);
|
const formattedNumber = f(v);
|
||||||
|
|
||||||
// Printing big number
|
// Printing big number
|
||||||
|
let bigNumberFontSize = (width / formattedNumber.length) * 1.3;
|
||||||
|
if (formattedNumber.length === 1) {
|
||||||
|
bigNumberFontSize = (width / 2) * 1.3;
|
||||||
|
}
|
||||||
g.append('g')
|
g.append('g')
|
||||||
.attr('class', 'digits')
|
.attr('class', 'digits')
|
||||||
.attr('opacity', 1)
|
.attr('opacity', 1)
|
||||||
@ -84,7 +99,7 @@ function bigNumberVis(slice, payload) {
|
|||||||
.style('cursor', 'pointer')
|
.style('cursor', 'pointer')
|
||||||
.text(formattedNumber)
|
.text(formattedNumber)
|
||||||
.attr('font-family', 'Roboto')
|
.attr('font-family', 'Roboto')
|
||||||
.attr('font-size', (width / formattedNumber.length) * 1.3)
|
.attr('font-size', bigNumberFontSize)
|
||||||
.style('text-anchor', 'middle')
|
.style('text-anchor', 'middle')
|
||||||
.attr('fill', 'black');
|
.attr('fill', 'black');
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user