Merge pull request #124 from Jannchie/fix/bar-x-axis

🩹 fix(bar): x axis domain

src/core/chart/BarChart.ts

@@ -296,12 +296,12 @@ export class BarChart extends BaseChart {
           : sec
     return {
           x: scaleLinear(
-            [minValue, maxValue],
-            [0, this.shape.width - this.margin.left - this.margin.right],
+              [minValue, maxValue],
+              [this.margin.left + this.labelPlaceholder, this.shape.width - this.margin.left - this.margin.right - this.valuePlaceholder - this.rankLabelPlaceholder],
             ),
             y: scaleLinear(
-            [this.aniTime[0], trueSec],
-            [this.shape.height - this.margin.top - this.margin.bottom, 0],
+              [this.aniTime[0], trueSec],
+              [this.shape.height - this.margin.top - this.margin.bottom, 0],
           ),
         };
   }

src/core/chart/BaseChart.ts

@@ -433,6 +433,7 @@ export abstract class BaseChart extends Ani {
       key: 'base-chart-tick',
       text: `${this.yTickFormat(this.currentMax)}`,
       font,
+      textAlign: 'center',
       fillStyle: '#777',
       fontSize: size,
     }

src/test/index.ts

@@ -1,43 +1,38 @@
 import { scaleLinear } from 'd3-scale'
 import * as ani from '../index'
-function initStage (stage: ani.Stage) {
+async function initStage(stage: ani.Stage) {
   stage.output = false
-  void stage.resource.loadImage('./pic/pattern.png', 'pattern')
-  void stage.resource.loadCSV('./data/WHO-COVID-19-global-data-sm.csv', 'data').then((data) => {
-    stage.resource.data.set('filted_data', data.filter(d => (d.iso_code?.length) === 3 && (d.date && d.date > '2022-07-15')))
-  })
+  await stage.resource.loadImage('./pic/pattern.png', 'pattern')
+  await stage.resource.loadCSV('./data/test.csv', 'data')
   // Object.keys(countries.getAlpha2Codes()).forEach((alpha2) => {
   //   stage.resource.loadImage(`https://raw.githubusercontent.com/Jannchie/flagpack/master/flags/1x1/${alpha2.toLowerCase()}.svg`, alpha2);
   // });
   stage.options.sec = 60
   const barChart = new ani.BarChart({
     aniTime: [4, 60],
-    dataName: 'filted_data',
-    idField: 'iso_code',
     showXAxis: true,
     margin: { top: 100, left: 10, right: 10, bottom: 10 },
-    valueField: 'total_vaccinations',
   })
 
-  const map = new ani.MapChart({
-    aniTime: [4, 60],
-    visualRange: 'total',
-    showGraticule: true,
-    margin: { top: 100, left: 900, right: 10, bottom: 10 },
-    idField: 'iso_code',
-    dataName: 'filted_data',
-    valueField: 'total_vaccinations',
-    showLabel: true,
-    projectionType: 'orthographic',
-    mapIdField: 'alpha3Code',
-    pathShadowBlur: 100,
-    pathShadowColor: '#0284c7FF',
-    focusTopValueField: 'total_vaccinations',
-    useShadow: true,
-    focusTop: true,
-    visualMap: scaleLinear([1, 0.7, 0.3, 0], ['#0284c7FF', '#0284c744', '#0284c722', '#0284c700'])
-      .clamp(true),
-  })
+  // const map = new ani.MapChart({
+  //   aniTime: [4, 60],
+  //   visualRange: 'total',
+  //   showGraticule: true,
+  //   margin: { top: 100, left: 900, right: 10, bottom: 10 },
+  //   idField: 'iso_code',
+  //   dataName: 'filted_data',
+  //   valueField: 'total_vaccinations',
+  //   showLabel: true,
+  //   projectionType: 'orthographic',
+  //   mapIdField: 'alpha3Code',
+  //   pathShadowBlur: 100,
+  //   pathShadowColor: '#0284c7FF',
+  //   focusTopValueField: 'total_vaccinations',
+  //   useShadow: true,
+  //   focusTop: true,
+  //   visualMap: scaleLinear([1, 0.7, 0.3, 0], ['#0284c7FF', '#0284c744', '#0284c722', '#0284c700'])
+  //     .clamp(true),
+  // })
   // stage.addChild(map)
   stage.addChild(barChart)
   void stage.resource.loadJSON(
@@ -56,7 +51,7 @@ function initStage (stage: ani.Stage) {
 }
 document.documentElement.style.background = '#223'
 const stage = new ani.Stage()
-void initStage(stage).play()
+void initStage(stage).then(d => d.play())
 void stage.renderController()
 if (typeof window !== 'undefined') {
   // (window as any).stage = stage;

webpack.common.js

@@ -1,30 +1,30 @@
-const path = require("path");
+const path = require('path')
 module.exports = {
-  entry: "./src/index.ts",
+  entry: './src/index.ts',
   output: {
-    filename: "anichart.js",
-    path: path.resolve(__dirname, "dist"),
-    library: "anichart",
-    libraryTarget: "umd",
-    globalObject: "this",
+    filename: 'anichart.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'anichart',
+    libraryTarget: 'umd',
+    globalObject: 'this',
   },
   resolve: {
-    extensions: [".ts", ".js"],
+    extensions: ['.ts', '.js'],
   },
   module: {
     rules: [
       {
         test: /\.ts?$/,
-        loader: "ts-loader",
-        options: { configFile: "tsconfig.json" },
+        loader: 'ts-loader',
+        options: { configFile: 'tsconfig.json' },
       },
       {
         test: /\.js$/,
         use: {
-          loader: "babel-loader",
+          loader: 'babel-loader',
         },
-        exclude: "/node_modules/",
+        exclude: '/node_modules/',
       },
     ],
   },
-};
+}

webpack.prod.js

@@ -1,7 +1,7 @@
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
 module.exports = merge(common, {
-  mode: "production",
+  mode: 'production',
   plugins: [new CleanWebpackPlugin()],
-});
+})