Add layerOrder in LegendWidget

.gitignore

@@ -2,6 +2,7 @@
 /coverage
 /reports
 /.nyc_output
+/.vscode
 
 /packages/*/node_modules
 /packages/*/coverage

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Add layerOrder in LegendWidget [#433](https://github.com/CartoDB/carto-react/pull/433)
 - Allow FormulaWidget column to be undefined when using COUNT [#434](https://github.com/CartoDB/carto-react/pull/434)
 
 ## 1.3

packages/react-api/src/api/common.js

@@ -22,12 +22,6 @@ export function dealWithApiError({ response, data }) {
   }
 }
 
-export function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
 export function checkCredentials(credentials) {
   if (!credentials || !credentials.apiBaseUrl || !credentials.accessToken) {
     throw new Error('Missing or bad credentials provided');

packages/react-api/src/api/model.js

@@ -1,5 +1,6 @@
-import { assert, checkCredentials, makeCall } from './common';
+import { checkCredentials, makeCall } from './common';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
+import { _assert as assert } from '@carto/react-core/';
 
 const URL_LENGTH = 2048;
 

packages/react-api/src/api/stats.js

@@ -1,7 +1,7 @@
-import { assert, checkCredentials, makeCall } from './common';
+import { checkCredentials, makeCall } from './common';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
 import { getTileJson } from './tilejson';
-import { InvalidColumnError } from '@carto/react-core/';
+import { InvalidColumnError, _assert as assert } from '@carto/react-core/';
 
 /**
  * Execute a stats service request.

packages/react-api/src/api/tilejson.js

@@ -1,5 +1,6 @@
-import { assert, checkCredentials } from './common';
+import { checkCredentials } from './common';
 import { MAP_TYPES, API_VERSIONS, fetchLayerData, FORMATS } from '@deck.gl/carto';
+import { _assert as assert } from '@carto/react-core/';
 
 /**
  * Get the TileJson for static tilesets

packages/react-core/src/index.d.ts

@@ -12,6 +12,7 @@ export { InvalidColumnError } from './utils/InvalidColumnError';
 export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';
+export { assert as _assert } from './utils/assert';
 
 export { makeIntervalComplete } from './utils/makeIntervalComplete';
 

packages/react-core/src/index.js

@@ -12,6 +12,7 @@ export { InvalidColumnError } from './utils/InvalidColumnError';
 export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';
+export { assert as _assert } from './utils/assert';
 
 export { makeIntervalComplete } from './utils/makeIntervalComplete';
 

packages/react-core/src/utils/assert.js

@@ -0,0 +1,5 @@
+export function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}

packages/react-widgets/__tests__/widgets/utils/sortLayers.test.js

@@ -0,0 +1,70 @@
+import sortLayers from '../../../src/widgets/utils/sortLayers';
+
+describe('sortLayersById', () => {
+  const ELEMENTS = [
+    {
+      id: 'storesLayer0',
+      source: 'storesSource',
+      title: 'Store types 0'
+    },
+    {
+      id: 'storesLayer1',
+      source: 'storesSource',
+      title: 'Store types 1'
+    },
+    {
+      id: 'storesLayer2',
+      source: 'storesSource',
+      title: 'Store types 2'
+    },
+    {
+      id: 'storesLayer3',
+      source: 'storesSource',
+      title: 'Store types 3'
+    }
+  ];
+
+  test('should ignore not existing ids', () => {
+    const ORDER = [
+      'not_existing_value',
+      'storesLayer3',
+      'storesLayer1',
+      'storesLayer2',
+      'storesLayer0'
+    ];
+    expect(ORDER.slice(1)).toStrictEqual(
+      sortLayers(ELEMENTS, ORDER)
+        .map(({ id }) => id)
+        .reverse()
+    );
+  });
+
+  test('should add missing ids at end', () => {
+    const ORDER = ['storesLayer1', 'storesLayer2', 'storesLayer0'];
+    const orderedElements = sortLayers(ELEMENTS, ORDER)
+      .map(({ id }) => id)
+      .slice(ORDER.length);
+    expect(orderedElements.every((id) => ORDER.indexOf(id) === -1)).toBeTruthy();
+    expect(orderedElements.length).toBe(1);
+  });
+  test('should throw an error when elements have no id property', () => {
+    const ELEMENT_WITH_NO_PROP = [
+      ...ELEMENTS,
+      {
+        source: 'storesSource',
+        title: 'Store types 4'
+      }
+    ];
+    const ORDER = ['storesLayer1', 'storesLayer2', 'storesLayer0'];
+    expect(() => sortLayers(ELEMENT_WITH_NO_PROP, ORDER)).toThrowError(
+      'Layer must have an id'
+    );
+  });
+
+  test('should sort in reverse order', () => {
+    const ORDER = ['storesLayer1', 'storesLayer2', 'storesLayer0', 'storesLayer3'];
+
+    const orderedElements = sortLayers(ELEMENTS, ORDER).map(({ id }) => id);
+    expect(ORDER).toStrictEqual(orderedElements.reverse());
+  });
+});

packages/react-widgets/src/types.d.ts

@@ -98,6 +98,7 @@ export type LegendWidget = {
   className?: string;
   initialCollapsed?: boolean;
   customLegendTypes?: Record<string, Function>;
+  layerOrder?: string[];
 }
 
 export type WidgetWithAlert = {
@@ -106,4 +107,4 @@ export type WidgetWithAlert = {
   noDataAlertProps?: object;
   droppingFeaturesAlertProps?: object;
   children?: React.ReactNode;
-}
+}

packages/react-widgets/src/widgets/LegendWidget.js

@@ -3,6 +3,7 @@ import { updateLayer } from '@carto/react-redux/';
 import { LegendWidgetUI } from '@carto/react-ui';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import sortLayers from './utils/sortLayers';
 
 /**
  * Renders a <LegendWidget /> component
@@ -11,16 +12,21 @@ import PropTypes from 'prop-types';
  * @param  {Object.<string, function>} [props.customLayerOptions] - Allow to add custom controls to a legend item to tweak the associated layer
  * @param  {Object.<string, function>} [props.customLegendTypes] - Allow to customise by default legend types that can be rendered
  * @param  {boolean} [props.initialCollapsed] - Define initial collapsed value. false by default.
+ * @param  {string[]} [props.layerOrder] - Array of layer identifiers. Defines the order of layer legends. [] by default.
  */
 function LegendWidget({
   className,
   customLayerOptions,
   customLegendTypes,
-  initialCollapsed
+  initialCollapsed,
+  layerOrder = []
 }) {
   const dispatch = useDispatch();
   const layers = useSelector((state) =>
-    Object.values(state.carto.layers).filter((layer) => !!layer.legend)
+    sortLayers(
+      Object.values(state.carto.layers).filter((layer) => !!layer.legend),
+      layerOrder
+    )
   );
   const [collapsed, setCollapsed] = useState(initialCollapsed);
 
@@ -73,11 +79,13 @@ function LegendWidget({
 LegendWidget.propTypes = {
   className: PropTypes.string,
   customLegendTypes: PropTypes.objectOf(PropTypes.func),
-  initialCollapsed: PropTypes.bool
+  initialCollapsed: PropTypes.bool,
+  layerOrder: PropTypes.arrayOf(PropTypes.string)
 };
 
 LegendWidget.defaultProps = {
-  initialCollapsed: false
+  initialCollapsed: false,
+  layerOrder: []
 };
 
 export default LegendWidget;

packages/react-widgets/src/widgets/utils/sortLayers.js

@@ -0,0 +1,17 @@
+import { assert } from '@carto/react-core';
+
+/**
+ * Sorts a list of layers based on a list of id property values
+ * @param {{ id: string }[]} layers - Array of layers to sort
+ * @param {string[]} layerOrder - Array of ids to sort by
+ * @returns sorted array
+ */
+export default function sortLayers(layers = [], layerOrder = []) {
+  if (!layerOrder.length) {
+    return layers;
+  }
+  return [...layers].sort((layerA, layerB) => {
+    assert(layerA.id && layerB.id, 'Layer must have an id');
+    return layerOrder.indexOf(layerB.id) - layerOrder.indexOf(layerA.id);
+  });
+}