feat: add forward pyramid diagram (#7232)

Author: Orcish-Y

__tests__/integration/snapshots/static/alphabetIntervalPyramidReverse.svg

@@ -0,0 +1,39 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalPyramidReverse(): G2Spec {
+  return {
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '页面', value: 200 },
+      { text: '页面1', value: 400 },
+      { text: '页面2', value: 600 },
+      { text: '页面3', value: 800 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      stroke: '#ff0000',
+      reverse: true,
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'pyramid',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+      color: { type: 'ordinal', range: ['red', 'green', 'blue', '#e45ca2'] },
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-pyramid-reverse.ts

@@ -13,6 +13,7 @@ export { alphabetIntervalLabelOverflowStroke } from './alphabet-interval-label-o
 export { alphabetIntervalDataSort } from './alphabet-interval-data-sort';
 export { alphabetIntervalFunnel } from './alphabet-interval-funnel';
 export { alphabetIntervalPyramid } from './alphabet-interval-pyramid';
+export { alphabetIntervalPyramidReverse } from './alphabet-interval-pyramid-reverse';
 export { bodyPointScatterPlot } from './body-point-scatter-plot';
 export { bodyPointScatterPlotSizeOpacity } from './body-point-scatter-plot-size-opacity';
 export { bodyPointScatterPlotOpacity } from './body-point-scatter-plot-opacity';

__tests__/plots/static/index.ts

@@ -279,6 +279,74 @@ chart.render();
 - Consistent color coding for corresponding stages facilitates comparison
 - You can clearly observe differences in conversion efficiency across channels at various stages
 
+Example 4: **Intuitive and Visual Chart Form, Often Used to Display Hierarchical Structures or Distribution Proportions**
+
+Company hierarchy pyramid structure, where employees are divided into multiple levels based on their rank, with significant differences in population proportions, responsibilities, and authority across levels, intuitively reflecting the hierarchical differentiation within the company.
+
+```js | ob { inject: true  }
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+});
+
+chart.options({
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: 'Top Level', value: 5 },
+      { text: 'Upper Middle', value: 10 },
+      { text: 'Middle', value: 20 },
+      { text: 'Lower Middle', value: 25 },
+      { text: 'Bottom Level', value: 40 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      reverse: true,
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'pyramid',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+      color: { type: 'ordinal' },
+    },
+    labels: [
+      { 
+        text: (d) => d.text, 
+        position: "inside" 
+      },
+      { 
+        text: (d) => d.value + "%", 
+        position: "inside", 
+        style: { dy: 15 } 
+      },
+    ]
+  })
+
+chart.render();
+```
+
+**Explanation**:
+- Uses `reverse: true` to change the narrowing position of the funnel chart
+- Population proportions should decrease layer by layer, reflecting the "wide bottom, narrow top" structure
+- Population percentages for each level are clearly labeled, facilitating comparison of quantities or proportions between different groups
+- Pyramid shape intuitively displays hierarchical distribution and stratification characteristics
+
 ### Unsuitable Use Cases
 
 Example 1: **Not Suitable for Unordered Data or Data Without Clear Hierarchy**

site/docs/charts/funnel.en.md

@@ -275,6 +275,75 @@ chart.render();
 - 通过相同的颜色编码对应相同的阶段，便于比较
 - 可以清晰地观察到不同渠道在各个阶段的转化效率差异
 
+例子 4：**直观、形象的图表形式，常用于展示层级结构或分布比例**
+
+公司职级金字塔结构，根据职级高低将员工划分为多个层级，各层级在人数比例、职责与权限上存在显著差异，直观体现了公司内部的层级分化情况。
+
+```js | ob { inject: true  }
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+});
+
+chart.options({
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '顶层', value: 5 },
+      { text: '中上层', value: 10 },
+      { text: '中等', value: 20 },
+      { text: '中下层', value: 25 },
+      { text: '底层', value: 40 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      reverse: true,
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'pyramid',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+      color: { type: 'ordinal' },
+    },
+    labels: [
+      { 
+        text: (d) => d.text, 
+        position: "inside" 
+      },
+      { 
+        text: (d) => d.value + "%", 
+        position: "inside", 
+        style: { dy: 15 } 
+      },
+    ]
+  })
+
+chart.render();
+```
+
+**说明**：
+- 使用 `reverse: true` 改变漏斗图收口位置
+- 人数比例应逐层递减，反映“底宽顶尖”的结构
+- 各层级人口占比清晰标注，便于比较不同群体的数量或比例
+- 金字塔形状直观展现阶层分布和分层特点
+
+
 ### 不适合的场景
 
 例子 1: **不适合展示无序或无明显层级关系的数据**

site/docs/charts/funnel.zh.md

@@ -455,6 +455,7 @@ Configure the style of the `interval` mark.
 | shadowBlur             | Gaussian blur coefficient of the graphic shadow                                                                                                                                      | number \| (d, index, data, column) => number                     | -                  |          |
 | shadowOffsetX          | Horizontal distance of the shadow from the graphic                                                                                                                                   | number \| (d, index, data, column) => number                     | -                  |          |
 | shadowOffsetY          | Vertical distance of the shadow from the graphic                                                                                                                                     | number \| (d, index, data, column) => number                     | -                  |          |
+| reverse                | Set the narrowing direction for funnel and pyramid charts (added in v5.4.8)                                                                                                          | boolean                                                          | `false`            |          |
 | cursor                 | Mouse cursor style. Same as CSS cursor style.                                                                                                                                        | string \| (d, index, data, column) => string                     | `default`          |          |
 
 Try it out:
@@ -492,8 +493,8 @@ chart.options({
     radiusTopLeft: 20,
     radiusTopRight: 20,
     insetBottom: 5,
-    // 绘图属性
-    fill: (d) => (d.name === 'London' ? '#688FD4' : '#55BECC'), // 绘图属性也可以是一个回调函数
+    // Drawing properties
+    fill: (d) => (d.name === 'London' ? '#688FD4' : '#55BECC'), // Drawing properties can also be callback functions
     fillOpacity: 0.9,
     stroke: '#fff',
     lineWidth: 1,

site/docs/manual/core/mark/interval.en.md

@@ -456,6 +456,7 @@ chart.render();
 | shadowBlur             | `interval` 图形阴影的高斯模糊系数                                                                                            | number \| (d, index, data, column) => number                     | -                         |      |
 | shadowOffsetX          | 设置阴影距`interval` 图形的水平距离                                                                                          | number \| (d, index, data, column) => number                     | -                         |      |
 | shadowOffsetY          | 设置阴影距`interval` 图形的垂直距离                                                                                          | number \| (d, index, data, column) => number                     | -                         |      |
+| reverse                | 设置漏斗图、金字塔图的收口方向 （v5.4.8 版本新增）                                                                           | boolean                                                          | `false`                   |      |
 | cursor                 | 鼠标样式。同 css 的鼠标样式。                                                                                                | string \| (d, index, data, column) => string                     | `default`                 |      |
 
 尝试一下：

site/docs/manual/core/mark/interval.zh.md

@@ -28,6 +28,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VpuRSZGqnlUAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "pyramid-forward.ts",
+      "title": {
+        "zh": "正向金字塔图",
+        "en": "pyramid-forward"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oKnDQINKBvAAAAAAQpAAAAgAemJ7AQ/original"
+    },
     {
       "filename": "mirror-funnel.ts",
       "title": {