docs: add trigger type

docs/assets/guide/en/tutorial_docs/Theme/Theme_Extension.md

@@ -1,5 +1,7 @@
 # VChart 扩展主题包
 
+- Repository Address: [https://github.com/VisActor/vchart-theme](https://github.com/VisActor/vchart-theme)
+
 The English version is working in progress.
 
 在默认主题的基础上，VChart 也封装了一系列开箱即用的扩展主题，以单独主题包的形式提供。这些主题默认没有内置在 VChart 里，而是支持用户按需使用，使用户可以通过更少的工作获得更美观宜人、更贴合使用场景的 VChart 图表。

docs/assets/guide/zh/tutorial_docs/Theme/Theme_Extension.md

@@ -1,5 +1,7 @@
 # VChart 扩展主题包
 
+- 仓库地址: [https://github.com/VisActor/vchart-theme](https://github.com/VisActor/vchart-theme)
+
 在默认主题的基础上，VChart 也封装了一系列开箱即用的扩展主题，以单独主题包的形式提供。这些主题默认没有内置在 VChart 里，而是支持用户按需使用，使用户可以通过更少的工作获得更美观宜人、更贴合使用场景的 VChart 图表。
 
 此外，VChart 针对现有组件库也做了单独的主题包。这些包将在下文分别介绍。

docs/assets/option/en/common/element-active-trigger.md

@@ -0,0 +1,29 @@
+{{ target: element-active-trigger }}
+
+<!-- ElementActiveSpec -->
+
+Event types include:
+
+`'pointerdown'
+| 'pointerup'
+| 'pointermove'
+// The pointer is not triggered at the same time as the pressed graphic
+| 'pointerupoutside'
+| 'pointerertap'
+| 'pointerover'
+| 'pointermove'
+| 'pointerenter'
+| 'pointerleave'
+| 'pointerout'
+| 'mousedown'
+| 'mouseup'
+| 'mouseupoutside'
+// Right-click operation
+| 'rightdown'
+| 'rightup'
+| 'rightupoutside'
+| 'click'
+`
+etc.
+
+For a list of all events, see: `EventType` in https://github.com/VisActor/VGrammar/blob/develop/packages/vgrammar-core/src/types/event.ts

docs/assets/option/en/common/hover.md

@@ -14,6 +14,10 @@ Hover interaction switch, enabled by default.
 
 Configuration for hover interaction trigger event.
 
+{{ use: trigger-spec}}
+
 ##${prefix} triggerOff(string|string[]) = ['pointermove', 'pointerleave']
 
-Configuration for hover interaction termination event.
+Configuration for hover interaction termination event.
+
+{{ use: trigger-spec}}

docs/assets/option/en/common/interaction.md

@@ -46,10 +46,14 @@ The state name corresponding to the active state
 
 Configuration of the trigger event for the interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of the end event for the interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-highlight
 
 Element highlight interaction, sets the state of the triggered element to highlighted, and the state of other elements to blurred; note that this interaction is not recommended to be used simultaneously with the default 'hover' interaction
@@ -66,10 +70,14 @@ The state name corresponding to the blurred state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of termination events for interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-select
 
 Element selection interaction, which sets the element's state to selected; note that this interaction is not recommended to be used simultaneously with the default `select` interaction
@@ -86,6 +94,8 @@ Whether multiple selections are supported
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | number | string[]) = 'pointerout'
 
 Configuration of termination events for interaction; supported configurations include:
@@ -94,6 +104,8 @@ Configuration of termination events for interaction; supported configurations in
 - number: timed clearing of selected state
 - other event names
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-highlight-by-legend
 
 Legend triggers element highlighting and blur state
@@ -123,10 +135,14 @@ State name corresponding to the blurred state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of termination events for interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-active-by-legend
 
 Legend triggers element activation state
@@ -150,10 +166,14 @@ State name corresponding to the activated state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of termination events for interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-highlight-by-group
 
 Sets the state of the triggering element and elements with the same group value (`groupKey`) as the triggering element to highlighted, and sets the state of other elements to blurred
@@ -170,10 +190,14 @@ State name corresponding to the blurred state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of termination events for interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-highlight-by-key
 
 Sets the state of the triggering element and elements with the same `key` as the triggering element to highlighted, and sets the state of other elements to blurred; generally needs to be used in conjunction with the `dataKey` configuration in the series
@@ -190,10 +214,14 @@ State name corresponding to the blurred state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of termination events for interaction
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-highlight-by-name
 
 Filter the triggering element based on `graphicName`, filter the highlighted elements based on `filterType` or `filterField`, set the highlighted elements to the highlighted state, and set other elements to the blurred state
@@ -232,8 +260,12 @@ State name corresponding to the blurred state
 
 Configuration of trigger events for interaction
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
+{{ use: element-active-trigger}}
+
 Configuration of termination events for interaction
 
 ##${prefix} type.element-highlight-by-graphic-name
@@ -252,10 +284,14 @@ The state name corresponding to the blur state.
 
 Configuration of the triggering event for the interaction.
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | string[]) = 'pointerout'
 
 Configuration of the termination event for the interaction.
 
+{{ use: element-active-trigger}}
+
 ##${prefix} type.element-select-by-graphic-name
 
 Element selection interaction, sets the state of all elements with the same name to selected; note that this interaction is not recommended to be used with the default `select` interaction (except for pictorial charts).
@@ -272,10 +308,14 @@ Whether multiple selection is supported.
 
 Configuration of the triggering event for the interaction.
 
+{{ use: element-active-trigger}}
+
 ###${prefix} triggerOff(string | number | string[]) = 'pointerout'
 
 Configuration of the termination event for the interaction; supported configurations include:
 
 - 'empty': Clicking on an empty space
 - number: Timed clearing of the selected state
 - Other event names
+
+{{ use: element-active-trigger}}

docs/assets/option/en/common/select.md

@@ -21,6 +21,10 @@ Selection mode configuration, default is `single` selection.
 
 Configuration of trigger events for select interaction.
 
+{{ use: trigger-spec}}
+
 ##${prefix} triggerOff(string|string[])
 
-Configuration of termination events for select interaction.
+Configuration of termination events for select interaction.
+
+{{ use: trigger-spec}}

docs/assets/option/en/common/trigger.md

@@ -1,3 +1,30 @@
 {{ target: trigger-spec }}
 
-<!-- ITriggerSpec -->
+<!-- ITriggerSpec -->
+
+Event types include:
+
+1. Basic events: `'pointerdown'| 'pointerup' | 'pointerupoutside' | 'pointertap'`, etc.
+
+For a list of all events, see: `BASE_EVENTS` in https://github.com/VisActor/VChart/blob/develop/packages/vchart/src/constant/event.ts
+
+2. Chart events:
+
+- `initialized` Chart instance initialization completed
+
+- `rendered` Triggered when the chart rendering method is called, indicating that the chart has executed the rendering logic, and will only be triggered once
+
+- `renderFinished` Event triggered each time the canvas rendering is completed, excluding the end of the animation
+
+, etc.
+
+For a list of all events, see: `ChartEvent` in https://github.com/VisActor/VChart/blob/develop/packages/vchart/src/constant/event.ts
+
+3. Events exposed by the VGrammar instance:
+
+- `beforeEvaluateData` triggers before data processing
+- `afterEvaluateData` triggers after data processing
+- `beforeEvaluateScale` triggers before scale processing
+- `afterEvaluateScale` triggers after scale processing
+  etc.
+  For a list of all events, see: `HOOK_EVENT` in https://github.com/VisActor/VGrammar/blob/develop/packages/vgrammar-core/src/graph/enums.ts

docs/assets/option/en/series/area.md

@@ -167,10 +167,10 @@ Total label, working when the data is stacked. Supported since version `1.3.0`.
 
 #${prefix} sampling(string)
 Data Sampling - Sampling method. Supported since version `1.6.0`.
-The downsampling strategy of the line chart when the amount of data is much larger than the pixels can effectively optimize the drawing efficiency of the chart when it is turned on. It is turned off by default, that is, all data points are drawn without filtering.
+The downsampling strategy of the area chart when the amount of data is much larger than the pixels can effectively optimize the drawing efficiency of the chart when it is turned on. It is turned off by default, that is, all data points are drawn without filtering.
 Optional values:
 
-- `'lttb'`: Using the Largest-Triangle-Three-Bucket algorithm, the trend, shape and extreme value of the sampled line can be guaranteed to the greatest extent.
+- `'lttb'`: Using the Largest-Triangle-Three-Bucket algorithm, the trend, shape and extreme value of the sampled data can be guaranteed to the greatest extent.
 - `'min'`: Get the minimum value of filter points
 - `'max'`: Take the maximum value of filter points
 - `'sum'`: Take the sum of filter points

docs/assets/option/en/series/bar.md

@@ -129,10 +129,10 @@ Total label, working when the data is stacked. Supported since version `1.3.0`.
 
 #${prefix} sampling(string)
 Data Sampling - Sampling method. Supported since version `1.6.0`.
-The downsampling strategy of the line chart when the amount of data is much larger than the pixels can effectively optimize the drawing efficiency of the chart when it is turned on. It is turned off by default, that is, all data points are drawn without filtering.
+The downsampling strategy of the bar chart when the amount of data is much larger than the pixels can effectively optimize the drawing efficiency of the chart when it is turned on. It is turned off by default, that is, all data points are drawn without filtering.
 Optional values:
 
-- `'lttb'`: Using the Largest-Triangle-Three-Bucket algorithm, the trend, shape and extreme value of the sampled line can be guaranteed to the greatest extent.
+- `'lttb'`: Using the Largest-Triangle-Three-Bucket algorithm, the trend, shape and extreme value of the sampled data can be guaranteed to the greatest extent.
 - `'min'`: Get the minimum value of filter points
 - `'max'`: Take the maximum value of filter points
 - `'sum'`: Take the sum of filter points

docs/assets/option/en/series/mosaic.md

@@ -1,6 +1,7 @@
 {{ target: series-mosaic }}
 
 <!-- IMosaicSeriesSpec -->
+
 **Mosaic Series**, only used for mosaic charts. **Only applicable to Cartesian coordinate systems**.
 
 {{ use: common-cartesian-series(
@@ -73,8 +74,91 @@ Default value is each bar corresponds to a bar background.
 #${prefix} label(Object)
 
 Label configuration.
-
 ##${prefix} position(string|Function) = 'outside'
 Label position.
 
-Since version `1.6.0`, in bar series, the `position` configuration can be in function form, for example:
+Since `1.6.0`, `position` configuration can be in function form in bar series, for example:
+
+```ts
+label: {
+  position: (datum: any) => {
+    return datum.year === '2000' ? 'top-right' : 'bottom-right';
+  };
+}
+```
+
+Optional string values ​​are:
+
+- `'outside'`
+- `'top'`
+- `'bottom'`
+- `'left'`
+- `'right'`
+- `'inside'`
+- `'inside-top'`
+- `'inside-bottom'`
+- `'inside-right'`
+- `'inside-left'`
+- `'top-right'` // Supported since `1.6.0`
+- `'top-left'` // Supported since `1.6.0`
+- `'bottom-right'` // Since `1.6.0` Supported
+- `'bottom-left'` // Supported since `1.6.0`
+
+##${prefix}filterByGroup(object)
+
+Effective since 1.12.0
+
+Filter label data by group in mosaic
+
+Note: If you customize the data filtering rules, `filterByGroup` will be invalid
+
+###${prefix} field(string)
+
+Group field
+
+###${prefix} type('min' | 'max')
+
+- 'min' filters the maximum value in the group
+
+- 'max' filters the minimum value in the group
+
+###${prefix} filter(Function)
+
+Customize data filtering conditions
+
+{{ use: component-label(
+prefix = '#' + ${prefix},
+noPosition = true,
+hasOverlap = true,
+hasSmartInvert = true,
+defaultOffset = 5,
+hasFilter = true
+) }}
+
+{{ use: series-bar-style(
+prefix = ${prefix}
+) }}
+
+#${prefix} totalLabel(Object)
+
+Total label, effective when the chart is in a stacked scene. Supported since `1.3.0` version.
+
+{{ use: component-total-label(
+prefix = '#' + ${prefix},
+) }}
+
+#${prefix} sampling(string)
+Data sampling - sampling method. Supported since `1.6.0` version.
+
+Mosaic map downsampling strategy when the amount of data is much larger than the pixel point. When enabled, it can effectively optimize the drawing efficiency of the chart. It is closed by default, that is, all data points are drawn without filtering.
+
+Optional value:
+
+- `'lttb'`: Using the Largest-Triangle-Three-Bucket algorithm, the trend, shape and extreme value of the sampled data can be guaranteed to the greatest extent.
+- `'min'`: get the minimum value of the filter point
+- `'max'`: get the maximum value of the filter point
+- `'sum'`: get the sum of the filter points
+- `'average'`: get the average of the filter points
+
+#${prefix} samplingFactor(number) = 1
+Data sampling - sampling factor. Supported since `1.6.0` version.