echarts-next-for-react
Version:
Echarts(v5.x | next) components for react.
581 lines (436 loc) • 21.1 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
import isFunction from 'lodash/isFunction';
import isEmpty from 'lodash/isEmpty';
import isString from 'lodash/isString';
import { bind, clear } from 'size-sensor';
import { useMount, useUnmount } from 'react-use';
import { use, dispose, getInstanceByDom, init } from 'echarts/core';
import isArray from 'lodash/isArray';
import { RadarChart, ParallelChart, GraphChart, LineChart, LinesChart, BarChart, PieChart, ScatterChart, EffectScatterChart, TreeChart, TreemapChart, SunburstChart, BoxplotChart, CandlestickChart, HeatmapChart, MapChart, SankeyChart, FunnelChart, GaugeChart, PictorialBarChart, ThemeRiverChart, CustomChart } from 'echarts/charts';
import { GridComponent, TitleComponent, LegendComponent, LegendPlainComponent, LegendScrollComponent, PolarComponent, RadarComponent, DataZoomComponent, DataZoomSliderComponent, DataZoomInsideComponent, VisualMapComponent, VisualMapContinuousComponent, VisualMapPiecewiseComponent, TooltipComponent, AxisPointerComponent, ToolboxComponent, GridSimpleComponent, BrushComponent, GeoComponent, ParallelComponent, SingleAxisComponent, TimelineComponent, GraphicComponent, CalendarComponent, TransformComponent, DatasetComponent, AriaComponent, MarkPointComponent, MarkLineComponent, MarkAreaComponent } from 'echarts/components';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var enableComponentBySeriesType = function enableComponentBySeriesType(series, type) {
return (isArray(series) ? series : [series]).find(function (_ref) {
var t = _ref.type;
return t === type;
});
};
var enableComponentBySeriesProp = function enableComponentBySeriesProp(series, prop) {
return (isArray(series) ? series : [series]).map(function (v) {
return v[prop];
});
};
var getRegisterComponents = function getRegisterComponents(option, isCanvas) {
// necessary Component
var registerComponents = [GridComponent, isCanvas ? CanvasRenderer : SVGRenderer];
if (option && !isEmpty(option)) {
var _title$, _legend$, _tooltip$, _axisPointer$, _toolbox$, _timeline$;
// register title component
var _ref2 = option !== null && option !== void 0 ? option : {},
_ref2$title = _ref2.title,
title = _ref2$title === void 0 ? {} : _ref2$title,
_ref2$legend = _ref2.legend,
legend = _ref2$legend === void 0 ? {} : _ref2$legend,
polar = _ref2.polar,
radar = _ref2.radar,
dataZoom = _ref2.dataZoom,
visualMap = _ref2.visualMap,
_ref2$tooltip = _ref2.tooltip,
tooltip = _ref2$tooltip === void 0 ? {} : _ref2$tooltip,
_ref2$axisPointer = _ref2.axisPointer,
axisPointer = _ref2$axisPointer === void 0 ? {} : _ref2$axisPointer,
_ref2$toolbox = _ref2.toolbox,
toolbox = _ref2$toolbox === void 0 ? {} : _ref2$toolbox,
brush = _ref2.brush,
geo = _ref2.geo,
grid = _ref2.grid,
parallel = _ref2.parallel,
singleAxis = _ref2.singleAxis,
_ref2$timeline = _ref2.timeline,
timeline = _ref2$timeline === void 0 ? {} : _ref2$timeline,
graphic = _ref2.graphic,
calendar = _ref2.calendar,
dataset = _ref2.dataset,
_ref2$aria = _ref2.aria,
aria = _ref2$aria === void 0 ? {} : _ref2$aria,
_ref2$series = _ref2.series,
series = _ref2$series === void 0 ? [] : _ref2$series;
var titleOps = isEmpty(title) ? (_title$ = title[0]) !== null && _title$ !== void 0 ? _title$ : {} : title;
var _ref3 = titleOps !== null && titleOps !== void 0 ? titleOps : {},
_ref3$show = _ref3.show,
titleShow = _ref3$show === void 0 ? true : _ref3$show;
if (titleShow) {
registerComponents = [TitleComponent].concat(_toConsumableArray(registerComponents));
} // register legend Component
var legendOps = isEmpty(legend) ? (_legend$ = legend[0]) !== null && _legend$ !== void 0 ? _legend$ : {} : legend;
var _ref4 = legendOps !== null && legendOps !== void 0 ? legendOps : {},
_ref4$show = _ref4.show,
legendShow = _ref4$show === void 0 ? true : _ref4$show;
if (legendShow) {
registerComponents = [LegendComponent, LegendPlainComponent, LegendScrollComponent].concat(_toConsumableArray(registerComponents));
} // register polar Component
if (polar || !!(isArray(series) ? series : [series]).find(function (_ref5) {
var coordinateSystem = _ref5.coordinateSystem;
return coordinateSystem === 'polar';
})) {
registerComponents = [PolarComponent].concat(_toConsumableArray(registerComponents));
} // register radar Component
if (radar || enableComponentBySeriesType(series, 'radar')) {
registerComponents = [RadarChart, RadarComponent].concat(_toConsumableArray(registerComponents));
} // register datazoom Component
if (dataZoom) {
registerComponents = [DataZoomComponent, DataZoomSliderComponent, DataZoomInsideComponent].concat(_toConsumableArray(registerComponents));
} // register visualMap Component
if (visualMap) {
registerComponents = [VisualMapComponent, VisualMapContinuousComponent, VisualMapPiecewiseComponent].concat(_toConsumableArray(registerComponents));
} // register tooltip Component
var tooltipOps = isEmpty(tooltip) ? (_tooltip$ = tooltip[0]) !== null && _tooltip$ !== void 0 ? _tooltip$ : {} : tooltip;
var _ref6 = tooltipOps !== null && tooltipOps !== void 0 ? tooltipOps : {},
_ref6$show = _ref6.show,
tooltipShow = _ref6$show === void 0 ? true : _ref6$show;
if (tooltipShow) {
registerComponents = [TooltipComponent].concat(_toConsumableArray(registerComponents));
} // register axisPointer Component
var axisPointerOps = isEmpty(axisPointer) ? (_axisPointer$ = axisPointer[0]) !== null && _axisPointer$ !== void 0 ? _axisPointer$ : {} : axisPointer;
var _ref7 = axisPointerOps !== null && axisPointerOps !== void 0 ? axisPointerOps : {},
axisPointerShow = _ref7.show;
if (axisPointerShow) {
registerComponents = [AxisPointerComponent].concat(_toConsumableArray(registerComponents));
} // register toolbox Component
var toolboxOps = isEmpty(toolbox) ? (_toolbox$ = toolbox[0]) !== null && _toolbox$ !== void 0 ? _toolbox$ : {} : toolbox;
var _ref8 = toolboxOps !== null && toolboxOps !== void 0 ? toolboxOps : {},
_ref8$show = _ref8.show,
toolboxShow = _ref8$show === void 0 ? true : _ref8$show;
if (toolboxShow) {
registerComponents = [ToolboxComponent].concat(_toConsumableArray(registerComponents));
} // register grid Component
if (grid) {
registerComponents = [GridComponent, GridSimpleComponent].concat(_toConsumableArray(registerComponents));
} // register brush Component
if (brush) {
registerComponents = [BrushComponent].concat(_toConsumableArray(registerComponents));
} // register geo Component
if (geo || !!(isArray(series) ? series : [series]).find(function (_ref9) {
var coordinateSystem = _ref9.coordinateSystem;
return coordinateSystem === 'geo';
})) {
registerComponents = [GeoComponent].concat(_toConsumableArray(registerComponents));
} // register parallel Component
if (parallel || enableComponentBySeriesType(series, 'parallel') || // @ts-ignore
!!(isArray(series) ? series : [series]).find(function (_ref10) {
var coordinateSystem = _ref10.coordinateSystem;
return coordinateSystem === 'parallel';
})) {
registerComponents = [ParallelChart, ParallelComponent].concat(_toConsumableArray(registerComponents));
} // register singleAxis Component
if (singleAxis) {
registerComponents = [SingleAxisComponent].concat(_toConsumableArray(registerComponents));
} // register timeline Component
var timelineOps = isEmpty(timeline) ? (_timeline$ = timeline[0]) !== null && _timeline$ !== void 0 ? _timeline$ : {} : timeline;
var _ref11 = timelineOps !== null && timelineOps !== void 0 ? timelineOps : {},
_ref11$show = _ref11.show,
timelineShow = _ref11$show === void 0 ? true : _ref11$show;
if (timelineShow) {
registerComponents = [TimelineComponent].concat(_toConsumableArray(registerComponents));
} // register graphic Component
if (graphic || enableComponentBySeriesType(series, 'graph')) {
registerComponents = [GraphChart, GraphicComponent].concat(_toConsumableArray(registerComponents));
} // register calendar Component
if (calendar) {
registerComponents = [CalendarComponent].concat(_toConsumableArray(registerComponents));
} // register dataset Component
if (dataset) {
registerComponents = [TransformComponent, DatasetComponent].concat(_toConsumableArray(registerComponents));
} // register aria Component
if (aria === null || aria === void 0 ? void 0 : aria.enabled) {
registerComponents = [AriaComponent].concat(_toConsumableArray(registerComponents));
} // register components by series
// register line component
if (enableComponentBySeriesType(series, 'line')) {
registerComponents = [LineChart, LinesChart].concat(_toConsumableArray(registerComponents));
} // register lines component
if (enableComponentBySeriesType(series, 'lines')) {
registerComponents = [LineChart, LinesChart].concat(_toConsumableArray(registerComponents));
} // register bar component
if (enableComponentBySeriesType(series, 'bar')) {
registerComponents = [BarChart].concat(_toConsumableArray(registerComponents));
} // register pie component
if (enableComponentBySeriesType(series, 'pie')) {
registerComponents = [PieChart].concat(_toConsumableArray(registerComponents));
} // register scatter component
if (enableComponentBySeriesType(series, 'scatter')) {
registerComponents = [ScatterChart].concat(_toConsumableArray(registerComponents));
} // register effectScatter component
if (enableComponentBySeriesType(series, 'effectScatter')) {
registerComponents = [EffectScatterChart].concat(_toConsumableArray(registerComponents));
} // register tree component
if (enableComponentBySeriesType(series, 'tree')) {
registerComponents = [TreeChart].concat(_toConsumableArray(registerComponents));
} // register treemap component
if (enableComponentBySeriesType(series, 'treemap')) {
registerComponents = [TreemapChart].concat(_toConsumableArray(registerComponents));
} // register sunburst component
if (enableComponentBySeriesType(series, 'sunburst')) {
registerComponents = [SunburstChart].concat(_toConsumableArray(registerComponents));
} // register boxplot component
if (enableComponentBySeriesType(series, 'boxplot')) {
registerComponents = [BoxplotChart].concat(_toConsumableArray(registerComponents));
} // register candlestick component
if (enableComponentBySeriesType(series, 'candlestick')) {
registerComponents = [CandlestickChart].concat(_toConsumableArray(registerComponents));
} // register heatmap component
if (enableComponentBySeriesType(series, 'heatmap')) {
registerComponents = [HeatmapChart].concat(_toConsumableArray(registerComponents));
} // register map component
if (enableComponentBySeriesType(series, 'map')) {
registerComponents = [MapChart].concat(_toConsumableArray(registerComponents));
} // register sankey component
if (enableComponentBySeriesType(series, 'sankey')) {
registerComponents = [SankeyChart].concat(_toConsumableArray(registerComponents));
} // register funnel component
if (enableComponentBySeriesType(series, 'funnel')) {
registerComponents = [FunnelChart].concat(_toConsumableArray(registerComponents));
} // register gauge component
if (enableComponentBySeriesType(series, 'gauge')) {
registerComponents = [GaugeChart].concat(_toConsumableArray(registerComponents));
} // register pictorialBar component
if (enableComponentBySeriesType(series, 'pictorialBar')) {
registerComponents = [PictorialBarChart].concat(_toConsumableArray(registerComponents));
} // register themeRiver component
if (enableComponentBySeriesType(series, 'themeRiver')) {
registerComponents = [ThemeRiverChart].concat(_toConsumableArray(registerComponents));
} // register custom component
if (enableComponentBySeriesType(series, 'custom')) {
registerComponents = [CustomChart].concat(_toConsumableArray(registerComponents));
} // register markPoint Component
if (enableComponentBySeriesProp(series, 'markPoint')) {
registerComponents = [MarkPointComponent].concat(_toConsumableArray(registerComponents));
} // register markLine Component
if (enableComponentBySeriesProp(series, 'markLine')) {
registerComponents = [MarkLineComponent].concat(_toConsumableArray(registerComponents));
} // register markArea Component
if (enableComponentBySeriesProp(series, 'markArea')) {
registerComponents = [MarkAreaComponent].concat(_toConsumableArray(registerComponents));
}
}
return registerComponents;
};
var EChartsNextForReactCore = function EChartsNextForReactCore(props) {
var style = props.style,
className = props.className,
theme = props.theme,
opts = props.opts,
option = props.option,
notMerge = props.notMerge,
lazyUpdate = props.lazyUpdate,
showLoading = props.showLoading,
onChartReady = props.onChartReady,
onEvents = props.onEvents,
_props$renderType = props.renderType,
renderType = _props$renderType === void 0 ? 'canvas' : _props$renderType;
var isCanvas = renderType === 'canvas'; // necessary Component
var useOps = getRegisterComponents(option, isCanvas);
useEffect(function () {
use(useOps);
}, []);
var chartRefElements = useRef(null);
var getChartInstance = function getChartInstance() {
if (chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current) {
var _echarts$getInstanceB;
return (_echarts$getInstanceB = getInstanceByDom(chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current)) !== null && _echarts$getInstanceB !== void 0 ? _echarts$getInstanceB : init(chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current, theme, opts);
}
return undefined;
};
var getChartDom = function getChartDom() {
var chartObj = getChartInstance();
if (chartObj) {
var _lazyUpdate;
chartObj.setOption(option, notMerge !== null && notMerge !== void 0 ? notMerge : false, (_lazyUpdate = !!lazyUpdate) !== null && _lazyUpdate !== void 0 ? _lazyUpdate : false);
if (showLoading) {
chartObj.showLoading();
} else {
chartObj.hideLoading();
}
return chartObj;
}
return undefined;
};
var bindEvents = function bindEvents() {
var chartElms = getChartDom();
if (!isEmpty(onEvents) && chartElms) {
var _loop = function _loop() {
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
key = _Object$entries$_i[0],
func = _Object$entries$_i[1];
if (Object.prototype.hasOwnProperty.call(onEvents, key) && isString(key) && isFunction(func)) {
chartElms.on(key, function (param) {
func(param, chartElms);
});
}
};
// @ts-ignore
// eslint-disable-next-line no-restricted-syntax
for (var _i = 0, _Object$entries = Object.entries(onEvents); _i < _Object$entries.length; _i++) {
_loop();
}
}
};
var renderChart = function renderChart() {
var chartObj = getChartDom();
bindEvents();
if (chartObj) {
if (isFunction(onChartReady)) {
onChartReady(chartObj);
} else if (chartRefElements) {
bind(chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current, function () {
try {
chartObj === null || chartObj === void 0 ? void 0 : chartObj.resize();
} catch (e) {
console.error(e);
}
});
}
}
};
var disposeCurrentChart = function disposeCurrentChart() {
if (chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current) {
clear(chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current);
dispose(chartRefElements === null || chartRefElements === void 0 ? void 0 : chartRefElements.current);
}
};
useMount(function () {
renderChart();
});
useEffect(function () {
disposeCurrentChart();
renderChart();
}, [theme, opts, onEvents]);
useEffect(function () {
var chartDom = getChartDom(); // @ts-ignore
if (chartDom === null || chartDom === void 0 ? void 0 : chartDom._dom) {
// @ts-ignore
bind(chartDom._dom, function () {
try {
chartDom === null || chartDom === void 0 ? void 0 : chartDom.resize();
} catch (e) {
console.error(e);
}
});
}
}, [style, className, showLoading]);
useUnmount(function () {
disposeCurrentChart();
});
return /*#__PURE__*/React.createElement("div", {
ref: chartRefElements,
style: _objectSpread2({
height: 360
}, style),
className: classNames('echarts-next-for-react', className)
});
};
EChartsNextForReactCore.defaultProps = {
notMerge: false,
lazyUpdate: false,
showLoading: false
};
export default EChartsNextForReactCore;