feat(react-chart): add palette plugin (#1408)

Author: Krijovnick

packages/dx-chart-core/src/index.js

@@ -5,5 +5,5 @@ export * from './plugins/series/computeds';
 export * from './utils/scale';
 export * from './constants';
 export * from './plugins/stack/computeds';
-export * from './plugins/theme-manager/computeds';
+export * from './plugins/palette/computeds';
 export * from './plugins/chart/computeds';

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

@@ -0,0 +1,5 @@
+import { scaleOrdinal } from 'd3-scale';
+
+export const palette = (series, scheme) => scaleOrdinal()
+  .domain(series.map(({ uniqueName }) => uniqueName))
+  .range(scheme);

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

@@ -0,0 +1,7 @@
+import { palette } from './computeds';
+
+describe('Palette', () => {
+  it('should return palette series', () => {
+    expect(palette(Array.from({ length: 6 }).map(() => ({})), [])).toEqual(expect.any(Function));
+  });
+});

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

@@ -61,7 +61,7 @@ export const pieAttributes = (
   const width = Math.max.apply(null, xScale.range());
   const height = Math.max.apply(null, yScale.range());
   const radius = Math.min(width, height) / 2;
-  const pieData = pie().value(d => d[valueField])(data);
+  const pieData = pie().sort(null).value(d => d[valueField])(data);
 
   return pieData.map(({
     startAngle, endAngle, value, data: itemData,

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

@@ -44,6 +44,7 @@ jest.mock('d3-shape', () => {
     value: jest.fn(func => data => data.map(d => ({
       startAngle: func(d), endAngle: func(d), value: 'value', data: d,
     }))),
+    sort: jest.fn().mockReturnThis(),
   };
 
   return {

packages/dx-chart-core/src/plugins/theme-manager/computeds.js

@@ -1,4 +1,23 @@
-import { Chart as ChartBase, withComponents } from '@devexpress/dx-react-chart';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Chart as ChartBase, withComponents, Palette } from '@devexpress/dx-react-chart';
 import { Root } from './templates/layout';
 
-export const Chart = withComponents({ Root })(ChartBase);
+const palette = ['#0070ff', '#d72e3d', '#249d3d', '#ffb90c', '#1698af', '#616a72'];
+
+const ChartWithPalette = ({ children, ...props }) => (
+  <ChartBase
+    {...props}
+  >
+    <Palette scheme={palette} />
+    {children}
+  </ChartBase>
+);
+
+ChartWithPalette.components = ChartBase.components;
+
+ChartWithPalette.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const Chart = withComponents({ Root })(ChartWithPalette);

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

@@ -35,6 +35,7 @@
     "core-js": "^2.5.7",
     "d3-format": "^1.3.2",
     "d3-scale": "^2.1.2",
+    "d3-scale-chromatic": "^1.3.3",
     "d3-shape": "^1.2.2",
     "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",

packages/dx-react-chart-bootstrap4/src/chart.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Card } from 'reactstrap';
+import {
+  Chart,
+  PieSeries,
+} from '@devexpress/dx-react-chart-bootstrap4';
+import {
+  schemeCategory10,
+  schemeAccent,
+  schemeDark2,
+  schemePaired,
+  schemePastel1,
+  schemePastel2,
+  schemeSet1,
+  schemeSet2,
+  schemeSet3,
+} from 'd3-scale-chromatic';
+
+import { Scale, Palette } from '@devexpress/dx-react-chart';
+
+const schemeCollection = [
+  schemeCategory10,
+  schemeAccent,
+  schemeDark2,
+  schemePaired,
+  schemePastel1,
+  schemePastel2,
+  schemeSet1,
+  schemeSet2,
+  schemeSet3,
+];
+
+const data = [];
+for (let i = 0; i < 15; i += 1) {
+  data.push({ category: `item${i}`, val: 1 });
+}
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data,
+      scheme: schemeCollection[0],
+    };
+
+    this.changeScheme = this.changeScheme.bind(this);
+  }
+
+  changeScheme(e) {
+    this.setState({ scheme: schemeCollection[e.target.value] });
+  }
+
+  render() {
+    const { data: chartData, scheme } = this.state;
+
+    return (
+      <Card>
+        <Chart
+          data={chartData}
+        >
+          <PieSeries
+            valueField="val"
+            argumentField="category"
+          />
+          <Scale />
+          <Palette scheme={scheme} />
+        </Chart>
+        <div className="d-flex justify-content-center mt-3">
+          {scheme.map(color => <div key={color} style={{ width: '40px', height: '40px', backgroundColor: color }} />)}
+        </div>
+        <div className="pb-5 pl-5 w-200" style={{ width: '200px' }}>
+          <h5>Scheme</h5>
+          <select className="custom-select" onChange={this.changeScheme}>
+            <option defaultValue value={0}>schemeCategory10</option>
+            <option value={1}>schemeAccent</option>
+            <option value={2}>schemeDark2</option>
+            <option value={3}>schemePaired</option>
+            <option value={4}>schemePastel1</option>
+            <option value={5}>schemePastel2</option>
+            <option value={6}>schemeSet1</option>
+            <option value={7}>schemeSet2</option>
+            <option value={8}>schemeSet3</option>
+          </select>
+        </div>
+      </Card>
+    );
+  }
+}

packages/dx-react-chart-demos/package-lock.json

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { setupConsole } from '@devexpress/dx-testing';
+import Demo from './theme';
+
+setupConsole();
+
+Element.prototype.getBBox = () => {};
+jest.spyOn(Element.prototype, 'getBBox').mockImplementation(() => ({
+  x: 0,
+  y: 0,
+  width: 800,
+  height: 600,
+}));
+
+window.fetch = jest.fn().mockImplementation(() => new Promise(() => {}));
+
+it('should not fail', () => {
+  expect(() => { mount(<Demo />); })
+    .not.toThrow();
+});

packages/dx-react-chart-demos/package.json

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import Paper from '@material-ui/core/Paper';
+import {
+  Chart,
+  PieSeries,
+} from '@devexpress/dx-react-chart-material-ui';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import FormControl from '@material-ui/core/FormControl';
+import {
+  schemeCategory10,
+  schemeAccent,
+  schemeDark2,
+  schemePaired,
+  schemePastel1,
+  schemePastel2,
+  schemeSet1,
+  schemeSet2,
+  schemeSet3,
+} from 'd3-scale-chromatic';
+
+import { Scale, Palette } from '@devexpress/dx-react-chart';
+
+const schemeCollection = [
+  schemeCategory10,
+  schemeAccent,
+  schemeDark2,
+  schemePaired,
+  schemePastel1,
+  schemePastel2,
+  schemeSet1,
+  schemeSet2,
+  schemeSet3,
+];
+
+const demoStyles = theme => ({
+  typography: {
+    marginTop: theme.spacing.unit * 0,
+    marginBottom: theme.spacing.unit,
+  },
+  div: {
+    width: '200px',
+    marginLeft: '50px',
+    paddingBottom: '30px',
+  },
+  item: {
+    width: '40px',
+    height: '40px',
+  },
+  schemeConteiner: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: theme.spacing.unit,
+  },
+});
+
+const data = [];
+for (let i = 0; i < 15; i += 1) {
+  data.push({ category: `item${i}`, val: 1 });
+}
+
+class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data,
+      scheme: schemeCollection[0],
+    };
+
+    this.changeScheme = this.changeScheme.bind(this);
+  }
+
+  changeScheme(e) {
+    this.setState({ scheme: schemeCollection[e.target.value] });
+  }
+
+  render() {
+    const { data: chartData, scheme } = this.state;
+    const { classes } = this.props;
+
+    return (
+      <Paper>
+        <Chart
+          data={chartData}
+        >
+          <PieSeries
+            valueField="val"
+            argumentField="category"
+          />
+          <Scale />
+          <Palette scheme={scheme} />
+        </Chart>
+        <div className={classes.schemeConteiner}>
+          {scheme.map(color => (
+            <div
+              key={color}
+              className={classes.item}
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+        <div className={classes.div}>
+          <Typography component="h5" variant="headline" className={classes.typography}>Scheme</Typography>
+          <FormControl>
+            <NativeSelect onChange={this.changeScheme} defaultValue={0}>
+              <option value={0}>schemeCategory10</option>
+              <option value={1}>schemeAccent</option>
+              <option value={2}>schemeDark2</option>
+              <option value={3}>schemePaired</option>
+              <option value={4}>schemePastel1</option>
+              <option value={5}>schemePastel2</option>
+              <option value={6}>schemeSet1</option>
+              <option value={7}>schemeSet2</option>
+              <option value={8}>schemeSet3</option>
+            </NativeSelect>
+          </FormControl>
+        </div>
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(demoStyles, { name: 'Demo' })(Demo);

packages/dx-react-chart-demos/src/demo-sources/chart-basic/bootstrap4/theme.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { setupConsole } from '@devexpress/dx-testing';
+import Demo from './theme';
+
+setupConsole();
+
+Element.prototype.getBBox = () => {};
+jest.spyOn(Element.prototype, 'getBBox').mockImplementation(() => ({
+  x: 0,
+  y: 0,
+  width: 800,
+  height: 600,
+}));
+
+window.fetch = jest.fn().mockImplementation(() => new Promise(() => {}));
+
+it('should not fail', () => {
+  expect(() => { mount(<Demo />); })
+    .not.toThrow();
+});