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, // unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit) zero: MomentRe.Moment.t, unit: string, // sampleCount: string, outputXYPoints: string, truncateTo: string, } ]; type options = { sampleCount: int, outputXYPoints: int, truncateTo: option(int), }; module Form = ReForm.Make(FormConfig); let schema = Form.Validation.Schema([||]); module FieldString = { [@react.component] let make = (~field, ~label) => { E.ste}> validate()} /> } />; }; }; module FieldFloat = { [@react.component] let make = (~field, ~label, ~className=Css.style([])) => { E.ste}> 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, ~options) => { E.ste}>
{switch (domain, unit, options) { | (Some(domain), Some(unit), Some(options)) => let distPlus = DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) |> DistPlusIngredients.toDistPlus( ~sampleCount=options.sampleCount, ~outputXYPoints=options.outputXYPoints, ~truncateTo=options.truncateTo, ); switch (distPlus) { | Some(distPlus) => | _ => "Correct Guesstimator string input to show a distribution." |> E.ste }; | _ => "Nothing to show. Try to change the distribution description." |> E.ste }}
; }; }; [@react.component] let make = () => { let (reloader, setRealoader) = React.useState(() => 1); let reform = Form.use( ~validationStrategy=OnDemand, ~schema, ~onSubmit=({state}) => {None}, ~initialState={ guesstimatorString: "50 to 50000", domainType: "Complete", xPoint: "50.0", xPoint2: "60.0", excludingProbabilityMass2: "0.5", excludingProbabilityMass: "0.3", unitType: "UnspecifiedDistribution", zero: MomentRe.momentNow(), unit: "days", sampleCount: "10000", outputXYPoints: "5000", truncateTo: "1000", }, (), ); let onSubmit = e => { e->ReactEvent.Synthetic.preventDefault; reform.submit(); }; let xPoint = reform.state.values.xPoint |> Js.Float.fromString; let xPoint2 = reform.state.values.xPoint2 |> Js.Float.fromString; let excludingProbabilityMass = reform.state.values.excludingProbabilityMass |> Js.Float.fromString; let excludingProbabilityMass2 = reform.state.values.excludingProbabilityMass2 |> Js.Float.fromString; let zero = reform.state.values.zero; let unit = reform.state.values.unit; let domainType = reform.state.values.domainType; let unitType = reform.state.values.unitType; let guesstimatorString = reform.state.values.guesstimatorString; let sampleCount = reform.state.values.sampleCount |> Js.Float.fromString; let outputXYPoints = reform.state.values.outputXYPoints |> Js.Float.fromString; let truncateTo = reform.state.values.truncateTo |> Js.Float.fromString; let domain = switch (domainType) { | "Complete" => Some(DistTypes.Complete) | "LeftLimited" when !Js.Float.isNaN(xPoint) && !Js.Float.isNaN(excludingProbabilityMass) => Some(LeftLimited({xPoint, excludingProbabilityMass})) | "RightLimited" when !Js.Float.isNaN(xPoint2) && !Js.Float.isNaN(excludingProbabilityMass2) => Some(RightLimited({xPoint, excludingProbabilityMass})) | "LeftAndRightLimited" when !Js.Float.isNaN(xPoint) && !Js.Float.isNaN(excludingProbabilityMass) && !Js.Float.isNaN(xPoint2) && !Js.Float.isNaN(excludingProbabilityMass2) => Some( LeftAndRightLimited( {xPoint, excludingProbabilityMass}, {xPoint, excludingProbabilityMass}, ), ) | _ => None }; let unit = switch (unitType) { | "UnspecifiedDistribution" => Some(DistTypes.UnspecifiedDistribution) | "TimeDistribution" => Some( TimeDistribution({zero, unit: unit |> TimeTypes.TimeUnit.ofString}), ) | _ => None }; let options = switch (sampleCount, outputXYPoints, truncateTo) { | (_, _, _) when !Js.Float.isNaN(sampleCount) && !Js.Float.isNaN(outputXYPoints) && !Js.Float.isNaN(truncateTo) && sampleCount > 10. && outputXYPoints > 10. && truncateTo > 10. => Some({ sampleCount: sampleCount |> int_of_float, outputXYPoints: outputXYPoints |> int_of_float, truncateTo: truncateTo |> int_of_float |> E.O.some, }) | _ => None }; let demoDist = React.useMemo1( () => , [| reform.state.values.guesstimatorString, reform.state.values.domainType, reform.state.values.xPoint, reform.state.values.xPoint2, reform.state.values.xPoint2, reform.state.values.excludingProbabilityMass, reform.state.values.excludingProbabilityMass2, reform.state.values.unitType, reform.state.values.zero |> E.M.format(E.M.format_standard), reform.state.values.unit, reform.state.values.sampleCount, reform.state.values.outputXYPoints, reform.state.values.truncateTo, reloader |> string_of_int, |], ); let onRealod = _ => { setRealoader(_ => reloader + 1); };
demoDist
E.ste} extra={ }> E.ste}> e |> handleChange}> {"Complete" |> E.ste} {"Left Limited" |> E.ste} {"Right Limited" |> E.ste} {"Left And Right Limited" |> E.ste} } /> {<> |> 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 |> handleChange}> {"Unspecified Distribution" |> E.ste} {"Time Distribution" |> E.ste} } /> {<> E.ste}> { e |> handleChange; _ => (); }} /> } /> E.ste}> e |> handleChange}> {"Days" |> E.ste} {"Hours" |> E.ste} {"Milliseconds" |> E.ste} {"Minutes" |> E.ste} {"Months" |> E.ste} {"Quarters" |> E.ste} {"Seconds" |> E.ste} {"Weeks" |> E.ste} {"Years" |> E.ste} } /> |> E.showIf( E.L.contains( reform.state.values.unitType, ["TimeDistribution"], ), )} {"Update Distribution" |> E.ste}
; };