Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add data item to the cards #3906

Merged
merged 1 commit into from
Dec 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react/src/components/BarChartCard/barChartUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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';
Expand Down Expand Up @@ -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
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand Down Expand Up @@ -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
);
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/utils/cardUtilityFunctions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -494,6 +495,7 @@ export const findMatchingAlertRange = (alertRanges, data) => {
export const handleTooltip = (
dataOrHoveredElement,
defaultTooltip,
_datum,
alertRanges,
alertDetected,
showTimeInGMT,
Expand Down
Loading