9643880975

Committed 24 Jun 2024 10:35AM UTC coverage: 97.424% (-0.004%) from 97.428%

Build Type

github

Committed by Amritha raj herle

Commit Message

test(tablecard): revert tablecard tooltip test due to dashboard grid snpsot failure

Pull Request Pull Request #3871: feat: add tooltip to the tablecard column and value card label

Run Details

7822 of 8171 branches covered (95.73%)

Branch coverage included in aggregate %.

6 of 7 new or added lines in 2 files covered. (85.71%)

1 existing line in 1 file now uncovered.

9500 of 9609 relevant lines covered (98.87%)

2475.04 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.35

/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx

import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import {
  purple70,
  cyan50,
  teal70,
  magenta70,
  red50,
  red90,
  green60,
  blue80,
  magenta50,
  purple50,
  teal50,
  cyan90,
} from '@carbon/colors';
import { Add16 } from '@carbon/icons-react';
import { FormLabel } from 'carbon-components-react';
import classnames from 'classnames';
import { isEmpty, omit } from 'lodash-es';

import { settings } from '../../../../constants/Settings';
import { Dropdown } from '../../../Dropdown';
import ComposedModal from '../../../ComposedModal';
import { TextInput } from '../../../TextInput';
import {
  handleDefaultDataItemEdit,
  DataItemsPropTypes,
  DashboardEditorActionsPropTypes,
} from '../../../DashboardEditor/editorUtils';
import ColorDropdown from '../../../ColorDropdown/ColorDropdown';
import { BAR_CHART_TYPES, CARD_TYPES } from '../../../../constants/LayoutConstants';
import Button from '../../../Button';

import ThresholdsFormItem from './ThresholdsFormItem';

const { iotPrefix } = settings;

/* istanbul ignore next */
const noop = () => {};

const propTypes = {
  /* card value */
  cardConfig: PropTypes.shape({
    id: PropTypes.string,
    title: PropTypes.string,
    size: PropTypes.string,
    type: PropTypes.string,
    content: PropTypes.shape({
      series: PropTypes.arrayOf(
        PropTypes.shape({
          label: PropTypes.string,
          dataSourceId: PropTypes.string,
          color: PropTypes.string,
        })
      ),
      columns: PropTypes.arrayOf(
        PropTypes.shape({
          dataSourceId: PropTypes.string,
          label: PropTypes.string,
          type: PropTypes.string,
          dataItemType: PropTypes.string,
        })
      ),
      type: PropTypes.string,
      xLabel: PropTypes.string,
      yLabel: PropTypes.string,
      unit: PropTypes.string,
      includeZeroOnXaxis: PropTypes.bool,
      includeZeroOnYaxis: PropTypes.bool,
      timeDataSourceId: PropTypes.string,
    }),
    interval: PropTypes.string,
    showLegend: PropTypes.bool,
  }),
  showEditor: PropTypes.bool,
  setShowEditor: PropTypes.func,
  editDataItem: PropTypes.shape({
    dataSourceId: PropTypes.string,
    dataFilter: PropTypes.objectOf(PropTypes.string),
    /** Maps to data item columnType */
    type: PropTypes.string,
    /** Maps to data item type */
    dataItemType: PropTypes.string,
    hasStreamingMetricEnabled: PropTypes.bool,
    aggregationMethods: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string,
        text: PropTypes.string,
      })
    ),
    aggregationMethod: PropTypes.string,
    grain: PropTypes.string,
    label: PropTypes.string,
    dataItemId: PropTypes.string,
    color: PropTypes.string,
    unit: PropTypes.string,
    precision: PropTypes.number,
    thresholds: PropTypes.arrayOf(
      PropTypes.shape({
        color: PropTypes.string,
        comparison: PropTypes.stirng,
        icon: PropTypes.string,
        value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
      })
    ),
    tooltip: PropTypes.string,
  }),
  setEditDataItem: PropTypes.func,
  /** an object where the keys are available dimensions and the values are the values available for those dimensions
   *  ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
   */
  availableDimensions: PropTypes.shape({}),
  onChange: PropTypes.func.isRequired,
  editDataSeries: PropTypes.arrayOf(
    PropTypes.shape({
      dataSourceId: PropTypes.string,
      label: PropTypes.string,
      color: PropTypes.string,
    })
  ),
  validDataItems: DataItemsPropTypes,
  isSummaryDashboard: PropTypes.bool,
  isLarge: PropTypes.bool,
  testId: PropTypes.string,
  i18n: PropTypes.shape({
    dataItemEditorDataItemTitle: PropTypes.string,
    dataItemEditorDataItemLabel: PropTypes.string,
    dataItemEditorLegendColor: PropTypes.string,
    dataItemEditorSectionTitle: PropTypes.string,
    selectDataItems: PropTypes.string,
    dataItem: PropTypes.string,
    edit: PropTypes.string,
    dataItemEditorDataItemCustomLabel: PropTypes.string,
    /** Function receiving the dataItemSource & dataItemId as params:
     * (dataItemSource, dataItemId) => `${dataItemSource}: ${dataItemId}` */
    dataItemEditorDataItemHelperText: PropTypes.func,
    dataItemEditorDataItemUnit: PropTypes.string,
    dataItemEditorDataItemFilter: PropTypes.string,
    dataItemEditorDataItemThresholds: PropTypes.string,
    dataItemEditorDataItemAddThreshold: PropTypes.string,
    source: PropTypes.string,
    primaryButtonLabelText: PropTypes.string,
    secondaryButtonLabelText: PropTypes.string,
  }),
  actions: DashboardEditorActionsPropTypes,
  /**
   * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
   */
  handleDataItemEdit: PropTypes.func,

  options: PropTypes.shape({
    hasColorDropdown: PropTypes.bool,
    hasUnit: PropTypes.bool,
    hasDecimalPlacesDropdown: PropTypes.bool,
    hasThresholds: PropTypes.bool,
    hasTooltip: PropTypes.bool,
  }),
};

const defaultProps = {
  cardConfig: {},
  i18n: {
    dataItemEditorDataSeriesTitle: 'Customize data series',
    dataItemEditorValueCardTitle: 'Edit data',
    dataItemEditorDataItemLabel: 'Label',
    dataItemEditorLegendColor: 'Legend color',
    dataItemEditorSectionTitle: 'Data series',
    selectDataItems: 'Select data items',
    dataItem: 'Data item',
    edit: 'Edit',
    example: 'Example',
    notSet: 'Not set',
    none: 'None',
    dataItemEditorDataItemCustomLabel: 'Custom label',
    dataItemEditorDataItemHelperText: (dataItemSource, dataItemId) =>
      `${dataItemSource}: ${dataItemId}`,
    dataItemEditorDataItemUnit: 'Unit',
    dataItemEditorDataItemFilter: 'Data filter',
    dataItemEditorDataItemThresholds: 'Thresholds',
    dataItemEditorDataItemAddThreshold: 'Add threshold',
    dataItemEditorDataItemTooltip: 'Tooltip',
    dataItemEditorBarColor: 'Bar color',
    dataItemEditorLineColor: 'Line color',
    dataItemEditorAddAggregationMethodLabel: 'Add aggregation method',
    dataItemEditorAddAggregationMethodDescription: 'Add aggregation method',
    source: 'Source data item',
    aggregationMethod: 'Aggregation method',
    grain: 'Grain',
    hourlyLabel: 'Hourly',
    dailyLabel: 'Daily',
    weeklyLabel: 'Weekly',
    monthlyLabel: 'Monthly',
    yearlyLabel: 'Yearly',
    dataItemSource: 'Data item source',
    primaryButtonLabelText: 'Save',
    secondaryButtonLabelText: 'Cancel',
    decimalPlacesLabel: 'Decimal places',
  },
  editDataSeries: [],
  showEditor: false,
  setShowEditor: null,
  availableDimensions: {},
  editDataItem: {
    hasStreamingMetricEnabled: false,
  },
  setEditDataItem: null,
  isSummaryDashboard: false,
  isLarge: false,
  validDataItems: [],
  testId: 'aggregation-methods',
  actions: {
    onEditDataItem: noop,
    dataSeriesFormActions: {
      hasAggregationsDropDown: noop,
      hasDataFilterDropdown: noop,
      onAddAggregations: noop,
    },
  },
  handleDataItemEdit: handleDefaultDataItemEdit,
  options: {
    hasColorDropdown: false,
    hasUnit: false,
    hasDecimalPlacesDropdown: false,
    hasThresholds: false,
    hasTooltip: false,
  },
};

const DATAITEM_COLORS_OPTIONS = [
  { carbonColor: purple70, name: 'purple70' },
  { carbonColor: cyan50, name: 'cyan50' },
  { carbonColor: teal70, name: 'teal70' },
  { carbonColor: magenta70, name: 'magenta70' },
  { carbonColor: red50, name: 'red50' },
  { carbonColor: red90, name: 'red90' },
  { carbonColor: green60, name: 'green60' },
  { carbonColor: blue80, name: 'blue80' },
  { carbonColor: magenta50, name: 'magenta50' },
  { carbonColor: purple50, name: 'purple50' },
  { carbonColor: teal50, name: 'teal50' },
  { carbonColor: cyan90, name: 'cyan90' },
];

const DataSeriesFormItemModal = ({
  cardConfig,
  isSummaryDashboard,
  showEditor,
  editDataSeries,
  setShowEditor,
  editDataItem,
  setEditDataItem,
  validDataItems,
  availableDimensions,
  onChange,
  i18n,
  isLarge,
  testId,
  actions: {
    dataSeriesFormActions: { hasAggregationsDropDown, onAddAggregations, hasDataFilterDropdown },
  },
  handleDataItemEdit,
  options,
}) => {
  const mergedI18n = { ...defaultProps.i18n, ...i18n };
  const { id, type, content } = cardConfig;
  const baseClassName = `${iotPrefix}--card-edit-form`;
  const {
    hasColorDropdown,
    hasUnit,
    hasDecimalPlacesDropdown,
    hasThresholds,
    hasTooltip,
  } = options;

  const isTimeBasedCard =
    type === CARD_TYPES.TIMESERIES ||
    (type === CARD_TYPES.TABLE &&
      content?.columns?.find((column) => column.type === 'TIMESTAMP')) ||
    (content?.type === BAR_CHART_TYPES.SIMPLE && content?.timeDataSourceId) ||
    (content?.type === BAR_CHART_TYPES.STACKED && content?.timeDataSourceId);

  const handleTranslation = useCallback(
    (idToTranslate) => {
      const {
        clearSelectionText,
        openMenuText,
        closeMenuText,
        clearAllText,
        incrementNumberText,
        decrementNumberText,
      } = mergedI18n;
      switch (idToTranslate) {
        case 'clear.all':
          return clearAllText || 'Clear all';
        case 'clear.selection':
          return clearSelectionText || 'Clear selection';
        case 'open.menu':
          return openMenuText || 'Open menu';
        case 'close.menu':
          return closeMenuText || 'Close menu';
        case 'increment.number':
          return incrementNumberText || 'Increment number';
        case 'decrement.number':
          return decrementNumberText || 'Decrement number';
        default:
          return '';
      }
    },
    [mergedI18n]
  );

  const availableGrains = [
    { id: 'hourly', text: mergedI18n.hourlyLabel },
    { id: 'daily', text: mergedI18n.dailyLabel },
    { id: 'weekly', text: mergedI18n.weeklyLabel },
    { id: 'monthly', text: mergedI18n.monthlyLabel },
    { id: 'yearly', text: mergedI18n.yearlyLabel },
  ];

  const initialAggregation = validDataItems?.find(
    ({ dataSourceId }) => dataSourceId === editDataItem.dataSourceId
  )?.aggregationMethod;

  const initialGrain = validDataItems?.find(
    ({ dataSourceId }) => dataSourceId === editDataItem.dataSourceId
  )?.grain;

  const selectedDimensionFilter = editDataItem.dataFilter
    ? Object.keys(editDataItem.dataFilter)[0]
    : '';

  const DataEditorContent = useMemo(
    () => (
      <>
        {hasAggregationsDropDown && hasAggregationsDropDown(editDataItem) && (
          <div className={`${baseClassName}--input-group`}>
            {!initialAggregation || !isSummaryDashboard ? ( // selector should only be use-able in an instance dash or if there is no initial aggregation
              <div className={`${baseClassName}--input-group--item-half`}>
                <Dropdown
                  id={`${id}_aggregation-method`}
                  label=""
                  direction="bottom"
                  itemToString={(item) => item.text}
                  items={editDataItem.aggregationMethods || []}
                  selectedItem={
                    editDataItem.aggregationMethods?.find(
                      (method) => method.id === editDataItem.aggregationMethod
                    ) || { id: 'none', text: mergedI18n.none }
                  }
                  titleText={mergedI18n.aggregationMethod}
                  light
                  onChange={({ selectedItem }) => {
                    setEditDataItem(
                      omit(
                        {
                          ...editDataItem,
                          aggregationMethod: selectedItem.id,
                          // if  we don't have a grain, then default to the first available
                          ...(isTimeBasedCard && selectedItem.id !== 'none' && !editDataItem.grain
                            ? { grain: availableGrains[0]?.id }
                            : {}),
                        },
                        // if we're turning off the aggregation method, clear the input grain
                        ...(selectedItem.id === 'none' ? ['grain'] : [])
                      )
                    );
                  }}
                />
              </div>
            ) : (
              <div className={`${baseClassName}--input-group--item-half`}>
                <FormLabel className={`${baseClassName}--input-group--item-half-label`}>
                  {mergedI18n.aggregationMethod}
                </FormLabel>
                <span className={`${baseClassName}--input-group--item-half-content`}>
                  {`${
                    editDataItem.aggregationMethod
                      ? editDataItem.aggregationMethod[0].toUpperCase()
                      : ''
                  }${editDataItem.aggregationMethod?.slice(1) || ''}`}
                </span>
              </div>
            )}
            {editDataItem?.hasStreamingMetricEnabled && onAddAggregations && (
              <div className={`${iotPrefix}--add-aggregation`}>
                <Button
                  className={`${iotPrefix}--add-aggregation__btn`}
                  kind="ghost"
                  size="large"
                  renderIcon={Add16}
                  onClick={() => onAddAggregations(editDataItem)}
                  iconDescription={mergedI18n.dataItemEditorAddAggregationMethodDescription}
                  testId={`${testId}-aggregaton-button`}
                >
                  {mergedI18n.dataItemEditorAddAggregationMethodLabel}
                </Button>
              </div>
            )}
            {isTimeBasedCard &&
              editDataItem.aggregationMethod &&
              editDataItem.aggregationMethod !== 'none' &&
              !editDataItem?.hasStreamingMetricEnabled && (
                <div className={`${baseClassName}--input-group--item-half`}>
                  <Dropdown
                    id={`${id}_grain-selector`}
                    label=""
                    direction="bottom"
                    itemToString={(item) => item.text}
                    items={
                      isSummaryDashboard && initialAggregation // limit options for aggregated metrics in a summary dash
                        ? availableGrains.slice(
                            availableGrains.findIndex((grain) => grain.id === initialGrain)
                          )
                        : availableGrains
                    }
                    selectedItem={
                      availableGrains.find((grain) => grain.id === editDataItem.grain) ||
                      availableGrains[0]
                    }
                    titleText={mergedI18n.grain}
                    light
                    onChange={({ selectedItem }) => {
                      setEditDataItem({
                        ...editDataItem,
                        grain: selectedItem.id,
                      });
                    }}
                  />
                </div>
              )}
          </div>
        )}

        <div className={`${baseClassName}--input-group`}>
          <div className={`${baseClassName}--input-group--item`}>
            <TextInput
              id={`${id}_attribute-label`}
              labelText={mergedI18n.dataItemEditorDataItemCustomLabel}
              light
              onChange={(evt) =>
                setEditDataItem({
                  ...editDataItem,
                  label: evt.target.value,
                })
              }
              value={editDataItem.label}
              helperText={mergedI18n.dataItemEditorDataItemHelperText(
                mergedI18n.dataItemSource,
                editDataItem.dataItemId
              )}
            />
          </div>

          {hasColorDropdown && ( // show color selector
            <div className={`${baseClassName}--input-group--item`}>
              <ColorDropdown
                id={`${id}_color-dropdown`}
                label=""
                titleText={
                  type === CARD_TYPES.TIMESERIES
                    ? mergedI18n.dataItemEditorLineColor
                    : mergedI18n.dataItemEditorBarColor
                }
                selectedColor={DATAITEM_COLORS_OPTIONS.find(
                  ({ carbonColor }) => carbonColor === editDataItem.color
                )}
                onChange={({ color }) =>
                  setEditDataItem({
                    ...editDataItem,
                    color: color.carbonColor,
                  })
                }
              />
            </div>
          )}

          {hasTooltip && (
            <div className={`${baseClassName}--input-group--item`}>
              <TextInput
                id={`${id}_attribute-tooltip`}
                labelText={mergedI18n.dataItemEditorDataItemTooltip}
                light
                onChange={(evt) =>
                  setEditDataItem({
                    ...editDataItem,
                    tooltip: evt.target.value,
                  })
                }
                value={editDataItem.tooltip}
              />
            </div>
          )}
        </div>

        {(hasUnit || hasDecimalPlacesDropdown) && (
          <div className={`${baseClassName}--input-group`}>
            {hasUnit && (
              <div className={`${baseClassName}--input-group--item`}>
                <TextInput
                  id={`${id}_attribute-unit`}
                  labelText={mergedI18n.dataItemEditorDataItemUnit}
                  light
                  placeholder={`${mergedI18n.example}: %`}
                  onChange={(evt) =>
                    setEditDataItem({
                      ...editDataItem,
                      unit: evt.target.value,
                    })
                  }
                  value={editDataItem.unit}
                />
              </div>
            )}
            {hasDecimalPlacesDropdown && (
              <div className={`${baseClassName}--input-group--item-end`}>
                <Dropdown
                  id={`${id}_value-card-decimal-place`}
                  titleText={mergedI18n.decimalPlacesLabel}
                  direction="bottom"
                  label=""
                  items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
                  light
                  selectedItem={editDataItem.precision?.toString() || mergedI18n.notSet}
                  onChange={({ selectedItem }) => {
                    const isSet = selectedItem !== mergedI18n.notSet;
                    if (isSet) {
                      setEditDataItem({
                        ...editDataItem,
                        precision: Number(selectedItem),
                      });
                    } else {
                      setEditDataItem(omit(editDataItem, 'precision'));
                    }
                  }}
                />
              </div>
            )}
          </div>
        )}

        {hasDataFilterDropdown &&
          hasDataFilterDropdown(cardConfig) && ( // only show data filter in summary dashboards or instance dashboard for DEVICE_TYPE
            <div className={`${baseClassName}--input-group ${baseClassName}--input-group--bottom `}>
              <div
                className={classnames({
                  [`${baseClassName}--input-group--item`]: !isEmpty(editDataItem.dataFilter),
                  [`${baseClassName}--input-group--item-half`]:
                    isEmpty(editDataItem.dataFilter) ||
                    (!isEmpty(editDataItem.dataFilter) &&
                      !availableDimensions[selectedDimensionFilter]),
                })}
              >
                <Dropdown
                  id={`${id}_data-filter-key`}
                  label=""
                  translateWithId={handleTranslation}
                  direction="bottom"
                  items={[mergedI18n.none, ...Object.keys(availableDimensions)]}
                  light
                  selectedItem={selectedDimensionFilter || mergedI18n.none}
                  onChange={({ selectedItem }) => {
                    if (selectedItem !== mergedI18n.none) {
                      const dataFilter = {
                        [selectedItem]: availableDimensions[selectedItem].sort()[0],
                      };
                      setEditDataItem({
                        ...editDataItem,
                        dataFilter,
                      });
                    } else {
                      setEditDataItem({
                        ...omit(editDataItem, 'dataFilter'),
                      });
                    }
                  }}
                  titleText={mergedI18n.dataItemEditorDataItemFilter}
                />
              </div>
              {!isEmpty(editDataItem.dataFilter) && availableDimensions[selectedDimensionFilter] && (
                <div className={`${baseClassName}--input-group--item-end`}>
                  <Dropdown
                    id={`${id}_data-filter-value`}
                    label=""
                    direction="bottom"
                    items={availableDimensions[selectedDimensionFilter]?.sort()}
                    light
                    itemToString={(item) => item?.toString()}
                    selectedItem={
                      editDataItem.dataFilter
                        ? editDataItem.dataFilter[selectedDimensionFilter]
                        : undefined
                    }
                    onChange={({ selectedItem }) => {
                      const dataFilter = {
                        [selectedDimensionFilter]: selectedItem,
                      };
                      setEditDataItem({
                        ...editDataItem,
                        dataFilter,
                      });
                    }}
                  />
                </div>
              )}
            </div>
          )}

        {hasThresholds && (
          <ThresholdsFormItem
            id={`${id}_thresholds`}
            i18n={mergedI18n}
            cardConfig={cardConfig}
            dataSourceId={type !== CARD_TYPES.VALUE ? editDataItem.dataSourceId : null}
            thresholds={editDataItem.thresholds}
            translateWithId={handleTranslation}
            onChange={(thresholds) => {
              setEditDataItem({
                ...editDataItem,
                thresholds,
              });
            }}
          />
        )}
      </>
    ),
    [
      availableDimensions,
      availableGrains,
      baseClassName,
      cardConfig,
      editDataItem,
      handleTranslation,
      hasAggregationsDropDown,
      hasColorDropdown,
      hasDataFilterDropdown,
      hasDecimalPlacesDropdown,
      hasThresholds,
      hasTooltip,
      hasUnit,
      id,
      initialAggregation,
      initialGrain,
      isSummaryDashboard,
      isTimeBasedCard,
      mergedI18n,
      onAddAggregations,
      selectedDimensionFilter,
      setEditDataItem,
      testId,
      type,
    ]
  );

  return (
    <>
      {showEditor && (
        <div className={`${baseClassName}--modal-wrapper`}>
          <ComposedModal
            header={{
              label: editDataItem.dataItemId,
              title:
                type === CARD_TYPES.VALUE
                  ? mergedI18n.dataItemEditorValueCardTitle
                  : mergedI18n.dataItemEditorDataSeriesTitle,
            }}
            size="md"
            isLarge={isLarge}
            footer={{
              primaryButtonLabel: mergedI18n.primaryButtonLabelText,
              secondaryButtonLabel: mergedI18n.secondaryButtonLabelText,
            }}
            onSubmit={() => {
              const newCard =
                cardConfig.type === CARD_TYPES.IMAGE
                  ? editDataItem
                  : handleDataItemEdit(editDataItem, cardConfig, editDataSeries);
              onChange(newCard);
              setShowEditor(false);
              setEditDataItem({});
            }}
            iconDescription={mergedI18n.closeButtonLabelText}
            onClose={() => {
              setShowEditor(false);
              setEditDataItem({});
            }}
          >
            {DataEditorContent}
          </ComposedModal>
        </div>
      )}
    </>
  );
};
DataSeriesFormItemModal.defaultProps = defaultProps;
DataSeriesFormItemModal.propTypes = propTypes;
export default DataSeriesFormItemModal;

1	import React, { useCallback, useMemo } from 'react';
2	import PropTypes from 'prop-types';
3	import {
4	purple70,
5	cyan50,
6	teal70,
7	magenta70,
8	red50,
9	red90,
10	green60,
11	blue80,
12	magenta50,
13	purple50,
14	teal50,
15	cyan90,
16	} from '@carbon/colors';
17	import { Add16 } from '@carbon/icons-react';
18	import { FormLabel } from 'carbon-components-react';
19	import classnames from 'classnames';
20	import { isEmpty, omit } from 'lodash-es';
21
22	import { settings } from '../../../../constants/Settings';
23	import { Dropdown } from '../../../Dropdown';
24	import ComposedModal from '../../../ComposedModal';
25	import { TextInput } from '../../../TextInput';
26	import {
27	handleDefaultDataItemEdit,
28	DataItemsPropTypes,
29	DashboardEditorActionsPropTypes,
30	} from '../../../DashboardEditor/editorUtils';
31	import ColorDropdown from '../../../ColorDropdown/ColorDropdown';
32	import { BAR_CHART_TYPES, CARD_TYPES } from '../../../../constants/LayoutConstants';
33	import Button from '../../../Button';
34
35	import ThresholdsFormItem from './ThresholdsFormItem';
36
37	const { iotPrefix } = settings;	18✔
38
39	/* istanbul ignore next */
40	const noop = () => {};
41
42	const propTypes = {	18✔
43	/* card value */
44	cardConfig: PropTypes.shape({
45	id: PropTypes.string,
46	title: PropTypes.string,
47	size: PropTypes.string,
48	type: PropTypes.string,
49	content: PropTypes.shape({
50	series: PropTypes.arrayOf(
51	PropTypes.shape({
52	label: PropTypes.string,
53	dataSourceId: PropTypes.string,
54	color: PropTypes.string,
55	})
56	),
57	columns: PropTypes.arrayOf(
58	PropTypes.shape({
59	dataSourceId: PropTypes.string,
60	label: PropTypes.string,
61	type: PropTypes.string,
62	dataItemType: PropTypes.string,
63	})
64	),
65	type: PropTypes.string,
66	xLabel: PropTypes.string,
67	yLabel: PropTypes.string,
68	unit: PropTypes.string,
69	includeZeroOnXaxis: PropTypes.bool,
70	includeZeroOnYaxis: PropTypes.bool,
71	timeDataSourceId: PropTypes.string,
72	}),
73	interval: PropTypes.string,
74	showLegend: PropTypes.bool,
75	}),
76	showEditor: PropTypes.bool,
77	setShowEditor: PropTypes.func,
78	editDataItem: PropTypes.shape({
79	dataSourceId: PropTypes.string,
80	dataFilter: PropTypes.objectOf(PropTypes.string),
81	/** Maps to data item columnType */
82	type: PropTypes.string,
83	/** Maps to data item type */
84	dataItemType: PropTypes.string,
85	hasStreamingMetricEnabled: PropTypes.bool,
86	aggregationMethods: PropTypes.arrayOf(
87	PropTypes.shape({
88	id: PropTypes.string,
89	text: PropTypes.string,
90	})
91	),
92	aggregationMethod: PropTypes.string,
93	grain: PropTypes.string,
94	label: PropTypes.string,
95	dataItemId: PropTypes.string,
96	color: PropTypes.string,
97	unit: PropTypes.string,
98	precision: PropTypes.number,
99	thresholds: PropTypes.arrayOf(
100	PropTypes.shape({
101	color: PropTypes.string,
102	comparison: PropTypes.stirng,
103	icon: PropTypes.string,
104	value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
105	})
106	),
107	tooltip: PropTypes.string,
108	}),
109	setEditDataItem: PropTypes.func,
110	/** an object where the keys are available dimensions and the values are the values available for those dimensions
111	* ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
112	*/
113	availableDimensions: PropTypes.shape({}),
114	onChange: PropTypes.func.isRequired,
115	editDataSeries: PropTypes.arrayOf(
116	PropTypes.shape({
117	dataSourceId: PropTypes.string,
118	label: PropTypes.string,
119	color: PropTypes.string,
120	})
121	),
122	validDataItems: DataItemsPropTypes,
123	isSummaryDashboard: PropTypes.bool,
124	isLarge: PropTypes.bool,
125	testId: PropTypes.string,
126	i18n: PropTypes.shape({
127	dataItemEditorDataItemTitle: PropTypes.string,
128	dataItemEditorDataItemLabel: PropTypes.string,
129	dataItemEditorLegendColor: PropTypes.string,
130	dataItemEditorSectionTitle: PropTypes.string,
131	selectDataItems: PropTypes.string,
132	dataItem: PropTypes.string,
133	edit: PropTypes.string,
134	dataItemEditorDataItemCustomLabel: PropTypes.string,
135	/** Function receiving the dataItemSource & dataItemId as params:
136	* (dataItemSource, dataItemId) => `${dataItemSource}: ${dataItemId}` */
137	dataItemEditorDataItemHelperText: PropTypes.func,
138	dataItemEditorDataItemUnit: PropTypes.string,
139	dataItemEditorDataItemFilter: PropTypes.string,
140	dataItemEditorDataItemThresholds: PropTypes.string,
141	dataItemEditorDataItemAddThreshold: PropTypes.string,
142	source: PropTypes.string,
143	primaryButtonLabelText: PropTypes.string,
144	secondaryButtonLabelText: PropTypes.string,
145	}),
146	actions: DashboardEditorActionsPropTypes,
147	/**
148	* Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
149	*/
150	handleDataItemEdit: PropTypes.func,
151
152	options: PropTypes.shape({
153	hasColorDropdown: PropTypes.bool,
154	hasUnit: PropTypes.bool,
155	hasDecimalPlacesDropdown: PropTypes.bool,
156	hasThresholds: PropTypes.bool,
157	hasTooltip: PropTypes.bool,
158	}),
159	};
160
161	const defaultProps = {	18✔
162	cardConfig: {},
163	i18n: {
164	dataItemEditorDataSeriesTitle: 'Customize data series',
165	dataItemEditorValueCardTitle: 'Edit data',
166	dataItemEditorDataItemLabel: 'Label',
167	dataItemEditorLegendColor: 'Legend color',
168	dataItemEditorSectionTitle: 'Data series',
169	selectDataItems: 'Select data items',
170	dataItem: 'Data item',
171	edit: 'Edit',
172	example: 'Example',
173	notSet: 'Not set',
174	none: 'None',
175	dataItemEditorDataItemCustomLabel: 'Custom label',
176	dataItemEditorDataItemHelperText: (dataItemSource, dataItemId) =>
177	`${dataItemSource}: ${dataItemId}`,	206✔
178	dataItemEditorDataItemUnit: 'Unit',
179	dataItemEditorDataItemFilter: 'Data filter',
180	dataItemEditorDataItemThresholds: 'Thresholds',
181	dataItemEditorDataItemAddThreshold: 'Add threshold',
182	dataItemEditorDataItemTooltip: 'Tooltip',
183	dataItemEditorBarColor: 'Bar color',
184	dataItemEditorLineColor: 'Line color',
185	dataItemEditorAddAggregationMethodLabel: 'Add aggregation method',
186	dataItemEditorAddAggregationMethodDescription: 'Add aggregation method',
187	source: 'Source data item',
188	aggregationMethod: 'Aggregation method',
189	grain: 'Grain',
190	hourlyLabel: 'Hourly',
191	dailyLabel: 'Daily',
192	weeklyLabel: 'Weekly',
193	monthlyLabel: 'Monthly',
194	yearlyLabel: 'Yearly',
195	dataItemSource: 'Data item source',
196	primaryButtonLabelText: 'Save',
197	secondaryButtonLabelText: 'Cancel',
198	decimalPlacesLabel: 'Decimal places',
199	},
200	editDataSeries: [],
201	showEditor: false,
202	setShowEditor: null,
203	availableDimensions: {},
204	editDataItem: {
205	hasStreamingMetricEnabled: false,
206	},
207	setEditDataItem: null,
208	isSummaryDashboard: false,
209	isLarge: false,
210	validDataItems: [],
211	testId: 'aggregation-methods',
212	actions: {
213	onEditDataItem: noop,
214	dataSeriesFormActions: {
215	hasAggregationsDropDown: noop,
216	hasDataFilterDropdown: noop,
217	onAddAggregations: noop,
218	},
219	},
220	handleDataItemEdit: handleDefaultDataItemEdit,
221	options: {
222	hasColorDropdown: false,
223	hasUnit: false,
224	hasDecimalPlacesDropdown: false,
225	hasThresholds: false,
226	hasTooltip: false,
227	},
228	};
229
230	const DATAITEM_COLORS_OPTIONS = [	18✔
231	{ carbonColor: purple70, name: 'purple70' },
232	{ carbonColor: cyan50, name: 'cyan50' },
233	{ carbonColor: teal70, name: 'teal70' },
234	{ carbonColor: magenta70, name: 'magenta70' },
235	{ carbonColor: red50, name: 'red50' },
236	{ carbonColor: red90, name: 'red90' },
237	{ carbonColor: green60, name: 'green60' },
238	{ carbonColor: blue80, name: 'blue80' },
239	{ carbonColor: magenta50, name: 'magenta50' },
240	{ carbonColor: purple50, name: 'purple50' },
241	{ carbonColor: teal50, name: 'teal50' },
242	{ carbonColor: cyan90, name: 'cyan90' },
243	];
244
245	const DataSeriesFormItemModal = ({	18✔
246	cardConfig,
247	isSummaryDashboard,
248	showEditor,
249	editDataSeries,
250	setShowEditor,
251	editDataItem,
252	setEditDataItem,
253	validDataItems,
254	availableDimensions,
255	onChange,
256	i18n,
257	isLarge,
258	testId,
259	actions: {
260	dataSeriesFormActions: { hasAggregationsDropDown, onAddAggregations, hasDataFilterDropdown },
261	},
262	handleDataItemEdit,
263	options,
264	}) => {
265	const mergedI18n = { ...defaultProps.i18n, ...i18n };	207✔
266	const { id, type, content } = cardConfig;	207✔
267	const baseClassName = `${iotPrefix}--card-edit-form`;	207✔
268	const {
269	hasColorDropdown,
270	hasUnit,
271	hasDecimalPlacesDropdown,
272	hasThresholds,
273	hasTooltip,
274	} = options;	207✔
275
276	const isTimeBasedCard =
277	type === CARD_TYPES.TIMESERIES \|\|	207✔
278	(type === CARD_TYPES.TABLE &&
279	content?.columns?.find((column) => column.type === 'TIMESTAMP')) \|\|	38✔
280	(content?.type === BAR_CHART_TYPES.SIMPLE && content?.timeDataSourceId) \|\|
281	(content?.type === BAR_CHART_TYPES.STACKED && content?.timeDataSourceId);
282
283	const handleTranslation = useCallback(	207✔
284	(idToTranslate) => {
285	const {
286	clearSelectionText,
287	openMenuText,
288	closeMenuText,
289	clearAllText,
290	incrementNumberText,
291	decrementNumberText,
292	} = mergedI18n;	131✔
293	switch (idToTranslate) {	131!
294	case 'clear.all':
295	return clearAllText \|\| 'Clear all';	×
296	case 'clear.selection':
297	return clearSelectionText \|\| 'Clear selection';	×
298	case 'open.menu':
299	return openMenuText \|\| 'Open menu';	91✔
300	case 'close.menu':
301	return closeMenuText \|\| 'Close menu';	2✔
302	case 'increment.number':
303	return incrementNumberText \|\| 'Increment number';	19✔
304	case 'decrement.number':
305	return decrementNumberText \|\| 'Decrement number';	19✔
306	default:
NEW 307	return '';	×
308	}
309	},
310	[mergedI18n]
311	);
312
313	const availableGrains = [	207✔
314	{ id: 'hourly', text: mergedI18n.hourlyLabel },
315	{ id: 'daily', text: mergedI18n.dailyLabel },
316	{ id: 'weekly', text: mergedI18n.weeklyLabel },
317	{ id: 'monthly', text: mergedI18n.monthlyLabel },
318	{ id: 'yearly', text: mergedI18n.yearlyLabel },
319	];
320
321	const initialAggregation = validDataItems?.find(	207✔
322	({ dataSourceId }) => dataSourceId === editDataItem.dataSourceId	86✔
323	)?.aggregationMethod;
324
325	const initialGrain = validDataItems?.find(	207✔
326	({ dataSourceId }) => dataSourceId === editDataItem.dataSourceId	86✔
327	)?.grain;
328
329	const selectedDimensionFilter = editDataItem.dataFilter	207✔
330	? Object.keys(editDataItem.dataFilter)[0]
331	: '';
332
333	const DataEditorContent = useMemo(	207✔
334	() => (
335	<>	207✔
336	{hasAggregationsDropDown && hasAggregationsDropDown(editDataItem) && (	608✔
337	<div className={`${baseClassName}--input-group`}>
338	{!initialAggregation \|\| !isSummaryDashboard ? ( // selector should only be use-able in an instance dash or if there is no initial aggregation	391✔
339	<div className={`${baseClassName}--input-group--item-half`}>
340	<Dropdown
341	id={`${id}_aggregation-method`}
342	label=""
343	direction="bottom"
344	itemToString={(item) => item.text}	177✔
345	items={editDataItem.aggregationMethods \|\| []}	359✔
346	selectedItem={
347	editDataItem.aggregationMethods?.find(	370✔
348	(method) => method.id === editDataItem.aggregationMethod	88✔
349	) \|\| { id: 'none', text: mergedI18n.none }
350	}
351	titleText={mergedI18n.aggregationMethod}
352	light
353	onChange={({ selectedItem }) => {
354	setEditDataItem(	3✔
355	omit(
356	{
357	...editDataItem,
358	aggregationMethod: selectedItem.id,
359	// if we don't have a grain, then default to the first available
360	...(isTimeBasedCard && selectedItem.id !== 'none' && !editDataItem.grain	11✔
361	? { grain: availableGrains[0]?.id }
362	: {}),
363	},
364	// if we're turning off the aggregation method, clear the input grain
365	...(selectedItem.id === 'none' ? ['grain'] : [])	3✔
366	)
367	);
368	}}
369	/>
370	</div>
371	) : (
372	<div className={`${baseClassName}--input-group--item-half`}>
373	<FormLabel className={`${baseClassName}--input-group--item-half-label`}>
374	{mergedI18n.aggregationMethod}
375	</FormLabel>
376	<span className={`${baseClassName}--input-group--item-half-content`}>
377	{`${
378	editDataItem.aggregationMethod	3✔
379	? editDataItem.aggregationMethod[0].toUpperCase()
380	: ''
381	}${editDataItem.aggregationMethod?.slice(1) \|\| ''}`}	5✔
382	</span>
383	</div>
384	)}
385	{editDataItem?.hasStreamingMetricEnabled && onAddAggregations && (	206✔
386	<div className={`${iotPrefix}--add-aggregation`}>
387	<Button
388	className={`${iotPrefix}--add-aggregation__btn`}
389	kind="ghost"
390	size="large"
391	renderIcon={Add16}
392	onClick={() => onAddAggregations(editDataItem)}	×
393	iconDescription={mergedI18n.dataItemEditorAddAggregationMethodDescription}
394	testId={`${testId}-aggregaton-button`}
395	>
396	{mergedI18n.dataItemEditorAddAggregationMethodLabel}
397	</Button>
398	</div>
399	)}
400	{isTimeBasedCard &&	295✔
401	editDataItem.aggregationMethod &&
402	editDataItem.aggregationMethod !== 'none' &&
403	!editDataItem?.hasStreamingMetricEnabled && (
404	<div className={`${baseClassName}--input-group--item-half`}>
405	<Dropdown
406	id={`${id}_grain-selector`}
407	label=""
408	direction="bottom"
409	itemToString={(item) => item.text}	36✔
410	items={
411	isSummaryDashboard && initialAggregation // limit options for aggregated metrics in a summary dash	26✔
412	? availableGrains.slice(
413	availableGrains.findIndex((grain) => grain.id === initialGrain)	1✔
414	)
415	: availableGrains
416	}
417	selectedItem={
418	availableGrains.find((grain) => grain.id === editDataItem.grain) \|\|	30✔
419	availableGrains[0]
420	}
421	titleText={mergedI18n.grain}
422	light
423	onChange={({ selectedItem }) => {
424	setEditDataItem({	1✔
425	...editDataItem,
426	grain: selectedItem.id,
427	});
428	}}
429	/>
430	</div>
431	)}
432	</div>
433	)}
434
435	<div className={`${baseClassName}--input-group`}>
436	<div className={`${baseClassName}--input-group--item`}>
437	<TextInput
438	id={`${id}_attribute-label`}
439	labelText={mergedI18n.dataItemEditorDataItemCustomLabel}
440	light
441	onChange={(evt) =>
442	setEditDataItem({	15✔
443	...editDataItem,
444	label: evt.target.value,
445	})
446	}
447	value={editDataItem.label}
448	helperText={mergedI18n.dataItemEditorDataItemHelperText(
449	mergedI18n.dataItemSource,
450	editDataItem.dataItemId
451	)}
452	/>
453	</div>
454
455	{hasColorDropdown && ( // show color selector	286✔
456	<div className={`${baseClassName}--input-group--item`}>
457	<ColorDropdown
458	id={`${id}_color-dropdown`}
459	label=""
460	titleText={
461	type === CARD_TYPES.TIMESERIES	79✔
462	? mergedI18n.dataItemEditorLineColor
463	: mergedI18n.dataItemEditorBarColor
464	}
465	selectedColor={DATAITEM_COLORS_OPTIONS.find(
466	({ carbonColor }) => carbonColor === editDataItem.color	871✔
467	)}
468	onChange={({ color }) =>
469	setEditDataItem({	1✔
470	...editDataItem,
471	color: color.carbonColor,
472	})
473	}
474	/>
475	</div>
476	)}
477
478	{hasTooltip && (	298✔
479	<div className={`${baseClassName}--input-group--item`}>
480	<TextInput
481	id={`${id}_attribute-tooltip`}
482	labelText={mergedI18n.dataItemEditorDataItemTooltip}
483	light
484	onChange={(evt) =>
UNCOV 485	setEditDataItem({	×
486	...editDataItem,
487	tooltip: evt.target.value,
488	})
489	}
490	value={editDataItem.tooltip}
491	/>
492	</div>
493	)}
494	</div>
495
496	{(hasUnit \|\| hasDecimalPlacesDropdown) && (	414✔
497	<div className={`${baseClassName}--input-group`}>
498	{hasUnit && (	250✔
499	<div className={`${baseClassName}--input-group--item`}>
500	<TextInput
501	id={`${id}_attribute-unit`}
502	labelText={mergedI18n.dataItemEditorDataItemUnit}
503	light
504	placeholder={`${mergedI18n.example}: %`}
505	onChange={(evt) =>
506	setEditDataItem({	2✔
507	...editDataItem,
508	unit: evt.target.value,
509	})
510	}
511	value={editDataItem.unit}
512	/>
513	</div>
514	)}
515	{hasDecimalPlacesDropdown && (	250✔
516	<div className={`${baseClassName}--input-group--item-end`}>
517	<Dropdown
518	id={`${id}_value-card-decimal-place`}
519	titleText={mergedI18n.decimalPlacesLabel}
520	direction="bottom"
521	label=""
522	items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
523	light
524	selectedItem={editDataItem.precision?.toString() \|\| mergedI18n.notSet}	241✔
525	onChange={({ selectedItem }) => {
526	const isSet = selectedItem !== mergedI18n.notSet;	5✔
527	if (isSet) {	5✔
528	setEditDataItem({	3✔
529	...editDataItem,
530	precision: Number(selectedItem),
531	});
532	} else {
533	setEditDataItem(omit(editDataItem, 'precision'));	2✔
534	}
535	}}
536	/>
537	</div>
538	)}
539	</div>
540	)}
541
542	{hasDataFilterDropdown &&	456✔
543	hasDataFilterDropdown(cardConfig) && ( // only show data filter in summary dashboards or instance dashboard for DEVICE_TYPE
544	<div className={`${baseClassName}--input-group ${baseClassName}--input-group--bottom `}>
545	<div
546	className={classnames({
547	[`${baseClassName}--input-group--item`]: !isEmpty(editDataItem.dataFilter),
548	[`${baseClassName}--input-group--item-half`]:
549	isEmpty(editDataItem.dataFilter) \|\|	46✔
550	(!isEmpty(editDataItem.dataFilter) &&
551	!availableDimensions[selectedDimensionFilter]),
552	})}
553	>
554	<Dropdown
555	id={`${id}_data-filter-key`}
556	label=""
557	translateWithId={handleTranslation}
558	direction="bottom"
559	items={[mergedI18n.none, ...Object.keys(availableDimensions)]}
560	light
561	selectedItem={selectedDimensionFilter \|\| mergedI18n.none}	82✔
562	onChange={({ selectedItem }) => {
563	if (selectedItem !== mergedI18n.none) {	2✔
564	const dataFilter = {	1✔
565	[selectedItem]: availableDimensions[selectedItem].sort()[0],
566	};
567	setEditDataItem({	1✔
568	...editDataItem,
569	dataFilter,
570	});
571	} else {
572	setEditDataItem({	1✔
573	...omit(editDataItem, 'dataFilter'),
574	});
575	}
576	}}
577	titleText={mergedI18n.dataItemEditorDataItemFilter}
578	/>
579	</div>
580	{!isEmpty(editDataItem.dataFilter) && availableDimensions[selectedDimensionFilter] && (	46✔
581	<div className={`${baseClassName}--input-group--item-end`}>
582	<Dropdown
583	id={`${id}_data-filter-value`}
584	label=""
585	direction="bottom"
586	items={availableDimensions[selectedDimensionFilter]?.sort()}
587	light
588	itemToString={(item) => item?.toString()}	16✔
589	selectedItem={
590	editDataItem.dataFilter	2!
591	? editDataItem.dataFilter[selectedDimensionFilter]
592	: undefined
593	}
594	onChange={({ selectedItem }) => {
595	const dataFilter = {	1✔
596	[selectedDimensionFilter]: selectedItem,
597	};
598	setEditDataItem({	1✔
599	...editDataItem,
600	dataFilter,
601	});
602	}}
603	/>
604	</div>
605	)}
606	</div>
607	)}
608
609	{hasThresholds && (	375✔
610	<ThresholdsFormItem
611	id={`${id}_thresholds`}
612	i18n={mergedI18n}
613	cardConfig={cardConfig}
614	dataSourceId={type !== CARD_TYPES.VALUE ? editDataItem.dataSourceId : null}	168✔
615	thresholds={editDataItem.thresholds}
616	translateWithId={handleTranslation}
617	onChange={(thresholds) => {
618	setEditDataItem({	12✔
619	...editDataItem,
620	thresholds,
621	});
622	}}
623	/>
624	)}
625	</>
626	),
627	[
628	availableDimensions,
629	availableGrains,
630	baseClassName,
631	cardConfig,
632	editDataItem,
633	handleTranslation,
634	hasAggregationsDropDown,
635	hasColorDropdown,
636	hasDataFilterDropdown,
637	hasDecimalPlacesDropdown,
638	hasThresholds,
639	hasTooltip,
640	hasUnit,
641	id,
642	initialAggregation,
643	initialGrain,
644	isSummaryDashboard,
645	isTimeBasedCard,
646	mergedI18n,
647	onAddAggregations,
648	selectedDimensionFilter,
649	setEditDataItem,
650	testId,
651	type,
652	]
653	);
654
655	return (	207✔
656	<>
657	{showEditor && (	283✔
658	<div className={`${baseClassName}--modal-wrapper`}>
659	<ComposedModal
660	header={{
661	label: editDataItem.dataItemId,
662	title:
663	type === CARD_TYPES.VALUE	76✔
664	? mergedI18n.dataItemEditorValueCardTitle
665	: mergedI18n.dataItemEditorDataSeriesTitle,
666	}}
667	size="md"
668	isLarge={isLarge}
669	footer={{
670	primaryButtonLabel: mergedI18n.primaryButtonLabelText,
671	secondaryButtonLabel: mergedI18n.secondaryButtonLabelText,
672	}}
673	onSubmit={() => {
674	const newCard =
675	cardConfig.type === CARD_TYPES.IMAGE	9✔
676	? editDataItem
677	: handleDataItemEdit(editDataItem, cardConfig, editDataSeries);
678	onChange(newCard);	9✔
679	setShowEditor(false);	9✔
680	setEditDataItem({});	9✔
681	}}
682	iconDescription={mergedI18n.closeButtonLabelText}
683	onClose={() => {
684	setShowEditor(false);	1✔
685	setEditDataItem({});	1✔
686	}}
687	>
688	{DataEditorContent}
689	</ComposedModal>
690	</div>
691	)}
692	</>
693	);
694	};
695	DataSeriesFormItemModal.defaultProps = defaultProps;	18✔
696	DataSeriesFormItemModal.propTypes = propTypes;	18✔
697	export default DataSeriesFormItemModal;

carbon-design-system / carbon-addons-iot-react / 9643880975

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous