@gravity-ui/chartkit 0.9.1 → 0.10.0

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
 import type { ChartKitWidgetRef } from '../../../types';
-import type { IndicatorWidgetProps } from '../types';
 import './IndicatorWidget.css';
-declare const IndicatorWidget: React.ForwardRefExoticComponent<IndicatorWidgetProps & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+declare const IndicatorWidget: React.ForwardRefExoticComponent<{
+    type: "indicator";
+    data: import("../types").IndicatorWidgetData;
+    id?: string | undefined;
+    isMobile?: boolean | undefined;
+    onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
+} & {
+    formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;
+} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
 export default IndicatorWidget;

package/build/plugins/indicator/renderer/IndicatorWidget.js

@@ -10,7 +10,7 @@ const b = block('chartkit-indicator');
 const IndicatorWidget = React.forwardRef(
 // _ref needs to avoid this React warning:
 // "forwardRef render functions accept exactly two parameters: props and ref"
-(props, _ref) => {
+function IndicatorWidgetInner(props, _ref) {
     const { onLoad, formatNumber, data: { data = [], defaultColor }, } = props;
     React.useLayoutEffect(() => {
         // TODO: swap to onRender after https://github.com/gravity-ui/chartkit/issues/33

package/build/plugins/indicator/types.d.ts

@@ -1,4 +1,3 @@
-import type { ChartKitFormatNumber } from '../../types';
 export declare type IndicatorWidgetDataItem = {
     content: {
         current: {
@@ -14,8 +13,3 @@ export declare type IndicatorWidgetData = {
     data?: IndicatorWidgetDataItem[];
     defaultColor?: string;
 };
-export declare type IndicatorWidgetProps = {
-    data: IndicatorWidgetData;
-    onLoad?: () => void;
-    formatNumber?: ChartKitFormatNumber;
-};

package/build/plugins/shared/format-number/format-number.d.ts

@@ -0,0 +1,4 @@
+import type { FormatOptions, FormatNumberOptions } from './types';
+export declare const formatBytes: (value: number, options?: FormatOptions) => string;
+export declare const formatDuration: (value: number, options?: FormatOptions) => string;
+export declare const formatNumber: (value: number | string, options?: FormatNumberOptions) => string;

package/build/plugins/shared/format-number/format-number.js

@@ -0,0 +1,88 @@
+import ru from './i18n/ru.json';
+import en from './i18n/en.json';
+import { i18nInstance, makeInstance } from './i18n/i18n';
+const i18n = makeInstance('chartkit-units', { ru, en });
+const unitFormatter = ({ exponent, unitsI18nKeys, unitDelimiterI18nKey, }) => {
+    return function formatUnit(value, options = {}) {
+        const { precision, unitRate, showRankDelimiter = true, lang } = options;
+        const i18nLang = i18nInstance.lang;
+        if (lang) {
+            i18nInstance.setLang(lang);
+        }
+        let resultUnitRate;
+        if (typeof unitRate === 'number') {
+            resultUnitRate = unitRate;
+        }
+        else {
+            resultUnitRate = 1;
+            while (Math.abs(value / Math.pow(exponent, resultUnitRate)) >= 1 &&
+                resultUnitRate < 10 &&
+                i18n(unitsI18nKeys[resultUnitRate])) {
+                resultUnitRate++;
+            }
+            resultUnitRate--;
+        }
+        let result = value / Math.pow(exponent, resultUnitRate);
+        if (typeof precision === 'number') {
+            result = Number(result.toFixed(precision));
+        }
+        else if (precision === 'auto' && result % 1 !== 0) {
+            result = Number(result.toFixed(Math.abs(result) > 1 ? 2 : 4));
+        }
+        result = new Intl.NumberFormat(lang !== null && lang !== void 0 ? lang : i18nLang, {
+            minimumFractionDigits: typeof precision === 'number' ? precision : 0,
+            maximumFractionDigits: 20,
+            useGrouping: showRankDelimiter,
+        }).format(result);
+        const unit = i18n(unitsI18nKeys[resultUnitRate]);
+        const delimiter = i18n(unitDelimiterI18nKey);
+        i18nInstance.setLang(i18nLang);
+        return `${result}${delimiter}${unit}`;
+    };
+};
+export const formatBytes = unitFormatter({
+    exponent: 1024,
+    unitDelimiterI18nKey: 'value_space-delimiter',
+    unitsI18nKeys: ['value_short-bytes', 'value_short-kilobytes', 'value_short-megabytes'],
+});
+export const formatDuration = unitFormatter({
+    exponent: 1000,
+    unitDelimiterI18nKey: 'value_space-delimiter',
+    unitsI18nKeys: ['value_short-milliseconds', 'value_short-seconds', 'value_short-minutes'],
+});
+const baseFormatNumber = unitFormatter({
+    exponent: 1000,
+    unitDelimiterI18nKey: 'value_number-delimiter',
+    unitsI18nKeys: [
+        'value_short-empty',
+        'value_short-k',
+        'value_short-m',
+        'value_short-b',
+        'value_short-t',
+    ],
+});
+const NUMBER_UNIT_RATE_BY_UNIT = {
+    default: 0,
+    auto: undefined,
+    k: 1,
+    m: 2,
+    b: 3,
+    t: 4,
+};
+export const formatNumber = (value, options = {}) => {
+    if (Number.isNaN(value) || Number.isNaN(Number(value))) {
+        return new Intl.NumberFormat('en').format(Number(value));
+    }
+    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, unitRate, labelMode, } = options;
+    let changedMultiplier = multiplier;
+    let prePostfix = '';
+    if (format === 'percent') {
+        changedMultiplier = 100;
+        prePostfix = '%';
+    }
+    if (labelMode === 'percent') {
+        prePostfix = '%';
+    }
+    const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: unitRate !== null && unitRate !== void 0 ? unitRate : NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
+    return `${prefix}${formattedValue}${prePostfix}${postfix}`;
+};

package/build/plugins/shared/format-number/format-number.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/plugins/shared/format-number/format-number.test.js

@@ -0,0 +1,14 @@
+import { i18nInstance } from './i18n/i18n';
+import { formatNumber } from './format-number';
+i18nInstance.setLang('en');
+describe('plugins/shared', () => {
+    test.each([
+        ['not-a-number', undefined, 'NaN'],
+        [NaN, undefined, 'NaN'],
+        ['0.2211556', undefined, '0.2211556'],
+        ['0.2211556', { precision: 4 }, '0.2212'],
+    ])('formatNumber (args: {value: %p, options: %p})', (value, options, expected) => {
+        const result = formatNumber(value, options);
+        expect(result).toEqual(expected);
+    });
+});

package/build/plugins/shared/format-number/i18n/en.json

@@ -0,0 +1,17 @@
+{
+  "chartkit-units": {
+    "value_short-bytes": "B",
+    "value_short-kilobytes": "KB",
+    "value_short-megabytes": "MB",
+    "value_short-milliseconds": "ms",
+    "value_short-seconds": "s",
+    "value_short-minutes": "m",
+    "value_short-empty": "",
+    "value_short-k": "K",
+    "value_short-m": "M",
+    "value_short-b": "B",
+    "value_short-t": "T",
+    "value_space-delimiter": " ",
+    "value_number-delimiter": ""
+  }
+}

package/build/plugins/shared/format-number/i18n/i18n.d.ts

@@ -0,0 +1,5 @@
+import { I18N } from '@gravity-ui/i18n';
+declare type KeysetData = Parameters<InstanceType<typeof I18N>['registerKeysets']>[1];
+declare const i18nInstance: I18N;
+declare const makeInstance: (keysetName: string, keysetsData: Record<string, KeysetData>) => (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export { i18nInstance, makeInstance };

package/build/plugins/shared/format-number/i18n/i18n.js

@@ -0,0 +1,8 @@
+import { I18N } from '@gravity-ui/i18n';
+const i18nInstance = new I18N();
+i18nInstance.setLang('ru');
+const makeInstance = (keysetName, keysetsData) => {
+    Object.entries(keysetsData).forEach(([key, value]) => i18nInstance.registerKeysets(key, value));
+    return i18nInstance.i18n.bind(i18nInstance, keysetName);
+};
+export { i18nInstance, makeInstance };

package/build/plugins/shared/format-number/i18n/ru.json

@@ -0,0 +1,17 @@
+{
+  "chartkit-units": {
+    "value_short-bytes": "Б",
+    "value_short-kilobytes": "КБ",
+    "value_short-megabytes": "МБ",
+    "value_short-milliseconds": "мс",
+    "value_short-seconds": "с",
+    "value_short-minutes": "м",
+    "value_short-empty": "",
+    "value_short-k": "K",
+    "value_short-m": "M",
+    "value_short-b": "B",
+    "value_short-t": "T",
+    "value_space-delimiter": " ",
+    "value_number-delimiter": ""
+  }
+}

package/build/plugins/shared/format-number/types.d.ts

@@ -0,0 +1,14 @@
+export declare type FormatOptions = {
+    precision?: number | 'auto';
+    unitRate?: number;
+    showRankDelimiter?: boolean;
+    lang?: string;
+    labelMode?: string;
+};
+export declare type FormatNumberOptions = FormatOptions & {
+    format?: 'number' | 'percent';
+    multiplier?: number;
+    prefix?: string;
+    postfix?: string;
+    unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
+};

package/build/plugins/shared/format-number/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/shared/index.d.ts

@@ -0,0 +1,2 @@
+export { formatNumber } from './format-number/format-number';
+export type { FormatNumberOptions } from './format-number/types';

package/build/plugins/shared/index.js

@@ -0,0 +1 @@
+export { formatNumber } from './format-number/format-number';

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
-import { ChartKitWidgetRef } from '../../../types';
-import type { YagrWidgetProps } from '../types';
+import type { ChartKitWidgetRef } from '../../../types';
 import './polyfills';
 import './YagrWidget.css';
-declare const YagrWidget: React.ForwardRefExoticComponent<YagrWidgetProps & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+declare const YagrWidget: React.ForwardRefExoticComponent<{
+    type: "yagr";
+    data: import("../types").YagrWidgetData;
+    id?: string | undefined;
+    isMobile?: boolean | undefined;
+    onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
+} & {} & {
+    id: string;
+} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
 export default YagrWidget;

package/build/plugins/yagr/renderer/YagrWidget.js

@@ -4,6 +4,7 @@ import debounce from 'lodash/debounce';
 import { useThemeType } from '@gravity-ui/uikit';
 import YagrComponent from 'yagr/dist/react';
 import { defaults, } from 'yagr';
+import { settings } from '../../../libs';
 import { formatTooltip } from './tooltip/tooltip';
 import { synchronizeTooltipTablesCellsWidth } from './synchronizeTooltipTablesCellsWidth';
 import './polyfills';
@@ -114,7 +115,7 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         }
     };
     const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
-    config.settings = Object.assign({ locale: props.lang, theme }, (config.settings || {}));
+    config.settings = Object.assign({ locale: settings.get('lang'), theme }, (config.settings || {}));
     if (((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.enabled) !== false) {
         config.tooltip = config.tooltip || {};
         config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || renderTooltip;

package/build/plugins/yagr/types.d.ts

@@ -1,5 +1,4 @@
 import type { default as YagrLib, RawSerieData, YagrConfig } from 'yagr';
-import type { ChartKitLang, ChartKitOnLoadData } from '../../types';
 export declare type Yagr = YagrLib;
 export declare type YagrWidgetData = {
     data: {
@@ -13,9 +12,3 @@ export declare type YagrWidgetData = {
         };
     }>;
 };
-export declare type YagrWidgetProps = {
-    id: string;
-    data: YagrWidgetData;
-    lang?: ChartKitLang;
-    onLoad?: (data?: ChartKitOnLoadData<'yagr'>) => void;
-};

package/build/types/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { ChartkitWidget } from './widget';
+export type { ChartKitHolidays } from './misc';
 export declare type ChartKitLang = 'ru' | 'en';
 export declare type ChartkitType = keyof ChartkitWidget;
 export declare type ChartKitRef = {
@@ -15,7 +16,6 @@ export declare type ChartKitOnLoadData<T extends ChartkitType> = {
 export declare type ChartKitOnError = (data: {
     error: any;
 }) => void;
-export declare type ChartKitFormatNumber = <T = any>(value: number, options?: T) => string;
 export declare type ChartKitProps<T extends ChartkitType> = {
     type: T;
     data: ChartkitWidget[T]['data'];
@@ -23,7 +23,6 @@ export declare type ChartKitProps<T extends ChartkitType> = {
     isMobile?: boolean;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
     onError?: ChartKitOnError;
-    formatNumber?: ChartKitFormatNumber;
 } & {
     [key in keyof Omit<ChartkitWidget[T], 'data' | 'widget'>]: ChartkitWidget[T][key];
 };

package/build/types/misc.d.ts

@@ -0,0 +1,4 @@
+export declare type ChartKitHolidays = {
+    holiday: Record<string, Record<string, string>>;
+    weekend: Record<string, Record<string, string>>;
+};

package/build/types/misc.js

@@ -0,0 +1 @@
+export {};

package/build/types/widget.d.ts

@@ -1,6 +1,7 @@
 import type Yagr from 'yagr';
 import type { YagrWidgetData } from '../plugins/yagr/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
+import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
 export interface ChartkitWidget {
     yagr: {
         data: YagrWidgetData;
@@ -9,5 +10,21 @@ export interface ChartkitWidget {
     indicator: {
         data: IndicatorWidgetData;
         widget: never;
+        formatNumber?: <T = any>(value: number, options?: T) => string;
+    };
+    highcharts: {
+        data: HighchartsWidgetData;
+        widget: Highcharts.Chart | null;
+        hoistConfigError?: boolean;
+        nonBodyScroll?: boolean;
+        splitTooltip?: boolean;
+        onChange?: (data: {
+            type: 'PARAMS_CHANGED';
+            data: {
+                params: StringParams;
+            };
+        }, state: {
+            forceUpdate: boolean;
+        }, callExternalOnChange?: boolean) => void;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -14,7 +14,10 @@
   },
   "dependencies": {
     "bem-cn-lite": "^4.1.0",
+    "highcharts": "^8.2.2",
+    "highcharts-react-official": "^3.0.0",
     "lodash": "^4.17.21",
+    "react-split-pane": "^0.1.92",
     "yagr": "1.3.7"
   },
   "devDependencies": {