From 802b0a89da2326cda6fb96c253ba5975a4bf5098 Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 09:11:01 +0300
Subject: [PATCH 01/13] Fixes the vector

---
 src/components/charts/cdfChartD3.js | 138 +++++++++++++++-------------
 1 file changed, 73 insertions(+), 65 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 00dcb952..a79d3af2 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -28,9 +28,16 @@ export class CdfChartD3 {
       onHover: (e) => {
       },
     };
+    this.calc = {};
+
+    this.chart = null;
+    this.svg = null;
+    this._container = null;
+
     this.hoverLine = null;
     this.xScale = null;
     this.dataPoints = null;
+
     this.mouseover = this.mouseover.bind(this);
     this.mouseout = this.mouseout.bind(this);
     this.formatDates = this.formatDates.bind(this);
@@ -116,67 +123,65 @@ export class CdfChartD3 {
     return this;
   }
 
-  /**
-   * @param key
-   * @returns {[]}
-   */
-  getDataPoints(key) {
-    const dt = [];
-    const data = this.attrs.data[key];
-    const len = data.xs.length;
-
-    for (let i = 0; i < len; i++) {
-      dt.push({ x: data.xs[i], y: data.ys[i] });
-    }
-
-    return dt;
-  }
-
   render() {
-    const attrs = this.attrs;
-    const container = d3.select(attrs.container);
-    if (container.node() === null) {
+    this._container = d3.select(this.attrs.container);
+    if (this._container.node() === null) {
       console.error('Container for D3 is not defined.');
       return;
     }
-
     // Sets the width from the DOM element.
-    const containerRect = container.node().getBoundingClientRect();
+    const containerRect = this._container.node().getBoundingClientRect();
     if (containerRect.width > 0) {
-      attrs.svgWidth = containerRect.width;
+      this.attrs.svgWidth = containerRect.width;
     }
 
     // Calculated properties.
-    const calc = {};
-    calc.chartLeftMargin = attrs.marginLeft;
-    calc.chartTopMargin = attrs.marginTop;
-    calc.chartWidth = attrs.svgWidth - attrs.marginRight - attrs.marginLeft;
-    calc.chartHeight = attrs.svgHeight - attrs.marginBottom - attrs.marginTop;
+    this.calc.chartLeftMargin = this.attrs.marginLeft;
+    this.calc.chartTopMargin = this.attrs.marginTop;
+    this.calc.chartWidth = this.attrs.svgWidth - this.attrs.marginRight - this.attrs.marginLeft;
+    this.calc.chartHeight = this.attrs.svgHeight - this.attrs.marginBottom - this.attrs.marginTop;
 
-    const areaColorRange = d3.scaleOrdinal().range(attrs.areaColors);
+    // Add svg.
+    this.svg = this._container
+      .createObject({ tag: 'svg', selector: 'svg-chart-container' })
+      .attr('width', "100%")
+      .attr('height', this.attrs.svgHeight)
+      .attr('pointer-events', 'none');
+
+    // Add container g element.
+    this.chart = this.svg
+      .createObject({ tag: 'g', selector: 'chart' })
+      .attr(
+        'transform',
+        'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
+      );
+
+    // A
+
+    const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
     this.dataPoints = [this.getDataPoints('primary')];
 
     // Scales.
-    const xMin = d3.min(attrs.data.primary.xs);
-    const xMax = d3.max(attrs.data.primary.xs);
+    const xMin = d3.min(this.attrs.data.primary.xs);
+    const xMax = d3.max(this.attrs.data.primary.xs);
 
-    if (attrs.scale === 'linear') {
+    if (this.attrs.scale === 'linear') {
       this.xScale = d3.scaleLinear()
-        .domain([attrs.minX || xMin, attrs.maxX || xMax])
-        .range([0, calc.chartWidth]);
+        .domain([this.attrs.minX || xMin, this.attrs.maxX || xMax])
+        .range([0, this.calc.chartWidth]);
     } else {
       this.xScale = d3.scaleLog()
-        .base(attrs.logBase)
-        .domain([attrs.minX, attrs.maxX])
-        .range([0, calc.chartWidth]);
+        .base(this.attrs.logBase)
+        .domain([this.attrs.minX, this.attrs.maxX])
+        .range([0, this.calc.chartWidth]);
     }
 
-    const yMin = d3.min(attrs.data.primary.ys);
-    const yMax = d3.max(attrs.data.primary.ys);
+    const yMin = d3.min(this.attrs.data.primary.ys);
+    const yMax = d3.max(this.attrs.data.primary.ys);
 
     this.yScale = d3.scaleLinear()
       .domain([yMin, yMax])
-      .range([calc.chartHeight, 0]);
+      .range([this.calc.chartHeight, 0]);
 
     // Axis generator.
     if (!!this.attrs.timeScale) {
@@ -189,7 +194,7 @@ export class CdfChartD3 {
       const xScaleTime = d3.scaleTime()
         .domain([left.toDate(), right.toDate()])
         .nice()
-        .range([0, calc.chartWidth]);
+        .range([0, this.calc.chartWidth]);
 
       this.xAxis = d3.axisBottom()
         .scale(xScaleTime)
@@ -219,26 +224,11 @@ export class CdfChartD3 {
     const area = d3.area()
       .x(d => this.xScale(d.x))
       .y1(d => this.yScale(d.y))
-      .y0(calc.chartHeight);
-
-    // Add svg.
-    const svg = container
-      .createObject({ tag: 'svg', selector: 'svg-chart-container' })
-      .attr('width', "100%")
-      .attr('height', attrs.svgHeight)
-      .attr('pointer-events', 'none');
-
-    // Add container g element.
-    this.chart = svg
-      .createObject({ tag: 'g', selector: 'chart' })
-      .attr(
-        'transform',
-        'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')',
-      );
+      .y0(this.calc.chartHeight);
 
     // Add axis.
     this.chart.createObject({ tag: 'g', selector: 'axis' })
-      .attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')')
+      .attr('transform', 'translate(' + 0 + ',' + this.calc.chartHeight + ')')
       .call(this.xAxis);
 
     // Draw area.
@@ -253,7 +243,7 @@ export class CdfChartD3 {
       .attr('opacity', (d, i) => i === 0 ? 0.7 : 0.5);
 
     // Draw line.
-    if (attrs.showDistributionLines) {
+    if (this.attrs.showDistributionLines) {
       this.chart
         .createObjectsWithData({
           tag: 'path',
@@ -266,13 +256,13 @@ export class CdfChartD3 {
         .attr('fill', 'none');
     }
 
-    if (attrs.showVerticalLine) {
+    if (this.attrs.showVerticalLine) {
       this.chart
         .createObject({ tag: 'line', selector: 'v-line' })
-        .attr('x1', this.xScale(attrs.verticalLine))
-        .attr('x2', this.xScale(attrs.verticalLine))
+        .attr('x1', this.xScale(this.attrs.verticalLine))
+        .attr('x2', this.xScale(this.attrs.verticalLine))
         .attr('y1', 0)
-        .attr('y2', calc.chartHeight)
+        .attr('y2', this.calc.chartHeight)
         .attr('stroke-width', 1.5)
         .attr('stroke-dasharray', '6 6')
         .attr('stroke', 'steelblue');
@@ -283,7 +273,7 @@ export class CdfChartD3 {
       .attr('x1', 0)
       .attr('x2', 0)
       .attr('y1', 0)
-      .attr('y2', calc.chartHeight)
+      .attr('y2', this.calc.chartHeight)
       .attr('opacity', 0)
       .attr('stroke-width', 1.5)
       .attr('stroke-dasharray', '6 6')
@@ -293,8 +283,8 @@ export class CdfChartD3 {
     const thi$ = this;
     this.chart
       .createObject({ tag: 'rect', selector: 'mouse-rect' })
-      .attr('width', calc.chartWidth)
-      .attr('height', calc.chartHeight)
+      .attr('width', this.calc.chartWidth)
+      .attr('height', this.calc.chartHeight)
       .attr('fill', 'transparent')
       .attr('pointer-events', 'all')
       .on('mouseover', function () {
@@ -305,6 +295,8 @@ export class CdfChartD3 {
       })
       .on('mouseout', this.mouseout);
 
+    // B
+
     return this;
   }
 
@@ -368,6 +360,22 @@ export class CdfChartD3 {
         return d3.timeYear.every(1);
     }
   }
+
+  /**
+   * @param key
+   * @returns {[]}
+   */
+  getDataPoints(key) {
+    const dt = [];
+    const data = this.attrs.data[key];
+    const len = data.xs.length;
+
+    for (let i = 0; i < len; i++) {
+      dt.push({ x: data.xs[i], y: data.ys[i] });
+    }
+
+    return dt;
+  }
 }
 
 /**

From 739707dd39cb5c083f198fa4bef93f869ff4e4b0 Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 10:02:39 +0300
Subject: [PATCH 02/13] Adds a lollipop chart

---
 src/components/charts/cdfChartD3.js | 60 ++++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index a79d3af2..06948e29 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -28,7 +28,12 @@ export class CdfChartD3 {
       onHover: (e) => {
       },
     };
-    this.calc = {};
+    this.calc = {
+      chartLeftMargin: null,
+      chartTopMargin: null,
+      chartWidth: null,
+      chartHeight: null,
+    };
 
     this.chart = null;
     this.svg = null;
@@ -295,8 +300,59 @@ export class CdfChartD3 {
       })
       .on('mouseout', this.mouseout);
 
-    // B
+    // Lollipops
+    {
+      const data = [
+        { Country: "United States", Value: "12394" },
+        { Country: "Ry", Value: "1000" },
+        { Country: "Dy", Value: "5000" },
+      ];
 
+      // X axis
+      const x = d3.scaleBand()
+        .range([0, this.calc.chartWidth])
+        .domain(data.map(function (d) {
+          return d.Country;
+        }))
+        .padding(1);
+
+      this.svg.append("g")
+        .attr("transform", "translate(0," + this.calc.chartHeight + ")")
+        .call(d3.axisBottom(x))
+        .selectAll("text")
+        .attr("transform", "translate(-10,0)rotate(-45)")
+        .style("text-anchor", "end");
+
+      // Add Y axis
+      const y = d3.scaleLinear()
+        .domain([0, 13000])
+        .range([this.calc.chartHeight, 0]);
+
+      this.svg.append("g")
+        .call(d3.axisLeft(y));
+
+      // Lines
+      this.svg.selectAll("lollipops-line")
+        .data(data)
+        .enter()
+        .append("line")
+        .attr("x1", d => x(d.Country))
+        .attr("x2", d => x(d.Country))
+        .attr("y1", d => y(d.Value))
+        .attr("y2", y(0))
+        .attr("stroke", "red");
+
+      // Circles
+      this.svg.selectAll("lollipops-circle")
+        .data(data)
+        .enter()
+        .append("circle")
+        .attr("cx", d => x(d.Country))
+        .attr("cy", d => y(d.Value))
+        .attr("r", "4")
+        .style("fill", "yellow")
+        .attr("stroke", "green");
+    }
     return this;
   }
 

From a9bfc0dd472b6df5e9366fec60ee6cc79ab38d6a Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 11:56:02 +0300
Subject: [PATCH 03/13] Adds a lollipop chart

---
 src/components/charts/cdfChartD3.js | 40 ++++++++++++++---------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 06948e29..780d9452 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -232,8 +232,8 @@ export class CdfChartD3 {
       .y0(this.calc.chartHeight);
 
     // Add axis.
-    this.chart.createObject({ tag: 'g', selector: 'axis' })
-      .attr('transform', 'translate(' + 0 + ',' + this.calc.chartHeight + ')')
+    this.chart.createObject({ tag: 'g', selector: 'xAxis' })
+      .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
       .call(this.xAxis);
 
     // Draw area.
@@ -303,52 +303,50 @@ export class CdfChartD3 {
     // Lollipops
     {
       const data = [
-        { Country: "United States", Value: "12394" },
-        { Country: "Ry", Value: "1000" },
-        { Country: "Dy", Value: "5000" },
+        {x: 3, y: 10},
+        {x: 5, y: 30},
+        {x: 7.5, y: 50},
       ];
+      const xs = [3, 5, 7.5];
 
       // X axis
       const x = d3.scaleBand()
         .range([0, this.calc.chartWidth])
-        .domain(data.map(function (d) {
-          return d.Country;
-        }))
+        .domain(xs)
         .padding(1);
 
-      this.svg.append("g")
+      this.chart.append("g")
         .attr("transform", "translate(0," + this.calc.chartHeight + ")")
         .call(d3.axisBottom(x))
-        .selectAll("text")
-        .attr("transform", "translate(-10,0)rotate(-45)")
-        .style("text-anchor", "end");
+        .selectAll("text");
 
       // Add Y axis
       const y = d3.scaleLinear()
-        .domain([0, 13000])
+        .domain([0, 50])
         .range([this.calc.chartHeight, 0]);
 
-      this.svg.append("g")
+      this.chart.append("g")
+        .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
         .call(d3.axisLeft(y));
 
       // Lines
-      this.svg.selectAll("lollipops-line")
+      this.chart.selectAll("lollipops-line")
         .data(data)
         .enter()
         .append("line")
-        .attr("x1", d => x(d.Country))
-        .attr("x2", d => x(d.Country))
-        .attr("y1", d => y(d.Value))
+        .attr("x1", d => x(d.x))
+        .attr("x2", d => x(d.x))
+        .attr("y1", d => y(d.y))
         .attr("y2", y(0))
         .attr("stroke", "red");
 
       // Circles
-      this.svg.selectAll("lollipops-circle")
+      this.chart.selectAll("lollipops-circle")
         .data(data)
         .enter()
         .append("circle")
-        .attr("cx", d => x(d.Country))
-        .attr("cy", d => y(d.Value))
+        .attr("cx", d => x(d.x))
+        .attr("cy", d => y(d.y))
         .attr("r", "4")
         .style("fill", "yellow")
         .attr("stroke", "green");

From f784c2fcb283d6eb6d2795aa6da750886c4ae4be Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 12:21:58 +0300
Subject: [PATCH 04/13] Fixes styles

---
 src/components/charts/CdfChart__Plain.re | 16 ++++++++++++----
 src/components/charts/cdfChartD3.js      | 16 ++++++++--------
 src/lib/Chart.re                         | 16 ++++++++++++----
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/charts/CdfChart__Plain.re b/src/components/charts/CdfChart__Plain.re
index 16d3b37a..f444d595 100644
--- a/src/components/charts/CdfChart__Plain.re
+++ b/src/components/charts/CdfChart__Plain.re
@@ -7,11 +7,19 @@ module Styles = {
   let graph = chartColor =>
     style([
       position(`relative),
-      selector(".axis", [fontSize(`px(9))]),
-      selector(".domain", [display(`none)]),
-      selector(".tick line", [display(`none)]),
-      selector(".tick text", [color(`hex("bfcad4"))]),
+      selector(".x-axis", [fontSize(`px(9))]),
+      selector(".x-axis .domain", [display(`none)]),
+      selector(".x-axis .tick line", [display(`none)]),
+      selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
       selector(".chart .area-path", [SVG.fill(chartColor)]),
+      selector(".lollipops-line", [SVG.stroke(`hex("bfcad4"))]),
+      selector(
+        ".lollipops-circle",
+        [SVG.stroke(`hex("bfcad4")), SVG.fill(`hex("bfcad4"))],
+      ),
+      selector(".lollipops-x-axis .domain", [display(`none)]),
+      selector(".lollipops-x-axis .tick line", [display(`none)]),
+      selector(".lollipops-x-axis .tick text", [display(`none)]),
     ]);
 };
 
diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 780d9452..9339ab72 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -232,7 +232,7 @@ export class CdfChartD3 {
       .y0(this.calc.chartHeight);
 
     // Add axis.
-    this.chart.createObject({ tag: 'g', selector: 'xAxis' })
+    this.chart.createObject({ tag: 'g', selector: 'x-axis' })
       .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
       .call(this.xAxis);
 
@@ -316,9 +316,9 @@ export class CdfChartD3 {
         .padding(1);
 
       this.chart.append("g")
+        .attr("class", 'lollipops-x-axis')
         .attr("transform", "translate(0," + this.calc.chartHeight + ")")
-        .call(d3.axisBottom(x))
-        .selectAll("text");
+        .call(d3.axisBottom(x));
 
       // Add Y axis
       const y = d3.scaleLinear()
@@ -326,6 +326,7 @@ export class CdfChartD3 {
         .range([this.calc.chartHeight, 0]);
 
       this.chart.append("g")
+        .attr("class", 'lollipops-y-axis')
         .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
         .call(d3.axisLeft(y));
 
@@ -334,22 +335,21 @@ export class CdfChartD3 {
         .data(data)
         .enter()
         .append("line")
+        .attr("class", 'lollipops-line')
         .attr("x1", d => x(d.x))
         .attr("x2", d => x(d.x))
         .attr("y1", d => y(d.y))
-        .attr("y2", y(0))
-        .attr("stroke", "red");
+        .attr("y2", y(0));
 
       // Circles
       this.chart.selectAll("lollipops-circle")
         .data(data)
         .enter()
         .append("circle")
+        .attr("class", 'lollipops-circle')
         .attr("cx", d => x(d.x))
         .attr("cy", d => y(d.y))
-        .attr("r", "4")
-        .style("fill", "yellow")
-        .attr("stroke", "green");
+        .attr("r", "4");
     }
     return this;
   }
diff --git a/src/lib/Chart.re b/src/lib/Chart.re
index 9002108b..1935f039 100644
--- a/src/lib/Chart.re
+++ b/src/lib/Chart.re
@@ -2,11 +2,19 @@ module Styles = {
   open Css;
   let graph = chartColor =>
     style([
-      selector(".axis", [fontSize(`px(9))]),
-      selector(".domain", [display(`none)]),
-      selector(".tick line", [display(`none)]),
-      selector(".tick text", [color(`hex("bfcad4"))]),
+      selector(".x-axis", [fontSize(`px(9))]),
+      selector(".x-axis .domain", [display(`none)]),
+      selector(".x-axis .tick line", [display(`none)]),
+      selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
       selector(".chart .area-path", [SVG.fill(chartColor)]),
+      selector(".lollipops-line", [SVG.stroke(`hex("bfcad4"))]),
+      selector(
+        ".lollipops-circle",
+        [SVG.stroke(`hex("bfcad4")), SVG.fill(`hex("bfcad4"))],
+      ),
+      selector(".lollipops-x-axis .domain", [display(`none)]),
+      selector(".lollipops-x-axis .tick line", [display(`none)]),
+      selector(".lollipops-x-axis .tick text", [display(`none)]),
     ]);
 };
 

From 00589ad310e7ed99f9615f0bcf0e198aef92e09a Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 12:31:10 +0300
Subject: [PATCH 05/13] Adds y axis

---
 src/components/charts/cdfChartD3.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 9339ab72..d1050632 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -221,6 +221,8 @@ export class CdfChartD3 {
         });
     }
 
+    this.yAxis = d3.axisRight(this.yScale);
+
     // Objects.
     const line = d3.line()
       .x(d => this.xScale(d.x))
@@ -236,6 +238,9 @@ export class CdfChartD3 {
       .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
       .call(this.xAxis);
 
+    this.chart.createObject({ tag: 'g', selector: 'y-axis' })
+      .call(this.yAxis);
+
     // Draw area.
     this.chart
       .createObjectsWithData({
@@ -320,7 +325,7 @@ export class CdfChartD3 {
         .attr("transform", "translate(0," + this.calc.chartHeight + ")")
         .call(d3.axisBottom(x));
 
-      // Add Y axis
+      // Y axis
       const y = d3.scaleLinear()
         .domain([0, 50])
         .range([this.calc.chartHeight, 0]);

From 4e0ce7ad027d56904e3fdd6f09021f3cae84699f Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 12:34:34 +0300
Subject: [PATCH 06/13] Separates branches

---
 src/components/charts/cdfChartD3.js | 96 +++++++++++++++--------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index d1050632..473b281e 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -161,8 +161,12 @@ export class CdfChartD3 {
         'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
       );
 
-    // A
+    this.addDistributionChart();
+    this.addLollipopsChart();
+    return this;
+  }
 
+  addDistributionChart() {
     const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
     this.dataPoints = [this.getDataPoints('primary')];
 
@@ -304,59 +308,57 @@ export class CdfChartD3 {
         thi$.mouseover(this);
       })
       .on('mouseout', this.mouseout);
+  }
 
-    // Lollipops
-    {
-      const data = [
-        {x: 3, y: 10},
-        {x: 5, y: 30},
-        {x: 7.5, y: 50},
-      ];
-      const xs = [3, 5, 7.5];
+  addLollipopsChart() {
+    const data = [
+      { x: 3, y: 10 },
+      { x: 5, y: 30 },
+      { x: 7.5, y: 50 },
+    ];
+    const xs = [3, 5, 7.5];
 
-      // X axis
-      const x = d3.scaleBand()
-        .range([0, this.calc.chartWidth])
-        .domain(xs)
-        .padding(1);
+    // X axis
+    const x = d3.scaleBand()
+      .range([0, this.calc.chartWidth])
+      .domain(xs)
+      .padding(1);
 
-      this.chart.append("g")
-        .attr("class", 'lollipops-x-axis')
-        .attr("transform", "translate(0," + this.calc.chartHeight + ")")
-        .call(d3.axisBottom(x));
+    this.chart.append("g")
+      .attr("class", 'lollipops-x-axis')
+      .attr("transform", "translate(0," + this.calc.chartHeight + ")")
+      .call(d3.axisBottom(x));
 
-      // Y axis
-      const y = d3.scaleLinear()
-        .domain([0, 50])
-        .range([this.calc.chartHeight, 0]);
+    // Y axis
+    const y = d3.scaleLinear()
+      .domain([0, 50])
+      .range([this.calc.chartHeight, 0]);
 
-      this.chart.append("g")
-        .attr("class", 'lollipops-y-axis')
-        .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
-        .call(d3.axisLeft(y));
+    this.chart.append("g")
+      .attr("class", 'lollipops-y-axis')
+      .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
+      .call(d3.axisLeft(y));
 
-      // Lines
-      this.chart.selectAll("lollipops-line")
-        .data(data)
-        .enter()
-        .append("line")
-        .attr("class", 'lollipops-line')
-        .attr("x1", d => x(d.x))
-        .attr("x2", d => x(d.x))
-        .attr("y1", d => y(d.y))
-        .attr("y2", y(0));
+    // Lines
+    this.chart.selectAll("lollipops-line")
+      .data(data)
+      .enter()
+      .append("line")
+      .attr("class", 'lollipops-line')
+      .attr("x1", d => x(d.x))
+      .attr("x2", d => x(d.x))
+      .attr("y1", d => y(d.y))
+      .attr("y2", y(0));
 
-      // Circles
-      this.chart.selectAll("lollipops-circle")
-        .data(data)
-        .enter()
-        .append("circle")
-        .attr("class", 'lollipops-circle')
-        .attr("cx", d => x(d.x))
-        .attr("cy", d => y(d.y))
-        .attr("r", "4");
-    }
-    return this;
+    // Circles
+    this.chart.selectAll("lollipops-circle")
+      .data(data)
+      .enter()
+      .append("circle")
+      .attr("class", 'lollipops-circle')
+      .attr("cx", d => x(d.x))
+      .attr("cy", d => y(d.y))
+      .attr("r", "4");
   }
 
   mouseover(constructor) {

From dd18736258e688c1bd89451b2b7fcadf0a26c24a Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 12:53:56 +0300
Subject: [PATCH 07/13] Adds discrete param

---
 src/components/charts/CdfChart__Base.re       | 20 ++++++++++++++-----
 src/components/charts/CdfChart__Plain.re      |  8 ++++++--
 .../charts/GenericDistributionChart.re        | 10 ++++++++--
 src/components/charts/cdfChartReact.js        |  5 ++++-
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/charts/CdfChart__Base.re b/src/components/charts/CdfChart__Base.re
index ffcaf2f0..96fd0f7c 100644
--- a/src/components/charts/CdfChart__Base.re
+++ b/src/components/charts/CdfChart__Base.re
@@ -1,11 +1,19 @@
 [@bs.module "./cdfChartReact.js"]
 external cdfChart: ReasonReact.reactClass = "default";
 
-type primaryDistribution = {
-  .
-  "xs": array(float),
-  "ys": array(float),
-};
+type primaryDistribution =
+  option({
+    .
+    "xs": array(float),
+    "ys": array(float),
+  });
+
+type discrete =
+  option({
+    .
+    "xs": array(float),
+    "ys": array(float),
+  });
 
 [@react.component]
 let make =
@@ -17,6 +25,7 @@ let make =
       ~minX=?,
       ~onHover=(f: float) => (),
       ~primaryDistribution=?,
+      ~discrete=?,
       ~scale=?,
       ~showDistributionLines=?,
       ~showVerticalLine=?,
@@ -35,6 +44,7 @@ let make =
         ~minX?,
         ~onHover,
         ~primaryDistribution?,
+        ~discrete?,
         ~scale?,
         ~showDistributionLines?,
         ~showVerticalLine?,
diff --git a/src/components/charts/CdfChart__Plain.re b/src/components/charts/CdfChart__Plain.re
index f444d595..53bdde40 100644
--- a/src/components/charts/CdfChart__Plain.re
+++ b/src/components/charts/CdfChart__Plain.re
@@ -27,7 +27,8 @@ module Styles = {
 let make =
     (
       ~color=`hex("111"),
-      ~data,
+      ~primaryDistribution=?,
+      ~discrete=?,
       ~height=200,
       ~maxX=?,
       ~minX=?,
@@ -45,7 +46,10 @@ let make =
       marginBottom=50
       marginTop=0
       onHover
-      primaryDistribution={data |> Shape.XYShape.toJs}
+      primaryDistribution={
+        primaryDistribution |> E.O.fmap(pd => pd |> Shape.XYShape.toJs)
+      }
+      discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
       showDistributionLines=false
       showVerticalLine=false
     />
diff --git a/src/components/charts/GenericDistributionChart.re b/src/components/charts/GenericDistributionChart.re
index c21a7e4d..5c11cea9 100644
--- a/src/components/charts/GenericDistributionChart.re
+++ b/src/components/charts/GenericDistributionChart.re
@@ -7,11 +7,12 @@ module Mixed = {
       React.useMemo1(
         () =>
           <CdfChart__Plain
-            data={
+            primaryDistribution={
               data.continuous
               |> Shape.Continuous.normalizePdf
               |> E.O.toExt("")
             }
+            discrete={data.discrete}
             color={`hex("333")}
             timeScale
             onHover={r => setX(_ => r)}
@@ -70,7 +71,12 @@ module Cont = {
   let make = (~continuous, ~onHover, ~timeScale) => {
     let chart =
       React.useMemo1(
-        () => <CdfChart__Plain data=continuous color={`hex("333")} onHover />,
+        () =>
+          <CdfChart__Plain
+            primaryDistribution=continuous
+            color={`hex("333")}
+            onHover
+          />,
         [|continuous|],
       );
     chart;
diff --git a/src/components/charts/cdfChartReact.js b/src/components/charts/cdfChartReact.js
index e2c48952..20d41861 100644
--- a/src/components/charts/cdfChartReact.js
+++ b/src/components/charts/cdfChartReact.js
@@ -48,7 +48,10 @@ function CdfChartReact(props) {
       .verticalLine(props.verticalLine)
       .showVerticalLine(props.showVerticalLine)
       .container(containerRef.current)
-      .data({ primary: props.primaryDistribution })
+      .data({
+        primary: props.primaryDistribution,
+        discrete: props.discrete,
+      })
       .scale(scale)
       .timeScale(props.timeScale)
       .render();

From 8d2602ee772512569e090ca4e234c1f4f05e6b0f Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 13:15:48 +0300
Subject: [PATCH 08/13] Fixes variables scopes

---
 src/components/charts/cdfChartD3.js | 126 ++++++++++++----------------
 1 file changed, 53 insertions(+), 73 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 473b281e..e2acf93a 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -28,6 +28,7 @@ export class CdfChartD3 {
       onHover: (e) => {
       },
     };
+
     this.calc = {
       chartLeftMargin: null,
       chartTopMargin: null,
@@ -39,12 +40,6 @@ export class CdfChartD3 {
     this.svg = null;
     this._container = null;
 
-    this.hoverLine = null;
-    this.xScale = null;
-    this.dataPoints = null;
-
-    this.mouseover = this.mouseover.bind(this);
-    this.mouseout = this.mouseout.bind(this);
     this.formatDates = this.formatDates.bind(this);
   }
 
@@ -168,31 +163,32 @@ export class CdfChartD3 {
 
   addDistributionChart() {
     const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
-    this.dataPoints = [this.getDataPoints('primary')];
+    const dataPoints = [this.getDataPoints('primary')];
+
+    // Boundaries.
+    const xMin = this.attrs.minX || d3.min(this.attrs.data.primary.xs);
+    const xMax = this.attrs.maxX || d3.max(this.attrs.data.primary.xs);
+    const yMin = d3.min(this.attrs.data.primary.ys);
+    const yMax = d3.max(this.attrs.data.primary.ys);
 
     // Scales.
-    const xMin = d3.min(this.attrs.data.primary.xs);
-    const xMax = d3.max(this.attrs.data.primary.xs);
-
     if (this.attrs.scale === 'linear') {
       this.xScale = d3.scaleLinear()
-        .domain([this.attrs.minX || xMin, this.attrs.maxX || xMax])
+        .domain([xMin, xMax])
         .range([0, this.calc.chartWidth]);
     } else {
       this.xScale = d3.scaleLog()
         .base(this.attrs.logBase)
-        .domain([this.attrs.minX, this.attrs.maxX])
+        .domain([xMin, xMax])
         .range([0, this.calc.chartWidth]);
     }
 
-    const yMin = d3.min(this.attrs.data.primary.ys);
-    const yMax = d3.max(this.attrs.data.primary.ys);
-
     this.yScale = d3.scaleLinear()
       .domain([yMin, yMax])
       .range([this.calc.chartHeight, 0]);
 
     // Axis generator.
+    let xAxis = null;
     if (!!this.attrs.timeScale) {
       const zero = _.get(this.attrs.timeScale, 'zero', moment());
       const unit = _.get(this.attrs.timeScale, 'unit', 'years');
@@ -205,12 +201,12 @@ export class CdfChartD3 {
         .nice()
         .range([0, this.calc.chartWidth]);
 
-      this.xAxis = d3.axisBottom()
+      xAxis = d3.axisBottom()
         .scale(xScaleTime)
         .ticks(this.getTimeTicksByStr(unit))
         .tickFormat(this.formatDates);
     } else {
-      this.xAxis = d3.axisBottom(this.xScale)
+      xAxis = d3.axisBottom(this.xScale)
         .ticks(3)
         .tickFormat(d => {
           if (Math.abs(d) < 1) {
@@ -225,7 +221,7 @@ export class CdfChartD3 {
         });
     }
 
-    this.yAxis = d3.axisRight(this.yScale);
+    const yAxis = d3.axisRight(this.yScale);
 
     // Objects.
     const line = d3.line()
@@ -240,17 +236,17 @@ export class CdfChartD3 {
     // Add axis.
     this.chart.createObject({ tag: 'g', selector: 'x-axis' })
       .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
-      .call(this.xAxis);
+      .call(xAxis);
 
     this.chart.createObject({ tag: 'g', selector: 'y-axis' })
-      .call(this.yAxis);
+      .call(yAxis);
 
     // Draw area.
     this.chart
       .createObjectsWithData({
         tag: 'path',
         selector: 'area-path',
-        data: this.dataPoints,
+        data: dataPoints,
       })
       .attr('d', area)
       .attr('fill', (d, i) => areaColorRange(i))
@@ -262,7 +258,7 @@ export class CdfChartD3 {
         .createObjectsWithData({
           tag: 'path',
           selector: 'line-path',
-          data: this.dataPoints,
+          data: dataPoints,
         })
         .attr('d', line)
         .attr('id', (d, i) => 'line-' + (i + 1))
@@ -282,7 +278,7 @@ export class CdfChartD3 {
         .attr('stroke', 'steelblue');
     }
 
-    this.hoverLine = this.chart
+    const hoverLine = this.chart
       .createObject({ tag: 'line', selector: 'hover-line' })
       .attr('x1', 0)
       .attr('x2', 0)
@@ -294,20 +290,40 @@ export class CdfChartD3 {
       .attr('stroke', '#22313F');
 
     // Add drawing rectangle.
-    const thi$ = this;
-    this.chart
-      .createObject({ tag: 'rect', selector: 'mouse-rect' })
-      .attr('width', this.calc.chartWidth)
-      .attr('height', this.calc.chartHeight)
-      .attr('fill', 'transparent')
-      .attr('pointer-events', 'all')
-      .on('mouseover', function () {
-        thi$.mouseover(this);
-      })
-      .on('mousemove', function () {
-        thi$.mouseover(this);
-      })
-      .on('mouseout', this.mouseout);
+    {
+      const context = this;
+      const range = [
+        this.xScale(dataPoints[dataPoints.length - 1][0].x),
+        this.xScale(
+          dataPoints
+            [dataPoints.length - 1]
+            [dataPoints[dataPoints.length - 1].length - 1].x,
+        ),
+      ];
+
+      function mouseover() {
+        const mouse = d3.mouse(this);
+        hoverLine.attr('opacity', 1).attr('x1', mouse[0]).attr('x2', mouse[0]);
+        const xValue = mouse[0] > range[0] && mouse[0] < range[1]
+          ? context.xScale.invert(mouse[0]).toFixed(2)
+          : 0;
+        context.attrs.onHover(xValue);
+      }
+
+      function mouseout() {
+        hoverLine.attr('opacity', 0)
+      }
+
+      this.chart
+        .createObject({ tag: 'rect', selector: 'mouse-rect' })
+        .attr('width', this.calc.chartWidth)
+        .attr('height', this.calc.chartHeight)
+        .attr('fill', 'transparent')
+        .attr('pointer-events', 'all')
+        .on('mouseover', mouseover)
+        .on('mousemove', mouseover)
+        .on('mouseout', mouseout);
+    }
   }
 
   addLollipopsChart() {
@@ -361,34 +377,6 @@ export class CdfChartD3 {
       .attr("r", "4");
   }
 
-  mouseover(constructor) {
-    const mouse = d3.mouse(constructor);
-    this.hoverLine.attr('opacity', 1)
-      .attr('x1', mouse[0])
-      .attr('x2', mouse[0]);
-
-    const xValue = this.xScale.invert(mouse[0]).toFixed(2);
-
-    const range = [
-      this.xScale(this.dataPoints[this.dataPoints.length - 1][0].x),
-      this.xScale(
-        this.dataPoints
-          [this.dataPoints.length - 1]
-          [this.dataPoints[this.dataPoints.length - 1].length - 1].x,
-      ),
-    ];
-
-    if (mouse[0] > range[0] && mouse[0] < range[1]) {
-      this.attrs.onHover(xValue);
-    } else {
-      this.attrs.onHover(0.0);
-    }
-  }
-
-  mouseout() {
-    this.hoverLine.attr('opacity', 0)
-  }
-
   formatDates(ts) {
     return moment(ts).format("MMMM Do YYYY");
   }
@@ -451,14 +439,6 @@ d3.selection.prototype.createObject = function createObject(params) {
 };
 
 /**
- * @example:
- * This call example
- * createObjectsByData({
- *   tag: 'path',
- *   selector: 'line-path',
- *   data: this.dataPoints,
- * })
- * will create a new tag "<path class="line-path">1,2,3</path>".
  * @docs: https://github.com/d3/d3-selection
  * @param params
  * @returns {*}

From e2d5426616e23a34bf725dc1cb8eab0dac08d1dc Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 13:33:21 +0300
Subject: [PATCH 09/13] Fixes variables scopes (2)

---
 src/components/charts/cdfChartD3.js | 65 ++++++++++++++---------------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index e2acf93a..aa6d8cf6 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -156,8 +156,8 @@ export class CdfChartD3 {
         'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
       );
 
-    this.addDistributionChart();
-    this.addLollipopsChart();
+    const distributionChart = this.addDistributionChart();
+    this.addLollipopsChart(distributionChart);
     return this;
   }
 
@@ -172,18 +172,19 @@ export class CdfChartD3 {
     const yMax = d3.max(this.attrs.data.primary.ys);
 
     // Scales.
+    let xScale = null;
     if (this.attrs.scale === 'linear') {
-      this.xScale = d3.scaleLinear()
+      xScale = d3.scaleLinear()
         .domain([xMin, xMax])
         .range([0, this.calc.chartWidth]);
     } else {
-      this.xScale = d3.scaleLog()
+      xScale = d3.scaleLog()
         .base(this.attrs.logBase)
         .domain([xMin, xMax])
         .range([0, this.calc.chartWidth]);
     }
 
-    this.yScale = d3.scaleLinear()
+    const yScale = d3.scaleLinear()
       .domain([yMin, yMax])
       .range([this.calc.chartHeight, 0]);
 
@@ -206,7 +207,7 @@ export class CdfChartD3 {
         .ticks(this.getTimeTicksByStr(unit))
         .tickFormat(this.formatDates);
     } else {
-      xAxis = d3.axisBottom(this.xScale)
+      xAxis = d3.axisBottom(xScale)
         .ticks(3)
         .tickFormat(d => {
           if (Math.abs(d) < 1) {
@@ -221,16 +222,16 @@ export class CdfChartD3 {
         });
     }
 
-    const yAxis = d3.axisRight(this.yScale);
+    const yAxis = d3.axisRight(yScale);
 
     // Objects.
     const line = d3.line()
-      .x(d => this.xScale(d.x))
-      .y(d => this.yScale(d.y));
+      .x(d => xScale(d.x))
+      .y(d => yScale(d.y));
 
     const area = d3.area()
-      .x(d => this.xScale(d.x))
-      .y1(d => this.yScale(d.y))
+      .x(d => xScale(d.x))
+      .y1(d => yScale(d.y))
       .y0(this.calc.chartHeight);
 
     // Add axis.
@@ -269,8 +270,8 @@ export class CdfChartD3 {
     if (this.attrs.showVerticalLine) {
       this.chart
         .createObject({ tag: 'line', selector: 'v-line' })
-        .attr('x1', this.xScale(this.attrs.verticalLine))
-        .attr('x2', this.xScale(this.attrs.verticalLine))
+        .attr('x1', xScale(this.attrs.verticalLine))
+        .attr('x2', xScale(this.attrs.verticalLine))
         .attr('y1', 0)
         .attr('y2', this.calc.chartHeight)
         .attr('stroke-width', 1.5)
@@ -293,8 +294,8 @@ export class CdfChartD3 {
     {
       const context = this;
       const range = [
-        this.xScale(dataPoints[dataPoints.length - 1][0].x),
-        this.xScale(
+        xScale(dataPoints[dataPoints.length - 1][0].x),
+        xScale(
           dataPoints
             [dataPoints.length - 1]
             [dataPoints[dataPoints.length - 1].length - 1].x,
@@ -305,7 +306,7 @@ export class CdfChartD3 {
         const mouse = d3.mouse(this);
         hoverLine.attr('opacity', 1).attr('x1', mouse[0]).attr('x2', mouse[0]);
         const xValue = mouse[0] > range[0] && mouse[0] < range[1]
-          ? context.xScale.invert(mouse[0]).toFixed(2)
+          ? xScale.invert(mouse[0]).toFixed(2)
           : 0;
         context.attrs.onHover(xValue);
       }
@@ -324,30 +325,25 @@ export class CdfChartD3 {
         .on('mousemove', mouseover)
         .on('mouseout', mouseout);
     }
+
+    return { xScale, yScale };
   }
 
-  addLollipopsChart() {
-    const data = [
-      { x: 3, y: 10 },
-      { x: 5, y: 30 },
-      { x: 7.5, y: 50 },
-    ];
-    const xs = [3, 5, 7.5];
+  addLollipopsChart(distributionChart) {
+    const data = this.getDataPoints('discrete');
+    const ys = data.map(item => item.y);
+    const yMin = d3.min(ys);
+    const yMax = d3.max(ys);
 
     // X axis
-    const x = d3.scaleBand()
-      .range([0, this.calc.chartWidth])
-      .domain(xs)
-      .padding(1);
-
     this.chart.append("g")
       .attr("class", 'lollipops-x-axis')
       .attr("transform", "translate(0," + this.calc.chartHeight + ")")
-      .call(d3.axisBottom(x));
+      .call(d3.axisBottom(distributionChart.xScale));
 
     // Y axis
     const y = d3.scaleLinear()
-      .domain([0, 50])
+      .domain([yMin, yMax])
       .range([this.calc.chartHeight, 0]);
 
     this.chart.append("g")
@@ -361,8 +357,8 @@ export class CdfChartD3 {
       .enter()
       .append("line")
       .attr("class", 'lollipops-line')
-      .attr("x1", d => x(d.x))
-      .attr("x2", d => x(d.x))
+      .attr("x1", d => distributionChart.xScale(d.x))
+      .attr("x2", d => distributionChart.xScale(d.x))
       .attr("y1", d => y(d.y))
       .attr("y2", y(0));
 
@@ -372,7 +368,7 @@ export class CdfChartD3 {
       .enter()
       .append("circle")
       .attr("class", 'lollipops-circle')
-      .attr("cx", d => x(d.x))
+      .attr("cx", d => distributionChart.xScale(d.x))
       .attr("cy", d => y(d.y))
       .attr("r", "4");
   }
@@ -416,7 +412,8 @@ export class CdfChartD3 {
    */
   getDataPoints(key) {
     const dt = [];
-    const data = this.attrs.data[key];
+    const emptyShape = { xs: [], ys: [] };
+    const data = _.get(this.attrs.data, key, emptyShape);
     const len = data.xs.length;
 
     for (let i = 0; i < len; i++) {

From 773e77534d80d3c567daa319fd358be32ffd574f Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 13:33:43 +0300
Subject: [PATCH 10/13] Fixes variables scopes (3)

---
 src/components/charts/cdfChartD3.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index aa6d8cf6..5838bb17 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -342,14 +342,14 @@ export class CdfChartD3 {
       .call(d3.axisBottom(distributionChart.xScale));
 
     // Y axis
-    const y = d3.scaleLinear()
+    const yScale = d3.scaleLinear()
       .domain([yMin, yMax])
       .range([this.calc.chartHeight, 0]);
 
     this.chart.append("g")
       .attr("class", 'lollipops-y-axis')
       .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
-      .call(d3.axisLeft(y));
+      .call(d3.axisLeft(yScale));
 
     // Lines
     this.chart.selectAll("lollipops-line")
@@ -359,8 +359,8 @@ export class CdfChartD3 {
       .attr("class", 'lollipops-line')
       .attr("x1", d => distributionChart.xScale(d.x))
       .attr("x2", d => distributionChart.xScale(d.x))
-      .attr("y1", d => y(d.y))
-      .attr("y2", y(0));
+      .attr("y1", d => yScale(d.y))
+      .attr("y2", yScale(0));
 
     // Circles
     this.chart.selectAll("lollipops-circle")
@@ -369,7 +369,7 @@ export class CdfChartD3 {
       .append("circle")
       .attr("class", 'lollipops-circle')
       .attr("cx", d => distributionChart.xScale(d.x))
-      .attr("cy", d => y(d.y))
+      .attr("cy", d => yScale(d.y))
       .attr("r", "4");
   }
 

From dd1c6435b4b1c7b159f58c1ef1c60572e45ef32b Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 13:38:04 +0300
Subject: [PATCH 11/13] Fixes lines

---
 src/components/charts/cdfChartD3.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 5838bb17..62822b90 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -332,7 +332,6 @@ export class CdfChartD3 {
   addLollipopsChart(distributionChart) {
     const data = this.getDataPoints('discrete');
     const ys = data.map(item => item.y);
-    const yMin = d3.min(ys);
     const yMax = d3.max(ys);
 
     // X axis
@@ -343,7 +342,7 @@ export class CdfChartD3 {
 
     // Y axis
     const yScale = d3.scaleLinear()
-      .domain([yMin, yMax])
+      .domain([0, yMax])
       .range([this.calc.chartHeight, 0]);
 
     this.chart.append("g")

From 972c9058efd36d5288258c965488cdbaa3a5bca9 Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 13:43:39 +0300
Subject: [PATCH 12/13] Adds stop conditions

---
 src/components/charts/cdfChartD3.js | 30 +++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 62822b90..0d3c35ba 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -156,8 +156,12 @@ export class CdfChartD3 {
         'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
       );
 
-    const distributionChart = this.addDistributionChart();
-    this.addLollipopsChart(distributionChart);
+    if(this.hasDate('primary')){
+      const distributionChart = this.addDistributionChart();
+      if(this.hasDate('discrete')) {
+        this.addLollipopsChart(distributionChart);
+      }
+    }
     return this;
   }
 
@@ -406,8 +410,8 @@ export class CdfChartD3 {
   }
 
   /**
-   * @param key
-   * @returns {[]}
+   * @param {name} key
+   * @returns {{x: number[], y: number[]}}
    */
   getDataPoints(key) {
     const dt = [];
@@ -421,11 +425,22 @@ export class CdfChartD3 {
 
     return dt;
   }
+
+  /**
+   * @param {string} key
+   * @returns {boolean}
+   */
+  hasDate(key) {
+    const data = _.get(this.attrs.data, key);
+    return !!data;
+  }
 }
 
 /**
  * @docs: https://github.com/d3/d3-selection
- * @param params
+ * @param {object} params
+ * @param {string} params.selector
+ * @param {string} params.tag
  * @returns {*}
  */
 d3.selection.prototype.createObject = function createObject(params) {
@@ -436,7 +451,10 @@ d3.selection.prototype.createObject = function createObject(params) {
 
 /**
  * @docs: https://github.com/d3/d3-selection
- * @param params
+ * @param {object} params
+ * @param {string} params.selector
+ * @param {string} params.tag
+ * @param {*[]} params.data
  * @returns {*}
  */
 d3.selection.prototype.createObjectsWithData = function createObjectsWithData(params) {

From 513df940c8f900c48982c61ff7dfff7a159a36b7 Mon Sep 17 00:00:00 2001
From: Roman Galochkin <roman.redrat@gmail.com>
Date: Thu, 20 Feb 2020 14:08:51 +0300
Subject: [PATCH 13/13] Adds stop conditions

---
 src/components/charts/CdfChart__Base.re         |  2 ++
 src/components/charts/CdfChart__Plain.re        | 12 ++++++++----
 .../charts/GenericDistributionChart.re          |  1 +
 src/components/charts/cdfChartD3.js             | 17 ++++++++++++++---
 src/components/charts/cdfChartReact.js          |  1 +
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/charts/CdfChart__Base.re b/src/components/charts/CdfChart__Base.re
index 96fd0f7c..fdd2d8e4 100644
--- a/src/components/charts/CdfChart__Base.re
+++ b/src/components/charts/CdfChart__Base.re
@@ -28,6 +28,7 @@ let make =
       ~discrete=?,
       ~scale=?,
       ~showDistributionLines=?,
+      ~showDistributionYAxis=?,
       ~showVerticalLine=?,
       ~timeScale=?,
       ~verticalLine=?,
@@ -47,6 +48,7 @@ let make =
         ~discrete?,
         ~scale?,
         ~showDistributionLines?,
+        ~showDistributionYAxis?,
         ~showVerticalLine?,
         ~timeScale?,
         ~verticalLine?,
diff --git a/src/components/charts/CdfChart__Plain.re b/src/components/charts/CdfChart__Plain.re
index 53bdde40..f283b3db 100644
--- a/src/components/charts/CdfChart__Plain.re
+++ b/src/components/charts/CdfChart__Plain.re
@@ -27,13 +27,16 @@ module Styles = {
 let make =
     (
       ~color=`hex("111"),
-      ~primaryDistribution=?,
       ~discrete=?,
       ~height=200,
       ~maxX=?,
       ~minX=?,
       ~onHover: float => unit,
+      ~primaryDistribution=?,
       ~scale=?,
+      ~showDistributionLines=false,
+      ~showDistributionYAxis=false,
+      ~showVerticalLine=false,
       ~timeScale=?,
     ) => {
   <div className={Styles.graph(color)}>
@@ -42,6 +45,7 @@ let make =
       ?minX
       ?scale
       ?timeScale
+      discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
       height
       marginBottom=50
       marginTop=0
@@ -49,9 +53,9 @@ let make =
       primaryDistribution={
         primaryDistribution |> E.O.fmap(pd => pd |> Shape.XYShape.toJs)
       }
-      discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
-      showDistributionLines=false
-      showVerticalLine=false
+      showDistributionLines
+      showDistributionYAxis
+      showVerticalLine
     />
   </div>;
 };
\ No newline at end of file
diff --git a/src/components/charts/GenericDistributionChart.re b/src/components/charts/GenericDistributionChart.re
index 5c11cea9..54447ac7 100644
--- a/src/components/charts/GenericDistributionChart.re
+++ b/src/components/charts/GenericDistributionChart.re
@@ -16,6 +16,7 @@ module Mixed = {
             color={`hex("333")}
             timeScale
             onHover={r => setX(_ => r)}
+            showDistributionYAxis=true
           />,
         [|data|],
       );
diff --git a/src/components/charts/cdfChartD3.js b/src/components/charts/cdfChartD3.js
index 0d3c35ba..13fde107 100644
--- a/src/components/charts/cdfChartD3.js
+++ b/src/components/charts/cdfChartD3.js
@@ -20,11 +20,15 @@ export class CdfChartD3 {
       scale: 'linear',
       timeScale: null,
       showDistributionLines: true,
+      showDistributionYAxis: false,
       areaColors: ['#E1E5EC', '#E1E5EC'],
       logBase: 10,
       verticalLine: 110,
       showVerticalLine: true,
-      data: null,
+      data: {
+        primary: null,
+        discrete: null,
+      },
       onHover: (e) => {
       },
     };
@@ -103,6 +107,11 @@ export class CdfChartD3 {
     return this;
   }
 
+  showDistributionYAxis(showDistributionYAxis) {
+    this.attrs.showDistributionYAxis = showDistributionYAxis;
+    return this;
+  }
+
   verticalLine(verticalLine) {
     this.attrs.verticalLine = verticalLine;
     return this;
@@ -243,8 +252,10 @@ export class CdfChartD3 {
       .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
       .call(xAxis);
 
-    this.chart.createObject({ tag: 'g', selector: 'y-axis' })
-      .call(yAxis);
+    if (this.attrs.showDistributionYAxis) {
+      this.chart.createObject({ tag: 'g', selector: 'y-axis' })
+        .call(yAxis);
+    }
 
     // Draw area.
     this.chart
diff --git a/src/components/charts/cdfChartReact.js b/src/components/charts/cdfChartReact.js
index 20d41861..0425e400 100644
--- a/src/components/charts/cdfChartReact.js
+++ b/src/components/charts/cdfChartReact.js
@@ -45,6 +45,7 @@ function CdfChartReact(props) {
       .marginRight(5)
       .marginTop(5)
       .showDistributionLines(props.showDistributionLines)
+      .showDistributionYAxis(props.showDistributionYAxis)
       .verticalLine(props.verticalLine)
       .showVerticalLine(props.showVerticalLine)
       .container(containerRef.current)