fix: add data item to the cards (#3906)

carbon-design-system · Dec 12, 2024 · db53913 · db53913
1 parent c1fe134
commit db53913
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git a/packages/react/src/components/BarChartCard/barChartUtils.js b/packages/react/src/components/BarChartCard/barChartUtils.js
@@ -416,13 +416,15 @@ export const formatColors = (series, datasetNames, isDashboardPreview, type) =>
  *
  * @param {object} data data object for this particular datapoint
  * @param {string} defaultTooltip Default HTML generated for this tooltip that needs to be marked up
+ * @param {object} _datum of the hovered element
  * @param {string} timeDatasourceId time-based attribute
  * @param {bool} showTimeInGMT
  * @param {string} tooltipDataFormatPattern
  */
 export const handleTooltip = (
   dataOrHoveredElement,
   defaultTooltip,
+  _datum,
   timeDataSourceId,
   showTimeInGMT,
   tooltipDateFormatPattern = 'L HH:mm:ss',

diff --git a/...s/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/...s/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx
@@ -4,6 +4,7 @@ import { Edit, Subtract } from '@carbon/react/icons';
 import { omit, isEmpty } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
 import hash from 'object-hash';
+import { ComboBox } from '@carbon/react';
 
 import { settings } from '../../../../../constants/Settings';
 import {
@@ -14,7 +15,6 @@ import {
 } from '../../../../DashboardEditor/editorUtils';
 import Button from '../../../../Button';
 import List from '../../../../List/List';
-import ComboBox from '../../../../ComboBox';
 import { Dropdown } from '../../../../Dropdown';
 import DataSeriesFormItemModal from '../DataSeriesFormItemModal';
 import { CARD_TYPES, BAR_CHART_TYPES } from '../../../../../constants/LayoutConstants';
@@ -297,9 +297,9 @@ const DataSeriesFormItem = ({
   );
 
   const handleSimpleDataSeriesChange = useCallback(
-    (selectedItem) => {
+    ({ selectedItem }) => {
       // ignore the extra value added by the "enter" keypress
-      if (selectedItem && !selectedItem.id.includes('iot-input')) {
+      if (selectedItem && !isEmpty(selectedItem.id)) {
         const itemWithMetaData = validDataItems?.find(
           ({ dataItemId }) => dataItemId === selectedItem.id
         );

diff --git a/...nts/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx b/...nts/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx
@@ -4,7 +4,7 @@ import { Edit, Subtract } from '@carbon/react/icons';
 import { isEmpty, omit } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
 import hash from 'object-hash';
-import { MultiSelect } from '@carbon/react';
+import { MultiSelect, ComboBox } from '@carbon/react';
 
 import { settings } from '../../../../../constants/Settings';
 import {
@@ -15,10 +15,10 @@ import {
 } from '../../../../DashboardEditor/editorUtils';
 import Button from '../../../../Button';
 import List from '../../../../List/List';
-import ComboBox from '../../../../ComboBox';
 import DataSeriesFormItemModal from '../DataSeriesFormItemModal';
 import ContentFormItemTitle from '../ContentFormItemTitle';
 import { CARD_SIZES, CARD_TYPES } from '../../../../../constants/LayoutConstants';
+import { formatDataItemsForDropdown } from '../DataSeriesFormItems/DataSeriesFormContent';
 
 const { iotPrefix } = settings;
 
@@ -194,18 +194,9 @@ const TableCardFormContent = ({
     ? getValidDataItems(cardConfig, selectedTimeRange)
     : dataItems;
 
-  const validDataItemsForDropdown = useMemo(
-    () =>
-      validDataItems?.map(({ dataSourceId, dataItemId }) => ({
-        id: dataItemId,
-        text: dataSourceId,
-      })),
-    [validDataItems]
-  );
-
-  const handleOnDataSeriesChange = (selectedItem) => {
+  const handleOnDataSeriesChange = ({ selectedItem }) => {
     // ignore the extra value added by the "enter" keypress
-    if (selectedItem && !selectedItem.id.includes('iot-input')) {
+    if (selectedItem && !isEmpty(selectedItem.id)) {
       const itemWithMetaData = validDataItems?.find(
         ({ dataItemId }) => dataItemId === selectedItem.id
       );
@@ -411,11 +402,9 @@ const TableCardFormContent = ({
       >
         <ComboBox
           // need to re-gen if selected card changes or if a dataItem is removed from the list
-          key={`data-item-select-${hash(validDataItemsForDropdown || {})}-selected_card-id-${
-            cardConfig.id
-          }`}
+          key={`data-item-select-${hash(validDataItems)}-selected_card-id-${cardConfig.id}`}
           id={`${cardConfig.id}_dataSourceIds-combobox`}
-          items={validDataItemsForDropdown}
+          items={formatDataItemsForDropdown(validDataItems)}
           itemToString={(item) => item?.text}
           titleText={mergedI18n.dataItem}
           addToList={false}

diff --git a/packages/react/src/utils/cardUtilityFunctions.js b/packages/react/src/utils/cardUtilityFunctions.js
@@ -485,6 +485,7 @@ export const findMatchingAlertRange = (alertRanges, data) => {
  * Extends default tooltip with the additional date information, and optionally alert information
  * @param {object} dataOrHoveredElement data object for this particular datapoint should have a date field containing the timestamp
  * @param {string} defaultTooltip Default HTML generated for this tooltip that needs to be marked up
+ * @param {object} _datum of the hovered element
  * @param {array} alertRanges Array of alert range information to search
  * @param {string} alertDetected Translated string to indicate that the alert is detected
  * @param {bool} showTimeInGMT
@@ -494,6 +495,7 @@ export const findMatchingAlertRange = (alertRanges, data) => {
 export const handleTooltip = (
   dataOrHoveredElement,
   defaultTooltip,
+  _datum,
   alertRanges,
   alertDetected,
   showTimeInGMT,