mouse-over-and-react #36

Merged
rozetko merged 3 commits from mouse-over-and-react into main 1 year ago
  1. 29
      examples/mouse.html
  2. 52
      react/ChartwerkLinePod.tsx

29
examples/mouse.html

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
const startTime = 1590590148;
const data = Array.from(
{ length: 20 },
(el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
);
let options = {
renderLegend: false, usePanning: false,
axis: { y: { range: [0, 50] } },
eventsCallbacks: { mouseMove: console.log }
}
var pod = new LinePod(
document.getElementById('chart'),
[{ datapoints: data }],
options
);
pod.render();
</script>
</body>
</html>

52
react/ChartwerkLinePod.tsx

@ -1,6 +1,4 @@
import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
import { AxisRange } from '@chartwerk/core/dist/types';
import { MarkersConf } from '@chartwerk/line-pod/dist/models/marker';
import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
@ -16,18 +14,6 @@ export type ChartwerkLinePodProps = {
markersConf?: MarkersConf,
segments?: SegmentSerie[],
className?: string;
// TODO: callback types should be exported from chartwerk
onZoomIn?: (ranges: AxisRange[]) => void;
onZoomOut?: (centers: { x: number, y: number }) => void;
onMouseMove?: (event: any) => void;
onMouseOut?: () => void;
onLegendClick?: (idx: number) => void,
onPanning?: (event: { ranges: AxisRange[], d3Event: any }) => void;
onPanningEnd?: (ranges: AxisRange[]) => void;
onContextMenu?: (evt: any) => void;
onSharedCrosshairMove?: (evt: any) => void;
onRenderStart?: () => void,
onRenderEnd?: () => void,
}
export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
@ -49,48 +35,12 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
useEffect(() => {
if(chart === null) { return; }
let eventsCallbacks = _.cloneDeep(props.options?.eventsCallbacks || {});
if (props.onZoomIn) {
eventsCallbacks.zoomIn = props.onZoomIn;
}
if (props.onZoomOut) {
eventsCallbacks.zoomOut = props.onZoomOut;
}
if (props.onMouseMove) {
eventsCallbacks.mouseMove = props.onMouseMove;
}
if (props.onMouseOut) {
eventsCallbacks.mouseOut = props.onMouseOut;
}
if (props.onLegendClick) {
eventsCallbacks.onLegendClick = props.onLegendClick;
}
if (props.onPanning) {
eventsCallbacks.panning = props.onPanning;
}
if (props.onPanningEnd) {
eventsCallbacks.panningEnd = props.onPanningEnd;
}
if (props.onContextMenu) {
eventsCallbacks.contextMenu = props.onContextMenu;
}
if (props.onSharedCrosshairMove) {
eventsCallbacks.sharedCrosshairMove = props.onSharedCrosshairMove;
}
if (props.onRenderStart) {
eventsCallbacks.renderStart = props.onRenderStart;
}
if(pod === null) {
const newPod = new LinePod(
// @ts-ignore
chart,
props.series,
{
...props.options,
eventsCallbacks
},
props.options,
props.markersConf,
props.segments
);

Loading…
Cancel
Save