autogenerate year and quarter columns for dates

mui · Feb 7, 2025 · 7b698b0 · 7b698b0
1 parent c44e0cf
commit 7b698b0
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 30 deletions.
diff --git a/docs/data/data-grid/pivoting/GridPivotingFinancial.js b/docs/data/data-grid/pivoting/GridPivotingFinancial.js
@@ -9,7 +9,7 @@ import {
 const rows = [
   {
     id: 1,
-    date: '2024-03-15',
+    date: '2024-05-15',
     ticker: 'AAPL',
     price: 192.45,
     volume: 5500,
@@ -25,23 +25,23 @@ const rows = [
   },
   {
     id: 3,
-    date: '2024-03-17',
+    date: '2024-01-17',
     ticker: 'MSFT',
     price: 345.22,
     volume: 4100,
     type: 'stock',
   },
   {
     id: 4,
-    date: '2023-03-18',
+    date: '2023-12-18',
     ticker: 'AAPL',
     price: 193.1,
     volume: 6700,
     type: 'stock',
   },
   {
     id: 5,
-    date: '2024-03-19',
+    date: '2024-11-19',
     ticker: 'AMZN',
     price: 145.33,
     volume: 2900,
@@ -57,23 +57,23 @@ const rows = [
   },
   {
     id: 7,
-    date: '2024-03-21',
+    date: '2024-08-21',
     ticker: 'US_TREASURY_2Y',
     price: 98.75,
     volume: 1000,
     type: 'bond',
   },
   {
     id: 8,
-    date: '2024-03-22',
+    date: '2024-05-22',
     ticker: 'MSFT',
     price: 347.89,
     volume: 4500,
     type: 'stock',
   },
   {
     id: 9,
-    date: '2024-03-23',
+    date: '2024-04-23',
     ticker: 'US_TREASURY_10Y',
     price: 95.6,
     volume: 750,
@@ -104,12 +104,6 @@ const columns = [
     headerName: 'Price',
     valueFormatter: (value) => (value ? `$${value.toFixed(2)}` : null),
   },
-  {
-    field: 'year',
-    headerName: 'Year',
-    valueGetter: (value, row) =>
-      row.date ? new Date(row.date).getFullYear() : null,
-  },
   { field: 'volume', type: 'number', headerName: 'Volume' },
   {
     field: 'type',
@@ -119,12 +113,18 @@ const columns = [
   },
 ];
 
+const getYearField = (field) => `${field}-year`;
+const getQuarterField = (field) => `${field}-quarter`;
+
 export default function GridPivotingFinancial() {
   const apiRef = useGridApiRef();
 
   const [pivotModel, setPivotModel] = React.useState({
     rows: [{ field: 'ticker' }],
-    columns: [{ field: 'year' }],
+    columns: [
+      { field: getYearField('date'), sort: 'asc' },
+      { field: getQuarterField('date'), sort: 'asc' },
+    ],
     values: [
       { field: 'price', aggFunc: 'avg' },
       { field: 'volume', aggFunc: 'sum' },

diff --git a/docs/data/data-grid/pivoting/GridPivotingFinancial.tsx b/docs/data/data-grid/pivoting/GridPivotingFinancial.tsx
@@ -11,7 +11,7 @@ import {
 const rows = [
   {
     id: 1,
-    date: '2024-03-15',
+    date: '2024-05-15',
     ticker: 'AAPL',
     price: 192.45,
     volume: 5500,
@@ -27,23 +27,23 @@ const rows = [
   },
   {
     id: 3,
-    date: '2024-03-17',
+    date: '2024-01-17',
     ticker: 'MSFT',
     price: 345.22,
     volume: 4100,
     type: 'stock',
   },
   {
     id: 4,
-    date: '2023-03-18',
+    date: '2023-12-18',
     ticker: 'AAPL',
     price: 193.1,
     volume: 6700,
     type: 'stock',
   },
   {
     id: 5,
-    date: '2024-03-19',
+    date: '2024-11-19',
     ticker: 'AMZN',
     price: 145.33,
     volume: 2900,
@@ -59,23 +59,23 @@ const rows = [
   },
   {
     id: 7,
-    date: '2024-03-21',
+    date: '2024-08-21',
     ticker: 'US_TREASURY_2Y',
     price: 98.75,
     volume: 1000,
     type: 'bond',
   },
   {
     id: 8,
-    date: '2024-03-22',
+    date: '2024-05-22',
     ticker: 'MSFT',
     price: 347.89,
     volume: 4500,
     type: 'stock',
   },
   {
     id: 9,
-    date: '2024-03-23',
+    date: '2024-04-23',
     ticker: 'US_TREASURY_10Y',
     price: 95.6,
     volume: 750,
@@ -107,12 +107,6 @@ const columns: GridColDef[] = [
     valueFormatter: (value: number | undefined) =>
       value ? `$${value.toFixed(2)}` : null,
   },
-  {
-    field: 'year',
-    headerName: 'Year',
-    valueGetter: (value, row) =>
-      row.date ? new Date(row.date).getFullYear() : null,
-  },
   { field: 'volume', type: 'number', headerName: 'Volume' },
   {
     field: 'type',
@@ -122,12 +116,18 @@ const columns: GridColDef[] = [
   },
 ];
 
+const getYearField = (field: string) => `${field}-year`;
+const getQuarterField = (field: string) => `${field}-quarter`;
+
 export default function GridPivotingFinancial() {
   const apiRef = useGridApiRef();
 
   const [pivotModel, setPivotModel] = React.useState<Unstable_GridPivotModel>({
     rows: [{ field: 'ticker' }],
-    columns: [{ field: 'year' }],
+    columns: [
+      { field: getYearField('date'), sort: 'asc' },
+      { field: getQuarterField('date'), sort: 'asc' },
+    ],
     values: [
       { field: 'price', aggFunc: 'avg' },
       { field: 'volume', aggFunc: 'sum' },

diff --git a/packages/x-data-grid-premium/src/hooks/features/pivoting/useGridPivoting.ts b/packages/x-data-grid-premium/src/hooks/features/pivoting/useGridPivoting.ts
@@ -282,7 +282,32 @@ export const useGridPivoting = ({
         const rows = rowIds.map((id) => rowsLookup[id]);
         const columns = gridColumnDefinitionsSelector(apiRef);
 
-        nonPivotDataRef.current = { rows, columns };
+        const initialColumns: GridColDef[] = [];
+        for (let i = 0; i < columns.length; i += 1) {
+          const column = columns[i];
+          const field = column.field;
+          if (!isGroupingColumn(field)) {
+            initialColumns.push(column);
+
+            if (column.type === 'date') {
+              initialColumns.push({
+                field: `${field}-year`,
+                headerName: `${column.headerName} (Year)`,
+                type: 'number',
+                valueGetter: (value, row) => new Date(row[field]).getFullYear(),
+              });
+
+              initialColumns.push({
+                field: `${field}-quarter`,
+                headerName: `${column.headerName} (Quarter)`,
+                valueGetter: (value, row) =>
+                  `Q${Math.floor(new Date(row[field]).getMonth() / 3) + 1}`,
+              });
+            }
+          }
+        }
+
+        nonPivotDataRef.current = { rows, columns: initialColumns };
       }
 
       const { rows, columns } = nonPivotDataRef.current || { rows: [], columns: [] };
@@ -318,7 +343,6 @@ export const useGridPivoting = ({
     props,
     pivotModel,
     onPivotModelChange,
-    // TODO: automatically generate derived Year and Quarter columns for date columns
     initialColumns: nonPivotDataRef.current?.columns.filter(
       (column) => !isGroupingColumn(column.field),
     ),