Feat/brush pivot #298

666haiwen · 2025-12-31T09:56:21Z

[中文版模板 / Chinese template]

🤔 This is a ...

🔗 Related issue link

🔗 Related PR link

🐞 Bugserver case id

💡 Background and solution

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

xile611 · 2025-12-31T10:01:36Z

packages/vseed/src/pipeline/spec/chart/pipes/markStyle/areaStyle.ts

      visible: true,
      style: {},
+      state: {
+        selected: {


状态可以考虑一下，是不是要统一到 inBrush 和 outOfBrush

Copilot

Pull request overview

This PR adds brush (selection) functionality for pivot charts in the vseed library. The main purpose is to enable users to brush/select data in charts with configurable brush types (rect, polygon, x, y), brush modes (single, multiple), and custom styling for selected and unselected data.

Key changes include:

Added new brush configuration properties (brushType, brushMode, inBrushStyle, outOfBrushStyle) to the brush type definitions
Applied brush state styling (selected/selected_reverse) across 11 different chart mark types (bar, area, line, point, pie, rose, funnel, cell, boxPlot, outlier, funnelTransform)
Updated the @visactor/vtable dependency from version 1.22.9-alpha.2 to 1.22.10-alpha.0
Added a demo example in the documentation showing brush functionality with pivot charts

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updated @visactor/vtable dependency and related package versions to 1.22.10-alpha.0
packages/vseed/src/types/properties/brush/zBrush.ts	Refactored brush type definitions, extracted common style config, added brushType and brushMode properties
packages/vseed/src/types/properties/brush/brush.ts	Added comprehensive documentation for brush types, modes, and styling options
packages/vseed/src/pipeline/spec/chart/pipes/brush/brush.ts	Added brushType and brushMode configuration to the brush spec generation
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/roseStyle.ts	Added brush state styling (selected/selected_reverse) for rose charts
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/pointStyle.ts	Added brush state styling for point marks
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/pieStyle.ts	Added brush state styling for pie charts with proper state merging
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/outlierStyle.ts	Added brush state styling for boxplot outlier marks
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/lineStyle.ts	Added brush state styling for line marks
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/funnelTransformStyle.ts	Added brush state styling for funnel transform elements
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/funnelStyle.ts	Added brush state styling for funnel charts
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/cellStyle.ts	Added brush state styling for cell/heatmap charts
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/boxPlotStyle.ts	Added brush state styling for boxplot marks
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts	Added brush state styling for bar charts
packages/vseed/src/pipeline/spec/chart/pipes/markStyle/areaStyle.ts	Added brush state styling for area charts
apps/website/package.json	Updated @visactor/vtable dependency version
apps/website/docs/zh-CN/playground/vseed.mdx	Added demo example showing brush functionality with pivot charts

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-31T10:02:03Z

packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts

+  const isPivot = isPivotChart(vseed)
+
+  // 在pivot场景下读取brush配置
+  const brushConfig = isPivot ? ((advancedVSeed.config as any)?.[chartType]?.brush ?? ({} as BrushConfig)) : null


The brush configuration retrieval logic is duplicated across 11 mark style files. Consider extracting this into a shared utility function to reduce code duplication and improve maintainability. For example, create a helper function like getBrushConfig(isPivot, config, chartType) that returns the brush configuration.

Copilot · 2025-12-31T10:02:03Z

packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts

+        selected: {
+          opacity: brushConfig?.inBrushStyle?.opacity ?? 1,
+          ...(brushConfig?.inBrushStyle?.stroke && { stroke: brushConfig.inBrushStyle.stroke }),
+          ...(brushConfig?.inBrushStyle?.lineWidth && { lineWidth: brushConfig.inBrushStyle.lineWidth }),
+        },
+        selected_reverse: {
+          // fill: '#ddd'
+          opacity: brushConfig?.outOfBrushStyle?.opacity ?? 0.2,
+          ...(brushConfig?.outOfBrushStyle?.stroke && { stroke: brushConfig.outOfBrushStyle.stroke }),
+          ...(brushConfig?.outOfBrushStyle?.lineWidth && { lineWidth: brushConfig.outOfBrushStyle.lineWidth }),
+        },


The brush state configuration (selected and selected_reverse) is duplicated across 11 mark style files with identical logic. Consider extracting this into a shared utility function like getBrushStateConfig(brushConfig) that returns the state object. This would reduce code duplication and make it easier to maintain consistent brush behavior across all chart types.

Copilot · 2025-12-31T10:02:03Z

packages/vseed/src/types/properties/brush/brush.ts

+   * @default 'rect'
+   */
+  brushType?: 'x' | 'y' | 'rect' | 'polygon'
+  /** 框选模式，单选还是多选，默认单选 */


The brushMode property lacks detailed documentation. Consider adding a description similar to brushType that explains what "single" and "multiple" modes do. For example: @description 定义刷选的模式 - 'single': 单选模式，每次只能有一个刷选框 - 'multiple': 多选模式，可以同时存在多个刷选框

Suggested change

/** 框选模式，单选还是多选，默认单选 */

/**

* 框选模式，单选还是多选

* @description 定义刷选的模式

* - `single`: 单选模式，每次只能有一个刷选框

* - `multiple`: 多选模式，可以同时存在多个刷选框

* @default 'single'

*/

Copilot · 2025-12-31T10:02:04Z

packages/vseed/src/pipeline/spec/chart/pipes/brush/brush.ts


  result.brush = {
    visible: true,
    removeOnClick: brush.removeOnClick,


The removeOnClick property only uses the value from brush.removeOnClick without falling back to the theme configuration like brushMode and brushType do. Consider using a similar fallback pattern: removeOnClick: brush.removeOnClick ?? theme.removeOnClick to maintain consistency with other properties.

Suggested change

removeOnClick: brush.removeOnClick,

removeOnClick: brush.removeOnClick ?? theme.removeOnClick,

Copilot · 2025-12-31T10:02:04Z

apps/website/docs/zh-CN/playground/vseed.mdx

+          console.log('brush,!!!!!', datum.__MeaName__, datum)
+          return selectedDimValueRef.current.length ? selectedDimValueRef.current.includes(datum['__Dim_X__']) : true
+        },
+        selectedReverseStateFilter: (datum) => {
+          console.log('brush,????', datum)
+          return selectedDimValueRef.current.length ? !selectedDimValueRef.current.includes(datum['__Dim_X__']) : false


Console.log statements should be removed before merging to production. These debug logs are left in the code and will clutter the browser console in production.

Copilot · 2025-12-31T10:02:04Z

apps/website/docs/zh-CN/playground/vseed.mdx

+      tableInstance.onVChartEvent('brushEnd', (args) => {
+        console.log('brushEnd', args)
+        selectedDimValueRef.current = args.value.inBrushData.map((dataItem) => dataItem.__Dim_X__)


Console.log statements should be removed before merging to production. These debug logs are left in the code and will clutter the browser console in production.

Copilot · 2025-12-31T10:02:05Z

apps/website/docs/zh-CN/playground/vseed.mdx

+    console.log('final spec = ', spec)
    console.log('builder', builder)


Console.log statements should be removed before merging to production. These debug logs are left in the code and will clutter the browser console in production.

Copilot · 2025-12-31T10:02:05Z

packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts

+          ...(brushConfig?.inBrushStyle?.lineWidth && { lineWidth: brushConfig.inBrushStyle.lineWidth }),
+        },
+        selected_reverse: {
+          // fill: '#ddd'


Commented-out code should be removed. If this was intended for debugging or testing purposes, it should be deleted before merging.

Suggested change

// fill: '#ddd'

666haiwen added 6 commits December 30, 2025 18:46

feat: demo of pivot brush

4aa02eb

Merge branch 'main' into feat/brush-pivot

6b05d48

feat: refactor code && fix lint error

7b8b31f

Merge branch 'main' into feat/brush-pivot

03387fc

feat: support pivot brush feature in pivotChart

c43017f

Merge branch 'main' into feat/brush-pivot

5d696cc

xile611 requested a review from Copilot December 31, 2025 09:58

Copilot started reviewing on behalf of xile611 December 31, 2025 09:59 View session

feat: update vtable version

f1c4bf1

xile611 reviewed Dec 31, 2025

View reviewed changes

Copilot AI reviewed Dec 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/brush pivot #298

Feat/brush pivot #298

666haiwen commented Dec 31, 2025

Uh oh!

xile611 Dec 31, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Copilot AI Dec 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  /** 框选模式，单选还是多选，默认单选 */
+  /**
+   * 框选模式，单选还是多选
+   * @description 定义刷选的模式
+   * - `single`: 单选模式，每次只能有一个刷选框
+   * - `multiple`: 多选模式，可以同时存在多个刷选框
+   * @default 'single'
+   */

	removeOnClick: brush.removeOnClick,
	removeOnClick: brush.removeOnClick ?? theme.removeOnClick,

		console.log('final spec = ', spec)
		console.log('builder', builder)

Feat/brush pivot #298

Are you sure you want to change the base?

Feat/brush pivot #298

Conversation

666haiwen commented Dec 31, 2025

🤔 This is a ...

🔗 Related issue link

🔗 Related PR link

🐞 Bugserver case id

💡 Background and solution

☑️ Self-Check before Merge

Uh oh!

xile611 Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants