diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 7b322e00..e4d07b11 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -1,18 +1,23 @@ open BsReform; +open Antd.Grid; module FormConfig = [%lenses type state = { guesstimatorString: string, // domainType: string, // Complete, LeftLimited(...), RightLimited(...), LeftAndRightLimited(..., ...) - xPoint: string, - xPoint2: string, - excludingProbabilityMass: string, - excludingProbabilityMass2: string, + xPoint: float, + xPoint2: float, + excludingProbabilityMass: float, + excludingProbabilityMass2: float, // unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit) zero: MomentRe.Moment.t, unit: string, + // + sampleCount: int, + outputXYPoints: int, + truncateTo: int, } ]; @@ -38,24 +43,19 @@ module FieldString = { }; }; -module Styles = { - open Css; - let row = - style([display(`flex), selector("div > div", [flex(`num(1.))])]); - let form = style([backgroundColor(hex("eee")), padding(em(1.))]); - let spacer = style([marginTop(em(3.))]); -}; - -module FieldFloat = { +module FieldNumber = { [@react.component] let make = (~field, ~label) => { E.ste}> - { + e |> handleChange; + (); + }} onBlur={_ => validate()} /> @@ -64,8 +64,100 @@ module FieldFloat = { }; }; +module FieldFloat = { + [@react.component] + let make = (~field, ~label, ~className=Css.style([])) => { + + E.ste}> + { + e |> handleChange; + (); + }} + onBlur={_ => validate()} + className + /> + + } + />; + }; +}; + +module Styles = { + open Css; + let rows = + style([ + selector( + ">.ant-col:first-child", + [paddingLeft(em(0.25)), paddingRight(em(0.125))], + ), + selector( + ">.ant-col:last-child", + [paddingLeft(em(0.125)), paddingRight(em(0.25))], + ), + selector( + ">.ant-col:not(:first-child):not(:last-child)", + [paddingLeft(em(0.125)), paddingRight(em(0.125))], + ), + ]); + let parent = + style([ + selector(".ant-input-number", [width(`percent(100.))]), + selector(".anticon", [verticalAlign(`zero)]), + ]); + let form = style([backgroundColor(hex("eee")), padding(em(1.))]); + let dist = style([padding(em(1.))]); + let spacer = style([marginTop(em(1.))]); + let groupA = + style([ + selector( + ".ant-input-number-input", + [backgroundColor(hex("fff7db"))], + ), + ]); + let groupB = + style([ + selector( + ".ant-input-number-input", + [backgroundColor(hex("eaf4ff"))], + ), + ]); +}; + +module DemoDist = { + [@react.component] + let make = + ( + ~guesstimatorString, + ~domain, + ~unit, + ~sampleCount, + ~outputXYPoints, + ~truncateTo, + ) => { + E.ste}> +
+
+
+ {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) + |> DistPlusIngredients.toDistPlus( + ~sampleCount, + ~outputXYPoints, + ~truncateTo, + ) + |> E.O.React.fmapOrNull(distPlus => )} +
+
+ ; + }; +}; + [@react.component] let make = () => { + let (reloader, setRealoader) = React.useState(() => 1); let reform = Form.use( ~validationStrategy=OnDemand, @@ -73,14 +165,17 @@ let make = () => { ~onSubmit=({state}) => {None}, ~initialState={ guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])", - domainType: "Complete", - xPoint: "50.0", - xPoint2: "60.0", - excludingProbabilityMass2: "0.5", - excludingProbabilityMass: "0.3", + domainType: "LeftLimited", + xPoint: 50.0, + xPoint2: 60.0, + excludingProbabilityMass2: 0.5, + excludingProbabilityMass: 0.3, unitType: "UnspecifiedDistribution", zero: MomentRe.momentNow(), unit: "days", + sampleCount: 10000, + outputXYPoints: 2000, + truncateTo: 1000, }, (), ); @@ -95,27 +190,26 @@ let make = () => { | "Complete" => DistTypes.Complete | "LeftLimited" => LeftLimited({ - xPoint: reform.state.values.xPoint |> float_of_string, - excludingProbabilityMass: - reform.state.values.excludingProbabilityMass |> float_of_string, + xPoint: reform.state.values.xPoint, + excludingProbabilityMass: reform.state.values.excludingProbabilityMass, }) | "RightLimited" => RightLimited({ - xPoint: reform.state.values.xPoint |> float_of_string, + xPoint: reform.state.values.xPoint2, excludingProbabilityMass: - reform.state.values.excludingProbabilityMass |> float_of_string, + reform.state.values.excludingProbabilityMass2, }) | "LeftAndRightLimited" => LeftAndRightLimited( { - xPoint: reform.state.values.xPoint |> float_of_string, + xPoint: reform.state.values.xPoint, excludingProbabilityMass: - reform.state.values.excludingProbabilityMass |> float_of_string, + reform.state.values.excludingProbabilityMass, }, { - xPoint: reform.state.values.xPoint2 |> float_of_string, + xPoint: reform.state.values.xPoint2, excludingProbabilityMass: - reform.state.values.excludingProbabilityMass2 |> float_of_string, + reform.state.values.excludingProbabilityMass2, }, ) | _ => Js.Exn.raiseError("domain is unknown") @@ -133,30 +227,69 @@ let make = () => { }; let guesstimatorString = reform.state.values.guesstimatorString; + let sampleCount = reform.state.values.sampleCount; + let outputXYPoints = reform.state.values.outputXYPoints; + let truncateTo = reform.state.values.truncateTo |> E.O.some; -
+ let demoDist = + React.useMemo1( + () => { + + }, + [| + reform.state.values.guesstimatorString, + reform.state.values.domainType, + reform.state.values.xPoint |> string_of_float, + reform.state.values.xPoint2 |> string_of_float, + reform.state.values.xPoint2 |> string_of_float, + reform.state.values.excludingProbabilityMass |> string_of_float, + reform.state.values.excludingProbabilityMass2 |> string_of_float, + reform.state.values.unitType, + reform.state.values.zero |> E.M.format(E.M.format_standard), + reform.state.values.unit, + reform.state.values.sampleCount |> string_of_int, + reform.state.values.outputXYPoints |> string_of_int, + reform.state.values.truncateTo |> string_of_int, + reloader |> string_of_int, + |], + ); + + let onRealod = _ => { + setRealoader(_ => reloader + 1); + }; + +
-
-
- {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) - |> DistPlusIngredients.toDistPlus( - ~sampleCount=1000, - ~outputXYPoints=1000, - ~truncateTo=Some(100), - ) - |> E.O.React.fmapOrNull(distPlus => )} -
-
+ demoDist
-
+ E.ste} + extra={ + + }> - -
-
+ + + + + + + @@ -178,32 +311,58 @@ let make = () => { } /> -
-
- -
-
- -
-
- -
-
- -
-
-
-
+ + {<> + + + + + + + + |> E.showIf( + E.L.contains( + reform.state.values.domainType, + ["LeftLimited", "LeftAndRightLimited"], + ), + )} + {<> + + + + + + + + |> E.showIf( + E.L.contains( + reform.state.values.domainType, + ["RightLimited", "LeftAndRightLimited"], + ), + )} + + + - E.ste}> + E.ste}> e |> handleChange}> {"Unspecified Distribution" |> E.ste} @@ -215,12 +374,12 @@ let make = () => { } /> -
-
+ + - E.ste}> + E.ste}> { @@ -231,48 +390,67 @@ let make = () => { } /> -
-
+ + E.ste}> e |> handleChange}> - {"days" |> E.ste} + {"Days" |> E.ste} - {"hours" |> E.ste} + {"Hours" |> E.ste} - {"milliseconds" |> E.ste} + {"Milliseconds" |> E.ste} - {"minutes" |> E.ste} + {"Minutes" |> E.ste} - {"months" |> E.ste} + {"Months" |> E.ste} - {"quarters" |> E.ste} + {"Quarters" |> E.ste} - {"seconds" |> E.ste} + {"Seconds" |> E.ste} - {"weeks" |> E.ste} + {"Weeks" |> E.ste} - {"years" |> E.ste} + {"Years" |> E.ste} } /> -
-
+ + + + + + + + + + + + + + + {"Update Distribution" |> E.ste} +
-
+ +
; }; \ No newline at end of file diff --git a/src/utility/E.re b/src/utility/E.re index 9be83a65..2e0ba052 100644 --- a/src/utility/E.re +++ b/src/utility/E.re @@ -299,3 +299,4 @@ module JsArray = { }; let ste = React.string; +let showIf = (cond, comp) => cond ? comp : ReasonReact.null;