feat: legend axis 根节点 className 兼容

Author: interstellarmt

src/ui/axis/axis.ts

@@ -64,6 +64,14 @@ export class Axis extends Component<AxisStyleProps> {
 
   render(attributes: RequiredAxisStyleProps, container: Group, specificAnimation?: GenericAnimation) {
     const { titleText, data, animate, showTitle, showGrid, dataThreshold, truncRange, classNamePrefix } = attributes;
+
+    // Set root container className
+    if (classNamePrefix) {
+      container.className = `axis ${classNamePrefix}axis`;
+    } else {
+      container.className = 'axis';
+    }
+
     const sampledData = sampling(data, dataThreshold).filter(({ value }) => {
       if (truncRange && value > truncRange[0] && value < truncRange[1]) return false;
       return true;

src/ui/legend/category.ts

@@ -84,8 +84,16 @@ export class Category extends Component<CategoryStyleProps> {
   }
 
   render(attributes: Required<CategoryStyleProps>, container: Group) {
-    const { width, height, x = 0, y = 0 } = this.attributes;
+    const { width, height, x = 0, y = 0, classNamePrefix } = this.attributes;
     const ctn = select(container);
+
+    // Set root container className
+    if (classNamePrefix) {
+      container.className = `legend-category ${classNamePrefix}legend`;
+    } else {
+      container.className = 'legend-category';
+    }
+
     container.style.transform = `translate(${x}, ${y})`;
 
     this.renderTitle(ctn, width!, height!);

src/ui/legend/continuous.ts

@@ -77,6 +77,14 @@ export class Continuous extends Component<ContinuousStyleProps> {
   }
 
   public render(attributes: Required<ContinuousStyleProps>, container: Group) {
+    // Set root container className
+    const { classNamePrefix } = attributes;
+    if (classNamePrefix) {
+      container.className = `legend-continuous ${classNamePrefix}legend`;
+    } else {
+      container.className = 'legend-continuous';
+    }
+
     // 渲染顺序
     // 1. 绘制 title, 获得可用空间
     // 2. 绘制 label, handle