Attempt at simple graphs

This commit is contained in:
Ozzie Gooen 2020-02-17 22:53:39 +00:00
parent 17071602e8
commit 9923021b48
5 changed files with 116 additions and 34 deletions

View File

@ -1,19 +1,54 @@
open ForetoldComponents.Base; open ForetoldComponents.Base;
let data: DistributionTypes.xyShape = { let data: DistributionTypes.xyShape = {
xs: [|0.2, 20., 80., 212., 330.|], xs: [|1., 10., 10., 200., 250., 292., 330.|],
ys: [|0.0, 0.3, 0.5, 0.2, 0.1|], 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>
<div> <ChartWithNumber data color={`hex("333")} /> </div>
<div> <div>
<ChartWithNumber <h2> {"Basic Mixed Distribution" |> ReasonReact.string} </h2>
data={data |> Shape.XYShape.integral} <GenericDistributionChart dist=mixedDist />
color={`hex("333")} </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>
</div>; </div>;
let entry = EntryTypes.(entry(~title="Pdf", ~render=alerts)); let entry = EntryTypes.(entry(~title="Pdf", ~render=distributions));

View File

@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <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 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> <style>
body { body {
margin: 0; margin: 0;

View File

@ -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>;
};

View File

@ -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 />
};
};

View File

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