From b171b0af46e104bff9a7029a8a49c55af9f4f30c Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Wed, 4 Mar 2020 13:24:51 +0300 Subject: [PATCH 1/2] Fixes names of options --- .../charts/DistributionPlot/distPlotD3.js | 38 ++++++++++--------- .../charts/DistributionPlot/distPlotReact.js | 4 +- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/charts/DistributionPlot/distPlotD3.js b/src/components/charts/DistributionPlot/distPlotD3.js index 5550a1ed..46f844b1 100644 --- a/src/components/charts/DistributionPlot/distPlotD3.js +++ b/src/components/charts/DistributionPlot/distPlotD3.js @@ -18,23 +18,27 @@ export class CdfChartD3 { marginLeft: 5, container: null, + + // X minX: null, maxX: null, - scale: 'linear', - timeScale: null, - showDistributionLines: true, + xScaleType: 'linear', + xScaleTimeOptions: null, + xScaleLogBase: 10, + + // Y + yMaxContinuousDomainFactor: 1, + yMaxDiscreteDomainFactor: 1, showDistributionYAxis: false, + + showDistributionLines: true, areaColors: ['#E1E5EC', '#E1E5EC'], - logBase: 10, verticalLine: 110, showVerticalLine: true, data: { continuous: null, discrete: null, }, - yMaxContinuousDomainFactor: 1, - yMaxDiscreteDomainFactor: 1, - options: {}, onHover: (e) => { }, }; @@ -90,17 +94,17 @@ export class CdfChartD3 { throw new Error('Container for D3 is not defined.'); } - if (!['log', 'linear'].includes(this.attrs.scale)) { - throw new Error('Scale should be either "log" or "linear".'); + if (!['log', 'linear'].includes(this.attrs.xScaleType)) { + throw new Error('X-scale type should be either "log" or "linear".'); } // Log Scale. - if (this.attrs.scale === 'log') { + if (this.attrs.xScaleType === 'log') { this.logFilter('continuous'); this.logFilter('discrete'); } if ( - this.attrs.scale === 'log' + this.attrs.xScaleType === 'log' && this.attrs.minX !== null && this.attrs.minX < 0 ) { @@ -115,7 +119,7 @@ export class CdfChartD3 { 'svgWidth', 'svgHeight', 'yMaxContinuousDomainFactor', 'yMaxDiscreteDomainFactor', - 'logBase', + 'xScaleLogBase', ]; for (const field of fields) { if (!_.isNumber(this.attrs[field])) { @@ -198,12 +202,12 @@ export class CdfChartD3 { const yMaxDomain = yMax * yMaxDomainFactor; // X-scale. - const xScale = this.attrs.scale === 'linear' + const xScale = this.attrs.xScaleType === 'linear' ? d3.scaleLinear() .domain([xMinDomain, xMaxDomain]) .range([0, this.calc.chartWidth]) : d3.scaleLog() - .base(this.attrs.logBase) + .base(this.attrs.xScaleLogBase) .domain([xMinDomain, xMaxDomain]) .range([0, this.calc.chartWidth]); @@ -229,10 +233,10 @@ export class CdfChartD3 { // X-axis. let xAxis = null; - if (!!this.attrs.timeScale) { + if (!!this.attrs.xScaleTimeOptions) { // Calculates the projection on X-axis. - const zero = _.get(this.attrs, 'timeScale.zero', moment()); - const unit = _.get(this.attrs, 'timeScale.unit', 'years'); + const zero = _.get(this.attrs, 'xScaleTimeOptions.zero', moment()); + const unit = _.get(this.attrs, 'xScaleTimeOptions.unit', 'years'); const diff = Math.abs(xMax - xMin); const left = zero.clone().add(xMin, unit); const right = left.clone().add(diff, unit); diff --git a/src/components/charts/DistributionPlot/distPlotReact.js b/src/components/charts/DistributionPlot/distPlotReact.js index 2565cf99..5385adcd 100644 --- a/src/components/charts/DistributionPlot/distPlotReact.js +++ b/src/components/charts/DistributionPlot/distPlotReact.js @@ -50,8 +50,8 @@ function CdfChartReact(props) { .set('verticalLine', props.verticalLine || 110) .set('showVerticalLine', props.showVerticalLine) .set('container', containerRef.current) - .set('scale', scale) - .set('timeScale', props.timeScale) + .set('xScaleType', scale) + .set('xScaleTimeOptions', props.timeScale) .set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1) .set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1) .data({ From de62bb828f60466b2e124e19d96655757bf8cfe6 Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Wed, 4 Mar 2020 13:56:32 +0300 Subject: [PATCH 2/2] Fixes hovering --- .../charts/DistributionPlot/distPlotD3.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/charts/DistributionPlot/distPlotD3.js b/src/components/charts/DistributionPlot/distPlotD3.js index 46f844b1..87278d29 100644 --- a/src/components/charts/DistributionPlot/distPlotD3.js +++ b/src/components/charts/DistributionPlot/distPlotD3.js @@ -405,10 +405,12 @@ export class CdfChartD3 { .attr('transform', `translate(${this.calc.chartWidth}, 0)`) .call(yAxis); + const thi$ = this; + function showTooltip(d) { - d3.select('#lollipops-line-' + d.id) + thi$.chart.select('.lollipops-line-' + d.id) .classed('lollipops-line-mouseover', true); - d3.select('#lollipops-circle-' + d.id) + thi$.chart.select('.lollipops-circle-' + d.id) .classed('lollipops-circle-mouseover', true) .attr('r', 6); tooltip.transition() @@ -419,9 +421,9 @@ export class CdfChartD3 { } function hideTooltip(d) { - d3.select('#lollipops-line-' + d.id) + thi$.chart.select('.lollipops-line-' + d.id) .classed('lollipops-line-mouseover', false); - d3.select('#lollipops-circle-' + d.id) + thi$.chart.select('.lollipops-circle-' + d.id) .classed('lollipops-circle-mouseover', false) .attr('r', 4); tooltip.transition() @@ -434,7 +436,7 @@ export class CdfChartD3 { .enter() .append('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('x2', d => common.xScale(d.x)) .attr('y1', d => yScale(d.y)) @@ -450,8 +452,7 @@ export class CdfChartD3 { .data(data) .enter() .append('circle') - .attr('class', 'lollipops-circle') - .attr('id', d => 'lollipops-circle-' + d.id) + .attr('class', d => 'lollipops-circle lollipops-circle-' + d.id) .attr('cx', d => common.xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', '4');