Simple d3 fixes

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

View File

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

View File

@ -407,7 +407,7 @@ export class CdfChartD3 {
.attr('r', 6);
tooltip.transition()
.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('top', yScale(d.y) + 'px');
}

View File

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