@operato/gantt 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/src/lite-gantt.js

@@ -1,146 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import * as d3 from 'd3';
-let OxLiteGanttChart = class OxLiteGanttChart extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.width = 0;
-        this.height = 0;
-        this.plots = [];
-        this.precision = 2;
-    }
-    static { this.styles = [
-        css `
-      :host {
-        display: flex;
-      }
-
-      svg {
-        flex: 1;
-        margin: 0;
-        padding: 0;
-      }
-
-      #tooltip {
-        position: absolute;
-        opacity: 0;
-        background-color: var(--gantt-chart-tooltip-background-color, white);
-        padding: var(--gantt-chart-tooltip-padding, 5px);
-        border: var(--gantt-chart-tooltip-border, 1px solid black);
-        border-radius: var(--gantt-chart-tooltip-border-radius, 5px);
-        box-shadow: var(--gantt-chart-tooltip-box-shadow, 2px 2px 5px rgba(0, 0, 0, 0.3));
-        pointer-events: var(--gantt-chart-tooltip-pointer-events, none);
-        font-size: var(--gantt-chart-tooltip-font-size, 12px);
-        font-family: var(--gantt-chart-tooltip-font-family, Arial, sans-serif);
-        transition: opacity 0.3s ease-in-out;
-      }
-
-      .data-point {
-        stroke: var(--gantt-chart-plot-stroke, black);
-        stroke-width: var(--gantt-chart-plot-stroke-width, 1px);
-        r: var(--gantt-chart-plot-r, 4);
-      }
-    `
-    ]; }
-    render() {
-        return html `
-      <svg id="chart"></svg>
-      <div id="tooltip"></div>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.initializeResizeObserver();
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        super.disconnectedCallback();
-    }
-    initializeResizeObserver() {
-        this.resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                this.initializeChart();
-                this.drawChart();
-            }
-        });
-        this.resizeObserver.observe(this);
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('plots') && this.plots.length > 0) {
-            this.initializeChart();
-            this.drawChart();
-        }
-    }
-    initializeChart() {
-        const chart = this.chart;
-        d3.select(chart).selectAll('g').remove();
-        this.svg = d3.select(chart).append('g');
-        this.addMouseHandlers();
-    }
-    drawChart() { }
-    addMouseHandlers() {
-        d3.select(this.chart)
-            .on('mouseover', this.onMouseOver.bind(this))
-            .on('mousemove', this.onMouseMove.bind(this))
-            .on('mouseout', this.onMouseOut.bind(this));
-    }
-    onMouseOver(event) {
-        const target = d3.select(event.target);
-        if (target.classed('tooltip')) {
-            const data = target.datum();
-            this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY);
-        }
-    }
-    onMouseMove(event) {
-        const target = d3.select(event.target);
-        if (target.classed('tooltip')) {
-            const data = target.datum();
-            this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY);
-        }
-    }
-    onMouseOut(event) {
-        const target = d3.select(event.target);
-        if (target.classed('tooltip')) {
-            this.hideTooltip();
-        }
-    }
-    tooltipContent(data) {
-        return `Data: ${data}`;
-    }
-    showTooltip(content, x, y) {
-        this.tooltip.style.opacity = '1';
-        this.tooltip.style.left = `${x}px`;
-        this.tooltip.style.top = `${y}px`;
-        this.tooltip.innerHTML = content;
-    }
-    hideTooltip() {
-        this.tooltip.style.opacity = '0';
-    }
-};
-__decorate([
-    property({ type: Number })
-], OxLiteGanttChart.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], OxLiteGanttChart.prototype, "height", void 0);
-__decorate([
-    property({ type: Array })
-], OxLiteGanttChart.prototype, "plots", void 0);
-__decorate([
-    property({ type: Number })
-], OxLiteGanttChart.prototype, "precision", void 0);
-__decorate([
-    query('#tooltip')
-], OxLiteGanttChart.prototype, "tooltip", void 0);
-__decorate([
-    query('#chart')
-], OxLiteGanttChart.prototype, "chart", void 0);
-OxLiteGanttChart = __decorate([
-    customElement('ox-lite-gantt-chart')
-], OxLiteGanttChart);
-export { OxLiteGanttChart };
-//# sourceMappingURL=lite-gantt.js.map

package/dist/src/lite-gantt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-gantt.js","sourceRoot":"","sources":["../../src/lite-gantt.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('ox-lite-gantt-chart')\nexport class OxLiteGanttChart extends LitElement {\n  @property({ type: Number }) width: number = 0\n  @property({ type: Number }) height: number = 0\n  @property({ type: Array }) plots: Array<any> = []\n\n  @property({ type: Number }) precision?: number = 2\n\n  @query('#tooltip') tooltip!: HTMLDivElement\n  @query('#chart') chart!: SVGSVGElement\n\n  protected svg?: d3.Selection<SVGGElement, unknown, null, undefined>\n\n  private resizeObserver?: ResizeObserver\n\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      svg {\n        flex: 1;\n        margin: 0;\n        padding: 0;\n      }\n\n      #tooltip {\n        position: absolute;\n        opacity: 0;\n        background-color: var(--gantt-chart-tooltip-background-color, white);\n        padding: var(--gantt-chart-tooltip-padding, 5px);\n        border: var(--gantt-chart-tooltip-border, 1px solid black);\n        border-radius: var(--gantt-chart-tooltip-border-radius, 5px);\n        box-shadow: var(--gantt-chart-tooltip-box-shadow, 2px 2px 5px rgba(0, 0, 0, 0.3));\n        pointer-events: var(--gantt-chart-tooltip-pointer-events, none);\n        font-size: var(--gantt-chart-tooltip-font-size, 12px);\n        font-family: var(--gantt-chart-tooltip-font-family, Arial, sans-serif);\n        transition: opacity 0.3s ease-in-out;\n      }\n\n      .data-point {\n        stroke: var(--gantt-chart-plot-stroke, black);\n        stroke-width: var(--gantt-chart-plot-stroke-width, 1px);\n        r: var(--gantt-chart-plot-r, 4);\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <svg id=\"chart\"></svg>\n      <div id=\"tooltip\"></div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.initializeResizeObserver()\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect()\n    }\n    super.disconnectedCallback()\n  }\n\n  protected initializeResizeObserver(): void {\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        this.initializeChart()\n        this.drawChart()\n      }\n    })\n\n    this.resizeObserver.observe(this)\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('plots') && this.plots.length > 0) {\n      this.initializeChart()\n      this.drawChart()\n    }\n  }\n\n  protected initializeChart(): void {\n    const chart = this.chart\n\n    d3.select(chart).selectAll('g').remove()\n\n    this.svg = d3.select(chart).append('g')\n\n    this.addMouseHandlers()\n  }\n\n  protected drawChart(): void {}\n\n  private addMouseHandlers(): void {\n    d3.select(this.chart)\n      .on('mouseover', this.onMouseOver.bind(this))\n      .on('mousemove', this.onMouseMove.bind(this))\n      .on('mouseout', this.onMouseOut.bind(this))\n  }\n\n  protected onMouseOver(event: MouseEvent): void {\n    const target = d3.select(event.target as HTMLElement)\n\n    if (target.classed('tooltip')) {\n      const data = target.datum()\n      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)\n    }\n  }\n\n  protected onMouseMove(event: MouseEvent): void {\n    const target = d3.select(event.target as HTMLElement)\n\n    if (target.classed('tooltip')) {\n      const data = target.datum()\n      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)\n    }\n  }\n\n  protected onMouseOut(event: MouseEvent): void {\n    const target = d3.select(event.target as HTMLElement)\n\n    if (target.classed('tooltip')) {\n      this.hideTooltip()\n    }\n  }\n\n  protected tooltipContent(data: any): string {\n    return `Data: ${data}`\n  }\n\n  protected showTooltip(content: string, x: number, y: number): void {\n    this.tooltip.style.opacity = '1'\n    this.tooltip.style.left = `${x}px`\n    this.tooltip.style.top = `${y}px`\n    this.tooltip.innerHTML = content\n  }\n\n  protected hideTooltip(): void {\n    this.tooltip.style.opacity = '0'\n  }\n}\n"]}

package/dist/stories/ox-lite-gantt.stories.d.ts

@@ -1,22 +0,0 @@
-import '../src/lite-gantt.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        theme: {
-            control: string;
-            options: string[];
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    theme: 'light' | 'dark';
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-lite-gantt.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-lite-gantt.stories.js","sourceRoot":"","sources":["../../stories/ox-lite-gantt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;kBAMtB,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/lite-gantt.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { Task, Section } from '../src/types.js'\n\nexport default {\n  title: 'ox-lite-gantt',\n  component: 'ox-lite-gantt',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-lite-gantt\n        @change=${(e: CustomEvent) => {\n          console.log('search form changed', e.detail)\n        }}\n      >\n      </ox-lite-gantt>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/src/gantt.ts

@@ -1,191 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import * as d3 from 'd3'
-
-@customElement('ox-gantt-chart')
-export class OxGanttChart extends LitElement {
-  @property({ type: Number }) width: number = 0
-  @property({ type: Number }) height: number = 0
-  @property({ type: Array }) plots: Array<any> = []
-
-  @property({ type: Number }) precision?: number = 2
-
-  @query('#tooltip') tooltip!: HTMLDivElement
-  @query('#chart') chart!: SVGSVGElement
-
-  protected svg?: d3.Selection<SVGGElement, unknown, null, undefined>
-
-  private resizeObserver?: ResizeObserver
-
-  static styles = [
-    css`
-      :host {
-        display: flex;
-      }
-
-      svg {
-        flex: 1;
-        margin: 0;
-        padding: 0;
-      }
-
-      #tooltip {
-        position: absolute;
-        opacity: 0;
-        background-color: var(--gantt-chart-tooltip-background-color, white);
-        padding: var(--gantt-chart-tooltip-padding, 5px);
-        border: var(--gantt-chart-tooltip-border, 1px solid black);
-        border-radius: var(--gantt-chart-tooltip-border-radius, 5px);
-        box-shadow: var(--gantt-chart-tooltip-box-shadow, 2px 2px 5px rgba(0, 0, 0, 0.3));
-        pointer-events: var(--gantt-chart-tooltip-pointer-events, none);
-        font-size: var(--gantt-chart-tooltip-font-size, 12px);
-        font-family: var(--gantt-chart-tooltip-font-family, Arial, sans-serif);
-        transition: opacity 0.3s ease-in-out;
-      }
-
-      .data-point {
-        stroke: var(--gantt-chart-plot-stroke, black);
-        stroke-width: var(--gantt-chart-plot-stroke-width, 1px);
-        r: var(--gantt-chart-plot-r, 4);
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <svg id="chart"></svg>
-      <div id="tooltip"></div>
-    `
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.initializeResizeObserver()
-  }
-
-  disconnectedCallback(): void {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-    super.disconnectedCallback()
-  }
-
-  protected initializeResizeObserver(): void {
-    this.resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        this.initializeChart()
-        this.drawChart()
-      }
-    })
-
-    this.resizeObserver.observe(this)
-  }
-
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    super.updated(changedProperties)
-
-    if (changedProperties.has('plots') && this.plots.length > 0) {
-      this.initializeChart()
-      this.drawChart()
-    }
-  }
-
-  protected initializeChart(): void {
-    const chart = this.chart
-
-    d3.select(chart).selectAll('g').remove()
-
-    this.svg = d3.select(chart).append('g')
-
-    this.addMouseHandlers()
-  }
-
-  protected drawChart(): void {
-    const tasks = [
-      { task: 'Task 1', startDate: new Date('2024-02-01'), endDate: new Date('2024-02-07') },
-      { task: 'Task 2', startDate: new Date('2024-02-05'), endDate: new Date('2024-02-15') },
-      { task: 'Task 3', startDate: new Date('2024-02-10'), endDate: new Date('2024-02-20') }
-    ]
-
-    const g = this.svg!
-
-    const x = d3
-      .scaleTime()
-      .domain([d3.min(tasks, d => d.startDate)!, d3.max(tasks, d => d.endDate)!])
-      .range([0, this.width])
-
-    const y = d3
-      .scaleBand()
-      .domain(tasks.map(d => d.task))
-      .range([0, this.height])
-      .padding(0.1)
-
-    g.selectAll('.task')
-      .data(tasks)
-      .enter()
-      .append('rect')
-      .attr('class', 'task')
-      .attr('x', d => x(d.startDate))
-      .attr('y', d => y(d.task)!)
-      .attr('width', d => x(d.endDate) - x(d.startDate))
-      .attr('height', y.bandwidth())
-
-    g.append('g')
-      .attr('transform', 'translate(0,' + this.height + ')')
-      .call(d3.axisBottom(x))
-
-    g.append('g').call(d3.axisLeft(y))
-  }
-
-  private addMouseHandlers(): void {
-    d3.select(this.chart)
-      .on('mouseover', this.onMouseOver.bind(this))
-      .on('mousemove', this.onMouseMove.bind(this))
-      .on('mouseout', this.onMouseOut.bind(this))
-  }
-
-  protected onMouseOver(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      const data = target.datum()
-      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)
-    }
-  }
-
-  protected onMouseMove(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      const data = target.datum()
-      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)
-    }
-  }
-
-  protected onMouseOut(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      this.hideTooltip()
-    }
-  }
-
-  protected tooltipContent(data: any): string {
-    return `Data: ${data}`
-  }
-
-  protected showTooltip(content: string, x: number, y: number): void {
-    this.tooltip.style.opacity = '1'
-    this.tooltip.style.left = `${x}px`
-    this.tooltip.style.top = `${y}px`
-    this.tooltip.innerHTML = content
-  }
-
-  protected hideTooltip(): void {
-    this.tooltip.style.opacity = '0'
-  }
-
-  protected plotData(): void {
-    this.svg!.selectAll('.plot').data(this.plots).enter().append('circle').attr('class', 'plot tooltip')
-  }
-}

package/src/lite-gantt.ts

@@ -1,152 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import * as d3 from 'd3'
-
-@customElement('ox-lite-gantt-chart')
-export class OxLiteGanttChart extends LitElement {
-  @property({ type: Number }) width: number = 0
-  @property({ type: Number }) height: number = 0
-  @property({ type: Array }) plots: Array<any> = []
-
-  @property({ type: Number }) precision?: number = 2
-
-  @query('#tooltip') tooltip!: HTMLDivElement
-  @query('#chart') chart!: SVGSVGElement
-
-  protected svg?: d3.Selection<SVGGElement, unknown, null, undefined>
-
-  private resizeObserver?: ResizeObserver
-
-  static styles = [
-    css`
-      :host {
-        display: flex;
-      }
-
-      svg {
-        flex: 1;
-        margin: 0;
-        padding: 0;
-      }
-
-      #tooltip {
-        position: absolute;
-        opacity: 0;
-        background-color: var(--gantt-chart-tooltip-background-color, white);
-        padding: var(--gantt-chart-tooltip-padding, 5px);
-        border: var(--gantt-chart-tooltip-border, 1px solid black);
-        border-radius: var(--gantt-chart-tooltip-border-radius, 5px);
-        box-shadow: var(--gantt-chart-tooltip-box-shadow, 2px 2px 5px rgba(0, 0, 0, 0.3));
-        pointer-events: var(--gantt-chart-tooltip-pointer-events, none);
-        font-size: var(--gantt-chart-tooltip-font-size, 12px);
-        font-family: var(--gantt-chart-tooltip-font-family, Arial, sans-serif);
-        transition: opacity 0.3s ease-in-out;
-      }
-
-      .data-point {
-        stroke: var(--gantt-chart-plot-stroke, black);
-        stroke-width: var(--gantt-chart-plot-stroke-width, 1px);
-        r: var(--gantt-chart-plot-r, 4);
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <svg id="chart"></svg>
-      <div id="tooltip"></div>
-    `
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.initializeResizeObserver()
-  }
-
-  disconnectedCallback(): void {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-    super.disconnectedCallback()
-  }
-
-  protected initializeResizeObserver(): void {
-    this.resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        this.initializeChart()
-        this.drawChart()
-      }
-    })
-
-    this.resizeObserver.observe(this)
-  }
-
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    super.updated(changedProperties)
-
-    if (changedProperties.has('plots') && this.plots.length > 0) {
-      this.initializeChart()
-      this.drawChart()
-    }
-  }
-
-  protected initializeChart(): void {
-    const chart = this.chart
-
-    d3.select(chart).selectAll('g').remove()
-
-    this.svg = d3.select(chart).append('g')
-
-    this.addMouseHandlers()
-  }
-
-  protected drawChart(): void {}
-
-  private addMouseHandlers(): void {
-    d3.select(this.chart)
-      .on('mouseover', this.onMouseOver.bind(this))
-      .on('mousemove', this.onMouseMove.bind(this))
-      .on('mouseout', this.onMouseOut.bind(this))
-  }
-
-  protected onMouseOver(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      const data = target.datum()
-      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)
-    }
-  }
-
-  protected onMouseMove(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      const data = target.datum()
-      this.showTooltip(this.tooltipContent(data), event.clientX, event.clientY)
-    }
-  }
-
-  protected onMouseOut(event: MouseEvent): void {
-    const target = d3.select(event.target as HTMLElement)
-
-    if (target.classed('tooltip')) {
-      this.hideTooltip()
-    }
-  }
-
-  protected tooltipContent(data: any): string {
-    return `Data: ${data}`
-  }
-
-  protected showTooltip(content: string, x: number, y: number): void {
-    this.tooltip.style.opacity = '1'
-    this.tooltip.style.left = `${x}px`
-    this.tooltip.style.top = `${y}px`
-    this.tooltip.innerHTML = content
-  }
-
-  protected hideTooltip(): void {
-    this.tooltip.style.opacity = '0'
-  }
-}