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

Fixes/04 03 20 13 53

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);
@@ -401,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()
@@ -415,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()
@@ -430,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))
@@ -446,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');

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({