From 196ab67b35c488f625a6012f57dc40c1c0868caa Mon Sep 17 00:00:00 2001 From: Christos Lytras Date: Mon, 12 Jun 2023 11:04:40 +0300 Subject: [PATCH 01/32] [l10n] Improve Greek (el-GR) locale for data grid (#9292) --- docs/data/data-grid/localization/data.json | 2 +- packages/grid/x-data-grid/src/locales/elGR.ts | 129 +++++++++--------- 2 files changed, 66 insertions(+), 65 deletions(-) diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 10d9db1faae2..c9cf0e7b6668 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -91,7 +91,7 @@ "languageTag": "el-GR", "importName": "elGR", "localeName": "Greek", - "missingKeysCount": 63, + "missingKeysCount": 0, "totalKeysCount": 119, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/locales/elGR.ts" }, diff --git a/packages/grid/x-data-grid/src/locales/elGR.ts b/packages/grid/x-data-grid/src/locales/elGR.ts index 0bf5e6437e50..2e5f7ce0f23c 100644 --- a/packages/grid/x-data-grid/src/locales/elGR.ts +++ b/packages/grid/x-data-grid/src/locales/elGR.ts @@ -1,3 +1,4 @@ +import { elGR as elGRCore } from '@mui/material/locale'; import { GridLocaleText } from '../models/api/gridLocaleTextApi'; import { getGridLocalization, Localization } from '../utils/getGridLocalization'; @@ -26,16 +27,16 @@ const elGRGrid: Partial = { count !== 1 ? `${count} ενεργά φίλτρα` : `${count} ενεργό φίλτρο`, // Quick filter toolbar field - // toolbarQuickFilterPlaceholder: 'Search…', - // toolbarQuickFilterLabel: 'Search', - // toolbarQuickFilterDeleteIconLabel: 'Clear', + toolbarQuickFilterPlaceholder: 'Αναζήτηση…', + toolbarQuickFilterLabel: 'Αναζήτηση', + toolbarQuickFilterDeleteIconLabel: 'Καθαρισμός', // Export selector toolbar button text toolbarExport: 'Εξαγωγή', toolbarExportLabel: 'Εξαγωγή', toolbarExportCSV: 'Λήψη ως CSV', - // toolbarExportPrint: 'Print', - // toolbarExportExcel: 'Download as Excel', + toolbarExportPrint: 'Εκτύπωση', + toolbarExportExcel: 'Λήψη ως Excel', // Columns panel text columnsPanelTextFieldLabel: 'Εύρεση στήλης', @@ -46,9 +47,9 @@ const elGRGrid: Partial = { // Filter panel text filterPanelAddFilter: 'Προσθήκη φίλτρου', - // filterPanelRemoveAll: 'Remove all', + filterPanelRemoveAll: 'Αφαίρεση όλων', filterPanelDeleteIconLabel: 'Διαγραφή', - // filterPanelLogicOperator: 'Logic operator', + filterPanelLogicOperator: 'Λογικός τελεστής', filterPanelOperator: 'Τελεστές', filterPanelOperatorAnd: 'Καί', filterPanelOperatorOr: 'Ή', @@ -69,44 +70,44 @@ const elGRGrid: Partial = { filterOperatorOnOrBefore: 'είναι ίσο ή πριν', filterOperatorIsEmpty: 'είναι κενό', filterOperatorIsNotEmpty: 'δεν είναι κενό', - // filterOperatorIsAnyOf: 'is any of', - // 'filterOperator=': '=', - // 'filterOperator!=': '!=', - // 'filterOperator>': '>', - // 'filterOperator>=': '>=', - // 'filterOperator<': '<', - // 'filterOperator<=': '<=', + filterOperatorIsAnyOf: 'είναι οποιοδήποτε από', + 'filterOperator=': '=', + 'filterOperator!=': '!=', + 'filterOperator>': '>', + 'filterOperator>=': '>=', + 'filterOperator<': '<', + 'filterOperator<=': '<=', // Header filter operators text - // headerFilterOperatorContains: 'Contains', - // headerFilterOperatorEquals: 'Equals', - // headerFilterOperatorStartsWith: 'Starts with', - // headerFilterOperatorEndsWith: 'Ends with', - // headerFilterOperatorIs: 'Is', - // headerFilterOperatorNot: 'Is not', - // headerFilterOperatorAfter: 'Is after', - // headerFilterOperatorOnOrAfter: 'Is on or after', - // headerFilterOperatorBefore: 'Is before', - // headerFilterOperatorOnOrBefore: 'Is on or before', - // headerFilterOperatorIsEmpty: 'Is empty', - // headerFilterOperatorIsNotEmpty: 'Is not empty', - // headerFilterOperatorIsAnyOf: 'Is any of', - // 'headerFilterOperator=': 'Equals', - // 'headerFilterOperator!=': 'Not equals', - // 'headerFilterOperator>': 'Greater than', - // 'headerFilterOperator>=': 'Greater than or equal to', - // 'headerFilterOperator<': 'Less than', - // 'headerFilterOperator<=': 'Less than or equal to', + headerFilterOperatorContains: 'Περιέχει', + headerFilterOperatorEquals: 'Ισούται', + headerFilterOperatorStartsWith: 'Ξεκινάει με', + headerFilterOperatorEndsWith: 'Τελειώνει με', + headerFilterOperatorIs: 'Είναι', + headerFilterOperatorNot: 'Δεν είναι', + headerFilterOperatorAfter: 'Είναι μετά', + headerFilterOperatorOnOrAfter: 'Είναι ίσο ή μετά', + headerFilterOperatorBefore: 'Είναι πριν', + headerFilterOperatorOnOrBefore: 'Είναι ίσο ή πριν', + headerFilterOperatorIsEmpty: 'Είναι κενό', + headerFilterOperatorIsNotEmpty: 'Δεν είναι κενό', + headerFilterOperatorIsAnyOf: 'Είναι οποιοδήποτε από', + 'headerFilterOperator=': 'Ισούται', + 'headerFilterOperator!=': 'Δεν ισούται', + 'headerFilterOperator>': 'Μεγαλύτερο από', + 'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με', + 'headerFilterOperator<': 'Μικρότερο από', + 'headerFilterOperator<=': 'Μικρότερο ή ίσο με', // Filter values text - // filterValueAny: 'any', - // filterValueTrue: 'true', - // filterValueFalse: 'false', + filterValueAny: 'οποιοδήποτε', + filterValueTrue: 'αληθές', + filterValueFalse: 'ψευδές', // Column menu text columnMenuLabel: 'Μενού', columnMenuShowColumns: 'Εμφάνιση στηλών', - // columnMenuManageColumns: 'Manage columns', + columnMenuManageColumns: 'Διαχείριση στηλών', columnMenuFilter: 'Φίλτρο', columnMenuHideColumn: 'Απόκρυψη', columnMenuUnsort: 'Απενεργοποίηση ταξινόμησης', @@ -133,49 +134,49 @@ const elGRGrid: Partial = { `${visibleCount.toLocaleString()} από ${totalCount.toLocaleString()}`, // Checkbox selection text - // checkboxSelectionHeaderName: 'Checkbox selection', - // checkboxSelectionSelectAllRows: 'Select all rows', - // checkboxSelectionUnselectAllRows: 'Unselect all rows', - // checkboxSelectionSelectRow: 'Select row', - // checkboxSelectionUnselectRow: 'Unselect row', + checkboxSelectionHeaderName: 'Επιλογή πλαισίου ελέγχου', + checkboxSelectionSelectAllRows: 'Επιλέξτε όλες τις σειρές', + checkboxSelectionUnselectAllRows: 'Καταργήση επιλογής όλων των σειρών', + checkboxSelectionSelectRow: 'Επιλογή γραμμής', + checkboxSelectionUnselectRow: 'Καταργήση επιλογής γραμμής', // Boolean cell text - // booleanCellTrueLabel: 'yes', - // booleanCellFalseLabel: 'no', + booleanCellTrueLabel: 'ναί', + booleanCellFalseLabel: 'όχι', // Actions cell more text actionsCellMore: 'περισσότερα', // Column pinning text - // pinToLeft: 'Pin to left', - // pinToRight: 'Pin to right', - // unpin: 'Unpin', + pinToLeft: 'Καρφιτσώμα στα αριστερά', + pinToRight: 'Καρφιτσώμα στα δεξιά', + unpin: 'Ξεκαρφίτσωμα', // Tree Data - // treeDataGroupingHeaderName: 'Group', - // treeDataExpand: 'see children', - // treeDataCollapse: 'hide children', + treeDataGroupingHeaderName: 'Ομαδοποίηση', + treeDataExpand: 'εμφάνιση περιεχομένων', + treeDataCollapse: 'απόκρυψη περιεχομένων', // Grouping columns - // groupingColumnHeaderName: 'Group', - // groupColumn: name => `Group by ${name}`, - // unGroupColumn: name => `Stop grouping by ${name}`, + groupingColumnHeaderName: 'Ομαδοποίηση', + groupColumn: (name) => `Ομαδοποίηση κατά ${name}`, + unGroupColumn: (name) => `Διακοπή ομαδοποίησης κατά ${name}`, // Master/detail - // detailPanelToggle: 'Detail panel toggle', - // expandDetailPanel: 'Expand', - // collapseDetailPanel: 'Collapse', + detailPanelToggle: 'Εναλλαγή πίνακα λεπτομερειών', + expandDetailPanel: 'Ανάπτυξη', + collapseDetailPanel: 'Σύμπτυξη', // Row reordering text - // rowReorderingHeaderName: 'Row reordering', + rowReorderingHeaderName: 'Αναδιάταξη γραμμών', // Aggregation - // aggregationMenuItemHeader: 'Aggregation', - // aggregationFunctionLabelSum: 'sum', - // aggregationFunctionLabelAvg: 'avg', - // aggregationFunctionLabelMin: 'min', - // aggregationFunctionLabelMax: 'max', - // aggregationFunctionLabelSize: 'size', + aggregationMenuItemHeader: 'Συσσωμάτωση', + aggregationFunctionLabelSum: 'άθροισμα', + aggregationFunctionLabelAvg: 'μέση τιμή', + aggregationFunctionLabelMin: 'ελάχιστο', + aggregationFunctionLabelMax: 'μέγιστο', + aggregationFunctionLabelSize: 'μέγεθος', }; -export const elGR: Localization = getGridLocalization(elGRGrid); +export const elGR: Localization = getGridLocalization(elGRGrid, elGRCore); From c51a5517f7c424b2fadaac93c98f6b00cf8da5b9 Mon Sep 17 00:00:00 2001 From: Christos Lytras Date: Mon, 12 Jun 2023 11:54:25 +0300 Subject: [PATCH 02/32] [l10n] Add Greek (el-GR) locale (#9293) Signed-off-by: Lukas Co-authored-by: Lukas --- docs/data/date-pickers/localization/data.json | 8 ++ packages/x-date-pickers/src/locales/elGR.ts | 86 +++++++++++++++++++ packages/x-date-pickers/src/locales/index.ts | 1 + scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 5 files changed, 97 insertions(+) create mode 100644 packages/x-date-pickers/src/locales/elGR.ts diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 2608f84881e5..3c2203b677b2 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -71,6 +71,14 @@ "totalKeysCount": 36, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/deDE.ts" }, + { + "languageTag": "el-GR", + "importName": "elGR", + "localeName": "Greek", + "missingKeysCount": 0, + "totalKeysCount": 36, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/elGR.ts" + }, { "languageTag": "he-IL", "importName": "heIL", diff --git a/packages/x-date-pickers/src/locales/elGR.ts b/packages/x-date-pickers/src/locales/elGR.ts new file mode 100644 index 000000000000..7a15dc49987d --- /dev/null +++ b/packages/x-date-pickers/src/locales/elGR.ts @@ -0,0 +1,86 @@ +import { PickersLocaleText } from './utils/pickersLocaleTextApi'; +import { getPickersLocalization } from './utils/getPickersLocalization'; +import { TimeViewWithMeridiem } from '../internals/models'; + +const views: Record = { + hours: 'ώρες', + minutes: 'λεπτά', + seconds: 'δευτερόλεπτα', + meridiem: 'μεσημβρία', +}; + +const elGRPickers: Partial> = { + // Calendar navigation + previousMonth: 'Προηγούμενος μήνας', + nextMonth: 'Επόμενος μήνας', + + // View navigation + openPreviousView: 'ανοίγμα προηγούμενης προβολή', + openNextView: 'ανοίγμα επόμενης προβολή', + calendarViewSwitchingButtonAriaLabel: (view) => + view === 'year' + ? 'η προβολή έτους είναι ανοιχτή, μεταβείτε στην προβολή ημερολογίου' + : 'η προβολή ημερολογίου είναι ανοιχτή, μεταβείτε στην προβολή έτους', + + // DateRange placeholders + start: 'Αρχή', + end: 'Τέλος', + + // Action bar + cancelButtonLabel: 'Άκυρο', + clearButtonLabel: 'Καθαρισμός', + okButtonLabel: 'OK', + todayButtonLabel: 'Σήμερα', + + // Toolbar titles + datePickerToolbarTitle: 'Επιλέξτε ημερομηνία', + dateTimePickerToolbarTitle: 'Επιλέξτε ημερομηνία και ώρα', + timePickerToolbarTitle: 'Επιλέξτε ώρα', + dateRangePickerToolbarTitle: 'Επιλέξτε εύρος ημερομηνιών', + + // Clock labels + clockLabelText: (view, time, adapter) => + `Επιλέξτε ${views[view]}. ${ + time === null + ? 'Δεν έχει επιλεγεί ώρα' + : `Η επιλεγμένη ώρα είναι ${adapter.format(time, 'fullTime')}` + }`, + hoursClockNumberText: (hours) => `${hours} ώρες`, + minutesClockNumberText: (minutes) => `${minutes} λεπτά`, + secondsClockNumberText: (seconds) => `${seconds} δευτερόλεπτα`, + + // Digital clock labels + selectViewText: (view) => `Επιλέξτε ${views[view]}`, + + // Calendar labels + calendarWeekNumberHeaderLabel: 'Αριθμός εβδομάδας', + calendarWeekNumberHeaderText: '#', + calendarWeekNumberAriaLabelText: (weekNumber) => `Εβδομάδα ${weekNumber}`, + calendarWeekNumberText: (weekNumber) => `${weekNumber}`, + + // Open picker labels + openDatePickerDialogue: (value, utils) => + value !== null && utils.isValid(value) + ? `Επιλέξτε ημερομηνία, η επιλεγμένη ημερομηνία είναι ${utils.format(value, 'fullDate')}` + : 'Επιλέξτε ημερομηνία', + openTimePickerDialogue: (value, utils) => + value !== null && utils.isValid(value) + ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${utils.format(value, 'fullTime')}` + : 'Επιλέξτε ώρα', + + // Table labels + timeTableLabel: 'επιλέξτε ώρα', + dateTableLabel: 'επιλέξτε ημερομηνία', + + // Field section placeholders + fieldYearPlaceholder: (params) => 'Y'.repeat(params.digitAmount), + fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'), + fieldDayPlaceholder: () => 'DD', + fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'), + fieldHoursPlaceholder: () => 'hh', + fieldMinutesPlaceholder: () => 'mm', + fieldSecondsPlaceholder: () => 'ss', + fieldMeridiemPlaceholder: () => 'aa', +}; + +export const elGR = getPickersLocalization(elGRPickers); diff --git a/packages/x-date-pickers/src/locales/index.ts b/packages/x-date-pickers/src/locales/index.ts index af7bda544953..389dc2a895c8 100644 --- a/packages/x-date-pickers/src/locales/index.ts +++ b/packages/x-date-pickers/src/locales/index.ts @@ -2,6 +2,7 @@ export * from './beBY'; export * from './caES'; export * from './csCZ'; export * from './deDE'; +export * from './elGR'; export * from './enUS'; export * from './esES'; export * from './faIR'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 59ba7d70a1fd..d0c7ca6d32af 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -123,6 +123,7 @@ { "name": "DigitalClockProps", "kind": "Interface" }, { "name": "DigitalClockSlotsComponent", "kind": "Interface" }, { "name": "DigitalClockSlotsComponentsProps", "kind": "Interface" }, + { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, { "name": "esES", "kind": "Variable" }, { "name": "ExportedDateRangeCalendarProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 78f297d985be..64eacef0963d 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -93,6 +93,7 @@ { "name": "DigitalClockProps", "kind": "Interface" }, { "name": "DigitalClockSlotsComponent", "kind": "Interface" }, { "name": "DigitalClockSlotsComponentsProps", "kind": "Interface" }, + { "name": "elGR", "kind": "Variable" }, { "name": "enUS", "kind": "Variable" }, { "name": "esES", "kind": "Variable" }, { "name": "ExportedDigitalClockProps", "kind": "Interface" }, From c3802183695e2c7c44f88b7fb2b4a36e350b5962 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 12 Jun 2023 16:28:26 +0500 Subject: [PATCH 03/32] [docs] Link pagination documentation to the migration guide (#9296) --- .../migration-data-grid-v5/migration-data-grid-v5.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index fa8bd4200332..f2a945a180da 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -296,7 +296,7 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe ### Pagination -- The `page` and `pageSize` props and their respective event handlers `onPageChange` and `onPageSizeChange` were removed. Use `paginationModel` and `onPaginationModelChange` instead. +- The `page` and `pageSize` props and their respective event handlers `onPageChange` and `onPageSizeChange` were removed. Use `paginationModel` and [`onPaginationModelChange`](/x/react-data-grid/pagination/#controlled-pagination-model) instead. ```diff ``` -- The properties `initialState.pagination.page` and `initialState.pagination.pageSize` were also removed. Use `initialState.pagination.paginationModel` instead. +- The properties `initialState.pagination.page` and `initialState.pagination.pageSize` were also removed. Use [`initialState.pagination.paginationModel`](/x/react-data-grid/pagination/#initializing-the-pagination-model) instead. ```diff -initialState={{ pagination: { page: 1, pageSize: 10 } }} +initialState={{ pagination: { paginationModel: { page: 1, pageSize: 10 } } }} ``` -- ✅ The `rowsPerPageOptions` prop was renamed to `pageSizeOptions`. +- ✅ The `rowsPerPageOptions` prop was renamed to [`pageSizeOptions`](/x/react-data-grid/pagination/#page-size-options). ```diff - From 59de8ecd1704d3cd78f12e13c5447b60a630e12c Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 12 Jun 2023 16:01:54 +0300 Subject: [PATCH 04/32] [core] Re-enable `Argos` CI step (#9301) --- .circleci/config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 32db451ff4f1..aae2b9c95c5c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -260,9 +260,9 @@ jobs: - run: name: Run visual regression tests command: xvfb-run yarn test:regressions - # - run: - # name: Upload screenshots to Argos CI - # command: yarn test:argos + - run: + name: Upload screenshots to Argos CI + command: yarn test:argos test_performance: <<: *defaults docker: From d08d372d1b105b4933ce28a46574e6e82cae814d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 12 Jun 2023 16:09:48 +0200 Subject: [PATCH 05/32] [pickers] Fix disabling for digital clock (#9300) --- .../MultiSectionDigitalClockSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx index 7d52f4466f9a..25418eb6d3e3 100644 --- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx +++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx @@ -186,7 +186,7 @@ export const MultiSectionDigitalClockSection = React.forwardRef( key={option.label} onClick={() => !readOnly && onChange(option.value)} selected={isSelected} - disabled={disabled ?? option.isDisabled?.(option.value)} + disabled={disabled || option.isDisabled?.(option.value)} disableRipple={readOnly} role="option" // aria-readonly is not supported here and does not have any effect From d8f70fe40caf9d05d5289e4f83df55e335496a4c Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Mon, 12 Jun 2023 16:25:24 +0200 Subject: [PATCH 06/32] [Chart] Add demonstration pages base on Recharts demo (#9175) --- docs/data/charts-component-api-pages.ts | 2 + .../charts/areas-demo/PercentAreaChart.js | 67 +++++++++++++++++++ .../charts/areas-demo/PercentAreaChart.tsx | 66 ++++++++++++++++++ .../data/charts/areas-demo/SimpleAreaChart.js | 29 ++++++++ .../charts/areas-demo/SimpleAreaChart.tsx | 29 ++++++++ .../areas-demo/SimpleAreaChart.tsx.preview | 11 +++ .../charts/areas-demo/StackedAreaChart.js | 41 ++++++++++++ .../charts/areas-demo/StackedAreaChart.tsx | 41 ++++++++++++ docs/data/charts/areas-demo/TinyAreaChart.js | 35 ++++++++++ docs/data/charts/areas-demo/TinyAreaChart.tsx | 35 ++++++++++ docs/data/charts/areas-demo/areas-demo.md | 24 +++++++ docs/data/charts/areas/areas.md | 15 ----- .../charts/bar-demo/BarChartStackedBySign.js | 29 ++++++++ .../charts/bar-demo/BarChartStackedBySign.tsx | 29 ++++++++ .../BarChartStackedBySign.tsx.preview | 9 +++ docs/data/charts/bar-demo/BiaxialBarChart.js | 43 ++++++++++++ docs/data/charts/bar-demo/BiaxialBarChart.tsx | 43 ++++++++++++ docs/data/charts/bar-demo/MixedBarChart.js | 31 +++++++++ docs/data/charts/bar-demo/MixedBarChart.tsx | 31 +++++++++ .../charts/bar-demo/MixedBarChart.tsx.preview | 10 +++ docs/data/charts/bar-demo/SimpleBarChart.js | 28 ++++++++ docs/data/charts/bar-demo/SimpleBarChart.tsx | 28 ++++++++ .../bar-demo/SimpleBarChart.tsx.preview | 9 +++ docs/data/charts/bar-demo/StackedBarChart.js | 28 ++++++++ docs/data/charts/bar-demo/StackedBarChart.tsx | 28 ++++++++ .../bar-demo/StackedBarChart.tsx.preview | 9 +++ docs/data/charts/bar-demo/TinyBarChart.js | 26 +++++++ docs/data/charts/bar-demo/TinyBarChart.tsx | 26 +++++++ .../charts/bar-demo/TinyBarChart.tsx.preview | 8 +++ docs/data/charts/bar-demo/bar-demo.md | 32 +++++++++ .../data/charts/line-demo/BiaxialLineChart.js | 30 +++++++++ .../charts/line-demo/BiaxialLineChart.tsx | 30 +++++++++ .../line-demo/BiaxialLineChart.tsx.preview | 11 +++ docs/data/charts/line-demo/DashedLineChart.js | 45 +++++++++++++ .../data/charts/line-demo/DashedLineChart.tsx | 45 +++++++++++++ docs/data/charts/line-demo/SimpleLineChart.js | 28 ++++++++ .../data/charts/line-demo/SimpleLineChart.tsx | 28 ++++++++ .../line-demo/SimpleLineChart.tsx.preview | 9 +++ docs/data/charts/line-demo/TinyLineChart.js | 41 ++++++++++++ docs/data/charts/line-demo/TinyLineChart.tsx | 41 ++++++++++++ docs/data/charts/line-demo/line-demo.md | 24 +++++++ .../scatter-demo/MultipleYAxesScatterChart.js | 66 ++++++++++++++++++ .../MultipleYAxesScatterChart.tsx | 65 ++++++++++++++++++ .../charts/scatter-demo/SimpleScatterChart.js | 22 ++++++ .../scatter-demo/SimpleScatterChart.tsx | 22 ++++++ .../SimpleScatterChart.tsx.preview | 6 ++ docs/data/charts/scatter-demo/scatter-demo.md | 16 +++++ docs/data/charts/stacking/StackOrderDemo.js | 4 ++ docs/data/charts/stacking/StackOrderDemo.tsx | 4 ++ docs/data/pages.ts | 36 ++++++++-- docs/pages/x/api/charts/area-plot.js | 23 +++++++ docs/pages/x/api/charts/area-plot.json | 9 +++ docs/pages/x/api/charts/mark-plot.js | 23 +++++++ docs/pages/x/api/charts/mark-plot.json | 9 +++ docs/pages/x/react-charts/areas-demo.js | 7 ++ .../x/react-charts/{areas.js => bar-demo.js} | 2 +- docs/pages/x/react-charts/line-demo.js | 7 ++ docs/pages/x/react-charts/scatter-demo.js | 7 ++ .../api-docs/charts/area-plot.json | 6 ++ .../api-docs/charts/mark-plot.json | 6 ++ packages/x-charts/src/Axis/index.tsx | 1 + packages/x-charts/src/BarChart/BarChart.tsx | 8 ++- .../x-charts/src/ChartContainer/index.tsx | 25 ++++++- packages/x-charts/src/LineChart/LineChart.tsx | 10 +-- .../x-charts/src/LineChart/MarkElement.tsx | 1 + packages/x-charts/src/LineChart/MarkPlot.tsx | 22 ++++-- packages/x-charts/src/LineChart/index.tsx | 2 + .../x-charts/src/ScatterChart/Scatter.tsx | 67 +++++++++++-------- .../src/ScatterChart/ScatterChart.tsx | 6 +- .../src/Tooltip/AxisTooltipContent.tsx | 10 +-- .../src/Tooltip/ItemTooltipContent.tsx | 2 +- .../x-charts/src/Tooltip/TooltipTable.tsx | 5 +- packages/x-charts/src/XAxis/XAxis.tsx | 45 ++++++++----- packages/x-charts/src/YAxis/YAxis.tsx | 36 ++++++---- .../src/context/CartesianContextProvider.tsx | 24 ++++++- packages/x-charts/src/hooks/useAxisEvents.ts | 6 +- packages/x-charts/src/hooks/useTicks.ts | 21 +++++- packages/x-charts/src/models/axis.ts | 16 ++++- .../x-charts/src/models/seriesType/bar.ts | 10 +-- .../x-charts/src/models/seriesType/common.ts | 16 ++--- .../x-charts/src/models/seriesType/line.ts | 10 +-- .../x-charts/src/models/seriesType/pie.ts | 2 +- .../x-charts/src/models/seriesType/scatter.ts | 7 +- scripts/x-charts.exports.json | 6 ++ 84 files changed, 1733 insertions(+), 139 deletions(-) create mode 100644 docs/data/charts/areas-demo/PercentAreaChart.js create mode 100644 docs/data/charts/areas-demo/PercentAreaChart.tsx create mode 100644 docs/data/charts/areas-demo/SimpleAreaChart.js create mode 100644 docs/data/charts/areas-demo/SimpleAreaChart.tsx create mode 100644 docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview create mode 100644 docs/data/charts/areas-demo/StackedAreaChart.js create mode 100644 docs/data/charts/areas-demo/StackedAreaChart.tsx create mode 100644 docs/data/charts/areas-demo/TinyAreaChart.js create mode 100644 docs/data/charts/areas-demo/TinyAreaChart.tsx create mode 100644 docs/data/charts/areas-demo/areas-demo.md delete mode 100644 docs/data/charts/areas/areas.md create mode 100644 docs/data/charts/bar-demo/BarChartStackedBySign.js create mode 100644 docs/data/charts/bar-demo/BarChartStackedBySign.tsx create mode 100644 docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview create mode 100644 docs/data/charts/bar-demo/BiaxialBarChart.js create mode 100644 docs/data/charts/bar-demo/BiaxialBarChart.tsx create mode 100644 docs/data/charts/bar-demo/MixedBarChart.js create mode 100644 docs/data/charts/bar-demo/MixedBarChart.tsx create mode 100644 docs/data/charts/bar-demo/MixedBarChart.tsx.preview create mode 100644 docs/data/charts/bar-demo/SimpleBarChart.js create mode 100644 docs/data/charts/bar-demo/SimpleBarChart.tsx create mode 100644 docs/data/charts/bar-demo/SimpleBarChart.tsx.preview create mode 100644 docs/data/charts/bar-demo/StackedBarChart.js create mode 100644 docs/data/charts/bar-demo/StackedBarChart.tsx create mode 100644 docs/data/charts/bar-demo/StackedBarChart.tsx.preview create mode 100644 docs/data/charts/bar-demo/TinyBarChart.js create mode 100644 docs/data/charts/bar-demo/TinyBarChart.tsx create mode 100644 docs/data/charts/bar-demo/TinyBarChart.tsx.preview create mode 100644 docs/data/charts/bar-demo/bar-demo.md create mode 100644 docs/data/charts/line-demo/BiaxialLineChart.js create mode 100644 docs/data/charts/line-demo/BiaxialLineChart.tsx create mode 100644 docs/data/charts/line-demo/BiaxialLineChart.tsx.preview create mode 100644 docs/data/charts/line-demo/DashedLineChart.js create mode 100644 docs/data/charts/line-demo/DashedLineChart.tsx create mode 100644 docs/data/charts/line-demo/SimpleLineChart.js create mode 100644 docs/data/charts/line-demo/SimpleLineChart.tsx create mode 100644 docs/data/charts/line-demo/SimpleLineChart.tsx.preview create mode 100644 docs/data/charts/line-demo/TinyLineChart.js create mode 100644 docs/data/charts/line-demo/TinyLineChart.tsx create mode 100644 docs/data/charts/line-demo/line-demo.md create mode 100644 docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js create mode 100644 docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx create mode 100644 docs/data/charts/scatter-demo/SimpleScatterChart.js create mode 100644 docs/data/charts/scatter-demo/SimpleScatterChart.tsx create mode 100644 docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview create mode 100644 docs/data/charts/scatter-demo/scatter-demo.md create mode 100644 docs/pages/x/api/charts/area-plot.js create mode 100644 docs/pages/x/api/charts/area-plot.json create mode 100644 docs/pages/x/api/charts/mark-plot.js create mode 100644 docs/pages/x/api/charts/mark-plot.json create mode 100644 docs/pages/x/react-charts/areas-demo.js rename docs/pages/x/react-charts/{areas.js => bar-demo.js} (68%) create mode 100644 docs/pages/x/react-charts/line-demo.js create mode 100644 docs/pages/x/react-charts/scatter-demo.js create mode 100644 docs/translations/api-docs/charts/area-plot.json create mode 100644 docs/translations/api-docs/charts/mark-plot.json diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts index 44965f693236..cbcdd88a3cd2 100644 --- a/docs/data/charts-component-api-pages.ts +++ b/docs/data/charts-component-api-pages.ts @@ -2,6 +2,7 @@ import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage'; export default [ { pathname: '/x/api/charts/area-element', title: 'AreaElement' }, + { pathname: '/x/api/charts/area-plot', title: 'AreaPlot' }, { pathname: '/x/api/charts/axis', title: 'Axis' }, { pathname: '/x/api/charts/axis-highlight', title: 'AxisHighlight' }, { pathname: '/x/api/charts/bar-chart', title: 'BarChart' }, @@ -12,6 +13,7 @@ export default [ { pathname: '/x/api/charts/line-element', title: 'LineElement' }, { pathname: '/x/api/charts/line-plot', title: 'LinePlot' }, { pathname: '/x/api/charts/mark-element', title: 'MarkElement' }, + { pathname: '/x/api/charts/mark-plot', title: 'MarkPlot' }, { pathname: '/x/api/charts/scatter', title: 'Scatter' }, { pathname: '/x/api/charts/scatter-chart', title: 'ScatterChart' }, { pathname: '/x/api/charts/scatter-plot', title: 'ScatterPlot' }, diff --git a/docs/data/charts/areas-demo/PercentAreaChart.js b/docs/data/charts/areas-demo/PercentAreaChart.js new file mode 100644 index 000000000000..460d986f2d2a --- /dev/null +++ b/docs/data/charts/areas-demo/PercentAreaChart.js @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const time = [ + new Date(2015, 1, 0), + new Date(2015, 2, 0), + new Date(2015, 3, 0), + new Date(2015, 4, 0), + new Date(2015, 5, 0), + new Date(2015, 6, 0), + new Date(2015, 7, 0), +]; + +const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const c = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; + +const getPercents = (array) => + array.map((v, index) => (100 * v) / (a[index] + b[index] + c[index])); + +export default function PercentAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/PercentAreaChart.tsx b/docs/data/charts/areas-demo/PercentAreaChart.tsx new file mode 100644 index 000000000000..a32a227452d7 --- /dev/null +++ b/docs/data/charts/areas-demo/PercentAreaChart.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const time = [ + new Date(2015, 1, 0), + new Date(2015, 2, 0), + new Date(2015, 3, 0), + new Date(2015, 4, 0), + new Date(2015, 5, 0), + new Date(2015, 6, 0), + new Date(2015, 7, 0), +]; +const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const c = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; + +const getPercents = (array: number[]) => + array.map((v, index) => (100 * v) / (a[index] + b[index] + c[index])); + +export default function PercentAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.js b/docs/data/charts/areas-demo/SimpleAreaChart.js new file mode 100644 index 000000000000..e2c303378085 --- /dev/null +++ b/docs/data/charts/areas-demo/SimpleAreaChart.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx b/docs/data/charts/areas-demo/SimpleAreaChart.tsx new file mode 100644 index 000000000000..e2c303378085 --- /dev/null +++ b/docs/data/charts/areas-demo/SimpleAreaChart.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview new file mode 100644 index 000000000000..a166cf091d39 --- /dev/null +++ b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/charts/areas-demo/StackedAreaChart.js b/docs/data/charts/areas-demo/StackedAreaChart.js new file mode 100644 index 000000000000..673c5c70df42 --- /dev/null +++ b/docs/data/charts/areas-demo/StackedAreaChart.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function StackedAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/StackedAreaChart.tsx b/docs/data/charts/areas-demo/StackedAreaChart.tsx new file mode 100644 index 000000000000..673c5c70df42 --- /dev/null +++ b/docs/data/charts/areas-demo/StackedAreaChart.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function StackedAreaChart() { + return ( + + ); +} diff --git a/docs/data/charts/areas-demo/TinyAreaChart.js b/docs/data/charts/areas-demo/TinyAreaChart.js new file mode 100644 index 000000000000..54f3dc1d2fe4 --- /dev/null +++ b/docs/data/charts/areas-demo/TinyAreaChart.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ChartContainer, AreaPlot } from '@mui/x-charts'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyAreaChart() { + return ( + + + + ); +} diff --git a/docs/data/charts/areas-demo/TinyAreaChart.tsx b/docs/data/charts/areas-demo/TinyAreaChart.tsx new file mode 100644 index 000000000000..54f3dc1d2fe4 --- /dev/null +++ b/docs/data/charts/areas-demo/TinyAreaChart.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ChartContainer, AreaPlot } from '@mui/x-charts'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyAreaChart() { + return ( + + + + ); +} diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md new file mode 100644 index 000000000000..18f861e452bf --- /dev/null +++ b/docs/data/charts/areas-demo/areas-demo.md @@ -0,0 +1,24 @@ +--- +product: charts +title: Charts - Areas demonstration +--- + +# Charts - Areas demonstration + +

This page groups demonstration using areas charts.

+ +## SimpleAreaChart + +{{"demo": "SimpleAreaChart.js", "bg": "inline"}} + +## StackedAreaChart + +{{"demo": "StackedAreaChart.js", "bg": "inline"}} + +## TinyAreaChart + +{{"demo": "TinyAreaChart.js", "bg": "inline"}} + +## PercentAreaChart + +{{"demo": "PercentAreaChart.js", "bg": "inline"}} diff --git a/docs/data/charts/areas/areas.md b/docs/data/charts/areas/areas.md deleted file mode 100644 index 7a590a86343b..000000000000 --- a/docs/data/charts/areas/areas.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -product: charts -title: Charts - Areas ---- - -# Charts - Areas - -

Chart areas can express qualities about data, such as highlights, and comparisons.

- -> ⚠️ This feature isn't implemented yet. It's coming. -> -> 👍 Upvote [issue #7928](https://github.com/mui/mui-x/issues/7928) if you want to see it land faster. -> -> 💬 To have a solution that meets your needs, leave a comment on the [same issue](https://github.com/mui/mui-x/issues/7928). -> If you already have a use case for this component, or if you are facing a pain-point with your current solution. diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.js b/docs/data/charts/bar-demo/BarChartStackedBySign.js new file mode 100644 index 000000000000..1a12ac0463be --- /dev/null +++ b/docs/data/charts/bar-demo/BarChartStackedBySign.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300]; +const uData = [4000, -3000, -2000, 2780, -1890, 2390, 3490]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BarChartStackedBySign() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx new file mode 100644 index 000000000000..1a12ac0463be --- /dev/null +++ b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300]; +const uData = [4000, -3000, -2000, 2780, -1890, 2390, 3490]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BarChartStackedBySign() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview new file mode 100644 index 000000000000..98b3595e61f8 --- /dev/null +++ b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.js b/docs/data/charts/bar-demo/BiaxialBarChart.js new file mode 100644 index 000000000000..189a5d5646d1 --- /dev/null +++ b/docs/data/charts/bar-demo/BiaxialBarChart.js @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BiaxialBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.tsx b/docs/data/charts/bar-demo/BiaxialBarChart.tsx new file mode 100644 index 000000000000..189a5d5646d1 --- /dev/null +++ b/docs/data/charts/bar-demo/BiaxialBarChart.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BiaxialBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/MixedBarChart.js b/docs/data/charts/bar-demo/MixedBarChart.js new file mode 100644 index 000000000000..924c2ac6aeb1 --- /dev/null +++ b/docs/data/charts/bar-demo/MixedBarChart.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function MixedBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx b/docs/data/charts/bar-demo/MixedBarChart.tsx new file mode 100644 index 000000000000..924c2ac6aeb1 --- /dev/null +++ b/docs/data/charts/bar-demo/MixedBarChart.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; + +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function MixedBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx.preview b/docs/data/charts/bar-demo/MixedBarChart.tsx.preview new file mode 100644 index 000000000000..2afaa4b5e3b0 --- /dev/null +++ b/docs/data/charts/bar-demo/MixedBarChart.tsx.preview @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/docs/data/charts/bar-demo/SimpleBarChart.js b/docs/data/charts/bar-demo/SimpleBarChart.js new file mode 100644 index 000000000000..2440ed1a6397 --- /dev/null +++ b/docs/data/charts/bar-demo/SimpleBarChart.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx b/docs/data/charts/bar-demo/SimpleBarChart.tsx new file mode 100644 index 000000000000..2440ed1a6397 --- /dev/null +++ b/docs/data/charts/bar-demo/SimpleBarChart.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview b/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview new file mode 100644 index 000000000000..ca4d58a26227 --- /dev/null +++ b/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/docs/data/charts/bar-demo/StackedBarChart.js b/docs/data/charts/bar-demo/StackedBarChart.js new file mode 100644 index 000000000000..d54476d0b1d7 --- /dev/null +++ b/docs/data/charts/bar-demo/StackedBarChart.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function StackedBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx b/docs/data/charts/bar-demo/StackedBarChart.tsx new file mode 100644 index 000000000000..d54476d0b1d7 --- /dev/null +++ b/docs/data/charts/bar-demo/StackedBarChart.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function StackedBarChart() { + return ( + + ); +} diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx.preview b/docs/data/charts/bar-demo/StackedBarChart.tsx.preview new file mode 100644 index 000000000000..898de22632e8 --- /dev/null +++ b/docs/data/charts/bar-demo/StackedBarChart.tsx.preview @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/docs/data/charts/bar-demo/TinyBarChart.js b/docs/data/charts/bar-demo/TinyBarChart.js new file mode 100644 index 000000000000..9643596bba8a --- /dev/null +++ b/docs/data/charts/bar-demo/TinyBarChart.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { ChartContainer, BarPlot } from '@mui/x-charts'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyBarChart() { + return ( + + + + ); +} diff --git a/docs/data/charts/bar-demo/TinyBarChart.tsx b/docs/data/charts/bar-demo/TinyBarChart.tsx new file mode 100644 index 000000000000..9643596bba8a --- /dev/null +++ b/docs/data/charts/bar-demo/TinyBarChart.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { ChartContainer, BarPlot } from '@mui/x-charts'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyBarChart() { + return ( + + + + ); +} diff --git a/docs/data/charts/bar-demo/TinyBarChart.tsx.preview b/docs/data/charts/bar-demo/TinyBarChart.tsx.preview new file mode 100644 index 000000000000..792d70f88da1 --- /dev/null +++ b/docs/data/charts/bar-demo/TinyBarChart.tsx.preview @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/docs/data/charts/bar-demo/bar-demo.md b/docs/data/charts/bar-demo/bar-demo.md new file mode 100644 index 000000000000..d02b79d86594 --- /dev/null +++ b/docs/data/charts/bar-demo/bar-demo.md @@ -0,0 +1,32 @@ +--- +product: charts +title: Charts - Bar demonstration +--- + +# Charts - Bar demonstration + +

This page groups demonstration using bar charts.

+ +## TinyBarChart + +{{"demo": "TinyBarChart.js", "bg": "inline"}} + +## SimpleBarChart + +{{"demo": "SimpleBarChart.js", "bg": "inline"}} + +## StackedBarChart + +{{"demo": "StackedBarChart.js", "bg": "inline"}} + +## MixedBarChart + +{{"demo": "MixedBarChart.js", "bg": "inline"}} + +## BarChartStackedBySign + +{{"demo": "BarChartStackedBySign.js", "bg": "inline"}} + +## BiaxialBarChart + +{{"demo": "BiaxialBarChart.js", "bg": "inline"}} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.js b/docs/data/charts/line-demo/BiaxialLineChart.js new file mode 100644 index 000000000000..e65932325993 --- /dev/null +++ b/docs/data/charts/line-demo/BiaxialLineChart.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BiaxialLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx b/docs/data/charts/line-demo/BiaxialLineChart.tsx new file mode 100644 index 000000000000..e65932325993 --- /dev/null +++ b/docs/data/charts/line-demo/BiaxialLineChart.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function BiaxialLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview b/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview new file mode 100644 index 000000000000..1dab89343d2d --- /dev/null +++ b/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/charts/line-demo/DashedLineChart.js b/docs/data/charts/line-demo/DashedLineChart.js new file mode 100644 index 000000000000..c4117a7c4bfa --- /dev/null +++ b/docs/data/charts/line-demo/DashedLineChart.js @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function DashedLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/DashedLineChart.tsx b/docs/data/charts/line-demo/DashedLineChart.tsx new file mode 100644 index 000000000000..c4117a7c4bfa --- /dev/null +++ b/docs/data/charts/line-demo/DashedLineChart.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function DashedLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/SimpleLineChart.js b/docs/data/charts/line-demo/SimpleLineChart.js new file mode 100644 index 000000000000..3e1d80c63c75 --- /dev/null +++ b/docs/data/charts/line-demo/SimpleLineChart.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx b/docs/data/charts/line-demo/SimpleLineChart.tsx new file mode 100644 index 000000000000..3e1d80c63c75 --- /dev/null +++ b/docs/data/charts/line-demo/SimpleLineChart.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function SimpleLineChart() { + return ( + + ); +} diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx.preview b/docs/data/charts/line-demo/SimpleLineChart.tsx.preview new file mode 100644 index 000000000000..5c74942984f3 --- /dev/null +++ b/docs/data/charts/line-demo/SimpleLineChart.tsx.preview @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/docs/data/charts/line-demo/TinyLineChart.js b/docs/data/charts/line-demo/TinyLineChart.js new file mode 100644 index 000000000000..3b33df37e940 --- /dev/null +++ b/docs/data/charts/line-demo/TinyLineChart.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; + +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyLineChart() { + return ( + + + + + ); +} diff --git a/docs/data/charts/line-demo/TinyLineChart.tsx b/docs/data/charts/line-demo/TinyLineChart.tsx new file mode 100644 index 000000000000..3b33df37e940 --- /dev/null +++ b/docs/data/charts/line-demo/TinyLineChart.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; + +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function TinyLineChart() { + return ( + + + + + ); +} diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md new file mode 100644 index 000000000000..b5937b72cfa3 --- /dev/null +++ b/docs/data/charts/line-demo/line-demo.md @@ -0,0 +1,24 @@ +--- +product: charts +title: Charts - Line demonstration +--- + +# Charts - Line demonstration + +

This page groups demonstration using line charts.

+ +## SimpleLineChart + +{{"demo": "SimpleLineChart.js", "bg": "inline"}} + +## TinyLineChart + +{{"demo": "TinyLineChart.js", "bg": "inline"}} + +## DashedLineChart + +{{"demo": "DashedLineChart.js", "bg": "inline"}} + +## BiaxialLineChart + +{{"demo": "BiaxialLineChart.js", "bg": "inline"}} diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js new file mode 100644 index 000000000000..6fb998d50fe8 --- /dev/null +++ b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import { axisClasses } from '@mui/x-charts'; + +const data1 = [ + { x: 100, y: 200, id: 1 }, + { x: 120, y: 100, id: 2 }, + { x: 170, y: 300, id: 3 }, + { x: 140, y: 250, id: 4 }, + { x: 150, y: 400, id: 5 }, + { x: 110, y: 280, id: 6 }, +]; + +const data2 = [ + { x: 300, y: 300, id: 1 }, + { x: 400, y: 500, id: 2 }, + { x: 200, y: 700, id: 3 }, + { x: 340, y: 350, id: 4 }, + { x: 560, y: 500, id: 5 }, + { x: 230, y: 780, id: 6 }, + { x: 500, y: 400, id: 7 }, + { x: 300, y: 500, id: 8 }, + { x: 240, y: 300, id: 9 }, + { x: 320, y: 550, id: 10 }, + { x: 500, y: 400, id: 11 }, + { x: 420, y: 280, id: 12 }, +]; + +export default function MultipleYAxesScatterChart() { + return ( + `${x}cm, ${y}kg`, + }, + { + data: data2, + yAxisKey: 'rightAxis', + color: '#82ca9d', + valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`, + }, + ]} + xAxis={[{ min: 0 }]} + yAxis={[ + { id: 'leftAxis', min: 0 }, + { id: 'rightAxis', min: 0 }, + ]} + rightAxis="rightAxis" + sx={{ + [`& .${axisClasses.left}`]: { + line: { stroke: '#8884d8' }, + text: { fill: '#8884d8' }, + }, + [`& .${axisClasses.right}`]: { + line: { stroke: '#82ca9d' }, + text: { fill: '#82ca9d' }, + }, + }} + /> + ); +} diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx new file mode 100644 index 000000000000..258f478d5e55 --- /dev/null +++ b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import { axisClasses } from '@mui/x-charts'; + +const data1 = [ + { x: 100, y: 200, id: 1 }, + { x: 120, y: 100, id: 2 }, + { x: 170, y: 300, id: 3 }, + { x: 140, y: 250, id: 4 }, + { x: 150, y: 400, id: 5 }, + { x: 110, y: 280, id: 6 }, +]; +const data2 = [ + { x: 300, y: 300, id: 1 }, + { x: 400, y: 500, id: 2 }, + { x: 200, y: 700, id: 3 }, + { x: 340, y: 350, id: 4 }, + { x: 560, y: 500, id: 5 }, + { x: 230, y: 780, id: 6 }, + { x: 500, y: 400, id: 7 }, + { x: 300, y: 500, id: 8 }, + { x: 240, y: 300, id: 9 }, + { x: 320, y: 550, id: 10 }, + { x: 500, y: 400, id: 11 }, + { x: 420, y: 280, id: 12 }, +]; + +export default function MultipleYAxesScatterChart() { + return ( + `${x}cm, ${y}kg`, + }, + { + data: data2, + yAxisKey: 'rightAxis', + color: '#82ca9d', + valueFormatter: ({ x, y }) => `${x}cm, ${y}kg`, + }, + ]} + xAxis={[{ min: 0 }]} + yAxis={[ + { id: 'leftAxis', min: 0 }, + { id: 'rightAxis', min: 0 }, + ]} + rightAxis="rightAxis" + sx={{ + [`& .${axisClasses.left}`]: { + line: { stroke: '#8884d8' }, + text: { fill: '#8884d8' }, + }, + [`& .${axisClasses.right}`]: { + line: { stroke: '#82ca9d' }, + text: { fill: '#82ca9d' }, + }, + }} + /> + ); +} diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.js b/docs/data/charts/scatter-demo/SimpleScatterChart.js new file mode 100644 index 000000000000..f73628c8a3cf --- /dev/null +++ b/docs/data/charts/scatter-demo/SimpleScatterChart.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; + +const data = [ + { x: 100, y: 200, id: 1 }, + { x: 120, y: 100, id: 2 }, + { x: 170, y: 300, id: 3 }, + { x: 140, y: 250, id: 4 }, + { x: 150, y: 400, id: 5 }, + { x: 110, y: 280, id: 6 }, +]; + +export default function SimpleScatterChart() { + return ( + + ); +} diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx new file mode 100644 index 000000000000..f73628c8a3cf --- /dev/null +++ b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; + +const data = [ + { x: 100, y: 200, id: 1 }, + { x: 120, y: 100, id: 2 }, + { x: 170, y: 300, id: 3 }, + { x: 140, y: 250, id: 4 }, + { x: 150, y: 400, id: 5 }, + { x: 110, y: 280, id: 6 }, +]; + +export default function SimpleScatterChart() { + return ( + + ); +} diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview new file mode 100644 index 000000000000..dc2fc3f73546 --- /dev/null +++ b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md new file mode 100644 index 000000000000..7da44405af08 --- /dev/null +++ b/docs/data/charts/scatter-demo/scatter-demo.md @@ -0,0 +1,16 @@ +--- +product: charts +title: Charts - Scatter demonstration +--- + +# Charts - Scatter demonstration + +

This page groups demonstration using scatter charts.

+ +## SimpleScatterChart + +{{"demo": "SimpleScatterChart.js", "bg": "inline"}} + +## MultipleYAxesScatterChart + +{{"demo": "MultipleYAxesScatterChart.js", "bg": "inline"}} diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js index bc3197eb0823..ea058644f609 100644 --- a/docs/data/charts/stacking/StackOrderDemo.js +++ b/docs/data/charts/stacking/StackOrderDemo.js @@ -113,6 +113,7 @@ export default function StackOrderDemo() { xAxis={[xAxis]} yAxis={[{ min: 0, max: 100 }]} series={modifiedSeries} + margin={{ bottom: 60 }} sx={{ '.MuiAxis-bottom': { '.MuiAxis-tickLabel': { @@ -120,6 +121,9 @@ export default function StackOrderDemo() { alignmentBaseline: 'hanging', textAnchor: 'start', }, + '.MuiAxis-label': { + transform: 'translateY(15px)', + }, }, }} /> diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx index f6b7acb8a070..47021ea021a9 100644 --- a/docs/data/charts/stacking/StackOrderDemo.tsx +++ b/docs/data/charts/stacking/StackOrderDemo.tsx @@ -109,6 +109,7 @@ export default function StackOrderDemo() { xAxis={[xAxis]} yAxis={[{ min: 0, max: 100 }]} series={modifiedSeries} + margin={{ bottom: 60 }} sx={{ '.MuiAxis-bottom': { '.MuiAxis-tickLabel': { @@ -116,6 +117,9 @@ export default function StackOrderDemo() { alignmentBaseline: 'hanging', textAnchor: 'start', }, + '.MuiAxis-label': { + transform: 'translateY(15px)', + }, }, }} /> diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 14b3f9ed9ac2..a2dfe8f0d57f 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -352,11 +352,33 @@ const pages: MuiPage[] = [ icon: ChartIcon, children: [ { pathname: '/x/react-charts', title: 'Overview' }, - { pathname: '/x/react-charts/bars', title: 'Bars' }, - { pathname: '/x/react-charts/lines', title: 'Lines' }, - { pathname: '/x/react-charts/scatter', title: 'Scatter' }, { - pathname: '', + pathname: '/x/react-charts-bars', + title: 'Bars', + children: [ + { pathname: '/x/react-charts/bars', title: 'Bars' }, + { pathname: '/x/react-charts/bar-demo', title: 'Demo' }, + ], + }, + { + pathname: '/x/react-charts-lines', + title: 'Lines', + children: [ + { pathname: '/x/react-charts/lines', title: 'Lines' }, + { pathname: '/x/react-charts/line-demo', title: 'Demo lines' }, + { pathname: '/x/react-charts/areas-demo', title: 'Demo area' }, + ], + }, + { + pathname: '/x/react-charts-scatter', + title: 'Scatter', + children: [ + { pathname: '/x/react-charts/scatter', title: 'Scatter' }, + { pathname: '/x/react-charts/scatter-demo', title: 'Demo' }, + ], + }, + { + pathname: '/x/react-charts-common-components', title: 'Common components', children: [ { pathname: '/x/react-charts/axis', title: 'Axis' }, @@ -365,7 +387,11 @@ const pages: MuiPage[] = [ { pathname: '/x/react-charts/stacking', title: 'Stacking' }, ], }, - { pathname: '/x/react-charts/areas', title: '🚧 Areas' }, + { + pathname: '/x/react-charts-demos', + title: 'Demos', + children: [], + }, { pathname: '/x/react-charts/heat-map', title: '🚧 Heat map' }, { pathname: '/x/react-charts/funnel', title: '🚧 Funnel' }, { pathname: '/x/react-charts/gantt', title: '🚧 Gantt' }, diff --git a/docs/pages/x/api/charts/area-plot.js b/docs/pages/x/api/charts/area-plot.js new file mode 100644 index 000000000000..cd677468ed8d --- /dev/null +++ b/docs/pages/x/api/charts/area-plot.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docsx/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './area-plot.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts', + false, + /\.\/area-plot(-[a-z]{2})?\.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/area-plot.json b/docs/pages/x/api/charts/area-plot.json new file mode 100644 index 000000000000..ef1f9785be28 --- /dev/null +++ b/docs/pages/x/api/charts/area-plot.json @@ -0,0 +1,9 @@ +{ + "props": {}, + "slots": {}, + "name": "AreaPlot", + "styles": { "classes": [], "globalClasses": {}, "name": "MuiAreaPlot" }, + "filename": "/packages/x-charts/src/LineChart/AreaPlot.tsx", + "demos": "
    ", + "packages": [{ "packageName": "@mui/x-charts", "componentName": "AreaPlot" }] +} diff --git a/docs/pages/x/api/charts/mark-plot.js b/docs/pages/x/api/charts/mark-plot.js new file mode 100644 index 000000000000..2c02bfc5c218 --- /dev/null +++ b/docs/pages/x/api/charts/mark-plot.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docsx/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './mark-plot.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts', + false, + /\.\/mark-plot(-[a-z]{2})?\.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json new file mode 100644 index 000000000000..9cce7fdcbd46 --- /dev/null +++ b/docs/pages/x/api/charts/mark-plot.json @@ -0,0 +1,9 @@ +{ + "props": {}, + "slots": {}, + "name": "MarkPlot", + "styles": { "classes": [], "globalClasses": {}, "name": "MuiMarkPlot" }, + "filename": "/packages/x-charts/src/LineChart/MarkPlot.tsx", + "demos": "
      ", + "packages": [{ "packageName": "@mui/x-charts", "componentName": "MarkPlot" }] +} diff --git a/docs/pages/x/react-charts/areas-demo.js b/docs/pages/x/react-charts/areas-demo.js new file mode 100644 index 000000000000..7c4e36ca78e5 --- /dev/null +++ b/docs/pages/x/react-charts/areas-demo.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/charts/areas-demo/areas-demo.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-charts/areas.js b/docs/pages/x/react-charts/bar-demo.js similarity index 68% rename from docs/pages/x/react-charts/areas.js rename to docs/pages/x/react-charts/bar-demo.js index 604dccab2e14..1669aefdb6e9 100644 --- a/docs/pages/x/react-charts/areas.js +++ b/docs/pages/x/react-charts/bar-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/areas/areas.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/bar-demo/bar-demo.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/line-demo.js b/docs/pages/x/react-charts/line-demo.js new file mode 100644 index 000000000000..3da172307598 --- /dev/null +++ b/docs/pages/x/react-charts/line-demo.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/charts/line-demo/line-demo.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-charts/scatter-demo.js b/docs/pages/x/react-charts/scatter-demo.js new file mode 100644 index 000000000000..f06d196243c3 --- /dev/null +++ b/docs/pages/x/react-charts/scatter-demo.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/charts/scatter-demo/scatter-demo.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/translations/api-docs/charts/area-plot.json b/docs/translations/api-docs/charts/area-plot.json new file mode 100644 index 000000000000..be9cfbbe310c --- /dev/null +++ b/docs/translations/api-docs/charts/area-plot.json @@ -0,0 +1,6 @@ +{ + "componentDescription": "", + "propDescriptions": {}, + "classDescriptions": {}, + "slotDescriptions": {} +} diff --git a/docs/translations/api-docs/charts/mark-plot.json b/docs/translations/api-docs/charts/mark-plot.json new file mode 100644 index 000000000000..be9cfbbe310c --- /dev/null +++ b/docs/translations/api-docs/charts/mark-plot.json @@ -0,0 +1,6 @@ +{ + "componentDescription": "", + "propDescriptions": {}, + "classDescriptions": {}, + "slotDescriptions": {} +} diff --git a/packages/x-charts/src/Axis/index.tsx b/packages/x-charts/src/Axis/index.tsx index e6f8a1c4788d..f10d4917e774 100644 --- a/packages/x-charts/src/Axis/index.tsx +++ b/packages/x-charts/src/Axis/index.tsx @@ -1 +1,2 @@ export * from './Axis'; +export * from './axisClasses'; diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index b685bbd2b741..524bace837bf 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -70,7 +70,7 @@ function BarChart(props: BarChartProps) { - + {children} @@ -164,6 +164,7 @@ BarChart.propTypes = { ]), series: PropTypes.arrayOf( PropTypes.shape({ + color: PropTypes.string, data: PropTypes.arrayOf(PropTypes.number).isRequired, highlightScope: PropTypes.shape({ faded: PropTypes.oneOf(['global', 'none', 'series']), @@ -182,6 +183,7 @@ BarChart.propTypes = { 'reverse', ]), type: PropTypes.oneOf(['bar']), + valueFormatter: PropTypes.func, xAxisKey: PropTypes.string, yAxisKey: PropTypes.string, }), @@ -241,7 +243,7 @@ BarChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, @@ -265,7 +267,7 @@ BarChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, diff --git a/packages/x-charts/src/ChartContainer/index.tsx b/packages/x-charts/src/ChartContainer/index.tsx index af4b1e579af0..3eeea091edae 100644 --- a/packages/x-charts/src/ChartContainer/index.tsx +++ b/packages/x-charts/src/ChartContainer/index.tsx @@ -23,7 +23,20 @@ export type ChartContainerProps = Omit< }; export function ChartContainer(props: ChartContainerProps) { - const { width, height, series, margin, xAxis, yAxis, colors, sx, title, desc, children } = props; + const { + width, + height, + series, + margin, + xAxis, + yAxis, + colors, + sx, + title, + desc, + disableAxisListener, + children, + } = props; const ref = React.useRef(null); return ( @@ -32,7 +45,15 @@ export function ChartContainer(props: ChartContainerProps) { - + {children} diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index e043c333d70e..da0bec4f81d0 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -32,7 +32,7 @@ function LineChart(props: LineChartProps) { colors, sx, tooltip, - axisHighlight, + axisHighlight = { x: 'line' }, topAxis, leftAxis, rightAxis, @@ -53,7 +53,7 @@ function LineChart(props: LineChartProps) { xAxis ?? [ { id: DEFAULT_X_AXIS_KEY, - scaleType: 'band', + scaleType: 'point', data: [...new Array(Math.max(...series.map((s) => s.data.length)))].map( (_, index) => index, ), @@ -168,6 +168,7 @@ LineChart.propTypes = { series: PropTypes.arrayOf( PropTypes.shape({ area: PropTypes.bool, + color: PropTypes.string, curve: PropTypes.oneOf([ 'catmullRom', 'linear', @@ -196,6 +197,7 @@ LineChart.propTypes = { 'reverse', ]), type: PropTypes.oneOf(['line']), + valueFormatter: PropTypes.func, xAxisKey: PropTypes.string, yAxisKey: PropTypes.string, }), @@ -255,7 +257,7 @@ LineChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, @@ -279,7 +281,7 @@ LineChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index 106ee8cc3005..e4e52c27638b 100644 --- a/packages/x-charts/src/LineChart/MarkElement.tsx +++ b/packages/x-charts/src/LineChart/MarkElement.tsx @@ -57,6 +57,7 @@ const MarkElementPath = styled('path', { overridesResolver: (_, styles) => styles.root, })<{ ownerState: MarkElementOwnerState }>(({ ownerState, theme }) => ({ transform: `translate(${ownerState.x}px, ${ownerState.y}px)`, + transformOrigin: `${ownerState.x}px ${ownerState.y}px`, fill: (theme.vars || theme).palette.background.paper, stroke: ownerState.color, strokeWidth: 2, diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index f5d41520c71b..559b96b81e5d 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -30,13 +30,17 @@ export function MarkPlot() { const yScale = yAxis[yAxisKey].scale; const xData = xAxis[xAxisKey].data; - const xDomain = xAxis[xAxisKey].scale.domain(); - const yDomain = yScale.domain(); + const xRange = xAxis[xAxisKey].scale.range(); + const yRange = yScale.range(); + const isInRange = ({ x, y }: { x: number; y: number }) => { - if (x < xDomain[0] || x > xDomain[1]) { + if (x < Math.min(...xRange) || x > Math.max(...xRange)) { + return false; + } + if (y < Math.min(...yRange) || y > Math.max(...yRange)) { return false; } - return !(y < yDomain[0] || y > yDomain[1]); + return true; }; if (xData === undefined) { @@ -48,7 +52,11 @@ export function MarkPlot() { return xData ?.map((x, index) => { const y = stackedData[index][1]; - return { x, y, index }; + return { + x: xScale(x), + y: yScale(y), + index, + }; }) .filter(isInRange) .map(({ x, y, index }) => ( @@ -58,8 +66,8 @@ export function MarkPlot() { dataIndex={index} shape="circle" color={series[seriesId].color} - x={xScale(x)} - y={yScale(y)} + x={x} + y={y} highlightScope={series[seriesId].highlightScope} /> )); diff --git a/packages/x-charts/src/LineChart/index.tsx b/packages/x-charts/src/LineChart/index.tsx index f68e29b5cc20..ddeb4663f28d 100644 --- a/packages/x-charts/src/LineChart/index.tsx +++ b/packages/x-charts/src/LineChart/index.tsx @@ -1,4 +1,6 @@ export { LinePlot } from './LinePlot'; +export { AreaPlot } from './AreaPlot'; +export { MarkPlot } from './MarkPlot'; export { LineChart } from './LineChart'; export * from './AreaElement'; diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx index fefa409b25cc..4ca92f236bb1 100644 --- a/packages/x-charts/src/ScatterChart/Scatter.tsx +++ b/packages/x-charts/src/ScatterChart/Scatter.tsx @@ -26,45 +26,56 @@ function Scatter(props: ScatterProps) { const getYPosition = getValueToPositionMapper(yScale); const getInteractionItemProps = useInteractionItemProps(series.highlightScope); - const xDomain = xScale.domain(); - const yDomain = yScale.domain(); + const xRange = xScale.range(); + const yRange = yScale.range(); + const isInRange = ({ x, y }: { x: number; y: number }) => { - if (x < xDomain[0] || x > xDomain[1]) { + if (x < Math.min(...xRange) || x > Math.max(...xRange)) { + return false; + } + if (y < Math.min(...yRange) || y > Math.max(...yRange)) { return false; } - return !(y < yDomain[0] || y > yDomain[1]); + return true; }; - return ( - {series.data.filter(isInRange).map(({ x, y, id }, dataIndex) => { - const isHighlighted = getIsHighlighted( - item, - { type: 'scatter', seriesId: series.id, dataIndex }, - series.highlightScope, - ); - - const isFaded = - !isHighlighted && - getIsFaded( + {series.data + .map(({ x, y, id }, index) => ({ + x: getXPosition(x), + y: getYPosition(y), + id, + dataIndex: index, + })) + .filter(isInRange) + .map(({ x, y, id, dataIndex }) => { + const isHighlighted = getIsHighlighted( item, { type: 'scatter', seriesId: series.id, dataIndex }, series.highlightScope, ); - return ( - - ); - })} + const isFaded = + !isHighlighted && + getIsFaded( + item, + { type: 'scatter', seriesId: series.id, dataIndex }, + series.highlightScope, + ); + + return ( + + ); + })} ); } diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 290b34435270..f6ff2fd402c1 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -144,6 +144,7 @@ ScatterChart.propTypes = { ]), series: PropTypes.arrayOf( PropTypes.shape({ + color: PropTypes.string, data: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, @@ -159,6 +160,7 @@ ScatterChart.propTypes = { label: PropTypes.string, markerSize: PropTypes.number, type: PropTypes.oneOf(['scatter']), + valueFormatter: PropTypes.func, xAxisKey: PropTypes.string, yAxisKey: PropTypes.string, }), @@ -218,7 +220,7 @@ ScatterChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, @@ -242,7 +244,7 @@ ScatterChart.propTypes = { min: PropTypes.number, minTicks: PropTypes.number, position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'pow', 'sqrt', 'time', 'utc']), + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), stroke: PropTypes.string, tickFontSize: PropTypes.number, tickSize: PropTypes.number, diff --git a/packages/x-charts/src/Tooltip/AxisTooltipContent.tsx b/packages/x-charts/src/Tooltip/AxisTooltipContent.tsx index ae80c687f6bc..cbe485fce8da 100644 --- a/packages/x-charts/src/Tooltip/AxisTooltipContent.tsx +++ b/packages/x-charts/src/Tooltip/AxisTooltipContent.tsx @@ -42,9 +42,11 @@ export function DefaultAxisContent(props: AxisContentProps) { {axisValue != null && ( - - {axisFormatter(axisValue)} - + + + {axisFormatter(axisValue)} + + )} @@ -55,7 +57,7 @@ export function DefaultAxisContent(props: AxisContentProps) { - {label ?? id} + {label ? {label} : null} diff --git a/packages/x-charts/src/Tooltip/ItemTooltipContent.tsx b/packages/x-charts/src/Tooltip/ItemTooltipContent.tsx index a05c9cd034d0..fd7f8efefa34 100644 --- a/packages/x-charts/src/Tooltip/ItemTooltipContent.tsx +++ b/packages/x-charts/src/Tooltip/ItemTooltipContent.tsx @@ -22,7 +22,7 @@ export function DefaultItemContent(props: ItemContent return null; } - const displayedLabel = series.label ?? series.id; + const displayedLabel = series.label ?? null; const color = series.color; // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent // @ts-ignore diff --git a/packages/x-charts/src/Tooltip/TooltipTable.tsx b/packages/x-charts/src/Tooltip/TooltipTable.tsx index b769f79a04ce..edbc32fd6d6f 100644 --- a/packages/x-charts/src/Tooltip/TooltipTable.tsx +++ b/packages/x-charts/src/Tooltip/TooltipTable.tsx @@ -5,7 +5,7 @@ export const TooltipPaper = styled(Paper, { name: 'MuiChartsTooltip', slot: 'Table', })(({ theme }) => ({ - padding: `${theme.spacing(2)} ${theme.spacing(3)}`, + padding: `${theme.spacing(1)} ${theme.spacing(1)}`, })); export const TooltipTable = styled('table', { @@ -17,7 +17,8 @@ export const TooltipCell = styled('td', { name: 'MuiChartsTooltip', slot: 'Cell', })(({ theme }) => ({ - padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, + padding: `${theme.spacing(0.25)} ${theme.spacing(0.5)}`, + verticalAlign: 'baseline', })); export const TooltipMark = styled('div', { diff --git a/packages/x-charts/src/XAxis/XAxis.tsx b/packages/x-charts/src/XAxis/XAxis.tsx index 3909c91c3cd4..3f2b9961a88e 100644 --- a/packages/x-charts/src/XAxis/XAxis.tsx +++ b/packages/x-charts/src/XAxis/XAxis.tsx @@ -66,6 +66,10 @@ function XAxis(inProps: XAxisProps) { const xTicks = useTicks({ scale: xScale, ticksNumber }); const positionSigne = position === 'bottom' ? 1 : -1; + const labelRefPoint = { + x: left + width / 2, + y: positionSigne * (tickFontSize + tickSize + 10), + }; return ( )} - {xTicks.map(({ value, offset }, index) => ( - - {!disableTicks && } - - {value.toLocaleString()} - - - ))} + {xTicks.map(({ value, offset, labelOffset }, index) => { + const xTickLabel = labelOffset ?? 0; + const yTickLabel = positionSigne * (tickSize + 3); + return ( + + {!disableTicks && } + {value !== undefined && ( + + {value.toLocaleString()} + + )} + + ); + })} {label && (