grid - grouping

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ColumnLabel from './ColumnLabel';
 import DropDownButton from '../widgets/DropDownButton';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
+import { DropDownMenuItem, DropDownMenuDivider } from '../modals/DropDownMenu';
 import { useSplitterDrag } from '../widgets/Splitter';
 import { FontIcon } from '../icons';
 
@@ -31,11 +31,18 @@ const ResizeHandle = styled.div`
   z-index: 1;
 `;
 
-export default function ColumnHeaderControl({ column, setSort, onResize, order }) {
+const GroupingLabel = styled.span`
+  color: green;
+  white-space: nowrap;
+`;
+
+export default function ColumnHeaderControl({ column, setSort, onResize, order, setGrouping, grouping }) {
   const onResizeDown = useSplitterDrag('clientX', onResize);
   return (
     <HeaderDiv>
       <LabelDiv>
+        {grouping && <GroupingLabel>{grouping.toLowerCase()}:</GroupingLabel>}
+
         <ColumnLabel {...column} />
         {order == 'ASC' && (
           <IconWrapper>
@@ -52,6 +59,14 @@ export default function ColumnHeaderControl({ column, setSort, onResize, order }
         <DropDownButton>
           <DropDownMenuItem onClick={() => setSort('ASC')}>Sort ascending</DropDownMenuItem>
           <DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
+          <DropDownMenuDivider />
+          <DropDownMenuItem onClick={() => setGrouping('GROUP')}>Group by</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('MAX')}>MAX</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('MIN')}>MIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('SUM')}>SUM</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('AVG')}>AVG</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('COUNT')}>COUNT</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setGrouping('COUNT DISTINCT')}>COUNT DISTINCT</DropDownMenuItem>
         </DropDownButton>
       )}
       <ResizeHandle className="resizeHandleControl" onMouseDown={onResizeDown} />

packages/web/src/datagrid/DataGridCore.js

@@ -6,6 +6,7 @@ import { HorizontalScrollBar, VerticalScrollBar } from './ScrollBars';
 import useDimensions from '../utility/useDimensions';
 import axios from '../utility/axios';
 import DataFilterControl from './DataFilterControl';
+import stableStringify from 'json-stable-stringify';
 import { getFilterType } from '@dbgate/filterparser';
 import { cellFromEvent, getCellRange, topLeftCell, isRegularCell, nullCell, emptyCellArray } from './selection';
 import keycodes from '../utility/keycodes';
@@ -481,6 +482,21 @@ export default function DataGridCore(props) {
     }
   }, [display && display.focusedColumn]);
 
+  React.useEffect(() => {
+    if (display.groupColumns) {
+      console.log('SET REFERENCE');
+
+      props.onReferenceClick({
+        schemaName: display.baseTable.schemaName,
+        pureName: display.baseTable.pureName,
+        columns: display.groupColumns.map((col) => ({
+          baseName: col,
+          refName: col,
+        })),
+      });
+    }
+  }, [stableStringify(display && display.groupColumns)]);
+
   const rowCountInfo = React.useMemo(() => {
     if (selectedCells.length > 1 && selectedCells.every((x) => _.isNumber(x[0]) && _.isNumber(x[1]))) {
       let sum = _.sumBy(selectedCells, (cell) => {
@@ -1101,6 +1117,10 @@ export default function DataGridCore(props) {
     }
   }
 
+  function setGrouping(uniqueName, groupFunc) {
+    display.setGrouping(uniqueName, groupFunc);
+  }
+
   //   console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
   //   console.log('gridScrollAreaHeight', gridScrollAreaHeight);
   //   console.log('containerHeight', containerHeight);
@@ -1155,6 +1175,8 @@ export default function DataGridCore(props) {
                   setSort={display.sortable ? (order) => display.setSort(col.uniqueName, order) : null}
                   order={display.getSortOrder(col.uniqueName)}
                   onResize={(diff) => display.resizeColumn(col.uniqueName, col.widthNumber, diff)}
+                  setGrouping={display.sortable ? (groupFunc) => setGrouping(col.uniqueName, groupFunc) : null}
+                  grouping={display.getGrouping(col.uniqueName)}
                 />
               </TableHeaderCell>
             ))}

packages/web/src/datagrid/TableDataGrid.js

@@ -53,10 +53,6 @@ export default function TableDataGrid({
   const dbinfo = useDatabaseInfo({ conid, database });
   const [reference, setReference] = React.useState(null);
 
-  React.useEffect(() => {
-    setRefReloadToken((v) => v + 1);
-  }, [reference]);
-
   function createDisplay() {
     return connection
       ? new TableGridDisplay(
@@ -73,6 +69,11 @@ export default function TableDataGrid({
 
   const [display, setDisplay] = React.useState(createDisplay());
 
+  React.useEffect(() => {
+    setRefReloadToken((v) => v + 1);
+    if (!reference && display && display.isGrouped) display.clearGrouping();
+  }, [reference]);
+
   React.useEffect(() => {
     const newDisplay = createDisplay();
     if (display && display.isLoadedCorrectly && !newDisplay.isLoadedCorrectly) return;