feat(tablecard): do not require the threshold column be shown in a table

carbon-design-system · Mar 11, 2020 · b930a72 · b930a72
1 parent e3ed7e2
commit b930a72
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 407 deletions.
diff --git a/src/components/TableCard/TableCard.jsx b/src/components/TableCard/TableCard.jsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import moment from 'moment';
 import isNil from 'lodash/isNil';
 import uniqBy from 'lodash/uniqBy';
+import find from 'lodash/find';
 import cloneDeep from 'lodash/cloneDeep';
 import capitalize from 'lodash/capitalize';
 import OverFlowMenuIcon from '@carbon/icons-react/lib/overflow-menu--vertical/20';
@@ -215,10 +216,14 @@ export const findMatchingThresholds = (thresholds, item, columnId) => {
         // If I don't have a threshold currently for this column
         currentThresholdIndex < 0
       ) {
-        highestSeverityThreshold.push(threshold); //eslint-disable-line
+        highestSeverityThreshold.push({ ...threshold, currentValue: item[threshold.dataSourceId] }); //eslint-disable-line
       } // The lowest severity is actually the most severe
       else if (highestSeverityThreshold[currentThresholdIndex].severity > threshold.severity) {
-        highestSeverityThreshold[currentThresholdIndex] = threshold; //eslint-disable-line
+        // eslint-disable-next-line
+        highestSeverityThreshold[currentThresholdIndex] = {
+          ...threshold,
+          currentValue: item[threshold.dataSourceId],
+        };
       }
       return highestSeverityThreshold;
     }, []);
@@ -322,9 +327,9 @@ const TableCard = ({
 
     return matchingThresholdValue ? (
       <ThresholdIcon
-        title={`${matchingThresholdValue.dataSourceId} ${matchingThresholdValue.comparison} ${
-          matchingThresholdValue.value
-        }`}
+        title={`${matchingThresholdValue.dataSourceId}: ${matchingThresholdValue.currentValue} ${
+          matchingThresholdValue.comparison
+        } ${matchingThresholdValue.value}`}
         {...matchingThresholdValue}
         strings={strings}
         renderIconByName={others.renderIconByName}
@@ -360,45 +365,59 @@ const TableCard = ({
   // filter to get the indexes for each one
   const columnsUpdated = cloneDeep(columns);
 
+  const generateThresholdColumn = (columnId, index) => ({
+    id: `iconColumn-${columnId}`,
+    label: uniqueThresholds[index].label
+      ? uniqueThresholds[index].label
+      : `${capitalize(columnId)} ${strings.severityLabel}`,
+    width: 200,
+    isSortable: true,
+    renderDataFunction: renderThresholdIcon,
+    priority: 1,
+    filter: {
+      placeholderText: strings.selectSeverityPlaceholder,
+      options: [
+        {
+          id: 1,
+          text: strings.criticalLabel,
+        },
+        {
+          id: 2,
+          text: strings.moderateLabel,
+        },
+        {
+          id: 3,
+          text: strings.lowLabel,
+        },
+      ],
+    },
+  });
+
   // Don't add the icon column in sample mode
   if (!isEditable) {
     const indexes = columns
       .map((column, index) =>
         uniqueThresholds.filter(item => item.dataSourceId === column.dataSourceId)[0]
-          ? { i: index, columnId: column.dataSourceId }
+          ? { i: index, columnId: column.dataSourceId } // Find the column and put the threshold next to it
           : null
       )
       .filter(i => !isNil(i));
     indexes.forEach(({ i, columnId }, index) =>
-      columnsUpdated.splice(index !== 0 ? i + 1 : i, 0, {
-        id: `iconColumn-${columnId}`,
-        label: uniqueThresholds[index].label
-          ? uniqueThresholds[index].label
-          : `${capitalize(columnId)} ${strings.severityLabel}`,
-        width: '200px',
-        isSortable: true,
-        renderDataFunction: renderThresholdIcon,
-        priority: 1,
-        filter: {
-          placeholderText: strings.selectSeverityPlaceholder,
-          options: [
-            {
-              id: 1,
-              text: strings.criticalLabel,
-            },
-            {
-              id: 2,
-              text: strings.moderateLabel,
-            },
-            {
-              id: 3,
-              text: strings.lowLabel,
-            },
-          ],
-        },
-      })
+      columnsUpdated.splice(index !== 0 ? i + 1 : i, 0, generateThresholdColumn(columnId, index))
+    );
+    // Check for any threshold columns that weren't matched (if the column was hidden) and add to the end of the array
+    const missingThresholdColumns = uniqueThresholds.filter(
+      threshold => !find(columnsUpdated, column => threshold.dataSourceId === column.dataSourceId)
+    );
+    columnsUpdated.splice(
+      columnsUpdated.length,
+      0,
+      ...missingThresholdColumns.map(({ dataSourceId }, index) =>
+        generateThresholdColumn(dataSourceId, index)
+      )
     );
   }
+
   const newColumns = thresholds ? columnsUpdated : columns;
 
   const columnsToRender = useMemo(

diff --git a/src/components/TableCard/TableCard.story.jsx b/src/components/TableCard/TableCard.story.jsx
@@ -230,57 +230,67 @@ storiesOf('Watson IoT/TableCard', module)
       </div>
     );
   })
-  .add('table with thresholds only with value', () => {
-    const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE);
+  .add(
+    'table with thresholds only with icon',
+    () => {
+      const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE);
 
-    const thresholds = [
-      // this threshold is applied to the whole row, not a particular attribute
-      {
-        dataSourceId: 'count',
-        comparison: '<',
-        value: 5,
-        severity: 3, // High threshold, medium, or low used for sorting and defined filtration
-      },
-      {
-        dataSourceId: 'count',
-        comparison: '>=',
-        value: 10,
-        severity: 1, // High threshold, medium, or low used for sorting and defined filtration
-        label: 'Count Sev',
-      },
-      {
-        dataSourceId: 'count',
-        comparison: '=',
-        value: 7,
-        severity: 2, // High threshold, medium, or low used for sorting and defined filtration
-      },
-      {
-        dataSourceId: 'pressure',
-        comparison: '>=',
-        value: 10,
-        severity: 1,
-        label: 'Pressure Sev',
-        showOnContent: true,
-      },
-    ];
+      const thresholds = [
+        // this threshold is applied to the whole row, not a particular attribute
+        {
+          dataSourceId: 'count',
+          comparison: '<',
+          value: 5,
+          severity: 3, // High threshold, medium, or low used for sorting and defined filtration
+        },
+        {
+          dataSourceId: 'count',
+          comparison: '>=',
+          value: 10,
+          severity: 1, // High threshold, medium, or low used for sorting and defined filtration
+          label: 'Count Sev',
+        },
+        {
+          dataSourceId: 'count',
+          comparison: '=',
+          value: 7,
+          severity: 2, // High threshold, medium, or low used for sorting and defined filtration
+        },
+        {
+          dataSourceId: 'pressure',
+          comparison: '>=',
+          value: 10,
+          severity: 1,
+          label: 'Pressure Sev',
+          showOnContent: true,
+        },
+      ];
 
-    return (
-      <div style={{ width: `${getCardMinSize('lg', size).x}px`, margin: 20 }}>
-        <TableCard
-          title={text('title', 'Open Alerts')}
-          id="table-list"
-          tooltip={text('Tooltip text', "Here's a Tooltip")}
-          content={{
-            columns: tableColumns,
-            thresholds,
-          }}
-          values={tableData}
-          onCardAction={(id, type, payload) => action('onCardAction', id, type, payload)}
-          size={size}
-        />
-      </div>
-    );
-  })
+      return (
+        <div style={{ width: `${getCardMinSize('lg', size).x}px`, margin: 20 }}>
+          <TableCard
+            title={text('title', 'Open Alerts')}
+            id="table-list"
+            tooltip={text('Tooltip text', "Here's a Tooltip")}
+            content={{
+              columns: [...tableColumns.slice(0, 1), tableColumns[2]],
+              thresholds,
+            }}
+            values={tableData}
+            onCardAction={(id, type, payload) => action('onCardAction', id, type, payload)}
+            size={size}
+          />
+        </div>
+      );
+    },
+    {
+      info: {
+        text: `
+          If you don't pass the underlying 'pressure' or 'count' column we will show the threshold icon columns at the right of the table
+        `,
+      },
+    }
+  )
   .add('table with custom column sort', () => {
     const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE);