Merge pull request #17 from foretold-app/fixes/04-03-20_13_53

Fixes/04 03 20 13 53
This commit is contained in:
Ozzie Gooen 2020-03-04 11:00:02 +00:00 committed by GitHub
commit 051927be04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 26 deletions

View File

@ -18,23 +18,27 @@ export class CdfChartD3 {
marginLeft: 5, marginLeft: 5,
container: null, container: null,
// X
minX: null, minX: null,
maxX: null, maxX: null,
scale: 'linear', xScaleType: 'linear',
timeScale: null, xScaleTimeOptions: null,
showDistributionLines: true, xScaleLogBase: 10,
// Y
yMaxContinuousDomainFactor: 1,
yMaxDiscreteDomainFactor: 1,
showDistributionYAxis: false, showDistributionYAxis: false,
showDistributionLines: true,
areaColors: ['#E1E5EC', '#E1E5EC'], areaColors: ['#E1E5EC', '#E1E5EC'],
logBase: 10,
verticalLine: 110, verticalLine: 110,
showVerticalLine: true, showVerticalLine: true,
data: { data: {
continuous: null, continuous: null,
discrete: null, discrete: null,
}, },
yMaxContinuousDomainFactor: 1,
yMaxDiscreteDomainFactor: 1,
options: {},
onHover: (e) => { onHover: (e) => {
}, },
}; };
@ -90,17 +94,17 @@ export class CdfChartD3 {
throw new Error('Container for D3 is not defined.'); throw new Error('Container for D3 is not defined.');
} }
if (!['log', 'linear'].includes(this.attrs.scale)) { if (!['log', 'linear'].includes(this.attrs.xScaleType)) {
throw new Error('Scale should be either "log" or "linear".'); throw new Error('X-scale type should be either "log" or "linear".');
} }
// Log Scale. // Log Scale.
if (this.attrs.scale === 'log') { if (this.attrs.xScaleType === 'log') {
this.logFilter('continuous'); this.logFilter('continuous');
this.logFilter('discrete'); this.logFilter('discrete');
} }
if ( if (
this.attrs.scale === 'log' this.attrs.xScaleType === 'log'
&& this.attrs.minX !== null && this.attrs.minX !== null
&& this.attrs.minX < 0 && this.attrs.minX < 0
) { ) {
@ -115,7 +119,7 @@ export class CdfChartD3 {
'svgWidth', 'svgHeight', 'svgWidth', 'svgHeight',
'yMaxContinuousDomainFactor', 'yMaxContinuousDomainFactor',
'yMaxDiscreteDomainFactor', 'yMaxDiscreteDomainFactor',
'logBase', 'xScaleLogBase',
]; ];
for (const field of fields) { for (const field of fields) {
if (!_.isNumber(this.attrs[field])) { if (!_.isNumber(this.attrs[field])) {
@ -198,12 +202,12 @@ export class CdfChartD3 {
const yMaxDomain = yMax * yMaxDomainFactor; const yMaxDomain = yMax * yMaxDomainFactor;
// X-scale. // X-scale.
const xScale = this.attrs.scale === 'linear' const xScale = this.attrs.xScaleType === 'linear'
? d3.scaleLinear() ? d3.scaleLinear()
.domain([xMinDomain, xMaxDomain]) .domain([xMinDomain, xMaxDomain])
.range([0, this.calc.chartWidth]) .range([0, this.calc.chartWidth])
: d3.scaleLog() : d3.scaleLog()
.base(this.attrs.logBase) .base(this.attrs.xScaleLogBase)
.domain([xMinDomain, xMaxDomain]) .domain([xMinDomain, xMaxDomain])
.range([0, this.calc.chartWidth]); .range([0, this.calc.chartWidth]);
@ -229,10 +233,10 @@ export class CdfChartD3 {
// X-axis. // X-axis.
let xAxis = null; let xAxis = null;
if (!!this.attrs.timeScale) { if (!!this.attrs.xScaleTimeOptions) {
// Calculates the projection on X-axis. // Calculates the projection on X-axis.
const zero = _.get(this.attrs, 'timeScale.zero', moment()); const zero = _.get(this.attrs, 'xScaleTimeOptions.zero', moment());
const unit = _.get(this.attrs, 'timeScale.unit', 'years'); const unit = _.get(this.attrs, 'xScaleTimeOptions.unit', 'years');
const diff = Math.abs(xMax - xMin); const diff = Math.abs(xMax - xMin);
const left = zero.clone().add(xMin, unit); const left = zero.clone().add(xMin, unit);
const right = left.clone().add(diff, unit); const right = left.clone().add(diff, unit);
@ -401,10 +405,12 @@ export class CdfChartD3 {
.attr('transform', `translate(${this.calc.chartWidth}, 0)`) .attr('transform', `translate(${this.calc.chartWidth}, 0)`)
.call(yAxis); .call(yAxis);
const thi$ = this;
function showTooltip(d) { function showTooltip(d) {
d3.select('#lollipops-line-' + d.id) thi$.chart.select('.lollipops-line-' + d.id)
.classed('lollipops-line-mouseover', true); .classed('lollipops-line-mouseover', true);
d3.select('#lollipops-circle-' + d.id) thi$.chart.select('.lollipops-circle-' + d.id)
.classed('lollipops-circle-mouseover', true) .classed('lollipops-circle-mouseover', true)
.attr('r', 6); .attr('r', 6);
tooltip.transition() tooltip.transition()
@ -415,9 +421,9 @@ export class CdfChartD3 {
} }
function hideTooltip(d) { function hideTooltip(d) {
d3.select('#lollipops-line-' + d.id) thi$.chart.select('.lollipops-line-' + d.id)
.classed('lollipops-line-mouseover', false); .classed('lollipops-line-mouseover', false);
d3.select('#lollipops-circle-' + d.id) thi$.chart.select('.lollipops-circle-' + d.id)
.classed('lollipops-circle-mouseover', false) .classed('lollipops-circle-mouseover', false)
.attr('r', 4); .attr('r', 4);
tooltip.transition() tooltip.transition()
@ -430,7 +436,7 @@ export class CdfChartD3 {
.enter() .enter()
.append('line') .append('line')
.attr('class', 'lollipops-line') .attr('class', 'lollipops-line')
.attr('id', d => 'lollipops-line-' + d.id) .attr('class', d => 'lollipops-line lollipops-line-' + d.id)
.attr('x1', d => common.xScale(d.x)) .attr('x1', d => common.xScale(d.x))
.attr('x2', d => common.xScale(d.x)) .attr('x2', d => common.xScale(d.x))
.attr('y1', d => yScale(d.y)) .attr('y1', d => yScale(d.y))
@ -446,8 +452,7 @@ export class CdfChartD3 {
.data(data) .data(data)
.enter() .enter()
.append('circle') .append('circle')
.attr('class', 'lollipops-circle') .attr('class', d => 'lollipops-circle lollipops-circle-' + d.id)
.attr('id', d => 'lollipops-circle-' + d.id)
.attr('cx', d => common.xScale(d.x)) .attr('cx', d => common.xScale(d.x))
.attr('cy', d => yScale(d.y)) .attr('cy', d => yScale(d.y))
.attr('r', '4'); .attr('r', '4');

View File

@ -50,8 +50,8 @@ function CdfChartReact(props) {
.set('verticalLine', props.verticalLine || 110) .set('verticalLine', props.verticalLine || 110)
.set('showVerticalLine', props.showVerticalLine) .set('showVerticalLine', props.showVerticalLine)
.set('container', containerRef.current) .set('container', containerRef.current)
.set('scale', scale) .set('xScaleType', scale)
.set('timeScale', props.timeScale) .set('xScaleTimeOptions', props.timeScale)
.set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1) .set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1)
.set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1) .set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1)
.data({ .data({