Attempt at simple graphs
This commit is contained in:
parent
17071602e8
commit
9923021b48
|
@ -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));
|
|
@ -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;
|
||||||
|
|
|
@ -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>;
|
|
||||||
};
|
|
69
src/components/charts/GenericDistributionChart.re
Normal file
69
src/components/charts/GenericDistributionChart.re
Normal 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 />
|
||||||
|
};
|
||||||
|
};
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user