[charts] Support BarChart with `Date` data #13471

alexfauquette · 2024-06-13T09:37:08Z

@JCQuintas I was looking at your PR #13454 and I thought about another way of doing it

https://codesandbox.io/p/sandbox/zealous-morning-9lw243?file=%2Fsrc%2FDemo.tsx%3A5%2C1

This PR try to go the other way.

In [charts] POC Support BarChart with scaletype time #13454 the Bar plot is adapted to support the time scale
In this one we create a new axis type that generate a band scale manipulating date. We could also make it kind of magic by keeping band type and just checking if the first data element is a Date

fixes #12537

Changelog

The band scale with Date data get a better default formater

mui-bot · 2024-06-13T09:41:23Z

Deploy preview: https://deploy-preview-13471--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against b3bec07

alexfauquette · 2024-06-13T10:26:34Z

packages/x-charts/src/context/CartesianContextProvider.tsx

+ location === 'tick'
+ ? timeScale.tickFormat(axis.tickNumber)(v)
+ : `${v.toLocaleString()}`);
+ // completedXAxis[axis.id].tickInterval = timeScale.ticks(axis.tickNumber);


Need to be sure the generated tick exist in the data

alexfauquette · 2024-06-13T10:27:32Z

packages/x-charts/src/context/CartesianContextProvider.tsx

@@ -224,6 +224,16 @@ function CartesianContextProvider(props: CartesianContextProviderProps) {
 ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap })
 : getColorScale(axis.colorMap)),
 };
+ if (axis.scaleType === 'ordinal-time') {


We could skip the craetion of the special scaletype with

Suggested change

if (axis.scaleType === 'ordinal-time') {

if (axis.data[0] instanceof Date) {

But that would add some kind of magic

JCQuintas · 2024-06-13T14:28:46Z

🤔 I think it can make a lot of sense to create this as a separate axis type, but I would probably want it also respect missing data points https://codesandbox.io/p/sandbox/zealous-morning-9lw243

It should behave like:

Instead of:

We could push that to the user instead too, to fill the gap, but I don't think that is a good idea.

alexfauquette · 2024-06-13T15:03:32Z

I would probably want it also respect missing data points

You can have missing data point by providing null values. But you need to provide the x value.
https://mui.com/x/react-charts/lines/#skip-missing-points

Respecting missing data point in time axis is a bit complex, because it's not well defined.

Of course, if you have

1, 2, 3, 4, 10, 11, 12 you can expect to have a bar with width=1
2, 4, 6, 10, 12 you can expect to have a bar with width=2
2, 3, 4, 6, 10, 12 you should probably have a bar with width=1 but with lots of holes

To do so we will have to compute what is the minimal distance between two consecutive values, expecting it to be a common divider.

In #13454 you overcome this difficulty by using timeDay but it does not work with the step between each point is 12h, 1h, 30min, 15min, ...

We could provide helpers to generate regular timestamp

JCQuintas · 2024-06-13T15:12:41Z

@alexfauquette yeah my idea would be for the users to provide either a function or a time|hour|minute|... string we can generate the correct data.

alexfauquette · 2024-06-14T07:37:50Z

I was think about something like

<BarChart
	xAxis={[{
		scale: 'ordinal-time',
		data: timeGenerator({
			from: new Date(2023, 5, 10),
			to: new Date(2023, 6, 15),
			step: 24 * 3600 * 1000
		})
	{/* ... */}
/>

But not convinced it's necessary. I assume if you have some data at regular intervals, you also have the time stamps.

@Janpot do you have some insight on this aspect: how to handle missing, or irregular time stamp for bar chart ?

Janpot · 2024-06-15T12:22:57Z

I assume the common use case would be grouped/aggregated data, e.g. revenue per day, or # of errors per hour. So fixed intervals, where missing data means 0, no bar. I'm not really sure how I'd translate that into an API.

JCQuintas · 2024-06-17T10:45:10Z

I assume the common use case would be grouped/aggregated data, e.g. revenue per day, or # of errors per hour. So fixed intervals, where missing data means 0, no bar. I'm not really sure how I'd translate that into an API

If you are consuming APIs you probably have these options. But real time data, as logs and IoT wouldn't have it in a consistent way.

We could always just add this and wait for extra input there too 😅

Janpot · 2024-06-17T12:45:42Z

But real time data, as logs and IoT wouldn't have it in a consistent way.

But how do you show raw realtime data in a bar chart? You'd always do some sort of bucketing in fixed intervals. What else would be the meaning of "a bar" on a time scale? Do you have a real world use-case of a bar chart with a time scale where the bars don't represent the same interval?

JCQuintas · 2024-06-17T13:10:10Z

@Janpot yeah, I agree with what you are saying, my point was more if we should provide the user with the means to aggregate the data and display it, or if the user should handle that themselves.

Janpot · 2024-06-17T15:47:46Z

@Janpot yeah, I agree with what you are saying, my point was more if we should provide the user with the means to aggregate the data and display it, or if the user should handle that themselves.

👍 got it. Perhaps it could be valuable to have built in aggregation in the "dataSet+dataKey" part of the API. And leave the option for raw definition in the "data" part of the API. To sort of provide the option for both a low and high level abstraction. Not sure, feels like something I would use. Defining the data as an aggregation feels like a more error-tolerant way of dealing with duplicate or missing X values, it would become a non-issue.

alexfauquette · 2024-06-18T13:12:14Z

packages/x-charts/src/hooks/useTicks.ts

+ const filteredDomain =
+ (typeof tickInterval === 'function' && domain.filter(tickInterval)) ||
+ (typeof tickInterval === 'object' && tickInterval) ||
+ domain;
 return [
- ...domain.map((value) => ({
+ ...filteredDomain.map((value) => ({


A bit out of scope, but it allows filtering tickets for band scale

JCQuintas · 2024-06-18T13:32:33Z

packages/x-charts/src/context/CartesianContextProvider.tsx

@@ -236,6 +245,15 @@ function CartesianContextProvider(props: CartesianContextProviderProps) {
 ? getOrdinalColorScale({ values: axis.data, ...axis.colorMap })
 : getColorScale(axis.colorMap)),
 };
+ if (axis.data?.[0] instanceof Date) {


Would a isDateData function work here?

const isDateData = (data?: any[]): data is Date[] => data?.[0] instanceof Date

JCQuintas · 2024-06-18T13:33:37Z

packages/x-charts/src/context/CartesianContextProvider.tsx

+ const timeScale = scaleTime(axis.data!, range);
+ completedXAxis[axis.id].valueFormatter =
+ axis.valueFormatter ??
+ ((v, { location }) =>
+ location === 'tick'
+ ? timeScale.tickFormat(axis.tickNumber)(v)
+ : `${v.toLocaleString()}`);


We could probably also create a dateValueFormatter and just completedXAxis[axis.id].valueFormatter = dateValueFormatter(...)

github-actions · 2024-06-19T11:37:21Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Alternative PoC

20f608f

test

242b64f

alexfauquette commented Jun 13, 2024

View reviewed changes

alexfauquette closed this Jun 13, 2024

alexfauquette reopened this Jun 13, 2024

JCQuintas mentioned this pull request Jun 17, 2024

[charts] POC Support BarChart with scaletype time #13454

Closed

JCQuintas changed the title ~~Alternative PoC~~ [charts] Support BarChart with Date data Jun 17, 2024

cleaning

f0bb34a

alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label Jun 18, 2024

alexfauquette marked this pull request as ready for review June 18, 2024 13:10

alexfauquette commented Jun 18, 2024

View reviewed changes

alexfauquette requested a review from JCQuintas June 18, 2024 13:12

JCQuintas approved these changes Jun 18, 2024

View reviewed changes

JCQuintas mentioned this pull request Jun 18, 2024

[charts] Divide CartesianProvider to use logic in Pro package #13531

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 19, 2024

Merge remote-tracking branch 'upstream/master' into poc-time-band-scale

b3bec07

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] Support BarChart with `Date` data #13471

[charts] Support BarChart with `Date` data #13471

alexfauquette commented Jun 13, 2024 •

edited by JCQuintas

mui-bot commented Jun 13, 2024 •

edited

alexfauquette Jun 13, 2024

alexfauquette Jun 13, 2024

JCQuintas commented Jun 13, 2024

alexfauquette commented Jun 13, 2024 •

edited

JCQuintas commented Jun 13, 2024

alexfauquette commented Jun 14, 2024

Janpot commented Jun 15, 2024 •

edited

JCQuintas commented Jun 17, 2024

Janpot commented Jun 17, 2024

JCQuintas commented Jun 17, 2024

Janpot commented Jun 17, 2024

alexfauquette Jun 18, 2024

JCQuintas Jun 18, 2024

JCQuintas Jun 18, 2024

github-actions bot commented Jun 19, 2024

	if (axis.scaleType === 'ordinal-time') {
	if (axis.data[0] instanceof Date) {

[charts] Support BarChart with Date data #13471

Are you sure you want to change the base?

[charts] Support BarChart with Date data #13471

Conversation

alexfauquette commented Jun 13, 2024 • edited by JCQuintas

Changelog

mui-bot commented Jun 13, 2024 • edited

alexfauquette Jun 13, 2024

Choose a reason for hiding this comment

alexfauquette Jun 13, 2024

Choose a reason for hiding this comment

JCQuintas commented Jun 13, 2024

alexfauquette commented Jun 13, 2024 • edited

JCQuintas commented Jun 13, 2024

alexfauquette commented Jun 14, 2024

Janpot commented Jun 15, 2024 • edited

JCQuintas commented Jun 17, 2024

Janpot commented Jun 17, 2024

JCQuintas commented Jun 17, 2024

Janpot commented Jun 17, 2024

alexfauquette Jun 18, 2024

Choose a reason for hiding this comment

JCQuintas Jun 18, 2024

Choose a reason for hiding this comment

JCQuintas Jun 18, 2024

Choose a reason for hiding this comment

github-actions bot commented Jun 19, 2024

[charts] Support BarChart with `Date` data #13471

[charts] Support BarChart with `Date` data #13471

alexfauquette commented Jun 13, 2024 •

edited by JCQuintas

mui-bot commented Jun 13, 2024 •

edited

alexfauquette commented Jun 13, 2024 •

edited

Janpot commented Jun 15, 2024 •

edited