chore: update import

package.json

@@ -1,7 +1,7 @@
 {
   "name": "anichart",
   "sideEffects": false,
-  "version": "2.0.0-53",
+  "version": "2.0.0-54",
   "description": "Data visualization animation library",
   "author": "jannchie <[email protected]>",
   "license": "MIT",
@@ -14,6 +14,11 @@
     "type": "git",
     "url": "https://github.com/Jannchie/anichart.js.git"
   },
+  "files": [
+    "dist/**/*",
+    "lib/**/*",
+    "typings/**/*"
+  ],
   "scripts": {
     "build": "tsc --build tsconfig.json & webpack --config webpack.prod.js",
     "deploy": "npm version prerelease",
@@ -61,4 +66,4 @@
     "data",
     "visualization"
   ]
-}
+}

src/core/Stage.ts

@@ -1,10 +1,10 @@
-import * as d3 from "d3";
 import { Ani } from "./ani/Ani";
 import { canvasRenderer, CanvasRenderer } from "./CanvasRenderer";
 import { Component } from "./component/Component";
 import { addFrameToFFmpeg, ffmpeg, outputMP4, removePNG } from "./FFmpeg";
 import { recourse } from "./Recourse";
-import * as async from "async";
+import { interval, Timer } from "d3";
+import { eachLimit, eachSeries } from "async";
 export class Stage {
   aniRoot: Ani = new Ani();
   compRoot: Component = new Component();
@@ -15,7 +15,7 @@ export class Stage {
     fileName: "output",
     splitSec: 60,
   };
-  interval: d3.Timer | null;
+  interval: Timer | null;
   output: boolean;
   outputConcurrency = 128;
   mode = "output";
@@ -84,37 +84,35 @@ export class Stage {
         while (part++ < partCount) {
           parts.push(part);
         }
-        async
-          .eachSeries(parts, (p, callback) => {
-            const frames: number[] = [];
-            const picNameList: string[] = [];
-            while (
-              this.cFrame < this.totalFrames &&
-              this.cFrame < p * this.outputOptions.splitSec * this.options.fps
-            ) {
-              this.cFrame++;
-              frames.push(this.cFrame);
-            }
-            async
-              .eachLimit(frames, this.outputConcurrency, (f, cb) => {
-                this.render(f / this.options.fps);
-                const no =
-                  f - (p - 1) * this.outputOptions.splitSec * this.options.fps;
-                picNameList.push(`output-${no}.png`);
-                addFrameToFFmpeg(this.canvas, no).then(() => cb());
-              })
-              .then(() => {
-                outputMP4(this.options.fps).then(() => {
-                  removePNG(picNameList);
-                  callback();
-                });
-              });
-          })
+
+        eachSeries(parts, (p, callback) => {
+          const frames: number[] = [];
+          const picNameList: string[] = [];
+          while (
+            this.cFrame < this.totalFrames &&
+            this.cFrame < p * this.outputOptions.splitSec * this.options.fps
+          ) {
+            this.cFrame++;
+            frames.push(this.cFrame);
+          }
+          eachLimit(frames, this.outputConcurrency, (f, cb) => {
+            this.render(f / this.options.fps);
+            const no =
+              f - (p - 1) * this.outputOptions.splitSec * this.options.fps;
+            picNameList.push(`output-${no}.png`);
+            addFrameToFFmpeg(this.canvas, no).then(() => cb());
+          }).then(() => {
+            outputMP4(this.options.fps).then(() => {
+              removePNG(picNameList);
+              callback();
+            });
+          });
+        })
           // tslint:disable-next-line:no-console
           .then(() => console.log("finished!"));
       });
     } else {
-      this.interval = d3.interval((elapsed) => {
+      this.interval = interval((elapsed) => {
         if (this.output || this.mode === "output") {
           this.cFrame++;
         } else {

src/core/ani/AniCreator.ts

@@ -1,12 +1,12 @@
 import { Component } from "../component/Component";
-import * as d3 from "d3";
 import { Ani } from "./Ani";
 import { getFadeWrapped } from "../wrapper/Fade";
+import { bisectLeft, easeLinear, interpolate, scaleLinear } from "d3";
 export function easeInterpolate<T extends Component | number>(
   e: (i: number) => number
 ) {
   return (a: T, b: T) => {
-    const i = d3.interpolate(a, b as any);
+    const i = interpolate(a, b as any);
     return (t: number): T => {
       return i(e(t));
     };
@@ -46,7 +46,7 @@ class CustomAni extends Ani {
   }
   getComponent(sec: number): Component | null {
     // [0, 3, 6]
-    let rIdx = d3.bisectLeft(this.keyTimes, sec);
+    let rIdx = bisectLeft(this.keyTimes, sec);
     if (rIdx >= this.keyFrames.length) {
       rIdx = this.keyFrames.length - 1;
     }
@@ -55,16 +55,15 @@ class CustomAni extends Ani {
       return null;
     }
     const eIdx = lIdx >= this.eases.length ? this.eases.length - 1 : lIdx;
-    const scale = d3
-      .scaleLinear(
-        [this.keyTimes[lIdx], this.keyTimes[rIdx]],
-        [this.keyFrames[lIdx], this.keyFrames[rIdx]]
-      )
+    const scale = scaleLinear(
+      [this.keyTimes[lIdx], this.keyTimes[rIdx]],
+      [this.keyFrames[lIdx], this.keyFrames[rIdx]]
+    )
       .interpolate(easeInterpolate(this.eases[eIdx]))
       .clamp(true);
     return scale(sec);
   }
-  duration(duration: number, ease: (n: number) => number = d3.easeLinear) {
+  duration(duration: number, ease: (n: number) => number = easeLinear) {
     this.keyTimes.push(this.keyTimes[this.keyTimes.length - 1] + duration);
     this.eases.push(ease);
     return this.aniSeries;
@@ -78,10 +77,9 @@ export function customAni(startSec?: number) {
 export function createAni<T extends Component>(
   keyFrames: T[],
   keyTimes: number[] = [0, 1],
-  ease: (n: number) => number = d3.easeLinear
+  ease: (n: number) => number = easeLinear
 ): Ani {
-  const scale = d3
-    .scaleLinear(keyTimes, keyFrames)
+  const scale = scaleLinear(keyTimes, keyFrames)
     .interpolate(easeInterpolate(ease))
     .clamp(true);
   return {
@@ -103,16 +101,14 @@ export function getFadeAni(
   const startSec = options?.startSec ?? 0;
   const durationSec = options?.durationSec ?? 3;
   const fadeSec = options?.fadeSec ?? 1;
-  const alphaScale = d3
-    .scaleLinear(
-      [
-        startSec,
-        startSec + fadeSec,
-        startSec + durationSec - fadeSec,
-        startSec + durationSec,
-      ],
-      [0, 1, 1, 0]
-    )
-    .clamp(true);
+  const alphaScale = scaleLinear(
+    [
+      startSec,
+      startSec + fadeSec,
+      startSec + durationSec - fadeSec,
+      startSec + durationSec,
+    ],
+    [0, 1, 1, 0]
+  ).clamp(true);
   return getFadeWrapped(obj, alphaScale);
 }

src/core/ani/GridAni.ts

@@ -1,5 +1,6 @@
 import { Component } from "../component/Component";
 import { Stage } from "../Stage";
+import { Ani } from "./Ani";
 
 export interface GridOptions {
   aniTime?: [number, number];

src/core/ani/Progress.ts

@@ -3,8 +3,8 @@ import { Text } from "../component/Text";
 import { Rect } from "../component/Rect";
 import { Ani } from "./Ani";
 import { customAni, easeInterpolate } from "./AniCreator";
-import * as d3 from "d3";
 import { font } from "../Constant";
+import { easeExpOut, easePolyOut, format, scaleLinear } from "d3";
 export interface ProgressOptions {
   position?: { x: number; y: number };
   shape?: { width: number; height: number };
@@ -125,22 +125,21 @@ export class Progress extends Ani implements ProgressOptions {
     objCopy.alpha = 0;
     this.ani = customAni(this.aniTime[0])
       .keyFrame(start)
-      .duration(this.aniTime[1], d3.easePolyOut.exponent(5))
+      .duration(this.aniTime[1], easePolyOut.exponent(5))
       .keyFrame(end)
-      .duration(0.25, d3.easeExpOut)
+      .duration(0.25, easeExpOut)
       .keyFrame(final)
       .duration(0.5)
       .keyFrame(final)
       .duration(0.2)
       .keyFrame(objCopy);
   }
   getComponent(sec: number) {
-    const val = d3
-      .scaleLinear(this.aniTime, [0, 100])
+    const val = scaleLinear(this.aniTime, [0, 100])
       .clamp(true)
-      .interpolate(easeInterpolate(d3.easePolyOut.exponent(5)))(sec);
+      .interpolate(easeInterpolate(easePolyOut.exponent(5)))(sec);
 
-    const label = d3.format("d")(val);
+    const label = format("d")(val);
     const res = this.ani.getComponent(sec)!;
     const textLabel = new Text({
       text: val === 100 ? `` : `Loading ${label} %`,

src/core/ani/RectAni.ts

@@ -1,4 +1,3 @@
-import * as d3 from "d3";
 import { Ani } from "./Ani";
 import { Rect } from "../component/Rect";
 interface RectOptions {

src/core/ani/TextAni.ts

@@ -1,6 +1,6 @@
-import * as d3 from "d3";
 import { Ani } from "./Ani";
 import { Text } from "../component/Text";
+import { scaleLinear } from "d3";
 interface TextAniOptions {
   time?: number;
   last?: number;
@@ -27,17 +27,15 @@ export class TextAni extends Ani {
     this.rise = options.rise ? options.rise : 10;
   }
   getComponent(sec: number) {
-    const scale = d3
-      .scaleLinear(
-        [
-          this.time,
-          this.time + this.fade,
-          this.time + this.last - this.fade,
-          this.time + this.last,
-        ],
-        [0, 1, 1, 0]
-      )
-      .clamp(true);
+    const scale = scaleLinear(
+      [
+        this.time,
+        this.time + this.fade,
+        this.time + this.last - this.fade,
+        this.time + this.last,
+      ],
+      [0, 1, 1, 0]
+    ).clamp(true);
     this.component.alpha = scale(sec);
     switch (this.type) {
       case "blur":

src/core/chart/BarChart.ts

@@ -2,14 +2,22 @@ import { Component } from "../component/Component";
 import { Image } from "../component/Image";
 import { Rect } from "../component/Rect";
 import { Text, TextOptions } from "../component/Text";
-import * as d3 from "d3";
 import * as _ from "lodash-es";
 import { colorPicker } from "../ColorPicker";
 import { canvasHelper } from "../CanvasHelper";
 import { Stage } from "../Stage";
 import { BaseChart, BaseChartOptions, KeyGenerate } from "./BaseChart";
 import { recourse } from "../Recourse";
 import { font } from "../Constant";
+import {
+  extent,
+  max,
+  mean,
+  range,
+  ScaleLinear,
+  scaleLinear,
+  timeFormat,
+} from "d3";
 
 interface BarChartOptions extends BaseChartOptions {
   itemCount?: number;
@@ -105,12 +113,12 @@ export class BarChart extends BaseChart {
   }
 
   private setHistoryIndex() {
-    const range = d3.range(
+    const dataRange = range(
       this.aniTime[0] - this.swap,
       this.aniTime[0],
       this.swap / this.sampling
     );
-    const data = range.map((t) =>
+    const data = dataRange.map((t) =>
       this.getCurrentData(t).map((v) => v[this.idField])
     );
     this.historyIndex = this.IDList.reduce((d, id) => {
@@ -128,7 +136,7 @@ export class BarChart extends BaseChart {
   private get maxValueLabelWidth() {
     const d = [...this.data.values()];
     const maxWidth =
-      d3.max(d, (item) => {
+      max(d, (item) => {
         const text = new Text(
           this.getLabelTextOptions(
             this.valueFormat(item),
@@ -143,7 +151,7 @@ export class BarChart extends BaseChart {
   }
   private get maxLabelWidth() {
     const maxWidth =
-      d3.max(this.IDList, (id) => {
+      max(this.IDList, (id) => {
         const text = new Text(
           this.getLabelTextOptions(
             this.labelFormat(id, this.meta, this.dataGroupByID),
@@ -174,12 +182,12 @@ export class BarChart extends BaseChart {
       (map, id) =>
         map.set(
           id,
-          d3.mean(this.historyIndex.get(id).map((data: unknown) => data))
+          mean(this.historyIndex.get(id).map((data: unknown) => data))
         ),
       new Map()
     );
-    const [min, max] = d3.extent(currentData, (d) => d[this.valueField]);
-    const scaleX = d3.scaleLinear(
+    const [min, max] = extent(currentData, (d) => d[this.valueField]);
+    const scaleX = scaleLinear(
       [0, max],
       [
         0,
@@ -205,7 +213,7 @@ export class BarChart extends BaseChart {
 
     if (this.showDateLabel) {
       const dateLabel = new Text({
-        text: d3.timeFormat(this.dateFormat)(this.secToDate(sec)),
+        text: timeFormat(this.dateFormat)(this.secToDate(sec)),
         font,
         fontSize: this.dateLabelSize,
         fillStyle: "#777",
@@ -233,16 +241,17 @@ export class BarChart extends BaseChart {
 
   private getBarOptions(
     data: any,
-    scaleX: d3.ScaleLinear<number, number, never>,
+    scaleX: ScaleLinear<number, number, never>,
     indexes: Map<string, number>
   ): BarOptions {
     if (!Number.isNaN(data[this.valueField])) {
       this.lastValue.set(data[this.idField], data[this.valueField]);
     }
     data[this.valueField] = this.lastValue.get(data[this.idField]);
-    const alpha = d3
-      .scaleLinear([this.itemCount - 1, this.itemCount], [1, 0])
-      .clamp(true)(indexes.get(data[this.idField])!);
+    const alpha = scaleLinear(
+      [this.itemCount - 1, this.itemCount],
+      [1, 0]
+    ).clamp(true)(indexes.get(data[this.idField])!);
     let color: string;
     if (typeof this.colorField === "string") {
       color = data[this.idField];