Add number of rows inside group (#199)

* add sub rows count per group * revert changes on table cell * remove showSubRowsTotal * sub rows count added * Update provisioning to enable rows count * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]> Co-authored-by: asimonok <[email protected]>
VolkovLabs · Dec 23, 2024 · 78e7a46 · 78e7a46
1 parent 7c44113
commit 78e7a46
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Updated wrap column text by word (#195)
 - Updated packages for Code Editor (#194)
 - Added normalize for boolean type (#198)
+- Added number of rows inside group (#199)
 
 ## 1.9.0 (2024-12-01)
 

diff --git a/provisioning/dashboards/devices.json b/provisioning/dashboards/devices.json
@@ -18,7 +18,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 2,
+  "id": 3,
   "links": [],
   "panels": [
     {
@@ -809,7 +809,7 @@
             "expanded": false,
             "items": [
               {
-                "aggregation": "none",
+                "aggregation": "count",
                 "appearance": {
                   "alignment": "start",
                   "background": {
@@ -1245,6 +1245,6 @@
   "timezone": "browser",
   "title": "Devices",
   "uid": "edxke3hyi04cgc",
-  "version": 5,
+  "version": 1,
   "weekStart": ""
 }
diff --git a/src/components/Table/components/TableRow/components/TableCell/TableCell.styles.ts b/src/components/Table/components/TableRow/components/TableCell/TableCell.styles.ts
@@ -39,5 +39,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
         }
       }
     `,
+    subRowsTotal: css`
+      margin-left: ${theme.spacing(1)};
+      font-size: ${theme.spacing(1.25)};
+      color: ${theme.colors.text.disabled};
+    `,
   };
 };
diff --git a/src/components/Table/components/TableRow/components/TableCell/TableCell.test.tsx b/src/components/Table/components/TableRow/components/TableCell/TableCell.test.tsx
@@ -14,7 +14,7 @@ import React, { act } from 'react';
 
 import { nestedObjectEditorsRegistry } from '@/components';
 import { TEST_IDS } from '@/constants';
-import { CellType, NestedObjectType } from '@/types';
+import { CellAggregation, CellType, NestedObjectType } from '@/types';
 import {
   createColumnAccessorFn,
   createColumnConfig,
@@ -334,4 +334,49 @@ describe('TableCell', () => {
       expect.anything()
     );
   });
+
+  it('Should render totalSubRows', async () => {
+    const data = [
+      {
+        device: 'device1',
+        value: 10,
+      },
+      {
+        device: 'device2',
+        value: 20,
+      },
+    ];
+
+    const columns = [
+      {
+        id: 'device',
+        accessorFn: createColumnAccessorFn('device'),
+        enableGrouping: true,
+        meta: createColumnMeta({
+          config: createColumnConfig({
+            aggregation: CellAggregation.COUNT,
+          }),
+        }),
+      },
+      {
+        id: 'value',
+        accessorFn: createColumnAccessorFn('value'),
+        aggregationFn: () => null,
+      },
+    ];
+
+    await act(async () =>
+      render(
+        getComponent({
+          data,
+          columns,
+          rowIndex: 0,
+          grouping: ['device'],
+        })
+      )
+    );
+
+    expect(selectors.totalSubRows()).toBeInTheDocument();
+    expect(selectors.totalSubRows()).toHaveTextContent('(1)');
+  });
 });
diff --git a/src/components/Table/components/TableRow/components/TableCell/TableCell.tsx b/src/components/Table/components/TableRow/components/TableCell/TableCell.tsx
@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 
 import { nestedObjectEditorsRegistry } from '@/components';
 import { ACTIONS_COLUMN_ID, TEST_IDS } from '@/constants';
-import { CellType } from '@/types';
+import { CellAggregation, CellType } from '@/types';
 
 import { getStyles } from './TableCell.styles';
 
@@ -156,6 +156,11 @@ export const TableCell = <TData,>({ row, cell, rendererProps }: Props<TData>) =>
         />
       )}
       {renderCell()}
+      {cell.getIsGrouped() && cell.column.columnDef.meta?.config.aggregation === CellAggregation.COUNT && (
+        <span className={styles.subRowsTotal} {...TEST_IDS.tableCell.totalSubRows.apply()}>
+          ({row.subRows.length})
+        </span>
+      )}
     </>
   );
 };
diff --git a/...onents/TableEditor/components/ColumnsEditor/components/ColumnEditor/ColumnEditor.test.tsx b/...onents/TableEditor/components/ColumnsEditor/components/ColumnEditor/ColumnEditor.test.tsx
@@ -161,12 +161,50 @@ describe('ColumnEditor', () => {
     );
   });
 
-  it('Should hide aggregation if group', () => {
+  it('Should allow to change group and reset aggregation', () => {
+    render(getComponent({ value: createColumnConfig({ group: false, aggregation: CellAggregation.MAX }) }));
+
+    expect(selectors.fieldGroup()).toBeInTheDocument();
+    expect(selectors.fieldGroup()).not.toBeChecked();
+
+    fireEvent.click(selectors.fieldGroup());
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        group: true,
+        aggregation: CellAggregation.NONE,
+      })
+    );
+  });
+
+  it('Should allow to change group and keep aggregation', () => {
+    render(getComponent({ value: createColumnConfig({ group: true, aggregation: CellAggregation.COUNT }) }));
+
+    expect(selectors.fieldGroup()).toBeInTheDocument();
+    expect(selectors.fieldGroup()).toBeChecked();
+
+    fireEvent.click(selectors.fieldGroup());
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        group: false,
+        aggregation: CellAggregation.COUNT,
+      })
+    );
+  });
+
+  it('Should show aggregation if group', () => {
     render(getComponent({ value: createColumnConfig({ group: true }) }));
 
     expect(selectors.fieldAggregation(true)).not.toBeInTheDocument();
   });
 
+  it('Should show aggregation if available', () => {
+    render(getComponent({ value: createColumnConfig({ group: false }), isAggregationAvailable: true }));
+
+    expect(selectors.fieldAggregation(true)).toBeInTheDocument();
+  });
+
   it('Should hide aggregation if not available', () => {
     render(getComponent({ value: createColumnConfig({ group: false }), isAggregationAvailable: false }));
 
@@ -213,6 +251,26 @@ describe('ColumnEditor', () => {
     );
   });
 
+  it('Should allow to change aggregation for group', () => {
+    render(
+      getComponent({
+        value: createColumnConfig({ group: true, aggregation: CellAggregation.NONE }),
+        isAggregationAvailable: true,
+      })
+    );
+
+    expect(selectors.fieldAggregation()).toBeInTheDocument();
+    expect(selectors.fieldAggregation()).toHaveValue(CellAggregation.NONE);
+
+    fireEvent.change(selectors.fieldAggregation(), { target: { value: CellAggregation.COUNT } });
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        aggregation: CellAggregation.COUNT,
+      })
+    );
+  });
+
   describe('filter', () => {
     it('Should allow to enable filtering', () => {
       render(

diff --git a/.../components/TableEditor/components/ColumnsEditor/components/ColumnEditor/ColumnEditor.tsx b/.../components/TableEditor/components/ColumnsEditor/components/ColumnEditor/ColumnEditor.tsx
@@ -88,7 +88,7 @@ const cellTypeOptions = [
   {
     value: CellType.PREFORMATTED,
     label: 'Preformatted',
-    description: 'Text preserves both spaces and line breaks'
+    description: 'Text preserves both spaces and line breaks',
   },
   {
     value: CellType.RICH_TEXT,
@@ -143,6 +143,21 @@ const aggregationOptions = [
   },
 ];
 
+/**
+ * Aggregation Options for group
+ */
+const aggregationOptionsForGroup = [
+  {
+    value: CellAggregation.COUNT,
+    label: 'Count',
+    description: 'Show sub rows total',
+  },
+  {
+    value: CellAggregation.NONE,
+    label: 'None',
+  },
+];
+
 /**
  * Filter Mode Options
  */
@@ -598,12 +613,18 @@ export const ColumnEditor: React.FC<Props> = ({ value, onChange, data, isAggrega
             <InlineField label="Group" grow={true}>
               <InlineSwitch
                 value={value.group}
-                onChange={(event) =>
+                onChange={(event) => {
+                  /**
+                   * Reset aggregation if group was disabled
+                   */
+                  const updatedAggregation =
+                    !value.group && value.aggregation ? CellAggregation.NONE : value.aggregation;
                   onChange({
                     ...value,
                     group: event.currentTarget.checked,
-                  })
-                }
+                    aggregation: updatedAggregation,
+                  });
+                }}
                 {...TEST_IDS.columnEditor.fieldGroup.apply()}
               />
             </InlineField>
@@ -644,11 +665,11 @@ export const ColumnEditor: React.FC<Props> = ({ value, onChange, data, isAggrega
           )}
         </InlineFieldRow>
 
-        {!value.group && isAggregationAvailable && (
+        {isAggregationAvailable && (
           <InlineField label="Aggregation" grow={true}>
             <Select
               value={value.aggregation}
-              options={aggregationOptions}
+              options={value.group ? aggregationOptionsForGroup : aggregationOptions}
               onChange={(event) => {
                 onChange({
                   ...value,

diff --git a/src/constants.ts b/src/constants.ts
@@ -182,6 +182,7 @@ export const TEST_IDS = {
   tableCell: {
     tableLink: createSelector((name: unknown) => `table link-${name}`),
     tableLinkMenu: createSelector('table link-menu'),
+    totalSubRows: createSelector('data-testid table total-sub-rows'),
   },
   filterFacetedList: {
     root: createSelector('data-testid filter-faceted-list'),