scichart-react
Version:
React wrapper for SciChart JS
125 lines • 6.74 kB
JavaScript
;
"use client";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __rest = (this && this.__rest) || function (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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SciChartReact = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const scichart_1 = require("scichart");
const SciChartSurfaceContext_1 = require("./SciChartSurfaceContext");
const utils_1 = require("./utils");
const SciChartGroupContext_1 = require("./SciChartGroupContext");
const DefaultFallback_1 = require("./DefaultFallback");
const constants_1 = require("./constants");
// use base URL to resolve WASM module
scichart_1.SciChartSurface.configure({
wasmUrl: "/scichart2d.wasm",
dataUrl: "/scichart2d.data"
});
scichart_1.SciChart3DSurface.configure({
wasmUrl: "/scichart3d.wasm",
dataUrl: "/scichart3d.data"
});
function SciChartComponent(props) {
const { initChart, config, fallback, onInit, onDelete, innerContainerProps } = props, divElementProps = __rest(props, ["initChart", "config", "fallback", "onInit", "onDelete", "innerContainerProps"]);
if ((!initChart && !config) || (initChart && config)) {
throw new Error(constants_1.conflictingConfigsMessage);
}
const isMountedRef = (0, utils_1.useIsMountedRef)();
const innerContainerRef = (0, react_1.useRef)(null);
const initPromiseRef = (0, react_1.useRef)();
const initResultRef = (0, react_1.useRef)(null);
const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
const [chartRoot] = (0, react_1.useState)(utils_1.createChartRoot);
const cleanupCallbackRef = (0, react_1.useRef)();
(0, react_1.useEffect)(() => {
// generate guid to distinguish between effect calls in StrictMode
const chartId = (0, scichart_1.generateGuid)();
groupContext === null || groupContext === void 0 ? void 0 : groupContext.addChartToGroup(chartId, false, null);
const rootElement = innerContainerRef.current;
rootElement.appendChild(chartRoot);
const initializationFunction = initChart
? initChart
: (0, utils_1.createChartFromConfig)(config);
let cancelled = false;
const runInit = () => __awaiter(this, void 0, void 0, function* () {
return initializationFunction(chartRoot).then(result => {
if (!result.sciChartSurface) {
throw new Error(constants_1.wrongInitResultMessage);
}
// check if the component was unmounted before init finished
if (isMountedRef.current && chartRoot) {
groupContext === null || groupContext === void 0 ? void 0 : groupContext.addChartToGroup(chartId, true, result);
initResultRef.current = result;
setIsInitialized(true);
if (onInit) {
cleanupCallbackRef.current = onInit(result);
}
}
else {
cancelled = true;
}
return result;
});
});
// workaround to handle StrictMode
const initPromise = initPromiseRef.current ? initPromiseRef.current.then(runInit) : runInit();
initPromiseRef.current = initPromise;
const performCleanup = (initResult) => {
if (!cancelled && cleanupCallbackRef.current) {
cleanupCallbackRef.current();
cleanupCallbackRef.current = undefined;
}
if (!cancelled && onDelete) {
onDelete(initResult);
}
initResultRef.current = null;
setIsInitialized(false);
groupContext === null || groupContext === void 0 ? void 0 : groupContext.removeChartFromGroup(chartId);
initResult.sciChartSurface.delete();
};
return () => {
// wait for init to finish before deleting it
initPromise.then(performCleanup);
};
}, []);
const groupContext = (0, react_1.useContext)(SciChartGroupContext_1.SciChartGroupContext);
const mergedInnerContainerProps = Object.assign(Object.assign({}, innerContainerProps), { style: Object.assign({ height: "100%", width: "100%" }, innerContainerProps === null || innerContainerProps === void 0 ? void 0 : innerContainerProps.style) });
const fallbackWrapperStyle = {
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0,
zIndex: 12
};
return ((0, jsx_runtime_1.jsx)(SciChartSurfaceContext_1.SciChartSurfaceContext.Provider, { value: initResultRef.current, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, divElementProps, { style: Object.assign({ position: "relative" }, divElementProps.style), children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({}, mergedInnerContainerProps, { ref: innerContainerRef })), isInitialized ? props.children : null] }), !isInitialized ? (fallback ? ((0, jsx_runtime_1.jsx)("div", { style: fallbackWrapperStyle, children: fallback })) : ((0, jsx_runtime_1.jsx)(DefaultFallback_1.DefaultFallback, {}))) : null] })) }));
}
/**
* The component for rendering a chart surface.
* There are 2 ways to setup a chart.
* It requires a chart configuration object passed via `config` or an initialization function passed via `initChart`
* @param props {@link TChartComponentProps}
* @returns a React wrapper component that contains a chart
*/
exports.SciChartReact = SciChartComponent;
//# sourceMappingURL=SciChart.js.map