apache / apache/echarts

[Feature] Better integration of time axis and axisPointer label formatter

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

Description

### What problem does this feature solve?

I use `time` axes. My datasets usually have a granularity of days. When there are only few entries in a dataset, the default axisPointer label [apparently](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/scale/Time.ts#L129) chooses the [`second`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/util/time.ts#L52) formatter for lack of a better range. That suggests to the viewer a higher granularity in the data than is actually present.

You currently have very nice functionality to specify the formatting of dates for axis ticks in [`axisLabel.formatter`](https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter). It would be great if there was a string-formatter way to use that syntax for the `axisPointer.label.formatter` as well.

As it stands I think I would have to write a custom-code formatter to call `TimeScale.getFormattedLabel()` myself.

### What does the proposed API look like?

From a cursory glance through the source I think there are several ways to go about implementing somthing of sorts. Minimally, I think I might be satisfied with being able to ~~specify the default granularity of the `TimeScale`:~~ have `precision` percolate appropriately:

```ts
//...
getLabel(tick: TimeScaleTick, opt?: {precision?: string}): string {
const useUTC = this.getSetting('useUTC');
const chosenFormat = opt?.precision || getDefaultFormatPrecisionOfInterval(getPrimaryTimeUnit(this._minLevelUnit));
return format(
tick.value,
fullLeveledFormatter[chosenFormat] || fullLeveledFormatter.second,
useUTC,
this.getSetting('locale')
);
}
```
leading to

```js
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
precision: "day"
}
}
},
xAxis: {
type: 'time',
},
//...
}
```

Ideally I could just use `leveledFormat()` syntax in the `axisPointer.label.formatter`, if the triggering axis was a time axis:

```js
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
formatter: "{yyyy}-{MM}-{dd}"
}
}
},
xAxis: {
type: 'time',
},
//...
}
```
Couldn't that be achieved by using [`makeLabelFormatter`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/coord/axisHelper.ts#L233) in [`getValueLabel`](https://github.com/apache/echarts/blob/fc6656f12ce75d02bc53807532d72168fce372b9/src/component/axisPointer/viewHelper.ts#L147), that seems to cover most of the functionality anyway?

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.