Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import React from 'react';
import {i18n} from '../i18n';
import {CHARTKIT_ERROR_CODE, ChartKitError, settings} from '../libs';
import type {ChartKitProps, ChartKitRef, ChartKitType, ChartKitWidgetRef} from '../types';
import {getRandomCKId, typedMemo} from '../utils';
import {cn} from '../utils/cn';
import {ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
import {Loader} from './Loader/Loader';
import './ChartKit.scss';
const b = cn('chartkit');
type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
instanceRef?: React.ForwardedRef<ChartKitRef | undefined>;
};
const ChartKitComponent = <T extends ChartKitType>(props: ChartKitComponentProps<T>) => {
const widgetRef = React.useRef<ChartKitWidgetRef>();
const {instanceRef, id: propsId, type, isMobile, renderPluginLoader, ...restProps} = props;
const ckId = React.useMemo(() => getRandomCKId(), []);
const id = propsId || ckId;
const lang = settings.get('lang');
const plugins = settings.get('plugins');
const plugin = plugins.find((iteratedPlugin) => iteratedPlugin.type === type);
if (!plugin) {
throw new ChartKitError({
code: CHARTKIT_ERROR_CODE.UNKNOWN_PLUGIN,
message: i18n('error', 'label_unknown-plugin', {type}),
});
}
const ChartComponent = plugin.renderer;
React.useImperativeHandle(
instanceRef,
() => ({
reflow(details) {
if (widgetRef.current?.reflow) {
widgetRef.current.reflow(details);
}
},
}),
[],
);
return (
<React.Suspense fallback={<Loader renderPluginLoader={renderPluginLoader} />}>
<div className={b({mobile: isMobile}, 'chartkit-theme_common')}>
<ChartComponent ref={widgetRef} id={id} lang={lang} {...restProps} />
</div>
</React.Suspense>
);
};
const ChartKitComponentWithErrorBoundary = React.forwardRef<
ChartKitRef | undefined,
ChartKitProps<ChartKitType>
>(function ChartKitComponentWithErrorBoundary(props, ref) {
return (
<ErrorBoundary onError={props.onError} data={props.data} renderError={props.renderError}>
<ChartKitComponent instanceRef={ref} {...props} />
</ErrorBoundary>
);
}) /* https://stackoverflow.com/a/58473012 */ as <T extends ChartKitType>(
props: ChartKitProps<T> & {ref?: React.ForwardedRef<ChartKitRef | undefined>},
) => ReturnType<typeof ChartKitComponent>;
export const ChartKit = typedMemo(ChartKitComponentWithErrorBoundary);
|