squiggle/src/components/charts/CdfChart__Plain.re

57 lines
1.6 KiB
ReasonML
Raw Normal View History

module Styles = {
open Css;
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),
2020-02-20 09:21:58 +00:00
selector(".x-axis", [fontSize(`px(9))]),
selector(".x-axis .domain", [display(`none)]),
selector(".x-axis .tick line", [display(`none)]),
selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
selector(".chart .area-path", [SVG.fill(chartColor)]),
2020-02-20 09:21:58 +00:00
selector(".lollipops-line", [SVG.stroke(`hex("bfcad4"))]),
selector(
".lollipops-circle",
[SVG.stroke(`hex("bfcad4")), SVG.fill(`hex("bfcad4"))],
),
selector(".lollipops-x-axis .domain", [display(`none)]),
selector(".lollipops-x-axis .tick line", [display(`none)]),
selector(".lollipops-x-axis .tick text", [display(`none)]),
]);
};
[@react.component]
let make =
(
2020-02-19 07:36:11 +00:00
~color=`hex("111"),
2020-02-20 09:53:56 +00:00
~primaryDistribution=?,
~discrete=?,
~height=200,
2020-02-19 07:36:11 +00:00
~maxX=?,
~minX=?,
~onHover: float => unit,
2020-02-19 07:36:11 +00:00
~scale=?,
~timeScale=?,
) => {
<div className={Styles.graph(color)}>
<CdfChart__Base
?maxX
2020-02-19 07:36:11 +00:00
?minX
2020-02-18 12:11:22 +00:00
?scale
2020-02-19 07:36:11 +00:00
?timeScale
height
marginBottom=50
marginTop=0
onHover
2020-02-20 09:53:56 +00:00
primaryDistribution={
primaryDistribution |> E.O.fmap(pd => pd |> Shape.XYShape.toJs)
}
discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
2020-02-19 07:36:11 +00:00
showDistributionLines=false
showVerticalLine=false
/>
</div>;
};