-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge 'master' into stablize-data-source
- Loading branch information
1 parent
c39e277
commit e82a037
Showing
94 changed files
with
2,642 additions
and
739 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; | ||
| import { ScatterChart } from '@mui/x-charts/ScatterChart'; | ||
| import { Chance } from 'chance'; | ||
|
|
||
| const chance = new Chance(42); | ||
|
|
||
| const data = Array.from({ length: 200 }, () => ({ | ||
| x: chance.floating({ min: -25, max: 25 }), | ||
| y: chance.floating({ min: -25, max: 25 }), | ||
| })).map((d, index) => ({ ...d, id: index })); | ||
|
|
||
| const defaultXAxis = { | ||
| disableLine: false, | ||
| disableTicks: false, | ||
| fontSize: 12, | ||
| label: 'My axis', | ||
| tickSize: 6, | ||
| }; | ||
| export default function AxisCustomization() { | ||
| return ( | ||
| <ChartsUsageDemo | ||
| componentName="Alert" | ||
| data={{ | ||
| disableLine: { knob: 'switch', defaultValue: false }, | ||
| disableTicks: { knob: 'switch', defaultValue: false }, | ||
| label: { knob: 'input', defaultValue: 'my axis' }, | ||
| tickSize: { knob: 'number', defaultValue: 6 }, | ||
| }} | ||
| renderDemo={(props) => ( | ||
| <Box sx={{ width: '100%', maxWidth: 400 }}> | ||
| <ScatterChart | ||
| series={[ | ||
| { | ||
| type: 'scatter', | ||
| id: 'linear', | ||
| data, | ||
| }, | ||
| ]} | ||
| yAxis={[{ position: 'none' }]} | ||
| xAxis={[ | ||
| { | ||
| ...defaultXAxis, | ||
| ...props, | ||
| }, | ||
| ]} | ||
| height={300} | ||
| /> | ||
| </Box> | ||
| )} | ||
| getCode={({ | ||
| props, | ||
| }) => `import { ScatterChart } from '@mui/x-charts/ScatterChart'; | ||
| <ScatterChart | ||
| // ... | ||
| xAxis={{ | ||
| disableLine: ${props.disableLine}, | ||
| disableTicks: ${props.disableTicks}, | ||
| label: "${props.label}", | ||
| tickSize: ${props.tickSize}, | ||
| }} | ||
| /> | ||
| `} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; | ||
| import { BarChart } from '@mui/x-charts/BarChart'; | ||
| import { dataset, valueFormatter } from '../dataset/weather'; | ||
|
|
||
| const chartSetting = { | ||
| height: 300, | ||
| }; | ||
|
|
||
| export default function AxisTextCustomization() { | ||
| return ( | ||
| <ChartsUsageDemo | ||
| componentName="Alert" | ||
| data={ | ||
| { | ||
| angle: { knob: 'number', defaultValue: 45, min: -180, max: 180 }, | ||
| textAnchor: { | ||
| knob: 'select', | ||
| defaultValue: 'start', | ||
| options: ['start', 'middle', 'end'], | ||
| }, | ||
| fontSize: { knob: 'number', defaultValue: 12 }, | ||
| labelFontSize: { knob: 'number', defaultValue: 14 }, | ||
| } as const | ||
| } | ||
| renderDemo={(props) => ( | ||
| <Box sx={{ width: '100%', maxWidth: 400 }}> | ||
| <BarChart | ||
| dataset={dataset} | ||
| xAxis={[ | ||
| { | ||
| scaleType: 'band', | ||
| dataKey: 'month', | ||
| label: 'months', | ||
| height: 40, | ||
| labelStyle: { | ||
| fontSize: props.labelFontSize, | ||
| transform: `translateY(10px)`, | ||
| }, | ||
| tickLabelStyle: { | ||
| angle: props.angle, | ||
| textAnchor: props.textAnchor, | ||
| fontSize: props.fontSize, | ||
| }, | ||
| }, | ||
| ]} | ||
| series={[ | ||
| { dataKey: 'london', label: 'London', valueFormatter }, | ||
| { dataKey: 'paris', label: 'Paris', valueFormatter }, | ||
| { dataKey: 'newYork', label: 'New York', valueFormatter }, | ||
| { dataKey: 'seoul', label: 'Seoul', valueFormatter }, | ||
| ]} | ||
| margin={{ bottom: 30 }} | ||
| {...chartSetting} | ||
| /> | ||
| </Box> | ||
| )} | ||
| getCode={({ props }) => `import { BarChart } from '@mui/x-charts/BarChart'; | ||
| <ScatterChart | ||
| // ... | ||
| xAxis={[ | ||
| { | ||
| labelStyle: { | ||
| fontSize: ${props.labelFontSize}, | ||
| }, | ||
| tickLabelStyle: { | ||
| angle: ${props.angle}, | ||
| textAnchor: '${props.textAnchor}', | ||
| fontSize: ${props.fontSize}, | ||
| }, | ||
| }, | ||
| ]} | ||
| />`} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import Checkbox from '@mui/material/Checkbox'; | ||
|
|
||
| import { ChartContainer } from '@mui/x-charts/ChartContainer'; | ||
| import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; | ||
| import { BarPlot } from '@mui/x-charts/BarChart'; | ||
| import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; | ||
| import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; | ||
| import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; | ||
| import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; | ||
|
|
||
| const dataset = [ | ||
| { min: -12, max: -4, precip: 79, month: 'Jan' }, | ||
| { min: -11, max: -3, precip: 66, month: 'Feb' }, | ||
| { min: -6, max: 2, precip: 76, month: 'Mar' }, | ||
| { min: 1, max: 9, precip: 106, month: 'Apr' }, | ||
| { min: 8, max: 17, precip: 105, month: 'Mai' }, | ||
| { min: 15, max: 24, precip: 114, month: 'Jun' }, | ||
| { min: 18, max: 26, precip: 106, month: 'Jul' }, | ||
| { min: 17, max: 26, precip: 105, month: 'Aug' }, | ||
| { min: 13, max: 21, precip: 100, month: 'Sept' }, | ||
| { min: 6, max: 13, precip: 116, month: 'Oct' }, | ||
| { min: 0, max: 6, precip: 93, month: 'Nov' }, | ||
| { min: -8, max: -1, precip: 93, month: 'Dec' }, | ||
| ]; | ||
|
|
||
| const series = [ | ||
| { type: 'line', dataKey: 'min', color: '#577399' }, | ||
| { type: 'line', dataKey: 'max', color: '#fe5f55' }, | ||
| { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisId: 'rightAxis' }, | ||
| ] as const; | ||
|
|
||
| export default function ReverseExample() { | ||
| const [reverseX, setReverseX] = React.useState(false); | ||
| const [reverseLeft, setReverseLeft] = React.useState(false); | ||
| const [reverseRight, setReverseRight] = React.useState(false); | ||
|
|
||
| return ( | ||
| <Stack sx={{ width: '100%' }}> | ||
| <Stack direction="row"> | ||
| <FormControlLabel | ||
| checked={reverseX} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseX(event.target.checked)} /> | ||
| } | ||
| label="reverse x-axis" | ||
| labelPlacement="end" | ||
| /> | ||
| <FormControlLabel | ||
| checked={reverseLeft} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseLeft(event.target.checked)} /> | ||
| } | ||
| label="reverse left axis" | ||
| labelPlacement="end" | ||
| /> | ||
| <FormControlLabel | ||
| checked={reverseRight} | ||
| control={ | ||
| <Checkbox onChange={(event) => setReverseRight(event.target.checked)} /> | ||
| } | ||
| label="reverse right axis" | ||
| labelPlacement="end" | ||
| /> | ||
| </Stack> | ||
| <Box sx={{ width: '100%' }}> | ||
| <ChartContainer | ||
| series={series} | ||
| xAxis={[ | ||
| { | ||
| scaleType: 'band', | ||
| dataKey: 'month', | ||
| label: 'Month', | ||
| reverse: reverseX, | ||
| }, | ||
| ]} | ||
| yAxis={[ | ||
| { id: 'leftAxis', reverse: reverseLeft }, | ||
| { id: 'rightAxis', reverse: reverseRight, position: 'right' }, | ||
| ]} | ||
| dataset={dataset} | ||
| height={400} | ||
| > | ||
| <ChartsGrid horizontal /> | ||
| <BarPlot /> | ||
| <LinePlot /> | ||
| <MarkPlot /> | ||
|
|
||
| <ChartsXAxis /> | ||
| <ChartsYAxis axisId="leftAxis" label="temperature (°C)" /> | ||
| <ChartsYAxis axisId="rightAxis" label="precipitation (mm)" /> | ||
| <ChartsTooltip /> | ||
| </ChartContainer> | ||
| </Box> | ||
| </Stack> | ||
| ); | ||
| } |
Oops, something went wrong.