apache / apache/echarts

[Bug] X-axis label formatter doesn't support callback even it should according to the type

Open
#20,027 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.5

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5JALZW0A0J6AhrngDIcBGVADZFUpWADNgAJwYcwYKtNHtS5Kh2WwAFADcOQgK5UWsCNAAmVDAEoEAPlj6jVWAGpYAImTlf5AL6ebOLoDDBgABZEegbGpuZWtg5Osa4enkgAstmBwSEWHOTRznFmltZ28I4laV5IFv4AdMjZmbmq6BHAhloxLvHlSVUpLu51ABLj_gRIDAz-ADrQ9U0tOUEdsAzmhorFqQOJldWpYxmT07PzSyvNWet54nhUAMYwFvv9ZUfJNWdIFxmc0ueDwi2WDTurXaIS2ECEQnwr3en1KCQqv1O6SQEQil2BM1B_mQAGUyeDbms2htxP5VHT0P48uQcPgVOIKNQ6DVaCQmSRntIIFRCLAANqqMT5eQcIgS2HoMWeABMAAZlQAWAC0qoAbFqAIwAZgAKqqDQQAKwAdgIeoAWkFYAbLaqALqmTaKlXq7V6w2m9VW20Op3Ko3uz0K8U-zU6_XGs1G4N23WO0zKzUe2BemNquP-xOqjUp0MZg0ADmzuaV-b9CcDltLaadxstHprsfrAbNuub6edGut1ejtd98Z7qttNtTA-VuvduY7sM5NFgtER0GY9JIHZQ_gA3EA

### Steps to Reproduce

Try to use a formatter function for the xAxisLabel, like the following:

```
xAxis: {
type: 'time',
axisLabel: {
formatter: {
year: (value, index) => value + " {yyyy}",
month: (value, index) => value + "{MMM}",
day: (value, index) => value + "{d}. {MMM}",
hour: (value, index) => value + "{HH}:{mm}\n{d}. {MMM}",
minute: (value, index) => value + "{HH}:{mm}\n{d}. {MMM}",
second: (value, index) => value + "{HH}:{mm}:{ss}\n{d}. {MMM}",
millisecond: (value, index) => value + "{hh}:{mm}:{ss} {SSS}\n{d}. {MMM}",
}
}
},
```

The declared type "AxisLabelValueFormatter" cannot be used for xAxis of type time, as an internal error occurs.
![image](https://github.com/apache/echarts/assets/44203645/e852c272-872c-4adb-9f3d-6bad064f6550)

The function is called by the leveledFormat(...). It checks on high-level for function calls (see line 138 in following screenshot), but not inside the object itself.
![image](https://github.com/apache/echarts/assets/44203645/39b74b46-256b-4e61-85a8-3e9179268c4a)

Eventually, the error happens in the format functionality, as a string is expected and not a function.
![image](https://github.com/apache/echarts/assets/44203645/e0a2747a-b3f1-4332-87de-a425f3e8f817)

My suggestion is to check if the given "time" parameter is a function, and than call the function, else as it is:

```
//Current:
return (template || '').replace(/{yyyy}/g, y + '').replace(/{yy}/g, pad(y % 100 + '', 2)).replace(/{Q}/g, q + '').replace(/{MMMM}/g, month[M - 1]).replace(/{MMM}/g, monthAbbr[M - 1]).replace(/{MM}/g, pad(M, 2)).replace(/{M}/g, M + '').replace(/{dd}/g, pad(d, 2)).replace(/{d}/g, d + '').replace(/{eeee}/g, dayOfWeek[e]).replace(/{ee}/g, dayOfWeekAbbr[e]).replace(/{e}/g, e + '').replace(/{HH}/g, pad(H, 2)).replace(/{H}/g, H + '').replace(/{hh}/g, pad(h + '', 2)).replace(/{h}/g, h + '').replace(/{mm}/g, pad(m, 2)).replace(/{m}/g, m + '').replace(/{ss}/g, pad(s, 2)).replace(/{s}/g, s + '').replace(/{SSS}/g, pad(S, 3)).replace(/{S}/g, S + '');

//Suggestion
return ((typeof template ==='function' ? template() : template) || '').replace(/{yyyy}/g, y + '').replace(....);
```

### Current Behavior

Empty x-axis is displayed

![image](https://github.com/apache/echarts/assets/44203645/70815d21-4717-43b8-aabc-aa7bbbfd2c66)

### Expected Behavior

X-axis gets formatted according to the given functionality

### Environment

```markdown
- OS:
- Browser: Version 125.0.6422.142 (Official Build) (64-bit)
- Framework:
```

### Any additional comments?

Idea is to resolve with this the not supported timezone problem, by simple using specific formatters

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.