Attempt at simple graphs

showcase/entries/Continuous.re

@@ -1,19 +1,54 @@
 open ForetoldComponents.Base;
 
 let data: DistributionTypes.xyShape = {
-  xs: [|0.2, 20., 80., 212., 330.|],
-  ys: [|0.0, 0.3, 0.5, 0.2, 0.1|],
+  xs: [|1., 10., 10., 200., 250., 292., 330.|],
+  ys: [|0.0, 0.0, 0.1, 0.3, 0.5, 0.2, 0.1|],
 };
 
-let alerts = () =>
+let mixedDist =
+  GenericDistribution.make(
+    ~generationSource=GuesstimatorString("mm(3, normal(5,1), [.5,.5])"),
+    ~probabilityType=Pdf,
+    ~domain=Complete,
+    ~unit=Unspecified,
+    (),
+  )
+  |> GenericDistribution.renderIfNeeded(~sampleCount=3000);
+
+let timeDist =
+  GenericDistribution.make(
+    ~generationSource=GuesstimatorString("mm(3, normal(5,1), [.5,.5])"),
+    ~probabilityType=Pdf,
+    ~domain=Complete,
+    ~unit=Time({zero: MomentRe.momentNow(), unit: `years}),
+    (),
+  )
+  |> GenericDistribution.renderIfNeeded(~sampleCount=3000);
+
+let domainLimitedDist =
+  GenericDistribution.make(
+    ~generationSource=GuesstimatorString("mm(3, normal(5,1), [.5,.5])"),
+    ~probabilityType=Pdf,
+    ~domain=RightLimited({xPoint: 6.0, excludingProbabilityMass: 0.3}),
+    ~unit=Unspecified,
+    (),
+  )
+  |> GenericDistribution.renderIfNeeded(~sampleCount=3000);
+
+let distributions = () =>
   <div>
-    <div> <ChartWithNumber data color={`hex("333")} /> </div>
     <div>
-      <ChartWithNumber
-        data={data |> Shape.XYShape.integral}
-        color={`hex("333")}
-      />
+      <h2> {"Basic Mixed Distribution" |> ReasonReact.string} </h2>
+      <GenericDistributionChart dist=mixedDist />
+    </div>
+    <div>
+      <h2> {"Time Distribution" |> ReasonReact.string} </h2>
+      <GenericDistributionChart dist=timeDist />
+    </div>
+    <div>
+      <h2> {"Domain Limited Distribution" |> ReasonReact.string} </h2>
+      <GenericDistributionChart dist=domainLimitedDist />
     </div>
   </div>;
 
-let entry = EntryTypes.(entry(~title="Pdf", ~render=alerts));
+let entry = EntryTypes.(entry(~title="Pdf", ~render=distributions));

showcase/index.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <!--<link rel="stylesheet" href="styles.css">-->
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
+    <link href="../src/styles/index.css" rel="stylesheet">
     <style>
         body {
             margin: 0;

src/components/charts/ChartWithNumber.re

@@ -1,23 +0,0 @@
-[@react.component]
-let make = (~data, ~color=?) => {
-  let (x, setX) = React.useState(() => 0.);
-  let chart =
-    React.useMemo1(
-      () => <CdfChart__Plain data ?color onHover={r => setX(_ => r)} />,
-      [|data|],
-    );
-  <div>
-    chart
-    <div> {x |> E.Float.toString |> ReasonReact.string} </div>
-    <div>
-      {Shape.Continuous.findY(x, data)
-       |> E.Float.toString
-       |> ReasonReact.string}
-    </div>
-    <div>
-      {Shape.Continuous.findY(x, Shape.XYShape.integral(data))
-       |> E.Float.toString
-       |> ReasonReact.string}
-    </div>
-  </div>;
-};

src/components/charts/GenericDistributionChart.re

@@ -0,0 +1,69 @@
+module Continuous = {
+  [@react.component]
+  let make = (~data) => {
+    let (x, setX) = React.useState(() => 0.);
+    let chart =
+      React.useMemo1(
+        () =>
+          <CdfChart__Plain
+            data
+            color={`hex("333")}
+            onHover={r => setX(_ => r)}
+          />,
+        [|data|],
+      );
+    <div>
+      chart
+      <table className="table-auto">
+        <thead>
+          <tr>
+            <th className="px-4 py-2"> {"X Point" |> ReasonReact.string} </th>
+            <th className="px-4 py-2"> {"Y Pount" |> ReasonReact.string} </th>
+            <th className="px-4 py-2">
+              {"Y Integral to Point" |> ReasonReact.string}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th className="px-4 py-2 border ">
+              {x |> E.Float.toString |> ReasonReact.string}
+            </th>
+            <th className="px-4 py-2 border ">
+              {Shape.Continuous.findY(x, data)
+               |> E.Float.with2DigitsPrecision
+               |> ReasonReact.string}
+            </th>
+            <th className="px-4 py-2 border ">
+              {Shape.Continuous.findY(x, Shape.XYShape.integral(data))
+               |> E.Float.with2DigitsPrecision
+               |> ReasonReact.string}
+            </th>
+          </tr>
+        </tbody>
+      </table>
+      <div />
+    </div>;
+  };
+};
+
+[@react.component]
+let make = (~dist) => {
+  switch ((dist: option(DistributionTypes.genericDistribution))) {
+  | Some({
+      generationSource:
+        Shape(
+          Mixed({
+            continuous: n,
+            discrete: d,
+            discreteProbabilityMassFraction: f,
+          }),
+        ),
+    }) =>
+    <div>
+      <Continuous data={n |> Shape.Continuous.toPdf} />
+      {d |> Shape.Discrete.scaleYToTotal(f) |> Shape.Discrete.render}
+    </div>
+  | _ => <div />
+  };
+};

src/components/charts/cdfChartd3.js

@@ -9,7 +9,7 @@ function chart() {
 
     marginTop: 5,
     marginBottom: 5,
-    marginRight: 5,
+    marginRight: 50,
     marginLeft: 5,
 
     container: 'body',