external core dep

2 years ago · 012434093c
8 changed files with 2974 additions and 3225 deletions
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -2,7 +2,7 @@ const baseWebpackConfig = require('./webpack.base.conf');

 var conf = baseWebpackConfig;
 conf.devtool = 'inline-source-map';
-conf.watch = true;
 conf.mode = 'development';
+conf.output.filename = 'index.dev.js';

 module.exports = conf;
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -2,5 +2,8 @@ const baseWebpackConfig = require('./webpack.base.conf');

 var conf = baseWebpackConfig;
 conf.mode = 'production';
+conf.externals = [
+  '@chartwerk/core'
+];

 module.exports = baseWebpackConfig;
--- a/examples/demo.html
+++ b/examples/demo.html
@ -4,7 +4,7 @@
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

-    <script src="../dist/index.js" type="text/javascript"></script>
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="chart" style="width: 50%; height: 500px;"></div>
--- a/examples/demo_live.html
+++ b/examples/demo_live.html
@ -5,7 +5,7 @@
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">

-  <script src="../dist/index.js" type="text/javascript"></script>
+  <script src="../dist/index.dev.js" type="text/javascript"></script>
 </head>

 <body>
--- a/examples/demo_vertical.html
+++ b/examples/demo_vertical.html
@ -4,7 +4,7 @@
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

-    <script src="../dist/index.js" type="text/javascript"></script>
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="chart" style="width: 50%; height: 500px;"></div>
--- a/package.json
+++ b/package.json
@ -4,8 +4,8 @@
  "description": "Chartwerk line chart",
  "main": "dist/index.js",
  "scripts": {
-    "build": "webpack --config build/webpack.prod.conf.js",
-    "dev": "webpack --config build/webpack.dev.conf.js",
+    "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
+    "dev": "webpack --watch --config build/webpack.dev.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
@ -15,14 +15,10 @@
  "author": "CorpGlory",
  "license": "ISC",
  "dependencies": {
-    "@chartwerk/core": "^0.4.0"
+    "@chartwerk/core": "^0.5.0-beta2"
  },
  "devDependencies": {
-    "@types/d3": "5.16.4",
-    "@types/lodash": "^4.14.149",
    "css-loader": "^3.4.2",
-    "d3": "5.16.0",
-    "lodash": "^4.17.15",
    "style-loader": "^1.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
--- a/src/index.ts
+++ b/src/index.ts
@ -14,7 +14,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
  areaGenerator = null;

  constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
-    super(d3, _el, _series, _options);
+    super(_el, _series, _options);
  }

  renderMetrics(): void {
@ -62,13 +62,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
  }

  initLineGenerator(): void {
-    this.lineGenerator = this.d3.line()
+    this.lineGenerator = d3.line()
      .x(d => this.xScale(d[0]))
      .y(d => this.yScale(d[1]));
  }

  initAreaGenerator(): void {
-    this.areaGenerator = this.d3.area()
+    this.areaGenerator = d3.area()
      .x(d => this.xScale(d[0]))
      .y1(d => this.yScale(d[1]))
      .y0(d => this.height);
@ -169,7 +169,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    }

    if(metricOptions.mode === Mode.CHARGE) {
-      const dataPairs = this.d3.pairs(datapoints);
+      const dataPairs = d3.pairs(datapoints);
      this.metricContainer.selectAll(null)
        .data(dataPairs)
        .enter()
@ -325,7 +325,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    }
    
    // TODO: d3.bisect is not the best way. Use binary search
-    const bisectIndex = this.d3.bisector((d: [number, number]) => d[columnIdx]).left;
+    const bisectIndex = d3.bisector((d: [number, number]) => d[columnIdx]).left;
    let closestIdx = bisectIndex(datapoints, value);

    // TODO: refactor corner cases
@ -364,8 +364,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
  }

  onMouseMove(): void {
-    const eventX = this.d3.mouse(this.chartContainer.node())[0];
-    const eventY = this.d3.mouse(this.chartContainer.node())[1];
+    const eventX = d3.mouse(this.chartContainer.node())[0];
+    const eventY = d3.mouse(this.chartContainer.node())[1];
    const xValue = this.xScale.invert(eventX); // mouse x position in xScale
    const yValue = this.yScale.invert(eventY);
    // TODO: isOutOfChart is a hack, use clip path correctly
@ -383,8 +383,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    // TDOO: is shift key pressed
    // TODO: need to refactor this object
    this.options.eventsCallbacks.mouseMove({
-      x: this.d3.event.pageX,
-      y: this.d3.event.pageY,
+      x: d3.event.pageX,
+      y: d3.event.pageY,
      xVal: xValue,
      yVal: yValue,
      series: datapoints,
@ -481,7 +481,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    if(this.isOutOfChart() === true) {
      return;
    }
-    if(this.d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
+    if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
      return;
    }
    // TODO: its not clear, why we use this orientation here. Mb its better to use separate option
--- a/yarn.lock
+++ b/yarn.lock