squiggle/src/components/charts/GenericDistributionChart.re
2020-02-21 11:45:32 +00:00

75 lines
2.1 KiB
ReasonML

module Shapee = {
[@react.component]
let make = (~shape: DistributionTypes.pointsType, ~timeScale, ~onHover) => {
let discrete = Shape.PointsType.scaledDiscreteComponent(shape);
let continuous = Shape.PointsType.scaledContinuousComponent(shape);
<div>
<CdfChart__Plain
minX={Shape.PointsType.minX(shape)}
maxX={Shape.PointsType.maxX(shape)}
?discrete
?continuous
color={`hex("333")}
onHover
timeScale
/>
{discrete |> E.O.React.fmapOrNull(Shape.Discrete.render)}
</div>;
};
};
module GenericDist = {
[@react.component]
let make = (~genericDistribution: DistributionTypes.genericDistribution) => {
let (x, setX) = React.useState(() => 0.);
let timeScale =
genericDistribution.unit |> DistributionTypes.DistributionUnit.toJson;
let chart =
React.useMemo1(
() => {
genericDistribution
|> DistributionTypes.shape
|> E.O.React.fmapOrNull(shape => {
<Shapee shape timeScale onHover={r => setX(_ => r)} />
})
},
[|genericDistribution|],
);
<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 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 ">
{genericDistribution->GenericDistribution.yIntegral(x)
|> E.O.fmap(E.Float.with2DigitsPrecision)
|> E.O.default("")
|> ReasonReact.string}
</th>
</tr>
</tbody>
</table>
<div />
</div>;
};
};
[@react.component]
let make = (~dist) => {
switch ((dist: DistributionTypes.genericDistribution)) {
| {generationSource: Shape(_)} =>
<div> <GenericDist genericDistribution=dist /> </div>
| _ => <div />
};
};