Added experimental distribution-modification buttons

This commit is contained in:
Ozzie Gooen 2020-03-03 14:29:02 +00:00
parent 7398877e55
commit 5a11ebfb03

View File

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