@dhis2/analytics 26.13.4 → 27.0.1

package/build/es/components/FileMenu/RenameDialog.js

@@ -1,75 +1,25 @@
 import _JSXStyle from "styled-jsx/style";
-import { useDataMutation } from '@dhis2/app-runtime';
 import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button, InputField, TextAreaField } from '@dhis2/ui';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import i18n from '../../locales/index.js';
 import { modalStyles } from './FileMenu.styles.js';
-import { supportedFileTypes, endpointFromFileType, labelForFileType } from './utils.js';
-const formatPayload = (name, description) => {
-  const payload = [{
-    op: 'add',
-    path: '/name',
-    value: name
-  }];
-  if (description) {
-    payload.push({
-      op: 'add',
-      path: '/description',
-      value: description
-    });
-  }
-  return payload;
-};
-const getMutation = type => ({
-  resource: endpointFromFileType(type),
-  id: _ref => {
-    let {
-      id
-    } = _ref;
-    return id;
-  },
-  type: 'json-patch',
-  data: _ref2 => {
-    let {
-      name,
-      description
-    } = _ref2;
-    return formatPayload(name, description);
-  }
-});
-export const RenameDialog = _ref3 => {
+import { supportedFileTypes, labelForFileType } from './utils.js';
+export const RenameDialog = _ref => {
   let {
     type,
     object,
     onClose,
-    onRename,
-    onError
-  } = _ref3;
+    onRename
+  } = _ref;
   const [name, setName] = useState(object.name);
   const [description, setDescription] = useState(object.description);
-  const mutation = useMemo(() => getMutation(type), [type]);
-  const [mutate, {
-    loading
-  }] = useDataMutation(mutation, {
-    onError: error => {
-      onError(error);
-      onClose();
-    },
-    onComplete: () => {
-      onRename({
-        name,
-        description
-      });
-      onClose();
-    }
-  });
   const renameObject = () => {
-    mutate({
-      id: object.id,
+    onRename({
       name,
       description
     });
+    onClose();
   };
   return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
@@ -82,49 +32,43 @@ export const RenameDialog = _ref3 => {
     className: `jsx-${modalStyles.__hash}` + " " + "modal-content"
   }, /*#__PURE__*/React.createElement(InputField, {
     label: i18n.t('Name'),
-    disabled: loading,
     required: true,
     value: name,
-    onChange: _ref4 => {
+    onChange: _ref2 => {
       let {
         value
-      } = _ref4;
+      } = _ref2;
       return setName(value);
     },
     dataTest: "file-menu-rename-modal-name"
   }), /*#__PURE__*/React.createElement(TextAreaField, {
     label: i18n.t('Description'),
-    disabled: loading,
     value: description,
     rows: 3,
-    onChange: _ref5 => {
+    onChange: _ref3 => {
       let {
         value
-      } = _ref5;
+      } = _ref3;
       return setDescription(value);
     },
     dataTest: "file-menu-rename-modal-description"
   }))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
-    disabled: loading,
     secondary: true,
     dataTest: "file-menu-rename-modal-cancel"
   }, i18n.t('Cancel')), /*#__PURE__*/React.createElement(Button, {
     onClick: renameObject,
-    disabled: loading,
     primary: true,
     dataTest: "file-menu-rename-modal-rename"
   }, i18n.t('Rename')))));
 };
 RenameDialog.propTypes = {
-  id: PropTypes.string,
   object: PropTypes.shape({
-    id: PropTypes.string.isRequired,
     description: PropTypes.string,
+    id: PropTypes.string,
     name: PropTypes.string
   }),
   type: PropTypes.oneOf(supportedFileTypes),
   onClose: PropTypes.func,
-  onError: PropTypes.func,
   onRename: PropTypes.func
 };

package/build/es/components/FileMenu/__tests__/RenameDialog.spec.js

@@ -1,51 +1,83 @@
-import { Button, Modal, ModalTitle } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import '@testing-library/jest-dom';
+import { render, fireEvent, screen, within } from '@testing-library/react';
 import React from 'react';
 import { RenameDialog } from '../RenameDialog.js';
 describe('The FileMenu - RenameDialog component', () => {
-  let shallowRenameDialog;
-  let props;
   const onClose = jest.fn();
-  const getRenameDialogComponent = props => {
-    if (!shallowRenameDialog) {
-      shallowRenameDialog = shallow(/*#__PURE__*/React.createElement(RenameDialog, props));
-    }
-    return shallowRenameDialog;
+  const onRename = jest.fn();
+  const props = {
+    type: 'visualization',
+    object: {
+      id: 'rename-test'
+    },
+    onClose,
+    onRename
   };
   beforeEach(() => {
-    shallowRenameDialog = undefined;
-    props = {
-      type: 'visualization',
-      object: {
-        id: 'rename-test'
-      },
-      onClose
-    };
-  });
-  it('renders a Modal component', () => {
-    expect(getRenameDialogComponent(props).find(Modal)).toHaveLength(1);
+    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
-  it('renders a ModalTitle containing the type prop', () => {
-    expect(getRenameDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Rename ${props.type}`);
+  it('renders a Modal component with the correct heading', () => {
+    render(/*#__PURE__*/React.createElement(RenameDialog, props));
+    expect(screen.getAllByTestId('file-menu-rename-modal')).toHaveLength(1);
+    expect(screen.getByRole('heading')).toHaveTextContent('Rename visualization');
   });
   it('renders a InputField for name', () => {
-    expect(getRenameDialogComponent(props).findWhere(n => n.prop('label') === 'Name')).toHaveLength(1);
+    render(/*#__PURE__*/React.createElement(RenameDialog, props));
+    expect(screen.getByTestId('file-menu-rename-modal-name')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeVisible();
   });
   it('renders a InputField for name with prefilled value if name is in object prop', () => {
-    props.object.name = 'Name test';
-    const nameInputField = getRenameDialogComponent(props).findWhere(n => n.prop('label') === 'Name');
-    expect(nameInputField.prop('value')).toEqual(props.object.name);
+    render(/*#__PURE__*/React.createElement(RenameDialog, _extends({}, props, {
+      object: {
+        ...props.object,
+        name: 'Vis test'
+      }
+    })));
+    const ancestorElement = screen.getByTestId('file-menu-rename-modal-name');
+    const inputElement = within(ancestorElement).getByRole('textbox');
+    expect(inputElement).toBeInTheDocument();
+    expect(inputElement).toHaveValue('Vis test');
   });
   it('renders a TextAreaField for description', () => {
-    expect(getRenameDialogComponent(props).findWhere(n => n.prop('label') === 'Description')).toHaveLength(1);
+    render(/*#__PURE__*/React.createElement(RenameDialog, props));
+
+    // Locate the label by its text
+    const labelElement = screen.getByText('Description');
+
+    // Find the textarea element within the same container as the label
+    const descriptionField = labelElement.closest('div').querySelector('textarea');
+    expect(descriptionField).toBeInTheDocument();
+    expect(descriptionField).toBeVisible();
   });
   it('renders a TextAreaField for description with prefilled value if description is in object prop', () => {
-    props.object.description = 'Description test';
-    const descriptionInputField = getRenameDialogComponent(props).findWhere(n => n.prop('label') === 'Description');
-    expect(descriptionInputField.prop('value')).toEqual(props.object.description);
+    render(/*#__PURE__*/React.createElement(RenameDialog, _extends({}, props, {
+      object: {
+        ...props.object,
+        description: 'Long explanation of the visualization'
+      }
+    })));
+
+    // Locate the label by its text
+    const labelElement = screen.getByText('Description');
+
+    // Find the textarea element within the same container as the label
+    const descriptionField = labelElement.closest('div').querySelector('textarea');
+    expect(descriptionField).toBeInTheDocument();
+    expect(descriptionField).toHaveValue('Long explanation of the visualization');
+  });
+  it('calls the onClose callback when the Cancel button is clicked', async () => {
+    render(/*#__PURE__*/React.createElement(RenameDialog, props));
+    await fireEvent.click(screen.getByTestId('file-menu-rename-modal-cancel'));
+    expect(onClose).toHaveBeenCalled();
+    expect(onRename).not.toHaveBeenCalled();
   });
-  it('calls the onClose callback when the Cancel button is clicked', () => {
-    getRenameDialogComponent(props).find(Button).first().simulate('click');
+  it('calls the onRename callback when the Rename button is clicked', async () => {
+    render(/*#__PURE__*/React.createElement(RenameDialog, props));
+    await fireEvent.click(screen.getByTestId('file-menu-rename-modal-rename'));
+    expect(onRename).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
   });
 });

package/build/es/components/FileMenu/__tests__/utils.spec.js

@@ -0,0 +1,237 @@
+import { preparePayloadForSaveAs, preparePayloadForSave } from '../utils.js';
+describe('utils', () => {
+  describe('preparePayloadForSaveAs', () => {
+    it('removes unnecessary properties from the visualization object', () => {
+      const visualization = {
+        id: '123',
+        created: '2023-01-01',
+        createdBy: 'user1',
+        user: 'user2',
+        name: 'Existing Name',
+        description: 'Existing Description',
+        type: 'PIVOT_TABLE'
+      };
+      const result = preparePayloadForSaveAs({
+        visualization
+      });
+      expect(result).not.toHaveProperty('id');
+      expect(result).not.toHaveProperty('created');
+      expect(result).not.toHaveProperty('createdBy');
+      expect(result).not.toHaveProperty('user');
+    });
+    it('sets the name to the provided name', () => {
+      const visualization = {
+        type: 'PIVOT_TABLE'
+      };
+      const name = 'New Name';
+      const result = preparePayloadForSaveAs({
+        visualization,
+        name
+      });
+      expect(result.name).toBe(name);
+    });
+    it('sets the name to the existing name if no new name is provided', () => {
+      const visualization = {
+        name: 'Existing Name',
+        type: 'MAP'
+      };
+      const result = preparePayloadForSaveAs({
+        visualization
+      });
+      expect(result.name).toBe('Existing Name');
+    });
+    it('sets the name to a default value if no name is provided', () => {
+      const visualization = {
+        type: 'LINE_LIST'
+      };
+      const result = preparePayloadForSaveAs({
+        visualization
+      });
+      const expectedName = `Untitled Line list, ${new Date().toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: '2-digit'
+      })}`;
+      expect(result.name).toBe(expectedName);
+    });
+    it('sets the description to the provided description', () => {
+      const visualization = {
+        description: 'Existing Description',
+        type: 'PIVOT_TABLE'
+      };
+      const description = 'New Description';
+      const result = preparePayloadForSaveAs({
+        visualization,
+        description
+      });
+      expect(result.description).toBe(description);
+    });
+    it('keeps the existing description if no new description is provided', () => {
+      const visualization = {
+        description: 'Existing Description',
+        type: 'PIVOT_TABLE'
+      };
+      const result = preparePayloadForSaveAs({
+        visualization
+      });
+      expect(result.description).toBe('Existing Description');
+    });
+    it('sets the description to undefined if no description is provided and none exists', () => {
+      const visualization = {
+        type: 'PIVOT_TABLE'
+      };
+      const result = preparePayloadForSaveAs({
+        visualization
+      });
+      expect(result.description).toBeUndefined();
+    });
+  });
+  describe('preparePayloadForSave', () => {
+    const mockEngine = {
+      query: jest.fn()
+    };
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    it('fetches subscribers and adds them to the visualization', async () => {
+      const visualization = {
+        id: '123',
+        type: 'BAR',
+        name: 'Existing Name',
+        description: 'Existing Description'
+      };
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: ['user1', 'user2']
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        engine: mockEngine
+      });
+      expect(mockEngine.query).toHaveBeenCalledWith({
+        ao: {
+          resource: 'visualizations',
+          id: expect.any(Function),
+          params: {
+            fields: 'subscribers'
+          }
+        }
+      }, {
+        variables: {
+          id: '123'
+        }
+      });
+      expect(result.subscribers).toEqual(['user1', 'user2']);
+    });
+    it('sets the name to the provided name', async () => {
+      const visualization = {
+        id: '123',
+        type: 'MAP',
+        name: 'Existing name'
+      };
+      const name = 'New Name';
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        name,
+        engine: mockEngine
+      });
+      expect(result.name).toBe(name);
+    });
+    it('sets the name to the existing name if no new name is provided', async () => {
+      const visualization = {
+        id: '123',
+        type: 'LINE_LIST',
+        name: 'Existing Name'
+      };
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        engine: mockEngine
+      });
+      expect(result.name).toBe('Existing Name');
+    });
+    it('sets the name to a default value if no name is provided', async () => {
+      const visualization = {
+        id: '123',
+        type: 'BAR'
+      };
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        engine: mockEngine
+      });
+      const expectedName = `Untitled Bar, ${new Date().toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: '2-digit'
+      })}`;
+      expect(result.name).toBe(expectedName);
+    });
+    it('sets the description to the provided description', async () => {
+      const visualization = {
+        id: '123',
+        type: 'YEAR_OVER_YEAR_LINE',
+        description: 'Existing Description'
+      };
+      const description = 'New Description';
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        description,
+        engine: mockEngine
+      });
+      expect(result.description).toBe(description);
+    });
+    it('keeps the existing description if no new description is provided', async () => {
+      const visualization = {
+        id: '123',
+        type: 'COLUMN',
+        description: 'Existing Description'
+      };
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        engine: mockEngine
+      });
+      expect(result.description).toBe('Existing Description');
+    });
+    it('sets the description to undefined if no description is provided and none exists', async () => {
+      const visualization = {
+        id: '123',
+        type: 'BAR'
+      };
+      mockEngine.query.mockResolvedValue({
+        ao: {
+          subscribers: []
+        }
+      });
+      const result = await preparePayloadForSave({
+        visualization,
+        engine: mockEngine
+      });
+      expect(result.description).toBeUndefined();
+    });
+  });
+});

package/build/es/components/FileMenu/utils.js

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n';
+import { getDisplayNameByVisType, getApiEndpointByVisType } from '../../modules/visTypes.js';
 export const FILE_TYPE_EVENT_REPORT = 'eventReport';
 export const FILE_TYPE_VISUALIZATION = 'visualization';
 export const FILE_TYPE_MAP = 'map';
@@ -34,11 +35,65 @@ export const appPathFor = (fileType, id, apiVersion) => {
 };
 export const preparePayloadForSaveAs = _ref => {
   let {
-    ...visualization
+    visualization,
+    name,
+    description
   } = _ref;
   delete visualization.id;
   delete visualization.created;
   delete visualization.createdBy;
   delete visualization.user;
+  visualization.name = name || visualization.name || i18n.t('Untitled {{visualizationType}}, {{date}}', {
+    visualizationType: getDisplayNameByVisType(visualization.type),
+    date: new Date().toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit'
+    })
+  });
+  visualization.description = description !== undefined ? description : visualization.description;
+  return visualization;
+};
+const getSubscriberQuery = type => ({
+  ao: {
+    resource: getApiEndpointByVisType(type),
+    id: _ref2 => {
+      let {
+        id
+      } = _ref2;
+      return id;
+    },
+    params: {
+      fields: 'subscribers'
+    }
+  }
+});
+const apiFetchAOSubscribers = (dataEngine, id, type) => {
+  return dataEngine.query(getSubscriberQuery(type), {
+    variables: {
+      id
+    }
+  });
+};
+export const preparePayloadForSave = async _ref3 => {
+  let {
+    visualization,
+    name,
+    description,
+    engine
+  } = _ref3;
+  const {
+    ao
+  } = await apiFetchAOSubscribers(engine, visualization.id, visualization.type);
+  visualization.subscribers = ao.subscribers;
+  visualization.name = name || visualization.name || i18n.t('Untitled {{visualizationType}}, {{date}}', {
+    visualizationType: getDisplayNameByVisType(visualization.type),
+    date: new Date().toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit'
+    })
+  });
+  visualization.description = description !== undefined ? description : visualization.description;
   return visualization;
 };

package/build/es/index.js

@@ -12,7 +12,7 @@ export { default as DimensionFilter } from './components/Filter/Filter.js';
 export { default as DimensionMenu } from './components/DimensionMenu.js';
 export { default as PivotTable } from './components/PivotTable/PivotTable.js';
 export { default as FileMenu } from './components/FileMenu/FileMenu.js';
-export { preparePayloadForSaveAs } from './components/FileMenu/utils.js';
+export { preparePayloadForSaveAs, preparePayloadForSave } from './components/FileMenu/utils.js';
 export { default as VisTypeIcon } from './components/VisTypeIcon.js';
 export { default as LegendKey } from './components/LegendKey/LegendKey.js';
 export { default as AboutAOUnit } from './components/AboutAOUnit/AboutAOUnit.js';
@@ -99,7 +99,7 @@ export { getLayoutTypeByVisType } from './modules/visTypeToLayoutType.js';
 
 // Modules: visTypes
 
-export { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_BUBBLE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_SCATTER, VIS_TYPE_LINE_LIST, VIS_TYPE_OUTLIER_TABLE, visTypeDisplayNames, visTypeIcons, getDisplayNameByVisType, defaultVisType, isStacked, isMultiType, isYearOverYear, isDualAxisType, isSingleValue, isOutlierTable, isTwoCategoryChartType, isLegendSetType, isColumnBasedType, isVerticalType } from './modules/visTypes.js';
+export { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_BUBBLE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_SCATTER, VIS_TYPE_LINE_LIST, VIS_TYPE_OUTLIER_TABLE, VIS_TYPE_MAP, visTypeDisplayNames, visTypeIcons, getDisplayNameByVisType, defaultVisType, isStacked, isMultiType, isYearOverYear, isDualAxisType, isSingleValue, isOutlierTable, isTwoCategoryChartType, isLegendSetType, isColumnBasedType, isVerticalType } from './modules/visTypes.js';
 
 // Modules: layoutTypes
 

package/build/es/locales/en/translations.json

@@ -162,6 +162,7 @@
     "line list": "line list",
     "map": "map",
     "visualization": "visualization",
+    "Untitled {{visualizationType}}, {{date}}": "Untitled {{visualizationType}}, {{date}}",
     "Edit": "Edit",
     "Write a reply": "Write a reply",
     "Post reply": "Post reply",
@@ -451,6 +452,7 @@
     "Single value": "Single value",
     "Outlier table": "Outlier table",
     "All charts": "All charts",
+    "Map": "Map",
     "{{seriesName}} (trend)": "{{seriesName}} (trend)",
     "Trend": "Trend",
     "No legend for this series": "No legend for this series",

package/build/es/modules/pivotTable/PivotTableEngine.js

@@ -243,10 +243,10 @@ export class PivotTableEngine {
         rawValue = parseValue(rawValue);
         switch (this.visualization.numberType) {
           case NUMBER_TYPE_ROW_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[row].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[row].value;
             break;
           case NUMBER_TYPE_COLUMN_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[column].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[column].value;
             break;
           default:
             break;
@@ -258,6 +258,19 @@ export class PivotTableEngine {
       rawCell.rawValue = rawValue;
       rawCell.renderedValue = renderedValue;
     }
+
+    // show the original value in the tooltip
+    if ([NUMBER_TYPE_COLUMN_PERCENTAGE, NUMBER_TYPE_ROW_PERCENTAGE].includes(this.visualization.numberType)) {
+      rawCell.titleValue = i18n.t('Value: {{value}}', {
+        value: renderValue(rawCell.rawValue, valueType,
+        // force VALUE for formatting the original value
+        {
+          ...this.visualization,
+          numberType: NUMBER_TYPE_VALUE
+        }),
+        nsSeparator: '^^'
+      });
+    }
     if ([CELL_TYPE_TOTAL, CELL_TYPE_SUBTOTAL].includes(rawCell.cellType) && rawCell.rawValue === AGGREGATE_TYPE_NA) {
       rawCell.titleValue = i18n.t('Not applicable');
     }
@@ -950,7 +963,11 @@ export class PivotTableEngine {
       if (!valueB || valueB.empty) {
         return 1 * order;
       }
-      if (valueA.valueType === VALUE_TYPE_NUMBER && valueB.valueType === VALUE_TYPE_NUMBER) {
+      if (
+      // for percentage strings, use the pctValue (percentage value) in the sort comparison
+      [NUMBER_TYPE_ROW_PERCENTAGE, NUMBER_TYPE_COLUMN_PERCENTAGE].includes(this.visualization.numberType)) {
+        return (valueA.pctValue - valueB.pctValue) * order;
+      } else if (valueA.valueType === VALUE_TYPE_NUMBER && valueB.valueType === VALUE_TYPE_NUMBER) {
         return (valueA.rawValue - valueB.rawValue) * order;
       }
       return valueA.renderedValue.localeCompare(valueB.renderedValue) * order;