From 2ff600645cabe0beb49c7efebc81c82c9aaa1beb Mon Sep 17 00:00:00 2001 From: Amritha raj herle Date: Thu, 12 Dec 2024 14:49:55 +0100 Subject: [PATCH] fix: add data item to the cards --- .../components/BarChartCard/barChartUtils.js | 2 ++ .../DataSeriesFormContent.jsx | 6 ++--- .../TableCardFormContent.jsx | 23 +++++-------------- .../react/src/utils/cardUtilityFunctions.js | 2 ++ 4 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/react/src/components/BarChartCard/barChartUtils.js b/packages/react/src/components/BarChartCard/barChartUtils.js index e3e0709ca8..d22c6755fc 100644 --- a/packages/react/src/components/BarChartCard/barChartUtils.js +++ b/packages/react/src/components/BarChartCard/barChartUtils.js @@ -416,6 +416,7 @@ 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 @@ -423,6 +424,7 @@ export const formatColors = (series, datasetNames, isDashboardPreview, type) => export const handleTooltip = ( dataOrHoveredElement, defaultTooltip, + _datum, timeDataSourceId, showTimeInGMT, tooltipDateFormatPattern = 'L HH:mm:ss', diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx index 5f2d3681ac..2db56eb05e 100644 --- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx +++ b/packages/react/src/components/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/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx index b18f495706..bb84704c6e 100644 --- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx +++ b/packages/react/src/components/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 = ({ > item?.text} titleText={mergedI18n.dataItem} addToList={false} diff --git a/packages/react/src/utils/cardUtilityFunctions.js b/packages/react/src/utils/cardUtilityFunctions.js index d38b174296..fbf3c7568e 100644 --- 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,