3001167514

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/carbon-design-system/carbon-addons-iot-react/commit/<a class=hub.com/carbon-design-system/carbon-addons-iot-react/commit/a431e3252a2388f1e7e87c8650066eb2df245071">a431e3252<a href="https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a431e3252a2388f1e7e87c8650066eb2df245071">">Merge </a><a class="double-link" href="https://github.com/carbon-design-system/carbon-addons-iot-react/commit/<a class="double-link" href="https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6246fd6eaeb325c699a6b6f7dfee50e841dd587f">6246fd6ea</a>">6246fd6ea</a><a href="https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a431e3252a2388f1e7e87c8650066eb2df245071"> into 8203d2278">8203d2278</a>

Pull Request Pull Request #3531: Dynamic aggregation part2

Run Details

6925 of 7211 branches covered (96.03%)

Branch coverage included in aggregate %.

10 of 10 new or added lines in 5 files covered. (100.0%)

8423 of 8509 relevant lines covered (98.99%)

881.62 hits per line

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

93.1

/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,
  red60,
  red90,
  green60,
  blue80,
  magenta50,
  purple50,
  teal50,
  cyan90,
} from '@carbon/colors';
import { WarningAlt32, 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 {
  handleDataItemEdit,
  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;

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]),
      })
    ),
  }),
  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,
};

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',
    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: null,
    dataSeriesFormActions: {
      hideAggregationsDropDown: null,
      onAddAggregations: null,
    },
  },
};

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: { hideAggregationsDropDown, onAddAggregations },
  },
}) => {
  const mergedI18n = { ...defaultProps.i18n, ...i18n };
  const { id, type, content } = cardConfig;
  const baseClassName = `${iotPrefix}--card-edit-form`;

  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) {
        default:
          return '';
        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';
      }
    },
    [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(
    () => (
      <>
        {hideAggregationsDropDown(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>

          {(type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR) && ( // 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>
          )}
        </div>

        {type === CARD_TYPES.IMAGE && (
          <div className={`${baseClassName}--input-group`}>
            <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>
            <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>
        )}

        {type === CARD_TYPES.VALUE && (
          <div className={`${baseClassName}--input-group`}>
            <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>
            <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>
        )}

        {isSummaryDashboard &&
          type !== CARD_TYPES.TABLE && ( // only show data filter in summary dashboards
            <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>
          )}

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

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

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