0.7.7 && handle context menu

3 months ago · a8408a748c
4 changed files with 61 additions and 2 deletions
--- a/examples/right_click.html
+++ b/examples/right_click.html
@ -0,0 +1,33 @@
 <!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] } },
        zoomEvents: { mouse: { 
          zoom: { isActive: false },
          pan: { isActive: false },
        } },
        eventsCallbacks: { contextMenu: (position) => console.log('contextMenu', position) }
      }
      var pod = new LinePod(
        document.getElementById('chart'),
        [{ datapoints: data }],
        options
      );
      pod.render();
    </script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@chartwerk/line-pod",
-  "version": "0.7.6",
+  "version": "0.7.7",
  "description": "Chartwerk line chart",
  "main": "dist/index.js",
  "files": [
--- a/src/index.ts
+++ b/src/index.ts
@ -35,6 +35,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    this.clearAllMetrics();
    this.updateCrosshair();
    this.updateEvents();
    if(!this.series.isSeriesAvailable) {
      this.renderNoDataPointsMessage();
@ -59,6 +60,16 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    this._markersLayer?.clear();
  }
  protected updateEvents(): void {
    // overlay - core component that is used to handle mouse events
    if(!this.overlay) {
      return;
    }
    if(this.options._options.events?.contextMenu === undefined) {
      return;
    }
    this.overlay.on('contextmenu', this.onContextMenu.bind(this));
  }
  getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
    const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
@ -453,8 +464,19 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    }
  }
  protected onContextMenu(): void {
    d3.event.preventDefault(); // do not open browser's context menu.
    const eventX = d3.mouse(this.chartContainer.node())[0];
    const eventY = d3.mouse(this.chartContainer.node())[1];
    this.options._options.events.contextMenu({
      x: this.state.xScale.invert(eventX),
      y: this.state.yScale.invert(eventY),
    });
  }
  // override parent updateData method to provide markers and segments
-protected updateLineData(
+  protected updateLineData(
    series?: LineTimeSerie[],
    options?: LineOptions,
    markersConf?: MarkersConf,
--- a/src/types.ts
+++ b/src/types.ts
@ -23,6 +23,10 @@ export type LineOptions = Options & {
      x: number;
      y: number;
    }, range: AxisRange[]) => void;
    contextMenu?: (position: {
      x: number;
      y: number;
    }) => void;
  }
 }