Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 16 commits into from
Jun 19, 2024
Merged

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

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4a3fedc
Divide cartesianContextProvider
JCQuintas Jun 18, 2024
765499e
Use new useCartesianContext hook
JCQuintas Jun 18, 2024
4575461
Fix import
JCQuintas Jun 18, 2024
67c106f
Fix import
JCQuintas Jun 18, 2024
2f03e6c
Fix missing component
JCQuintas Jun 18, 2024
9a3a6f1
Add exports
JCQuintas Jun 18, 2024
7341f89
Add .nice back to prevent issues
JCQuintas Jun 18, 2024
a5ee2ef
Both scale and domain should be nice
JCQuintas Jun 18, 2024
f9a953e
Add ticknumber to nice()
JCQuintas Jun 18, 2024
2c750e2
Update packages/x-charts/src/context/CartesianProvider/CartesianConte…
JCQuintas Jun 18, 2024
ca5319a
Dont error as MUI Y
JCQuintas Jun 18, 2024
f0040c9
Simplify computeValue for X
JCQuintas Jun 18, 2024
6971548
computeValue for Y
JCQuintas Jun 18, 2024
5062469
Update packages/x-charts/src/context/CartesianProvider/computeValue.ts
JCQuintas Jun 19, 2024
b606028
Update packages/x-charts/src/context/CartesianProvider/computeValue.ts
JCQuintas Jun 19, 2024
a45bbc3
Move consts back out
JCQuintas Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions packages/x-charts/src/context/CartesianProvider/computeValue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ import { FormattedSeries } from '../SeriesContextProvider';
import { MakeOptional } from '../../models/helpers';
import { getAxisExtremum } from './getAxisExtremum';

const getRange = (drawingArea: DrawingArea, axisName: 'x' | 'y', isReverse?: boolean) => {
const range =
axisName === 'x'
? [drawingArea.left, drawingArea.left + drawingArea.width]
: [drawingArea.top + drawingArea.height, drawingArea.top];

return isReverse ? range.reverse() : range;
};

export function computeValue(
JCQuintas marked this conversation as resolved.
Show resolved Hide resolved
drawingArea: DrawingArea,
formattedSeries: FormattedSeries,
Expand Down Expand Up @@ -48,7 +57,8 @@ export function computeValue(
const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;

const allAxis: AxisConfig<ScaleName, any, ChartsAxisProps>[] = [
...(inAxis?.map((a, index) => ({ id: `defaultized-x-axis-${index}`, ...a })) ?? []),
...(inAxis?.map((axis, index) => ({ id: `defaultized-${axisName}-axis-${index}`, ...axis })) ??
[]),
...(inAxis === undefined || inAxis.findIndex(({ id }) => id === DEFAULT_AXIS_KEY) === -1
? [{ id: DEFAULT_AXIS_KEY, scaleType: 'linear' as const }]
: []),
Expand All @@ -64,21 +74,21 @@ export function computeValue(
formattedSeries,
);

const range = axis.reverse
? [drawingArea.left + drawingArea.width, drawingArea.left]
: [drawingArea.left, drawingArea.left + drawingArea.width];
const range = getRange(drawingArea, axisName, axis.reverse);

if (isBandScaleConfig(axis)) {
const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
const DEFAULT_BAR_GAP_RATIO = 0.1;

const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
const barGapRatio = axisName === 'x' ? axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO : 0;
JCQuintas marked this conversation as resolved.
Show resolved Hide resolved
const scaleRange = axisName === 'x' ? range : [...range].reverse();
JCQuintas marked this conversation as resolved.
Show resolved Hide resolved

completeAxis[axis.id] = {
categoryGapRatio,
barGapRatio,
...axis,
scale: scaleBand(axis.data!, range)
scale: scaleBand(axis.data!, scaleRange)
.paddingInner(categoryGapRatio)
.paddingOuter(categoryGapRatio / 2),
tickNumber: axis.data!.length,
Expand All @@ -90,9 +100,11 @@ export function computeValue(
};
}
if (isPointScaleConfig(axis)) {
const scaleRange = axisName === 'x' ? range : [...range].reverse();

completeAxis[axis.id] = {
...axis,
scale: scalePoint(axis.data!, range),
scale: scalePoint(axis.data!, scaleRange),
tickNumber: axis.data!.length,
colorScale:
axis.colorMap &&
Expand Down