chore: annotation (#2303)

packages/plots/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.1.3
+
+`2023-12-12`
+
+- 💄 代码逻辑优化
+- 🐞 修复 DualAxes Annotations 配置展示异常
+
+
 ## 2.1.2
 
 `2023-12-12`

packages/plots/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/plots",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "G2Plot Statistical chart",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"

packages/plots/src/core/annotation/core.ts

@@ -21,41 +21,42 @@ export abstract class Annotaion<T extends Record<string, any>> extends CustomEle
 
   attributeChangedCallback<Key extends keyof T>(name: Key): void {}
 
+  public update(attr?: Partial<T>, animate?: GenericAnimation) {
+    this.attr(mergeWithArrayCoverage({}, this.attributes, attr || {}));
+    return this.render?.(this.attributes as Required<T>, this, animate);
+  }
+
+  public clear() {
+    this.removeChildren();
+  }
+
+  public abstract render(
+    attributes: Required<T>,
+    container: Group,
+    animate?: GenericAnimation,
+  ): void | AnimationResult[];
+
   public getElementsLayout() {
     const { canvas } = this.chart.getContext();
     const elements = canvas.document.getElementsByClassName('element');
     const elementsLayout = [];
     elements.forEach((element) => {
-      // @ts-ignore
+      //@ts-expect-error
       const bbox = element.getBBox();
       const { x, y, width, height } = bbox;
+      const data = element['__data__'];
       elementsLayout.push({
         bbox,
         x,
         y,
         width,
         height,
-        key: element['__data__'].key,
-        data: element['__data__'],
+        key: data.key,
+        data,
       });
     });
     return elementsLayout;
   }
 
-  public update(attr?: Partial<T>, animate?: GenericAnimation) {
-    this.attr(mergeWithArrayCoverage({}, this.attributes, attr || {}));
-    return this.render?.(this.attributes as Required<T>, this, animate);
-  }
-
-  public clear() {
-    this.removeChildren();
-  }
-
-  public abstract render(
-    attributes: Required<T>,
-    container: Group,
-    animate?: GenericAnimation,
-  ): void | AnimationResult[];
-
   public bindEvents(attributes: T, container: Group): void {}
 }

packages/plots/src/core/annotation/index.ts

@@ -1,5 +1,44 @@
+import { Chart } from '@antv/g2';
+import { ANNOTATION_LIST } from '../constants';
 import { ConversionTag } from './conversion-tag';
 import { BidirectionalBarAxisText } from './bidirectional-bar-axis-text';
 
-export { Controller } from './controller';
-export const Annotaion = { ConversionTag, BidirectionalBarAxisText };
+const Annotaion = { ConversionTag, BidirectionalBarAxisText };
+
+export class Controller<T extends object> {
+  public chart: Chart;
+  public config: T;
+  public container: Map<string, any> = new Map();
+
+  constructor(chart: Chart, config: T) {
+    this.chart = chart;
+    this.config = config;
+    this.init();
+  }
+
+  init() {
+    ANNOTATION_LIST.forEach((annotation) => {
+      const { key, shape } = annotation;
+      const annotationOptions = this.config[key];
+      if (annotationOptions) {
+        const annotationInstance = new Annotaion[shape](this.chart, annotationOptions);
+        const { canvas } = this.chart.getContext();
+        canvas.appendChild(annotationInstance);
+        this.container.set(key, annotationInstance);
+      } else {
+        this.container.get(key)?.clear();
+      }
+    });
+  }
+  /**
+   * Update annotaions
+   */
+  update() {
+    if (!this.container.size) return;
+    ANNOTATION_LIST.forEach((annotation) => {
+      const { key } = annotation;
+      const annotationInstance = this.container.get(key);
+      annotationInstance?.update();
+    });
+  }
+}

packages/util/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/charts-util",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
   "description": "charts utils",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"