@visactor/react-vchart
Version:
The react version of VChart 4.x
127 lines (123 loc) • 7.99 kB
JavaScript
;
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
void 0 === k2 && (k2 = k);
var desc = Object.getOwnPropertyDescriptor(m, k);
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
enumerable: !0,
get: function() {
return m[k];
}
}), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
void 0 === k2 && (k2 = k), o[k2] = m[k];
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
Object.defineProperty(o, "default", {
enumerable: !0,
value: v
});
} : function(o, v) {
o.default = v;
}), __importStar = this && this.__importStar || function(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
return __setModuleDefault(result, mod), result;
}, __importDefault = this && this.__importDefault || function(mod) {
return mod && mod.__esModule ? mod : {
default: mod
};
};
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.createChart = void 0;
const react_1 = __importStar(require("react")), withContainer_1 = __importDefault(require("../containers/withContainer")), chart_1 = __importDefault(require("../context/chart")), vutils_1 = require("@visactor/vutils"), util_1 = require("../util"), constants_1 = require("../constants"), eventsUtils_1 = require("../eventsUtils"), util_2 = require("../components/tooltip/util"), notSpecKeys = [ ...constants_1.REACT_PRIVATE_PROPS, ...eventsUtils_1.CHART_EVENTS_KEYS, "vchartConstructor", "vchartConstrouctor", "useSyncRender", "skipFunctionDiff", "onError", "onReady", "spec", "container", "options", "morphConfig" ], defaultMorphConfig = {
morph: !1,
enableExitAnimation: !1
}, getComponentId = (child, index) => `${child && child.type && (child.type.displayName || child.type.name)}-${index}`, parseSpecFromChildren = props => {
const specFromChildren = {};
return (0, util_1.toArray)(props.children).map(((child, index) => {
const parseSpec = child && child.type && child.type.parseSpec;
if (parseSpec && child.props) {
const specResult = parseSpec((0, vutils_1.isNil)(child.props.componentId) ? Object.assign(Object.assign({}, child.props), {
componentId: getComponentId(child, index)
}) : child.props);
specResult.isSingle ? specFromChildren[specResult.specName] = specResult.spec : (specFromChildren[specResult.specName] || (specFromChildren[specResult.specName] = []),
specFromChildren[specResult.specName].push(specResult.spec));
}
})), specFromChildren;
}, BaseChart = react_1.default.forwardRef(((props, ref) => {
const [updateId, setUpdateId] = (0, react_1.useState)(0), chartContext = (0, react_1.useRef)({});
(0, react_1.useImperativeHandle)(ref, (() => {
var _a;
return null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.chart;
}));
const hasSpec = !!props.spec, isUnmount = (0, react_1.useRef)(!1), prevSpec = (0,
react_1.useRef)((0, vutils_1.pickWithout)(props, notSpecKeys)), specFromChildren = (0,
react_1.useRef)(null), eventsBinded = react_1.default.useRef(null), skipFunctionDiff = !!props.skipFunctionDiff, [tooltipNode, setTooltipNode] = (0,
react_1.useState)(null), parseSpec = props => {
let spec;
hasSpec && props.spec ? (spec = props.spec, (0, vutils_1.isValid)(props.data) && (spec = Object.assign(Object.assign({}, props.spec), {
data: props.data
}))) : spec = Object.assign(Object.assign({}, prevSpec.current), specFromChildren.current);
const tooltipSpec = (0, util_2.initCustomTooltip)(setTooltipNode, props, spec.tooltip);
return tooltipSpec && (spec.tooltip = tooltipSpec), spec;
}, handleChartRender = rebindEvent => {
if (!isUnmount.current) {
if (!chartContext.current || !chartContext.current.chart) return;
rebindEvent && (0, eventsUtils_1.bindEventsToChart)(chartContext.current.chart, props, eventsBinded.current, eventsUtils_1.CHART_EVENTS),
setUpdateId(updateId + 1), props.onReady && props.onReady(chartContext.current.chart, 0 === updateId);
}
};
return (0, react_1.useEffect)((() => {
var _a, _b, _c;
const newSpecFromChildren = hasSpec ? null : parseSpecFromChildren(props);
if (!(null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.chart)) return hasSpec || (specFromChildren.current = newSpecFromChildren),
(props => {
var _a;
const cs = new (null !== (_a = props.vchartConstructor) && void 0 !== _a ? _a : props.vchartConstrouctor)(parseSpec(props), Object.assign(Object.assign({}, props.options), {
onError: props.onError,
autoFit: !0,
dom: props.container
}));
chartContext.current = Object.assign(Object.assign({}, chartContext.current), {
chart: cs
}), isUnmount.current = !1;
})(props), chartContext.current.chart && ((0, eventsUtils_1.bindEventsToChart)(chartContext.current.chart, props, eventsBinded.current, eventsUtils_1.CHART_EVENTS),
chartContext.current.chart.renderSync({
reuse: !1
}), handleChartRender()), void (eventsBinded.current = props);
if (hasSpec) return void ((0, vutils_1.isEqual)(eventsBinded.current.spec, props.spec, {
skipFunction: skipFunctionDiff
}) ? eventsBinded.current.data !== props.data && (chartContext.current.chart.updateFullDataSync(props.data),
handleChartRender(!0), eventsBinded.current = props) : (chartContext.current.chart.updateSpecSync(parseSpec(props), void 0, null !== (_b = props.morphConfig) && void 0 !== _b ? _b : defaultMorphConfig),
handleChartRender(!0), eventsBinded.current = props));
const newSpec = (0, vutils_1.pickWithout)(props, notSpecKeys);
(0, vutils_1.isEqual)(newSpec, prevSpec.current, {
skipFunction: skipFunctionDiff
}) && (0, vutils_1.isEqual)(newSpecFromChildren, specFromChildren.current, {
skipFunction: skipFunctionDiff
}) || (prevSpec.current = newSpec, specFromChildren.current = newSpecFromChildren,
chartContext.current.chart.updateSpecSync(parseSpec(props), void 0, null !== (_c = props.morphConfig) && void 0 !== _c ? _c : defaultMorphConfig),
handleChartRender(!0), eventsBinded.current = props);
}), [ props ]), (0, react_1.useEffect)((() => () => {
chartContext && chartContext.current && chartContext.current.chart && (chartContext.current.chart.release(),
chartContext.current.chart = null), eventsBinded.current = null, isUnmount.current = !0;
}), []), react_1.default.createElement(chart_1.default.Provider, {
value: chartContext.current
}, (0, util_1.toArray)(props.children).map(((child, index) => {
if ("string" == typeof child) return null;
const childId = getComponentId(child, index);
return react_1.default.createElement(react_1.default.Fragment, {
key: childId
}, react_1.default.cloneElement(child, {
updateId: updateId,
componentId: childId
}));
})), tooltipNode);
})), createChart = (componentName, defaultProps, registers) => {
registers && registers.length && defaultProps.vchartConstructor && defaultProps.vchartConstructor.useRegisters(registers);
const Com = (0, withContainer_1.default)(BaseChart, componentName, (props => defaultProps ? Object.assign(props, defaultProps) : props));
return Com.displayName = componentName, Com;
};
exports.createChart = createChart;
//# sourceMappingURL=BaseChart.js.map