Add ComparativePieWidgetUI

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Implement ComparativePieWidgetUI [#510](https://github.com/CartoDB/carto-react/pull/510)
 - Fix `executeSQL` through **POST** request [#531](https://github.com/CartoDB/carto-react/pull/531)
 
 ## 1.5

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ComparativePieWidgetUI from '../../src/widgets/comparative/ComparativePieWidgetUI'
+import { getMaterialUIContext, mockEcharts } from './testUtils';
+
+const PIE_DATA_PROPS = {
+  names: ['name 1', 'name 2'],
+  data: [
+    [
+      { name: 'data 1', value: 40 },
+      { name: 'data 2', value: 60 },
+    ],
+    [
+      { name: 'data 1', value: 30 },
+      { name: 'data 2', value: 70 },
+    ],
+  ],
+  labels: [
+    ['label 1', 'label 2'],
+    ['label 1', 'label 2'],
+  ],
+  colors: [
+    ['#6732a8', '#32a852'],
+    ['#a83232', '#ff9900'],
+  ],
+}
+
+describe('ComparativePieWidgetUI', () => {
+  beforeAll(() => {
+    mockEcharts.init();
+  });
+
+  afterAll(() => {
+    mockEcharts.destroy();
+  });
+
+  const Widget = (props) =>
+    getMaterialUIContext(
+      <ComparativePieWidgetUI {...PIE_DATA_PROPS} {...props} />
+    );
+
+  test('renders correctly', () => {
+    render(<Widget />);
+  });
+
+  test('with one selected category', () => {
+    render(<Widget selectedCategories={['data 1']} />);
+  });
+
+  test('rerenders with different selected category', () => {
+    const { rerender } = render(<Widget selectedCategories={[]} />);
+
+    rerender(<Widget selectedCategories={['data 1']} />)
+    rerender(<Widget selectedCategories={['data 2']} />)
+  })
+});

packages/react-ui/__tests__/widgets/testUtils.js

@@ -49,6 +49,7 @@ function getTheme() {
 export const mockEcharts = {
   init() {
     jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => ({
+      dispatchAction: jest.fn(),
       hideLoading: jest.fn(),
       getOption: jest.fn(() => ({
         series: [

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

@@ -22,6 +22,7 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';
 import NoDataAlert from './widgets/NoDataAlert';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
+import ComparativePieWidgetUI from './widgets/comparative/ComparativePieWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
 
@@ -43,6 +44,7 @@ export {
   TableWidgetUI,
   LegendWidgetUI,
   RangeWidgetUI,
+  ComparativePieWidgetUI,
   FeatureSelectionWidgetUI,
   ComparativeFormulaWidgetUI,
   ComparativeCategoryWidgetUI,

packages/react-ui/src/index.js

@@ -24,6 +24,7 @@ import PolygonIcon from './assets/PolygonIcon';
 import RectangleIcon from './assets/RectangleIcon';
 import LassoIcon from './assets/LassoIcon';
 import CircleIcon from './assets/CircleIcon';
+import ComparativePieWidgetUI from './widgets/comparative/ComparativePieWidgetUI';
 
 const featureSelectionIcons = {
   CursorIcon,
@@ -48,6 +49,7 @@ export {
   TableWidgetUI,
   LegendWidgetUI,
   RangeWidgetUI,
+  ComparativePieWidgetUI,
   ComparativeFormulaWidgetUI,
   ComparativeCategoryWidgetUI,
   LEGEND_TYPES,

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

@@ -248,3 +248,21 @@ export type ComparativeCategoryWidgetUI = {
   onSelectedCategoriesChange?: (categories: string[]) => any;
   formatter?: (v: any) => string;
 };
+
+export type PieData = {
+  name: string;
+  value: number;
+};
+
+export type ComparativePieWidgetUIProps = {
+  names: string[];
+  data: PieData[][];
+  labels?: string[][];
+  colors?: string[][];
+  height?: string;
+  animation?: boolean;
+  formatter?: (v: number) => string;
+  tooltipFormatter?: (v: any) => string;
+  selectedCategories?: string[];
+  onCategorySelected?: (categories: string[]) => any;
+};