Merge pull request #7 from foretold-app/feature/1091

Feature/1091
This commit is contained in:
Ozzie Gooen 2020-02-26 13:06:17 +00:00 committed by GitHub
commit 6c6f1e151c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 306 additions and 7 deletions

View File

@ -1,11 +1,13 @@
type route = type route =
| Model(string) | Model(string)
| DistBuilder
| Home | Home
| NotFound; | NotFound;
let routeToPath = route => let routeToPath = route =>
switch (route) { switch (route) {
| Model(i) => "/m/" ++ i | Model(modelId) => "/m/" ++ modelId
| DistBuilder => "/dist-builder"
| Home => "/" | Home => "/"
| _ => "/" | _ => "/"
}; };
@ -66,11 +68,14 @@ module Menu = {
<Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item> <Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item>
{Models.all {Models.all
|> E.A.fmap((model: Prop.Model.t) => { |> E.A.fmap((model: Prop.Model.t) => {
<Item href={routeToPath(Model(model.id))} key="ea-funds"> <Item href={routeToPath(Model(model.id))} key={model.id}>
{model.name |> E.ste} {model.name |> E.ste}
</Item> </Item>
}) })
|> ReasonReact.array} |> ReasonReact.array}
<Item href={routeToPath(DistBuilder)} key="dist-builder">
{"Dist Builder" |> E.ste}
</Item>
</div>; </div>;
}; };
}; };
@ -82,6 +87,7 @@ let make = () => {
let routing = let routing =
switch (url.path) { switch (url.path) {
| ["m", modelId] => Model(modelId) | ["m", modelId] => Model(modelId)
| ["dist-builder"] => DistBuilder
| [] => Home | [] => Home
| _ => NotFound | _ => NotFound
}; };
@ -89,11 +95,12 @@ let make = () => {
<div className="w-full max-w-screen-xl mx-auto px-6"> <div className="w-full max-w-screen-xl mx-auto px-6">
<Menu /> <Menu />
{switch (routing) { {switch (routing) {
| Model(n) => | Model(id) =>
switch (Models.getById(n)) { switch (Models.getById(id)) {
| Some(model) => <FormBuilder.ModelForm model /> | Some(model) => <FormBuilder.ModelForm model key=id />
| None => <div> {"Page is not found" |> E.ste} </div> | None => <div> {"Page is not found" |> E.ste} </div>
} }
| DistBuilder => <DistBuilder />
| Home => <div> {"Welcome" |> E.ste} </div> | Home => <div> {"Welcome" |> E.ste} </div>
| _ => <div> {"Page is not found" |> E.ste} </div> | _ => <div> {"Page is not found" |> E.ste} </div>
}} }}

View File

@ -0,0 +1,278 @@
open BsReform;
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,
}
];
module Form = ReForm.Make(FormConfig);
let schema = Form.Validation.Schema([||]);
module FieldString = {
[@react.component]
let make = (~field, ~label) => {
<Form.Field
field
render={({handleChange, error, value, validate}) =>
<Antd.Form.Item label={label |> E.ste}>
<Antd.Input
value
onChange={BsReform.Helpers.handleChange(handleChange)}
onBlur={_ => validate()}
/>
</Antd.Form.Item>
}
/>;
};
};
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 = {
[@react.component]
let make = (~field, ~label) => {
<Form.Field
field
render={({handleChange, error, value, validate}) =>
<Antd.Form.Item label={label |> E.ste}>
<Antd.Input
value
onChange={BsReform.Helpers.handleChange(handleChange)}
onBlur={_ => validate()}
/>
</Antd.Form.Item>
}
/>;
};
};
[@react.component]
let make = () => {
let reform =
Form.use(
~validationStrategy=OnDemand,
~schema,
~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",
unitType: "UnspecifiedDistribution",
zero: MomentRe.momentNow(),
unit: "days",
},
(),
);
let onSubmit = e => {
e->ReactEvent.Synthetic.preventDefault;
reform.submit();
};
let domain =
switch (reform.state.values.domainType) {
| "Complete" => DistTypes.Complete
| "LeftLimited" =>
LeftLimited({
xPoint: reform.state.values.xPoint |> float_of_string,
excludingProbabilityMass:
reform.state.values.excludingProbabilityMass |> float_of_string,
})
| "RightLimited" =>
RightLimited({
xPoint: reform.state.values.xPoint |> float_of_string,
excludingProbabilityMass:
reform.state.values.excludingProbabilityMass |> float_of_string,
})
| "LeftAndRightLimited" =>
LeftAndRightLimited(
{
xPoint: reform.state.values.xPoint |> float_of_string,
excludingProbabilityMass:
reform.state.values.excludingProbabilityMass |> float_of_string,
},
{
xPoint: reform.state.values.xPoint2 |> float_of_string,
excludingProbabilityMass:
reform.state.values.excludingProbabilityMass2 |> float_of_string,
},
)
| _ => Js.Exn.raiseError("domain is unknown")
};
let unit =
switch (reform.state.values.unitType) {
| "UnspecifiedDistribution" => DistTypes.UnspecifiedDistribution
| "TimeDistribution" =>
TimeDistribution({
zero: reform.state.values.zero,
unit: reform.state.values.unit |> TimeTypes.TimeUnit.ofString,
})
| _ => Js.Exn.raiseError("unit is unknown")
};
let guesstimatorString = reform.state.values.guesstimatorString;
<div>
<div className=Styles.spacer />
<div>
<div>
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
|> DistPlusIngredients.toDistPlus(
~sampleCount=10000,
~outputXYPoints=2000,
~truncateTo=Some(1000),
)
|> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
</div>
</div>
<div className=Styles.spacer />
<div className=Styles.form>
<Form.Provider value=reform>
<Antd.Form onSubmit>
<FieldString
field=FormConfig.GuesstimatorString
label="Guesstimator String"
/>
<div className=Styles.row>
<div>
<Form.Field
field=FormConfig.DomainType
render={({handleChange, value}) =>
<Antd.Form.Item label={"Domain Type" |> E.ste}>
<Antd.Select value onChange={e => e |> handleChange}>
<Antd.Select.Option value="Complete">
{"Complete" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="LeftLimited">
{"Left Limited" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="RightLimited">
{"Right Limited" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="LeftAndRightLimited">
{"Left And Right Limited" |> E.ste}
</Antd.Select.Option>
</Antd.Select>
</Antd.Form.Item>
}
/>
</div>
<div>
<FieldString field=FormConfig.XPoint label="X-point" />
</div>
<div>
<FieldString
field=FormConfig.ExcludingProbabilityMass
label="Excluding Probability Mass"
/>
</div>
<div>
<FieldString field=FormConfig.XPoint2 label="X-point (2)" />
</div>
<div>
<FieldString
field=FormConfig.ExcludingProbabilityMass2
label="Excluding Probability Mass (2)"
/>
</div>
</div>
<div className=Styles.row>
<div>
<Form.Field
field=FormConfig.UnitType
render={({handleChange, value}) =>
<Antd.Form.Item label={"Zero Type" |> E.ste}>
<Antd.Select value onChange={e => e |> handleChange}>
<Antd.Select.Option value="UnspecifiedDistribution">
{"Unspecified Distribution" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="TimeDistribution">
{"Time Distribution" |> E.ste}
</Antd.Select.Option>
</Antd.Select>
</Antd.Form.Item>
}
/>
</div>
<div>
<Form.Field
field=FormConfig.Zero
render={({handleChange, value}) =>
<Antd.Form.Item label={"Zero" |> E.ste}>
<Antd_DatePicker
value
onChange={e => {
e |> handleChange;
_ => ();
}}
/>
</Antd.Form.Item>
}
/>
</div>
<div>
<Form.Field
field=FormConfig.Unit
render={({handleChange, value}) =>
<Antd.Form.Item label={"Unit" |> E.ste}>
<Antd.Select value onChange={e => e |> handleChange}>
<Antd.Select.Option value="days">
{"days" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="hours">
{"hours" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="milliseconds">
{"milliseconds" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="minutes">
{"minutes" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="months">
{"months" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="quarters">
{"quarters" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="seconds">
{"seconds" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="weeks">
{"weeks" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="years">
{"years" |> E.ste}
</Antd.Select.Option>
</Antd.Select>
</Antd.Form.Item>
}
/>
</div>
</div>
</Antd.Form>
</Form.Provider>
</div>
</div>;
};

View File

@ -33,6 +33,20 @@ module TimeUnit = {
| `weeks => "weeks" | `weeks => "weeks"
| `years => "years" | `years => "years"
}; };
let ofString = (timeUnit: string) =>
switch (timeUnit) {
| "days" => `days
| "hours" => `hours
| "milliseconds" => `milliseconds
| "minutes" => `minutes
| "months" => `months
| "quarters" => `quarters
| "seconds" => `seconds
| "weeks" => `weeks
| "years" => `years
| _ => Js.Exn.raiseError("TimeUnit is unknown")
};
}; };
module TimePoint = { module TimePoint = {