mirror of https://github.com/apache/superset.git
[bugfix] fixing && linting the histogram viz (#987)
This commit is contained in:
parent
a8715294b0
commit
7f2805a3c5
|
@ -8,5 +8,6 @@
|
||||||
"prefer-arrow-callback": 0,
|
"prefer-arrow-callback": 0,
|
||||||
"func-names": 0,
|
"func-names": 0,
|
||||||
"react/jsx-no-bind": 0,
|
"react/jsx-no-bind": 0,
|
||||||
|
"no-confusing-arrow": 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,151 +1,151 @@
|
||||||
// JS
|
import { category21 } from '../javascripts/modules/colors';
|
||||||
const d3 = require('d3')
|
import d3 from 'd3';
|
||||||
const px = window.px || require('../javascripts/modules/caravel.js')
|
|
||||||
|
|
||||||
// CSS
|
require('./histogram.css');
|
||||||
require('./histogram.css')
|
|
||||||
|
|
||||||
function histogram(slice) {
|
function histogram(slice) {
|
||||||
|
const div = d3.select(slice.selector);
|
||||||
const div = d3.select(slice.selector)
|
|
||||||
|
const draw = function (data, numBins) {
|
||||||
const _draw = function(data, numBins) {
|
// Set Margins
|
||||||
|
const margin = {
|
||||||
// Set Margins
|
top: 50,
|
||||||
const margin = {
|
right: 10,
|
||||||
top: 50,
|
bottom: 20,
|
||||||
right: 10,
|
left: 50,
|
||||||
bottom: 20,
|
|
||||||
left: 50,
|
|
||||||
};
|
|
||||||
const navBarHeight = 36;
|
|
||||||
const navBarTitleSize = 12;
|
|
||||||
const navBarBuffer = 10;
|
|
||||||
const width = slice.width() - margin.left - margin.right;
|
|
||||||
const height = slice.height() - margin.top - margin.bottom - navBarHeight - navBarBuffer;
|
|
||||||
|
|
||||||
// Set Histogram objects
|
|
||||||
const formatNumber = d3.format(',.0f');
|
|
||||||
const formatTicks = d3.format(',.00f');
|
|
||||||
const x = d3.scale.ordinal();
|
|
||||||
const y = d3.scale.linear();
|
|
||||||
const xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(numBins).tickFormat(formatTicks);
|
|
||||||
const yAxis = d3.svg.axis().scale(y).orient('left').ticks(numBins*3);
|
|
||||||
// Calculate bins for the data
|
|
||||||
const bins = d3.layout.histogram().bins(numBins)(data);
|
|
||||||
|
|
||||||
// Set the x-values
|
|
||||||
x.domain(bins.map(function(d) { return d.x;}))
|
|
||||||
.rangeRoundBands([0, width], .1);
|
|
||||||
// Set the y-values
|
|
||||||
y.domain([0, d3.max(bins, function(d) { return d.y;})])
|
|
||||||
.range([height, 0]);
|
|
||||||
|
|
||||||
// Create the svg value with the bins
|
|
||||||
const svg = div.selectAll('svg').data([bins]).enter().append('svg');
|
|
||||||
|
|
||||||
// Make a rectangular background fill
|
|
||||||
svg.append('rect')
|
|
||||||
.attr('width', '100%')
|
|
||||||
.attr('height', '100%')
|
|
||||||
.attr('fill', '#f6f6f6');
|
|
||||||
|
|
||||||
// Transform the svg to make space for the margins
|
|
||||||
const gEnter = svg
|
|
||||||
.append('g')
|
|
||||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
||||||
|
|
||||||
// Add the bars and the x axis
|
|
||||||
gEnter.append('g').attr('class', 'bars');
|
|
||||||
gEnter.append('g').attr('class', 'x axis');
|
|
||||||
|
|
||||||
// Add width and height to the svg
|
|
||||||
svg.attr('width', slice.width())
|
|
||||||
.attr('height', slice.height());
|
|
||||||
|
|
||||||
// Create the bars in the svg
|
|
||||||
const bar = svg.select('.bars').selectAll('.bar').data(bins);
|
|
||||||
bar.enter().append('rect');
|
|
||||||
bar.exit().remove();
|
|
||||||
// Set the Height and Width for each bar
|
|
||||||
bar .attr('width', x.rangeBand())
|
|
||||||
.attr('x', function(d) { return x(d.x); })
|
|
||||||
.attr('y', function(d) { return y(d.y); })
|
|
||||||
.attr('height', function(d) {
|
|
||||||
return y.range()[0] - y(d.y);
|
|
||||||
})
|
|
||||||
.attr('fill', function(d) { return px.color.category21(d.length); })
|
|
||||||
.order();
|
|
||||||
|
|
||||||
// Find maximum length to position the ticks on top of the bar correctly
|
|
||||||
const maxLength = d3.max(bins, function(d) { return d.length;});
|
|
||||||
function textAboveBar(d) {
|
|
||||||
return d.length/maxLength < 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add a bar text to each bar in the histogram
|
|
||||||
svg.selectAll('.bartext')
|
|
||||||
.data(bins)
|
|
||||||
.enter()
|
|
||||||
.append('text')
|
|
||||||
.attr('dy', '.75em')
|
|
||||||
.attr('y', function(d) {
|
|
||||||
let padding = 0.0
|
|
||||||
if (textAboveBar(d)) {
|
|
||||||
padding = 12.0
|
|
||||||
} else {
|
|
||||||
padding = -8.0
|
|
||||||
}
|
|
||||||
return y(d.y) - padding;
|
|
||||||
})
|
|
||||||
.attr('x', function(d) { return x(d.x) + (x.rangeBand()/2);})
|
|
||||||
.attr('text-anchor', 'middle')
|
|
||||||
.attr('font-weight', 'bold')
|
|
||||||
.attr('font-size', '15px')
|
|
||||||
.text(function(d) { return formatNumber(d.y); })
|
|
||||||
.attr('fill', function(d) {
|
|
||||||
if(textAboveBar(d)) { return 'black'; } else { return 'white'; }
|
|
||||||
})
|
|
||||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
||||||
|
|
||||||
// Update the x-axis
|
|
||||||
svg.append('g')
|
|
||||||
.attr('class', 'axis')
|
|
||||||
.attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
|
|
||||||
.text('values')
|
|
||||||
.call(xAxis);
|
|
||||||
|
|
||||||
// Update the Y Axis and add minor lines
|
|
||||||
svg.append('g')
|
|
||||||
.attr('class', 'axis')
|
|
||||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
|
||||||
.text('count')
|
|
||||||
.call(yAxis)
|
|
||||||
.selectAll('g')
|
|
||||||
.filter(function(d) { return d; })
|
|
||||||
.classed('minor', true);
|
|
||||||
};
|
};
|
||||||
|
const navBarHeight = 36;
|
||||||
|
const navBarBuffer = 10;
|
||||||
|
const width = slice.width() - margin.left - margin.right;
|
||||||
|
const height = slice.height() - margin.top - margin.bottom - navBarHeight - navBarBuffer;
|
||||||
|
|
||||||
const render = function() {
|
// Set Histogram objects
|
||||||
|
const formatNumber = d3.format(',.0f');
|
||||||
d3.json(slice.jsonEndpoint(), function(error, json) {
|
const formatTicks = d3.format(',.00f');
|
||||||
if(error !== null) {
|
const x = d3.scale.ordinal();
|
||||||
slice.error(error.responseText, error);
|
const y = d3.scale.linear();
|
||||||
return '';
|
const xAxis = d3.svg.axis()
|
||||||
}
|
.scale(x)
|
||||||
|
.orient('bottom')
|
||||||
const numBins = Number(json.form_data.link_length) || 10;
|
.ticks(numBins)
|
||||||
|
.tickFormat(formatTicks);
|
||||||
|
const yAxis = d3.svg.axis()
|
||||||
|
.scale(y)
|
||||||
|
.orient('left')
|
||||||
|
.ticks(numBins * 3);
|
||||||
|
// Calculate bins for the data
|
||||||
|
const bins = d3.layout.histogram().bins(numBins)(data);
|
||||||
|
|
||||||
div.selectAll('*').remove();
|
// Set the x-values
|
||||||
_draw(json.data, numBins);
|
x.domain(bins.map((d) => d.x))
|
||||||
slice.done(json);
|
.rangeRoundBands([0, width], 0.1);
|
||||||
});
|
// Set the y-values
|
||||||
};
|
y.domain([0, d3.max(bins, (d) => d.y)])
|
||||||
|
.range([height, 0]);
|
||||||
|
|
||||||
return {
|
// Create the svg value with the bins
|
||||||
render: render,
|
const svg = div.selectAll('svg')
|
||||||
resize: render,
|
.data([bins])
|
||||||
};
|
.enter()
|
||||||
|
.append('svg');
|
||||||
|
|
||||||
|
// Make a rectangular background fill
|
||||||
|
svg.append('rect')
|
||||||
|
.attr('width', '100%')
|
||||||
|
.attr('height', '100%')
|
||||||
|
.attr('fill', '#f6f6f6');
|
||||||
|
|
||||||
|
// Transform the svg to make space for the margins
|
||||||
|
const gEnter = svg
|
||||||
|
.append('g')
|
||||||
|
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||||
|
|
||||||
|
// Add the bars and the x axis
|
||||||
|
gEnter.append('g').attr('class', 'bars');
|
||||||
|
gEnter.append('g').attr('class', 'x axis');
|
||||||
|
|
||||||
|
// Add width and height to the svg
|
||||||
|
svg.attr('width', slice.width())
|
||||||
|
.attr('height', slice.height());
|
||||||
|
|
||||||
|
// Create the bars in the svg
|
||||||
|
const bar = svg.select('.bars').selectAll('.bar').data(bins);
|
||||||
|
bar.enter().append('rect');
|
||||||
|
bar.exit().remove();
|
||||||
|
// Set the Height and Width for each bar
|
||||||
|
bar.attr('width', x.rangeBand())
|
||||||
|
.attr('x', (d) => x(d.x))
|
||||||
|
.attr('y', (d) => y(d.y))
|
||||||
|
.attr('height', (d) => y.range()[0] - y(d.y))
|
||||||
|
.style('fill', (d) => category21(d.length))
|
||||||
|
.order();
|
||||||
|
|
||||||
|
// Find maximum length to position the ticks on top of the bar correctly
|
||||||
|
const maxLength = d3.max(bins, (d) => d.length);
|
||||||
|
function textAboveBar(d) {
|
||||||
|
return d.length / maxLength < 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a bar text to each bar in the histogram
|
||||||
|
svg.selectAll('.bartext')
|
||||||
|
.data(bins)
|
||||||
|
.enter()
|
||||||
|
.append('text')
|
||||||
|
.attr('dy', '.75em')
|
||||||
|
.attr('y', function (d) {
|
||||||
|
let padding = 0.0;
|
||||||
|
if (textAboveBar(d)) {
|
||||||
|
padding = 12.0;
|
||||||
|
} else {
|
||||||
|
padding = -8.0;
|
||||||
|
}
|
||||||
|
return y(d.y) - padding;
|
||||||
|
})
|
||||||
|
.attr('x', (d) => x(d.x) + (x.rangeBand() / 2))
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('font-weight', 'bold')
|
||||||
|
.attr('font-size', '15px')
|
||||||
|
.text((d) => formatNumber(d.y))
|
||||||
|
.attr('fill', (d) => textAboveBar(d) ? 'black' : 'white')
|
||||||
|
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||||
|
|
||||||
|
// Update the x-axis
|
||||||
|
svg.append('g')
|
||||||
|
.attr('class', 'axis')
|
||||||
|
.attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
|
||||||
|
.text('values')
|
||||||
|
.call(xAxis);
|
||||||
|
|
||||||
|
// Update the Y Axis and add minor lines
|
||||||
|
svg.append('g')
|
||||||
|
.attr('class', 'axis')
|
||||||
|
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
||||||
|
.text('count')
|
||||||
|
.call(yAxis)
|
||||||
|
.selectAll('g')
|
||||||
|
.filter(function (d) { return d; })
|
||||||
|
.classed('minor', true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const render = function () {
|
||||||
|
d3.json(slice.jsonEndpoint(), function (error, json) {
|
||||||
|
if (error !== null) {
|
||||||
|
slice.error(error.responseText, error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const numBins = Number(json.form_data.link_length) || 10;
|
||||||
|
|
||||||
|
div.selectAll('*').remove();
|
||||||
|
draw(json.data, numBins);
|
||||||
|
slice.done(json);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
render,
|
||||||
|
resize: render,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = histogram;
|
module.exports = histogram;
|
||||||
|
|
Loading…
Reference in New Issue