How to use the plottable.Interactions.Pointer function in plottable

To help you get started, we’ve selected a few plottable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github devinit / datahub / src / components / organisms / Charts / components / TreeMap / TreeMap.tsx View on Github external
setTimeout(() => {
      const clickInteraction = new Interactions.Click().onClick(this.onClick);
      clickInteraction.attachTo(plot);
      plot.onDetach(clickInteraction.detachFrom);

      const hoverInteraction = new Interactions.Pointer()
        .onPointerEnter(point => {
          const entity = this.getEntityAtPoint(point);
          if (entity && entity.datum.data.parentId !== this.rootNode.id) {
            this.setState({ showNavController: true });
          }
        })
        .onPointerMove(point => {
          if (!this.state.showNavController) {
            const entity = this.getEntityAtPoint(point);
            if (entity && entity.datum.data.parentId !== this.rootNode.id) {
              this.setState({ showNavController: true });
            }
          }
        })
        .onPointerExit(({ x, y }) => {
          if (x <= 0 || x >= this.props.width || y <= 0 || y >= this.props.height) { // is cursor out of bounds?
github devinit / datahub / src / components / organisms / Charts / shared / BarLine / labels.ts View on Github external
export const showLabelsOnHover = (plot: BarPlot | LinePlot, labelConfig: Partial<PlotLabelConfig>) => {
  const interaction = new Interactions.Pointer()
    .onPointerExit(() => resetPlot(plot))
    .onPointerMove(point => {
      resetPlot(plot);
      const entities = plot.entitiesAt(point);
      if (entities && entities.length) {
        createCustomLabels(plot, entities, labelConfig);
      }
    });

  interaction.attachTo(plot);
  plot.onDetach(interaction.detachFrom);
};