Removed react dependencies
This commit is contained in:
Ozzie Gooen
parent
aa67cb955b
commit
1d268d474c
|
|
@ -1,18 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "probExample",
|
"name": "probExample",
|
||||||
"reason": {
|
"reason": {
|
||||||
"react-jsx": 3
|
|
||||||
},
|
},
|
||||||
"sources": [
|
"sources": [
|
||||||
{
|
{
|
||||||
"dir": "src",
|
"dir": "src",
|
||||||
"subdirs": true
|
"subdirs": true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"dir": "showcase",
|
|
||||||
"type": "dev",
|
|
||||||
"subdirs": true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"dir": "__tests__",
|
"dir": "__tests__",
|
||||||
"type": "dev",
|
"type": "dev",
|
||||||
|
|
@ -35,19 +29,13 @@
|
||||||
"bs-dependencies": [
|
"bs-dependencies": [
|
||||||
"@glennsl/bs-jest",
|
"@glennsl/bs-jest",
|
||||||
"@glennsl/bs-json",
|
"@glennsl/bs-json",
|
||||||
"@rescriptbr/reform",
|
|
||||||
"@rescript/react",
|
|
||||||
"bs-css",
|
|
||||||
"bs-css-dom",
|
|
||||||
"rationale",
|
"rationale",
|
||||||
"bs-moment",
|
"bs-moment"
|
||||||
"reschema"
|
|
||||||
],
|
],
|
||||||
"refmt": 3,
|
"refmt": 3,
|
||||||
"warnings": {
|
"warnings": {
|
||||||
"number": "+A-42-48-9-30-4-102"
|
"number": "+A-42-48-9-30-4-102"
|
||||||
},
|
},
|
||||||
"ppx-flags": [
|
"ppx-flags": [
|
||||||
"lenses-ppx/ppx"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
# Squiggle
|
|
||||||
|
|
||||||
Squiggle is a DSL for making probabilistic estimations. It is meant
|
|
||||||
to be a programming analogue of the [Guesstimate](https://www.getguesstimate.com/)
|
|
||||||
application.
|
|
||||||
|
|
||||||
There are several use cases for a language that represent uncertainty. Some include
|
|
||||||
writing cost effectiveness analysis, as well as doing accurate forecasting.
|
|
||||||
|
|
||||||
Squiggle is written in [Rescript](https://rescript-lang.org/) and is presented
|
|
||||||
as a website.
|
|
||||||
|
|
||||||
If you wish to try squiggle out, you can visit our [main page](https://squiggle-language.com/).
|
|
||||||
|
|
||||||
## Syntax
|
|
||||||
We use the [Math.js expression language](https://mathjs.org/index.html) for Squiggle.
|
|
||||||
So any expression that's available on Math.js is supported on Squiggle.
|
|
||||||
|
|
||||||
To represent uncertainty, we use a custom DSL called [DistML](https://docs.google.com/document/d/1xlEC8KjchP4PL-KdSxfBJr0UZ9nVMSAlz-rjAQEinyA/edit#).
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
To contribute to this project, we recommend visiting our [Contributing Guide](contributing.md).
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Squiggle Documentation</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
||||||
<meta name="description" content="Description">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script>
|
|
||||||
window.$docsify = {
|
|
||||||
name: 'Squiggle',
|
|
||||||
repo: 'foretold-app/squiggle',
|
|
||||||
loadSidebar: true
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<!-- Docsify v4 -->
|
|
||||||
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
|
|
||||||
<!-- CDN files for docsify-katex -->
|
|
||||||
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
|
|
||||||
<!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->
|
|
||||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
{
|
|
||||||
"devDependencies": {
|
|
||||||
"docsify-cli": "^4.4.3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1323
docs/yarn.lock
1323
docs/yarn.lock
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +0,0 @@
|
||||||
[[redirects]]
|
|
||||||
from = "/*"
|
|
||||||
to = "/index.html"
|
|
||||||
status = 200
|
|
||||||
25
package.json
25
package.json
|
|
@ -27,44 +27,21 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@glennsl/bs-json": "^5.0.2",
|
"@glennsl/bs-json": "^5.0.2",
|
||||||
"@rescript/react": "^0.10.3",
|
|
||||||
"@rescriptbr/reform": "^11.0.1",
|
"@rescriptbr/reform": "^11.0.1",
|
||||||
"ace-builds": "^1.4.12",
|
"ace-builds": "^1.4.12",
|
||||||
"antd": "^4.18.5",
|
|
||||||
"autoprefixer": "9.8.8",
|
"autoprefixer": "9.8.8",
|
||||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
||||||
"binary-search-tree": "0.2.6",
|
"binary-search-tree": "0.2.6",
|
||||||
"bs-ant-design-alt": "2.0.0-alpha.33",
|
|
||||||
"bs-css": "^15.1.0",
|
|
||||||
"bs-css-dom": "^3.1.0",
|
|
||||||
"bs-moment": "0.6.0",
|
"bs-moment": "0.6.0",
|
||||||
"bs-reform": "^10.0.3",
|
|
||||||
"bsb-js": "1.1.7",
|
|
||||||
"d3": "7.3.0",
|
|
||||||
"gh-pages": "2.2.0",
|
|
||||||
"jest": "^25.5.1",
|
"jest": "^25.5.1",
|
||||||
"jstat": "1.9.2",
|
"jstat": "1.9.2",
|
||||||
"lenses-ppx": "5.1.0",
|
|
||||||
"less": "3.10.3",
|
|
||||||
"lodash": "4.17.15",
|
"lodash": "4.17.15",
|
||||||
"mathjs": "5.10.3",
|
"mathjs": "5.10.3",
|
||||||
"moduleserve": "0.9.1",
|
"moduleserve": "0.9.1",
|
||||||
"moment": "2.24.0",
|
"moment": "2.24.0",
|
||||||
"pdfast": "^0.2.0",
|
"pdfast": "^0.2.0",
|
||||||
"postcss-cli": "7.1.0",
|
|
||||||
"rationale": "0.2.0",
|
"rationale": "0.2.0",
|
||||||
"react": "^16.10.0",
|
"rescript": "^9.1.4"
|
||||||
"react-ace": "^9.2.0",
|
|
||||||
"react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0",
|
|
||||||
"react-use": "^17.3.2",
|
|
||||||
"react-vega": "^7.4.4",
|
|
||||||
"reason-react": ">=0.7.0",
|
|
||||||
"reschema": "^2.2.0",
|
|
||||||
"rescript": "^9.1.4",
|
|
||||||
"tailwindcss": "1.2.0",
|
|
||||||
"vega": "*",
|
|
||||||
"vega-embed": "6.6.0",
|
|
||||||
"vega-lite": "*"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@glennsl/bs-jest": "^0.5.1",
|
"@glennsl/bs-jest": "^0.5.1",
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
let entries = [];
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
type compEntry = {
|
|
||||||
mutable id: string,
|
|
||||||
title: string,
|
|
||||||
render: unit => React.element,
|
|
||||||
container: containerType,
|
|
||||||
}
|
|
||||||
and folderEntry = {
|
|
||||||
mutable id: string,
|
|
||||||
title: string,
|
|
||||||
children: list(navEntry),
|
|
||||||
}
|
|
||||||
and navEntry =
|
|
||||||
| CompEntry(compEntry)
|
|
||||||
| FolderEntry(folderEntry)
|
|
||||||
and containerType =
|
|
||||||
| FullWidth
|
|
||||||
| Sidebar;
|
|
||||||
|
|
||||||
let entry = (~title, ~render): navEntry => {
|
|
||||||
CompEntry({id: "", title, render, container: FullWidth});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Maybe different api, this avoids breaking changes
|
|
||||||
let sidebar = (~title, ~render): navEntry => {
|
|
||||||
CompEntry({id: "", title, render, container: Sidebar});
|
|
||||||
};
|
|
||||||
|
|
||||||
let folder = (~title, ~children): navEntry => {
|
|
||||||
FolderEntry({id: "", title, children});
|
|
||||||
};
|
|
||||||
163
showcase/Lib.res
163
showcase/Lib.res
|
|
@ -1,163 +0,0 @@
|
||||||
open EntryTypes
|
|
||||||
|
|
||||||
module HS = Belt.HashMap.String
|
|
||||||
|
|
||||||
let entriesByPath: HS.t<navEntry> = HS.make(~hintSize=100)
|
|
||||||
|
|
||||||
/* Creates unique id's per scope based on title */
|
|
||||||
let buildIds = entries => {
|
|
||||||
let genId = (title, path) => {
|
|
||||||
let noSpaces = Js.String.replaceByRe(%re("/\\s+/g"), "-", title)
|
|
||||||
if !HS.has(entriesByPath, path ++ ("/" ++ noSpaces)) {
|
|
||||||
noSpaces
|
|
||||||
} else {
|
|
||||||
let rec loop = num => {
|
|
||||||
let testId = noSpaces ++ ("-" ++ string_of_int(num))
|
|
||||||
if !HS.has(entriesByPath, path ++ ("/" ++ testId)) {
|
|
||||||
testId
|
|
||||||
} else {
|
|
||||||
loop(num + 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loop(2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let rec processFolder = (f: folderEntry, curPath) => {
|
|
||||||
f.id = curPath ++ ("/" ++ genId(f.title, curPath))
|
|
||||||
HS.set(entriesByPath, f.id, FolderEntry(f))
|
|
||||||
f.children |> E.L.iter(x =>
|
|
||||||
switch x {
|
|
||||||
| CompEntry(c) => processEntry(c, f.id)
|
|
||||||
| FolderEntry(f) => processFolder(f, f.id)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
and processEntry = (c: compEntry, curPath) => {
|
|
||||||
c.id = curPath ++ ("/" ++ genId(c.title, curPath))
|
|
||||||
HS.set(entriesByPath, c.id, CompEntry(c))
|
|
||||||
}
|
|
||||||
entries |> E.L.iter(x =>
|
|
||||||
switch x {
|
|
||||||
| CompEntry(c) => processEntry(c, "")
|
|
||||||
| FolderEntry(f) => processFolder(f, "")
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
let entries = Entries.entries
|
|
||||||
buildIds(entries)
|
|
||||||
|
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let pageContainer = style(. [ display(#flex), height(#vh(100.)) ])
|
|
||||||
let leftNav = style(. [ padding(#em(2.)),
|
|
||||||
flexBasis(#px(200)),
|
|
||||||
flexShrink(0.),
|
|
||||||
backgroundColor(#hex("eaeff3")),
|
|
||||||
boxShadows([ Shadow.box(~x=px(-1), ~blur=px(1), ~inset=true, rgba(0, 0, 0, #percent(0.1))) ]),
|
|
||||||
])
|
|
||||||
|
|
||||||
let folderNav = style(. [ selector(.
|
|
||||||
">h4",
|
|
||||||
[ cursor(#pointer), margin2(~v=#em(0.3), ~h=#zero), hover([ color(#hex("7089ad")) ]) ],
|
|
||||||
),
|
|
||||||
])
|
|
||||||
let folderChildren = style(. [ paddingLeft(#px(7)) ])
|
|
||||||
let compNav = style(. [ cursor(#pointer),
|
|
||||||
paddingBottom(#px(3)),
|
|
||||||
hover([ color(#hex("7089ad")) ]),
|
|
||||||
])
|
|
||||||
let compContainer = style(. [ padding(#em(2.)), flexGrow(1.) ])
|
|
||||||
// Approximate sidebar container for entry
|
|
||||||
let sidebarContainer = style(. [ maxWidth(#px(430)) ])
|
|
||||||
let folderChildContainer = style(. [ marginBottom(#em(2.)) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
let baseUrl = "/showcase/index.html"
|
|
||||||
|
|
||||||
module Index = {
|
|
||||||
type state = {route: RescriptReactRouter.url}
|
|
||||||
|
|
||||||
type action =
|
|
||||||
| ItemClick(string)
|
|
||||||
| ChangeRoute(RescriptReactRouter.url)
|
|
||||||
|
|
||||||
let changeId = (id: string) => {
|
|
||||||
let _ = RescriptReactRouter.push(baseUrl ++ ("#" ++ id))
|
|
||||||
}
|
|
||||||
|
|
||||||
let buildNav = _ => {
|
|
||||||
let rec buildFolder = (f: folderEntry) =>
|
|
||||||
<div key=f.id style=Styles.folderNav>
|
|
||||||
<h4 onClick={_e => changeId(f.id)}> {f.title->React.string} </h4>
|
|
||||||
<div style=Styles.folderChildren>
|
|
||||||
{(f.children
|
|
||||||
|> E.L.fmap(e =>
|
|
||||||
switch e {
|
|
||||||
| FolderEntry(folder) => buildFolder(folder)
|
|
||||||
| CompEntry(entry) => buildEntry(entry)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|> E.L.toArray)->React.array}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
and buildEntry = (e: compEntry) =>
|
|
||||||
<div key=e.id style=Styles.compNav onClick={_e => changeId(e.id)}>
|
|
||||||
{e.title->React.string}
|
|
||||||
</div>
|
|
||||||
(entries
|
|
||||||
|> E.L.fmap(e =>
|
|
||||||
switch e {
|
|
||||||
| FolderEntry(folder) => buildFolder(folder)
|
|
||||||
| CompEntry(entry) => buildEntry(entry)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|> E.L.toArray)->React.array
|
|
||||||
}
|
|
||||||
|
|
||||||
let renderEntry = e =>
|
|
||||||
switch e.container {
|
|
||||||
| FullWidth => e.render()
|
|
||||||
| Sidebar => <div style=Styles.sidebarContainer> {e.render()} </div>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => {
|
|
||||||
let (route, setRoute) = React.useState(() => {
|
|
||||||
let url: RescriptReactRouter.url = {path: list{}, hash: "", search: ""}
|
|
||||||
url
|
|
||||||
})
|
|
||||||
|
|
||||||
React.useState(() => {
|
|
||||||
let _ = RescriptReactRouter.watchUrl(url => setRoute(_ => url))
|
|
||||||
}) |> ignore
|
|
||||||
|
|
||||||
<div style=Styles.pageContainer>
|
|
||||||
<div style=Styles.leftNav> {buildNav(setRoute)} </div>
|
|
||||||
<div style=Styles.compContainer>
|
|
||||||
{if route.hash == "" {
|
|
||||||
React.null
|
|
||||||
} else {
|
|
||||||
switch HS.get(entriesByPath, route.hash) {
|
|
||||||
| Some(navEntry) =>
|
|
||||||
switch navEntry {
|
|
||||||
| CompEntry(c) => renderEntry(c)
|
|
||||||
| FolderEntry(f) =>
|
|
||||||
/* Rendering immediate children */
|
|
||||||
(f.children
|
|
||||||
|> E.L.fmap(child =>
|
|
||||||
switch child {
|
|
||||||
| CompEntry(c) =>
|
|
||||||
<div style=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
|
|
||||||
| _ => React.null
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|> E.L.toArray)->React.array
|
|
||||||
}
|
|
||||||
| None => <div> {"Component not found"->React.string} </div>
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
switch(ReactDOM.querySelector("main")){
|
|
||||||
| Some(root) => ReactDOM.render(<div> <Lib.Index /> </div>, root)
|
|
||||||
| None => () // do nothing
|
|
||||||
}
|
|
||||||
RescriptReactRouter.push("")
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
|
||||||
<link href="../src/styles/index.css" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<title>Showcase</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="main"></div>
|
|
||||||
<script src=" ./ShowcaseIndex.bs.js "></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
module Input = Antd_Input
|
|
||||||
module Grid = Antd_Grid
|
|
||||||
module Form = Antd_Form
|
|
||||||
module Card = Antd_Card
|
|
||||||
module Button = Antd_Button
|
|
||||||
module IconName = Antd_IconName
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
|
|
||||||
@deriving(abstract)
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@obj external makeProps:
|
|
||||||
(
|
|
||||||
~disabled: bool=?,
|
|
||||||
~ghost: bool=?,
|
|
||||||
~href: string=?,
|
|
||||||
~htmlType: @string [#button | #submit | #submit]=?,
|
|
||||||
~icon: 'a=?,
|
|
||||||
~shape: @string [#circle | #round]=?,
|
|
||||||
~size: @string [#small | #large]=?,
|
|
||||||
~target: string=?,
|
|
||||||
~loading: bool=?,
|
|
||||||
~_type: @string
|
|
||||||
[
|
|
||||||
| #primary
|
|
||||||
| #default
|
|
||||||
| #dashed
|
|
||||||
| #danger
|
|
||||||
| #link
|
|
||||||
| #ghost
|
|
||||||
]=?,
|
|
||||||
~onClick: ReactEvent.Mouse.t => unit=?,
|
|
||||||
~block: bool=?,
|
|
||||||
~children: React.element=?,
|
|
||||||
~className: string=?,
|
|
||||||
~id: string=?,
|
|
||||||
~testId: string=?,
|
|
||||||
unit
|
|
||||||
) =>
|
|
||||||
props =
|
|
||||||
""
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Button"
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
|
|
||||||
@deriving(abstract)
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@obj external makeProps: (
|
|
||||||
~actions: array<React.element>=?,
|
|
||||||
~activeTabKey: string=?,
|
|
||||||
~headStyle: ReactDOMStyle.t=?,
|
|
||||||
~bodyStyle: ReactDOMStyle.t=?,
|
|
||||||
~style: ReactDOMStyle.t=?,
|
|
||||||
~bordered: bool=?,
|
|
||||||
~cover: React.element=?,
|
|
||||||
~defaultActiveTabKey: string=?,
|
|
||||||
~extra: React.element=?,
|
|
||||||
~hoverable: bool=?,
|
|
||||||
~loading: bool=?,
|
|
||||||
~tabList: array<{
|
|
||||||
"key": string,
|
|
||||||
"tab": React.element,
|
|
||||||
}>
|
|
||||||
=?,
|
|
||||||
~size: @string [ #default | #small]=?,
|
|
||||||
~title: 'a=?,
|
|
||||||
~_type: string=?,
|
|
||||||
~onTabChange: string => unit=?,
|
|
||||||
~children: React.element=?,
|
|
||||||
unit // This unit is a quirk of the type system. Apparently it must exist to have optional arguments in a type
|
|
||||||
) => props = ""
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Card"
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
|
|
||||||
@deriving(abstract)
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@obj
|
|
||||||
external makeProps:
|
|
||||||
(
|
|
||||||
~onSubmit: ReactEvent.Form.t => unit=?,
|
|
||||||
~hideRequiredMark: bool=?,
|
|
||||||
~id: string=?,
|
|
||||||
~className: string=?,
|
|
||||||
~style: ReactDOMStyle.t=?,
|
|
||||||
~colon: bool=?,
|
|
||||||
~validateStatus: string=?,
|
|
||||||
~extra: string=?,
|
|
||||||
~required: bool=?,
|
|
||||||
~label: string=?,
|
|
||||||
~help: string=?,
|
|
||||||
~hasFeedback: bool=?,
|
|
||||||
~children:React.element=?,
|
|
||||||
unit
|
|
||||||
) =>
|
|
||||||
props =
|
|
||||||
""
|
|
||||||
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Form"
|
|
||||||
|
|
||||||
module Item = {
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
@obj
|
|
||||||
external makeProps:
|
|
||||||
(
|
|
||||||
~colon:string=?,
|
|
||||||
~validateStatus:string=?,
|
|
||||||
~extra:string=?,
|
|
||||||
~className:string=?,
|
|
||||||
~required:bool=?,
|
|
||||||
~style:ReactDOMStyle.t=?,
|
|
||||||
~label:string=?,
|
|
||||||
~id:string=?,
|
|
||||||
~help:string=?,
|
|
||||||
~hasFeedback:bool=?,
|
|
||||||
~children:React.element=?,
|
|
||||||
unit
|
|
||||||
) => props = ""
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Form.Item"
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
module Row = {
|
|
||||||
type props
|
|
||||||
|
|
||||||
@obj
|
|
||||||
external makeProps:
|
|
||||||
(
|
|
||||||
~className: string=?,
|
|
||||||
~_type: string=?,
|
|
||||||
~align: string=?,
|
|
||||||
~justify: string=?,
|
|
||||||
~gutter: 'a=?,
|
|
||||||
~style: ReactDOMStyle.t=?,
|
|
||||||
~prefixCls: string=?,
|
|
||||||
~children: React.element=?,
|
|
||||||
unit
|
|
||||||
) =>
|
|
||||||
props =
|
|
||||||
"";
|
|
||||||
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Row"
|
|
||||||
}
|
|
||||||
|
|
||||||
module Col = {
|
|
||||||
type props
|
|
||||||
|
|
||||||
@obj
|
|
||||||
external makeProps:
|
|
||||||
(
|
|
||||||
~className: string=?,
|
|
||||||
~span: int=?,
|
|
||||||
~order: int=?,
|
|
||||||
~offset: int=?,
|
|
||||||
~push: int=?,
|
|
||||||
~pull: int=?,
|
|
||||||
~xs: 'a=?,
|
|
||||||
~sm: 'b=?,
|
|
||||||
~md: 'c=?,
|
|
||||||
~lg: 'd=?,
|
|
||||||
~xl: 'e=?,
|
|
||||||
~xxl: 'f=?,
|
|
||||||
~prefixCls: string=?,
|
|
||||||
~style: ReactDOMStyle.t=?,
|
|
||||||
~children: React.element=?,
|
|
||||||
unit
|
|
||||||
) =>
|
|
||||||
props =
|
|
||||||
"";
|
|
||||||
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Col"
|
|
||||||
}
|
|
||||||
|
|
@ -1,581 +0,0 @@
|
||||||
type t = string
|
|
||||||
|
|
||||||
let toString = t => t
|
|
||||||
|
|
||||||
let fromString = t => t
|
|
||||||
|
|
||||||
let compare = (t1, t2) => t1 == t2
|
|
||||||
|
|
||||||
let stepBackward = "step-backward"
|
|
||||||
|
|
||||||
let stepForward = "step-forward"
|
|
||||||
|
|
||||||
let fastBackward = "fast-backward"
|
|
||||||
|
|
||||||
let fastForward = "fast-forward"
|
|
||||||
|
|
||||||
let shrink = "shrink"
|
|
||||||
|
|
||||||
let arrowsAlt = "arrows-alt"
|
|
||||||
|
|
||||||
let down = "down"
|
|
||||||
|
|
||||||
let up = "up"
|
|
||||||
|
|
||||||
let left = "left"
|
|
||||||
|
|
||||||
let right = "right"
|
|
||||||
|
|
||||||
let caretUp = "caret-up"
|
|
||||||
|
|
||||||
let caretDown = "caret-down"
|
|
||||||
|
|
||||||
let caretLeft = "caret-left"
|
|
||||||
|
|
||||||
let caretRight = "caret-right"
|
|
||||||
|
|
||||||
let upCircle = "up-circle"
|
|
||||||
|
|
||||||
let downCircle = "down-circle"
|
|
||||||
|
|
||||||
let leftCircle = "left-circle"
|
|
||||||
|
|
||||||
let rightCircle = "right-circle"
|
|
||||||
|
|
||||||
let upCircleO = "up-circle-o"
|
|
||||||
|
|
||||||
let downCircleO = "down-circle-o"
|
|
||||||
|
|
||||||
let rightCircleO = "right-circle-o"
|
|
||||||
|
|
||||||
let leftCircleO = "left-circle-o"
|
|
||||||
|
|
||||||
let doubleRight = "double-right"
|
|
||||||
|
|
||||||
let doubleLeft = "double-left"
|
|
||||||
|
|
||||||
let verticleLeft = "verticle-left"
|
|
||||||
|
|
||||||
let verticleRight = "verticle-right"
|
|
||||||
|
|
||||||
let forward = "forward"
|
|
||||||
|
|
||||||
let backward = "backward"
|
|
||||||
|
|
||||||
let rollback = "rollback"
|
|
||||||
|
|
||||||
let enter = "enter"
|
|
||||||
|
|
||||||
let retweet = "retweet"
|
|
||||||
|
|
||||||
let swap = "swap"
|
|
||||||
|
|
||||||
let swapLeft = "swap-left"
|
|
||||||
|
|
||||||
let swapRight = "swap-right"
|
|
||||||
|
|
||||||
let arrowUp = "arrow-up"
|
|
||||||
|
|
||||||
let arrowDown = "arrow-down"
|
|
||||||
|
|
||||||
let arrowLeft = "arrow-left"
|
|
||||||
|
|
||||||
let arrowRight = "arrow-right"
|
|
||||||
|
|
||||||
let playCircle = "play-circle"
|
|
||||||
|
|
||||||
let playCircleO = "play-circle-o"
|
|
||||||
|
|
||||||
let upSquare = "up-square"
|
|
||||||
|
|
||||||
let downSquare = "down-square"
|
|
||||||
|
|
||||||
let leftSquare = "left-square"
|
|
||||||
|
|
||||||
let rightSquare = "right-square"
|
|
||||||
|
|
||||||
let upSquareO = "up-square-o"
|
|
||||||
|
|
||||||
let downSquareO = "down-square-o"
|
|
||||||
|
|
||||||
let leftSquareO = "left-square-o"
|
|
||||||
|
|
||||||
let rightSquareO = "right-square-o"
|
|
||||||
|
|
||||||
let login = "login"
|
|
||||||
|
|
||||||
let logout = "logout"
|
|
||||||
|
|
||||||
let menuFold = "menu-fold"
|
|
||||||
|
|
||||||
let menuUnfold = "menu-unfold"
|
|
||||||
|
|
||||||
let question = "question"
|
|
||||||
|
|
||||||
let questionCircleO = "question-circle-o"
|
|
||||||
|
|
||||||
let questionCircle = "question-circle"
|
|
||||||
|
|
||||||
let plus = "plus"
|
|
||||||
|
|
||||||
let plusCircleO = "plus-circle-o"
|
|
||||||
|
|
||||||
let plusCircle = "plus-circle"
|
|
||||||
|
|
||||||
let pause = "pause"
|
|
||||||
|
|
||||||
let pauseCircleO = "pause-circle-o"
|
|
||||||
|
|
||||||
let pauseCircle = "pause-circle"
|
|
||||||
|
|
||||||
let minus = "minus"
|
|
||||||
|
|
||||||
let minusCircleO = "minus-circle-o"
|
|
||||||
|
|
||||||
let minusCircle = "minus-circle"
|
|
||||||
|
|
||||||
let plusSquare = "plus-square"
|
|
||||||
|
|
||||||
let plusSquareO = "plus-square-o"
|
|
||||||
|
|
||||||
let minusSquare = "minus-square"
|
|
||||||
|
|
||||||
let minusSquareO = "minus-square-o"
|
|
||||||
|
|
||||||
let info = "info"
|
|
||||||
|
|
||||||
let infoCircleO = "info-circle-o"
|
|
||||||
|
|
||||||
let infoCircle = "info-circle"
|
|
||||||
|
|
||||||
let exclamation = "exclamation"
|
|
||||||
|
|
||||||
let exclamationCircleO = "exclamation-circle-o"
|
|
||||||
|
|
||||||
let exclamationCircle = "exclamation-circle"
|
|
||||||
|
|
||||||
let close = "close"
|
|
||||||
|
|
||||||
let closeCircle = "close-circle"
|
|
||||||
|
|
||||||
let closeCircleO = "close-circle-o"
|
|
||||||
|
|
||||||
let closeSquare = "close-square"
|
|
||||||
|
|
||||||
let closeSquareO = "close-square-o"
|
|
||||||
|
|
||||||
let check = "check"
|
|
||||||
|
|
||||||
let checkCircle = "check-circle"
|
|
||||||
|
|
||||||
let checkCircleO = "check-circle-o"
|
|
||||||
|
|
||||||
let checkSquare = "check-square"
|
|
||||||
|
|
||||||
let checkSquareO = "check-square-o"
|
|
||||||
|
|
||||||
let clockCircleO = "clock-circle-o"
|
|
||||||
|
|
||||||
let clockCircle = "clock-circle"
|
|
||||||
|
|
||||||
let warning = "warning"
|
|
||||||
|
|
||||||
let lock = "lock"
|
|
||||||
|
|
||||||
let unlock = "unlock"
|
|
||||||
|
|
||||||
let areaChart = "area-chart"
|
|
||||||
|
|
||||||
let pieChart = "pie-chart"
|
|
||||||
|
|
||||||
let barChart = "bar-chart"
|
|
||||||
|
|
||||||
let dotChart = "dot-chart"
|
|
||||||
|
|
||||||
let bars = "bars"
|
|
||||||
|
|
||||||
let book = "book"
|
|
||||||
|
|
||||||
let calendar = "calendar"
|
|
||||||
|
|
||||||
let cloud = "cloud"
|
|
||||||
|
|
||||||
let cloudDownload = "cloud-download"
|
|
||||||
|
|
||||||
let code = "code"
|
|
||||||
|
|
||||||
let codeO = "code-o"
|
|
||||||
|
|
||||||
let copy = "copy"
|
|
||||||
|
|
||||||
let creditCard = "credit-card"
|
|
||||||
|
|
||||||
let delete = "delete"
|
|
||||||
|
|
||||||
let desktop = "desktop"
|
|
||||||
|
|
||||||
let download = "download"
|
|
||||||
|
|
||||||
let edit = "edit"
|
|
||||||
|
|
||||||
let ellipsis = "ellipsis"
|
|
||||||
|
|
||||||
let file = "file"
|
|
||||||
|
|
||||||
let fileText = "file-text"
|
|
||||||
|
|
||||||
let fileUnknown = "file-unknown"
|
|
||||||
|
|
||||||
let filePdf = "file-pdf"
|
|
||||||
|
|
||||||
let fileWord = "file-word"
|
|
||||||
|
|
||||||
let fileExcel = "file-excel"
|
|
||||||
|
|
||||||
let fileJpg = "file-jpg"
|
|
||||||
|
|
||||||
let filePpt = "file-ppt"
|
|
||||||
|
|
||||||
let fileMarkdown = "file-markdown"
|
|
||||||
|
|
||||||
let fileAdd = "file-add"
|
|
||||||
|
|
||||||
let folder = "folder"
|
|
||||||
|
|
||||||
let folderOpen = "folder-open"
|
|
||||||
|
|
||||||
let folderAdd = "folder-add"
|
|
||||||
|
|
||||||
let hdd = "hdd"
|
|
||||||
|
|
||||||
let frown = "frown"
|
|
||||||
|
|
||||||
let frownO = "frown-o"
|
|
||||||
|
|
||||||
let meh = "meh"
|
|
||||||
|
|
||||||
let mehO = "meh-o"
|
|
||||||
|
|
||||||
let smile = "smile"
|
|
||||||
|
|
||||||
let smileO = "smile-o"
|
|
||||||
|
|
||||||
let inbox = "inbox"
|
|
||||||
|
|
||||||
let laptop = "laptop"
|
|
||||||
|
|
||||||
let appstoreO = "appstore-o"
|
|
||||||
|
|
||||||
let appstore = "appstore"
|
|
||||||
|
|
||||||
let lineChart = "line-chart"
|
|
||||||
|
|
||||||
let link = "link"
|
|
||||||
|
|
||||||
let mail = "mail"
|
|
||||||
|
|
||||||
let mobile = "mobile"
|
|
||||||
|
|
||||||
let notification = "notification"
|
|
||||||
|
|
||||||
let paperClip = "paper-clip"
|
|
||||||
|
|
||||||
let picture = "picture"
|
|
||||||
|
|
||||||
let poweroff = "poweroff"
|
|
||||||
|
|
||||||
let reload = "reload"
|
|
||||||
|
|
||||||
let search = "search"
|
|
||||||
|
|
||||||
let setting = "setting"
|
|
||||||
|
|
||||||
let shareAlt = "share-alt"
|
|
||||||
|
|
||||||
let shoppingCart = "shopping-cart"
|
|
||||||
|
|
||||||
let tablet = "tablet"
|
|
||||||
|
|
||||||
let tag = "tag"
|
|
||||||
|
|
||||||
let tagO = "tag-o"
|
|
||||||
|
|
||||||
let tags = "tags"
|
|
||||||
|
|
||||||
let tagsO = "tags-o"
|
|
||||||
|
|
||||||
let toTop = "to-top"
|
|
||||||
|
|
||||||
let upload = "upload"
|
|
||||||
|
|
||||||
let user = "user"
|
|
||||||
|
|
||||||
let videoCamera = "video-camera"
|
|
||||||
|
|
||||||
let home = "home"
|
|
||||||
|
|
||||||
let loading = "loading"
|
|
||||||
|
|
||||||
let loading3Quarters = "loading-3-quarters"
|
|
||||||
|
|
||||||
let cloudUploadO = "cloud-upload-o"
|
|
||||||
|
|
||||||
let cloudDownloadO = "cloud-download-o"
|
|
||||||
|
|
||||||
let cloudUpload = "cloud-upload"
|
|
||||||
|
|
||||||
let cloudO = "cloud-o"
|
|
||||||
|
|
||||||
let starO = "star-o"
|
|
||||||
|
|
||||||
let star = "star"
|
|
||||||
|
|
||||||
let heartO = "heart-o"
|
|
||||||
|
|
||||||
let heart = "heart"
|
|
||||||
|
|
||||||
let environment = "environment"
|
|
||||||
|
|
||||||
let environmentO = "environment-o"
|
|
||||||
|
|
||||||
let eye = "eye"
|
|
||||||
|
|
||||||
let eyeO = "eye-o"
|
|
||||||
|
|
||||||
let camera = "camera"
|
|
||||||
|
|
||||||
let cameraO = "camera-o"
|
|
||||||
|
|
||||||
let save = "save"
|
|
||||||
|
|
||||||
let team = "team"
|
|
||||||
|
|
||||||
let solution = "solution"
|
|
||||||
|
|
||||||
let phone = "phone"
|
|
||||||
|
|
||||||
let filter = "filter"
|
|
||||||
|
|
||||||
let exception_ = "exception"
|
|
||||||
|
|
||||||
let \"export" = "export"
|
|
||||||
|
|
||||||
let customerService = "customer-service"
|
|
||||||
|
|
||||||
let qrcode = "qrcode"
|
|
||||||
|
|
||||||
let scan = "scan"
|
|
||||||
|
|
||||||
let like = "like"
|
|
||||||
|
|
||||||
let likeO = "like-o"
|
|
||||||
|
|
||||||
let dislike = "dislike"
|
|
||||||
|
|
||||||
let dislikeO = "dislike-o"
|
|
||||||
|
|
||||||
let message = "message"
|
|
||||||
|
|
||||||
let payCircle = "pay-circle"
|
|
||||||
|
|
||||||
let payCircleO = "pay-circle-o"
|
|
||||||
|
|
||||||
let calculator = "calculator"
|
|
||||||
|
|
||||||
let pushpin = "pushpin"
|
|
||||||
|
|
||||||
let pushpinO = "pushpin-o"
|
|
||||||
|
|
||||||
let bulb = "bulb"
|
|
||||||
|
|
||||||
let select = "select"
|
|
||||||
|
|
||||||
let switcher = "switcher"
|
|
||||||
|
|
||||||
let rocket = "rocket"
|
|
||||||
|
|
||||||
let bell = "bell"
|
|
||||||
|
|
||||||
let disconnect = "disconnect"
|
|
||||||
|
|
||||||
let database = "database"
|
|
||||||
|
|
||||||
let compass = "compass"
|
|
||||||
|
|
||||||
let barcode = "barcode"
|
|
||||||
|
|
||||||
let hourglass = "hourglass"
|
|
||||||
|
|
||||||
let key = "key"
|
|
||||||
|
|
||||||
let flag = "flag"
|
|
||||||
|
|
||||||
let layout = "layout"
|
|
||||||
|
|
||||||
let printer = "printer"
|
|
||||||
|
|
||||||
let sound = "sound"
|
|
||||||
|
|
||||||
let usb = "usb"
|
|
||||||
|
|
||||||
let skin = "skin"
|
|
||||||
|
|
||||||
let tool = "tool"
|
|
||||||
|
|
||||||
let sync = "sync"
|
|
||||||
|
|
||||||
let wifi = "wifi"
|
|
||||||
|
|
||||||
let car = "car"
|
|
||||||
|
|
||||||
let schedule = "schedule"
|
|
||||||
|
|
||||||
let userAdd = "user-add"
|
|
||||||
|
|
||||||
let userDelete = "user-delete"
|
|
||||||
|
|
||||||
let usergroupAdd = "usergroup-add"
|
|
||||||
|
|
||||||
let usergroupDelete = "usergroup-delete"
|
|
||||||
|
|
||||||
let man = "man"
|
|
||||||
|
|
||||||
let woman = "woman"
|
|
||||||
|
|
||||||
let shop = "shop"
|
|
||||||
|
|
||||||
let gift = "gift"
|
|
||||||
|
|
||||||
let idcard = "idcard"
|
|
||||||
|
|
||||||
let medicineBox = "medicine-box"
|
|
||||||
|
|
||||||
let redEnvelope = "red-envelope"
|
|
||||||
|
|
||||||
let coffee = "coffee"
|
|
||||||
|
|
||||||
let copyright = "copyright"
|
|
||||||
|
|
||||||
let trademark = "trademark"
|
|
||||||
|
|
||||||
let safety = "safety"
|
|
||||||
|
|
||||||
let wallet = "wallet"
|
|
||||||
|
|
||||||
let bank = "bank"
|
|
||||||
|
|
||||||
let trophy = "trophy"
|
|
||||||
|
|
||||||
let contacts = "contacts"
|
|
||||||
|
|
||||||
let global = "global"
|
|
||||||
|
|
||||||
let shake = "shake"
|
|
||||||
|
|
||||||
let api = "api"
|
|
||||||
|
|
||||||
let fork = "fork"
|
|
||||||
|
|
||||||
let dashboard = "dashboard"
|
|
||||||
|
|
||||||
let form = "form"
|
|
||||||
|
|
||||||
let table = "table"
|
|
||||||
|
|
||||||
let profile = "profile"
|
|
||||||
|
|
||||||
let android = "android"
|
|
||||||
|
|
||||||
let androidO = "android-o"
|
|
||||||
|
|
||||||
let apple = "apple"
|
|
||||||
|
|
||||||
let appleO = "apple-o"
|
|
||||||
|
|
||||||
let windows = "windows"
|
|
||||||
|
|
||||||
let windowsO = "windows-o"
|
|
||||||
|
|
||||||
let ie = "ie"
|
|
||||||
|
|
||||||
let chrome = "chrome"
|
|
||||||
|
|
||||||
let github = "github"
|
|
||||||
|
|
||||||
let aliwangwang = "aliwangwang"
|
|
||||||
|
|
||||||
let aliwangwangO = "aliwangwang-o"
|
|
||||||
|
|
||||||
let dingding = "dingding"
|
|
||||||
|
|
||||||
let dingdingO = "dingding-o"
|
|
||||||
|
|
||||||
let weiboSquare = "weibo-square"
|
|
||||||
|
|
||||||
let weiboCircle = "weibo-circle"
|
|
||||||
|
|
||||||
let taobaoCircle = "taobao-circle"
|
|
||||||
|
|
||||||
let html5 = "html5"
|
|
||||||
|
|
||||||
let weibo = "weibo"
|
|
||||||
|
|
||||||
let twitter = "twitter"
|
|
||||||
|
|
||||||
let wechat = "wechat"
|
|
||||||
|
|
||||||
let youtube = "youtube"
|
|
||||||
|
|
||||||
let alipayCircle = "alipay-circle"
|
|
||||||
|
|
||||||
let taobao = "taobao"
|
|
||||||
|
|
||||||
let skype = "skype"
|
|
||||||
|
|
||||||
let qq = "qq"
|
|
||||||
|
|
||||||
let mediumWorkmark = "medium-workmark"
|
|
||||||
|
|
||||||
let gitlab = "gitlab"
|
|
||||||
|
|
||||||
let medium = "medium"
|
|
||||||
|
|
||||||
let linkedin = "linkedin"
|
|
||||||
|
|
||||||
let googlePlus = "google-plus"
|
|
||||||
|
|
||||||
let dropbox = "dropbox"
|
|
||||||
|
|
||||||
let facebook = "facebook"
|
|
||||||
|
|
||||||
let codepen = "codepen"
|
|
||||||
|
|
||||||
let amazon = "amazon"
|
|
||||||
|
|
||||||
let google = "google"
|
|
||||||
|
|
||||||
let codepenCircle = "codepen-circle"
|
|
||||||
|
|
||||||
let alipay = "alipay"
|
|
||||||
|
|
||||||
let antDesign = "ant-design"
|
|
||||||
|
|
||||||
let aliyun = "aliyun"
|
|
||||||
|
|
||||||
let zhihu = "zhihu"
|
|
||||||
|
|
||||||
let slack = "slack"
|
|
||||||
|
|
||||||
let slackSquare = "slack-square"
|
|
||||||
|
|
||||||
let behance = "behance"
|
|
||||||
|
|
||||||
let behanceSquare = "behance-square"
|
|
||||||
|
|
||||||
let dribbble = "dribbble"
|
|
||||||
|
|
||||||
let dribbbleSquare = "dribbble-square"
|
|
||||||
|
|
||||||
let instagram = "instagram"
|
|
||||||
|
|
||||||
let yuque = "yuque"
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
@deriving(abstract)
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
|
|
||||||
@obj external makeProps: (
|
|
||||||
@as("type")
|
|
||||||
~htmlType: string=?,
|
|
||||||
~name: string=?,
|
|
||||||
~value: string=?,
|
|
||||||
~defaultValue: string=?,
|
|
||||||
~onChange: ReactEvent.Form.t => unit=?,
|
|
||||||
~onPressEnter: ReactEvent.Keyboard.t => unit=?,
|
|
||||||
~onBlur: ReactEvent.Focus.t => unit=?,
|
|
||||||
~className: string=?,
|
|
||||||
~style: ReactDOMStyle.t=?,
|
|
||||||
~placeholder: string=?,
|
|
||||||
unit // This unit is a quirk of the type system. Apparently it must exist to have optional arguments in a type
|
|
||||||
) => props = ""
|
|
||||||
|
|
||||||
@module("antd")
|
|
||||||
external make : makeType = "Input"
|
|
||||||
78
src/App.res
78
src/App.res
|
|
@ -1,78 +0,0 @@
|
||||||
type route =
|
|
||||||
| DistBuilder
|
|
||||||
| Home
|
|
||||||
| NotFound
|
|
||||||
|
|
||||||
let routeToPath = route =>
|
|
||||||
switch route {
|
|
||||||
| DistBuilder => "/dist-builder"
|
|
||||||
| Home => "/"
|
|
||||||
| _ => "/"
|
|
||||||
}
|
|
||||||
|
|
||||||
module Menu = {
|
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let menu = style(. [ position(#relative),
|
|
||||||
marginTop(em(0.25)),
|
|
||||||
marginBottom(em(0.25)),
|
|
||||||
selector(.
|
|
||||||
"a",
|
|
||||||
[ borderRadius(em(0.25)),
|
|
||||||
display(#inlineBlock),
|
|
||||||
backgroundColor(#hex("eee")),
|
|
||||||
padding(em(1.)),
|
|
||||||
cursor(#pointer),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
|
|
||||||
selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
|
|
||||||
selector(.
|
|
||||||
"a:not(:firstChild):not(:lastChild)",
|
|
||||||
[ marginRight(em(0.25)), marginLeft(em(0.25)) ],
|
|
||||||
),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
module Item = {
|
|
||||||
@react.component
|
|
||||||
let make = (~href, ~children) =>
|
|
||||||
<a
|
|
||||||
href
|
|
||||||
onClick={e => {
|
|
||||||
e->ReactEvent.Synthetic.preventDefault
|
|
||||||
RescriptReactRouter.push(href)
|
|
||||||
}}>
|
|
||||||
children
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () =>
|
|
||||||
<div style=Styles.menu>
|
|
||||||
<Item href={routeToPath(Home)} key="home"> {"Home" |> R.ste} </Item>
|
|
||||||
<Item href={routeToPath(DistBuilder)} key="dist-builder"> {"Dist Builder" |> R.ste} </Item>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
let fixedLength = r => <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => {
|
|
||||||
let url = RescriptReactRouter.useUrl()
|
|
||||||
|
|
||||||
let routing = switch url.path {
|
|
||||||
| list{"dist-builder"} => DistBuilder
|
|
||||||
| list{} => Home
|
|
||||||
| _ => NotFound
|
|
||||||
}
|
|
||||||
|
|
||||||
<>
|
|
||||||
<Menu />
|
|
||||||
{switch routing {
|
|
||||||
| DistBuilder => <DistBuilder />
|
|
||||||
| Home => <Home />
|
|
||||||
| _ => fixedLength("Page is not found" |> R.ste)
|
|
||||||
}}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
let reasonReactBlue = "#48a9dc";
|
|
||||||
|
|
||||||
// The {j|...|j} feature is just string interpolation, from
|
|
||||||
// bucklescript.github.io/docs/en/interop-cheatsheet#string-unicode-interpolation
|
|
||||||
// This allows us to conveniently write CSS, together with variables, by
|
|
||||||
// constructing a string
|
|
||||||
let style = {j|
|
|
||||||
body {
|
|
||||||
background-color: rgb(224, 226, 229);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: white;
|
|
||||||
color: $reasonReactBlue;
|
|
||||||
box-shadow: 0 0 0 1px $reasonReactBlue;
|
|
||||||
border: none;
|
|
||||||
padding: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
button:active {
|
|
||||||
background-color: $reasonReactBlue;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
margin: 12px 0px;
|
|
||||||
box-shadow: 0px 4px 16px rgb(200, 200, 200);
|
|
||||||
width: 720px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
.containerTitle {
|
|
||||||
background-color: rgb(242, 243, 245);
|
|
||||||
border-radius: 12px 12px 0px 0px;
|
|
||||||
padding: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.containerContent {
|
|
||||||
background-color: white;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 0px 0px 12px 12px;
|
|
||||||
}
|
|
||||||
|j};
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
%raw(`import('./styles/index.css')`)
|
|
||||||
switch ReactDOM.querySelector("#app") {
|
|
||||||
| Some(root) => ReactDOM.render(<App />, root)
|
|
||||||
| None => ()
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
let ste = React.string
|
|
||||||
let showIf = (cond, comp) => cond ? comp : React.null
|
|
||||||
|
|
||||||
module O = {
|
|
||||||
let defaultNull = E.O.default(React.null)
|
|
||||||
let fmapOrNull = (fn, el) => el |> E.O.fmap(fn) |> E.O.default(React.null)
|
|
||||||
let flatten = E.O.default(React.null)
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import AceEditor from "react-ace";
|
|
||||||
|
|
||||||
import "ace-builds/src-noconflict/mode-golang";
|
|
||||||
import "ace-builds/src-noconflict/theme-github";
|
|
||||||
import "ace-builds/src-noconflict/ext-language_tools";
|
|
||||||
import "ace-builds/src-noconflict/keybinding-vim";
|
|
||||||
|
|
||||||
function onChange(newValue) {
|
|
||||||
console.log("change", newValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CodeEditor(props) {
|
|
||||||
return (
|
|
||||||
<AceEditor
|
|
||||||
value={props.value}
|
|
||||||
mode="golang"
|
|
||||||
height="400px"
|
|
||||||
width="100%"
|
|
||||||
theme="github"
|
|
||||||
showGutter={false}
|
|
||||||
highlightActiveLine={false}
|
|
||||||
showPrintMargin={false}
|
|
||||||
onChange={props.onChange}
|
|
||||||
name="UNIQUE_ID_OF_DIV"
|
|
||||||
editorProps={{
|
|
||||||
$blockScrolling: true,
|
|
||||||
}}
|
|
||||||
setOptions={{
|
|
||||||
enableBasicAutocompletion: false,
|
|
||||||
enableLiveAutocompletion: true,
|
|
||||||
enableSnippets: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
type props
|
|
||||||
@obj external makeProps : (~value:string=?, ~onChange: string => unit, ~children: React.element=?, unit) => props = ""
|
|
||||||
|
|
||||||
@module("./CodeEditor.js")
|
|
||||||
external make: props => React.element = "CodeEditor"
|
|
||||||
|
|
@ -1,271 +0,0 @@
|
||||||
open ReForm
|
|
||||||
open Antd.Grid
|
|
||||||
|
|
||||||
module FormConfig = %lenses(
|
|
||||||
type state = {
|
|
||||||
squiggleString: string,
|
|
||||||
sampleCount: string,
|
|
||||||
outputXYPoints: string,
|
|
||||||
downsampleTo: string,
|
|
||||||
kernelWidth: string,
|
|
||||||
diagramStart: string,
|
|
||||||
diagramStop: string,
|
|
||||||
diagramCount: string,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
type options = {
|
|
||||||
sampleCount: int,
|
|
||||||
outputXYPoints: int,
|
|
||||||
downsampleTo: option<int>,
|
|
||||||
kernelWidth: option<float>,
|
|
||||||
diagramStart: float,
|
|
||||||
diagramStop: float,
|
|
||||||
diagramCount: int,
|
|
||||||
}
|
|
||||||
|
|
||||||
module Form = ReForm.Make(FormConfig)
|
|
||||||
|
|
||||||
module FieldText = {
|
|
||||||
@react.component
|
|
||||||
let make = (~field, ~label) => <>
|
|
||||||
<Form.Field
|
|
||||||
field
|
|
||||||
render={({handleChange, error, value, validate}) =>{
|
|
||||||
Js.Console.log(CodeEditor.make);
|
|
||||||
(<CodeEditor value onChange={r => handleChange(r)} />)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
module FieldString = {
|
|
||||||
@react.component
|
|
||||||
let make = (~field, ~label) =>
|
|
||||||
<Form.Field
|
|
||||||
field
|
|
||||||
render={({handleChange, error, value, validate}) =>
|
|
||||||
<Antd.Form.Item label={label}>
|
|
||||||
<Antd.Input
|
|
||||||
value onChange={ReForm.Helpers.handleChange(handleChange)} onBlur={_ => validate()}
|
|
||||||
/>
|
|
||||||
</Antd.Form.Item>}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
module FieldFloat = {
|
|
||||||
@react.component
|
|
||||||
let make = (~field, ~label, ~className=CssJs.style(. [])) =>
|
|
||||||
<Form.Field
|
|
||||||
field
|
|
||||||
render={({handleChange, error, value, validate}) =>
|
|
||||||
<Antd.Input
|
|
||||||
value
|
|
||||||
onChange={ReForm.Helpers.handleChange(handleChange)}
|
|
||||||
onBlur={_ => validate()}
|
|
||||||
style={className}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let rows = style(. [ selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
|
|
||||||
selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
|
|
||||||
selector(.
|
|
||||||
">.antCol:not(:firstChild):not(:lastChild)",
|
|
||||||
[ paddingLeft(em(0.125)), paddingRight(em(0.125)) ],
|
|
||||||
),
|
|
||||||
])
|
|
||||||
let parent = style(. [ selector(. ".antInputNumber", [ 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(. ".antInputNumberInput", [ backgroundColor(hex("fff7db")) ]),
|
|
||||||
])
|
|
||||||
let groupB = style(. [ selector(. ".antInputNumberInput", [ backgroundColor(hex("eaf4ff")) ]),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
module DemoDist = {
|
|
||||||
@react.component
|
|
||||||
let make = (~squiggleString: string, ~options) =>
|
|
||||||
<Antd.Card title={"Distribution"}>
|
|
||||||
<div>
|
|
||||||
{switch options {
|
|
||||||
| Some(options) =>
|
|
||||||
let inputs1 = ProgramEvaluator.Inputs.make(
|
|
||||||
~samplingInputs={
|
|
||||||
sampleCount: Some(options.sampleCount),
|
|
||||||
outputXYPoints: Some(options.outputXYPoints),
|
|
||||||
kernelWidth: options.kernelWidth,
|
|
||||||
shapeLength: Some(options.downsampleTo |> E.O.default(1000)),
|
|
||||||
},
|
|
||||||
~squiggleString,
|
|
||||||
~environment=[
|
|
||||||
("K", #SymbolicDist(#Float(1000.0))),
|
|
||||||
("M", #SymbolicDist(#Float(1000000.0))),
|
|
||||||
("B", #SymbolicDist(#Float(1000000000.0))),
|
|
||||||
("T", #SymbolicDist(#Float(1000000000000.0))),
|
|
||||||
]->Belt.Map.String.fromArray,
|
|
||||||
(),
|
|
||||||
)
|
|
||||||
|
|
||||||
let distributionList = ProgramEvaluator.evaluateProgram(inputs1)
|
|
||||||
|
|
||||||
let renderExpression = response1 =>
|
|
||||||
switch response1 {
|
|
||||||
| #DistPlus(distPlus1) => <DistPlusPlot distPlus={DistPlus.T.normalize(distPlus1)} />
|
|
||||||
| #Float(f) => <NumberShower number=f precision=3 />
|
|
||||||
| #Function((f, a), env) =>
|
|
||||||
// Problem: When it gets the function, it doesn't save state about previous commands
|
|
||||||
let foo: ProgramEvaluator.Inputs.inputs = {
|
|
||||||
squiggleString: squiggleString,
|
|
||||||
samplingInputs: inputs1.samplingInputs,
|
|
||||||
environment: env,
|
|
||||||
}
|
|
||||||
let results =
|
|
||||||
E.A.Floats.range(options.diagramStart, options.diagramStop, options.diagramCount)
|
|
||||||
|> E.A.fmap(r =>
|
|
||||||
ProgramEvaluator.evaluateFunction(
|
|
||||||
foo,
|
|
||||||
(f, a),
|
|
||||||
[#SymbolicDist(#Float(r))],
|
|
||||||
) |> E.R.bind(_, a =>
|
|
||||||
switch a {
|
|
||||||
| #DistPlus(d) => Ok((r, DistPlus.T.normalize(d)))
|
|
||||||
| n =>
|
|
||||||
Js.log2("Error here", n)
|
|
||||||
Error("wrong type")
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|> E.A.R.firstErrorOrOpen
|
|
||||||
switch results {
|
|
||||||
| Ok(dists) => <PercentilesChart dists />
|
|
||||||
| Error(r) => r |> R.ste
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render the list of distributions given by the
|
|
||||||
switch distributionList {
|
|
||||||
| Ok(xs) =>
|
|
||||||
let childrenElements = List.map(renderExpression, xs)
|
|
||||||
Js.Console.log(childrenElements)
|
|
||||||
<ul>
|
|
||||||
{Belt.List.toArray(Belt.List.mapWithIndex(childrenElements, (i, child) => <li key={Belt.Int.toString(i)}>child</li>))->React.array}
|
|
||||||
</ul>
|
|
||||||
| Error(r) => r |> R.ste
|
|
||||||
}
|
|
||||||
| _ => "Nothing to show. Try to change the distribution description." |> R.ste
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</Antd.Card>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => {
|
|
||||||
let (reloader, setReloader) = React.useState(() => 1)
|
|
||||||
let reform = Form.use(
|
|
||||||
~validationStrategy=OnDemand,
|
|
||||||
~schema=Form.Validation.Schema([]),
|
|
||||||
~onSubmit=({state}) => None,
|
|
||||||
~initialState={
|
|
||||||
//squiggleString: "mm(normal(-10, 2), uniform(18, 25), lognormal({mean: 10, stdev: 8}), triangular(31,40,50))",
|
|
||||||
squiggleString: "mm(normal(5,2), normal(10,2))",
|
|
||||||
sampleCount: "1000",
|
|
||||||
outputXYPoints: "1000",
|
|
||||||
downsampleTo: "",
|
|
||||||
kernelWidth: "",
|
|
||||||
diagramStart: "0",
|
|
||||||
diagramStop: "10",
|
|
||||||
diagramCount: "20",
|
|
||||||
},
|
|
||||||
(),
|
|
||||||
)
|
|
||||||
|
|
||||||
let onSubmit = e => {
|
|
||||||
e->ReactEvent.Synthetic.preventDefault
|
|
||||||
reform.submit()
|
|
||||||
}
|
|
||||||
|
|
||||||
let squiggleString = reform.state.values.squiggleString
|
|
||||||
let sampleCount = reform.state.values.sampleCount |> Js.Float.fromString
|
|
||||||
let outputXYPoints = reform.state.values.outputXYPoints |> Js.Float.fromString
|
|
||||||
let downsampleTo = reform.state.values.downsampleTo |> Js.Float.fromString
|
|
||||||
let kernelWidth = reform.state.values.kernelWidth |> Js.Float.fromString
|
|
||||||
let diagramStart = reform.state.values.diagramStart |> Js.Float.fromString
|
|
||||||
let diagramStop = reform.state.values.diagramStop |> Js.Float.fromString
|
|
||||||
let diagramCount = reform.state.values.diagramCount |> Js.Float.fromString
|
|
||||||
|
|
||||||
let options = switch (sampleCount, outputXYPoints, downsampleTo) {
|
|
||||||
| (_, _, _)
|
|
||||||
if !Js.Float.isNaN(sampleCount) &&
|
|
||||||
(!Js.Float.isNaN(outputXYPoints) &&
|
|
||||||
(!Js.Float.isNaN(downsampleTo) && (sampleCount > 10. && outputXYPoints > 10.))) =>
|
|
||||||
Some({
|
|
||||||
sampleCount: sampleCount |> int_of_float,
|
|
||||||
outputXYPoints: outputXYPoints |> int_of_float,
|
|
||||||
downsampleTo: int_of_float(downsampleTo) > 0 ? Some(int_of_float(downsampleTo)) : None,
|
|
||||||
kernelWidth: kernelWidth == 0.0 ? None : Some(kernelWidth),
|
|
||||||
diagramStart: diagramStart,
|
|
||||||
diagramStop: diagramStop,
|
|
||||||
diagramCount: diagramCount |> int_of_float,
|
|
||||||
})
|
|
||||||
| _ => None
|
|
||||||
}
|
|
||||||
|
|
||||||
let demoDist = React.useMemo1(
|
|
||||||
() => <DemoDist squiggleString options />,
|
|
||||||
[
|
|
||||||
reform.state.values.squiggleString,
|
|
||||||
reform.state.values.sampleCount,
|
|
||||||
reform.state.values.outputXYPoints,
|
|
||||||
reform.state.values.downsampleTo,
|
|
||||||
reform.state.values.kernelWidth,
|
|
||||||
reform.state.values.diagramStart,
|
|
||||||
reform.state.values.diagramStop,
|
|
||||||
reform.state.values.diagramCount,
|
|
||||||
reloader |> string_of_int,
|
|
||||||
],
|
|
||||||
)
|
|
||||||
|
|
||||||
let onReload = _ => setReloader(_ => reloader + 1)
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<Antd.Card
|
|
||||||
title={"Distribution Form" |> R.ste}
|
|
||||||
extra={<Antd.Button icon=Antd.IconName.reload shape=#circle onClick=onReload />}>
|
|
||||||
<Form.Provider value=reform>
|
|
||||||
<Antd.Form onSubmit>
|
|
||||||
<Row _type="flex" style=Styles.rows>
|
|
||||||
<Col span=24> <FieldText field=FormConfig.SquiggleString label="Program" /> </Col>
|
|
||||||
</Row>
|
|
||||||
<Row _type="flex" style=Styles.rows>
|
|
||||||
<Col span=12> <FieldFloat field=FormConfig.SampleCount label="Sample Count" /> </Col>
|
|
||||||
<Col span=12>
|
|
||||||
<FieldFloat field=FormConfig.OutputXYPoints label="Output XY-points" />
|
|
||||||
</Col>
|
|
||||||
<Col span=12>
|
|
||||||
<FieldFloat field=FormConfig.DownsampleTo label="Downsample To" />
|
|
||||||
</Col>
|
|
||||||
<Col span=12> <FieldFloat field=FormConfig.KernelWidth label="Kernel Width" /> </Col>
|
|
||||||
<Col span=12>
|
|
||||||
<FieldFloat field=FormConfig.DiagramStart label="Diagram Start" />
|
|
||||||
</Col>
|
|
||||||
<Col span=12> <FieldFloat field=FormConfig.DiagramStop label="Diagram Stop" /> </Col>
|
|
||||||
<Col span=12>
|
|
||||||
<FieldFloat field=FormConfig.DiagramCount label="Diagram Count" />
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Antd.Form>
|
|
||||||
</Form.Provider>
|
|
||||||
</Antd.Card>
|
|
||||||
</div>
|
|
||||||
<div> demoDist </div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
open DistPlusPlotReducer
|
|
||||||
let plotBlue = #hex("1860ad")
|
|
||||||
|
|
||||||
let showAsForm = (distPlus: DistTypes.distPlus) =>
|
|
||||||
<div> <Antd.Input value={distPlus.squiggleString |> E.O.default("")} /> </div>
|
|
||||||
|
|
||||||
let showFloat = (~precision=3, number) => <NumberShower number precision />
|
|
||||||
|
|
||||||
let table = (distPlus, x) =>
|
|
||||||
<div>
|
|
||||||
<table className="table-auto text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2 "> {"X Point" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"Discrete Value" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"Continuous Value" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"Y Integral to Point" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"Y Integral Total" |> React.string} </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2 border"> {x |> E.Float.toString |> React.string} </td>
|
|
||||||
<td className="px-4 py-2 border ">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.xToY(x)
|
|
||||||
|> DistTypes.MixedPoint.toDiscreteValue
|
|
||||||
|> Js.Float.toPrecisionWithPrecision(_, ~digits=7)
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border ">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.xToY(x)
|
|
||||||
|> DistTypes.MixedPoint.toContinuousValue
|
|
||||||
|> Js.Float.toPrecisionWithPrecision(_, ~digits=7)
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border ">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.Integral.xToY(x)
|
|
||||||
|> E.Float.with2DigitsPrecision
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border ">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.Integral.sum
|
|
||||||
|> E.Float.with2DigitsPrecision
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<table className="table-auto text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2"> {"Continuous Total" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"Discrete Total" |> React.string} </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.toContinuous
|
|
||||||
|> E.O.fmap(Continuous.T.Integral.sum)
|
|
||||||
|> E.O.fmap(E.Float.with2DigitsPrecision)
|
|
||||||
|> E.O.default("")
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border ">
|
|
||||||
{distPlus
|
|
||||||
|> DistPlus.T.toDiscrete
|
|
||||||
|> E.O.fmap(Discrete.T.Integral.sum)
|
|
||||||
|> E.O.fmap(E.Float.with2DigitsPrecision)
|
|
||||||
|> E.O.default("")
|
|
||||||
|> React.string}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
let percentiles = distPlus =>
|
|
||||||
<div>
|
|
||||||
<table className="table-auto text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2"> {"1" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"5" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"25" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"50" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"75" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"95" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"99" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"99.999" |> React.string} </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.01) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.05) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.25) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.5) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.75) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.95) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.99) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.Integral.yToX(0.99999) |> showFloat}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<table className="table-auto text-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2"> {"mean" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"standard deviation" |> React.string} </td>
|
|
||||||
<td className="px-4 py-2"> {"variance" |> React.string} </td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="px-4 py-2 border"> {distPlus |> DistPlus.T.mean |> showFloat} </td>
|
|
||||||
<td className="px-4 py-2 border">
|
|
||||||
{distPlus |> DistPlus.T.variance |> (r => r ** 0.5) |> showFloat}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-2 border"> {distPlus |> DistPlus.T.variance |> showFloat} </td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
let adjustBoth = discreteProbabilityMassFraction => {
|
|
||||||
let yMaxDiscreteDomainFactor = discreteProbabilityMassFraction
|
|
||||||
let yMaxContinuousDomainFactor = 1.0 -. discreteProbabilityMassFraction
|
|
||||||
|
|
||||||
// use the bigger proportion, such that whichever is the bigger proportion, the yMax is 1.
|
|
||||||
|
|
||||||
let yMax = yMaxDiscreteDomainFactor > 0.5 ? yMaxDiscreteDomainFactor : yMaxContinuousDomainFactor
|
|
||||||
(yMax /. yMaxDiscreteDomainFactor, yMax /. yMaxContinuousDomainFactor)
|
|
||||||
}
|
|
||||||
|
|
||||||
module DistPlusChart = {
|
|
||||||
@react.component
|
|
||||||
let make = (~distPlus: DistTypes.distPlus, ~config: chartConfig, ~onHover) => {
|
|
||||||
open DistPlus
|
|
||||||
|
|
||||||
let discrete = distPlus |> T.toDiscrete |> E.O.fmap(Discrete.getShape)
|
|
||||||
let continuous = distPlus |> T.toContinuous |> E.O.fmap(Continuous.getShape)
|
|
||||||
|
|
||||||
// // We subtract a bit from the range to make sure that it fits. Maybe this should be done in d3 instead.
|
|
||||||
// let minX =
|
|
||||||
// switch (
|
|
||||||
// distPlus
|
|
||||||
// |> DistPlus.T.Integral.yToX(0.0001),
|
|
||||||
// range,
|
|
||||||
// ) {
|
|
||||||
// | (min, Some(range)) => Some(min -. range *. 0.001)
|
|
||||||
// | _ => None
|
|
||||||
// };
|
|
||||||
|
|
||||||
let minX = distPlus |> DistPlus.T.Integral.yToX(0.00001)
|
|
||||||
|
|
||||||
let maxX = distPlus |> DistPlus.T.Integral.yToX(0.99999)
|
|
||||||
|
|
||||||
let timeScale = distPlus.unit |> DistTypes.DistributionUnit.toJson
|
|
||||||
let discreteProbabilityMassFraction = distPlus |> DistPlus.T.toDiscreteProbabilityMassFraction
|
|
||||||
|
|
||||||
let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) = adjustBoth(
|
|
||||||
discreteProbabilityMassFraction,
|
|
||||||
)
|
|
||||||
|
|
||||||
<DistributionPlot
|
|
||||||
xScale={config.xLog ? "log" : "linear"}
|
|
||||||
yScale={config.yLog ? "log" : "linear"}
|
|
||||||
height={DistPlusPlotReducer.heightToPix(config.height)}
|
|
||||||
minX
|
|
||||||
maxX
|
|
||||||
yMaxDiscreteDomainFactor
|
|
||||||
yMaxContinuousDomainFactor
|
|
||||||
?discrete
|
|
||||||
?continuous
|
|
||||||
color=plotBlue
|
|
||||||
onHover
|
|
||||||
timeScale
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module IntegralChart = {
|
|
||||||
@react.component
|
|
||||||
let make = (~distPlus: DistTypes.distPlus, ~config: chartConfig, ~onHover) => {
|
|
||||||
let integral = distPlus.integralCache
|
|
||||||
let continuous = integral |> Continuous.toLinear |> E.O.fmap(Continuous.getShape)
|
|
||||||
let minX = distPlus |> DistPlus.T.Integral.yToX(0.00001)
|
|
||||||
|
|
||||||
let maxX = distPlus |> DistPlus.T.Integral.yToX(0.99999)
|
|
||||||
let timeScale = distPlus.unit |> DistTypes.DistributionUnit.toJson
|
|
||||||
<DistributionPlot
|
|
||||||
xScale={config.xLog ? "log" : "linear"}
|
|
||||||
yScale={config.yLog ? "log" : "linear"}
|
|
||||||
height={DistPlusPlotReducer.heightToPix(config.height)}
|
|
||||||
minX
|
|
||||||
maxX
|
|
||||||
?continuous
|
|
||||||
color=plotBlue
|
|
||||||
timeScale
|
|
||||||
onHover
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module Chart = {
|
|
||||||
@react.component
|
|
||||||
let make = (~distPlus: DistTypes.distPlus, ~config: chartConfig, ~onHover) => {
|
|
||||||
let chart = React.useMemo2(
|
|
||||||
() =>
|
|
||||||
config.isCumulative
|
|
||||||
? <IntegralChart distPlus config onHover />
|
|
||||||
: <DistPlusChart distPlus config onHover />,
|
|
||||||
(distPlus, config),
|
|
||||||
)
|
|
||||||
<div
|
|
||||||
style={
|
|
||||||
open CssJs
|
|
||||||
style(. [ minHeight(#px(DistPlusPlotReducer.heightToPix(config.height))) ])
|
|
||||||
}>
|
|
||||||
chart
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let button = "bg-gray-300 hover:bg-gray-500 text-grey-darkest text-xs px-4 py-1"
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = (~distPlus: DistTypes.distPlus) => {
|
|
||||||
let (x, setX) = React.useState(() => 0.)
|
|
||||||
let (state, dispatch) = React.useReducer(DistPlusPlotReducer.reducer, DistPlusPlotReducer.init)
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{state.distributions
|
|
||||||
|> E.L.fmapi((index, config) =>
|
|
||||||
<div className="flex" key={string_of_int(index)}>
|
|
||||||
<div className="w-4/5"> <Chart distPlus config onHover={r => setX(_ => r)} /> </div>
|
|
||||||
<div className="w-1/5">
|
|
||||||
<div className="opacity-50 hover:opacity-100">
|
|
||||||
<button className=button onClick={_ => dispatch(CHANGE_X_LOG(index))}>
|
|
||||||
{(config.xLog ? "x-log" : "x-linear") |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(CHANGE_Y_LOG(index))}>
|
|
||||||
{(config.yLog ? "y-log" : "y-linear") |> React.string}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className=button
|
|
||||||
onClick={_ => dispatch(CHANGE_IS_CUMULATIVE(index, !config.isCumulative))}>
|
|
||||||
{(config.isCumulative ? "cdf" : "pdf") |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(HEIGHT_INCREMENT(index))}>
|
|
||||||
{"expand" |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(HEIGHT_DECREMENT(index))}>
|
|
||||||
{"shrink" |> React.string}
|
|
||||||
</button>
|
|
||||||
{index != 0
|
|
||||||
? <button className=button onClick={_ => dispatch(REMOVE_DIST(index))}>
|
|
||||||
{"remove" |> React.string}
|
|
||||||
</button>
|
|
||||||
: React.null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|> E.L.toArray
|
|
||||||
|> React.array}
|
|
||||||
<div className="inline-flex opacity-50 hover:opacity-100">
|
|
||||||
<button className=button onClick={_ => dispatch(CHANGE_SHOW_PERCENTILES)}>
|
|
||||||
{"Percentiles" |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(CHANGE_SHOW_STATS)}>
|
|
||||||
{"Debug Stats" |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(CHANGE_SHOW_PARAMS)}>
|
|
||||||
{"Params" |> React.string}
|
|
||||||
</button>
|
|
||||||
<button className=button onClick={_ => dispatch(ADD_DIST)}>
|
|
||||||
{"Add" |> React.string}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{state.showParams ? showAsForm(distPlus) : React.null}
|
|
||||||
{state.showStats ? table(distPlus, x) : React.null}
|
|
||||||
{state.showPercentiles ? percentiles(distPlus) : React.null}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
type chartConfig = {
|
|
||||||
xLog: bool,
|
|
||||||
yLog: bool,
|
|
||||||
isCumulative: bool,
|
|
||||||
height: int,
|
|
||||||
};
|
|
||||||
|
|
||||||
type state = {
|
|
||||||
showStats: bool,
|
|
||||||
showPercentiles: bool,
|
|
||||||
showParams: bool,
|
|
||||||
distributions: list(chartConfig),
|
|
||||||
};
|
|
||||||
|
|
||||||
type action =
|
|
||||||
| CHANGE_SHOW_STATS
|
|
||||||
| CHANGE_SHOW_PARAMS
|
|
||||||
| CHANGE_SHOW_PERCENTILES
|
|
||||||
| REMOVE_DIST(int)
|
|
||||||
| ADD_DIST
|
|
||||||
| CHANGE_X_LOG(int)
|
|
||||||
| CHANGE_Y_LOG(int)
|
|
||||||
| CHANGE_IS_CUMULATIVE(int, bool)
|
|
||||||
| HEIGHT_INCREMENT(int)
|
|
||||||
| HEIGHT_DECREMENT(int);
|
|
||||||
|
|
||||||
let changeHeight = (currentHeight, foo: [ | `increment | `decrement]) =>
|
|
||||||
switch (currentHeight, foo) {
|
|
||||||
| (1, `decrement) => 1
|
|
||||||
| (2, `decrement) => 1
|
|
||||||
| (3, `decrement) => 2
|
|
||||||
| (4, `decrement) => 3
|
|
||||||
| (5, `decrement) => 4
|
|
||||||
| (1, `increment) => 2
|
|
||||||
| (2, `increment) => 3
|
|
||||||
| (3, `increment) => 4
|
|
||||||
| (4, `increment) => 5
|
|
||||||
| (5, `increment) => 5
|
|
||||||
| _ => 1
|
|
||||||
};
|
|
||||||
|
|
||||||
let heightToPix =
|
|
||||||
fun
|
|
||||||
| 1 => 80
|
|
||||||
| 2 => 140
|
|
||||||
| 3 => 240
|
|
||||||
| 4 => 340
|
|
||||||
| 5 => 440
|
|
||||||
| _ => 140;
|
|
||||||
|
|
||||||
let distributionReducer = (index, state: list(chartConfig), action) => {
|
|
||||||
switch (action, E.L.get(state, index)) {
|
|
||||||
| (HEIGHT_INCREMENT(_), Some(dist)) =>
|
|
||||||
E.L.update(
|
|
||||||
{...dist, height: changeHeight(dist.height, `increment)},
|
|
||||||
index,
|
|
||||||
state,
|
|
||||||
)
|
|
||||||
| (HEIGHT_DECREMENT(_), Some(dist)) =>
|
|
||||||
E.L.update(
|
|
||||||
{...dist, height: changeHeight(dist.height, `decrement)},
|
|
||||||
index,
|
|
||||||
state,
|
|
||||||
)
|
|
||||||
| (CHANGE_IS_CUMULATIVE(_, isCumulative), Some(dist)) =>
|
|
||||||
E.L.update({...dist, isCumulative}, index, state)
|
|
||||||
| (CHANGE_X_LOG(_), Some(dist)) =>
|
|
||||||
E.L.update({...dist, xLog: !dist.xLog}, index, state)
|
|
||||||
| (CHANGE_Y_LOG(_), Some(dist)) =>
|
|
||||||
E.L.update({...dist, yLog: !dist.yLog}, index, state)
|
|
||||||
| (REMOVE_DIST(_), Some(_)) => E.L.remove(index, 1, state)
|
|
||||||
| (ADD_DIST, Some(_)) =>
|
|
||||||
E.L.append(
|
|
||||||
state,
|
|
||||||
[{yLog: false, xLog: false, isCumulative: false, height: 4}],
|
|
||||||
)
|
|
||||||
| _ => state
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
let reducer = (state: state, action: action) =>
|
|
||||||
switch (action) {
|
|
||||||
| CHANGE_X_LOG(i)
|
|
||||||
| CHANGE_Y_LOG(i)
|
|
||||||
| CHANGE_IS_CUMULATIVE(i, _)
|
|
||||||
| HEIGHT_DECREMENT(i)
|
|
||||||
| REMOVE_DIST(i)
|
|
||||||
| HEIGHT_INCREMENT(i) => {
|
|
||||||
...state,
|
|
||||||
distributions: distributionReducer(i, state.distributions, action),
|
|
||||||
}
|
|
||||||
| ADD_DIST => {
|
|
||||||
...state,
|
|
||||||
distributions: distributionReducer(0, state.distributions, action),
|
|
||||||
}
|
|
||||||
| CHANGE_SHOW_STATS => {...state, showStats: !state.showStats}
|
|
||||||
| CHANGE_SHOW_PARAMS => {...state, showParams: !state.showParams}
|
|
||||||
| CHANGE_SHOW_PERCENTILES => {
|
|
||||||
...state,
|
|
||||||
showPercentiles: !state.showPercentiles,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let init = {
|
|
||||||
showStats: false,
|
|
||||||
showParams: false,
|
|
||||||
showPercentiles: false,
|
|
||||||
distributions: [
|
|
||||||
{yLog: false, xLog: false, isCumulative: false, height: 4},
|
|
||||||
{yLog: false, xLog: false, isCumulative: true, height: 1},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
module RawPlot = {
|
|
||||||
type primaryDistribution = option<{"xs": array<float>, "ys": array<float>}>
|
|
||||||
|
|
||||||
type discrete = option<{"xs": array<float>, "ys": array<float>}>
|
|
||||||
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
@obj external makeProps: (
|
|
||||||
~height: int=?,
|
|
||||||
~marginBottom: int=?,
|
|
||||||
~marginTop: int=?,
|
|
||||||
~maxX: float=?,
|
|
||||||
~minX: float=?,
|
|
||||||
~yMaxContinuousDomainFactor: float=?,
|
|
||||||
~yMaxDiscreteDomainFactor: float=?,
|
|
||||||
~onHover: float => (),
|
|
||||||
~continuous: option<{"xs": array<float>, "ys": array<float>}>=?,
|
|
||||||
~discrete: option<{"xs": array<float>, "ys": array<float>}>=?,
|
|
||||||
~xScale: string=?,
|
|
||||||
~yScale: string=?,
|
|
||||||
~showDistributionLines: bool=?,
|
|
||||||
~showDistributionYAxis: bool=?,
|
|
||||||
~showVerticalLine: bool=?,
|
|
||||||
~timeScale:Js.Null.t<{"unit": string, "zero": MomentRe.Moment.t}>=?,
|
|
||||||
~verticalLine: int=?,
|
|
||||||
~children: array<React.element>=?,
|
|
||||||
unit // This unit is a quirk of the type system. Apparently it must exist to have optional arguments in a type
|
|
||||||
) => props = ""
|
|
||||||
|
|
||||||
|
|
||||||
@module("./distPlotReact.js")
|
|
||||||
external make : makeType = "default"
|
|
||||||
}
|
|
||||||
|
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let textOverlay = style(. [position(#absolute)])
|
|
||||||
let mainText = style(. [ fontSize(#em(1.1))])
|
|
||||||
let secondaryText = style(. [fontSize(#em(0.9))])
|
|
||||||
|
|
||||||
let graph = chartColor =>
|
|
||||||
style(. [
|
|
||||||
position(#relative),
|
|
||||||
selector(. ".xAxis", [fontSize(#px(9))]),
|
|
||||||
selector(. ".xAxis .domain", [ display(#none) ]),
|
|
||||||
selector(. ".xAxis .tick line", [ display(#none) ]),
|
|
||||||
selector(. ".xAxis .tick text", [ color(#hex("7a8998")) ]),
|
|
||||||
selector(. ".chart .areaPath", [ SVG.fill(chartColor) ]),
|
|
||||||
selector(. ".lollipopsLine", [ SVG.stroke(#hex("bfcad4")) ]),
|
|
||||||
selector(. ".lollipopsCircle", [ SVG.stroke(#hex("bfcad4")), SVG.fill(#hex("bfcad4")) ]),
|
|
||||||
selector(. ".lollipopsXAxis .domain", [ display(#none) ]),
|
|
||||||
selector(. ".lollipopsXAxis .tick line", [ display(#none) ]),
|
|
||||||
selector(. ".lollipopsXAxis .tick text", [ display(#none) ]),
|
|
||||||
selector(.
|
|
||||||
".lollipopsTooltip",
|
|
||||||
[ position(#absolute),
|
|
||||||
textAlign(#center),
|
|
||||||
padding(px(2)),
|
|
||||||
backgroundColor(hex("bfcad4")),
|
|
||||||
borderRadius(px(3)),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
selector(.
|
|
||||||
".lollipopsCircleMouseover",
|
|
||||||
[ SVG.fill(hex("ffa500")), SVG.stroke(#hex("fff")) ],
|
|
||||||
),
|
|
||||||
selector(. ".lollipopsLineMouseover", [ SVG.stroke(#hex("ffa500")) ]),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = (
|
|
||||||
~color=#hex("111"),
|
|
||||||
~discrete=?,
|
|
||||||
~height=200,
|
|
||||||
~maxX=?,
|
|
||||||
~minX=?,
|
|
||||||
~yMaxDiscreteDomainFactor=?,
|
|
||||||
~yMaxContinuousDomainFactor=?,
|
|
||||||
~onHover: float => unit=_ => (),
|
|
||||||
~continuous=?,
|
|
||||||
~xScale=?,
|
|
||||||
~yScale=?,
|
|
||||||
~showDistributionLines=false,
|
|
||||||
~showDistributionYAxis=false,
|
|
||||||
~showVerticalLine=false,
|
|
||||||
~timeScale=?,
|
|
||||||
) =>
|
|
||||||
<div style={Styles.graph(color)}>
|
|
||||||
<RawPlot
|
|
||||||
?maxX
|
|
||||||
?minX
|
|
||||||
?yMaxDiscreteDomainFactor
|
|
||||||
?yMaxContinuousDomainFactor
|
|
||||||
?xScale
|
|
||||||
?yScale
|
|
||||||
?timeScale
|
|
||||||
discrete={discrete |> E.O.fmap(XYShape.T.toJs)}
|
|
||||||
height
|
|
||||||
marginBottom=50
|
|
||||||
marginTop=0
|
|
||||||
onHover
|
|
||||||
continuous={continuous |> E.O.fmap(XYShape.T.toJs)}
|
|
||||||
showDistributionLines
|
|
||||||
showDistributionYAxis
|
|
||||||
showVerticalLine
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import * as _ from "lodash";
|
|
||||||
import { createClassFromSpec } from "react-vega";
|
|
||||||
import spec from "./spec-percentiles";
|
|
||||||
|
|
||||||
const PercentilesChart = createClassFromSpec({
|
|
||||||
spec,
|
|
||||||
style: "width: 100%",
|
|
||||||
});
|
|
||||||
|
|
||||||
export { PercentilesChart };
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
@module("./PercentilesChart.js")
|
|
||||||
external percentilesChart: React.element = "PercentilesChart"
|
|
||||||
|
|
||||||
module Internal = {
|
|
||||||
type props
|
|
||||||
type makeType = props => React.element
|
|
||||||
type dataType = { "facet": array<
|
|
||||||
{
|
|
||||||
"p1": float,
|
|
||||||
"p10": float,
|
|
||||||
"p20": float,
|
|
||||||
"p30": float,
|
|
||||||
"p40": float,
|
|
||||||
"p5": float,
|
|
||||||
"p50": float,
|
|
||||||
"p60": float,
|
|
||||||
"p70": float,
|
|
||||||
"p80": float,
|
|
||||||
"p90": float,
|
|
||||||
"p95": float,
|
|
||||||
"p99": float,
|
|
||||||
"x": float,
|
|
||||||
}>}
|
|
||||||
@obj external makeProps: (~data: dataType, ~signalListeners: list<string>,~children:React.element, unit) => props = ""
|
|
||||||
|
|
||||||
@module("./PercentilesChart.js")
|
|
||||||
external make : makeType = "PercentilesChart"
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
@module("./PercentilesChart.js")
|
|
||||||
let make = (~dists: array<(float, DistTypes.distPlus)>, ~children=React.null) => {
|
|
||||||
let data = dists |> E.A.fmap(((x, r)) =>
|
|
||||||
{
|
|
||||||
"x": x,
|
|
||||||
"p1": r |> DistPlus.T.Integral.yToX(0.01),
|
|
||||||
"p5": r |> DistPlus.T.Integral.yToX(0.05),
|
|
||||||
"p10": r |> DistPlus.T.Integral.yToX(0.1),
|
|
||||||
"p20": r |> DistPlus.T.Integral.yToX(0.2),
|
|
||||||
"p30": r |> DistPlus.T.Integral.yToX(0.3),
|
|
||||||
"p40": r |> DistPlus.T.Integral.yToX(0.4),
|
|
||||||
"p50": r |> DistPlus.T.Integral.yToX(0.5),
|
|
||||||
"p60": r |> DistPlus.T.Integral.yToX(0.6),
|
|
||||||
"p70": r |> DistPlus.T.Integral.yToX(0.7),
|
|
||||||
"p80": r |> DistPlus.T.Integral.yToX(0.8),
|
|
||||||
"p90": r |> DistPlus.T.Integral.yToX(0.9),
|
|
||||||
"p95": r |> DistPlus.T.Integral.yToX(0.95),
|
|
||||||
"p99": r |> DistPlus.T.Integral.yToX(0.99),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
Js.log3("Data", dists, data)
|
|
||||||
let da = {"facet": data}
|
|
||||||
<Internal data=da signalListeners=list{}>children</Internal>
|
|
||||||
}
|
|
||||||
|
|
@ -1,658 +0,0 @@
|
||||||
const _ = require('lodash');
|
|
||||||
const d3 = require('d3');
|
|
||||||
const moment = require('moment');
|
|
||||||
require('./styles.css');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param arr
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
function exists(arr) {
|
|
||||||
return arr.find(num => _.isFinite(num));
|
|
||||||
}
|
|
||||||
|
|
||||||
export class DistPlotD3 {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.attrs = {
|
|
||||||
svgWidth: 400,
|
|
||||||
svgHeight: 400,
|
|
||||||
marginTop: 5,
|
|
||||||
marginBottom: 5,
|
|
||||||
marginRight: 50,
|
|
||||||
marginLeft: 5,
|
|
||||||
|
|
||||||
container: null,
|
|
||||||
|
|
||||||
// X
|
|
||||||
minX: null,
|
|
||||||
maxX: null,
|
|
||||||
xScaleType: 'linear',
|
|
||||||
xScaleTimeOptions: null,
|
|
||||||
xScaleLogBase: 10,
|
|
||||||
|
|
||||||
// Y
|
|
||||||
minY: null,
|
|
||||||
maxY: null,
|
|
||||||
yScaleType: 'linear',
|
|
||||||
yScaleTimeOptions: null,
|
|
||||||
yScaleLogBase: 10,
|
|
||||||
|
|
||||||
xMinContinuousDomainFactor: 1,
|
|
||||||
xMaxContinuousDomainFactor: 1,
|
|
||||||
yMaxContinuousDomainFactor: 1,
|
|
||||||
yMaxDiscreteDomainFactor: 1,
|
|
||||||
|
|
||||||
showDistributionYAxis: false,
|
|
||||||
showDistributionLines: true,
|
|
||||||
|
|
||||||
areaColors: ['#E1E5EC', '#E1E5EC'],
|
|
||||||
verticalLine: 110,
|
|
||||||
showVerticalLine: true,
|
|
||||||
data: {
|
|
||||||
continuous: null,
|
|
||||||
discrete: null,
|
|
||||||
},
|
|
||||||
onHover: (e) => {
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
this.calc = {
|
|
||||||
chartLeftMargin: null,
|
|
||||||
chartTopMargin: null,
|
|
||||||
chartWidth: null,
|
|
||||||
chartHeight: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.chart = null;
|
|
||||||
this.svg = null;
|
|
||||||
this._container = null;
|
|
||||||
|
|
||||||
this.formatDates = this.formatDates.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} name
|
|
||||||
* @param value
|
|
||||||
* @returns {DistPlotD3}
|
|
||||||
*/
|
|
||||||
set(name, value) {
|
|
||||||
_.set(this.attrs, [name], value);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param data
|
|
||||||
* @returns {DistPlotD3}
|
|
||||||
*/
|
|
||||||
data(data) {
|
|
||||||
const continuousXs = _.get(data, 'continuous.xs', []);
|
|
||||||
const continuousYs = _.get(data, 'continuous.ys', []);
|
|
||||||
const discreteXs = _.get(data, 'discrete.xs', []);
|
|
||||||
const discreteYs = _.get(data, 'discrete.ys', []);
|
|
||||||
this.attrs.data = data;
|
|
||||||
this.attrs.data.continuous = {
|
|
||||||
xs: continuousXs,
|
|
||||||
ys: continuousYs,
|
|
||||||
};
|
|
||||||
this.attrs.data.discrete = {
|
|
||||||
xs: discreteXs,
|
|
||||||
ys: discreteYs,
|
|
||||||
};
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
this._container = d3.select(this.attrs.container);
|
|
||||||
if (this._container.node() === null) {
|
|
||||||
throw new Error('Container for D3 is not defined.');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!['log', 'linear'].includes(this.attrs.xScaleType)) {
|
|
||||||
throw new Error('X-scale type should be either "log" or "linear".');
|
|
||||||
}
|
|
||||||
if (!['log', 'linear'].includes(this.attrs.yScaleType)) {
|
|
||||||
throw new Error('Y-scale type should be either "log" or "linear".');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log Scale.
|
|
||||||
if (this.attrs.xScaleType === 'log') {
|
|
||||||
this.logFilter('continuous', (x, y) => x > 0);
|
|
||||||
this.logFilter('discrete', (x, y) => x > 0);
|
|
||||||
}
|
|
||||||
if (this.attrs.yScaleType === 'log') {
|
|
||||||
this.logFilter('continuous', (x, y) => y > 0);
|
|
||||||
this.logFilter('discrete', (x, y) => y > 0);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
this.attrs.xScaleType === 'log'
|
|
||||||
&& this.attrs.minX !== null
|
|
||||||
&& this.attrs.minX < 0
|
|
||||||
) {
|
|
||||||
console.warn('minX should be positive.');
|
|
||||||
this.attrs.minX = undefined;
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
this.attrs.yScaleType === 'log'
|
|
||||||
&& this.attrs.minY !== null
|
|
||||||
&& this.attrs.minY < 0
|
|
||||||
) {
|
|
||||||
console.warn('minY should be positive.');
|
|
||||||
this.attrs.minY = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fields.
|
|
||||||
const fields = [
|
|
||||||
'marginLeft', 'marginRight',
|
|
||||||
'marginTop', 'marginBottom',
|
|
||||||
'svgWidth', 'svgHeight',
|
|
||||||
'yMaxContinuousDomainFactor',
|
|
||||||
'yMaxDiscreteDomainFactor',
|
|
||||||
'xScaleLogBase', 'yScaleLogBase',
|
|
||||||
];
|
|
||||||
for (const field of fields) {
|
|
||||||
if (!_.isNumber(this.attrs[field])) {
|
|
||||||
throw new Error(`${field} should be a number.`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sets the width from the DOM element.
|
|
||||||
const containerRect = this._container.node().getBoundingClientRect();
|
|
||||||
if (containerRect.width > 0) {
|
|
||||||
this.attrs.svgWidth = containerRect.width;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculated properties.
|
|
||||||
this.calc.chartLeftMargin = this.attrs.marginLeft;
|
|
||||||
this.calc.chartTopMargin = this.attrs.marginTop;
|
|
||||||
this.calc.chartWidth = this.attrs.svgWidth
|
|
||||||
- this.attrs.marginRight
|
|
||||||
- this.attrs.marginLeft;
|
|
||||||
this.calc.chartHeight = this.attrs.svgHeight
|
|
||||||
- this.attrs.marginBottom
|
|
||||||
- this.attrs.marginTop;
|
|
||||||
|
|
||||||
// Add svg.
|
|
||||||
this.svg = this._container
|
|
||||||
.createObject({ tag: 'svg', selector: 'svg-chart-container' })
|
|
||||||
.attr('width', '100%')
|
|
||||||
.attr('height', this.attrs.svgHeight)
|
|
||||||
.attr('pointer-events', 'none');
|
|
||||||
|
|
||||||
// Add container 'g' (empty) element.
|
|
||||||
this.chart = this.svg
|
|
||||||
.createObject({ tag: 'g', selector: 'chart' })
|
|
||||||
.attr(
|
|
||||||
'transform',
|
|
||||||
`translate(${this.calc.chartLeftMargin}, ${this.calc.chartTopMargin})`,
|
|
||||||
);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const common = this.getCommonThings();
|
|
||||||
if (this.hasDate('continuous')) {
|
|
||||||
this.addDistributionChart(common);
|
|
||||||
}
|
|
||||||
if (this.hasDate('discrete')) {
|
|
||||||
this.addLollipopsChart(common);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this._container.selectAll("*").remove();
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
getCommonThings() {
|
|
||||||
// Boundaries.
|
|
||||||
const xMin = exists([
|
|
||||||
this.attrs.minX,
|
|
||||||
d3.min(this.attrs.data.continuous.xs),
|
|
||||||
d3.min(this.attrs.data.discrete.xs),
|
|
||||||
]);
|
|
||||||
const xMax = exists([
|
|
||||||
this.attrs.maxX,
|
|
||||||
d3.max(this.attrs.data.continuous.xs),
|
|
||||||
d3.max(this.attrs.data.discrete.xs),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const yMin = exists([
|
|
||||||
this.attrs.minY,
|
|
||||||
d3.min(this.attrs.data.continuous.ys),
|
|
||||||
d3.min(this.attrs.data.discrete.ys),
|
|
||||||
]);
|
|
||||||
const yMax = exists([
|
|
||||||
this.attrs.maxY,
|
|
||||||
d3.max(this.attrs.data.continuous.ys),
|
|
||||||
d3.max(this.attrs.data.discrete.ys),
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Errors.
|
|
||||||
if (!_.isFinite(xMin)) throw new Error('xMin is undefined');
|
|
||||||
if (!_.isFinite(xMax)) throw new Error('xMax is undefined');
|
|
||||||
if (!_.isFinite(yMin)) throw new Error('yMin is undefined');
|
|
||||||
if (!_.isFinite(yMax)) throw new Error('yMax is undefined');
|
|
||||||
|
|
||||||
// X-domains.
|
|
||||||
const xMinDomainFactor = _.get(this.attrs, 'xMinContinuousDomainFactor', 1);
|
|
||||||
const xMaxDomainFactor = _.get(this.attrs, 'xMaxContinuousDomainFactor', 1);
|
|
||||||
const yMinDomainFactor = _.get(this.attrs, 'yMinContinuousDomainFactor', 1);
|
|
||||||
const yMaxDomainFactor = _.get(this.attrs, 'yMaxContinuousDomainFactor', 1);
|
|
||||||
|
|
||||||
const xMinDomain = xMin * xMinDomainFactor;
|
|
||||||
const xMaxDomain = xMax * xMaxDomainFactor;
|
|
||||||
const yMinDomain = yMin * yMinDomainFactor;
|
|
||||||
const yMaxDomain = yMax * yMaxDomainFactor;
|
|
||||||
|
|
||||||
// X-scale.
|
|
||||||
const xScale = this.attrs.xScaleType === 'linear'
|
|
||||||
? d3.scaleLinear()
|
|
||||||
.domain([xMinDomain, xMaxDomain])
|
|
||||||
.range([0, this.calc.chartWidth])
|
|
||||||
: d3.scaleLog()
|
|
||||||
.base(this.attrs.xScaleLogBase)
|
|
||||||
.domain([xMinDomain, xMaxDomain])
|
|
||||||
.range([0, this.calc.chartWidth]);
|
|
||||||
|
|
||||||
// Y-scale.
|
|
||||||
const yScale = this.attrs.yScaleType === 'linear'
|
|
||||||
? d3.scaleLinear()
|
|
||||||
.domain([yMinDomain, yMaxDomain])
|
|
||||||
.range([this.calc.chartHeight, 0])
|
|
||||||
: d3.scaleLog()
|
|
||||||
.base(this.attrs.yScaleLogBase)
|
|
||||||
.domain([yMinDomain, yMaxDomain])
|
|
||||||
.range([this.calc.chartHeight, 0]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
xMin, xMax,
|
|
||||||
xScale, yScale,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param common
|
|
||||||
*/
|
|
||||||
addDistributionChart(common) {
|
|
||||||
const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
|
|
||||||
const dataPoints = [this.getDataPoints('continuous')];
|
|
||||||
|
|
||||||
const { xMin, xMax, xScale, yScale } = common;
|
|
||||||
|
|
||||||
// X-axis.
|
|
||||||
let xAxis = null;
|
|
||||||
if (!!this.attrs.xScaleTimeOptions) {
|
|
||||||
// Calculates the projection on X-axis.
|
|
||||||
const zero = _.get(this.attrs, 'xScaleTimeOptions.zero', moment());
|
|
||||||
const unit = _.get(this.attrs, 'xScaleTimeOptions.unit', 'years');
|
|
||||||
const diff = Math.abs(xMax - xMin);
|
|
||||||
const left = zero.clone().add(xMin, unit);
|
|
||||||
const right = left.clone().add(diff, unit);
|
|
||||||
|
|
||||||
// X-time-scale.
|
|
||||||
const xScaleTime = d3.scaleTime()
|
|
||||||
.domain([left.toDate(), right.toDate()])
|
|
||||||
.nice()
|
|
||||||
.range([0, this.calc.chartWidth]);
|
|
||||||
|
|
||||||
xAxis = d3.axisBottom()
|
|
||||||
.scale(xScaleTime)
|
|
||||||
.ticks(this.getTimeTicksByStr(unit))
|
|
||||||
.tickFormat(this.formatDates);
|
|
||||||
} else {
|
|
||||||
xAxis = d3.axisBottom(xScale)
|
|
||||||
.ticks(3)
|
|
||||||
.tickFormat(d => {
|
|
||||||
if (Math.abs(d) < 1) {
|
|
||||||
return d3.format('.2')(d);
|
|
||||||
} else if (xMin > 1000 && xMax < 3000) {
|
|
||||||
// Condition which identifies years; 2019, 2020, 2021.
|
|
||||||
return d3.format('.0')(d);
|
|
||||||
} else {
|
|
||||||
const prefix = d3.formatPrefix('.0', d);
|
|
||||||
return prefix(d).replace('G', 'B');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Y-axis.
|
|
||||||
const yAxis = d3.axisRight(yScale);
|
|
||||||
|
|
||||||
// Add axis.
|
|
||||||
this.chart
|
|
||||||
.createObject({ tag: 'g', selector: 'x-axis' })
|
|
||||||
.attr('transform', `translate(0, ${this.calc.chartHeight})`)
|
|
||||||
.call(xAxis);
|
|
||||||
|
|
||||||
if (this.attrs.showDistributionYAxis) {
|
|
||||||
this.chart
|
|
||||||
.createObject({ tag: 'g', selector: 'y-axis' })
|
|
||||||
.call(yAxis);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw area.
|
|
||||||
const area = d3.area()
|
|
||||||
.x(d => xScale(d.x))
|
|
||||||
.y1(d => yScale(d.y))
|
|
||||||
.y0(this.calc.chartHeight);
|
|
||||||
|
|
||||||
this.chart
|
|
||||||
.createObjectsWithData({
|
|
||||||
tag: 'path',
|
|
||||||
selector: 'area-path',
|
|
||||||
data: dataPoints,
|
|
||||||
})
|
|
||||||
.attr('d', area)
|
|
||||||
.attr('fill', (d, i) => areaColorRange(i))
|
|
||||||
.attr('opacity', (d, i) => i === 0 ? 0.7 : 0.5);
|
|
||||||
|
|
||||||
// Draw line.
|
|
||||||
if (this.attrs.showDistributionLines) {
|
|
||||||
const line = d3.line()
|
|
||||||
.x(d => xScale(d.x))
|
|
||||||
.y(d => yScale(d.y));
|
|
||||||
|
|
||||||
this.chart
|
|
||||||
.createObjectsWithData({
|
|
||||||
tag: 'path',
|
|
||||||
selector: 'line-path',
|
|
||||||
data: dataPoints,
|
|
||||||
})
|
|
||||||
.attr('d', line)
|
|
||||||
.attr('id', (d, i) => 'line-' + (i + 1))
|
|
||||||
.attr('opacity', (d, i) => i === 0 ? 0.7 : 1)
|
|
||||||
.attr('fill', 'none');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.attrs.showVerticalLine) {
|
|
||||||
this.chart
|
|
||||||
.createObject({ tag: 'line', selector: 'v-line' })
|
|
||||||
.attr('x1', xScale(this.attrs.verticalLine))
|
|
||||||
.attr('x2', xScale(this.attrs.verticalLine))
|
|
||||||
.attr('y1', 0)
|
|
||||||
.attr('y2', this.calc.chartHeight)
|
|
||||||
.attr('stroke-width', 1.5)
|
|
||||||
.attr('stroke-dasharray', '6 6')
|
|
||||||
.attr('stroke', 'steelblue');
|
|
||||||
}
|
|
||||||
|
|
||||||
const hoverLine = this.chart
|
|
||||||
.createObject({ tag: 'line', selector: 'hover-line' })
|
|
||||||
.attr('x1', 0)
|
|
||||||
.attr('x2', 0)
|
|
||||||
.attr('y1', 0)
|
|
||||||
.attr('y2', this.calc.chartHeight)
|
|
||||||
.attr('opacity', 0)
|
|
||||||
.attr('stroke-width', 1.5)
|
|
||||||
.attr('stroke-dasharray', '6 6')
|
|
||||||
.attr('stroke', '#22313F');
|
|
||||||
|
|
||||||
// Add drawing rectangle.
|
|
||||||
{
|
|
||||||
const context = this;
|
|
||||||
|
|
||||||
function mouseover() {
|
|
||||||
const mouse = d3.mouse(this);
|
|
||||||
hoverLine
|
|
||||||
.attr('opacity', 1)
|
|
||||||
.attr('x1', mouse[0])
|
|
||||||
.attr('x2', mouse[0]);
|
|
||||||
const xValue = xScale.invert(mouse[0]);
|
|
||||||
context.attrs.onHover(xValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseout() {
|
|
||||||
hoverLine.attr('opacity', 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.chart
|
|
||||||
.createObject({ tag: 'rect', selector: 'mouse-rect' })
|
|
||||||
.attr('width', this.calc.chartWidth)
|
|
||||||
.attr('height', this.calc.chartHeight)
|
|
||||||
.attr('fill', 'transparent')
|
|
||||||
.attr('pointer-events', 'all')
|
|
||||||
.on('mouseover', mouseover)
|
|
||||||
.on('mousemove', mouseover)
|
|
||||||
.on('mouseout', mouseout);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} common
|
|
||||||
* @param {object} common.xScale
|
|
||||||
* @param {object} common.yScale
|
|
||||||
*/
|
|
||||||
addLollipopsChart(common) {
|
|
||||||
const data = this.getDataPoints('discrete');
|
|
||||||
|
|
||||||
const yMin = 0.;
|
|
||||||
const yMax = d3.max(this.attrs.data.discrete.ys);
|
|
||||||
|
|
||||||
// X axis.
|
|
||||||
this.chart.append('g')
|
|
||||||
.attr('class', 'lollipops-x-axis')
|
|
||||||
.attr('transform', `translate(0, ${this.calc.chartHeight})`)
|
|
||||||
.call(d3.axisBottom(common.xScale));
|
|
||||||
|
|
||||||
// Y-domain.
|
|
||||||
const yMinDomainFactor = _.get(this.attrs, 'yMinDiscreteDomainFactor', 1);
|
|
||||||
const yMaxDomainFactor = _.get(this.attrs, 'yMaxDiscreteDomainFactor', 1);
|
|
||||||
const yMinDomain = yMin * yMinDomainFactor;
|
|
||||||
const yMaxDomain = yMax * yMaxDomainFactor;
|
|
||||||
|
|
||||||
// Y-scale.
|
|
||||||
const yScale = this.attrs.yScaleType === 'linear'
|
|
||||||
? d3.scaleLinear()
|
|
||||||
.domain([yMinDomain, yMaxDomain])
|
|
||||||
.range([this.calc.chartHeight, 0])
|
|
||||||
: d3.scaleLog()
|
|
||||||
.base(this.attrs.yScaleLogBase)
|
|
||||||
.domain([yMinDomain, yMaxDomain])
|
|
||||||
.range([this.calc.chartHeight, 0]);
|
|
||||||
|
|
||||||
//
|
|
||||||
const yTicks = Math.floor(this.calc.chartHeight / 20);
|
|
||||||
const yAxis = d3.axisLeft(yScale).ticks(yTicks);
|
|
||||||
|
|
||||||
// Adds 'g' for an y-axis.
|
|
||||||
this.chart.append('g')
|
|
||||||
.attr('class', 'lollipops-y-axis')
|
|
||||||
.attr('transform', `translate(${this.calc.chartWidth}, 0)`)
|
|
||||||
.call(yAxis);
|
|
||||||
|
|
||||||
const thi$ = this;
|
|
||||||
|
|
||||||
function showTooltip(d) {
|
|
||||||
thi$.chart.select('.lollipops-line-' + d.id)
|
|
||||||
.classed('lollipops-line-mouseover', true);
|
|
||||||
thi$.chart.select('.lollipops-circle-' + d.id)
|
|
||||||
.classed('lollipops-circle-mouseover', true)
|
|
||||||
.attr('r', 6);
|
|
||||||
tooltip.transition()
|
|
||||||
.style('opacity', .9);
|
|
||||||
tooltip.html(`x: ${d.x}, y: ${(d.y * 100).toFixed(1)}%`)
|
|
||||||
.style('left', (common.xScale(d.x) + 60) + 'px')
|
|
||||||
.style('top', yScale(d.y) + 'px');
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideTooltip(d) {
|
|
||||||
thi$.chart.select('.lollipops-line-' + d.id)
|
|
||||||
.classed('lollipops-line-mouseover', false);
|
|
||||||
thi$.chart.select('.lollipops-circle-' + d.id)
|
|
||||||
.classed('lollipops-circle-mouseover', false)
|
|
||||||
.attr('r', 4);
|
|
||||||
tooltip.transition()
|
|
||||||
.style('opacity', 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lines.
|
|
||||||
this.chart.selectAll('lollipops-line')
|
|
||||||
.data(data)
|
|
||||||
.enter()
|
|
||||||
.append('line')
|
|
||||||
.attr('class', 'lollipops-line')
|
|
||||||
.attr('class', d => 'lollipops-line lollipops-line-' + d.id)
|
|
||||||
.attr('x1', d => common.xScale(d.x))
|
|
||||||
.attr('x2', d => common.xScale(d.x))
|
|
||||||
.attr('y1', d => yScale(d.y))
|
|
||||||
.attr('y2', yScale(yMin));
|
|
||||||
|
|
||||||
// Define the div for the tooltip
|
|
||||||
const tooltip = this._container.append('div')
|
|
||||||
.attr('class', 'lollipop-tooltip')
|
|
||||||
.style('opacity', 0);
|
|
||||||
|
|
||||||
// Circles.
|
|
||||||
this.chart.selectAll('lollipops-circle')
|
|
||||||
.data(data)
|
|
||||||
.enter()
|
|
||||||
.append('circle')
|
|
||||||
.attr('class', d => 'lollipops-circle lollipops-circle-' + d.id)
|
|
||||||
.attr('cx', d => common.xScale(d.x))
|
|
||||||
.attr('cy', d => yScale(d.y))
|
|
||||||
.attr('r', '4');
|
|
||||||
|
|
||||||
// Rectangles.
|
|
||||||
this.chart.selectAll('lollipops-rectangle')
|
|
||||||
.data(data)
|
|
||||||
.enter()
|
|
||||||
.append('rect')
|
|
||||||
.attr('width', 30)
|
|
||||||
.attr('height', d => this.calc.chartHeight - yScale(d.y) + 10)
|
|
||||||
.attr('x', d => common.xScale(d.x) - 15)
|
|
||||||
.attr('y', d => yScale(d.y) - 10)
|
|
||||||
.attr('opacity', 0)
|
|
||||||
.attr('pointer-events', 'all')
|
|
||||||
.on('mouseover', showTooltip)
|
|
||||||
.on('mouseout', hideTooltip)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param ts
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
formatDates(ts) {
|
|
||||||
return moment(ts).format('MMMM Do YYYY');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} unit
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
getTimeTicksByStr(unit) {
|
|
||||||
switch (unit) {
|
|
||||||
case 'months':
|
|
||||||
return d3.timeMonth.every(4);
|
|
||||||
case 'quarters':
|
|
||||||
// It is temporary solution, but it works
|
|
||||||
// if the difference between edge dates is not
|
|
||||||
// much more than 10 units.
|
|
||||||
return d3.timeMonth.every(12);
|
|
||||||
case 'hours':
|
|
||||||
return d3.timeHour.every(10);
|
|
||||||
case 'days':
|
|
||||||
return d3.timeDay.every(7);
|
|
||||||
case 'seconds':
|
|
||||||
return d3.timeSecond.every(10);
|
|
||||||
case 'years':
|
|
||||||
return d3.timeYear.every(10);
|
|
||||||
case 'minutes':
|
|
||||||
return d3.timeMinute.every(10);
|
|
||||||
case 'weeks':
|
|
||||||
return d3.timeWeek.every(10);
|
|
||||||
case 'milliseconds':
|
|
||||||
return d3.timeMillisecond.every(10);
|
|
||||||
default:
|
|
||||||
return d3.timeYear.every(10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} key
|
|
||||||
* @returns {{x: number[], y: number[]}}
|
|
||||||
*/
|
|
||||||
getDataPoints(key) {
|
|
||||||
const dt = [];
|
|
||||||
const emptyShape = { xs: [], ys: [] };
|
|
||||||
const data = _.get(this.attrs.data, key, emptyShape);
|
|
||||||
const len = data.xs.length;
|
|
||||||
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
const x = data.xs[i];
|
|
||||||
const y = data.ys[i];
|
|
||||||
const id = i;
|
|
||||||
dt.push({ x, y, id });
|
|
||||||
}
|
|
||||||
|
|
||||||
return dt;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} key
|
|
||||||
* @param {function} pred
|
|
||||||
* @returns {{x: number[], y: number[]}}
|
|
||||||
*/
|
|
||||||
logFilter(key, pred) {
|
|
||||||
const xs = [];
|
|
||||||
const ys = [];
|
|
||||||
const emptyShape = { xs: [], ys: [] };
|
|
||||||
const data = _.get(this.attrs.data, key, emptyShape);
|
|
||||||
|
|
||||||
for (let i = 0, len = data.xs.length; i < len; i++) {
|
|
||||||
const x = data.xs[i];
|
|
||||||
const y = data.ys[i];
|
|
||||||
if (pred(x, y)) {
|
|
||||||
xs.push(x);
|
|
||||||
ys.push(y);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_.set(this.attrs.data, [key, 'xs'], xs);
|
|
||||||
_.set(this.attrs.data, [key, 'ys'], ys);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} key
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
hasDate(key) {
|
|
||||||
const xs = _.get(this.attrs, ['data', key, 'xs']);
|
|
||||||
return !!_.size(xs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @docs: https://github.com/d3/d3-selection
|
|
||||||
* @param {object} params
|
|
||||||
* @param {string} params.selector
|
|
||||||
* @param {string} params.tag
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
d3.selection.prototype.createObject = function createObject(params) {
|
|
||||||
const selector = params.selector;
|
|
||||||
const tag = params.tag;
|
|
||||||
return this.insert(tag).attr('class', selector);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @docs: https://github.com/d3/d3-selection
|
|
||||||
* @param {object} params
|
|
||||||
* @param {string} params.selector
|
|
||||||
* @param {string} params.tag
|
|
||||||
* @param {*[]} params.data
|
|
||||||
* @returns {*}
|
|
||||||
*/
|
|
||||||
d3.selection.prototype.createObjectsWithData = function createObjectsWithData(params) {
|
|
||||||
const selector = params.selector;
|
|
||||||
const tag = params.tag;
|
|
||||||
const data = params.data;
|
|
||||||
|
|
||||||
return this.selectAll('.' + selector)
|
|
||||||
.data(data)
|
|
||||||
.enter()
|
|
||||||
.insert(tag)
|
|
||||||
.attr('class', selector);
|
|
||||||
};
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
import React, { useEffect } from 'react';
|
|
||||||
import { useSize } from 'react-use';
|
|
||||||
import { DistPlotD3 } from './distPlotD3';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param min
|
|
||||||
* @param max
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
function getRandomInt(min, max) {
|
|
||||||
min = Math.ceil(min);
|
|
||||||
max = Math.floor(max);
|
|
||||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param props
|
|
||||||
* @returns {*}
|
|
||||||
* @constructor
|
|
||||||
*/
|
|
||||||
function DistPlotReact(props) {
|
|
||||||
const containerRef = React.createRef();
|
|
||||||
const key = "cdf-chart-react-" + getRandomInt(0, 1000);
|
|
||||||
const style = !!props.width ? { width: props.width + "px" } : {};
|
|
||||||
|
|
||||||
const [sized, { width }] = useSize(() => {
|
|
||||||
return React.createElement("div", {
|
|
||||||
key: "resizable-div",
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
width: props.width,
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
try {
|
|
||||||
new DistPlotD3()
|
|
||||||
.set('svgWidth', width)
|
|
||||||
.set('svgHeight', props.height)
|
|
||||||
.set('maxX', props.maxX)
|
|
||||||
.set('minX', props.minX)
|
|
||||||
.set('onHover', props.onHover)
|
|
||||||
.set('marginBottom', props.marginBottom || 15)
|
|
||||||
.set('marginLeft', 30)
|
|
||||||
.set('marginRight', 30)
|
|
||||||
.set('marginTop', 5)
|
|
||||||
.set('showDistributionLines', props.showDistributionLines)
|
|
||||||
.set('showDistributionYAxis', props.showDistributionYAxis)
|
|
||||||
.set('verticalLine', props.verticalLine || 110)
|
|
||||||
.set('showVerticalLine', props.showVerticalLine)
|
|
||||||
.set('container', containerRef.current)
|
|
||||||
.set('xScaleType', props.xScale || 'linear')
|
|
||||||
.set('yScaleType', props.yScale || 'linear')
|
|
||||||
.set('xScaleTimeOptions', props.timeScale)
|
|
||||||
.set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1)
|
|
||||||
.set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1)
|
|
||||||
.data({
|
|
||||||
continuous: props.continuous,
|
|
||||||
discrete: props.discrete,
|
|
||||||
})
|
|
||||||
.render();
|
|
||||||
} catch (e) {
|
|
||||||
console.error("distPlotD3 Error: ", e)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return React.createElement("div", {
|
|
||||||
style: {
|
|
||||||
paddingLeft: "10px",
|
|
||||||
paddingRight: "10px",
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
sized,
|
|
||||||
React.createElement("div", {
|
|
||||||
key,
|
|
||||||
style,
|
|
||||||
ref: containerRef,
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DistPlotReact;
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://vega.github.io/schema/vega/v5.json",
|
|
||||||
"width": 500,
|
|
||||||
"height": 400,
|
|
||||||
"padding": 5,
|
|
||||||
"data": [
|
|
||||||
{
|
|
||||||
"name": "facet",
|
|
||||||
"values": [],
|
|
||||||
"format": { "type": "json", "parse": { "timestamp": "date" } }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "table",
|
|
||||||
"source": "facet",
|
|
||||||
"transform": [
|
|
||||||
{
|
|
||||||
"type": "aggregate",
|
|
||||||
"groupby": ["x"],
|
|
||||||
"ops": [
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean",
|
|
||||||
"mean"
|
|
||||||
],
|
|
||||||
"fields": [
|
|
||||||
"p1",
|
|
||||||
"p5",
|
|
||||||
"p10",
|
|
||||||
"p20",
|
|
||||||
"p30",
|
|
||||||
"p40",
|
|
||||||
"p50",
|
|
||||||
"p60",
|
|
||||||
"p70",
|
|
||||||
"p80",
|
|
||||||
"p90",
|
|
||||||
"p95",
|
|
||||||
"p99"
|
|
||||||
],
|
|
||||||
"as": [
|
|
||||||
"p1",
|
|
||||||
"p5",
|
|
||||||
"p10",
|
|
||||||
"p20",
|
|
||||||
"p30",
|
|
||||||
"p40",
|
|
||||||
"p50",
|
|
||||||
"p60",
|
|
||||||
"p70",
|
|
||||||
"p80",
|
|
||||||
"p90",
|
|
||||||
"p95",
|
|
||||||
"p99"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"scales": [
|
|
||||||
{
|
|
||||||
"name": "xscale",
|
|
||||||
"type": "linear",
|
|
||||||
"nice": true,
|
|
||||||
"domain": { "data": "facet", "field": "x" },
|
|
||||||
"range": "width"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "yscale",
|
|
||||||
"type": "linear",
|
|
||||||
"range": "height",
|
|
||||||
"nice": true,
|
|
||||||
"zero": true,
|
|
||||||
"domain": { "data": "facet", "field": "p99" }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"axes": [
|
|
||||||
{
|
|
||||||
"orient": "bottom",
|
|
||||||
"scale": "xscale",
|
|
||||||
"grid": false,
|
|
||||||
"tickSize": 2,
|
|
||||||
"encode": {
|
|
||||||
"grid": { "enter": { "stroke": { "value": "#ccc" } } },
|
|
||||||
"ticks": { "enter": { "stroke": { "value": "#ccc" } } }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"orient": "left",
|
|
||||||
"scale": "yscale",
|
|
||||||
"grid": false,
|
|
||||||
"domain": false,
|
|
||||||
"tickSize": 2,
|
|
||||||
"encode": {
|
|
||||||
"grid": { "enter": { "stroke": { "value": "#ccc" } } },
|
|
||||||
"ticks": { "enter": { "stroke": { "value": "#ccc" } } }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"marks": [
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p1" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p99" },
|
|
||||||
"opacity": { "value": 0.05 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p5" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p95" },
|
|
||||||
"opacity": { "value": 0.1 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p10" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p90" },
|
|
||||||
"opacity": { "value": 0.15 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p20" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p80" },
|
|
||||||
"opacity": { "value": 0.2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p30" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p70" },
|
|
||||||
"opacity": { "value": 0.2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "area",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"enter": { "fill": { "value": "#4C78A8" } },
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p40" },
|
|
||||||
"y2": { "scale": "yscale", "field": "p60" },
|
|
||||||
"opacity": { "value": 0.2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "line",
|
|
||||||
"from": { "data": "table" },
|
|
||||||
"encode": {
|
|
||||||
"update": {
|
|
||||||
"interpolate": { "value": "monotone" },
|
|
||||||
"stroke": { "value": "#4C78A8" },
|
|
||||||
"strokeWidth": { "value": 2 },
|
|
||||||
"opacity": { "value": 0.8 },
|
|
||||||
"x": { "scale": "xscale", "field": "x" },
|
|
||||||
"y": { "scale": "yscale", "field": "p50" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
.lollipops-line-mouseover {
|
|
||||||
stroke-dasharray: 4;
|
|
||||||
animation: dash 2s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dash {
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: 1000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
module JS = {
|
|
||||||
@deriving(abstract)
|
|
||||||
type numberPresentation = {
|
|
||||||
value: string,
|
|
||||||
power: option<float>,
|
|
||||||
symbol: option<string>,
|
|
||||||
}
|
|
||||||
|
|
||||||
@module("./numberShower.js")
|
|
||||||
external numberShow: (float, int) => numberPresentation = "numberShow"
|
|
||||||
}
|
|
||||||
|
|
||||||
let sup = {
|
|
||||||
open CssJs
|
|
||||||
style(. [ fontSize(#em(0.6)), verticalAlign(#super) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = (~number, ~precision) => {
|
|
||||||
let numberWithPresentation = JS.numberShow(number, precision)
|
|
||||||
<span>
|
|
||||||
{JS.valueGet(numberWithPresentation) |> React.string}
|
|
||||||
{JS.symbolGet(numberWithPresentation) |> E.O.React.fmapOrNull(React.string)}
|
|
||||||
{JS.powerGet(numberWithPresentation) |> E.O.React.fmapOrNull(e =>
|
|
||||||
<span>
|
|
||||||
{j`\\u00b710` |> React.string}
|
|
||||||
<span style=sup> {e |> E.Float.toString |> React.string} </span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
// 105 -> 3
|
|
||||||
const orderOfMagnitudeNum = (n) => {
|
|
||||||
return Math.pow(10, n);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 105 -> 3
|
|
||||||
const orderOfMagnitude = (n) => {
|
|
||||||
return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
|
|
||||||
};
|
|
||||||
|
|
||||||
function withXSigFigs(number, sigFigs) {
|
|
||||||
const withPrecision = number.toPrecision(sigFigs);
|
|
||||||
const formatted = Number(withPrecision);
|
|
||||||
return `${formatted}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
class NumberShower {
|
|
||||||
constructor(number, precision = 2) {
|
|
||||||
this.number = number;
|
|
||||||
this.precision = precision;
|
|
||||||
}
|
|
||||||
|
|
||||||
convert() {
|
|
||||||
const number = Math.abs(this.number);
|
|
||||||
const response = this.evaluate(number);
|
|
||||||
if (this.number < 0) {
|
|
||||||
response.value = '-' + response.value;
|
|
||||||
}
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
metricSystem(number, order) {
|
|
||||||
const newNumber = number / orderOfMagnitudeNum(order);
|
|
||||||
const precision = this.precision;
|
|
||||||
return `${withXSigFigs(newNumber, precision)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
evaluate(number) {
|
|
||||||
if (number === 0) {
|
|
||||||
return { value: this.metricSystem(0, 0) }
|
|
||||||
}
|
|
||||||
|
|
||||||
const order = orderOfMagnitude(number);
|
|
||||||
if (order < -2) {
|
|
||||||
return { value: this.metricSystem(number, order), power: order };
|
|
||||||
} else if (order < 4) {
|
|
||||||
return { value: this.metricSystem(number, 0) };
|
|
||||||
} else if (order < 6) {
|
|
||||||
return { value: this.metricSystem(number, 3), symbol: 'K' };
|
|
||||||
} else if (order < 9) {
|
|
||||||
return { value: this.metricSystem(number, 6), symbol: 'M' };
|
|
||||||
} else if (order < 12) {
|
|
||||||
return { value: this.metricSystem(number, 9), symbol: 'B' };
|
|
||||||
} else if (order < 15) {
|
|
||||||
return { value: this.metricSystem(number, 12), symbol: 'T' };
|
|
||||||
} else {
|
|
||||||
return { value: this.metricSystem(number, order), power: order };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function numberShow(number, precision = 2) {
|
|
||||||
const ns = new NumberShower(number, precision);
|
|
||||||
return ns.convert();
|
|
||||||
}
|
|
||||||
|
|
@ -85,11 +85,6 @@ module O = {
|
||||||
|
|
||||||
let min = compare(\"<")
|
let min = compare(\"<")
|
||||||
let max = compare(\">")
|
let max = compare(\">")
|
||||||
module React = {
|
|
||||||
let defaultNull = default(React.null)
|
|
||||||
let fmapOrNull = fn => \"||>"(fmap(fn), default(React.null))
|
|
||||||
let flatten = default(React.null)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Functions */
|
/* Functions */
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Squiggle Language</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
|
||||||
<link href="./styles/index.css" rel="stylesheet">
|
|
||||||
<script src="./Index.bs.js" defer></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app" style="height: 100%"></div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let h3 = style(. [ fontSize(#em(1.5)), marginBottom(#em(1.5)) ])
|
|
||||||
let card = style(. [ marginTop(#em(2.)), marginBottom(#em(2.)) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
module Table = {
|
|
||||||
module TableStyles = {
|
|
||||||
open CssJs
|
|
||||||
let row = style(. [ display(#flex), height(#em(4.)) ])
|
|
||||||
let col = (~f=1.0, ()) => style(. [ flex(#num(f)) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => <> </>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => <div> <div style=Styles.card> <Table /> </div> </div>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
|
|
||||||
@tailwind components;
|
|
||||||
|
|
||||||
@tailwind utilities;
|
|
||||||
67342
src/styles/tailwind.css
67342
src/styles/tailwind.css
File diff suppressed because it is too large
Load Diff
694
tailwind.js
694
tailwind.js
|
|
@ -1,694 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
prefix: '',
|
|
||||||
important: false,
|
|
||||||
separator: ':',
|
|
||||||
theme: {
|
|
||||||
screens: {
|
|
||||||
sm: '640px',
|
|
||||||
md: '768px',
|
|
||||||
lg: '1024px',
|
|
||||||
xl: '1280px',
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
transparent: 'transparent',
|
|
||||||
|
|
||||||
black: '#000',
|
|
||||||
white: '#fff',
|
|
||||||
|
|
||||||
gray: {
|
|
||||||
100: '#f7fafc',
|
|
||||||
200: '#edf2f7',
|
|
||||||
300: '#e2e8f0',
|
|
||||||
400: '#cbd5e0',
|
|
||||||
500: '#a0aec0',
|
|
||||||
600: '#718096',
|
|
||||||
700: '#4a5568',
|
|
||||||
800: '#2d3748',
|
|
||||||
900: '#1a202c',
|
|
||||||
},
|
|
||||||
red: {
|
|
||||||
100: '#fff5f5',
|
|
||||||
200: '#fed7d7',
|
|
||||||
300: '#feb2b2',
|
|
||||||
400: '#fc8181',
|
|
||||||
500: '#f56565',
|
|
||||||
600: '#e53e3e',
|
|
||||||
700: '#c53030',
|
|
||||||
800: '#9b2c2c',
|
|
||||||
900: '#742a2a',
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
100: '#fffaf0',
|
|
||||||
200: '#feebc8',
|
|
||||||
300: '#fbd38d',
|
|
||||||
400: '#f6ad55',
|
|
||||||
500: '#ed8936',
|
|
||||||
600: '#dd6b20',
|
|
||||||
700: '#c05621',
|
|
||||||
800: '#9c4221',
|
|
||||||
900: '#7b341e',
|
|
||||||
},
|
|
||||||
yellow: {
|
|
||||||
100: '#fffff0',
|
|
||||||
200: '#fefcbf',
|
|
||||||
300: '#faf089',
|
|
||||||
400: '#f6e05e',
|
|
||||||
500: '#ecc94b',
|
|
||||||
600: '#d69e2e',
|
|
||||||
700: '#b7791f',
|
|
||||||
800: '#975a16',
|
|
||||||
900: '#744210',
|
|
||||||
},
|
|
||||||
green: {
|
|
||||||
100: '#f0fff4',
|
|
||||||
200: '#c6f6d5',
|
|
||||||
300: '#9ae6b4',
|
|
||||||
400: '#68d391',
|
|
||||||
500: '#48bb78',
|
|
||||||
600: '#38a169',
|
|
||||||
700: '#2f855a',
|
|
||||||
800: '#276749',
|
|
||||||
900: '#22543d',
|
|
||||||
},
|
|
||||||
teal: {
|
|
||||||
100: '#e6fffa',
|
|
||||||
200: '#b2f5ea',
|
|
||||||
300: '#81e6d9',
|
|
||||||
400: '#4fd1c5',
|
|
||||||
500: '#38b2ac',
|
|
||||||
600: '#319795',
|
|
||||||
700: '#2c7a7b',
|
|
||||||
800: '#285e61',
|
|
||||||
900: '#234e52',
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
100: '#ebf8ff',
|
|
||||||
200: '#bee3f8',
|
|
||||||
300: '#90cdf4',
|
|
||||||
400: '#63b3ed',
|
|
||||||
500: '#4299e1',
|
|
||||||
600: '#3182ce',
|
|
||||||
700: '#2b6cb0',
|
|
||||||
800: '#2c5282',
|
|
||||||
900: '#2a4365',
|
|
||||||
},
|
|
||||||
indigo: {
|
|
||||||
100: '#ebf4ff',
|
|
||||||
200: '#c3dafe',
|
|
||||||
300: '#a3bffa',
|
|
||||||
400: '#7f9cf5',
|
|
||||||
500: '#667eea',
|
|
||||||
600: '#5a67d8',
|
|
||||||
700: '#4c51bf',
|
|
||||||
800: '#434190',
|
|
||||||
900: '#3c366b',
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
100: '#faf5ff',
|
|
||||||
200: '#e9d8fd',
|
|
||||||
300: '#d6bcfa',
|
|
||||||
400: '#b794f4',
|
|
||||||
500: '#9f7aea',
|
|
||||||
600: '#805ad5',
|
|
||||||
700: '#6b46c1',
|
|
||||||
800: '#553c9a',
|
|
||||||
900: '#44337a',
|
|
||||||
},
|
|
||||||
pink: {
|
|
||||||
100: '#fff5f7',
|
|
||||||
200: '#fed7e2',
|
|
||||||
300: '#fbb6ce',
|
|
||||||
400: '#f687b3',
|
|
||||||
500: '#ed64a6',
|
|
||||||
600: '#d53f8c',
|
|
||||||
700: '#b83280',
|
|
||||||
800: '#97266d',
|
|
||||||
900: '#702459',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
spacing: {
|
|
||||||
px: '1px',
|
|
||||||
'0': '0',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'5': '1.25rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
'12': '3rem',
|
|
||||||
'16': '4rem',
|
|
||||||
'20': '5rem',
|
|
||||||
'24': '6rem',
|
|
||||||
'32': '8rem',
|
|
||||||
'40': '10rem',
|
|
||||||
'48': '12rem',
|
|
||||||
'56': '14rem',
|
|
||||||
'64': '16rem',
|
|
||||||
},
|
|
||||||
backgroundColor: theme => theme('colors'),
|
|
||||||
backgroundPosition: {
|
|
||||||
bottom: 'bottom',
|
|
||||||
center: 'center',
|
|
||||||
left: 'left',
|
|
||||||
'left-bottom': 'left bottom',
|
|
||||||
'left-top': 'left top',
|
|
||||||
right: 'right',
|
|
||||||
'right-bottom': 'right bottom',
|
|
||||||
'right-top': 'right top',
|
|
||||||
top: 'top',
|
|
||||||
},
|
|
||||||
backgroundSize: {
|
|
||||||
auto: 'auto',
|
|
||||||
cover: 'cover',
|
|
||||||
contain: 'contain',
|
|
||||||
},
|
|
||||||
borderColor: theme => ({
|
|
||||||
...theme('colors'),
|
|
||||||
default: theme('colors.gray.300', 'currentColor'),
|
|
||||||
}),
|
|
||||||
borderRadius: {
|
|
||||||
none: '0',
|
|
||||||
sm: '0.125rem',
|
|
||||||
default: '0.25rem',
|
|
||||||
md: '0.375rem',
|
|
||||||
lg: '0.5rem',
|
|
||||||
full: '9999px',
|
|
||||||
},
|
|
||||||
borderWidth: {
|
|
||||||
default: '1px',
|
|
||||||
'0': '0',
|
|
||||||
'2': '2px',
|
|
||||||
'4': '4px',
|
|
||||||
'8': '8px',
|
|
||||||
},
|
|
||||||
boxShadow: {
|
|
||||||
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
|
|
||||||
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
||||||
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
||||||
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
||||||
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
||||||
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
||||||
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
||||||
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
||||||
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
|
|
||||||
none: 'none',
|
|
||||||
},
|
|
||||||
container: {},
|
|
||||||
cursor: {
|
|
||||||
auto: 'auto',
|
|
||||||
default: 'default',
|
|
||||||
pointer: 'pointer',
|
|
||||||
wait: 'wait',
|
|
||||||
text: 'text',
|
|
||||||
move: 'move',
|
|
||||||
'not-allowed': 'not-allowed',
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
current: 'currentColor',
|
|
||||||
},
|
|
||||||
flex: {
|
|
||||||
'1': '1 1 0%',
|
|
||||||
auto: '1 1 auto',
|
|
||||||
initial: '0 1 auto',
|
|
||||||
none: 'none',
|
|
||||||
},
|
|
||||||
flexGrow: {
|
|
||||||
'0': '0',
|
|
||||||
default: '1',
|
|
||||||
},
|
|
||||||
flexShrink: {
|
|
||||||
'0': '0',
|
|
||||||
default: '1',
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: [
|
|
||||||
'system-ui',
|
|
||||||
'-apple-system',
|
|
||||||
'BlinkMacSystemFont',
|
|
||||||
'"Segoe UI"',
|
|
||||||
'Roboto',
|
|
||||||
'"Helvetica Neue"',
|
|
||||||
'Arial',
|
|
||||||
'"Noto Sans"',
|
|
||||||
'sans-serif',
|
|
||||||
'"Apple Color Emoji"',
|
|
||||||
'"Segoe UI Emoji"',
|
|
||||||
'"Segoe UI Symbol"',
|
|
||||||
'"Noto Color Emoji"',
|
|
||||||
],
|
|
||||||
serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
|
|
||||||
mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
xs: '0.75rem',
|
|
||||||
sm: '0.875rem',
|
|
||||||
base: '1rem',
|
|
||||||
lg: '1.125rem',
|
|
||||||
xl: '1.25rem',
|
|
||||||
'2xl': '1.5rem',
|
|
||||||
'3xl': '1.875rem',
|
|
||||||
'4xl': '2.25rem',
|
|
||||||
'5xl': '3rem',
|
|
||||||
'6xl': '4rem',
|
|
||||||
},
|
|
||||||
fontWeight: {
|
|
||||||
hairline: '100',
|
|
||||||
thin: '200',
|
|
||||||
light: '300',
|
|
||||||
normal: '400',
|
|
||||||
medium: '500',
|
|
||||||
semibold: '600',
|
|
||||||
bold: '700',
|
|
||||||
extrabold: '800',
|
|
||||||
black: '900',
|
|
||||||
},
|
|
||||||
height: theme => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
}),
|
|
||||||
inset: {
|
|
||||||
'0': '0',
|
|
||||||
auto: 'auto',
|
|
||||||
},
|
|
||||||
letterSpacing: {
|
|
||||||
tighter: '-0.05em',
|
|
||||||
tight: '-0.025em',
|
|
||||||
normal: '0',
|
|
||||||
wide: '0.025em',
|
|
||||||
wider: '0.05em',
|
|
||||||
widest: '0.1em',
|
|
||||||
},
|
|
||||||
lineHeight: {
|
|
||||||
none: '1',
|
|
||||||
tight: '1.25',
|
|
||||||
snug: '1.375',
|
|
||||||
normal: '1.5',
|
|
||||||
relaxed: '1.625',
|
|
||||||
loose: '2',
|
|
||||||
'3': '.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'5': '1.25rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'7': '1.75rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'9': '2.25rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
},
|
|
||||||
listStyleType: {
|
|
||||||
none: 'none',
|
|
||||||
disc: 'disc',
|
|
||||||
decimal: 'decimal',
|
|
||||||
},
|
|
||||||
margin: (theme, { negative }) => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
...negative(theme('spacing')),
|
|
||||||
}),
|
|
||||||
maxHeight: {
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
},
|
|
||||||
maxWidth: (theme, { breakpoints }) => ({
|
|
||||||
none: 'none',
|
|
||||||
xs: '20rem',
|
|
||||||
sm: '24rem',
|
|
||||||
md: '28rem',
|
|
||||||
lg: '32rem',
|
|
||||||
xl: '36rem',
|
|
||||||
'2xl': '42rem',
|
|
||||||
'3xl': '48rem',
|
|
||||||
'4xl': '56rem',
|
|
||||||
'5xl': '64rem',
|
|
||||||
'6xl': '72rem',
|
|
||||||
full: '100%',
|
|
||||||
...breakpoints(theme('screens')),
|
|
||||||
}),
|
|
||||||
minHeight: {
|
|
||||||
'0': '0',
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
'0': '0',
|
|
||||||
full: '100%',
|
|
||||||
},
|
|
||||||
objectPosition: {
|
|
||||||
bottom: 'bottom',
|
|
||||||
center: 'center',
|
|
||||||
left: 'left',
|
|
||||||
'left-bottom': 'left bottom',
|
|
||||||
'left-top': 'left top',
|
|
||||||
right: 'right',
|
|
||||||
'right-bottom': 'right bottom',
|
|
||||||
'right-top': 'right top',
|
|
||||||
top: 'top',
|
|
||||||
},
|
|
||||||
opacity: {
|
|
||||||
'0': '0',
|
|
||||||
'25': '0.25',
|
|
||||||
'50': '0.5',
|
|
||||||
'75': '0.75',
|
|
||||||
'100': '1',
|
|
||||||
},
|
|
||||||
order: {
|
|
||||||
first: '-9999',
|
|
||||||
last: '9999',
|
|
||||||
none: '0',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
'8': '8',
|
|
||||||
'9': '9',
|
|
||||||
'10': '10',
|
|
||||||
'11': '11',
|
|
||||||
'12': '12',
|
|
||||||
},
|
|
||||||
padding: theme => theme('spacing'),
|
|
||||||
placeholderColor: theme => theme('colors'),
|
|
||||||
stroke: {
|
|
||||||
current: 'currentColor',
|
|
||||||
},
|
|
||||||
strokeWidth: {
|
|
||||||
'0': '0',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
},
|
|
||||||
textColor: theme => theme('colors'),
|
|
||||||
width: theme => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
'1/2': '50%',
|
|
||||||
'1/3': '33.333333%',
|
|
||||||
'2/3': '66.666667%',
|
|
||||||
'1/4': '25%',
|
|
||||||
'2/4': '50%',
|
|
||||||
'3/4': '75%',
|
|
||||||
'1/5': '20%',
|
|
||||||
'2/5': '40%',
|
|
||||||
'3/5': '60%',
|
|
||||||
'4/5': '80%',
|
|
||||||
'1/6': '16.666667%',
|
|
||||||
'2/6': '33.333333%',
|
|
||||||
'3/6': '50%',
|
|
||||||
'4/6': '66.666667%',
|
|
||||||
'5/6': '83.333333%',
|
|
||||||
'1/12': '8.333333%',
|
|
||||||
'2/12': '16.666667%',
|
|
||||||
'3/12': '25%',
|
|
||||||
'4/12': '33.333333%',
|
|
||||||
'5/12': '41.666667%',
|
|
||||||
'6/12': '50%',
|
|
||||||
'7/12': '58.333333%',
|
|
||||||
'8/12': '66.666667%',
|
|
||||||
'9/12': '75%',
|
|
||||||
'10/12': '83.333333%',
|
|
||||||
'11/12': '91.666667%',
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vw',
|
|
||||||
}),
|
|
||||||
zIndex: {
|
|
||||||
auto: 'auto',
|
|
||||||
'0': '0',
|
|
||||||
'10': '10',
|
|
||||||
'20': '20',
|
|
||||||
'30': '30',
|
|
||||||
'40': '40',
|
|
||||||
'50': '50',
|
|
||||||
},
|
|
||||||
gap: theme => theme('spacing'),
|
|
||||||
gridTemplateColumns: {
|
|
||||||
none: 'none',
|
|
||||||
'1': 'repeat(1, minmax(0, 1fr))',
|
|
||||||
'2': 'repeat(2, minmax(0, 1fr))',
|
|
||||||
'3': 'repeat(3, minmax(0, 1fr))',
|
|
||||||
'4': 'repeat(4, minmax(0, 1fr))',
|
|
||||||
'5': 'repeat(5, minmax(0, 1fr))',
|
|
||||||
'6': 'repeat(6, minmax(0, 1fr))',
|
|
||||||
'7': 'repeat(7, minmax(0, 1fr))',
|
|
||||||
'8': 'repeat(8, minmax(0, 1fr))',
|
|
||||||
'9': 'repeat(9, minmax(0, 1fr))',
|
|
||||||
'10': 'repeat(10, minmax(0, 1fr))',
|
|
||||||
'11': 'repeat(11, minmax(0, 1fr))',
|
|
||||||
'12': 'repeat(12, minmax(0, 1fr))',
|
|
||||||
},
|
|
||||||
gridColumn: {
|
|
||||||
auto: 'auto',
|
|
||||||
'span-1': 'span 1 / span 1',
|
|
||||||
'span-2': 'span 2 / span 2',
|
|
||||||
'span-3': 'span 3 / span 3',
|
|
||||||
'span-4': 'span 4 / span 4',
|
|
||||||
'span-5': 'span 5 / span 5',
|
|
||||||
'span-6': 'span 6 / span 6',
|
|
||||||
'span-7': 'span 7 / span 7',
|
|
||||||
'span-8': 'span 8 / span 8',
|
|
||||||
'span-9': 'span 9 / span 9',
|
|
||||||
'span-10': 'span 10 / span 10',
|
|
||||||
'span-11': 'span 11 / span 11',
|
|
||||||
'span-12': 'span 12 / span 12',
|
|
||||||
},
|
|
||||||
gridColumnStart: {
|
|
||||||
auto: 'auto',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
'8': '8',
|
|
||||||
'9': '9',
|
|
||||||
'10': '10',
|
|
||||||
'11': '11',
|
|
||||||
'12': '12',
|
|
||||||
'13': '13',
|
|
||||||
},
|
|
||||||
gridColumnEnd: {
|
|
||||||
auto: 'auto',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
'8': '8',
|
|
||||||
'9': '9',
|
|
||||||
'10': '10',
|
|
||||||
'11': '11',
|
|
||||||
'12': '12',
|
|
||||||
'13': '13',
|
|
||||||
},
|
|
||||||
gridTemplateRows: {
|
|
||||||
none: 'none',
|
|
||||||
'1': 'repeat(1, minmax(0, 1fr))',
|
|
||||||
'2': 'repeat(2, minmax(0, 1fr))',
|
|
||||||
'3': 'repeat(3, minmax(0, 1fr))',
|
|
||||||
'4': 'repeat(4, minmax(0, 1fr))',
|
|
||||||
'5': 'repeat(5, minmax(0, 1fr))',
|
|
||||||
'6': 'repeat(6, minmax(0, 1fr))',
|
|
||||||
},
|
|
||||||
gridRow: {
|
|
||||||
auto: 'auto',
|
|
||||||
'span-1': 'span 1 / span 1',
|
|
||||||
'span-2': 'span 2 / span 2',
|
|
||||||
'span-3': 'span 3 / span 3',
|
|
||||||
'span-4': 'span 4 / span 4',
|
|
||||||
'span-5': 'span 5 / span 5',
|
|
||||||
'span-6': 'span 6 / span 6',
|
|
||||||
},
|
|
||||||
gridRowStart: {
|
|
||||||
auto: 'auto',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
},
|
|
||||||
gridRowEnd: {
|
|
||||||
auto: 'auto',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
},
|
|
||||||
transformOrigin: {
|
|
||||||
center: 'center',
|
|
||||||
top: 'top',
|
|
||||||
'top-right': 'top right',
|
|
||||||
right: 'right',
|
|
||||||
'bottom-right': 'bottom right',
|
|
||||||
bottom: 'bottom',
|
|
||||||
'bottom-left': 'bottom left',
|
|
||||||
left: 'left',
|
|
||||||
'top-left': 'top left',
|
|
||||||
},
|
|
||||||
scale: {
|
|
||||||
'0': '0',
|
|
||||||
'50': '.5',
|
|
||||||
'75': '.75',
|
|
||||||
'90': '.9',
|
|
||||||
'95': '.95',
|
|
||||||
'100': '1',
|
|
||||||
'105': '1.05',
|
|
||||||
'110': '1.1',
|
|
||||||
'125': '1.25',
|
|
||||||
'150': '1.5',
|
|
||||||
},
|
|
||||||
rotate: {
|
|
||||||
'-180': '-180deg',
|
|
||||||
'-90': '-90deg',
|
|
||||||
'-45': '-45deg',
|
|
||||||
'0': '0',
|
|
||||||
'45': '45deg',
|
|
||||||
'90': '90deg',
|
|
||||||
'180': '180deg',
|
|
||||||
},
|
|
||||||
translate: (theme, { negative }) => ({
|
|
||||||
...theme('spacing'),
|
|
||||||
...negative(theme('spacing')),
|
|
||||||
'-full': '-100%',
|
|
||||||
'-1/2': '-50%',
|
|
||||||
'1/2': '50%',
|
|
||||||
full: '100%',
|
|
||||||
}),
|
|
||||||
skew: {
|
|
||||||
'-12': '-12deg',
|
|
||||||
'-6': '-6deg',
|
|
||||||
'-3': '-3deg',
|
|
||||||
'0': '0',
|
|
||||||
'3': '3deg',
|
|
||||||
'6': '6deg',
|
|
||||||
'12': '12deg',
|
|
||||||
},
|
|
||||||
transitionProperty: {
|
|
||||||
none: 'none',
|
|
||||||
all: 'all',
|
|
||||||
default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
|
|
||||||
colors: 'background-color, border-color, color, fill, stroke',
|
|
||||||
opacity: 'opacity',
|
|
||||||
shadow: 'box-shadow',
|
|
||||||
transform: 'transform',
|
|
||||||
},
|
|
||||||
transitionTimingFunction: {
|
|
||||||
linear: 'linear',
|
|
||||||
in: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
||||||
out: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
||||||
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
||||||
},
|
|
||||||
transitionDuration: {
|
|
||||||
'75': '75ms',
|
|
||||||
'100': '100ms',
|
|
||||||
'150': '150ms',
|
|
||||||
'200': '200ms',
|
|
||||||
'300': '300ms',
|
|
||||||
'500': '500ms',
|
|
||||||
'700': '700ms',
|
|
||||||
'1000': '1000ms',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
variants: {
|
|
||||||
accessibility: ['responsive', 'focus'],
|
|
||||||
alignContent: ['responsive'],
|
|
||||||
alignItems: ['responsive'],
|
|
||||||
alignSelf: ['responsive'],
|
|
||||||
appearance: ['responsive'],
|
|
||||||
backgroundAttachment: ['responsive'],
|
|
||||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
||||||
backgroundPosition: ['responsive'],
|
|
||||||
backgroundRepeat: ['responsive'],
|
|
||||||
backgroundSize: ['responsive'],
|
|
||||||
borderCollapse: ['responsive'],
|
|
||||||
borderColor: ['responsive', 'hover', 'focus'],
|
|
||||||
borderRadius: ['responsive'],
|
|
||||||
borderStyle: ['responsive'],
|
|
||||||
borderWidth: ['responsive'],
|
|
||||||
boxShadow: ['responsive', 'hover', 'focus'],
|
|
||||||
boxSizing: ['responsive'],
|
|
||||||
cursor: ['responsive'],
|
|
||||||
display: ['responsive'],
|
|
||||||
fill: ['responsive'],
|
|
||||||
flex: ['responsive'],
|
|
||||||
flexDirection: ['responsive'],
|
|
||||||
flexGrow: ['responsive'],
|
|
||||||
flexShrink: ['responsive'],
|
|
||||||
flexWrap: ['responsive'],
|
|
||||||
float: ['responsive'],
|
|
||||||
clear: ['responsive'],
|
|
||||||
fontFamily: ['responsive'],
|
|
||||||
fontSize: ['responsive'],
|
|
||||||
fontSmoothing: ['responsive'],
|
|
||||||
fontStyle: ['responsive'],
|
|
||||||
fontWeight: ['responsive', 'hover', 'focus'],
|
|
||||||
height: ['responsive'],
|
|
||||||
inset: ['responsive'],
|
|
||||||
justifyContent: ['responsive'],
|
|
||||||
letterSpacing: ['responsive'],
|
|
||||||
lineHeight: ['responsive'],
|
|
||||||
listStylePosition: ['responsive'],
|
|
||||||
listStyleType: ['responsive'],
|
|
||||||
margin: ['responsive'],
|
|
||||||
maxHeight: ['responsive'],
|
|
||||||
maxWidth: ['responsive'],
|
|
||||||
minHeight: ['responsive'],
|
|
||||||
minWidth: ['responsive'],
|
|
||||||
objectFit: ['responsive'],
|
|
||||||
objectPosition: ['responsive'],
|
|
||||||
opacity: ['responsive', 'hover', 'focus'],
|
|
||||||
order: ['responsive'],
|
|
||||||
outline: ['responsive', 'focus'],
|
|
||||||
overflow: ['responsive'],
|
|
||||||
padding: ['responsive'],
|
|
||||||
placeholderColor: ['responsive', 'focus'],
|
|
||||||
pointerEvents: ['responsive'],
|
|
||||||
position: ['responsive'],
|
|
||||||
resize: ['responsive'],
|
|
||||||
stroke: ['responsive'],
|
|
||||||
strokeWidth: ['responsive'],
|
|
||||||
tableLayout: ['responsive'],
|
|
||||||
textAlign: ['responsive'],
|
|
||||||
textColor: ['responsive', 'hover', 'focus'],
|
|
||||||
textDecoration: ['responsive', 'hover', 'focus'],
|
|
||||||
textTransform: ['responsive'],
|
|
||||||
userSelect: ['responsive'],
|
|
||||||
verticalAlign: ['responsive'],
|
|
||||||
visibility: ['responsive'],
|
|
||||||
whitespace: ['responsive'],
|
|
||||||
width: ['responsive'],
|
|
||||||
wordBreak: ['responsive'],
|
|
||||||
zIndex: ['responsive'],
|
|
||||||
gap: ['responsive'],
|
|
||||||
gridAutoFlow: ['responsive'],
|
|
||||||
gridTemplateColumns: ['responsive'],
|
|
||||||
gridColumn: ['responsive'],
|
|
||||||
gridColumnStart: ['responsive'],
|
|
||||||
gridColumnEnd: ['responsive'],
|
|
||||||
gridTemplateRows: ['responsive'],
|
|
||||||
gridRow: ['responsive'],
|
|
||||||
gridRowStart: ['responsive'],
|
|
||||||
gridRowEnd: ['responsive'],
|
|
||||||
transform: ['responsive'],
|
|
||||||
transformOrigin: ['responsive'],
|
|
||||||
scale: ['responsive', 'hover', 'focus'],
|
|
||||||
rotate: ['responsive', 'hover', 'focus'],
|
|
||||||
translate: ['responsive', 'hover', 'focus'],
|
|
||||||
skew: ['responsive', 'hover', 'focus'],
|
|
||||||
transitionProperty: ['responsive'],
|
|
||||||
transitionTimingFunction: ['responsive'],
|
|
||||||
transitionDuration: ['responsive'],
|
|
||||||
},
|
|
||||||
corePlugins: {},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
48
test.res
48
test.res
|
|
@ -1,48 +0,0 @@
|
||||||
@react.component
|
|
||||||
let make = (
|
|
||||||
~disabled: bool=?,
|
|
||||||
~ghost: bool=?,
|
|
||||||
~href: string=?,
|
|
||||||
~htmlType: @string [#button | #submit | #submit]=?,
|
|
||||||
~icon: 'a=?,
|
|
||||||
~shape: @string [#circle | #round]=?,
|
|
||||||
~size: @string [#small | #large]=?,
|
|
||||||
~target: string=?,
|
|
||||||
~loading: bool=?,
|
|
||||||
~_type: @string
|
|
||||||
[
|
|
||||||
| #primary
|
|
||||||
| #default
|
|
||||||
| #dashed
|
|
||||||
| #danger
|
|
||||||
| #link
|
|
||||||
| #ghost
|
|
||||||
]=?,
|
|
||||||
~onClick: ReactEvent.Mouse.t => unit=?,
|
|
||||||
~block: bool=?,
|
|
||||||
~children: React.element=?,
|
|
||||||
~className: string=?,
|
|
||||||
~id: string=?,
|
|
||||||
~testId: string=?,
|
|
||||||
) =>
|
|
||||||
ReasonReact.cloneElement(
|
|
||||||
<AntButton
|
|
||||||
_type
|
|
||||||
disabled
|
|
||||||
ghost
|
|
||||||
href
|
|
||||||
htmlType
|
|
||||||
icon={Antd_Utils.tts(Antd_Icon.iconToJsSafe(~icon, ()))}
|
|
||||||
shape
|
|
||||||
size
|
|
||||||
target
|
|
||||||
onClick
|
|
||||||
block
|
|
||||||
loading
|
|
||||||
className
|
|
||||||
id>
|
|
||||||
children
|
|
||||||
</AntButton>,
|
|
||||||
~props={"data-testid": testId},
|
|
||||||
[],
|
|
||||||
)
|
|
||||||
Loading…
Reference in New Issue
Block a user