QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

[revert] reverting big num changes (#2567)

Browse Source 
* Revert "[big num] make sure scatterplot dots align properly (#2559)"

This reverts commit f24ddfd467.

* Revert "Revert "measure x axis labels too and use the longest to determine margins" (#2550)"

This reverts commit fe68bc31c3.

* Revert "[bug num vis] fix sizing for single digits (#2548)"

This reverts commit 3d2c791ff1.

* revert all big num changes.

* fix linting

* make document global, fix linting
This commit is contained in:
Alanna Scott
2017-04-06 13:15:42 -07:00
committed by GitHub
parent c581ea8661
commit 1fb21b8b45
5 changed files with 107 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
superset/assets/visualizations/big_number.css
View File

@@ -2,18 +2,18 @@
.big_number_total g.axis text {
font-size: 10px;
font-weight: normal;
color: #333333;
fill: #333333;
color: gray;
fill: gray;
text-anchor: middle;
alignment-baseline: middle;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: none;
}
.big_number text.big,
.big_number_total text.big{
stroke: #333333;
stroke: black;
text-anchor: middle;
fill: #333333;
fill: black;
}
.big_number g.tick line,
@@ -25,16 +25,6 @@
.big_number .domain,
.big_number_total .domain{
fill: none;
stroke: #333333;
stroke: black;
stroke-width: 1;
}
.line-tooltip {
position: absolute;
text-align: left;
padding: 10px;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 2px;
pointer-events: none;
}

236
superset/assets/visualizations/big_number.js
View File

@@ -1,18 +1,8 @@
import d3 from 'd3';
import { formatDate } from '../javascripts/modules/dates';
import { getTextWidth } from '../javascripts/modules/utils';
require('./big_number.css');
function getNumTicks(data, slice, margin) {
let numTicks = parseInt((slice.width() - margin) * 0.01, 10);
// if numTicks is greater than the total num of data points, show all data points
if (numTicks > data.length) {
numTicks = data.length;
}
return numTicks;
}
function bigNumberVis(slice, payload) {
const div = d3.select(slice.selector);
// Define the percentage bounds that define color from red to green
@@ -48,77 +38,70 @@ function bigNumberVis(slice, payload) {
}
const dateExt = d3.extent(data, (d) => d[0]);
const valueExt = d3.extent(data, (d) => d[1]);
const yAxisLabelWidths = valueExt.map(value => getTextWidth(f(value), '10px Roboto'));
const yAxisMaxWidth = Math.max(...yAxisLabelWidths);
let margin = yAxisMaxWidth + (yAxisMaxWidth / 2);
// make sure margin is minimum 30px, for the case when the y axix label is very small.
if (margin < 30) margin = 30;
const margin = 20;
const scaleX = d3.time.scale.utc().domain(dateExt).range([margin, width - 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 scaleColor = d3.scale
.linear().domain([-1, 1])
.interpolate(d3.interpolateHsl)
.range(colorRange)
.clamp(true);
.linear().domain([-1, 1])
.interpolate(d3.interpolateHsl)
.range(colorRange)
.clamp(true);
const line = d3.svg.line()
.x(d => scaleX(d[0]))
.y(d => scaleY(d[1]))
.interpolate('cardinal');
.x(function (d) {
return scaleX(d[0]);
})
.y(function (d) {
return scaleY(d[1]);
})
.interpolate('basis');
let y = height / 2;
let g = svg.append('g');
const formattedNumber = f(v);
// Printing big number
let bigNumberFontSize = (width / formattedNumber.length) * 1.3;
if (formattedNumber.length === 1) {
bigNumberFontSize = (width / 2) * 1.3;
}
g.append('g')
.attr('class', 'digits')
.attr('opacity', 1)
.append('text')
.attr('x', width / 2)
.attr('y', y)
.attr('class', 'big')
.attr('alignment-baseline', 'middle')
.attr('id', 'bigNumber')
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.text(formattedNumber)
.attr('font-family', 'Roboto')
.attr('font-size', bigNumberFontSize)
.style('text-anchor', 'middle')
.attr('fill', 'black');
g.append('g').attr('class', 'digits')
.attr('opacity', 1)
.append('text')
.attr('x', width / 2)
.attr('y', y)
.attr('class', 'big')
.attr('alignment-baseline', 'middle')
.attr('id', 'bigNumber')
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.text(f(v))
.style('font-size', d3.min([height, width]) / 3.5)
.style('text-anchor', 'middle')
.attr('fill', 'black');
// Printing big number subheader text
if (json.subheader) {
const fontSize = (width / json.subheader.length) * 1.5;
if (json.subheader !== null) {
g.append('text')
.attr('x', width / 2)
.attr('y', (height / 16) * 12)
.text(json.subheader)
.attr('id', 'subheader_text')
.attr('font-family', 'Roboto')
.attr('font-size', fontSize)
.style('text-anchor', 'middle');
.attr('x', width / 2)
.attr('y', (height / 16) * 12)
.text(json.subheader)
.attr('id', 'subheader_text')
.style('font-size', d3.min([height, width]) / 8)
.style('text-anchor', 'middle');
}
if (fd.viz_type === 'big_number') {
// Drawing trend line
g.append('path')
.attr('d', () => line(data))
.attr('stroke-width', 5)
.attr('opacity', 0.5)
.attr('fill', 'none')
.attr('stroke-linecap', 'round')
.attr('stroke', 'grey');
.attr('d', function () {
return line(data);
})
.attr('stroke-width', 5)
.attr('opacity', 0.5)
.attr('fill', 'none')
.attr('stroke-linecap', 'round')
.attr('stroke', 'grey');
g = svg.append('g')
.attr('class', 'digits')
.attr('opacity', 1);
.attr('class', 'digits')
.attr('opacity', 1);
if (vCompare !== null) {
y = (height / 8) * 3;
@@ -129,116 +112,71 @@ function bigNumberVis(slice, payload) {
// Printing compare %
if (vCompare) {
g.append('text')
.attr('x', width / 2)
.attr('y', (height / 16) * 12)
.text(fp(vCompare) + json.compare_suffix)
.style('font-size', d3.min([height, width]) / 8)
.style('text-anchor', 'middle')
.attr('fill', c)
.attr('stroke', c);
.attr('x', width / 2)
.attr('y', (height / 16) * 12)
.text(fp(vCompare) + json.compare_suffix)
.style('font-size', d3.min([height, width]) / 8)
.style('text-anchor', 'middle')
.attr('fill', c)
.attr('stroke', c);
}
// axes
const gAxis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
g = gAxis.append('g');
const minMaxTickValues = scaleX.domain();
// prepend the min value, and append the max value to the list of tick values
const tickValues =
[minMaxTickValues[0]]
.concat(scaleX.ticks(getNumTicks(data, slice, margin)))
.concat([minMaxTickValues[1]]);
const xAxis = d3.svg.axis()
.scale(scaleX)
.orient('bottom')
.tickValues(tickValues)
.tickFormat(formatDate);
.scale(scaleX)
.orient('bottom')
.ticks(4)
.tickFormat(formatDate);
g.call(xAxis);
g.attr('transform', 'translate(0,' + (height - margin) + ')').attr('class', 'xAxis');
g.attr('transform', 'translate(0,' + (height - margin) + ')');
g = gAxis.append('g').attr('transform', `translate(${margin}, 0)`).attr('class', 'yAxis');
g = gAxis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
const yAxis = d3.svg.axis()
.scale(scaleY)
.orient('left')
.tickFormat(d3.format(fd.y_axis_format))
.tickValues(valueExt);
.scale(scaleY)
.orient('left')
.tickFormat(d3.format(fd.y_axis_format))
.tickValues(valueExt);
g.call(yAxis);
g.selectAll('text')
.style('text-anchor', 'end')
.attr('y', '-7')
.attr('x', '-4');
.style('text-anchor', 'end')
.attr('y', '-7')
.attr('x', '-4');
// Define the div for the tooltip
const tooltipEl =
d3.select('body')
.append('div')
.attr('class', 'line-tooltip')
.attr('width', 200)
.attr('height', 200)
.style('opacity', 0);
g.selectAll('text')
.style('font-size', '10px');
const renderTooltip = (d) => {
const date = formatDate(d[0]);
const value = f(d[1]);
return `
<div>
<span style="float: left; margin-right: 20px;"><strong>${date}</strong></span>
<span style="float: right">${value}</span>
</div>
`;
};
// Add the scatterplot and trigger the mouse events for the tooltips
svg
.selectAll('dot')
.data(data)
.enter()
.append('circle')
.attr('r', 10)
.attr('cx', d => scaleX(d[0]))
.attr('cy', d => scaleY(d[1]))
.attr('fill-opacity', '0')
.on('mouseover', (d) => {
tooltipEl.html(renderTooltip(d))
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY - 28) + 'px');
tooltipEl.transition().duration(200).style('opacity', 0.9);
})
.on('mouseout', () => {
tooltipEl.transition().duration(500).style('opacity', 0);
});
// show hide x/y axis on mouseover/out
div.on('mouseover', function () {
const el = d3.select(this);
el.selectAll('path')
.transition()
.duration(500)
.attr('opacity', 1)
.style('stroke-width', '2px');
.transition()
.duration(500)
.attr('opacity', 1)
.style('stroke-width', '2px');
el.selectAll('g.digits')
.transition()
.duration(500)
.attr('opacity', 0.1);
.transition()
.duration(500)
.attr('opacity', 0.1);
el.selectAll('g.axis')
.transition()
.duration(500)
.attr('opacity', 1);
.transition()
.duration(500)
.attr('opacity', 1);
})
.on('mouseout', function () {
const el = d3.select(this);
el.select('path')
.transition()
.duration(500)
.attr('opacity', 0.5)
.style('stroke-width', '5px');
.transition()
.duration(500)
.attr('opacity', 0.5)
.style('stroke-width', '5px');
el.selectAll('g.digits')
.transition()
.duration(500)
.attr('opacity', 1);
.transition()
.duration(500)
.attr('opacity', 1);
el.selectAll('g.axis')
.transition()
.duration(500)
.attr('opacity', 0);
.transition()
.duration(500)
.attr('opacity', 0);
});
}
}