Skip to content

Commit b48bf96

Browse files
bernardobelchiorbernardobelchior
committed
Use niceDomain from utils
1 parent 4d4b672 commit b48bf96

File tree

2 files changed

+99
-87
lines changed

2 files changed

+99
-87
lines changed

‎docs/data/charts/bars/RangeBarComposition.js‎

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ import {
1010
useXScale,
1111
useYScale,
1212
} from '@mui/x-charts/hooks';
13-
import { nice } from '@mui/x-charts-vendor/es/d3-array';
1413
import { useTheme, styled } from '@mui/system';
1514
import { ChartsTooltipContainer, useAxesTooltip } from '@mui/x-charts/ChartsTooltip';
1615
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
16+
17+
import { niceDomain } from '@mui/x-charts/utils';
1718
import originalDataset from '../dataset/sp500-intraday.json'; // Source: Yahoo Finance
1819

1920
const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, {
@@ -37,54 +38,60 @@ const tooltipDollarFormatter = new Intl.NumberFormat(undefined, {
3738
maximumFractionDigits: 2,
3839
});
3940

41+
const min = originalDataset.reduce((acc, cur) => Math.min(acc, cur.low), Infinity);
42+
const max = originalDataset.reduce((acc, cur) => Math.max(acc, cur.high), -Infinity);
43+
44+
const xAxis = [
45+
{
46+
id: 'x',
47+
scaleType: 'band',
48+
dataKey: 'date',
49+
zoom: { minSpan: 1, filterMode: 'discard' },
50+
valueFormatter: (date, context) => {
51+
const formatter =
52+
context.location === 'tick' ? tickLabelDateFormatter : tooltipDateFormatter;
53+
54+
return formatter.format(Date.parse(date));
55+
},
56+
},
57+
];
58+
59+
const yAxis = [
60+
{
61+
id: 'y',
62+
scaleType: 'linear',
63+
domainLimit: () => {
64+
const domain = niceDomain('linear', [min, max]);
65+
66+
return { min: domain[0].valueOf(), max: domain[1].valueOf() };
67+
},
68+
valueFormatter: (value) => tickLabelDollarFormatter.format(value),
69+
},
70+
];
71+
72+
const series = [
73+
{
74+
type: 'barRange',
75+
datasetKeys: { start: 'open', end: 'close' },
76+
xAxisId: 'x',
77+
yAxisId: 'y',
78+
colorGetter: (data) => {
79+
const value = originalDataset[data.dataIndex];
80+
81+
return value.close > value.open ? 'green' : 'red';
82+
},
83+
},
84+
];
85+
4086
export default function RangeBarComposition() {
4187
const clipPathId = React.useId();
42-
const min = originalDataset.reduce((acc, cur) => Math.min(acc, cur.low), Infinity);
43-
const max = originalDataset.reduce(
44-
(acc, cur) => Math.max(acc, cur.high),
45-
-Infinity,
46-
);
4788

4889
return (
4990
<ChartContainerPro
5091
dataset={originalDataset}
51-
xAxis={[
52-
{
53-
id: 'x',
54-
scaleType: 'band',
55-
dataKey: 'date',
56-
zoom: { minSpan: 1, filterMode: 'discard' },
57-
valueFormatter: (date, context) => {
58-
const formatter =
59-
context.location === 'tick'
60-
? tickLabelDateFormatter
61-
: tooltipDateFormatter;
62-
63-
return formatter.format(Date.parse(date));
64-
},
65-
},
66-
]}
67-
yAxis={[
68-
{
69-
id: 'y',
70-
scaleType: 'linear',
71-
domainLimit: nice([min, max]),
72-
valueFormatter: (value) => tickLabelDollarFormatter.format(value),
73-
},
74-
]}
75-
series={[
76-
{
77-
type: 'barRange',
78-
datasetKeys: { start: 'open', end: 'close' },
79-
xAxisId: 'x',
80-
yAxisId: 'y',
81-
colorGetter: (data) => {
82-
const value = originalDataset[data.dataIndex];
83-
84-
return value.close > value.open ? 'green' : 'red';
85-
},
86-
},
87-
]}
92+
xAxis={xAxis}
93+
yAxis={yAxis}
94+
series={series}
8895
height={300}
8996
>
9097
<ChartsXAxis />

‎docs/data/charts/bars/RangeBarComposition.tsx‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BarRangePlot } from '@mui/x-charts/BarChart';
1+
import { BarRangePlot, BarRangeSeries } from '@mui/x-charts/BarChart';
22
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
33
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
44
import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
@@ -10,10 +10,11 @@ import {
1010
useXScale,
1111
useYScale,
1212
} from '@mui/x-charts/hooks';
13-
import { nice } from '@mui/x-charts-vendor/es/d3-array';
1413
import { useTheme, styled } from '@mui/system';
1514
import { ChartsTooltipContainer, useAxesTooltip } from '@mui/x-charts/ChartsTooltip';
1615
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
16+
import { XAxis, YAxis } from '@mui/x-charts/models';
17+
import { niceDomain } from '@mui/x-charts/utils';
1718
import originalDataset from '../dataset/sp500-intraday.json'; // Source: Yahoo Finance
1819

1920
const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, {
@@ -37,54 +38,58 @@ const tooltipDollarFormatter = new Intl.NumberFormat(undefined, {
3738
maximumFractionDigits: 2,
3839
});
3940

41+
const min = originalDataset.reduce((acc, cur) => Math.min(acc, cur.low), Infinity);
42+
const max = originalDataset.reduce((acc, cur) => Math.max(acc, cur.high), -Infinity);
43+
44+
const xAxis = [
45+
{
46+
id: 'x',
47+
scaleType: 'band',
48+
dataKey: 'date',
49+
zoom: { minSpan: 1, filterMode: 'discard' },
50+
valueFormatter: (date, context) => {
51+
const formatter =
52+
context.location === 'tick' ? tickLabelDateFormatter : tooltipDateFormatter;
53+
54+
return formatter.format(Date.parse(date));
55+
},
56+
},
57+
] satisfies XAxis[];
58+
const yAxis = [
59+
{
60+
id: 'y',
61+
scaleType: 'linear',
62+
domainLimit: () => {
63+
const domain = niceDomain('linear', [min, max]);
64+
65+
return { min: domain[0].valueOf(), max: domain[1].valueOf() };
66+
},
67+
valueFormatter: (value) => tickLabelDollarFormatter.format(value),
68+
},
69+
] satisfies YAxis[];
70+
const series = [
71+
{
72+
type: 'barRange',
73+
datasetKeys: { start: 'open', end: 'close' },
74+
xAxisId: 'x',
75+
yAxisId: 'y',
76+
colorGetter: (data) => {
77+
const value = originalDataset[data.dataIndex];
78+
79+
return value.close > value.open ? 'green' : 'red';
80+
},
81+
},
82+
] satisfies BarRangeSeries[];
83+
4084
export default function RangeBarComposition() {
4185
const clipPathId = React.useId();
42-
const min = originalDataset.reduce((acc, cur) => Math.min(acc, cur.low), Infinity);
43-
const max = originalDataset.reduce(
44-
(acc, cur) => Math.max(acc, cur.high),
45-
-Infinity,
46-
);
4786

4887
return (
4988
<ChartContainerPro
5089
dataset={originalDataset}
51-
xAxis={[
52-
{
53-
id: 'x',
54-
scaleType: 'band',
55-
dataKey: 'date',
56-
zoom: { minSpan: 1, filterMode: 'discard' },
57-
valueFormatter: (date, context) => {
58-
const formatter =
59-
context.location === 'tick'
60-
? tickLabelDateFormatter
61-
: tooltipDateFormatter;
62-
63-
return formatter.format(Date.parse(date));
64-
},
65-
},
66-
]}
67-
yAxis={[
68-
{
69-
id: 'y',
70-
scaleType: 'linear',
71-
domainLimit: nice([min, max]),
72-
valueFormatter: (value) => tickLabelDollarFormatter.format(value),
73-
},
74-
]}
75-
series={[
76-
{
77-
type: 'barRange',
78-
datasetKeys: { start: 'open', end: 'close' },
79-
xAxisId: 'x',
80-
yAxisId: 'y',
81-
colorGetter: (data) => {
82-
const value = originalDataset[data.dataIndex];
83-
84-
return value.close > value.open ? 'green' : 'red';
85-
},
86-
},
87-
]}
90+
xAxis={xAxis}
91+
yAxis={yAxis}
92+
series={series}
8893
height={300}
8994
>
9095
<ChartsXAxis />

0 commit comments

Comments
 (0)