Merged with master
This commit is contained in:
Ozzie Gooen
commit
89d09195a2
|
|
@ -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) => {
|
||||
<Form.Field
|
||||
field
|
||||
render={({handleChange, error, value, validate}) =>
|
||||
<Antd.Form.Item label={label |> E.ste}>
|
||||
<Antd.Input
|
||||
<Antd.InputNumber
|
||||
value
|
||||
onChange={BsReform.Helpers.handleChange(handleChange)}
|
||||
onChange={e => {
|
||||
e |> handleChange;
|
||||
();
|
||||
}}
|
||||
onBlur={_ => validate()}
|
||||
/>
|
||||
</Antd.Form.Item>
|
||||
|
|
@ -64,8 +64,100 @@ module FieldFloat = {
|
|||
};
|
||||
};
|
||||
|
||||
module FieldFloat = {
|
||||
[@react.component]
|
||||
let make = (~field, ~label, ~className=Css.style([])) => {
|
||||
<Form.Field
|
||||
field
|
||||
render={({handleChange, error, value, validate}) =>
|
||||
<Antd.Form.Item label={label |> E.ste}>
|
||||
<Antd.InputFloat
|
||||
value
|
||||
onChange={e => {
|
||||
e |> handleChange;
|
||||
();
|
||||
}}
|
||||
onBlur={_ => validate()}
|
||||
className
|
||||
/>
|
||||
</Antd.Form.Item>
|
||||
}
|
||||
/>;
|
||||
};
|
||||
};
|
||||
|
||||
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,
|
||||
) => {
|
||||
<Antd.Card title={"Distribution" |> E.ste}>
|
||||
<div className=Styles.spacer />
|
||||
<div>
|
||||
<div>
|
||||
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
|
||||
|> DistPlusIngredients.toDistPlus(
|
||||
~sampleCount,
|
||||
~outputXYPoints,
|
||||
~truncateTo,
|
||||
)
|
||||
|> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
|
||||
</div>
|
||||
</div>
|
||||
</Antd.Card>;
|
||||
};
|
||||
};
|
||||
|
||||
[@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;
|
||||
|
||||
<div>
|
||||
let demoDist =
|
||||
React.useMemo1(
|
||||
() => {
|
||||
<DemoDist
|
||||
guesstimatorString
|
||||
domain
|
||||
unit
|
||||
sampleCount
|
||||
outputXYPoints
|
||||
truncateTo
|
||||
/>
|
||||
},
|
||||
[|
|
||||
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);
|
||||
};
|
||||
|
||||
<div className=Styles.parent>
|
||||
<div className=Styles.spacer />
|
||||
<div>
|
||||
<div>
|
||||
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
|
||||
|> DistPlusIngredients.toDistPlus(
|
||||
~sampleCount=1000,
|
||||
~outputXYPoints=1000,
|
||||
~truncateTo=Some(100),
|
||||
)
|
||||
|> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
|
||||
</div>
|
||||
</div>
|
||||
demoDist
|
||||
<div className=Styles.spacer />
|
||||
<div className=Styles.form>
|
||||
<Antd.Card
|
||||
title={"Distribution Form" |> E.ste}
|
||||
extra={
|
||||
<Antd.Button
|
||||
icon=Antd.IconName.reload
|
||||
shape=`circle
|
||||
onClick=onRealod
|
||||
/>
|
||||
}>
|
||||
<Form.Provider value=reform>
|
||||
<Antd.Form onSubmit>
|
||||
<Row _type=`flex className=Styles.rows>
|
||||
<Col span=12>
|
||||
<FieldString
|
||||
field=FormConfig.GuesstimatorString
|
||||
label="Guesstimator String"
|
||||
/>
|
||||
<div className=Styles.row>
|
||||
<div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row _type=`flex className=Styles.rows>
|
||||
<Col span=4>
|
||||
<Form.Field
|
||||
field=FormConfig.DomainType
|
||||
render={({handleChange, value}) =>
|
||||
|
|
@ -178,32 +311,58 @@ let make = () => {
|
|||
</Antd.Form.Item>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FieldString field=FormConfig.XPoint label="X-point" />
|
||||
</div>
|
||||
<div>
|
||||
<FieldString
|
||||
</Col>
|
||||
{<>
|
||||
<Col span=4>
|
||||
<FieldFloat
|
||||
field=FormConfig.XPoint
|
||||
label="Left X-point"
|
||||
className=Styles.groupA
|
||||
/>
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<FieldFloat
|
||||
field=FormConfig.ExcludingProbabilityMass
|
||||
label="Excluding Probability Mass"
|
||||
label="Left Excluding Probability Mass"
|
||||
className=Styles.groupA
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FieldString field=FormConfig.XPoint2 label="X-point (2)" />
|
||||
</div>
|
||||
<div>
|
||||
<FieldString
|
||||
</Col>
|
||||
</>
|
||||
|> E.showIf(
|
||||
E.L.contains(
|
||||
reform.state.values.domainType,
|
||||
["LeftLimited", "LeftAndRightLimited"],
|
||||
),
|
||||
)}
|
||||
{<>
|
||||
<Col span=4>
|
||||
<FieldFloat
|
||||
field=FormConfig.XPoint2
|
||||
label="Right X-point"
|
||||
className=Styles.groupB
|
||||
/>
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<FieldFloat
|
||||
field=FormConfig.ExcludingProbabilityMass2
|
||||
label="Excluding Probability Mass (2)"
|
||||
label="Right Excluding Probability Mass"
|
||||
className=Styles.groupB
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className=Styles.row>
|
||||
<div>
|
||||
</Col>
|
||||
</>
|
||||
|> E.showIf(
|
||||
E.L.contains(
|
||||
reform.state.values.domainType,
|
||||
["RightLimited", "LeftAndRightLimited"],
|
||||
),
|
||||
)}
|
||||
</Row>
|
||||
<Row _type=`flex className=Styles.rows>
|
||||
<Col span=4>
|
||||
<Form.Field
|
||||
field=FormConfig.UnitType
|
||||
render={({handleChange, value}) =>
|
||||
<Antd.Form.Item label={"Zero Type" |> E.ste}>
|
||||
<Antd.Form.Item label={"Unit Type" |> E.ste}>
|
||||
<Antd.Select value onChange={e => e |> handleChange}>
|
||||
<Antd.Select.Option value="UnspecifiedDistribution">
|
||||
{"Unspecified Distribution" |> E.ste}
|
||||
|
|
@ -215,12 +374,12 @@ let make = () => {
|
|||
</Antd.Form.Item>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<Form.Field
|
||||
field=FormConfig.Zero
|
||||
render={({handleChange, value}) =>
|
||||
<Antd.Form.Item label={"Zero" |> E.ste}>
|
||||
<Antd.Form.Item label={"Zero Point" |> E.ste}>
|
||||
<Antd_DatePicker
|
||||
value
|
||||
onChange={e => {
|
||||
|
|
@ -231,48 +390,67 @@ let make = () => {
|
|||
</Antd.Form.Item>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<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}
|
||||
{"Days" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="hours">
|
||||
{"hours" |> E.ste}
|
||||
{"Hours" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="milliseconds">
|
||||
{"milliseconds" |> E.ste}
|
||||
{"Milliseconds" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="minutes">
|
||||
{"minutes" |> E.ste}
|
||||
{"Minutes" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="months">
|
||||
{"months" |> E.ste}
|
||||
{"Months" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="quarters">
|
||||
{"quarters" |> E.ste}
|
||||
{"Quarters" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="seconds">
|
||||
{"seconds" |> E.ste}
|
||||
{"Seconds" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="weeks">
|
||||
{"weeks" |> E.ste}
|
||||
{"Weeks" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
<Antd.Select.Option value="years">
|
||||
{"years" |> E.ste}
|
||||
{"Years" |> E.ste}
|
||||
</Antd.Select.Option>
|
||||
</Antd.Select>
|
||||
</Antd.Form.Item>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row _type=`flex className=Styles.rows>
|
||||
<Col span=4>
|
||||
<FieldNumber field=FormConfig.SampleCount label="Sample Count" />
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<FieldNumber
|
||||
field=FormConfig.OutputXYPoints
|
||||
label="Output XY-points"
|
||||
/>
|
||||
</Col>
|
||||
<Col span=4>
|
||||
<FieldNumber field=FormConfig.TruncateTo label="Truncate To" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Antd.Button
|
||||
_type=`primary icon=Antd.IconName.reload onClick=onRealod>
|
||||
{"Update Distribution" |> E.ste}
|
||||
</Antd.Button>
|
||||
</Antd.Form>
|
||||
</Form.Provider>
|
||||
</div>
|
||||
</Antd.Card>
|
||||
<div className=Styles.spacer />
|
||||
</div>;
|
||||
};
|
||||
|
|
@ -299,3 +299,4 @@ module JsArray = {
|
|||
};
|
||||
|
||||
let ste = React.string;
|
||||
let showIf = (cond, comp) => cond ? comp : ReasonReact.null;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user