Adds spacer

This commit is contained in:
Roman Galochkin 2020-02-26 15:55:19 +03:00
parent b37d052b4f
commit 746d74da96
2 changed files with 192 additions and 122 deletions

View File

@ -40,6 +40,8 @@ module Styles = {
open Css; open Css;
let row = let row =
style([display(`flex), selector("div > div", [flex(`num(1.))])]); 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 FieldFloat = {
@ -70,8 +72,8 @@ let make = () => {
~initialState={ ~initialState={
guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])", guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])",
domainType: "Complete", domainType: "Complete",
xPoint: "0.0", xPoint: "50.0",
excludingProbabilityMass: "", excludingProbabilityMass: "0.3",
unitType: "UnspecifiedDistribution", unitType: "UnspecifiedDistribution",
zero: MomentRe.momentNow(), zero: MomentRe.momentNow(),
unit: "days", unit: "days",
@ -84,125 +86,179 @@ let make = () => {
reform.submit(); reform.submit();
}; };
<Form.Provider value=reform> let domain =
<Antd.Form onSubmit> switch (reform.state.values.domainType) {
<FieldString | "Complete" => DistTypes.Complete
field=FormConfig.GuesstimatorString | "LeftLimited" =>
label="GuesstimatorString" LeftLimited({
/> xPoint: reform.state.values.xPoint |> float_of_string,
<div className=Styles.row> excludingProbabilityMass:
<div> reform.state.values.excludingProbabilityMass |> float_of_string,
<Form.Field })
field=FormConfig.DomainType | "RightLimited" =>
render={({handleChange, value}) => RightLimited({
<Antd.Form.Item label={"Domain Type" |> E.ste}> xPoint: reform.state.values.xPoint |> float_of_string,
<Antd.Select value onChange={e => e |> handleChange}> excludingProbabilityMass:
<Antd.Select.Option value="Complete"> reform.state.values.excludingProbabilityMass |> float_of_string,
{"Complete" |> E.ste} })
</Antd.Select.Option> | "LeftAndRightLimited" =>
<Antd.Select.Option value="LeftLimited"> LeftAndRightLimited(
{"LeftLimited" |> E.ste} {
</Antd.Select.Option> xPoint: reform.state.values.xPoint |> float_of_string,
<Antd.Select.Option value="RightLimited"> excludingProbabilityMass:
{"RightLimited" |> E.ste} reform.state.values.excludingProbabilityMass |> float_of_string,
</Antd.Select.Option> },
<Antd.Select.Option value="LeftAndRightLimited"> {
{"LeftAndRightLimited" |> E.ste} xPoint: reform.state.values.xPoint |> float_of_string,
</Antd.Select.Option> excludingProbabilityMass:
</Antd.Select> reform.state.values.excludingProbabilityMass |> float_of_string,
</Antd.Form.Item> },
} )
/> | _ => Js.Exn.raiseError("domain is unknown")
</div> };
<div> <FieldString field=FormConfig.XPoint label="xPoint" /> </div>
<div>
<FieldString
field=FormConfig.ExcludingProbabilityMass
label="excludingProbabilityMass"
/>
</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">
{"UnspecifiedDistribution" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="TimeDistribution">
{"TimeDistribution" |> 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;
_ => (); let unit =
}} switch (reform.state.values.unitType) {
/> | "UnspecifiedDistribution" => DistTypes.UnspecifiedDistribution
</Antd.Form.Item> | "TimeDistribution" =>
} TimeDistribution({
/> zero: reform.state.values.zero,
</div> unit: reform.state.values.unit |> TimeTypes.TimeUnit.ofString,
<div> })
<Form.Field | _ => Js.Exn.raiseError("unit is unknown")
field=FormConfig.Unit };
render={({handleChange, value}) =>
<Antd.Form.Item label={"Unit" |> E.ste}> let guesstimatorString = reform.state.values.guesstimatorString;
<Antd.Select value onChange={e => e |> handleChange}>
<Antd.Select.Option value="days"> <div>
{"days" |> E.ste} <div className=Styles.spacer />
</Antd.Select.Option> <div>
<Antd.Select.Option value="hours"> <div>
{"hours" |> E.ste} {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
</Antd.Select.Option> |> DistPlusIngredients.toDistPlus(
<Antd.Select.Option value="milliseconds"> ~sampleCount=10000,
{"milliseconds" |> E.ste} ~outputXYPoints=2000,
</Antd.Select.Option> ~truncateTo=Some(1000),
<Antd.Select.Option value="minutes"> )
{"minutes" |> E.ste} |> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
</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> </div>
<Antd.Form.Item> </div>
{reform.state.formState == Submitting <div className=Styles.spacer />
? "Loading" |> E.ste <div className=Styles.form>
: <Antd.Button _type=`primary onClick=onSubmit> <Form.Provider value=reform>
{"Submit" |> E.ste} <Antd.Form onSubmit>
</Antd.Button>} <FieldString
</Antd.Form.Item> field=FormConfig.GuesstimatorString
</Antd.Form> label="Guesstimator String"
</Form.Provider>; />
<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">
{"LeftLimited" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="RightLimited">
{"RightLimited" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="LeftAndRightLimited">
{"LeftAndRightLimited" |> E.ste}
</Antd.Select.Option>
</Antd.Select>
</Antd.Form.Item>
}
/>
</div>
<div> <FieldString field=FormConfig.XPoint label="xPoint" /> </div>
<div>
<FieldString
field=FormConfig.ExcludingProbabilityMass
label="excludingProbabilityMass"
/>
</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">
{"UnspecifiedDistribution" |> E.ste}
</Antd.Select.Option>
<Antd.Select.Option value="TimeDistribution">
{"TimeDistribution" |> 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 = {