Merge branch '0.5.0-beta' into 'main'

external d3 and lodash

See merge request chartwerk/core!17

build/webpack.base.conf.js

@@ -8,6 +8,7 @@ module.exports = {
   context: resolve('src'),
   entry: './index.ts',
   plugins: [],
+  externals: ['lodash', 'd3'],
   module: {
     rules: [
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/core",
-  "version": "0.4.1",
+  "version": "0.5.0-beta3",
   "description": "Chartwerk core",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,11 +15,12 @@
   },
   "author": "CorpGlory Inc.",
   "license": "ISC",
+  "dependencies": {
+    "d3": "^5.7.2",
+    "lodash": "^4.14.149"
+  },
   "devDependencies": {
-    "@types/d3": "^5.7.2",
-    "@types/lodash": "^4.14.149",
     "css-loader": "^3.4.2",
-    "lodash": "^4.17.15",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
     "typescript": "^3.8.3",

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
   }

src/types.ts

@@ -1,3 +1,5 @@
+import * as d3 from 'd3';
+
 export type Margin = { top: number, right: number, bottom: number, left: number };
 export type Timestamp = number;
 

tsconfig.json

@@ -16,6 +16,7 @@
     "noImplicitUseStrict": false,
     "noImplicitAny": false,
     "noUnusedLocals": false,
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "moduleResolution": "node"
   }
 }