fix

src/components/grid.ts

@@ -1,7 +1,5 @@
 import { GridOptions, SvgElParams } from '../types';
 
-
-// we import only d3 types here
 import * as d3 from 'd3';
 
 import defaultsDeep from 'lodash/defaultsDeep';
@@ -29,7 +27,6 @@ export class Grid {
   protected gridOptions: GridOptions;
 
   constructor(
-    private _d3: typeof d3,
     private _svgEl: d3.Selection<SVGElement, unknown, null, undefined>,
     private _svgElParams: SvgElParams,
     _gridOptions: GridOptions,
@@ -60,7 +57,7 @@ export class Grid {
       .attr('class', 'grid x-grid')
       .style('pointer-events', 'none')
       .call(
-        this._d3.axisBottom(this._svgElParams.xScale)
+        d3.axisBottom(this._svgElParams.xScale)
           .ticks(this.gridOptions.x.ticksCount)
           .tickSize(-this._svgElParams.height)
           .tickFormat(() => '')
@@ -76,7 +73,7 @@ export class Grid {
       .attr('class', 'grid y-grid')
       .style('pointer-events', 'none')
       .call(
-        this._d3.axisLeft(this._svgElParams.yScale)
+        d3.axisLeft(this._svgElParams.yScale)
           .ticks(this.gridOptions.y.ticksCount)
           .tickSize(-this._svgElParams.width)
           .tickFormat(() => '')

src/index.ts

@@ -243,7 +243,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       height: this.height,
       width: this.width,
     }
-    this.state = new PodState(this.d3, boxPararms, this.series, this.options);
+    this.state = new PodState(boxPararms, this.series, this.options);
   }
 
   protected initComponents(): void {
@@ -256,7 +256,7 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       yScale: this.state.yScale,
     }
 
-    this.grid = new Grid(this.d3, this.chartContainer, svgElParams, this.options.grid);
+    this.grid = new Grid(this.chartContainer, svgElParams, this.options.grid);
   }
 
   protected renderMetricsContainer(): void {

src/state.ts

@@ -1,6 +1,5 @@
 import { TimeSerie, Options, yAxisOrientation } from './types';
 
-// we import only d3 types here
 import * as d3 from 'd3';
 
 import cloneDeep from 'lodash/cloneDeep';
@@ -33,7 +32,6 @@ export class PodState<T extends TimeSerie, O extends Options> {
   private _y1Scale: d3.ScaleLinear<number, number>;
 
   constructor(
-    protected _d3: typeof d3,
     protected boxParams: { height: number, width: number },
     protected series: T[],
     protected options: O,
@@ -60,14 +58,14 @@ export class PodState<T extends TimeSerie, O extends Options> {
     if(this.options.axis.y.invert === true) {
       domain = reverse(domain);
     }
-    this._yScale = this._d3.scaleLinear()
+    this._yScale = d3.scaleLinear()
       .domain(domain)
       .range([this.boxParams.height, 0]); // inversed, because d3 y-axis goes from top to bottom;
   }
 
   protected setXScale(): void {
     const domain = this._xValueRange;
-    this._xScale = this._d3.scaleLinear()
+    this._xScale = d3.scaleLinear()
       .domain(domain)
       .range([0, this.boxParams.width]);
   }
@@ -78,7 +76,7 @@ export class PodState<T extends TimeSerie, O extends Options> {
     if(this.options.axis.y1.invert === true) {
       domain = reverse(domain);
     }
-    this._y1Scale = this._d3.scaleLinear()
+    this._y1Scale = d3.scaleLinear()
       .domain(domain)
       .range([this.boxParams.height, 0]); // inversed, because d3 y-axis goes from top to bottom
   }