Merge pull request #3588 from VisActor/style/optimize-axis

Style/optimize axis

Author: xile611

docs/assets/examples/en/axis/style.md

@@ -4,7 +4,7 @@ group: axis
 title: General Style Configuration
 keywords: lineChart,comparison,trend,line,axis
 order: 25-1
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/style.png
+cover: /vchart/preview/axis-style_1.13.1.png
 option: lineChart#axes
 ---
 
@@ -23,26 +23,27 @@ For axis style configuration, configure through:
 - `tick` Coordinate axis scale line configuration
 - `grid` Coordinate axis grid line configuration
 - `title` Coordinate axis title configuration
+- `unit` Coordinate axis unit configuration
 
 ## Demo source
 
 ```javascript livedemo
 const spec = {
   type: 'line',
   theme: {
-    fontFamily: 'serif' // configure global font
+    fontFamily: 'serif' // Configure global fonts
   },
   data: [
     {
       id: 'line',
       values: [
-        { x: '周一', y: 12 },
-        { x: '周二', y: 13 },
-        { x: '周三', y: 11 },
-        { x: '周四', y: 10 },
-        { x: '周五', y: 12 },
-        { x: '周六', y: 14 },
-        { x: '周日', y: 17 }
+        { x: 'Monday', y: 12 },
+        { x: 'Tuesday', y: 13 },
+        { x: 'Wednesday', y: 11 },
+        { x: 'Thursday', y: 10 },
+        { x: 'Friday', y: 12 },
+        { x: 'Saturday', y: 14 },
+        { x: 'Sunday', y: 17 }
       ]
     }
   ],
@@ -54,14 +55,23 @@ const spec = {
       title: {
         visible: true,
         space: 12,
-        text: '右轴标题'
+        text: 'Right axis title'
       },
       label: {
         formatMethod: val => `${val}°C`,
         style: {
           fill: '#000'
         }
       },
+      unit: {
+        visible: true,
+        text: 'Unit of right axis',
+        style: {
+          // dx: -18,
+          dy: -8
+          // textAlign: 'right'
+        }
+      },
       tick: {
         visible: true,
         tickStep: 2,
@@ -85,7 +95,16 @@ const spec = {
       title: {
         visible: true,
         space: 12,
-        text: '左轴标题'
+        text: 'Left axis title'
+      },
+      unit: {
+        visible: true,
+        text: 'Unit of left axis',
+        style: {
+          // dx: -18,
+          dy: -8
+          // textAlign: 'right'
+        }
       },
       label: {
         formatMethod: val => `${val}°C`,
@@ -121,6 +140,7 @@ const spec = {
           fill: '#000'
         }
       },
+
       tick: {
         inside: true,
         tickSize: 8,

docs/assets/examples/zh/axis/style.md

@@ -4,7 +4,7 @@ group: axis
 title: 通用样式配置
 keywords: lineChart,comparison,trend,line,axis
 order: 25-1
-cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/axis/style.png
+cover: /vchart/preview/axis-style_1.13.1.png
 option: lineChart#axes
 ---
 
@@ -23,6 +23,7 @@ option: lineChart#axes
 - `tick` 坐标轴刻度线配置
 - `grid` 坐标轴网格线配置
 - `title` 坐标轴标题配置
+- `unit` 坐标轴单位配置
 
 ## 代码演示
 
@@ -62,6 +63,15 @@ const spec = {
           fill: '#000'
         }
       },
+      unit: {
+        visible: true,
+        text: 'Unit of right axis',
+        style: {
+          // dx: -18,
+          dy: -8
+          // textAlign: 'right'
+        }
+      },
       tick: {
         visible: true,
         tickStep: 2,
@@ -87,6 +97,15 @@ const spec = {
         space: 12,
         text: 'Left axis title'
       },
+      unit: {
+        visible: true,
+        text: 'Unit of left axis',
+        style: {
+          // dx: -18,
+          dy: -8
+          // textAlign: 'right'
+        }
+      },
       label: {
         formatMethod: val => `${val}°C`,
         style: {
@@ -121,6 +140,7 @@ const spec = {
           fill: '#000'
         }
       },
+
       tick: {
         inside: true,
         tickSize: 8,

docs/public/vchart/preview/axis-style_1.13.1.png

@@ -63,7 +63,7 @@ const crossEnvs = bundle_analyze_mode ? {} : {
   },
 };
 
-const esEntries = ['index-harmony', 'index-harmony-simple'];
+const esEntries = bundle_analyze_mode ? [] : ['index-harmony', 'index-harmony-simple'];
 const umdEntries = Object.keys(crossEnvs)
   .map(env => crossEnvs[env].input)
   .filter((input, index, arr) => arr.indexOf(input, 0) === index);

packages/vchart/bundler.config.js

@@ -37,7 +37,7 @@ import type { IRegion } from '../../region/interface';
 import { ComponentTypeEnum } from '../../component/interface';
 // eslint-disable-next-line no-duplicate-imports
 import type { IComponent, IComponentConstructor } from '../../component/interface';
-import type { IMark } from '../../mark/interface';
+import type { IMark, IRectMark } from '../../mark/interface';
 // eslint-disable-next-line no-duplicate-imports
 import { MarkTypeEnum } from '../../mark/interface';
 import type { IEvent } from '../../event/interface';
@@ -65,7 +65,6 @@ import { ChartEvent, VGRAMMAR_HOOK_EVENT } from '../../constant/event';
 import type { IGlobalScale } from '../../scale/interface';
 import { DimensionEventEnum } from '../../event/events/dimension';
 import type { ITooltip } from '../../component/tooltip/interface';
-import type { IRectMark } from '../../mark/rect';
 import { calculateChartSize, mergeUpdateResult } from '../util';
 import { isDiscrete } from '@visactor/vscale';
 import { updateDataViewInData } from '../../data/initialize';

packages/vchart/src/chart/base/base-chart.ts

@@ -1,5 +1,4 @@
-import type { Compiler } from './compiler';
-import type { ICompilableInitOption, ICompilable } from './interface';
+import type { ICompilableInitOption, ICompilable, ICompiler } from './interface';
 
 /** 可以编译的类的统一基类 */
 export abstract class CompilableBase implements ICompilable {
@@ -8,7 +7,7 @@ export abstract class CompilableBase implements ICompilable {
     return this._option;
   }
 
-  getCompiler: () => Compiler;
+  getCompiler: () => ICompiler;
 
   constructor(option: ICompilableInitOption) {
     this._option = option;

packages/vchart/src/compile/compilable-base.ts

@@ -33,6 +33,7 @@ export interface IGrammarItemMap<T extends IGrammarItem> {
 export type ICompilerModel = Record<GrammarType, IProductMap<IGrammarItem>>;
 
 export interface ICompiler {
+  isInited?: boolean;
   getVGrammarView: () => IView;
   getModel: () => ICompilerModel;
   getRenderer: () => IRenderer;

packages/vchart/src/compile/interface/compilable-item.ts

@@ -1,4 +1,5 @@
 import type {
+  IData,
   IElement,
   IGroupMark,
   IMark,
@@ -265,7 +266,7 @@ export abstract class CompilableMark extends GrammarItem implements ICompilableM
     // 绑定数据
     const dataProduct = this._data.getProduct();
     if (isValid(this._product) && isValid(dataProduct)) {
-      this._product.join(dataProduct, this.key, undefined, this.getGroupKey());
+      this._product.join(dataProduct as IData, this.key, undefined, this.getGroupKey());
     }
   }
 

packages/vchart/src/compile/mark/compilable-mark.ts

@@ -30,6 +30,7 @@ export interface IMarkStateManager {
     isMultiMark?: boolean
   ) => 'in' | 'out' | 'skip';
   checkState: (renderNode: IElement, datum: Datum | Datum[]) => StateValue[];
+  updateLayoutState: (noRender?: boolean) => void;
 }
 
 export interface IMarkData extends ICompilableData {

packages/vchart/src/compile/mark/interface.ts

@@ -3,7 +3,7 @@ import type { ITickDataOpt } from '@visactor/vrender-components';
 import type { IBaseScale } from '@visactor/vscale';
 // eslint-disable-next-line no-duplicate-imports
 import { isContinuous } from '@visactor/vscale';
-import type { IGroup, IGraphic } from '@visactor/vrender-core';
+import type { IGraphic } from '@visactor/vrender-core';
 // eslint-disable-next-line no-duplicate-imports
 import type {
   IOrientType,
@@ -24,7 +24,6 @@ import type { ISeries } from '../../series/interface';
 import { ChartEvent } from '../../constant/event';
 import { LayoutZIndex } from '../../constant/layout';
 import { animationConfig } from '../../animation/utils';
-import type { LooseFunction } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
 import {
   degreeToRadian,
@@ -33,7 +32,6 @@ import {
   array,
   get,
   isArray,
-  isBoolean,
   isFunction,
   isNil,
   isValid,
@@ -45,7 +43,6 @@ import type { ITransformOptions } from '@visactor/vdataset';
 // eslint-disable-next-line no-duplicate-imports
 import { DataView } from '@visactor/vdataset';
 import { GridEnum } from '@visactor/vgrammar-core';
-import type { IComponentMark } from '../../mark/component';
 // eslint-disable-next-line no-duplicate-imports
 import { registerComponentMark } from '../../mark/component';
 import { Factory } from '../../core/factory';
@@ -56,6 +53,7 @@ import { GroupFadeOut, GroupFadeIn } from '@visactor/vrender-core';
 import { scaleParser } from '../../data/parser/scale';
 import { registerDataSetInstanceParser } from '../../data/register';
 import { getFormatFunction } from '../util';
+import type { IComponentMark } from '../../mark/interface/mark';
 
 export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, any> = any> // FIXME: 补充公共类型，去掉 Record<string, any>
   extends BaseComponent<T>
@@ -561,7 +559,7 @@ export abstract class AxisComponent<T extends ICommonAxisSpec & Record<string, a
         // 处理纵轴的标题样式
         if (autoRotate && isNil(titleAngle)) {
           titleAngle = spec.orient === 'left' ? -90 : 90;
-          titleTextStyle = DEFAULT_TITLE_STYLE[spec.orient];
+          titleTextStyle = (DEFAULT_TITLE_STYLE as any)[spec.orient];
         }
       }