Skip to content

Commit

Permalink
Add new ComparativePieWidgetUI (#510)
Browse files Browse the repository at this point in the history
  • Loading branch information
juandjara authored Nov 25, 2022
1 parent 00bfd8e commit 2ca036d
Showing 8 changed files with 432 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
56 changes: 56 additions & 0 deletions packages/react-ui/__tests__/widgets/ComparativePieWidgetUI.test.js
Original file line number Diff line number Diff line change
@@ -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']} />)
})
});
1 change: 1 addition & 0 deletions packages/react-ui/__tests__/widgets/testUtils.js
Original file line number Diff line number Diff line change
@@ -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: [
2 changes: 2 additions & 0 deletions packages/react-ui/src/index.d.ts
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 2 additions & 0 deletions packages/react-ui/src/index.js
Original file line number Diff line number Diff line change
@@ -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,
18 changes: 18 additions & 0 deletions packages/react-ui/src/types.d.ts
Original file line number Diff line number Diff line change
@@ -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;
};
Loading

0 comments on commit 2ca036d

Please sign in to comment.