feat(react-chart): add legend for pie chart (#1393)

Author: Krijovnick

packages/dx-chart-core/src/plugins/series/computeds.js

@@ -165,3 +165,5 @@ export const seriesData = (series = [], seriesProps) => {
 };
 
 export const checkZeroStart = (fromZero, axisName, pathType) => ({ ...fromZero, [axisName]: fromZero[axisName] || (pathType === 'area' || pathType === 'bar') });
+
+export const getPieItems = (series, domain) => domain.map(uniqueName => ({ uniqueName }));

packages/dx-chart-core/src/plugins/series/computeds.test.js

@@ -17,6 +17,7 @@ import {
   seriesData,
   checkZeroStart,
   barCoordinates,
+  getPieItems,
 } from './computeds';
 
 jest.mock('../../utils/scale', () => ({
@@ -343,3 +344,9 @@ describe('checkZeroStart', () => {
     expect(fromZero).toEqual({ axis1: false });
   });
 });
+
+describe('#getPieItems', () => {
+  it('should return function returns items of series', () => {
+    expect(getPieItems(undefined, ['name1', 'name2'])).toEqual([{ uniqueName: 'name1' }, { uniqueName: 'name2' }]);
+  });
+});

packages/dx-react-chart/src/plugins/legend.jsx

@@ -25,20 +25,19 @@ export class Legend extends React.PureComponent {
           <TemplateConnector>
             {({
               series,
+              domains,
+              argumentAxisName,
               colorDomain,
+              items,
             }) => (
               <Root name={`legend-${placeholder}`}>
-                {colorDomain.domain().map((domainName) => {
-                  const { name, color } = series.find(({
-                    uniqueName,
-                  }) => uniqueName === domainName);
-                  return (
-                    <Item key={domainName}>
-                      <Marker name={name} color={color || colorDomain(domainName)} />
-                      <Label text={name} />
+                {items(series, domains[argumentAxisName].domain)
+                  .map(({ uniqueName, color }) => (
+                    <Item key={uniqueName}>
+                      <Marker name={uniqueName} color={color || colorDomain(uniqueName)} />
+                      <Label text={uniqueName} />
                     </Item>
-                  );
-                })}
+                  ))}
               </Root>
             )}
           </TemplateConnector>

packages/dx-react-chart/src/plugins/legend.test.jsx

@@ -19,10 +19,11 @@ describe('Legend', () => {
   });
   const defaultDeps = {
     getter: {
-      layouts: { pane: {} },
       series: [{ name: 'first', color: 'color', uniqueName: 'first' }],
-      setBBox: jest.fn(),
       colorDomain,
+      domains: { argument: { domain: 'domain' } },
+      argumentAxisName: 'argument',
+      items: series => series,
     },
     template: {
       right: {},

packages/dx-react-chart/src/plugins/pie-series.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { pieAttributes } from '@devexpress/dx-chart-core';
+import { pieAttributes, getPieItems } from '@devexpress/dx-chart-core';
 import { withSeriesPlugin } from '../utils';
 
 const Series = ({
@@ -29,6 +29,7 @@ export const PieSeries = withSeriesPlugin(
   'PieSeries',
   'arc',
   pieAttributes,
+  getPieItems,
 );
 
 

packages/dx-react-chart/src/plugins/theme-manager.jsx

@@ -2,16 +2,13 @@ import * as React from 'react';
 import { Plugin, Getter } from '@devexpress/dx-react-core';
 import { palette } from '@devexpress/dx-chart-core';
 
-const themeComputing = ({ series }) => palette(series);
-const pieThemeComputing = ({
-  domains,
-  argumentAxisName,
-}) => palette(domains[argumentAxisName].domain.map(uniqueName => ({ uniqueName })));
+const themeComputing = ({
+  series, domains, argumentAxisName, items,
+}) => palette(items(series, domains[argumentAxisName].domain));
 
 
 export const ThemeManager = () => (
   <Plugin name="ThemeManager">
     <Getter name="colorDomain" computed={themeComputing} />
-    <Getter name="pieColorDomain" computed={pieThemeComputing} />
   </Plugin>
 );

packages/dx-react-chart/src/plugins/theme-manager.test.jsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { PluginHost } from '@devexpress/dx-react-core';
+import { palette } from '@devexpress/dx-chart-core';
+import { pluginDepsToComponents, getComputedState } from '@devexpress/dx-react-core/test-utils';
+import { ThemeManager } from './theme-manager';
+
+const callbackItems = jest.fn();
+
+jest.mock('@devexpress/dx-chart-core', () => ({
+  palette: jest.fn(),
+}));
+
+describe('Theme Manager', () => {
+  beforeEach(() => {
+    palette.mockImplementation(() => 'palette');
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should provide options', () => {
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents({
+          getter: {
+            series: [{}],
+            domains: { argument: { domain: 'domain' } },
+            argumentAxisName: 'argument',
+            items: callbackItems,
+          },
+        })}
+        <ThemeManager />
+      </PluginHost>
+    ));
+
+    expect(getComputedState(tree).colorDomain).toBe('palette');
+    expect(callbackItems).toBeCalledWith([{}], 'domain');
+  });
+});

packages/dx-react-chart/src/utils/series-helper.jsx

@@ -16,6 +16,7 @@ export const withSeriesPlugin = (
   pluginName,
   pathType,
   calculateCoordinates,
+  getItems = series => series,
 ) => {
   class Component extends React.PureComponent {
     render() {
@@ -48,6 +49,7 @@ export const withSeriesPlugin = (
         <Plugin name={pluginName}>
           <Getter name="series" computed={getSeriesDataComputed} />
           <Getter name="startFromZero" computed={startFromZeroByAxes} />
+          <Getter name="items" value={getItems} />
           <Template name="series">
             <TemplatePlaceholder />
             <TemplateConnector>
@@ -60,7 +62,6 @@ export const withSeriesPlugin = (
                 layouts,
                 scaleExtension,
                 colorDomain,
-                pieColorDomain,
               }) => {
                 const {
                   stack, uniqueName,
@@ -88,7 +89,7 @@ export const withSeriesPlugin = (
                 return (
                   <Series
                     uniqueName={uniqueName}
-                    colorDomain={pluginName === 'PieSeries' ? pieColorDomain : colorDomain}
+                    colorDomain={colorDomain}
                     coordinates={calculatedCoordinates}
                     color={color}
                     {...restProps}

packages/dx-react-chart/src/utils/series-helper.test.jsx

@@ -55,6 +55,7 @@ describe('Base series', () => {
       stacks: ['one', 'two'],
       argumentAxisName: 'argumentAxisName',
       scaleExtension: 'scaleExtension',
+      colorDomain: 'colorDomain',
     },
     template: {
       series: {},
@@ -68,6 +69,7 @@ describe('Base series', () => {
     argumentField: 'argumentField',
     axisName: 'axisName',
     stack: 'stack',
+    color: 'color',
   };
   const TestComponentPath = () => (
     <div>
@@ -95,6 +97,8 @@ describe('Base series', () => {
 
     expect(tree.find(TestComponentPath).props()).toEqual({
       coordinates: coords,
+      color: 'color',
+      colorDomain: 'colorDomain',
       styles: 'styles',
     });
   });