Allow custom domain and padding in yScale in LineChart

[ecgan]

Impacted plugin

None / Other

What

I would like to specify custom domain for the yScale in LineChart so that it appears nicer for my use case.

How

Currently the yScale for the LineChart is set like this:

jetpack/projects/js-packages/charts/src/components/line-chart/line-chart.tsx

Line 127 in 92cd80b

yScale={ { type: 'linear', nice: true } }

The code generates line charts like these:

• The yScale above does not allow us to specify a custom domain (for reference, see https://d3js.org/d3-scale/linear).
• It starts with 0 by default. If let's say we have a line with 3 data points [13000, 14000, 15000], the y-axis will start at 0, and there would be a big space gap between the line series and the bottom x-axis.
• As shown in the screenshots above, the line series may go above the visible max value on the y-axis or go below the visible min value on the y-axis. It's not clear what is the real max value or min value in the line series. It would be better if the line series is contained within the min and max values of the y-axis.

In WooCommerce Analytics, we would like to achieve a line chart like this:

We have an implementation that works like this:

/**
 * Calculate a nice domain for the y-axis.
 *
 * This is so that the chart looks nice and the lines don't touch the edge of the chart.
 */
const calculateNiceDomain = ( values: Array< number > ) => {
	const minValue = Math.min( ...values );
	const maxValue = Math.max( ...values );

	// Add 10% padding
	const range = maxValue - minValue;
	const padding = range * 0.1;

	// Round to nice numbers
	const niceMin = Math.floor( minValue - padding );
	const niceMax = Math.ceil( maxValue + padding );

	return [ niceMin, niceMax ];
};

// in component:
const allYValues = lines
	.map( ( line ) => line.data.map( line.yAccessor ) )
	.flat();

const yDomain = calculateNiceDomain( allYValues );

<XYChart
	xScale={ { type: 'time' } }
	yScale={ {
		type: 'linear',
		zero: false,
		domain: yDomain,
	} }
>

The above produces a line chart with yScale like this:

It would be great if we can incorporate this into LineChart component.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] WooCommerce Analytics: The issue revolves around improving the LineChart component for WooCommerce Analytics.
• [Feature] Monitor: Monitoring and visualizing data trends in analytics is crucial, which relates to the use of line charts.
• [Feature] Performance History: The requested feature aims to enhance performance data visualization, making it relevant to performance tracking.

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?