antvis / antvis/G2Plot

🐛 [BUG] Radial bar doesn't honor the scale info in the meta

Open
#3,689 0 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Bug description

The scale setting in the meta doesn't work.

### 📷 Step to reproduce

https://codesandbox.io/s/g2plot-issue-template-forked-ykmhj5?file=/index.ts

### 🏞 Expected result

If the max value in the meta is honored, than the outside ring should not fill the whole circle.

### 🚑 Any additional [like screenshots]

In the src/plots/radial-bar/adaptor.ts, the meta is not used at all.
![image](https://github.com/antvis/G2Plot/assets/606110/7d3625a4-55d6-4a74-ba1e-99ce4e6a9924)

I have a fix

```ts
// src/plots/radial-bar/adaptor.ts
/**
* meta 配置
* @param params
*/
export function meta(params: Params): Params {
const { options } = params;
const { yField, xField, data, isStack, isGroup, colorField, maxAngle, meta } = options;

let max = 0;
if (meta && meta.max !== undefined) {
max = getRadialMax(maxAngle, max);
} else {
const actualData = isStack && !isGroup && colorField ? getStackedData(data, xField, yField) : data;
const processData = processIllegalData(actualData, yField);
max = getScaleMax(maxAngle, yField, processData);
}

return flow(
scale({
[yField]: {
min: 0,
max: max,
},
})
)(params);
}
```
```ts
// src/plots/radial-bar/utils.ts
export function getScaleMax(maxAngle: number, yField: string, data: Data): number {
const yData = data.map((item) => item[yField]).filter((v) => v !== undefined);
const maxValue = yData.length > 0 ? Math.max(...yData) : 0;
return getRadialMax(maxAngle, maxValue);
}

export function getRadialMax(maxAngle: number, maxValue: number) {
const formatRadian = Math.abs(maxAngle) % 360;
if (!formatRadian) {
return maxValue;
}
return (maxValue * 360) / formatRadian;
}
```

* **G2Plot Version**:
* **Platform**:

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and read src/plots/radial-bar/adaptor.ts, where the issue notes that meta is not used. Then inspect src/plots/radial-bar/utils.ts and verify that the radial bar honors meta.max, so the outside ring no longer fills the whole circle when the maximum is larger than the data value.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.