Simple d3 fixes
This commit is contained in:
parent
5a11ebfb03
commit
4735b9703c
|
@ -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
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
|
|
@ -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", {
|
||||
|
|
Loading…
Reference in New Issue
Block a user