feat(pie): 'itemRadiusScale' function added for pie series #19435

Pashted · 2023-12-23T23:58:04Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

itemRadiusScale function added for pie series to control the radius of each item

Fixed issues

#19020
#15674

Details

Before: What was the problem?

There was no easy option for pie charts to control the radius of items. In current version I can control either the whole pie radius or use some autocalculations with roseType option. May be, i can build many pies with single items and different start/end angles and personal pie radius, but this is mean also a lot of code around the lib every time. All this are not suitable for our tasks. Earlier we used dashboards in PowerBI and the same feature in PBI looked like:

After: How does it behave after the fixing?

The solution is very similar with scatter charts and its symbolSize option. Now (with this PR) i can pass custom function itemRadiusScale, which returns value from 0 to 1. That value is used within pie component to calculate outer radius for each item. In simple words, we now have a third dimension for each item, which represents the size from center to the outer circle, almost like a scatter has x and y coordinates and a personal radius.

If I provide custom non-linear function (see test file), I will get the same behaviour as in PBI. Like with logarithmic type Y-axis on XY charts, I can increase small numbers to see data more clearly.

Also, few calculated values (sum, maxValue) passed into getDataParams callback to make tooltip calculations easier. Not sure about necessary of maxValue, but sum is really helpful to calculate percents in formatters. And, when I disable some series on a legend, percents still calculated as I expected (it would be a pain without the sum option).

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 depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

test/pie-itemRadiusScale.html

here some content from the test file

Desktop.2023.12.24.-.02.04.56.05.mp4

Others

Merging options

Please squash the commits into a single one when merging.

Other information

This is my first PR here. Sorry, if i violated the rules (=

… the radius of each item

echarts-bot · 2023-12-23T23:58:10Z

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.

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.

Pashted · 2023-12-24T04:02:15Z

about tests... i selected 5.4.4-dev.20231116 as expected version while running them, because i found something similar in package.json. other versions have more errors in result.

some tests not working, cause of baidu connectivity issues with my network.

some just not working. i dont know why - they are not related with this PR.

testing from the console was completley failed - all tests run in parallel and i stuck in out of memory isssues

github-actions · 2023-12-24T11:27:47Z

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

Ovilia

This is a really fascinating feature and this PR is well-written! Thanks for your contribution. I like this feature but just want to make sure, can you give me a real world usage for this feature. #19020 is a good case but it only uses this feature when one bar is highlighted so it may not be convincing.

src/chart/pie/PieSeries.ts

Ovilia · 2023-12-26T09:15:51Z

src/chart/pie/PieSeries.ts

@@ -107,6 +109,7 @@ export interface PieSeriesOption extends
    type?: 'pie'

    roseType?: 'radius' | 'area'
+    itemRadiusScale?: (dataParams: PieCallbackDataParams) => number


I would suggest considering another name than radius because it may cause confusion with emphasis.scaleSize, which is the enlarging animation when emphasizing. You are welcomed to suggest a new name.

scalePercent
itemStyle.radius
itemStyle.scalePercent (preferred)

also it would be an itemStyle.scaleSize. but I think (not 100% sure yet =), i will lose the ability to use nonlinear functions. because percentages are calculated on the lib side in this case

I would personnally perfer itemStyle.radiusPercent to avoid using scaleXXX, but not with very strong preference. If only itemStyle.xxx is used but no series.xxx, I think we should skip the callback function.

In ECharts, for options support both value and percentage form (like radius, we usually use strings like '30%' to represent percentage. But since we don't support number type in our case, I think a 0-1 number type is acceptable.

Ovilia · 2023-12-26T09:20:51Z

test/pie-itemRadiusScale.html

+
+                /** example #2: add pie with the same angles,
+                 * but full radius and semitransparent background */
+                createBackgroundSeries([1, 2]),


I would suggest providing two new options series-pie.backgroundStyle and series-pie.backgroundStyle like series-bar.showBackground and series-bar.backgroundStyle, where series-pie.backgroundStyle.color can be a callback function so that developers can set the background according to the piece color.

You make make a seperate PR (or just in this if you like) for the background related feature because it also benifits the roseType pies.

Intuitively, it seems that the background style in the series root will be applied to the entire pie. it's not obvious that the function is called on every element. If I'm trying to intuitively understand property names, then it seems more logical for me to put the style of the elements into itemStyle. Like series-pie.itemStyle.backgroundStyle.color.

But this entry series-pie.backgroundStyle.opacity with a numeric type rather than a function seems clear to me. This tells me that transparency will work the same on all elements

Yes, I would slighter prefer to callback than under itemStyle because users don't have to write multiple times. Another option could be, series-pie.backgroundStyle.color has a default value 'auto' meaning use color of each piece. series-pie.colorBy is 'series' by default, so it's intuitively OK for the background to use the color of each piece.

test/pie-itemRadiusScale.html

Pashted · 2023-12-26T11:01:19Z

This is a really fascinating feature and this PR is well-written! Thanks for your contribution. I like this feature but just want to make sure, can you give me a real world usage for this feature. #19020 is a good case but it only uses this feature when one bar is highlighted so it may not be convincing.

Thanks for your time and so high evaluation of my work.

This feature is called "cross selection" or "cross filtering" in Power BI. Using one vertical bar in some chart for cross selection is just a special case. There is almost no limitation about source of the filter. There may be an item from another pie chart (with different grouping settings), or rows/columns/cells from a table or any other custom component, or even selected cities/regions on the map. The targets of cross filtering are also may be different. In addition to pies, it can be columns (vertical or horizontal) or “stacked” areas on XY charts.

There is some short youtube tutorial about cross filtering in powerbi with demo.

Also, employees in my company are often used such feature in PBI. On the next screenshot you can see a fragment from the real dashboard in PBI, where i selected few rows within the table

Ovilia · 2023-12-27T03:34:01Z

This is a really fascinating feature and this PR is well-written! Thanks for your contribution. I like this feature but just want to make sure, can you give me a real world usage for this feature. #19020 is a good case but it only uses this feature when one bar is highlighted so it may not be convincing.

Thanks for your time and so high evaluation of my work.

This feature is called "cross selection" or "cross filtering" in Power BI. Using one vertical bar in some chart for cross selection is just a special case. There is almost no limitation about source of the filter. There may be an item from another pie chart (with different grouping settings), or rows/columns/cells from a table or any other custom component, or even selected cities/regions on the map. The targets of cross filtering are also may be different. In addition to pies, it can be columns (vertical or horizontal) or “stacked” areas on XY charts.

There is some short youtube tutorial about cross filtering in powerbi with demo.

Also, employees in my company are often used such feature in PBI. On the next screenshot you can see a fragment from the real dashboard in PBI, where i selected few rows within the table

Thanks for you explanation! This sounds reasonable and I'm looking forward to it!

radiusPercent now supports number format in addition to function. test file updated.

Pashted · 2024-01-08T21:44:38Z

@Ovilia, I added my solution for background option. It's based on src/chart/bar/BarView.ts component. Please, leave a feedback.

Ovilia

Thanks for your update. I think we are quite close to the final edition!

Ovilia · 2024-01-15T08:41:36Z

src/chart/pie/PieSeries.ts

@@ -299,6 +318,11 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
            opacity: 1
        },

+        showBackground: false,
+        backgroundStyle: {
+            opacity: 1


Setting opacity: 1 by default is confusing and unconvenient. How about make it 0.25 by default?

Ovilia · 2024-01-15T08:43:45Z

src/chart/pie/PieView.ts

+        const animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
+        const drawBackground = seriesModel.get('showBackground', true);
+        const basicOuterRadius = getBasicPieLayout(seriesModel, api).r;
+        const bgStyle = seriesModel.getModel('backgroundStyle').getItemStyle();


If data.backgroundStyle is not supported, how should developers set each pie piece to be a different color other than the default colors? I would suggest supporting data.backgroundStyle but not data.showBackground (only series.showBackground is supported).

Ovilia · 2024-01-15T08:50:20Z

Please merge from the latest master branck to solve the lint problem.

feat(pie): 'itemRadiusScale' function added for pie series to control…

c711f3a

… the radius of each item

echarts-bot bot added PR: awaiting doc Document changes is required for this PR. PR: awaiting review PR: first-time contributor labels Dec 23, 2023

pull-request-size bot added the size/M label Dec 23, 2023

following the apache coding standard

0e29090

Pashted force-pushed the fix-19020 branch from 77c3b92 to 0e29090 Compare December 24, 2023 02:03

Ovilia requested changes Dec 26, 2023

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Dec 26, 2023

echarts-bot bot added the PR: awaiting review label Dec 30, 2023

hexiaokang approved these changes Jan 1, 2024

View reviewed changes

Ovilia removed the PR: awaiting review label Jan 2, 2024

maxValue, itemRadiusScale, pie-itemRadiusScale.html renamed.

a9eed59

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Jan 2, 2024

backgroundStyle option added.

1f544cc

radiusPercent now supports number format in addition to function. test file updated.

pull-request-size bot added size/L and removed size/M labels Jan 8, 2024

Pashted added 2 commits January 9, 2024 00:48

createBackgroundSeries function removed from the test file.

921cb9a

use zrUtil for radiusPercent type recognition

a0db5b4

Ovilia requested changes Jan 15, 2024

View reviewed changes

echarts-bot bot added the PR: revision needed label Jan 15, 2024

echarts-bot bot removed the PR: awaiting review label Jan 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(pie): 'itemRadiusScale' function added for pie series #19435

feat(pie): 'itemRadiusScale' function added for pie series #19435

Pashted commented Dec 23, 2023 •

edited

echarts-bot bot commented Dec 23, 2023

Pashted commented Dec 24, 2023

github-actions bot commented Dec 24, 2023 •

edited

Ovilia left a comment

Ovilia Dec 26, 2023

Pashted Dec 26, 2023 •

edited

Ovilia Dec 27, 2023

Ovilia Dec 26, 2023

Ovilia Dec 26, 2023

Pashted Dec 26, 2023

Ovilia Dec 27, 2023

Pashted commented Dec 26, 2023 •

edited

Ovilia commented Dec 27, 2023

Pashted commented Jan 8, 2024

Ovilia left a comment

Ovilia Jan 15, 2024

Ovilia Jan 15, 2024

Ovilia commented Jan 15, 2024

feat(pie): 'itemRadiusScale' function added for pie series #19435

Are you sure you want to change the base?

feat(pie): 'itemRadiusScale' function added for pie series #19435

Conversation

Pashted commented Dec 23, 2023 • edited

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

echarts-bot bot commented Dec 23, 2023

Pashted commented Dec 24, 2023

github-actions bot commented Dec 24, 2023 • edited

Ovilia left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pashted Dec 26, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pashted commented Dec 26, 2023 • edited

Ovilia commented Dec 27, 2023

Pashted commented Jan 8, 2024

Ovilia left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ovilia commented Jan 15, 2024

Pashted commented Dec 23, 2023 •

edited

github-actions bot commented Dec 24, 2023 •

edited

Pashted Dec 26, 2023 •

edited

Pashted commented Dec 26, 2023 •

edited