Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@devexpress/dx-react-chart

Package Overview
Dependencies
Maintainers
24
Versions
74
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devexpress/dx-react-chart - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

66

dist/dx-react-chart.d.ts

@@ -21,16 +21,2 @@ import * as React from 'react';

export namespace AreaSeries {
/** Describes properties passed to a component that renders a series point. */
export interface PointProps {
/** The point's x coordinate. */
x: number;
/** The point's y coordinate. */
y: number;
/** The point's path(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d). */
d: string;
/** The point's value. */
value: number;
}
}
export interface AreaSeriesProps {

@@ -47,8 +33,4 @@ /** A series name. */

stack?: string;
/** Point options. */
point?: { size : number };
/** A component that renders the series. */
seriesComponent: React.ComponentType<AreaSeries.SeriesProps>;
/** A component that renders a series point. */
pointComponent: React.ComponentType<AreaSeries.PointProps>;
}

@@ -299,16 +281,2 @@

export namespace LineSeries {
/** Describes properties passed to a component that renders a point. */
export interface PointProps {
/** The point's x coordinate. */
x: number;
/** The point's y coordinate. */
y: number;
/** The point's path(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d). */
d: string;
/** The point's value. */
value: number;
}
}
export interface LineSeriesProps {

@@ -325,8 +293,4 @@ /** A series name. */

stack?: string;
/** Point options. */
point?: { size : number };
/** A component that renders the series. */
seriesComponent: React.ComponentType<LineSeries.SeriesProps>;
/** A component that renders a point. */
pointComponent: React.ComponentType<LineSeries.PointProps>;
}

@@ -391,2 +355,14 @@

export namespace ScatterSeries {
/** Describes properties passed to a component that renders the series. */
export interface SeriesProps {
/** A component that renders a series point. */
pointComponent: React.ComponentType<ScatterSeries.PointProps>;
/** Coordinates of the series' points. */
coordinates: Array<{ x: number, y: number }>;
/** Point options. */
point?: { size : number };
}
}
export interface ScatterSeriesProps {

@@ -428,16 +404,2 @@ /** A series name. */

export namespace SplineSeries {
/** Describes properties passed to a component that renders the point. */
export interface PointProps {
/** The point's x coordinate. */
x: number;
/** The point's y coordinate. */
y: number;
/** The point's path(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d). */
d: string;
/** The point's value. */
value: number;
}
}
export interface SplineSeriesProps {

@@ -454,8 +416,4 @@ /** A series name. */

stack?: string;
/** Point options. */
point?: { size : number };
/** A component that renders the series. */
seriesComponent: React.ComponentType<SplineSeries.SeriesProps>;
/** A component that renders a series point. */
pointComponent: React.ComponentType<SplineSeries.PointProps>;
}

@@ -462,0 +420,0 @@

453

dist/dx-react-chart.es.js
/**
* Bundle of @devexpress/dx-react-chart
* Generated: 2018-08-21
* Version: 1.6.1
* Generated: 2018-08-23
* Version: 1.7.0
* License: https://js.devexpress.com/Licensing

@@ -11,3 +11,3 @@ */

import { Action, Getter, Plugin, PluginHost, Sizer, Template, TemplateConnector, TemplatePlaceholder, createStateHelper } from '@devexpress/dx-react-core';
import { BOTTOM, HORIZONTAL, LEFT, RIGHT, TOP, axesData, axisCoordinates, axisName, bBoxes, barPointAttributes, checkZeroStart, coordinates, domains, findSeriesByName, lineAttributes, palette, pieAttributes, pointAttributes, prepareData, processData, seriesData, seriesWithStacks, stacks, xyScales } from '@devexpress/dx-chart-core';
import { BOTTOM, HORIZONTAL, LEFT, RIGHT, TOP, axesData, axisCoordinates, axisName, bBoxes, barCoordinates, checkZeroStart, coordinates, dArea, dBar, dLine, dSpline, domains, findSeriesByName, palette, pieAttributes, pointAttributes, prepareData, processData, seriesData, seriesWithStacks, stacks, xyScales } from '@devexpress/dx-chart-core';
import { stackOffsetDiverging, stackOrderNone } from 'd3-shape';

@@ -297,5 +297,5 @@

ChartCore.propTypes = {
process.env.NODE_ENV !== "production" ? ChartCore.propTypes = {
data: array.isRequired
};
} : void 0;

@@ -383,5 +383,5 @@ var AxesLayout = function AxesLayout() {

SpaceFillingRects.propTypes = {
process.env.NODE_ENV !== "production" ? SpaceFillingRects.propTypes = {
placeholders: arrayOf(string).isRequired
};
} : void 0;

@@ -448,7 +448,7 @@ var Pane = function (_React$PureComponent) {

Pane.propTypes = {
process.env.NODE_ENV !== "production" ? Pane.propTypes = {
changeBBox: func.isRequired,
width: number.isRequired,
height: number.isRequired
};
} : void 0;

@@ -557,7 +557,7 @@ /* eslint-disable-next-line react/prefer-stateless-function */

LayoutManager.propTypes = {
process.env.NODE_ENV !== "production" ? LayoutManager.propTypes = {
width: number,
height: number.isRequired,
rootComponent: func.isRequired
};
} : void 0;

@@ -620,2 +620,9 @@ LayoutManager.defaultProps = {

};
var pieThemeComputing = function pieThemeComputing(_ref2) {
var domains$$1 = _ref2.domains,
argumentAxisName = _ref2.argumentAxisName;
return palette(domains$$1[argumentAxisName].domain.map(function (uniqueName) {
return { uniqueName: uniqueName };
}));
};

@@ -626,3 +633,4 @@ var ThemeManager = function ThemeManager() {

{ name: 'ThemeManager' },
createElement(Getter, { name: 'series', computed: themeComputing })
createElement(Getter, { name: 'colorDomain', computed: themeComputing }),
createElement(Getter, { name: 'pieColorDomain', computed: pieThemeComputing })
);

@@ -672,3 +680,3 @@ };

}(PureComponent);
Chart.propTypes = {
process.env.NODE_ENV !== "production" ? Chart.propTypes = {
data: array.isRequired,

@@ -679,3 +687,3 @@ rootComponent: func.isRequired,

children: node
};
} : void 0;

@@ -718,13 +726,19 @@ Chart.defaultProps = {

function (_ref) {
var series = _ref.series;
var series = _ref.series,
colorDomain = _ref.colorDomain;
return createElement(
Root,
{ name: 'legend-' + placeholder },
series.map(function (_ref2) {
var name = _ref2.name,
themeColor = _ref2.themeColor;
colorDomain.domain().map(function (domainName) {
var _series$find = series.find(function (_ref2) {
var uniqueName = _ref2.uniqueName;
return uniqueName === domainName;
}),
name = _series$find.name,
color = _series$find.color;
return createElement(
Item,
{ key: name + themeColor },
createElement(Marker, { name: name, themeColor: themeColor }),
{ key: domainName },
createElement(Marker, { name: name, color: color || colorDomain(domainName) }),
createElement(Label, { text: name })

@@ -743,3 +757,3 @@ );

Legend.propTypes = {
process.env.NODE_ENV !== "production" ? Legend.propTypes = {
markerComponent: func.isRequired,

@@ -750,3 +764,3 @@ labelComponent: func.isRequired,

position: string
};
} : void 0;

@@ -790,7 +804,7 @@ Legend.defaultProps = {

Title.propTypes = {
process.env.NODE_ENV !== "production" ? Title.propTypes = {
textComponent: func.isRequired,
text: string.isRequired,
position: string
};
} : void 0;

@@ -840,6 +854,6 @@ Title.defaultProps = {

Stack.propTypes = {
process.env.NODE_ENV !== "production" ? Stack.propTypes = {
offset: func,
order: func
};
} : void 0;

@@ -851,3 +865,3 @@ Stack.defaultProps = {

var withSeriesPlugin = function withSeriesPlugin(Path, Point, pluginName, pathType, processLine, processPoint, extraOptions) {
var withSeriesPlugin = function withSeriesPlugin(Series, pluginName, pathType, calculateCoordinates) {
var Component$$1 = function (_React$PureComponent) {

@@ -870,10 +884,19 @@ inherits(Component$$1, _React$PureComponent);

stackProp = _props.stack,
restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack']);
color = _props.color,
groupWidth = _props.groupWidth,
restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack', 'color', 'groupWidth']);
var uniqueName = Symbol(name);
var symbolName = Symbol(name);
var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
var series = _ref.series;
return seriesData(series, {
valueField: valueField, argumentField: argumentField, name: name, uniqueName: uniqueName, axisName: axisName$$1, stack: stackProp
valueField: valueField,
argumentField: argumentField,
name: name,
symbolName: symbolName,
axisName: axisName$$1,
stack: stackProp,
color: color,
uniqueName: name
});

@@ -904,27 +927,19 @@ };

argumentAxisName = _ref3.argumentAxisName,
layouts = _ref3.layouts;
layouts = _ref3.layouts,
colorDomain = _ref3.colorDomain,
pieColorDomain = _ref3.pieColorDomain;
var _findSeriesByName = findSeriesByName(uniqueName, series),
var _findSeriesByName = findSeriesByName(symbolName, series),
stack = _findSeriesByName.stack,
themeColor = _findSeriesByName.themeColor;
uniqueName = _findSeriesByName.uniqueName;
var options = extraOptions(_extends({}, restProps));
var scales = xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane, stacks$$1, options);
var coord = coordinates(data, scales, argumentField, valueField, name);
var pointParameters = processPoint(scales, options, stack);
return createElement(
Fragment,
null,
createElement(Path, _extends({
themeColor: themeColor,
coordinates: coord
}, processLine(pathType, scales), restProps)),
coord.map(function (item) {
return createElement(Point, _extends({
themeColor: themeColor,
key: item.id.toString(),
value: item.value
}, pointParameters(item), restProps));
})
);
var scales = xyScales(domains$$1[argumentAxisName], domains$$1[axisName$$1], layouts.pane, groupWidth);
var calculatedCoordinates = calculateCoordinates(data, scales, argumentField, valueField, name, stack, stacks$$1, restProps);
return createElement(Series, _extends({
uniqueName: uniqueName,
colorDomain: pluginName === 'PieSeries' ? pieColorDomain : colorDomain,
coordinates: calculatedCoordinates,
color: color
}, restProps));
}

@@ -939,3 +954,3 @@ )

Component$$1.propTypes = {
process.env.NODE_ENV !== "production" ? Component$$1.propTypes = {
name: string,

@@ -945,8 +960,12 @@ valueField: string.isRequired,

axisName: string,
stack: string
};
stack: string,
color: string,
groupWidth: number
} : void 0;
Component$$1.defaultProps = {
name: 'defaultSeriesName',
color: undefined,
axisName: undefined,
stack: undefined
stack: undefined,
groupWidth: 0.7
};

@@ -956,31 +975,46 @@ return Component$$1;

var EmptyFunction = function EmptyFunction() {
return null;
var withColor = function withColor(Series) {
var ColorizedSeries = function ColorizedSeries(_ref) {
var colorDomain = _ref.colorDomain,
uniqueName = _ref.uniqueName,
seriesColor = _ref.color,
restProps = objectWithoutProperties(_ref, ['colorDomain', 'uniqueName', 'color']);
var color = colorDomain(uniqueName);
return createElement(Series, _extends({ color: seriesColor || color }, restProps));
};
process.env.NODE_ENV !== "production" ? ColorizedSeries.propTypes = {
color: string,
colorDomain: func.isRequired,
uniqueName: string.isRequired
} : void 0;
ColorizedSeries.defaultProps = {
color: undefined
};
return ColorizedSeries;
};
var Dot = function Dot(_ref) {
var Series = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointComponent']);
coordinates$$1 = props.coordinates,
path = props.path,
barWidth = props.barWidth,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'path', 'barWidth']);
return createElement(Point, restProps);
return coordinates$$1.map(function (item) {
return createElement(Point, _extends({
key: item.id.toString()
}, item, dBar(item), restProps));
});
};
var options = function options(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var _props$barWidth = props.barWidth,
barWidth = _props$barWidth === undefined ? 0.9 : _props$barWidth,
_props$groupWidth = props.groupWidth,
groupWidth = _props$groupWidth === undefined ? 0.7 : _props$groupWidth;
var BarSeries = withSeriesPlugin(withColor(Series), 'BarSeries', 'bar', barCoordinates);
return { barWidth: barWidth, groupWidth: groupWidth };
};
var BarSeries = withSeriesPlugin(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, barPointAttributes, options);
Dot.propTypes = {
process.env.NODE_ENV !== "production" ? Series.propTypes = {
pointComponent: func.isRequired
};
} : void 0;
var Series = function Series(_ref) {
var Series$1 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -990,40 +1024,12 @@ var Path = props.seriesComponent,

return createElement(Path, restProps);
return createElement(Path, _extends({}, restProps, { path: dLine }));
};
var Dot$1 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var LineSeries = withSeriesPlugin(withColor(Series$1), 'LineSeries', 'line', coordinates);
return createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
var options$1 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
return { size: point.size };
};
var LineSeries = withSeriesPlugin(Series, Dot$1, 'LineSeries', 'line', lineAttributes, pointAttributes, options$1);
Series.propTypes = {
process.env.NODE_ENV !== "production" ? Series$1.propTypes = {
seriesComponent: func.isRequired
};
} : void 0;
Dot$1.propTypes = {
pointStyle: object,
pointComponent: func.isRequired
};
Dot$1.defaultProps = {
pointStyle: {}
};
var Series$1 = function Series(_ref) {
var Series$2 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -1033,66 +1039,53 @@ var Path = props.seriesComponent,

return createElement(Path, restProps);
return createElement(Path, _extends({}, restProps, { path: dSpline }));
};
var Dot$2 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var SplineSeries = withSeriesPlugin(withColor(Series$2), 'SplineSeries', 'spline', coordinates);
return createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
var options$2 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
return { size: point.size };
};
var SplineSeries = withSeriesPlugin(Series$1, Dot$2, 'SplineSeries', 'spline', lineAttributes, pointAttributes, options$2);
Series$1.propTypes = {
process.env.NODE_ENV !== "production" ? Series$2.propTypes = {
seriesComponent: func.isRequired
};
} : void 0;
Dot$2.propTypes = {
pointStyle: object,
pointComponent: func.isRequired
};
var Series$3 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
coordinates$$1 = props.coordinates,
_props$point = props.point,
point = _props$point === undefined ? {} : _props$point,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'point']);
Dot$2.defaultProps = {
pointStyle: {}
var getAttributes = pointAttributes(point);
return coordinates$$1.map(function (item) {
return createElement(Point, _extends({
key: item.id.toString()
}, getAttributes(item), item, restProps));
});
};
var EmptyFunction$1 = function EmptyFunction() {
return null;
var BaseSeries = function BaseSeries(_ref2) {
var Path = _ref2.Path,
path = _ref2.path,
props = objectWithoutProperties(_ref2, ['Path', 'path']);
return createElement(Path, props);
};
var Dot$3 = function Dot(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointComponent']);
process.env.NODE_ENV !== "production" ? BaseSeries.propTypes = {
Path: func,
path: func
} : void 0;
return createElement(Point, restProps);
BaseSeries.defaultProps = {
Path: Series$3,
path: null
};
var options$3 = function options(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
var ScatterSeries = withSeriesPlugin(withColor(BaseSeries), 'ScatterSeries', 'scatter', coordinates);
return { size: point.size };
};
ScatterSeries.Path = Series$3;
var ScatterSeries = withSeriesPlugin(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, pointAttributes, options$3);
Dot$3.propTypes = {
process.env.NODE_ENV !== "production" ? Series$3.propTypes = {
pointComponent: func.isRequired
};
} : void 0;
var Series$2 = function Series(_ref) {
var Series$4 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -1102,126 +1095,44 @@ var Path = props.seriesComponent,

return createElement(Path, restProps);
return createElement(Path, _extends({
path: dArea
}, restProps));
};
var Dot$4 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var AreaSeries = withSeriesPlugin(withColor(Series$4), 'AreaSeries', 'area', coordinates);
return createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
process.env.NODE_ENV !== "production" ? Series$4.propTypes = {
seriesComponent: func.isRequired
} : void 0;
var options$4 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
var Series$5 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
coordinates$$1 = props.coordinates,
colorDomain = props.colorDomain,
uniqueName = props.uniqueName,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'colorDomain', 'uniqueName']);
var innerRadius = restProps.innerRadius,
outerRadius = restProps.outerRadius,
pointOptions = objectWithoutProperties(restProps, ['innerRadius', 'outerRadius']);
return { size: point.size };
return coordinates$$1.map(function (item) {
return createElement(Point, _extends({
key: item.id.toString()
}, item, pointOptions, {
color: colorDomain(item.id)
}));
});
};
var AreaSeries = withSeriesPlugin(Series$2, Dot$4, 'AreaSeries', 'area', lineAttributes, pointAttributes, options$4);
var PieSeries = withSeriesPlugin(Series$5, 'PieSeries', 'arc', pieAttributes);
Series$2.propTypes = {
seriesComponent: func.isRequired
};
Dot$4.propTypes = {
pointStyle: object,
process.env.NODE_ENV !== "production" ? Series$5.propTypes = {
style: object,
pointComponent: func.isRequired
};
} : void 0;
Dot$4.defaultProps = {
pointStyle: {}
Series$5.defaultProps = {
style: {}
};
var PieSeries = function (_React$PureComponent) {
inherits(PieSeries, _React$PureComponent);
function PieSeries() {
classCallCheck(this, PieSeries);
return possibleConstructorReturn(this, (PieSeries.__proto__ || Object.getPrototypeOf(PieSeries)).apply(this, arguments));
}
createClass(PieSeries, [{
key: 'render',
value: function render() {
var _props = this.props,
name = _props.name,
innerRadius = _props.innerRadius,
outerRadius = _props.outerRadius,
cx = _props.cx,
cy = _props.cy,
Point = _props.pointComponent,
valueField = _props.valueField,
argumentField = _props.argumentField,
restProps = objectWithoutProperties(_props, ['name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
var series = _ref.series;
return seriesData(series, {
valueField: valueField, argumentField: argumentField, name: name
});
};
return createElement(
Plugin,
{ name: 'PieSeries' },
createElement(Getter, { name: 'series', computed: getSeriesDataComputed }),
createElement(
Template,
{ name: 'series' },
createElement(TemplatePlaceholder, null),
createElement(
TemplateConnector,
null,
function (_ref2) {
var data = _ref2.data,
layouts = _ref2.layouts;
var _layouts$pane = layouts.pane,
widthPane = _layouts$pane.width,
heightPane = _layouts$pane.height;
var arcs = pieAttributes(valueField, data, widthPane, heightPane, innerRadius, outerRadius);
var colors = palette(Array.from(arcs));
return arcs.map(function (item, index) {
return createElement(Point, _extends({
fill: colors[index].themeColor,
key: item.value,
x: cx || widthPane / 2,
y: cy || heightPane / 2,
value: item.value,
d: item.d
}, restProps));
});
}
)
)
);
}
}]);
return PieSeries;
}(PureComponent);
PieSeries.propTypes = {
name: string,
pointComponent: func.isRequired,
innerRadius: number,
outerRadius: number,
cx: number,
cy: number,
valueField: string.isRequired,
argumentField: string.isRequired
};
PieSeries.defaultProps = {
name: 'defaultSeriesName',
innerRadius: 0,
outerRadius: undefined,
cx: undefined,
cy: undefined
};
var Axis = function (_React$Component) {

@@ -1429,3 +1340,3 @@ inherits(Axis, _React$Component);

Axis.propTypes = {
process.env.NODE_ENV !== "production" ? Axis.propTypes = {
name: string,

@@ -1440,3 +1351,3 @@ isArgumentAxis: bool,

indentFromAxis: number
};
} : void 0;

@@ -1516,6 +1427,6 @@ Axis.defaultProps = {

Grid.propTypes = {
process.env.NODE_ENV !== "production" ? Grid.propTypes = {
name: string,
lineComponent: func.isRequired
};
} : void 0;

@@ -1522,0 +1433,0 @@ Grid.defaultProps = {

451

dist/dx-react-chart.umd.js
/**
* Bundle of @devexpress/dx-react-chart
* Generated: 2018-08-21
* Version: 1.6.1
* Generated: 2018-08-23
* Version: 1.7.0
* License: https://js.devexpress.com/Licensing

@@ -296,5 +296,5 @@ */

ChartCore.propTypes = {
process.env.NODE_ENV !== "production" ? ChartCore.propTypes = {
data: PropTypes.array.isRequired
};
} : void 0;

@@ -382,5 +382,5 @@ var AxesLayout = function AxesLayout() {

SpaceFillingRects.propTypes = {
process.env.NODE_ENV !== "production" ? SpaceFillingRects.propTypes = {
placeholders: PropTypes.arrayOf(PropTypes.string).isRequired
};
} : void 0;

@@ -447,7 +447,7 @@ var Pane = function (_React$PureComponent) {

Pane.propTypes = {
process.env.NODE_ENV !== "production" ? Pane.propTypes = {
changeBBox: PropTypes.func.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired
};
} : void 0;

@@ -556,7 +556,7 @@ /* eslint-disable-next-line react/prefer-stateless-function */

LayoutManager.propTypes = {
process.env.NODE_ENV !== "production" ? LayoutManager.propTypes = {
width: PropTypes.number,
height: PropTypes.number.isRequired,
rootComponent: PropTypes.func.isRequired
};
} : void 0;

@@ -619,2 +619,9 @@ LayoutManager.defaultProps = {

};
var pieThemeComputing = function pieThemeComputing(_ref2) {
var domains$$1 = _ref2.domains,
argumentAxisName = _ref2.argumentAxisName;
return dxChartCore.palette(domains$$1[argumentAxisName].domain.map(function (uniqueName) {
return { uniqueName: uniqueName };
}));
};

@@ -625,3 +632,4 @@ var ThemeManager = function ThemeManager() {

{ name: 'ThemeManager' },
React.createElement(dxReactCore.Getter, { name: 'series', computed: themeComputing })
React.createElement(dxReactCore.Getter, { name: 'colorDomain', computed: themeComputing }),
React.createElement(dxReactCore.Getter, { name: 'pieColorDomain', computed: pieThemeComputing })
);

@@ -671,3 +679,3 @@ };

}(React.PureComponent);
Chart.propTypes = {
process.env.NODE_ENV !== "production" ? Chart.propTypes = {
data: PropTypes.array.isRequired,

@@ -678,3 +686,3 @@ rootComponent: PropTypes.func.isRequired,

children: PropTypes.node
};
} : void 0;

@@ -717,13 +725,19 @@ Chart.defaultProps = {

function (_ref) {
var series = _ref.series;
var series = _ref.series,
colorDomain = _ref.colorDomain;
return React.createElement(
Root,
{ name: 'legend-' + placeholder },
series.map(function (_ref2) {
var name = _ref2.name,
themeColor = _ref2.themeColor;
colorDomain.domain().map(function (domainName) {
var _series$find = series.find(function (_ref2) {
var uniqueName = _ref2.uniqueName;
return uniqueName === domainName;
}),
name = _series$find.name,
color = _series$find.color;
return React.createElement(
Item,
{ key: name + themeColor },
React.createElement(Marker, { name: name, themeColor: themeColor }),
{ key: domainName },
React.createElement(Marker, { name: name, color: color || colorDomain(domainName) }),
React.createElement(Label, { text: name })

@@ -742,3 +756,3 @@ );

Legend.propTypes = {
process.env.NODE_ENV !== "production" ? Legend.propTypes = {
markerComponent: PropTypes.func.isRequired,

@@ -749,3 +763,3 @@ labelComponent: PropTypes.func.isRequired,

position: PropTypes.string
};
} : void 0;

@@ -789,7 +803,7 @@ Legend.defaultProps = {

Title.propTypes = {
process.env.NODE_ENV !== "production" ? Title.propTypes = {
textComponent: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
position: PropTypes.string
};
} : void 0;

@@ -839,6 +853,6 @@ Title.defaultProps = {

Stack.propTypes = {
process.env.NODE_ENV !== "production" ? Stack.propTypes = {
offset: PropTypes.func,
order: PropTypes.func
};
} : void 0;

@@ -850,3 +864,3 @@ Stack.defaultProps = {

var withSeriesPlugin = function withSeriesPlugin(Path, Point, pluginName, pathType, processLine, processPoint, extraOptions) {
var withSeriesPlugin = function withSeriesPlugin(Series, pluginName, pathType, calculateCoordinates) {
var Component$$1 = function (_React$PureComponent) {

@@ -869,10 +883,19 @@ inherits(Component$$1, _React$PureComponent);

stackProp = _props.stack,
restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack']);
color = _props.color,
groupWidth = _props.groupWidth,
restProps = objectWithoutProperties(_props, ['name', 'valueField', 'argumentField', 'axisName', 'stack', 'color', 'groupWidth']);
var uniqueName = Symbol(name);
var symbolName = Symbol(name);
var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
var series = _ref.series;
return dxChartCore.seriesData(series, {
valueField: valueField, argumentField: argumentField, name: name, uniqueName: uniqueName, axisName: axisName$$1, stack: stackProp
valueField: valueField,
argumentField: argumentField,
name: name,
symbolName: symbolName,
axisName: axisName$$1,
stack: stackProp,
color: color,
uniqueName: name
});

@@ -903,27 +926,19 @@ };

argumentAxisName = _ref3.argumentAxisName,
layouts = _ref3.layouts;
layouts = _ref3.layouts,
colorDomain = _ref3.colorDomain,
pieColorDomain = _ref3.pieColorDomain;
var _findSeriesByName = dxChartCore.findSeriesByName(uniqueName, series),
var _findSeriesByName = dxChartCore.findSeriesByName(symbolName, series),
stack = _findSeriesByName.stack,
themeColor = _findSeriesByName.themeColor;
uniqueName = _findSeriesByName.uniqueName;
var options = extraOptions(_extends({}, restProps));
var scales = dxChartCore.xyScales(domains$$1, argumentAxisName, axisName$$1, layouts.pane, stacks$$1, options);
var coord = dxChartCore.coordinates(data, scales, argumentField, valueField, name);
var pointParameters = processPoint(scales, options, stack);
return React.createElement(
React.Fragment,
null,
React.createElement(Path, _extends({
themeColor: themeColor,
coordinates: coord
}, processLine(pathType, scales), restProps)),
coord.map(function (item) {
return React.createElement(Point, _extends({
themeColor: themeColor,
key: item.id.toString(),
value: item.value
}, pointParameters(item), restProps));
})
);
var scales = dxChartCore.xyScales(domains$$1[argumentAxisName], domains$$1[axisName$$1], layouts.pane, groupWidth);
var calculatedCoordinates = calculateCoordinates(data, scales, argumentField, valueField, name, stack, stacks$$1, restProps);
return React.createElement(Series, _extends({
uniqueName: uniqueName,
colorDomain: pluginName === 'PieSeries' ? pieColorDomain : colorDomain,
coordinates: calculatedCoordinates,
color: color
}, restProps));
}

@@ -938,3 +953,3 @@ )

Component$$1.propTypes = {
process.env.NODE_ENV !== "production" ? Component$$1.propTypes = {
name: PropTypes.string,

@@ -944,8 +959,12 @@ valueField: PropTypes.string.isRequired,

axisName: PropTypes.string,
stack: PropTypes.string
};
stack: PropTypes.string,
color: PropTypes.string,
groupWidth: PropTypes.number
} : void 0;
Component$$1.defaultProps = {
name: 'defaultSeriesName',
color: undefined,
axisName: undefined,
stack: undefined
stack: undefined,
groupWidth: 0.7
};

@@ -955,31 +974,46 @@ return Component$$1;

var EmptyFunction = function EmptyFunction() {
return null;
var withColor = function withColor(Series) {
var ColorizedSeries = function ColorizedSeries(_ref) {
var colorDomain = _ref.colorDomain,
uniqueName = _ref.uniqueName,
seriesColor = _ref.color,
restProps = objectWithoutProperties(_ref, ['colorDomain', 'uniqueName', 'color']);
var color = colorDomain(uniqueName);
return React.createElement(Series, _extends({ color: seriesColor || color }, restProps));
};
process.env.NODE_ENV !== "production" ? ColorizedSeries.propTypes = {
color: PropTypes.string,
colorDomain: PropTypes.func.isRequired,
uniqueName: PropTypes.string.isRequired
} : void 0;
ColorizedSeries.defaultProps = {
color: undefined
};
return ColorizedSeries;
};
var Dot = function Dot(_ref) {
var Series = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointComponent']);
coordinates$$1 = props.coordinates,
path = props.path,
barWidth = props.barWidth,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'path', 'barWidth']);
return React.createElement(Point, restProps);
return coordinates$$1.map(function (item) {
return React.createElement(Point, _extends({
key: item.id.toString()
}, item, dxChartCore.dBar(item), restProps));
});
};
var options = function options(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var _props$barWidth = props.barWidth,
barWidth = _props$barWidth === undefined ? 0.9 : _props$barWidth,
_props$groupWidth = props.groupWidth,
groupWidth = _props$groupWidth === undefined ? 0.7 : _props$groupWidth;
var BarSeries = withSeriesPlugin(withColor(Series), 'BarSeries', 'bar', dxChartCore.barCoordinates);
return { barWidth: barWidth, groupWidth: groupWidth };
};
var BarSeries = withSeriesPlugin(EmptyFunction, Dot, 'BarSeries', 'bar', EmptyFunction, dxChartCore.barPointAttributes, options);
Dot.propTypes = {
process.env.NODE_ENV !== "production" ? Series.propTypes = {
pointComponent: PropTypes.func.isRequired
};
} : void 0;
var Series = function Series(_ref) {
var Series$1 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -989,40 +1023,12 @@ var Path = props.seriesComponent,

return React.createElement(Path, restProps);
return React.createElement(Path, _extends({}, restProps, { path: dxChartCore.dLine }));
};
var Dot$1 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var LineSeries = withSeriesPlugin(withColor(Series$1), 'LineSeries', 'line', dxChartCore.coordinates);
return React.createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
var options$1 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
return { size: point.size };
};
var LineSeries = withSeriesPlugin(Series, Dot$1, 'LineSeries', 'line', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$1);
Series.propTypes = {
process.env.NODE_ENV !== "production" ? Series$1.propTypes = {
seriesComponent: PropTypes.func.isRequired
};
} : void 0;
Dot$1.propTypes = {
pointStyle: PropTypes.object,
pointComponent: PropTypes.func.isRequired
};
Dot$1.defaultProps = {
pointStyle: {}
};
var Series$1 = function Series(_ref) {
var Series$2 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -1032,66 +1038,53 @@ var Path = props.seriesComponent,

return React.createElement(Path, restProps);
return React.createElement(Path, _extends({}, restProps, { path: dxChartCore.dSpline }));
};
var Dot$2 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var SplineSeries = withSeriesPlugin(withColor(Series$2), 'SplineSeries', 'spline', dxChartCore.coordinates);
return React.createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
var options$2 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
return { size: point.size };
};
var SplineSeries = withSeriesPlugin(Series$1, Dot$2, 'SplineSeries', 'spline', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$2);
Series$1.propTypes = {
process.env.NODE_ENV !== "production" ? Series$2.propTypes = {
seriesComponent: PropTypes.func.isRequired
};
} : void 0;
Dot$2.propTypes = {
pointStyle: PropTypes.object,
pointComponent: PropTypes.func.isRequired
};
var Series$3 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
coordinates$$1 = props.coordinates,
_props$point = props.point,
point = _props$point === undefined ? {} : _props$point,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'point']);
Dot$2.defaultProps = {
pointStyle: {}
var getAttributes = dxChartCore.pointAttributes(point);
return coordinates$$1.map(function (item) {
return React.createElement(Point, _extends({
key: item.id.toString()
}, getAttributes(item), item, restProps));
});
};
var EmptyFunction$1 = function EmptyFunction() {
return null;
var BaseSeries = function BaseSeries(_ref2) {
var Path = _ref2.Path,
path = _ref2.path,
props = objectWithoutProperties(_ref2, ['Path', 'path']);
return React.createElement(Path, props);
};
var Dot$3 = function Dot(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointComponent']);
process.env.NODE_ENV !== "production" ? BaseSeries.propTypes = {
Path: PropTypes.func,
path: PropTypes.func
} : void 0;
return React.createElement(Point, restProps);
BaseSeries.defaultProps = {
Path: Series$3,
path: null
};
var options$3 = function options(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
var ScatterSeries = withSeriesPlugin(withColor(BaseSeries), 'ScatterSeries', 'scatter', dxChartCore.coordinates);
return { size: point.size };
};
ScatterSeries.Path = Series$3;
var ScatterSeries = withSeriesPlugin(EmptyFunction$1, Dot$3, 'ScatterSeries', 'scatter', EmptyFunction$1, dxChartCore.pointAttributes, options$3);
Dot$3.propTypes = {
process.env.NODE_ENV !== "production" ? Series$3.propTypes = {
pointComponent: PropTypes.func.isRequired
};
} : void 0;
var Series$2 = function Series(_ref) {
var Series$4 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);

@@ -1101,126 +1094,44 @@ var Path = props.seriesComponent,

return React.createElement(Path, restProps);
return React.createElement(Path, _extends({
path: dxChartCore.dArea
}, restProps));
};
var Dot$4 = function Dot(_ref2) {
var props = objectWithoutProperties(_ref2, []);
var pointStyle = props.pointStyle,
Point = props.pointComponent,
restProps = objectWithoutProperties(props, ['pointStyle', 'pointComponent']);
var AreaSeries = withSeriesPlugin(withColor(Series$4), 'AreaSeries', 'area', dxChartCore.coordinates);
return React.createElement(Point, _extends({}, restProps, {
style: pointStyle
}));
};
process.env.NODE_ENV !== "production" ? Series$4.propTypes = {
seriesComponent: PropTypes.func.isRequired
} : void 0;
var options$4 = function options(_ref3) {
var props = objectWithoutProperties(_ref3, []);
var _props$point = props.point,
point = _props$point === undefined ? {} : _props$point;
var Series$5 = function Series(_ref) {
var props = objectWithoutProperties(_ref, []);
var Point = props.pointComponent,
coordinates$$1 = props.coordinates,
colorDomain = props.colorDomain,
uniqueName = props.uniqueName,
restProps = objectWithoutProperties(props, ['pointComponent', 'coordinates', 'colorDomain', 'uniqueName']);
var innerRadius = restProps.innerRadius,
outerRadius = restProps.outerRadius,
pointOptions = objectWithoutProperties(restProps, ['innerRadius', 'outerRadius']);
return { size: point.size };
return coordinates$$1.map(function (item) {
return React.createElement(Point, _extends({
key: item.id.toString()
}, item, pointOptions, {
color: colorDomain(item.id)
}));
});
};
var AreaSeries = withSeriesPlugin(Series$2, Dot$4, 'AreaSeries', 'area', dxChartCore.lineAttributes, dxChartCore.pointAttributes, options$4);
var PieSeries = withSeriesPlugin(Series$5, 'PieSeries', 'arc', dxChartCore.pieAttributes);
Series$2.propTypes = {
seriesComponent: PropTypes.func.isRequired
};
Dot$4.propTypes = {
pointStyle: PropTypes.object,
process.env.NODE_ENV !== "production" ? Series$5.propTypes = {
style: PropTypes.object,
pointComponent: PropTypes.func.isRequired
};
} : void 0;
Dot$4.defaultProps = {
pointStyle: {}
Series$5.defaultProps = {
style: {}
};
var PieSeries = function (_React$PureComponent) {
inherits(PieSeries, _React$PureComponent);
function PieSeries() {
classCallCheck(this, PieSeries);
return possibleConstructorReturn(this, (PieSeries.__proto__ || Object.getPrototypeOf(PieSeries)).apply(this, arguments));
}
createClass(PieSeries, [{
key: 'render',
value: function render() {
var _props = this.props,
name = _props.name,
innerRadius = _props.innerRadius,
outerRadius = _props.outerRadius,
cx = _props.cx,
cy = _props.cy,
Point = _props.pointComponent,
valueField = _props.valueField,
argumentField = _props.argumentField,
restProps = objectWithoutProperties(_props, ['name', 'innerRadius', 'outerRadius', 'cx', 'cy', 'pointComponent', 'valueField', 'argumentField']);
var getSeriesDataComputed = function getSeriesDataComputed(_ref) {
var series = _ref.series;
return dxChartCore.seriesData(series, {
valueField: valueField, argumentField: argumentField, name: name
});
};
return React.createElement(
dxReactCore.Plugin,
{ name: 'PieSeries' },
React.createElement(dxReactCore.Getter, { name: 'series', computed: getSeriesDataComputed }),
React.createElement(
dxReactCore.Template,
{ name: 'series' },
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(
dxReactCore.TemplateConnector,
null,
function (_ref2) {
var data = _ref2.data,
layouts = _ref2.layouts;
var _layouts$pane = layouts.pane,
widthPane = _layouts$pane.width,
heightPane = _layouts$pane.height;
var arcs = dxChartCore.pieAttributes(valueField, data, widthPane, heightPane, innerRadius, outerRadius);
var colors = dxChartCore.palette(Array.from(arcs));
return arcs.map(function (item, index) {
return React.createElement(Point, _extends({
fill: colors[index].themeColor,
key: item.value,
x: cx || widthPane / 2,
y: cy || heightPane / 2,
value: item.value,
d: item.d
}, restProps));
});
}
)
)
);
}
}]);
return PieSeries;
}(React.PureComponent);
PieSeries.propTypes = {
name: PropTypes.string,
pointComponent: PropTypes.func.isRequired,
innerRadius: PropTypes.number,
outerRadius: PropTypes.number,
cx: PropTypes.number,
cy: PropTypes.number,
valueField: PropTypes.string.isRequired,
argumentField: PropTypes.string.isRequired
};
PieSeries.defaultProps = {
name: 'defaultSeriesName',
innerRadius: 0,
outerRadius: undefined,
cx: undefined,
cy: undefined
};
var Axis = function (_React$Component) {

@@ -1428,3 +1339,3 @@ inherits(Axis, _React$Component);

Axis.propTypes = {
process.env.NODE_ENV !== "production" ? Axis.propTypes = {
name: PropTypes.string,

@@ -1439,3 +1350,3 @@ isArgumentAxis: PropTypes.bool,

indentFromAxis: PropTypes.number
};
} : void 0;

@@ -1515,6 +1426,6 @@ Axis.defaultProps = {

Grid.propTypes = {
process.env.NODE_ENV !== "production" ? Grid.propTypes = {
name: PropTypes.string,
lineComponent: PropTypes.func.isRequired
};
} : void 0;

@@ -1521,0 +1432,0 @@ Grid.defaultProps = {

11

package.json
{
"name": "@devexpress/dx-react-chart",
"version": "1.6.1",
"version": "1.7.0",
"description": "Composable plugin-based chart component for React",

@@ -44,3 +44,3 @@ "author": {

"devDependencies": {
"@devexpress/dx-testing": "1.6.1",
"@devexpress/dx-testing": "1.7.0",
"babel-core": "^6.26.3",

@@ -50,2 +50,3 @@ "babel-jest": "^23.4.2",

"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.14",
"babel-plugin-transform-runtime": "^6.23.0",

@@ -75,3 +76,3 @@ "babel-preset-env": "^1.7.0",

"dependencies": {
"@devexpress/dx-chart-core": "1.6.1",
"@devexpress/dx-chart-core": "1.7.0",
"d3-scale": "^2.1.0",

@@ -82,7 +83,7 @@ "d3-shape": "^1.2.0",

"peerDependencies": {
"@devexpress/dx-react-core": "1.6.1",
"@devexpress/dx-react-core": "1.6.0",
"react": ">=16.3.0",
"react-dom": ">=16.3.0"
},
"gitHead": "5c0e7486a4a42dd322394ae49f10e7cb2cbdfc7a"
"gitHead": "1038ebcef3ea8f6be54d11c38755e86bd5490b8f"
}

2

README.md

@@ -9,2 +9,4 @@ # DevExtreme React Chart

|
[Demos](https://devexpress.github.io/devextreme-reactive/react/chart/demos/)
|
[Docs](https://devexpress.github.io/devextreme-reactive/react/chart/docs/)

@@ -11,0 +13,0 @@ 

dist/dx-react-chart.es.js.map

Sorry, the diff of this file is not supported yet

dist/dx-react-chart.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc