line-pod/src/index.ts

import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions, Mode } from './types';

import * as d3 from 'd3';
import * as _ from 'lodash';

const METRIC_CIRCLE_RADIUS = 1.5;
const CROSSHAIR_CIRCLE_RADIUS = 3;
const CROSSHAIR_BACKGROUND_RAIDUS = 9;
const CROSSHAIR_BACKGROUND_OPACITY = 0.3;

export class LinePod {
  protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
  protected svg?: d3.Selection<SVGElement, unknown, null, undefined>;
  protected chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>;
  protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;

  constructor(
    protected readonly el: HTMLElement,
    protected series: any[] = [],
    protected options: any
  ){
    this.d3Node = d3.select(this.el);
    this.createSvg();
    this.renderCustomOverlay();
    this.bindEvents();
  }

  protected createSvg(): void {
    this.d3Node.select('svg').remove();
    this.svg = this.d3Node
      .append('svg')
      .style('width', '100%')
      .style('height', '100%')
      .style('backface-visibility', 'hidden');
    this.chartContainer = this.svg
      .append('g')
      .attr('transform', `translate(${0},${0})`);
  }

  renderCustomOverlay(): void {
    this.customOverlay = this.chartContainer.append('rect')
      .attr('class', 'custom-overlay')
      .attr('width', this.width)
      .attr('height', this.height)
      .attr('x', 0)
      .attr('y', 0)
      .attr('pointer-events', 'all')
      .attr('cursor', 'crosshair')
      .attr('draggable', 'true')
      .attr('fill', 'lightgray');
  }

  bindEvents(): void {
    this.customOverlay.on('mousedown', this.mouseDown);
    this.customOverlay.on('mousemove', this.mouseMove);
    this.customOverlay.on('mouseup', this.mouseUp);
  }

  mouseMove(event, i, j) {
    console.log('move', d3.event);
  }

  mouseDown(event, i, j) {
    console.log('mouseDown', d3.event);
  }

  mouseUp(event, i, j) {
    console.log('mouseUp', d3.event);
  }

  wheel() {
    console.log('wheel', d3.event);
  }

  get width(): number {
    return this.d3Node.node().clientWidth;
  }

  get height(): number {
    return this.d3Node.node().clientHeight;
  }
}

// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
export const VueChartwerkLinePod = {
  // alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
  render(createElement) {
    return createElement(
      'div',
      {
        class: { 'chartwerk-line-pod': true },
        attrs: { id: this.id }
      }
    );
  },
  mixins: [VueChartwerkPodMixin],
  methods: {
    render() {
      if(this.pod === undefined) {
        this.pod = new LinePod(document.getElementById(this.id), this.series, this.options);
        this.pod.render();
      } else {
        this.pod.updateData(this.series, this.options);
      }
    },
    renderSharedCrosshair(values) {
      this.pod.renderSharedCrosshair(values);
    },
    hideSharedCrosshair() {
      this.pod.hideSharedCrosshair();
    }
  }
};

export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat };