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] 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)]),
     ]);
 };