@devexpress/dx-react-chart
Version:
Composable plugin-based chart component for React
982 lines (931 loc) • 77.7 kB
JavaScript
/**
* Bundle of @devexpress/dx-react-chart
* Generated: 2025-05-05
* Version: 4.0.11
* License: https://js.devexpress.com/Licensing
*/
import { createElement, PureComponent, createRef, isValidElement, Fragment } from 'react';
import { Plugin, Getter, Template, TemplatePlaceholder, TemplateConnector, Sizer, createStateHelper, Action, withComponents, PluginHost, clearSelection } from '@devexpress/dx-react-core';
import { defaultDomains, buildScales, scaleSeriesPoints, TOP, LEFT, RIGHT, BOTTOM, isReadyToRenderSeries, bBoxes, getRanges, getLegendItems, findSeriesByName, ARGUMENT_DOMAIN, getValueDomainName, addSeries, extendDomains, addDomain, getStackedDomains, getStackedSeries, easeOutCubic, buildAnimation, isScalesChanged, HOVERED, SELECTED, isCoordinatesChanged, getPathStart, processAreaAnimation, dRotateArea, dArea, getAreaPointTransformer, createAreaHitTester, dBar, getVisibility, adjustBarSize, isValuesChanged, getPointStart, processBarAnimation, getBarPointTransformer, createBarHitTester, processLineAnimation, dRotateLine, dLine, getLinePointTransformer, createLineHitTester, dPie, getDelay, getPieStart, processPieAnimation, getPiePointTransformer, createPieHitTester, dSymbol, processPointAnimation, getScatterPointTransformer, createScatterHitTester, dRotateSpline, dSpline, createSplineHitTester, isValidPosition, getTickCoordinates, tickCoordinatesGetter, gridCoordinatesGetter, getRotatedPosition, processHandleTooltip, getParameters, createReference, getOffset as getOffset$1, getEventCoords, isKeyPressed, setCursorType, isMultiTouch, getDeltaForTouches, getRect, getViewport, getWheelDelta, detachEvents, attachEvents, adjustLayout, buildEventHandlers, processPointerMove, changeSeriesState } from '@devexpress/dx-chart-core';
import { stackOffsetDiverging, stackOrderNone } from 'd3-shape';
/*! *****************************************************************************
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 (createElement(Plugin, { name: "Basis" },
createElement(Getter, { name: "data", value: data }),
createElement(Getter, { name: "domains", value: defaultDomains }),
createElement(Getter, { name: "series", value: series }),
createElement(Getter, { name: "rotated", value: rotated })));
};
var getScales = function (_a) {
var domains = _a.domains, ranges = _a.ranges;
return buildScales(domains, ranges);
};
var getSeries = function (_a) {
var series = _a.series, scales = _a.scales, rotated = _a.rotated;
return 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 (createElement(Plugin, null,
createElement(Getter, { name: "scales", computed: getScales }),
createElement(Getter, { name: "series", computed: getSeries })));
};
return ChartCore;
}(PureComponent));
var AxesLayout = /*#__PURE__*/ (function (_super) {
__extends(AxesLayout, _super);
function AxesLayout() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.ref = createRef();
return _this;
}
AxesLayout.prototype.render = function () {
return (createElement(Plugin, null,
createElement(Getter, { name: "centerDivRef", value: this.ref }),
createElement(Template, { name: "canvas" },
createElement("div", { id: "center-center", ref: this.ref, style: { display: 'flex', flexDirection: 'column', flexGrow: 1 } },
createElement("div", { id: "".concat(TOP, "-axis-container"), style: { display: 'flex', flexDirection: 'row' } },
createElement(TemplatePlaceholder, { name: "".concat(TOP, "-").concat(LEFT, "-axis") }),
createElement(TemplatePlaceholder, { name: "".concat(TOP, "-axis") }),
createElement(TemplatePlaceholder, { name: "".concat(TOP, "-").concat(RIGHT, "-axis") })),
createElement("div", { id: "center-axis-container", style: { display: 'flex', flexDirection: 'row', flexGrow: 1 } },
createElement(TemplatePlaceholder, { name: "".concat(LEFT, "-axis") }),
createElement(TemplatePlaceholder, null),
createElement(TemplatePlaceholder, { name: "".concat(RIGHT, "-axis") })),
createElement("div", { id: "".concat(BOTTOM, "-axis-container"), style: { display: 'flex', flexDirection: 'row' } },
createElement(TemplatePlaceholder, { name: "".concat(BOTTOM, "-").concat(LEFT, "-axis") }),
createElement(TemplatePlaceholder, { name: "".concat(BOTTOM, "-axis") }),
createElement(TemplatePlaceholder, { name: "".concat(BOTTOM, "-").concat(RIGHT, "-axis") }))))));
};
return AxesLayout;
}(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 (createElement(Plugin, { name: "SpaceFillingRects" }, placeholders.map(function (name) { return (createElement(Template, { name: name, key: name },
createElement(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 createElement("div", { id: name, style: { width: width } });
}))); })));
};
return SpaceFillingRects;
}(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 isReadyToRenderSeries(layouts, centerDivRef, isPreviousDataEmpty, !!axesExist);
};
return _this;
}
ControllerComponent.prototype.render = function () {
return (createElement(Plugin, { name: "ControllerComponent" },
createElement(Getter, { name: "readyToRenderSeries", computed: this.readyToRenderSeriesComputed })));
};
return ControllerComponent;
}(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 (createElement("defs", null,
createElement("clipPath", { id: id },
createElement("rect", { x: -EXTRA_PIXELS / 2, y: -EXTRA_PIXELS / 2, width: width + EXTRA_PIXELS, height: height + EXTRA_PIXELS }))));
};
return ClipPath;
}(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 = createRef();
return _this;
}
UpdatableSizer.prototype.componentDidUpdate = function () {
this.props.onSizeChange(this.ref.current.getSize());
};
UpdatableSizer.prototype.render = function () {
return createElement(Sizer, __assign({ ref: this.ref }, this.props));
};
return UpdatableSizer;
}(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 (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 = createRef();
_this.clipPathId = "clip_path_".concat(getUniqueId());
return _this;
}
PaneLayout.prototype.render = function () {
var _this = this;
return (createElement(Plugin, { name: "PaneLayout" },
createElement(Getter, { name: "rootRef", value: this.ref }),
createElement(Getter, { name: "clipPathId", value: this.clipPathId }),
createElement(Template, { name: "canvas" }, function (params) { return (createElement(TemplateConnector, null, function (_a, _b) {
var layouts = _a.layouts;
var changeBBox = _b.changeBBox;
var _c = layouts.pane, width = _c.width, height = _c.height;
return (createElement(UpdatableSizer, { containerComponent: SizerContainer, onSizeChange: function (size) { return changeBBox({ placeholder: 'pane', bBox: size }); } },
createElement("svg", __assign({ ref: _this.ref }, params, { width: width, height: height, style: SVG_STYLE }),
createElement(ClipPath, { id: _this.clipPathId, width: width, height: height }),
createElement(TemplatePlaceholder, { name: "series" }))));
})); })));
};
return PaneLayout;
}(PureComponent));
var doGetRanges = function (_a) {
var layouts = _a.layouts, rotated = _a.rotated;
return 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 = createStateHelper(_this);
_this.changeBBox = stateHelper.applyFieldReducer.bind(stateHelper, 'bBoxes', 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 (createElement(Plugin, null,
createElement(Getter, { name: "layouts", value: stateBBoxes }),
createElement(Getter, { name: "ranges", computed: doGetRanges }),
createElement(Action, { name: "changeBBox", action: this.changeBBox }),
createElement(Template, { name: "root" },
createElement(Root, __assign({ width: width, height: height }, restProps),
createElement(TemplatePlaceholder, { name: "canvas" })))));
};
LayoutManager.defaultProps = {
width: 0,
};
return LayoutManager;
}(PureComponent));
var ComponentLayout = function () { return (createElement(Plugin, { name: "ComponentLayout" },
createElement(Template, { name: "canvas" },
createElement("div", { id: "".concat(TOP, "-container"), style: { display: 'flex', flexDirection: 'row' } },
createElement(TemplatePlaceholder, { name: "".concat(TOP, "-").concat(LEFT) }),
createElement(TemplatePlaceholder, { name: TOP }),
createElement(TemplatePlaceholder, { name: "".concat(TOP, "-").concat(RIGHT) })),
createElement("div", { id: "center-container", style: { display: 'flex', flexDirection: 'row', flexGrow: 1 } },
createElement(TemplatePlaceholder, { name: LEFT }),
createElement(TemplatePlaceholder, null),
createElement(TemplatePlaceholder, { name: RIGHT })),
createElement("div", { id: "".concat(BOTTOM, "-container"), style: { display: 'flex', flexDirection: 'row' } },
createElement(TemplatePlaceholder, { name: "".concat(BOTTOM, "-").concat(LEFT) }),
createElement(TemplatePlaceholder, { name: BOTTOM }),
createElement(TemplatePlaceholder, { name: "".concat(BOTTOM, "-").concat(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 (createElement(Plugin, { name: "Palette" },
createElement(Getter, { name: "palette", value: scheme })));
};
return PaletteBase;
}(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 (createElement("div", __assign({ style: __assign(__assign(__assign({}, style), { height: "".concat(height, "px") }), width ? { width: "".concat(width, "px") } : null) }, restProps), children));
};
return Root;
}(PureComponent));
var Label = /*#__PURE__*/ (function (_super) {
__extends(Label, _super);
function Label() {
return _super !== null && _super.apply(this, arguments) || this;
}
Label.prototype.render = function () {
return (createElement("text", __assign({}, this.props)));
};
return Label;
}(PureComponent));
var scheme = [];
var placeholders = [
"".concat(TOP, "-").concat(LEFT),
"".concat(TOP, "-").concat(RIGHT),
"".concat(BOTTOM, "-").concat(LEFT),
"".concat(BOTTOM, "-").concat(RIGHT),
"".concat(TOP, "-").concat(LEFT, "-axis"),
"".concat(TOP, "-").concat(RIGHT, "-axis"),
"".concat(BOTTOM, "-").concat(LEFT, "-axis"),
"".concat(BOTTOM, "-").concat(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 ((createElement(PluginHost, null,
createElement(BasicData, { data: data, rotated: rotated }),
createElement(Palette, { scheme: scheme }),
createElement(LayoutManager, __assign({ width: width, height: height, rootComponent: rootComponent }, restProps)),
createElement(PaneLayout, null),
createElement(AxesLayout, null),
createElement(ComponentLayout, null),
createElement(SpaceFillingRects, { placeholders: placeholders }),
children,
createElement(ControllerComponent, null),
createElement(ChartCore, null))));
};
RawChart.defaultProps = {
height: 500,
rotated: false,
};
RawChart.components = {
rootComponent: 'Root',
};
return RawChart;
}(PureComponent));
var Chart = 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 (createElement("svg", __assign({ fill: color, width: "10", height: "10" }, restProps),
createElement("circle", __assign({ r: 5, cx: 5, cy: 5 }, restProps))));
};
return Marker;
}(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 (createElement(Plugin, { name: "Legend" },
createElement(Template, { name: placeholder },
createElement(TemplatePlaceholder, null),
createElement(TemplateConnector, null, function (getters) { return (createElement(Root, { name: "legend-".concat(placeholder) }, getItems(getters).map(function (_a) {
var text = _a.text, color = _a.color;
return (createElement(Item, { key: text },
createElement(MarkerComponent, { name: text, color: color }),
createElement(Label, { text: text })));
}))); }))));
};
RawLegend.defaultProps = {
position: 'right',
getItems: function (_a) {
var series = _a.series;
return getLegendItems(series);
},
};
RawLegend.components = {
rootComponent: 'Root',
itemComponent: 'Item',
markerComponent: 'Marker',
labelComponent: 'Label',
};
return RawLegend;
}(PureComponent));
var Legend = 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 (createElement(Plugin, { name: "Title" },
createElement(Template, { name: placeholder },
createElement(TemplatePlaceholder, null),
createElement(Text, { text: text }))));
};
TitleBase.components = {
textComponent: 'Text',
};
TitleBase.defaultProps = {
position: 'top',
};
return TitleBase;
}(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 addSeries(series, data, palette, seriesItem, restProps);
};
var getDomains = function (_a) {
var series = _a.series, domains = _a.domains;
return extendDomains(domains, findSeriesByName(symbolName, series));
};
return (createElement(Plugin, { name: pluginName },
createElement(Getter, { name: "series", computed: getSeries }),
createElement(Getter, { name: "domains", computed: getDomains }),
createElement(Template, { name: "series" },
createElement(TemplatePlaceholder, null),
createElement(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 = findSeriesByName(symbolName, series);
var currentScales = {
argScale: scales[ARGUMENT_DOMAIN],
valScale: scales[getValueDomainName(currentSeries.scaleName)],
};
var Path = currentSeries.seriesComponent;
return (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;
}(PureComponent));
Component.components = {};
if (components.Path) {
Component.components.seriesComponent = 'Path';
}
if (components.Point) {
Component.components.pointComponent = 'Point';
}
return 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 createElement(Target, __assign({}, props));
};
Component.components = Target.components;
return Component;
}(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 addDomain(domains, name, args);
};
return (createElement(Plugin, { name: "Scale" },
createElement(Getter, { name: "domains", computed: getDomains })));
};
return Scale;
}(PureComponent));
var ArgumentScale = withPatchedProps(function (props) { return (__assign(__assign({}, props), { name: ARGUMENT_DOMAIN })); })(Scale);
var ValueScale = withPatchedProps(function (props) { return (__assign(__assign({}, props), { name: getValueDomainName(props.name) })); })(Scale);
var getDomains = function (_a) {
var domains = _a.domains, series = _a.series;
return 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 getStackedSeries(series, data, params);
};
return (createElement(Plugin, { name: "Stack" },
createElement(Getter, { name: "series", computed: getSeries }),
createElement(Getter, { name: "domains", computed: getDomains })));
};
StackBase.defaultProps = {
stacks: [],
offset: stackOffsetDiverging,
order: stackOrderNone,
};
return StackBase;
}(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 buildAnimation(easing, duration); };
return (createElement(Plugin, { name: "Animation" },
createElement(Getter, { name: "animation", computed: buildAnimationGetter })));
};
AnimationBase.defaultProps = {
easing: easeOutCubic,
duration: 1000,
};
return AnimationBase;
}(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 isValidElement(result) ? result : createElement(Component, __assign({}, result));
};
return ComponentWithStates;
}(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 (createElement("defs", null,
createElement("pattern", { id: id, width: size, height: size, patternUnits: "userSpaceOnUse" },
createElement("rect", { x: 0, y: 0, width: size, height: size, fill: color, opacity: opacity }),
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;
}(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 (createElement(Fragment, null,
createElement(Target, __assign({ color: "url(#".concat(patternId, ")") }, restProps)),
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 (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 (createElement(Component, __assign({}, restProps, this.state)));
};
return ComponentWithAnimation;
}(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 ? dRotateArea : dArea) : path;
return (createElement("path", __assign({ clipPath: "url(#".concat(clipPathId, ")"), d: dPath(coordinates), fill: color, opacity: 0.5 }, restProps)));
};
return RawArea;
}(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(processAreaAnimation, function (_a) {
var coordinates = _a.coordinates;
return ({ coordinates: coordinates });
}, getPathStart, isCoordinatesChanged)(withStates((_a = {},
_a[HOVERED] = withPattern(function (_a) {
var index = _a.index, color = _a.color;
return "series-".concat(index, "-color-").concat(color, "-hover");
}, { opacity: 0.75 })(RawArea),
_a[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: getAreaPointTransformer,
createHitTester: 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 (createElement(Point, __assign({ key: String(point.index), seriesIndex: index }, restProps, point))); }));
};
return PointCollection;
}(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 = dBar(arg, val, startVal, width, rotated);
var visibility = getVisibility(pane, bar.x + bar.width / 2, bar.y + bar.height, bar.width, bar.height);
var adjustedBar = visibility === 'visible' ? adjustBarSize(bar, pane) : bar;
return (createElement("rect", __assign({}, adjustedBar, { fill: color, visibility: visibility }, restProps)));
};
return RawBar;
}(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(processBarAnimation, function (_a) {
var arg = _a.arg, val = _a.val, startVal = _a.startVal;
return ({ arg: arg, val: val, startVal: startVal });
}, getPointStart, isValuesChanged)(withStates((_a$1 = {},
_a$1[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[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: getBarPointTransformer,
createHitTester: 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 (createElement("path", __assign({ clipPath: "url(#".concat(clipPathId, ")"), d: path(coordinates), fill: "none", strokeWidth: 2, stroke: color }, restProps)));
};
return RawPath;
}(PureComponent));
var Path = withAnimation(processLineAnimation, function (_a) {
var coordinates = _a.coordinates;
return ({ coordinates: coordinates });
}, getPathStart, isCoordinatesChanged)(withStates((_a$2 = {},
_a$2[HOVERED] = function (props) { return (__assign({ strokeWidth: 4 }, props)); },
_a$2[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 ? dRotateLine : dLine) : path;
return createElement(Path, __assign({}, this.props, { path: dPath }));
};
return Line;
}(PureComponent));
// tslint:disable-next-line: max-line-length
var LineSeries = declareSeries('LineSeries', {
getPointTransformer: getLinePointTransformer,
createHitTester: 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 (createElement("g", { transform: "translate(".concat(arg, " ").concat(val, ")") },
createElement("path", __assign({ d: dPie(maxRadius, innerRadius, outerRadius, startAngle, endAngle), fill: color, stroke: "none" }, restProps))));
};
return RawSlice;
}(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(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 });
}, getPieStart, isValuesChanged, getDelay)(withStates((_a$3 = {},
_a$3[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[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 })(RawSlice),
_a$3))(RawSlice));
// tslint:disable-next-line: max-line-length
var PieSeries = declareSeries('PieSeries', {
getPointTransformer: getPiePointTransformer,
createHitTester: createPieHitTester,
components: { Path: PointCollection, Point: Slice },
});
PieSeries.defaultProps = {
innerRadius: 0,
outerRadius: 1,
};
var _a$4;
var RawPoint = /*#__PURE__*/ (function (_super) {
__extends(RawPoint, _super);
function RawPoint() {
return _super !== null && _super.apply(this, arguments) || this;
}
RawPoint.prototype.render = function () {
var _a = this.props, arg = _a.arg, val = _a.val, rotated = _a.rotated, animation = _a.animation, argument = _a.argument, value = _a.value, seriesIndex = _a.seriesIndex, index = _a.index, state = _a.state, pointOptions = _a.point, color = _a.color, pane = _a.pane, scales = _a.scales, restProps = __rest(_a, ["arg", "val", "rotated", "animation", "argument", "value", "seriesIndex", "index", "state", "point", "color", "pane", "scales"]);
var x = rotated ? val : arg;
var y = rotated ? arg : val;
var visibility = getVisibility(pane, x, y, 0, 0);
return (createElement("path", __assign({ transform: "translate(".concat(x, " ").concat(y, ")"), d: dSymbol(pointOptions), fill: color, visibility: visibility, stroke: "none" }, restProps)));
};
return RawPoint;
}(PureComponent));
// The expression is used to have 12 from 7 in default scenario
// and to adjust hovered or selected size when custom *point.size* is defined.
var getAdjustedOptions = function (_a) {
var size = _a.size;
return ({ size: Math.round(size * 1.7) });
};
var Point = withAnimation(processPointAnimation, function (_a) {
var arg = _a.arg, val = _a.val;
return ({ arg: arg, val: val });
}, getPointStart, isValuesChanged)(withStates((_a$4 = {},
_a$4[HOVERED] = function (_a) {
var color = _a.color, point = _a.point, restProps = __rest(_a, ["color", "point"]);
return (__assign({ stroke: color, strokeWidth: 4, fill: 'none', point: getAdjustedOptions(point) }, restProps));
},
_a$4[SELECTED] = function (_a) {
var color = _a.color, point = _a.point, restProps = __rest(_a, ["color", "point"]);
return (__assign({ stroke: color, strokeWidth: 4, fill: 'none', point: getAdjustedOptions(point) }, restProps));
},
_a$4))(RawPoint));
// tslint:disable-next-line: max-line-length
var ScatterSeries = declareSeries('ScatterSeries', {
getPointTransformer: getScatterPointTransformer,
createHitTester: createScatterHitTester,
components: { Path: PointCollection, Point: Point },
});
ScatterSeries.defaultProps = {
point: { size: 7 },
};
var Spline = /*#__PURE__*/ (function (_super) {
__extends(Spline, _super);
function Spline() {
return _super !== null && _super.apply(this, arguments) || this;
}
Spline.prototype.render = function () {
var _a = this.props, rotated = _a.rotated, path = _a.path;
var dPath = path === undefined ? (rotated ? dRotateSpline : dSpline) : path;
return createElement(Path, __assign({}, this.props, { path: dPath }));
};
return Spline;
}(PureComponent));
// tslint:disable-next-line: max-line-length
var SplineSeries = declareSeries('SplineSeries', {
getPointTransformer: getLinePointTransformer,
createHitTester: createSplineHitTester,
components: { Path: Spline },
});
var getOffset = function (position) { return (position >= 0 ? 0 : -position); };
var getSize = function (position, delta) { return (position >= 0 ? position + delta : -position); };
var Root$1 = /*#__PURE__*/ (function (_super) {
__extends(Root, _super);
function Root(props) {
var _this = _super.call(this, props) || this;
_this.ref = createRef();
_this.state = {
x: 0, y: 0,
};
_this.adjust = _this.adjust.bind(_this);
return _this;
}
Root.prototype.componentDidMount = function () {
this.setState(this.adjust);
};
Root.prototype.componentDidUpdate = function () {
// *setState* is called unconditionally because PureComponent is expected to break the cycle.
this.setState(this.adjust);
};
// Since calculated state does not depend on current state non-callback version of *setState*
// might have been expected - it can't be done.
// Parent component (Axis) accesses its DOM content in *onSizeChange* handler. When
// this component is mounted parent is not yet - it crashes on DOM access.
// *setState* callback is invoked later then *componentDidMount* - by that time parent component
// is already mounted and can access its DOM.
// Because of it callback version of *setState* has to be used here.
// Can we rely on the fact that by the time of callback parent is mounted?
// For now we stick with it, but need to find a more solid solution.
Root.prototype.adjust = function (_, _a) {
var dx = _a.dx, dy = _a.dy,