@devexpress/dx-react-chart
Version:
Composable plugin-based chart component for React
873 lines (827 loc) • 87.9 kB
JavaScript
/**
* Bundle of @devexpress/dx-react-chart
* Generated: 2025-05-05
* Version: 4.0.11
* License: https://js.devexpress.com/Licensing
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@devexpress/dx-react-core'), require('@devexpress/dx-chart-core'), require('d3-shape')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@devexpress/dx-react-core', '@devexpress/dx-chart-core', 'd3-shape'], factory) :
(global = global || self, factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactChart = {}), global.React, global.dxReactCore, global.dxChartCore, global.d3Shape));
}(this, (function (exports, React, dxReactCore, dxChartCore, d3Shape) { 'use strict';
if (typeof process === "undefined") { var process = { env: {} }; }
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || from);
}
var series = [];
var BasicData = function (_a) {
var data = _a.data, rotated = _a.rotated;
return (React.createElement(dxReactCore.Plugin, { name: "Basis" },
React.createElement(dxReactCore.Getter, { name: "data", value: data }),
React.createElement(dxReactCore.Getter, { name: "domains", value: dxChartCore.defaultDomains }),
React.createElement(dxReactCore.Getter, { name: "series", value: series }),
React.createElement(dxReactCore.Getter, { name: "rotated", value: rotated })));
};
var getScales = function (_a) {
var domains = _a.domains, ranges = _a.ranges;
return dxChartCore.buildScales(domains, ranges);
};
var getSeries = function (_a) {
var series = _a.series, scales = _a.scales, rotated = _a.rotated;
return dxChartCore.scaleSeriesPoints(series, scales, rotated);
};
var ChartCore = /*#__PURE__*/ (function (_super) {
__extends(ChartCore, _super);
function ChartCore() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChartCore.prototype.render = function () {
return (React.createElement(dxReactCore.Plugin, null,
React.createElement(dxReactCore.Getter, { name: "scales", computed: getScales }),
React.createElement(dxReactCore.Getter, { name: "series", computed: getSeries })));
};
return ChartCore;
}(React.PureComponent));
var AxesLayout = /*#__PURE__*/ (function (_super) {
__extends(AxesLayout, _super);
function AxesLayout() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.ref = React.createRef();
return _this;
}
AxesLayout.prototype.render = function () {
return (React.createElement(dxReactCore.Plugin, null,
React.createElement(dxReactCore.Getter, { name: "centerDivRef", value: this.ref }),
React.createElement(dxReactCore.Template, { name: "canvas" },
React.createElement("div", { id: "center-center", ref: this.ref, style: { display: 'flex', flexDirection: 'column', flexGrow: 1 } },
React.createElement("div", { id: "".concat(dxChartCore.TOP, "-axis-container"), style: { display: 'flex', flexDirection: 'row' } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.TOP, "-").concat(dxChartCore.LEFT, "-axis") }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.TOP, "-axis") }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.TOP, "-").concat(dxChartCore.RIGHT, "-axis") })),
React.createElement("div", { id: "center-axis-container", style: { display: 'flex', flexDirection: 'row', flexGrow: 1 } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.LEFT, "-axis") }),
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.RIGHT, "-axis") })),
React.createElement("div", { id: "".concat(dxChartCore.BOTTOM, "-axis-container"), style: { display: 'flex', flexDirection: 'row' } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.LEFT, "-axis") }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.BOTTOM, "-axis") }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.RIGHT, "-axis") }))))));
};
return AxesLayout;
}(React.PureComponent));
var SpaceFillingRects = /*#__PURE__*/ (function (_super) {
__extends(SpaceFillingRects, _super);
function SpaceFillingRects() {
return _super !== null && _super.apply(this, arguments) || this;
}
SpaceFillingRects.prototype.render = function () {
var placeholders = this.props.placeholders;
return (React.createElement(dxReactCore.Plugin, { name: "SpaceFillingRects" }, placeholders.map(function (name) { return (React.createElement(dxReactCore.Template, { name: name, key: name },
React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var layouts = _a.layouts;
var key = name.slice(name.indexOf('-') + 1);
var width = Object.keys(layouts).reduce(function (prev, cur) {
if (cur.includes(key)) {
return prev + layouts[cur].width;
}
return prev;
}, 0);
return React.createElement("div", { id: name, style: { width: width } });
}))); })));
};
return SpaceFillingRects;
}(React.PureComponent));
var ControllerComponent = /*#__PURE__*/ (function (_super) {
__extends(ControllerComponent, _super);
function ControllerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.isPreviousDataEmpty = true;
_this.readyToRenderSeriesComputed = function (_a) {
var layouts = _a.layouts, centerDivRef = _a.centerDivRef, data = _a.data, axesExist = _a.axesExist;
var isPreviousDataEmpty = _this.isPreviousDataEmpty;
_this.isPreviousDataEmpty = !data.length;
return dxChartCore.isReadyToRenderSeries(layouts, centerDivRef, isPreviousDataEmpty, !!axesExist);
};
return _this;
}
ControllerComponent.prototype.render = function () {
return (React.createElement(dxReactCore.Plugin, { name: "ControllerComponent" },
React.createElement(dxReactCore.Getter, { name: "readyToRenderSeries", computed: this.readyToRenderSeriesComputed })));
};
return ControllerComponent;
}(React.PureComponent));
var EXTRA_PIXELS = 2;
var ClipPath = /*#__PURE__*/ (function (_super) {
__extends(ClipPath, _super);
function ClipPath() {
return _super !== null && _super.apply(this, arguments) || this;
}
ClipPath.prototype.render = function () {
var _a = this.props, id = _a.id, width = _a.width, height = _a.height;
return (React.createElement("defs", null,
React.createElement("clipPath", { id: id },
React.createElement("rect", { x: -EXTRA_PIXELS / 2, y: -EXTRA_PIXELS / 2, width: width + EXTRA_PIXELS, height: height + EXTRA_PIXELS }))));
};
return ClipPath;
}(React.PureComponent));
// It is located in a separate file only for testing purpose -
// it should actually be placed next to PaneLayout.
var UpdatableSizer = /*#__PURE__*/ (function (_super) {
__extends(UpdatableSizer, _super);
function UpdatableSizer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.ref = React.createRef();
return _this;
}
UpdatableSizer.prototype.componentDidUpdate = function () {
this.props.onSizeChange(this.ref.current.getSize());
};
UpdatableSizer.prototype.render = function () {
return React.createElement(dxReactCore.Sizer, __assign({ ref: this.ref }, this.props));
};
return UpdatableSizer;
}(React.PureComponent));
var DIV_STYLE = {
flex: 1, zIndex: 1, position: 'relative', width: '100%',
};
var SVG_STYLE = {
position: 'absolute', left: 0, top: 0, overflow: 'visible',
};
var SizerContainer = function (_a) {
var children = _a.children, forwardedRef = _a.forwardedRef;
return (React.createElement("div", { ref: forwardedRef, style: DIV_STYLE }, children));
};
var numDefs = 0;
var getUniqueId = function () {
numDefs += 1;
return numDefs;
};
var PaneLayout = /*#__PURE__*/ (function (_super) {
__extends(PaneLayout, _super);
function PaneLayout() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.ref = React.createRef();
_this.clipPathId = "clip_path_".concat(getUniqueId());
return _this;
}
PaneLayout.prototype.render = function () {
var _this = this;
return (React.createElement(dxReactCore.Plugin, { name: "PaneLayout" },
React.createElement(dxReactCore.Getter, { name: "rootRef", value: this.ref }),
React.createElement(dxReactCore.Getter, { name: "clipPathId", value: this.clipPathId }),
React.createElement(dxReactCore.Template, { name: "canvas" }, function (params) { return (React.createElement(dxReactCore.TemplateConnector, null, function (_a, _b) {
var layouts = _a.layouts;
var changeBBox = _b.changeBBox;
var _c = layouts.pane, width = _c.width, height = _c.height;
return (React.createElement(UpdatableSizer, { containerComponent: SizerContainer, onSizeChange: function (size) { return changeBBox({ placeholder: 'pane', bBox: size }); } },
React.createElement("svg", __assign({ ref: _this.ref }, params, { width: width, height: height, style: SVG_STYLE }),
React.createElement(ClipPath, { id: _this.clipPathId, width: width, height: height }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "series" }))));
})); })));
};
return PaneLayout;
}(React.PureComponent));
var doGetRanges = function (_a) {
var layouts = _a.layouts, rotated = _a.rotated;
return dxChartCore.getRanges(layouts.pane, rotated);
};
var LayoutManager = /*#__PURE__*/ (function (_super) {
__extends(LayoutManager, _super);
function LayoutManager(props) {
var _this = _super.call(this, props) || this;
_this.state = { bBoxes: { pane: { width: 0, height: 0 } } };
var stateHelper = dxReactCore.createStateHelper(_this);
_this.changeBBox = stateHelper.applyFieldReducer.bind(stateHelper, 'bBoxes', dxChartCore.bBoxes);
return _this;
}
LayoutManager.prototype.render = function () {
var _a = this.props, width = _a.width, height = _a.height, Root = _a.rootComponent, restProps = __rest(_a, ["width", "height", "rootComponent"]);
var stateBBoxes = this.state.bBoxes;
return (React.createElement(dxReactCore.Plugin, null,
React.createElement(dxReactCore.Getter, { name: "layouts", value: stateBBoxes }),
React.createElement(dxReactCore.Getter, { name: "ranges", computed: doGetRanges }),
React.createElement(dxReactCore.Action, { name: "changeBBox", action: this.changeBBox }),
React.createElement(dxReactCore.Template, { name: "root" },
React.createElement(Root, __assign({ width: width, height: height }, restProps),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "canvas" })))));
};
LayoutManager.defaultProps = {
width: 0,
};
return LayoutManager;
}(React.PureComponent));
var ComponentLayout = function () { return (React.createElement(dxReactCore.Plugin, { name: "ComponentLayout" },
React.createElement(dxReactCore.Template, { name: "canvas" },
React.createElement("div", { id: "".concat(dxChartCore.TOP, "-container"), style: { display: 'flex', flexDirection: 'row' } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.TOP, "-").concat(dxChartCore.LEFT) }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: dxChartCore.TOP }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.TOP, "-").concat(dxChartCore.RIGHT) })),
React.createElement("div", { id: "center-container", style: { display: 'flex', flexDirection: 'row', flexGrow: 1 } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: dxChartCore.LEFT }),
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(dxReactCore.TemplatePlaceholder, { name: dxChartCore.RIGHT })),
React.createElement("div", { id: "".concat(dxChartCore.BOTTOM, "-container"), style: { display: 'flex', flexDirection: 'row' } },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.LEFT) }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: dxChartCore.BOTTOM }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.RIGHT) }))))); };
var PaletteBase = /*#__PURE__*/ (function (_super) {
__extends(PaletteBase, _super);
function PaletteBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
PaletteBase.prototype.render = function () {
var scheme = this.props.scheme;
return (React.createElement(dxReactCore.Plugin, { name: "Palette" },
React.createElement(dxReactCore.Getter, { name: "palette", value: scheme })));
};
return PaletteBase;
}(React.PureComponent));
var Palette = PaletteBase;
var Root = /*#__PURE__*/ (function (_super) {
__extends(Root, _super);
function Root() {
return _super !== null && _super.apply(this, arguments) || this;
}
Root.prototype.render = function () {
var _a = this.props, children = _a.children, width = _a.width, height = _a.height, style = _a.style, restProps = __rest(_a, ["children", "width", "height", "style"]);
return (React.createElement("div", __assign({ style: __assign(__assign(__assign({}, style), { height: "".concat(height, "px") }), width ? { width: "".concat(width, "px") } : null) }, restProps), children));
};
return Root;
}(React.PureComponent));
var Label = /*#__PURE__*/ (function (_super) {
__extends(Label, _super);
function Label() {
return _super !== null && _super.apply(this, arguments) || this;
}
Label.prototype.render = function () {
return (React.createElement("text", __assign({}, this.props)));
};
return Label;
}(React.PureComponent));
var scheme = [];
var placeholders = [
"".concat(dxChartCore.TOP, "-").concat(dxChartCore.LEFT),
"".concat(dxChartCore.TOP, "-").concat(dxChartCore.RIGHT),
"".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.LEFT),
"".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.RIGHT),
"".concat(dxChartCore.TOP, "-").concat(dxChartCore.LEFT, "-axis"),
"".concat(dxChartCore.TOP, "-").concat(dxChartCore.RIGHT, "-axis"),
"".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.LEFT, "-axis"),
"".concat(dxChartCore.BOTTOM, "-").concat(dxChartCore.RIGHT, "-axis"),
];
var RawChart = /*#__PURE__*/ (function (_super) {
__extends(RawChart, _super);
function RawChart() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawChart.prototype.render = function () {
var _a = this.props, data = _a.data, width = _a.width, height = _a.height, children = _a.children, rotated = _a.rotated, rootComponent = _a.rootComponent, restProps = __rest(_a, ["data", "width", "height", "children", "rotated", "rootComponent"]);
return ((React.createElement(dxReactCore.PluginHost, null,
React.createElement(BasicData, { data: data, rotated: rotated }),
React.createElement(Palette, { scheme: scheme }),
React.createElement(LayoutManager, __assign({ width: width, height: height, rootComponent: rootComponent }, restProps)),
React.createElement(PaneLayout, null),
React.createElement(AxesLayout, null),
React.createElement(ComponentLayout, null),
React.createElement(SpaceFillingRects, { placeholders: placeholders }),
children,
React.createElement(ControllerComponent, null),
React.createElement(ChartCore, null))));
};
RawChart.defaultProps = {
height: 500,
rotated: false,
};
RawChart.components = {
rootComponent: 'Root',
};
return RawChart;
}(React.PureComponent));
var Chart = dxReactCore.withComponents({ Root: Root })(RawChart);
Chart.Label = Label;
var Marker = /*#__PURE__*/ (function (_super) {
__extends(Marker, _super);
function Marker() {
return _super !== null && _super.apply(this, arguments) || this;
}
Marker.prototype.render = function () {
var _a = this.props, color = _a.color, restProps = __rest(_a, ["color"]);
return (React.createElement("svg", __assign({ fill: color, width: "10", height: "10" }, restProps),
React.createElement("circle", __assign({ r: 5, cx: 5, cy: 5 }, restProps))));
};
return Marker;
}(React.PureComponent));
var RawLegend = /*#__PURE__*/ (function (_super) {
__extends(RawLegend, _super);
function RawLegend() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawLegend.prototype.render = function () {
var _a = this.props, MarkerComponent = _a.markerComponent, Label = _a.labelComponent, Root = _a.rootComponent, Item = _a.itemComponent, position = _a.position, getItems = _a.getItems;
var placeholder = position;
return (React.createElement(dxReactCore.Plugin, { name: "Legend" },
React.createElement(dxReactCore.Template, { name: placeholder },
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(dxReactCore.TemplateConnector, null, function (getters) { return (React.createElement(Root, { name: "legend-".concat(placeholder) }, getItems(getters).map(function (_a) {
var text = _a.text, color = _a.color;
return (React.createElement(Item, { key: text },
React.createElement(MarkerComponent, { name: text, color: color }),
React.createElement(Label, { text: text })));
}))); }))));
};
RawLegend.defaultProps = {
position: 'right',
getItems: function (_a) {
var series = _a.series;
return dxChartCore.getLegendItems(series);
},
};
RawLegend.components = {
rootComponent: 'Root',
itemComponent: 'Item',
markerComponent: 'Marker',
labelComponent: 'Label',
};
return RawLegend;
}(React.PureComponent));
var Legend = dxReactCore.withComponents({ Marker: Marker })(RawLegend);
var TitleBase = /*#__PURE__*/ (function (_super) {
__extends(TitleBase, _super);
function TitleBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
TitleBase.prototype.render = function () {
var _a = this.props, Text = _a.textComponent, text = _a.text, position = _a.position;
var placeholder = position;
return (React.createElement(dxReactCore.Plugin, { name: "Title" },
React.createElement(dxReactCore.Template, { name: placeholder },
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(Text, { text: text }))));
};
TitleBase.components = {
textComponent: 'Text',
};
TitleBase.defaultProps = {
position: 'top',
};
return TitleBase;
}(React.PureComponent));
var Title = TitleBase;
/** @internal */
var declareSeries = function (pluginName, _a) {
var components = _a.components, getPointTransformer = _a.getPointTransformer, createHitTester = _a.createHitTester;
var Component = /*#__PURE__*/ (function (_super) {
__extends(Component, _super);
function Component() {
return _super !== null && _super.apply(this, arguments) || this;
}
Component.prototype.render = function () {
var _a = this.props, name = _a.name, argumentField = _a.argumentField, valueField = _a.valueField, scaleName = _a.scaleName, seriesComponent = _a.seriesComponent, pointComponent = _a.pointComponent, color = _a.color, restProps = __rest(_a, ["name", "argumentField", "valueField", "scaleName", "seriesComponent", "pointComponent", "color"]);
var symbolName = Symbol(name);
var seriesItem = __assign(__assign({ getPointTransformer: getPointTransformer, createHitTester: createHitTester }, this.props), { symbolName: symbolName });
var getSeries = function (_a) {
var series = _a.series, data = _a.data, palette = _a.palette;
return dxChartCore.addSeries(series, data, palette, seriesItem, restProps);
};
var getDomains = function (_a) {
var series = _a.series, domains = _a.domains;
return dxChartCore.extendDomains(domains, dxChartCore.findSeriesByName(symbolName, series));
};
return (React.createElement(dxReactCore.Plugin, { name: pluginName },
React.createElement(dxReactCore.Getter, { name: "series", computed: getSeries }),
React.createElement(dxReactCore.Getter, { name: "domains", computed: getDomains }),
React.createElement(dxReactCore.Template, { name: "series" },
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var series = _a.series, scales = _a.scales, animation = _a.animation, rotated = _a.rotated, layouts = _a.layouts, clipPathId = _a.clipPathId, readyToRenderSeries = _a.readyToRenderSeries;
var pane = layouts.pane;
var currentSeries = dxChartCore.findSeriesByName(symbolName, series);
var currentScales = {
argScale: scales[dxChartCore.ARGUMENT_DOMAIN],
valScale: scales[dxChartCore.getValueDomainName(currentSeries.scaleName)],
};
var Path = currentSeries.seriesComponent;
return (React.createElement(Path, { index: currentSeries.index, pointComponent: currentSeries.pointComponent, coordinates: currentSeries.points, rotated: rotated, state: currentSeries.state, color: currentSeries.color, scales: currentScales, pane: pane, clipPathId: clipPathId, animation: animation, readyToRenderSeries: readyToRenderSeries }));
}))));
};
Component.defaultProps = {
name: 'defaultSeriesName',
};
return Component;
}(React.PureComponent));
Component.components = {};
if (components.Path) {
Component.components.seriesComponent = 'Path';
}
if (components.Point) {
Component.components.pointComponent = 'Point';
}
return dxReactCore.withComponents(components)(Component);
};
/** @internal */
var withPatchedProps = function (patch) { return function (Target) {
var Component = /*#__PURE__*/ (function (_super) {
__extends(Component, _super);
function Component() {
return _super !== null && _super.apply(this, arguments) || this;
}
Component.prototype.render = function () {
var props = patch(this.props);
return React.createElement(Target, __assign({}, props));
};
Component.components = Target.components;
return Component;
}(React.PureComponent));
return Component;
}; };
/** @internal */
var Scale = /*#__PURE__*/ (function (_super) {
__extends(Scale, _super);
function Scale() {
return _super !== null && _super.apply(this, arguments) || this;
}
Scale.prototype.render = function () {
var _a = this.props, name = _a.name, factory = _a.factory, modifyDomain = _a.modifyDomain;
var args = { factory: factory, modifyDomain: modifyDomain };
var getDomains = function (_a) {
var domains = _a.domains;
return dxChartCore.addDomain(domains, name, args);
};
return (React.createElement(dxReactCore.Plugin, { name: "Scale" },
React.createElement(dxReactCore.Getter, { name: "domains", computed: getDomains })));
};
return Scale;
}(React.PureComponent));
var ArgumentScale = withPatchedProps(function (props) { return (__assign(__assign({}, props), { name: dxChartCore.ARGUMENT_DOMAIN })); })(Scale);
var ValueScale = withPatchedProps(function (props) { return (__assign(__assign({}, props), { name: dxChartCore.getValueDomainName(props.name) })); })(Scale);
var getDomains = function (_a) {
var domains = _a.domains, series = _a.series;
return dxChartCore.getStackedDomains(domains, series);
};
var StackBase = /*#__PURE__*/ (function (_super) {
__extends(StackBase, _super);
function StackBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
StackBase.prototype.render = function () {
var _a = this.props, stacks = _a.stacks, offset = _a.offset, order = _a.order;
var params = {
stacks: stacks,
offset: offset,
order: order,
};
var getSeries = function (_a) {
var series = _a.series, data = _a.data;
return dxChartCore.getStackedSeries(series, data, params);
};
return (React.createElement(dxReactCore.Plugin, { name: "Stack" },
React.createElement(dxReactCore.Getter, { name: "series", computed: getSeries }),
React.createElement(dxReactCore.Getter, { name: "domains", computed: getDomains })));
};
StackBase.defaultProps = {
stacks: [],
offset: d3Shape.stackOffsetDiverging,
order: d3Shape.stackOrderNone,
};
return StackBase;
}(React.PureComponent));
var Stack = StackBase;
var AnimationBase = /*#__PURE__*/ (function (_super) {
__extends(AnimationBase, _super);
function AnimationBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
AnimationBase.prototype.render = function () {
var _a = this.props, easing = _a.easing, duration = _a.duration;
var buildAnimationGetter = function () { return dxChartCore.buildAnimation(easing, duration); };
return (React.createElement(dxReactCore.Plugin, { name: "Animation" },
React.createElement(dxReactCore.Getter, { name: "animation", computed: buildAnimationGetter })));
};
AnimationBase.defaultProps = {
easing: dxChartCore.easeOutCubic,
duration: 1000,
};
return AnimationBase;
}(React.PureComponent));
var Animation = AnimationBase;
var withStates = function (states) { return function (Component) {
var ComponentWithStates = /*#__PURE__*/ (function (_super) {
__extends(ComponentWithStates, _super);
function ComponentWithStates() {
return _super !== null && _super.apply(this, arguments) || this;
}
ComponentWithStates.prototype.render = function () {
var _a = this.props, state = _a.state, restProps = __rest(_a, ["state"]);
var stateFunc = state && states[state];
var result = stateFunc ? stateFunc(restProps) : restProps;
return React.isValidElement(result) ? result : React.createElement(Component, __assign({}, result));
};
return ComponentWithStates;
}(React.PureComponent));
return ComponentWithStates;
}; };
var Pattern = /*#__PURE__*/ (function (_super) {
__extends(Pattern, _super);
function Pattern() {
return _super !== null && _super.apply(this, arguments) || this;
}
Pattern.prototype.render = function () {
var _a = this.props, id = _a.id, size = _a.size, color = _a.color, opacity = _a.opacity;
return (React.createElement("defs", null,
React.createElement("pattern", { id: id, width: size, height: size, patternUnits: "userSpaceOnUse" },
React.createElement("rect", { x: 0, y: 0, width: size, height: size, fill: color, opacity: opacity }),
React.createElement("path", {
// tslint:disable-next-line: max-line-length
d: "M ".concat(size / 2, " ").concat(-size / 2, " L ").concat(-size / 2, " ").concat(size / 2, " M 0 ").concat(size, " L ").concat(size, " 0 M ").concat(size * 1.5, " ").concat(size / 2, " L ").concat(size / 2, " ").concat(size * 1.5), strokeWidth: 2, stroke: color }))));
};
Pattern.defaultProps = {
size: 6,
opacity: 0.75,
};
return Pattern;
}(React.PureComponent));
// Function is returned (not PureComponent descendant) because
// result is invoked as function (not as React component).
var withPattern = function (getPatternId, props) { return function (Target) { return function (targetProps) {
var color = targetProps.color, restProps = __rest(targetProps, ["color"]);
var patternId = getPatternId(targetProps);
return (React.createElement(React.Fragment, null,
React.createElement(Target, __assign({ color: "url(#".concat(patternId, ")") }, restProps)),
React.createElement(Pattern, __assign({ id: patternId, color: color }, props))));
}; }; };
var withAnimation = function (processAnimation, getProps, getStartCoordinates, isValuesChanged, getDelay) { return function (Component) {
var ComponentWithAnimation = /*#__PURE__*/ (function (_super) {
__extends(ComponentWithAnimation, _super);
function ComponentWithAnimation(props) {
var _this = _super.call(this, props) || this;
_this.setAttribute = _this.setAttribute.bind(_this);
return _this;
}
ComponentWithAnimation.prototype.setAttribute = function (state) {
this.setState(state);
};
ComponentWithAnimation.prototype.componentDidMount = function () {
var _a = this.props, animation = _a.animation, scales = _a.scales, index = _a.index, readyToRenderSeries = _a.readyToRenderSeries;
if (!readyToRenderSeries) {
return;
}
var props = getProps(this.props);
this.processComponent(animation, { scales: {} }, scales, props, {}, index);
};
ComponentWithAnimation.prototype.componentDidUpdate = function (prevProps) {
var _a = this.props, scales = _a.scales, index = _a.index, animation = _a.animation, readyToRenderSeries = _a.readyToRenderSeries;
if (!readyToRenderSeries) {
return;
}
this.processComponent(animation, prevProps, scales, getProps(this.props), getProps(prevProps), index);
};
ComponentWithAnimation.prototype.processComponent = function (animation, _a, scales, props, prevProps, index) {
var prevScales = _a.scales;
if (!animation) {
this.setAttribute(props);
}
else if (this.animate) {
if (dxChartCore.isScalesChanged(prevScales, scales)) {
this.setAttribute(props);
}
else if (isValuesChanged(prevProps, props)) {
var delay = getDelay ? getDelay(index, false) : 0;
this.animate.update(prevProps, props, delay);
}
}
else {
this.animate = animation(getStartCoordinates(scales, props), props, processAnimation, this.setAttribute, getDelay && getDelay(index, true));
}
};
ComponentWithAnimation.prototype.componentWillUnmount = function () {
return this.animate && this.animate.stop();
};
ComponentWithAnimation.prototype.render = function () {
var _a = this.props, readyToRenderSeries = _a.readyToRenderSeries, restProps = __rest(_a, ["readyToRenderSeries"]);
if (!this.state) {
return null;
}
return (React.createElement(Component, __assign({}, restProps, this.state)));
};
return ComponentWithAnimation;
}(React.PureComponent));
return ComponentWithAnimation;
}; };
var _a;
var RawArea = /*#__PURE__*/ (function (_super) {
__extends(RawArea, _super);
function RawArea() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawArea.prototype.render = function () {
var _a = this.props, path = _a.path, coordinates = _a.coordinates, animation = _a.animation, index = _a.index, state = _a.state, pointComponent = _a.pointComponent, color = _a.color, clipPathId = _a.clipPathId, pane = _a.pane, scales = _a.scales, rotated = _a.rotated, restProps = __rest(_a, ["path", "coordinates", "animation", "index", "state", "pointComponent", "color", "clipPathId", "pane", "scales", "rotated"]);
var dPath = path === undefined ? (rotated ? dxChartCore.dRotateArea : dxChartCore.dArea) : path;
return (React.createElement("path", __assign({ clipPath: "url(#".concat(clipPathId, ")"), d: dPath(coordinates), fill: color, opacity: 0.5 }, restProps)));
};
return RawArea;
}(React.PureComponent));
// It should actually be `withPattern<AreaSeries.PointProps>` but `opacity` is not decleared there.
// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.
var Area = withAnimation(dxChartCore.processAreaAnimation, function (_a) {
var coordinates = _a.coordinates;
return ({ coordinates: coordinates });
}, dxChartCore.getPathStart, dxChartCore.isCoordinatesChanged)(withStates((_a = {},
_a[dxChartCore.HOVERED] = withPattern(function (_a) {
var index = _a.index, color = _a.color;
return "series-".concat(index, "-color-").concat(color, "-hover");
}, { opacity: 0.75 })(RawArea),
_a[dxChartCore.SELECTED] = withPattern(function (_a) {
var index = _a.index, color = _a.color;
return "series-".concat(index, "-color-").concat(color, "-selection");
}, { opacity: 0.5 })(RawArea),
_a))(RawArea));
// tslint:disable-next-line: max-line-length
var AreaSeries = declareSeries('AreaSeries', {
getPointTransformer: dxChartCore.getAreaPointTransformer,
createHitTester: dxChartCore.createAreaHitTester,
components: { Path: Area },
});
/** @internal */
var PointCollection = /*#__PURE__*/ (function (_super) {
__extends(PointCollection, _super);
function PointCollection() {
return _super !== null && _super.apply(this, arguments) || this;
}
PointCollection.prototype.render = function () {
var _a = this.props, pointComponent = _a.pointComponent, coordinates = _a.coordinates, index = _a.index, state = _a.state, clipPathId = _a.clipPathId, restProps = __rest(_a, ["pointComponent", "coordinates", "index", "state", "clipPathId"]) // restProps are used because of animation and scale
;
var Point = pointComponent;
return (coordinates.map(function (point) { return (React.createElement(Point, __assign({ key: String(point.index), seriesIndex: index }, restProps, point))); }));
};
return PointCollection;
}(React.PureComponent));
var _a$1;
var RawBar = /*#__PURE__*/ (function (_super) {
__extends(RawBar, _super);
function RawBar() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawBar.prototype.render = function () {
var _a = this.props, arg = _a.arg, val = _a.val, startVal = _a.startVal, barWidth = _a.barWidth, maxBarWidth = _a.maxBarWidth, animation = _a.animation, argument = _a.argument, value = _a.value, seriesIndex = _a.seriesIndex, index = _a.index, state = _a.state, rotated = _a.rotated, color = _a.color, pane = _a.pane, scales = _a.scales, restProps = __rest(_a, ["arg", "val", "startVal", "barWidth", "maxBarWidth", "animation", "argument", "value", "seriesIndex", "index", "state", "rotated", "color", "pane", "scales"]);
var width = barWidth * maxBarWidth;
var bar = dxChartCore.dBar(arg, val, startVal, width, rotated);
var visibility = dxChartCore.getVisibility(pane, bar.x + bar.width / 2, bar.y + bar.height, bar.width, bar.height);
var adjustedBar = visibility === 'visible' ? dxChartCore.adjustBarSize(bar, pane) : bar;
return (React.createElement("rect", __assign({}, adjustedBar, { fill: color, visibility: visibility }, restProps)));
};
return RawBar;
}(React.PureComponent));
// It should actually be `withPattern<BarSeries.PointProps>` but `opacity` is not decleared there.
// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.
var Bar = withAnimation(dxChartCore.processBarAnimation, function (_a) {
var arg = _a.arg, val = _a.val, startVal = _a.startVal;
return ({ arg: arg, val: val, startVal: startVal });
}, dxChartCore.getPointStart, dxChartCore.isValuesChanged)(withStates((_a$1 = {},
_a$1[dxChartCore.HOVERED] = withPattern(function (_a) {
var seriesIndex = _a.seriesIndex, index = _a.index, color = _a.color;
return "series-".concat(seriesIndex, "-point-").concat(index, "-color-").concat(color, "-hover");
}, { opacity: 0.75 })(RawBar),
_a$1[dxChartCore.SELECTED] = withPattern(function (_a) {
var seriesIndex = _a.seriesIndex, index = _a.index, color = _a.color;
return "series-".concat(seriesIndex, "-point-").concat(index, "-color-").concat(color, "-selection");
}, { opacity: 0.5 })(RawBar),
_a$1))(RawBar));
// tslint:disable-next-line: max-line-length
var BarSeries = declareSeries('BarSeries', {
getPointTransformer: dxChartCore.getBarPointTransformer,
createHitTester: dxChartCore.createBarHitTester,
components: { Path: PointCollection, Point: Bar },
});
BarSeries.defaultProps = {
barWidth: 0.9,
};
var _a$2;
var RawPath = /*#__PURE__*/ (function (_super) {
__extends(RawPath, _super);
function RawPath() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawPath.prototype.render = function () {
var _a = this.props, path = _a.path, animation = _a.animation, coordinates = _a.coordinates, rotated = _a.rotated, index = _a.index, state = _a.state, pointComponent = _a.pointComponent, color = _a.color, clipPathId = _a.clipPathId, scales = _a.scales, pane = _a.pane, restProps = __rest(_a, ["path", "animation", "coordinates", "rotated", "index", "state", "pointComponent", "color", "clipPathId", "scales", "pane"]);
return (React.createElement("path", __assign({ clipPath: "url(#".concat(clipPathId, ")"), d: path(coordinates), fill: "none", strokeWidth: 2, stroke: color }, restProps)));
};
return RawPath;
}(React.PureComponent));
var Path = withAnimation(dxChartCore.processLineAnimation, function (_a) {
var coordinates = _a.coordinates;
return ({ coordinates: coordinates });
}, dxChartCore.getPathStart, dxChartCore.isCoordinatesChanged)(withStates((_a$2 = {},
_a$2[dxChartCore.HOVERED] = function (props) { return (__assign({ strokeWidth: 4 }, props)); },
_a$2[dxChartCore.SELECTED] = function (props) { return (__assign({ strokeWidth: 4 }, props)); },
_a$2))(RawPath));
var Line = /*#__PURE__*/ (function (_super) {
__extends(Line, _super);
function Line() {
return _super !== null && _super.apply(this, arguments) || this;
}
Line.prototype.render = function () {
var _a = this.props, rotated = _a.rotated, path = _a.path;
var dPath = path === undefined ? (rotated ? dxChartCore.dRotateLine : dxChartCore.dLine) : path;
return React.createElement(Path, __assign({}, this.props, { path: dPath }));
};
return Line;
}(React.PureComponent));
// tslint:disable-next-line: max-line-length
var LineSeries = declareSeries('LineSeries', {
getPointTransformer: dxChartCore.getLinePointTransformer,
createHitTester: dxChartCore.createLineHitTester,
components: { Path: Line },
});
var _a$3;
var RawSlice = /*#__PURE__*/ (function (_super) {
__extends(RawSlice, _super);
function RawSlice() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawSlice.prototype.render = function () {
var _a = this.props, arg = _a.arg, val = _a.val, rotated = _a.rotated, argument = _a.argument, value = _a.value, seriesIndex = _a.seriesIndex, index = _a.index, state = _a.state, maxRadius = _a.maxRadius, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, startAngle = _a.startAngle, endAngle = _a.endAngle, color = _a.color, animation = _a.animation, pane = _a.pane, scales = _a.scales, restProps = __rest(_a, ["arg", "val", "rotated", "argument", "value", "seriesIndex", "index", "state", "maxRadius", "innerRadius", "outerRadius", "startAngle", "endAngle", "color", "animation", "pane", "scales"]);
return (React.createElement("g", { transform: "translate(".concat(arg, " ").concat(val, ")") },
React.createElement("path", __assign({ d: dxChartCore.dPie(maxRadius, innerRadius, outerRadius, startAngle, endAngle), fill: color, stroke: "none" }, restProps))));
};
return RawSlice;
}(React.PureComponent));
// It should actually be `withPattern<PieSeries.PointProps>` but `opacity` is not decleared there.
// It is not clear if `opacity` should be explicitly enumerated or stay as part of `restProps`.
var Slice = withAnimation(dxChartCore.processPieAnimation, function (_a) {
var innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, startAngle = _a.startAngle, endAngle = _a.endAngle;
return ({ innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle });
}, dxChartCore.getPieStart, dxChartCore.isValuesChanged, dxChartCore.getDelay)(withStates((_a$3 = {},
_a$3[dxChartCore.HOVERED] = withPattern(function (_a) {
var seriesIndex = _a.seriesIndex, index = _a.index, color = _a.color;
return "series-".concat(seriesIndex, "-point-").concat(index, "-color-").concat(color, "-hover");
}, { opacity: 0.75 })(RawSlice),
_a$3[dxChar