Added experimental distribution-modification buttons
This commit is contained in:
parent
7398877e55
commit
5a11ebfb03
|
@ -1,3 +1,14 @@
|
||||||
|
type state = {
|
||||||
|
log: bool,
|
||||||
|
showStats: bool,
|
||||||
|
height: int,
|
||||||
|
};
|
||||||
|
|
||||||
|
type action =
|
||||||
|
| CHANGE_LOG
|
||||||
|
| CHANGE_SHOW_STATS
|
||||||
|
| CHANGE_HEIGHT(int);
|
||||||
|
|
||||||
let table = (distPlus, x) => {
|
let table = (distPlus, x) => {
|
||||||
<div>
|
<div>
|
||||||
<table className="table-auto text-sm">
|
<table className="table-auto text-sm">
|
||||||
|
@ -127,7 +138,7 @@ let adjustBoth = discreteProbabilityMass => {
|
||||||
|
|
||||||
module DistPlusChart = {
|
module DistPlusChart = {
|
||||||
[@react.component]
|
[@react.component]
|
||||||
let make = (~distPlus: DistTypes.distPlus, ~onHover) => {
|
let make = (~distPlus: DistTypes.distPlus, ~state: state, ~onHover) => {
|
||||||
open Distributions.DistPlus;
|
open Distributions.DistPlus;
|
||||||
let discrete = distPlus |> T.toScaledDiscrete;
|
let discrete = distPlus |> T.toScaledDiscrete;
|
||||||
let continuous =
|
let continuous =
|
||||||
|
@ -148,11 +159,12 @@ module DistPlusChart = {
|
||||||
let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) =
|
let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) =
|
||||||
adjustBoth(toDiscreteProbabilityMass);
|
adjustBoth(toDiscreteProbabilityMass);
|
||||||
<DistributionPlot
|
<DistributionPlot
|
||||||
|
scale={state.log ? "log" : "linear"}
|
||||||
minX
|
minX
|
||||||
maxX
|
maxX
|
||||||
yMaxDiscreteDomainFactor
|
yMaxDiscreteDomainFactor
|
||||||
yMaxContinuousDomainFactor
|
yMaxContinuousDomainFactor
|
||||||
height=120
|
height={state.height}
|
||||||
?discrete
|
?discrete
|
||||||
?continuous
|
?continuous
|
||||||
color={`hex("5f6b7e")}
|
color={`hex("5f6b7e")}
|
||||||
|
@ -196,16 +208,42 @@ module IntegralChart = {
|
||||||
[@react.component]
|
[@react.component]
|
||||||
let make = (~distPlus: DistTypes.distPlus) => {
|
let make = (~distPlus: DistTypes.distPlus) => {
|
||||||
let (x, setX) = React.useState(() => 0.);
|
let (x, setX) = React.useState(() => 0.);
|
||||||
|
let (state, dispatch) =
|
||||||
|
React.useReducer(
|
||||||
|
(state: state, action: action) =>
|
||||||
|
switch (action) {
|
||||||
|
| CHANGE_LOG => {...state, log: !state.log}
|
||||||
|
| CHANGE_HEIGHT(height) => {...state, height}
|
||||||
|
| CHANGE_SHOW_STATS => {...state, showStats: !state.showStats}
|
||||||
|
},
|
||||||
|
{log: true, height: 120, showStats: false},
|
||||||
|
);
|
||||||
let chart =
|
let chart =
|
||||||
React.useMemo1(
|
React.useMemo2(
|
||||||
() => {<DistPlusChart distPlus onHover={r => {setX(_ => r)}} />},
|
() => {<DistPlusChart distPlus state onHover={r => {setX(_ => r)}} />},
|
||||||
[|distPlus|],
|
(distPlus, state),
|
||||||
);
|
);
|
||||||
let chart2 =
|
let chart2 =
|
||||||
React.useMemo1(
|
React.useMemo1(
|
||||||
() => {<IntegralChart distPlus onHover={r => {setX(_ => r)}} />},
|
() => {<IntegralChart distPlus onHover={r => {setX(_ => r)}} />},
|
||||||
[|distPlus|],
|
[|distPlus|],
|
||||||
);
|
);
|
||||||
<div> chart chart2 {table(distPlus, x)} </div>;
|
<div>
|
||||||
|
<div onClick={_ => dispatch(CHANGE_LOG)}>
|
||||||
|
{(state.log ? "true" : "False") |> ReasonReact.string}
|
||||||
|
</div>
|
||||||
|
<div onClick={_ => dispatch(CHANGE_SHOW_STATS)}>
|
||||||
|
{"Stats" |> ReasonReact.string}
|
||||||
|
</div>
|
||||||
|
<div onClick={_ => dispatch(CHANGE_HEIGHT(state.height + 40))}>
|
||||||
|
{"HightPlus" |> ReasonReact.string}
|
||||||
|
</div>
|
||||||
|
<div onClick={_ => dispatch(CHANGE_HEIGHT(state.height - 40))}>
|
||||||
|
{"HightMinus" |> ReasonReact.string}
|
||||||
|
</div>
|
||||||
|
chart
|
||||||
|
chart2
|
||||||
|
{state.showStats ? table(distPlus, x) : ReasonReact.null}
|
||||||
|
</div>;
|
||||||
// chart
|
// chart
|
||||||
};
|
};
|
Loading…
Reference in New Issue
Block a user