quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simple d3 fixes

Browse Source
This commit is contained in:
Ozzie Gooen 2020-03-03 15:49:05 +00:00
parent 5a11ebfb03
commit 4735b9703c
3 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/charts/DistPlusPlot.re
View File

@ -158,6 +158,7 @@ module DistPlusChart = {
distPlus |> Distributions.DistPlus.T.toDiscreteProbabilityMass; distPlus |> Distributions.DistPlus.T.toDiscreteProbabilityMass;
let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) = let (yMaxDiscreteDomainFactor, yMaxContinuousDomainFactor) =
adjustBoth(toDiscreteProbabilityMass); adjustBoth(toDiscreteProbabilityMass);
<div className=Css.(style([minHeight(`px(state.height))]))>
<DistributionPlot <DistributionPlot
scale={state.log ? "log" : "linear"} scale={state.log ? "log" : "linear"}
minX minX
@ -170,7 +171,8 @@ module DistPlusChart = {
color={`hex("5f6b7e")} color={`hex("5f6b7e")}
onHover onHover
timeScale timeScale
/>; />
</div>;
}; };
}; };
@ -216,7 +218,7 @@ let make = (~distPlus: DistTypes.distPlus) => {
| CHANGE_HEIGHT(height) => {...state, height} | CHANGE_HEIGHT(height) => {...state, height}
| CHANGE_SHOW_STATS => {...state, showStats: !state.showStats} | CHANGE_SHOW_STATS => {...state, showStats: !state.showStats}
}, },
{log: true, height: 120, showStats: false}, {log: false, height: 80, showStats: false},
); );
let chart = let chart =
React.useMemo2( React.useMemo2(
@ -238,7 +240,12 @@ let make = (~distPlus: DistTypes.distPlus) => {
<div onClick={_ => dispatch(CHANGE_HEIGHT(state.height + 40))}> <div onClick={_ => dispatch(CHANGE_HEIGHT(state.height + 40))}>
{"HightPlus" |> ReasonReact.string} {"HightPlus" |> ReasonReact.string}
</div> </div>
<div onClick={_ => dispatch(CHANGE_HEIGHT(state.height - 40))}> <div
onClick={_ =>
dispatch(
CHANGE_HEIGHT(state.height < 81 ? state.height : state.height - 40),
)
}>
{"HightMinus" |> ReasonReact.string} {"HightMinus" |> ReasonReact.string}
</div> </div>
chart chart

2
src/components/charts/DistributionPlot/distPlotD3.js
View File

@ -407,7 +407,7 @@ export class CdfChartD3 {
.attr('r', 6); .attr('r', 6);
tooltip.transition() tooltip.transition()
.style('opacity', .9); .style('opacity', .9);
tooltip.html(`X: ${d.x}, Y: ${d.y}`) tooltip.html(`x: ${d.x}, y: ${(d.y * 100).toFixed(1)}%`)
.style('left', (common.xScale(d.x) + 60) + 'px') .style('left', (common.xScale(d.x) + 60) + 'px')
.style('top', yScale(d.y) + 'px'); .style('top', yScale(d.y) + 'px');
} }

5
src/components/charts/DistributionPlot/distPlotReact.js
View File

@ -34,6 +34,7 @@ function CdfChartReact(props) {
}); });
useEffect(() => { useEffect(() => {
try {
new CdfChartD3() new CdfChartD3()
.set('svgWidth', width) .set('svgWidth', width)
.set('svgHeight', props.height) .set('svgHeight', props.height)
@ -58,6 +59,10 @@ function CdfChartReact(props) {
discrete: props.discrete, discrete: props.discrete,
}) })
.render(); .render();
}
catch(e) {
console.error("distPlotD3 Error: ", e)
}
}); });
return React.createElement("div", { return React.createElement("div", {