add button positioning capability to DataView component #20969

piotrzarzycki21 · 2025-05-13T13:15:23Z

Add buttonPosition option to DataView feature that allows users to customize the position of buttons in the DataView panel. This enhances flexibility by enabling precise positioning using top, right, bottom, and left properties.

Test case added in area-large-dataView.html.

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

Adds positioning capability to DataView buttons in the toolbox component.

Fixed issues

Details

Before: What was the problem?

Previously, the DataView buttons were fixed at the bottom right of the panel with a hardcoded style: position:absolute;bottom:5px;left:0;right:0. Users had no way to customize the position of these buttons to match their UI requirements.

After: How does it behave after the fixing?

After this change, users can specify exact positioning for the DataView buttons using the buttonPosition property which leverages the existing BoxLayoutOptionMixin type. This allows precise control over the top, right, bottom, and left positioning of the buttons.

Example usage:

option = {
  toolbox: {
    feature: {
      dataView: {
        readOnly: false,
        lang: ['Cancel', 'OK', 'View data'],
        buttonPosition: {
          right: '5px',
          top: '5px'
        }
      }
    }
  }
}

Document Info

One of the following should be checked.

This PR doesn't relate to document changes
The document should be updated later
The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

This PR doesn't depend on ZRender changes.

Related test cases or examples to use the new APIs

A test case has been added in area-large-dataView.html demonstrating the new button positioning functionality.

Others

Merging options

Please squash the commits into a single one when merging.

Other information

Add buttonPosition option to DataView feature that allows users to customize the position of buttons in the DataView panel. This enhances flexibility by enabling precise positioning using top, right, bottom, and left properties. Test case added in area-large-dataView.html.

echarts-bot · 2025-05-13T13:15:30Z

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

github-actions · 2025-05-13T13:22:17Z

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20969@e88138d

piotrzarzycki21 · 2025-05-13T14:54:38Z

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20969@e88138d

It looks like this auto build doesn't actually build what I have in PR, instead something else.

test/area-large-dataView.html

src/component/toolbox/feature/DataView.ts

…ositioning_feature

piotrzarzycki21 · 2025-06-12T11:13:18Z

@Ovilia Thanks for review. I have made my changes but I have problem with commit. I could try to figure out what is all about but maybe I'm just missing something. I have pull changes from upstream master to my branch before that commit. Here is what I'm getting now:

> echarts@5.6.0 lint
> npx eslint --cache --cache-location node_modules/.cache/eslint src/**/*.ts ssr/client/src/**/*.ts extension-src/**/*.ts


> echarts@5.6.0 checktype
> tsc --noEmit

�[96msrc/component/tooltip/TooltipHTMLContent.ts�[0m:�[93m22�[0m:�[93m31�[0m - �[91merror�[0m�[90m TS2305: �[0mModule '"zrender/src/core/dom"' has no exported member 'transformLocalCoordClear'.

�[7m22�[0m import { transformLocalCoord, transformLocalCoordClear } from 'zrender/src/core/dom';
�[7m  �[0m �[91m                              ~~~~~~~~~~~~~~~~~~~~~~~~�[0m


Found 1 error.

husky - pre-commit hook exited with code 2 (error)

Ovilia · 2025-06-12T11:49:06Z

You need to clone zrender and use npm link to use it since the code in master branch of ECharts requires some updates that are not released on zrender npm:

git clone git@github.com:ecomfe/zrender.git
cd zrender
npm i
npm link
# cd to echarts dir
npm link zrender
# run `npm run lint` to check it works

…buttonPosition - Improved code readability by reducing excessive indentation in string concatenation - Example file demonstrating the use of buttonPosition property for custom positioning PR: apache#20969

piotrzarzycki21 · 2025-06-13T16:10:24Z

You need to clone zrender and use npm link to use it since the code in master branch of ECharts requires some updates that are not released on zrender npm:
git clone git@github.com:ecomfe/zrender.git
cd zrender
npm i
npm link
# cd to echarts dir
npm link zrender
# run `npm run lint` to check it works

Thanks @Ovilia I have pushed changes which address your comments.

Ovilia · 2025-06-16T03:35:17Z

src/component/toolbox/feature/DataView.ts

+            + ';left:' + buttonPosition.left
+            + ';right:' + buttonPosition.right
+            + ';bottom:' + buttonPosition.bottom
+            + ';';


Most of the top/left/right/bottom options uses number type for pixel values, and most of them support percentage position relative to the container. I'd suggest using buttonExtraCssText instead of buttonPosition, similar to tooltip.extraCssText. In this way, we can provide more flexibility to developers and it's easier to implement.

@Ovilia I have applied your suggestion 4677f1e

…g for DataView styling PR: apache#20969

plainheart · 2025-06-17T00:23:09Z

src/component/toolbox/feature/DataView.ts

@@ -375,7 +377,8 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
        const blockMetaList = result.meta;

        const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'position:absolute;bottom:5px;left:0;right:0';
+        const buttonExtraCssText = model.get('buttonExtraCssText') || '';
+        buttonContainer.style.cssText = 'position:absolute;' + buttonExtraCssText;


buttonExtraCssText looks like it is for a single button rather than the button container, and can be misleading.

Do you suggest other naming than ?

How about buttonContainerExtraCssText?

@plainheart @Ovilia I have renamed it to suggested buttonContainerExtraCssText.

…r clarity PR: apache#20969

echarts-bot bot added PR: author is committer PR: awaiting doc Document changes is required for this PR. PR: awaiting review PR: first-time contributor labels May 13, 2025

pull-request-size bot added the size/S label May 13, 2025

Ovilia requested changes Jun 12, 2025

View reviewed changes

test/area-large-dataView.html Outdated Show resolved Hide resolved

src/component/toolbox/feature/DataView.ts Outdated Show resolved Hide resolved

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Jun 12, 2025

Merge remote-tracking branch 'upstream/master' into dataview_button_p…

f774419

…ositioning_feature

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Jun 12, 2025

- Fixed potential undefined error by adding default empty object for …

213b080

…buttonPosition - Improved code readability by reducing excessive indentation in string concatenation - Example file demonstrating the use of buttonPosition property for custom positioning PR: apache#20969

Ovilia requested changes Jun 16, 2025

View reviewed changes

refactor: replace buttonPosition object with buttonExtraCssText strin…

4677f1e

…g for DataView styling PR: apache#20969

pull-request-size bot added size/XS and removed size/S labels Jun 16, 2025

plainheart reviewed Jun 17, 2025

View reviewed changes

refactor: rename buttonExtraCssText to buttonContainerExtraCssText fo…

6086af9

…r clarity PR: apache#20969

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add button positioning capability to DataView component #20969

add button positioning capability to DataView component #20969

Uh oh!

piotrzarzycki21 commented May 13, 2025

Uh oh!

echarts-bot bot commented May 13, 2025

Uh oh!

github-actions bot commented May 13, 2025

Uh oh!

piotrzarzycki21 commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

piotrzarzycki21 commented Jun 12, 2025

Uh oh!

Ovilia commented Jun 12, 2025

Uh oh!

piotrzarzycki21 commented Jun 13, 2025

Uh oh!

Ovilia Jun 16, 2025

Uh oh!

piotrzarzycki21 Jun 16, 2025

Uh oh!

plainheart Jun 17, 2025

Uh oh!

piotrzarzycki21 Jun 17, 2025

Uh oh!

Ovilia Jun 19, 2025

Uh oh!

piotrzarzycki21 Jun 22, 2025

Uh oh!

Uh oh!

add button positioning capability to DataView component #20969

Are you sure you want to change the base?

add button positioning capability to DataView component #20969

Uh oh!

Conversation

piotrzarzycki21 commented May 13, 2025

Brief Information

What does this PR do?

Fixed issues

Details

Before: What was the problem?

After: How does it behave after the fixing?

Document Info

Misc

ZRender Changes

Related test cases or examples to use the new APIs

Others

Merging options

Other information

Uh oh!

echarts-bot bot commented May 13, 2025

Uh oh!

github-actions bot commented May 13, 2025

Uh oh!

piotrzarzycki21 commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

piotrzarzycki21 commented Jun 12, 2025

Uh oh!

Ovilia commented Jun 12, 2025

Uh oh!

piotrzarzycki21 commented Jun 13, 2025

Uh oh!

Ovilia Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

piotrzarzycki21 Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

plainheart Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

piotrzarzycki21 Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

Ovilia Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

piotrzarzycki21 Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!