From dfbdc51085767296ecbb1f0a86f6bbe7276b99d8 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Thu, 13 Feb 2020 18:35:10 +0000
Subject: [PATCH] Added bs-css, styld Chart.re

---
 bsconfig.json    |  1 +
 package.json     |  1 +
 src/lib/Chart.re | 34 ++++++++++++++++++++++++----------
 src/lib/Prop.re  |  5 ++++-
 yarn.lock        |  2 +-
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/bsconfig.json b/bsconfig.json
index be57d770..359646a4 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -19,6 +19,7 @@
     "bs-ant-design-alt",
     "reason-react",
     "bs-reform",
+    "bs-css",
     "rationale",
     "bs-moment",
     "reschema"
diff --git a/package.json b/package.json
index f6424815..90305344 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "antd": "3.17.0",
     "autoprefixer": "^9.7.4",
     "bs-ant-design-alt": "2.0.0-alpha.31",
+    "bs-css": "^11.0.0",
     "bs-moment": "0.4.4",
     "bs-reform": "9.7.1",
     "lenses-ppx": "4.0.0",
diff --git a/src/lib/Chart.re b/src/lib/Chart.re
index 439928e7..9002108b 100644
--- a/src/lib/Chart.re
+++ b/src/lib/Chart.re
@@ -1,3 +1,15 @@
+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(".chart .area-path", [SVG.fill(chartColor)]),
+    ]);
+};
+
 [@react.component]
 let make =
     (
@@ -8,13 +20,15 @@ let make =
       ~height=50,
       ~color=`hex("7e9db7"),
     ) =>
-  <ForetoldComponents.CdfChart__Base
-    width=0
-    height
-    ?minX
-    ?maxX
-    marginBottom=20
-    showVerticalLine=false
-    showDistributionLines=false
-    primaryDistribution=data
-  />;
\ No newline at end of file
+  <div className={Styles.graph(color)}>
+    <ForetoldComponents.CdfChart__Base
+      width=0
+      height
+      ?minX
+      ?maxX
+      marginBottom=20
+      showVerticalLine=false
+      showDistributionLines=false
+      primaryDistribution=data
+    />
+  </div>;
\ No newline at end of file
diff --git a/src/lib/Prop.re b/src/lib/Prop.re
index 21c5f922..8297864e 100644
--- a/src/lib/Prop.re
+++ b/src/lib/Prop.re
@@ -40,7 +40,10 @@ module Value = {
       let cdf: Types.distribution =
         CdfLibrary.Distribution.fromString(r, 2000);
       <>
-        <Chart data={cdf |> CdfLibrary.Distribution.toPdf |> Types.toJs} />
+        <Chart
+          height=100
+          data={cdf |> CdfLibrary.Distribution.toPdf |> Types.toJs}
+        />
         {r |> ReasonReact.string}
       </>;
     | Probability(r) =>
diff --git a/yarn.lock b/yarn.lock
index 1fb67dcc..fa7acb48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1955,7 +1955,7 @@ bs-ant-design-alt@2.0.0-alpha.31:
     bs-moment "^0.4.4"
     re-classnames "^4.0.0"
 
-bs-css@11.0.0:
+bs-css@11.0.0, bs-css@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/bs-css/-/bs-css-11.0.0.tgz#6ed1726d7c06aa584d255d1cf23240a2acc0aa07"
   integrity sha512-bpSwj1VvmWNMoJ5qnsHMQC+Mj0zjL9iwcOhl5ipP7Hfr7v+ZyKqjSMaMK+L1EdukuCp0rJmRD2I/MbS4BHnMmQ==