From 4735b9703c8df82ea121a25a6206a809bc368302 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Tue, 3 Mar 2020 15:49:05 +0000
Subject: [PATCH] Simple d3 fixes

---
 src/components/charts/DistPlusPlot.re         | 37 +++++++++++--------
 .../charts/DistributionPlot/distPlotD3.js     |  2 +-
 .../charts/DistributionPlot/distPlotReact.js  |  5 +++
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/charts/DistPlusPlot.re b/src/components/charts/DistPlusPlot.re
index 083986e7..32be15ad 100644
--- a/src/components/charts/DistPlusPlot.re
+++ b/src/components/charts/DistPlusPlot.re
@@ -158,19 +158,21 @@ module DistPlusChart = {
       distPlus |> Distributions.DistPlus.T.toDiscreteProbabilityMass;
     let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) =
       adjustBoth(toDiscreteProbabilityMass);
-    <DistributionPlot
-      scale={state.log ? "log" : "linear"}
-      minX
-      maxX
-      yMaxDiscreteDomainFactor
-      yMaxContinuousDomainFactor
-      height={state.height}
-      ?discrete
-      ?continuous
-      color={`hex("5f6b7e")}
-      onHover
-      timeScale
-    />;
+    <div className=Css.(style([minHeight(`px(state.height))]))>
+      <DistributionPlot
+        scale={state.log ? "log" : "linear"}
+        minX
+        maxX
+        yMaxDiscreteDomainFactor
+        yMaxContinuousDomainFactor
+        height={state.height}
+        ?discrete
+        ?continuous
+        color={`hex("5f6b7e")}
+        onHover
+        timeScale
+      />
+    </div>;
   };
 };
 
@@ -216,7 +218,7 @@ let make = (~distPlus: DistTypes.distPlus) => {
         | CHANGE_HEIGHT(height) => {...state, height}
         | CHANGE_SHOW_STATS => {...state, showStats: !state.showStats}
         },
-      {log: true, height: 120, showStats: false},
+      {log: false, height: 80, showStats: false},
     );
   let chart =
     React.useMemo2(
@@ -238,7 +240,12 @@ let make = (~distPlus: DistTypes.distPlus) => {
     <div onClick={_ => dispatch(CHANGE_HEIGHT(state.height + 40))}>
       {"HightPlus" |> ReasonReact.string}
     </div>
-    <div onClick={_ => dispatch(CHANGE_HEIGHT(state.height - 40))}>
+    <div
+      onClick={_ =>
+        dispatch(
+          CHANGE_HEIGHT(state.height < 81 ? state.height : state.height - 40),
+        )
+      }>
       {"HightMinus" |> ReasonReact.string}
     </div>
     chart
diff --git a/src/components/charts/DistributionPlot/distPlotD3.js b/src/components/charts/DistributionPlot/distPlotD3.js
index 5b1b3c31..99b73db7 100644
--- a/src/components/charts/DistributionPlot/distPlotD3.js
+++ b/src/components/charts/DistributionPlot/distPlotD3.js
@@ -407,7 +407,7 @@ export class CdfChartD3 {
         .attr('r', 6);
       tooltip.transition()
         .style('opacity', .9);
-      tooltip.html(`X: ${d.x}, Y: ${d.y}`)
+      tooltip.html(`x: ${d.x}, y: ${(d.y * 100).toFixed(1)}%`)
         .style('left', (common.xScale(d.x) + 60) + 'px')
         .style('top', yScale(d.y) + 'px');
     }
diff --git a/src/components/charts/DistributionPlot/distPlotReact.js b/src/components/charts/DistributionPlot/distPlotReact.js
index 1220b8fe..21f237cb 100644
--- a/src/components/charts/DistributionPlot/distPlotReact.js
+++ b/src/components/charts/DistributionPlot/distPlotReact.js
@@ -34,6 +34,7 @@ function CdfChartReact(props) {
   });
 
   useEffect(() => {
+    try {
     new CdfChartD3()
       .set('svgWidth', width)
       .set('svgHeight', props.height)
@@ -58,6 +59,10 @@ function CdfChartReact(props) {
         discrete: props.discrete,
       })
       .render();
+    }
+    catch(e) {
+      console.error("distPlotD3 Error: ", e)
+    }
   });
 
   return React.createElement("div", {