Add LegendWidget

packages/react-redux/__tests__/cartoSlice.test.js

@@ -61,7 +61,8 @@ describe('carto slice', () => {
   describe('layer actions', () => {
     const layerInfo = {
       id: 'whatever-id',
-      source: 'whatever-source-id'
+      source: 'whatever-source-id',
+      visible: true
     };
 
     const extraInfo = {
@@ -84,10 +85,11 @@ describe('carto slice', () => {
     test('should update a layer with extra layerAttributes info', () => {
       store.dispatch(cartoSlice.updateLayer(extraInfo));
       const { carto } = store.getState();
-      expect(carto.layers[layerInfo.id]).toEqual({
+      const expected = {
         ...layerInfo,
         ...extraInfo.layerAttributes
-      });
+      };
+      expect(carto.layers[layerInfo.id]).toEqual(expected);
     });
 
     test('should remove a layer', () => {

packages/react-redux/src/slices/cartoSlice.js

@@ -208,7 +208,7 @@ export const removeSource = (sourceId) => ({
  */
 export const addLayer = ({ id, source, layerAttributes = {} }) => ({
   type: 'carto/addLayer',
-  payload: { id, source, ...layerAttributes }
+  payload: { id, source, visible: true, ...layerAttributes }
 });
 
 /**

packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { getMaterialUIContext } from './testUtils';
+import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI';
+import { render, screen } from '@testing-library/react';
+import { Typography } from '@material-ui/core';
+
+const CUSTOM_CHILDREN = <Typography>Legend custom</Typography>;
+
+describe('LegendWidgetUI', () => {
+  const DATA = [
+    {
+      id: 'category',
+      title: 'Category Layer',
+      visible: true,
+      legend: {
+        type: 'category',
+        note: 'lorem',
+        colors: ['#000', '#00F', '#0F0'],
+        labels: ['Category 1', 'Category 2', 'Category 3']
+      }
+    },
+    {
+      id: 'icon',
+      title: 'Icon Layer',
+      visible: true,
+      legend: {
+        type: 'icon',
+        labels: ['Icon 1', 'Icon 2', 'Icon 3'],
+        icons: [
+          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1',
+          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1',
+          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1'
+        ]
+      }
+    },
+    {
+      id: 'bins',
+      title: 'Ramp Layer',
+      visible: true,
+      legend: {
+        type: 'bins',
+        colors: ['#000', '#00F', '#0F0', '#F00'],
+        labels: [100, 200, 300]
+      }
+    },
+    {
+      id: 'continuous',
+      title: 'Ramp Layer',
+      visible: true,
+      legend: {
+        type: 'continuous_ramp',
+        colors: ['#000', '#00F', '#0F0', '#F00'],
+        labels: [100, 200, 300]
+      }
+    },
+    {
+      id: 'proportion',
+      title: 'Proportion Layer',
+      visible: true,
+      legend: {
+        type: 'proportion',
+        labels: [100, 500]
+      }
+    },
+    {
+      id: 'custom',
+      title: 'Single Layer',
+      visible: true,
+      legend: {
+        children: CUSTOM_CHILDREN
+      }
+    }
+  ];
+  const Widget = (props) => getMaterialUIContext(<LegendWidgetUI {...props} />);
+
+  test('single legend', () => {
+    render(<Widget layers={[DATA[0]]}></Widget>);
+    expect(screen.queryByText('Layers')).not.toBeInTheDocument();
+  });
+
+  test('multiple legends', () => {
+    render(<Widget layers={DATA}></Widget>);
+    expect(screen.queryByText('Layers')).toBeInTheDocument();
+  });
+
+  test('Category legend', () => {
+    render(<Widget layers={[DATA[0]]}></Widget>);
+    expect(screen.getByTestId('categories-legend')).toBeInTheDocument();
+  });
+
+  test('Icon legend', () => {
+    render(<Widget layers={[DATA[1]]}></Widget>);
+    expect(screen.getByTestId('icon-legend')).toBeInTheDocument();
+  });
+
+  test('Bins legend', () => {
+    render(<Widget layers={[DATA[2]]}></Widget>);
+    expect(screen.getByTestId('ramp-legend')).toBeInTheDocument();
+  });
+
+  test('Continuous legend', () => {
+    render(<Widget layers={[DATA[3]]}></Widget>);
+    expect(screen.getByTestId('ramp-legend')).toBeInTheDocument();
+  });
+
+  test('Proportion legend', () => {
+    render(<Widget layers={[DATA[4]]}></Widget>);
+    expect(screen.getByTestId('proportion-legend')).toBeInTheDocument();
+  });
+
+  test('Custom legend', () => {
+    render(<Widget layers={[DATA[5]]}></Widget>);
+    expect(screen.getByText('Legend custom')).toBeInTheDocument();
+  });
+});

packages/react-ui/package.json

@@ -68,7 +68,8 @@
     "jest": "^26.6.3",
     "react-redux": "^7.2.2",
     "webpack": "^5.24.2",
-    "webpack-cli": "^4.5.0"
+    "webpack-cli": "^4.5.0",
+    "cartocolor": "^4.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.9"

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

@@ -4,6 +4,7 @@ import CategoryWidgetUI from './widgets/CategoryWidgetUI';
 import FormulaWidgetUI from './widgets/FormulaWidgetUI';
 import HistogramWidgetUI from './widgets/HistogramWidgetUI';
 import PieWidgetUI from './widgets/PieWidgetUI';
+import LegendWidgetUI, { LEGEND_TYPES } from './widgets/legend/LegendWidgetUI';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI';
 
 export {
@@ -13,5 +14,7 @@ export {
   FormulaWidgetUI,
   HistogramWidgetUI,
   PieWidgetUI,
-  ScatterPlotWidgetUI
+  ScatterPlotWidgetUI,
+  LegendWidgetUI,
+  LEGEND_TYPES,
 };

packages/react-ui/src/index.js

@@ -4,6 +4,7 @@ import CategoryWidgetUI from './widgets/CategoryWidgetUI';
 import FormulaWidgetUI from './widgets/FormulaWidgetUI';
 import HistogramWidgetUI from './widgets/HistogramWidgetUI';
 import PieWidgetUI from './widgets/PieWidgetUI';
+import LegendWidgetUI, { LEGEND_TYPES } from './widgets/legend/LegendWidgetUI';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI';
 
 export {
@@ -13,5 +14,7 @@ export {
   FormulaWidgetUI,
   HistogramWidgetUI,
   PieWidgetUI,
-  ScatterPlotWidgetUI
+  ScatterPlotWidgetUI,
+  LegendWidgetUI,
+  LEGEND_TYPES
 };

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

@@ -1,61 +1,92 @@
 export type WrapperWidgetUI = {
-  title: string,
-  isLoading?: boolean,
-  expandable?: boolean,
-  actions?: { id: string, name: string, icon: React.ReactElement, action: Function }[],
-  options?: { id: string, name: string, action: Function }[],
-  children?: React.ReactNode
+  title: string;
+  isLoading?: boolean;
+  expandable?: boolean;
+  actions?: { id: string; name: string; icon: React.ReactElement; action: Function }[];
+  options?: { id: string; name: string; action: Function }[];
+  children?: React.ReactNode;
 };
 
-export type CategoryWidgetUIData = { name: string, value: number }[]
+export type CategoryWidgetUIData = { name: string; value: number }[];
 export type CategoryWidgetUI = {
-  data: CategoryWidgetUIData,
-  isLoading?: boolean,
-  formatter?: Function,
-  labels?: object,
-  maxItems?: number,
-  selectedCategories?: string[],
-  onSelectedCategoriesChange?: Function,
-  order?: 'ranking' | 'fixed'
+  data: CategoryWidgetUIData;
+  isLoading?: boolean;
+  formatter?: Function;
+  labels?: object;
+  maxItems?: number;
+  selectedCategories?: string[];
+  onSelectedCategoriesChange?: Function;
+  order?: 'ranking' | 'fixed';
 };
 
-export type FormulaWidgetUIData = string | number | { value: string[] | number[], unit: string };
+export type FormulaWidgetUIData =
+  | string
+  | number
+  | { value: string[] | number[]; unit: string };
 export type FormulaWidgetUI = {
-  data: FormulaWidgetUIData,
-  unitBefore?: boolean,
-  formatter?: Function
-}
+  data: FormulaWidgetUIData;
+  unitBefore?: boolean;
+  formatter?: Function;
+};
 
 export type HistogramWidgetUIData = number[];
 export type HistogramWidgetUI = {
-  data: HistogramWidgetUIData,
-  tooltip?: boolean,
-  tooltipFormatter?: Function,
-  xAxisFormatter?: Function,
-  yAxisFormatter?: Function,
-  dataAxis?: unknown[],
-  name?: string,
-  onSelectedBarsChange?: Function,
-  height?: number
-}
-
-export type PieWidgetUIData = { name: string, value: number }[];
+  data: HistogramWidgetUIData;
+  tooltip?: boolean;
+  tooltipFormatter?: Function;
+  xAxisFormatter?: Function;
+  yAxisFormatter?: Function;
+  dataAxis?: unknown[];
+  name?: string;
+  onSelectedBarsChange?: Function;
+  height?: number;
+};
+
+export type PieWidgetUIData = { name: string; value: number }[];
 export type PieWidgetUI = {
-  name: string,
-  data: PieWidgetUIData,
-  formatter?: Function,
-  tooltipFormatter?: Function,
-  height?: string,
-  colors?: string[],
-  selectedCategories?: string[],
-  onSelectedCategoriesChange?: Function
-}
+  name: string;
+  data: PieWidgetUIData;
+  formatter?: Function;
+  tooltipFormatter?: Function;
+  height?: string;
+  colors?: string[];
+  selectedCategories?: string[];
+  onSelectedCategoriesChange?: Function;
+};
+
+export type Layer = {
+  id: string | number;
+  title: string;
+  switchable: boolean;
+  visible: boolean;
+  legend?: LegendWidgetUIData;
+};
+
+export type LegendWidgetUIData = {
+  type: string;
+  children?: Node,
+  collapsible?: boolean;
+  note?: string;
+  attr?: string;
+  colors?: string[];
+  labels?: (string | number)[];
+  icons?: string[];
+  stats?: {
+    min: number | string;
+    max: number | string;
+  };
+};
+
+export type LegendWidgetUI = {
+  layers: LegendWidgetUIData[];
+  onChangeVisibility: ({ id: string, visible: boolean }) => void;
+};
 
 export type ScatterPlotWidgetUIData = number[][];
 export type ScatterPlotWidgetUI = {
-  name: string,
-  data: ScatterPlotWidgetUIData,
-  xAxisFormatter?: Function,
-  yAxisFormatter?: Function,
-  tooltipFormatter?: Function
-}
+  name: string;
+  data: ScatterPlotWidgetUIData;
+  xAxisFormatter?: Function;
+  yAxisFormatter?: Function;
+  tooltipFormatter?: Function;
+};

packages/react-ui/src/utils/palette.js

@@ -0,0 +1,53 @@
+import * as cartoColors from 'cartocolor';
+
+export const DEFAULT_PALETTE = 'PurpOr';
+export const NULL_COLOR = [204, 204, 204];
+export const OTHERS_COLOR = [119, 119, 119];
+
+export function getPaletteFromCartoColors (name, domainSize) {
+  const palette = cartoColors[name];
+  let paletteIndex = domainSize;
+
+  if (!palette) {
+    throw new Error (`Palette "${name}" not found. Expected a CARTOColors string`)
+  }
+
+  const palettesColorVariants = Object.keys(palette)
+    .filter(p => p !== 'tags')
+    .map(Number);
+
+  const longestPaletteIndex = Math.max(...palettesColorVariants);
+  const smallestPaletteIndex = Math.min(...palettesColorVariants);
+
+  if (!Number.isInteger(domainSize) || domainSize > longestPaletteIndex) {
+    paletteIndex = longestPaletteIndex;
+  } else if (domainSize < smallestPaletteIndex) {
+    paletteIndex = smallestPaletteIndex;
+  }
+
+  let colors = palette[paletteIndex];
+
+  if (palette.tags && palette.tags.includes('qualitative')) {
+    colors = colors.slice(0, -1);
+  }
+
+  return colors;
+}
+
+export function getPalette(colors, domainSize) {
+  if (typeof colors === 'string') {
+    return getPaletteFromCartoColors(colors, domainSize.length)
+  } else {
+    return colors.map((c) => {
+      if (Array.isArray(c)) {
+        return rgbToHex(...c);
+      } else {
+        return c;
+      }
+    });
+  }
+}
+
+export function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}