@gravity-ui/chartkit 4.5.0 → 4.6.1

package/build/plugins/highcharts/renderer/components/HighchartsComponent.js

@@ -43,7 +43,7 @@ export class HighchartsComponent extends React.PureComponent {
         };
     }
     static getDerivedStateFromProps(nextProps, prevState) {
-        var _a;
+        var _a, _b;
         const isCurrentTooltipSplitted = get(prevState, 'options.tooltip.splitTooltip');
         const tooltipTypeWasChanged = isCurrentTooltipSplitted !== nextProps.splitTooltip;
         if (nextProps.data === prevState.prevData && !tooltipTypeWasChanged) {
@@ -54,14 +54,14 @@ export class HighchartsComponent extends React.PureComponent {
             const entryId = get(nextProps, 'data.entryId');
             const configOptions = Object.assign({
                 nonBodyScroll,
-                drillDownData: nextProps.data.config.drillDown,
+                drillDownData: (_a = nextProps.data.config) === null || _a === void 0 ? void 0 : _a.drillDown,
                 splitTooltip: nextProps.splitTooltip,
                 highcharts: libraryConfig,
                 entryId,
             }, config);
             const { config: options, callback } = getGraph({
                 options: configOptions,
-                holidays: (_a = settings.get('extra')) === null || _a === void 0 ? void 0 : _a.holidays,
+                holidays: (_b = settings.get('extra')) === null || _b === void 0 ? void 0 : _b.holidays,
                 data,
                 comments,
                 isMobile,

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

@@ -1,4 +1,5 @@
 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 getNumberUnitRate: (value: number) => number;
 export declare const formatNumber: (value: number | string, options?: FormatNumberOptions) => string;

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

@@ -2,6 +2,15 @@ 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 });
+function getUnitRate(value, exponent, unitsI18nKeys) {
+    let resultUnitRate = 1;
+    while (Math.abs(value / Math.pow(exponent, resultUnitRate)) >= 1 &&
+        resultUnitRate < 10 &&
+        i18n(unitsI18nKeys[resultUnitRate])) {
+        resultUnitRate++;
+    }
+    return resultUnitRate - 1;
+}
 const unitFormatter = ({ exponent, unitsI18nKeys, unitDelimiterI18nKey, }) => {
     return function formatUnit(value, options = {}) {
         const { precision, unitRate, showRankDelimiter = true, lang } = options;
@@ -9,19 +18,7 @@ const unitFormatter = ({ exponent, unitsI18nKeys, unitDelimiterI18nKey, }) => {
         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--;
-        }
+        const resultUnitRate = typeof unitRate === 'number' ? unitRate : getUnitRate(value, exponent, unitsI18nKeys);
         let result = value / Math.pow(exponent, resultUnitRate);
         if (typeof precision === 'number') {
             result = Number(result.toFixed(precision));
@@ -50,17 +47,19 @@ export const formatDuration = unitFormatter({
     unitDelimiterI18nKey: 'value_space-delimiter',
     unitsI18nKeys: ['value_short-milliseconds', 'value_short-seconds', 'value_short-minutes'],
 });
+const BASE_NUMBER_FORMAT_UNIT_KEYS = [
+    'value_short-empty',
+    'value_short-k',
+    'value_short-m',
+    'value_short-b',
+    'value_short-t',
+];
 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',
-    ],
+    unitsI18nKeys: BASE_NUMBER_FORMAT_UNIT_KEYS,
 });
+export const getNumberUnitRate = (value) => getUnitRate(value, 1000, BASE_NUMBER_FORMAT_UNIT_KEYS);
 const NUMBER_UNIT_RATE_BY_UNIT = {
     default: 0,
     auto: undefined,

package/build/types/widget-data/axis.d.ts

@@ -4,11 +4,23 @@ export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
 export type ChartKitWidgetAxisLabels = {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
-    /** The pixel padding for axis labels. */
+    /** The label's pixel distance from the perimeter of the plot area.
+     *
+     * @default: 10
+     */
+    margin?: number;
+    /** The pixel padding for axis labels, to ensure white space between them.
+     *
+     * @defaults: 5
+     * */
     padding?: number;
     dateFormat?: string;
     numberFormat?: FormatNumberOptions;
     style?: Partial<BaseTextStyle>;
+    /** For horizontal axes, enable label rotation to prevent overlapping labels.
+     * If there is enough space, labels are not rotated.
+     * As the chart gets narrower, it will start rotating the labels -45 degrees. */
+    autoRotation?: boolean;
 };
 export type ChartKitWidgetAxis = {
     categories?: string[];

package/build/types/widget-data/legend.d.ts

@@ -1,35 +1,52 @@
+import type { BaseTextStyle } from './base';
 export type ChartKitWidgetLegend = {
     enabled?: boolean;
-    /** The horizontal alignment of the legend box within the chart area.
+    /**
+     * The horizontal alignment of the legend box within the chart area.
      *
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
-    /** Defines the pixel distance between each legend item
+    /**
+     * Defines the pixel distance between each legend item
      *
      * @default 20
      * */
     itemDistance?: number;
+    /** CSS styles for each legend item */
+    itemStyle?: BaseTextStyle;
+    /**
+     * The space between the legend and the axis labels or chart area.
+     *
+     * @default 15
+     */
+    margin?: number;
 };
 export type BaseLegendSymbol = {
-    /** The pixel padding between the legend item symbol and the legend item text.
+    /**
+     * The pixel padding between the legend item symbol and the legend item text.
      *
      * @default 5
      * */
     padding?: number;
 };
 export type RectLegendSymbolOptions = BaseLegendSymbol & {
-    /** The pixel width of the symbol for series types that use a rectangle in the legend
+    /**
+     * The pixel width of the symbol for series types that use a rectangle in the legend
      *
      * @default 10
      * */
     width?: number;
-    /** The pixel width of the symbol for series types that use a rectangle in the legend
+    /**
+     * The pixel width of the symbol for series types that use a rectangle in the legend
      *
      * @default 10
      * */
     height?: number;
-    /** The border radius of the symbol for series types that use a rectangle in the legend.
-     * Defaults to half the symbolHeight, effectively creating a circle. */
+    /**
+     * The border radius of the symbol for series types that use a rectangle in the legend.
+     *
+     * Defaults to half the symbolHeight, effectively creating a circle.
+     */
     radius?: number;
 };

package/build/utils/common.d.ts

@@ -1 +1,2 @@
+export declare const randomString: (length: number, chars: string) => string;
 export declare const getRandomCKId: () => string;

package/build/utils/common.js

@@ -1,4 +1,4 @@
-const randomString = (length, chars) => {
+export const randomString = (length, chars) => {
     let result = '';
     for (let i = length; i > 0; --i) {
         result += chars[Math.floor(Math.random() * chars.length)];

package/build/utils/index.d.ts

@@ -1,3 +1,3 @@
-export { getRandomCKId } from './common';
+export { getRandomCKId, randomString } from './common';
 export { typedMemo } from './react';
 export { getChartPerformanceDuration, markChartPerformance } from './performance';

package/build/utils/index.js

@@ -1,3 +1,3 @@
-export { getRandomCKId } from './common';
+export { getRandomCKId, randomString } from './common';
 export { typedMemo } from './react';
 export { getChartPerformanceDuration, markChartPerformance } from './performance';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",

package/build/plugins/d3/renderer/hooks/useChartOptions/legend.d.ts

@@ -1,6 +0,0 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import type { PreparedLegend } from './types';
-export declare const getPreparedLegend: (args: {
-    legend: ChartKitWidgetData['legend'];
-    series: ChartKitWidgetData['series'];
-}) => PreparedLegend;

package/build/plugins/d3/renderer/hooks/useChartOptions/legend.js

@@ -1,12 +0,0 @@
-const LEGEND_LINE_HEIGHT = 15;
-export const getPreparedLegend = (args) => {
-    const { legend, series } = args;
-    const enabled = typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.data.length > 1;
-    const height = enabled ? LEGEND_LINE_HEIGHT : 0;
-    return {
-        align: (legend === null || legend === void 0 ? void 0 : legend.align) || 'center',
-        enabled,
-        itemDistance: (legend === null || legend === void 0 ? void 0 : legend.itemDistance) || 20,
-        height,
-    };
-};