@gravity-ui/chartkit 0.9.1 → 0.10.1

package/build/plugins/highcharts/renderer/helpers/tooltip/tooltip.css

@@ -0,0 +1,367 @@
+.chartkit-highcharts-tooltip-container_type_timeline {
+  width: 100%;
+  height: 100%;
+}
+
+.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+}
+
+.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+}
+
+.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+}
+
+.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
+}
+
+._tooltip {
+  border-radius: 5px;
+  background: var(--highcharts-tooltip-bg);
+  color: var(--highcharts-tooltip-text);
+  font-size: 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+._tooltip_split-tooltip {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding-bottom: 12px;
+}
+
+._tooltip_split-tooltip table {
+  table-layout: fixed;
+}
+
+._tooltip_split-tooltip ._tooltip-rows__table tbody {
+  display: table-row-group;
+}
+
+@supports (padding: max(0px)) {
+  ._tooltip_split-tooltip {
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+  }
+}
+._tooltip table {
+  width: 100%;
+}
+
+._tooltip table td {
+  box-sizing: border-box;
+}
+
+._tooltip table td:last-child {
+  text-align: right;
+}
+
+._tooltip-fake-row {
+  height: 5px;
+}
+
+._tooltip-fake-row-heightless {
+  height: 0;
+}
+
+._tooltip-fake-row-heightless td {
+  padding: 0;
+}
+
+._tooltip-fake-row td:first-child {
+  width: 28px;
+}
+
+._tooltip-row {
+  width: 100%;
+}
+
+._tooltip-row td:first-child {
+  padding-left: 14px;
+}
+
+._tooltip-row td:last-child {
+  padding-right: 18px;
+}
+
+._tooltip-row td {
+  padding: 2px 4px;
+}
+
+._tooltip-row td._tooltip-rows__value-td, ._tooltip-row td._tooltip-rows__diff-td {
+  padding-bottom: 1px;
+}
+
+._tooltip-selected-row {
+  font-weight: 600;
+}
+
+._tooltip-comment-row td:last-child {
+  padding-right: 18px;
+}
+
+._tooltip-right__td {
+  padding-right: 14px;
+}
+
+._tooltip-right__td_with-split-tooltip {
+  border: none;
+}
+
+._tooltip-date {
+  padding: 10px 14px 4px;
+  max-width: 450px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+._tooltip-date-dayofweek {
+  display: inline-block;
+}
+
+._tooltip-date-dayofweek_weekend {
+  color: #ff0000;
+}
+
+._tooltip-rows__table {
+  border-spacing: 0;
+  width: 10px;
+}
+
+._tooltip-rows__table-footer {
+  display: table;
+  width: 100%;
+}
+
+._tooltip-rows__table thead {
+  display: table;
+  width: 100%;
+}
+
+._tooltip-rows__table thead._tooltip-header tr:not(._tooltip-fake-row):first-child td {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--highcharts-grid-line);
+}
+
+._tooltip-rows__table tbody {
+  display: block;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+._tooltip-rows__table tbody._tooltip-footer {
+  width: 100%;
+  display: table;
+}
+
+._tooltip-rows__table tbody._tooltip-list {
+  overflow-x: hidden;
+}
+
+._tooltip-rows__table tbody._tooltip-list ._tooltip-row-dark-bg {
+  background-color: var(--highcharts-tooltip-alternate-bg);
+}
+
+._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
+  background-color: var(--highcharts-tooltip-alternate-bg);
+}
+
+._tooltip-rows__table tbody ._hidden-rows-sum td {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+._tooltip-rows__table tbody td._hidden-rows-number {
+  text-align: left;
+  padding-right: 20px;
+}
+
+._tooltip-rows__table tbody td._hidden-rows-value {
+  font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
+  word-spacing: -3px;
+}
+
+._tooltip-rows__bubble-div {
+  display: inline-block;
+  width: 12px;
+  height: 6px;
+  margin-left: 1px;
+  margin-bottom: 1px;
+  border-radius: 1px;
+}
+
+._tooltip-rows__shape-div {
+  width: 38px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+._tooltip-rows__shape-td {
+  height: 20px;
+}
+
+._tooltip-rows__percent-td {
+  font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
+  word-spacing: -3px;
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
+._tooltip-rows__diff-td {
+  font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
+  word-spacing: -3px;
+  padding-left: 3px;
+  padding-right: 3px;
+  white-space: nowrap;
+}
+
+._tooltip-rows__comment-left-td {
+  position: relative;
+}
+
+._tooltip-rows__comment-left-div {
+  left: 2px;
+  position: absolute;
+  top: -7px;
+  bottom: 6px;
+  width: 10px;
+}
+
+._tooltip-rows__comment-div {
+  position: relative;
+  padding-left: 14px;
+  text-align: left;
+  font-size: 10px;
+  width: auto;
+  white-space: normal;
+  letter-spacing: 0.2px;
+  font-weight: normal;
+  line-height: 1.3;
+  color: #aaaaaa;
+}
+
+._tooltip-rows__bubble-td {
+  width: 28px;
+}
+
+._tooltip-rows__value-td {
+  font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
+  word-spacing: -3px;
+  white-space: nowrap;
+  padding-left: 12px;
+}
+
+._tooltip-rows__value-td_selected {
+  text-decoration: underline;
+}
+
+._tooltip-rows__name-td {
+  text-align: left;
+  white-space: nowrap;
+  padding-left: 10px;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._tooltip-rows__name-td_selected {
+  text-decoration: underline;
+}
+
+._tooltip-rows__summ-td {
+  padding: 6px 0 6px 3px;
+  color: var(--highcharts-tooltip-text-complementary);
+  font-size: 12px;
+  border-top: 1px solid var(--highcharts-grid-line);
+}
+
+._tooltip-rows__summ-td-value {
+  font-family: "Consolas", "Menlo", "Ubuntu Mono", monospace;
+  word-spacing: -3px;
+}
+
+._tooltip-rows__summ-td:first-child {
+  padding-left: 15px;
+  text-align: left;
+}
+
+._tooltip-rows__summ-td:last-child {
+  padding-right: 18px;
+  text-align: right;
+}
+
+._tooltip-left__td {
+  vertical-align: top;
+}
+
+._tooltip-right__td {
+  vertical-align: top;
+  opacity: 0.9;
+  border-left: 1px solid var(--highcharts-grid-line);
+  white-space: normal;
+  font-size: 8pt;
+  position: relative;
+  min-width: 120px;
+  max-width: 150px;
+  padding-left: 10px;
+}
+
+._tooltip-right__holiday-div {
+  padding-bottom: 5px;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+._tooltip-right__holiday-emoji {
+  font-size: 20px;
+}
+
+._tooltip-right__holiday-region {
+  color: #ffffff;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding-left: 5px;
+}
+
+._tooltip-right__traf-div {
+  text-align: left;
+  border-top: 3px solid;
+  padding-top: 3px;
+  font-size: 10px;
+  line-height: 1.3;
+  white-space: pre-line;
+  padding-bottom: 10px;
+  margin-top: 9px;
+  word-break: break-word;
+}
+
+._tooltip-right__traf-div_for-split-tooltip {
+  color: var(--yc-color-text-secondary);
+  padding-left: 8px;
+  border-top: none;
+  border-left: 2px solid;
+  margin-left: 6px;
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 5px;
+}
+
+._tooltip-right__traf-div:not(:first-child) {
+  margin-top: 7px;
+}
+
+._tooltip-right__margin-bot {
+  margin-bottom: 7px;
+}

package/build/plugins/highcharts/renderer/helpers/tooltip/types.d.ts

@@ -0,0 +1,85 @@
+import type { FormatNumberOptions } from '../../../../shared';
+import type { LineShapeType } from './constants';
+export declare type TooltipData = {
+    /** Tooltip lines data */
+    lines: Array<TooltipLine>;
+    /** Tooltip comments */
+    xComments?: Array<{
+        text: string;
+        color: string;
+    }>;
+    /** Comment text (set via manageTooltipConfig) */
+    commentDateText?: string;
+    /**
+     * Indicating that active line duplicated by displaying it on top of the main list
+     * default behavior - the active line is displayed on top of the main list only if it"does not fit" in the tooltip
+     */
+    activeRowAlwaysFirstInTooltip?: boolean;
+    /** Indicating that the chart is displayed in "split tooltip" mode */
+    splitTooltip?: boolean;
+    /** Text of the header of the tooltip */
+    tooltipHeader?: string;
+    /** Indicating that a column with the line name is displayed in the tooltip */
+    shared?: boolean;
+    /** Indicating that a column with a percentage value is displayed in the tooltip */
+    withPercent?: boolean;
+    /** Indicating that a column with a diff is displayed in the tooltip */
+    useCompareFrom?: boolean;
+    /** Indicating that the tooltip displays a block with information about the holiday */
+    holiday?: boolean;
+    /** Name of the holiday */
+    holidayText?: string;
+    /** Region for which the holiday is relevant */
+    region?: string;
+    /** Sum of the values of the rows displayed in the tooltip */
+    sum?: number | string;
+    /** Number of hidden lines "not fit" in the tooltip */
+    hiddenRowsNumber: number;
+    /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
+    hiddenRowsSum?: number | string;
+    unsafe?: boolean;
+};
+export declare type TooltipLine = {
+    /** Color displayed in a separate cell */
+    seriesColor: string;
+    /** Series name */
+    seriesName: string;
+    /** Series index */
+    seriesIdx?: number;
+    /** Indicating whether the series name should be displayed */
+    hideSeriesName?: boolean;
+    /** Percentage value displayed in a separate cell */
+    percentValue?: number | string;
+    /** Diff value displayed in the separate cell */
+    diff?: string;
+    /** Formatted numeric value for the current series displayed in a separate cell */
+    value: string;
+    originalValue: number;
+    /** Comment to the line (displayed under the corresponding line), set via manageTooltipConfig */
+    commentText?: string;
+    /** Comment to the line (displayed under the corresponding line) */
+    xyCommentText?: string;
+    /** Indicating that line is active */
+    selectedSeries?: boolean;
+    /** Custom renderer of the line (a string with text or html markup) */
+    customRender?: string;
+    replaceCellAt?: Record<number, (line: TooltipLine) => string>;
+    insertCellAt?: Record<number, (line: TooltipLine) => string>;
+    /** Line shape displayed in the corresponding cell, instead of seriesColor */
+    seriesShape?: LineShapeType;
+    chartKitFormatting?: boolean;
+    chartKitFormat?: FormatNumberOptions['format'];
+    chartKitPostfix?: FormatNumberOptions['postfix'];
+    chartKitPrecision?: FormatNumberOptions['precision'];
+    chartKitPrefix?: FormatNumberOptions['prefix'];
+    chartKitShowRankDelimiter?: FormatNumberOptions['showRankDelimiter'];
+    chartKitUnit?: FormatNumberOptions['unit'];
+};
+export declare type RowRenderingConfig = {
+    cellsRenderers: Array<(line: TooltipLine) => string>;
+    isSelectedLine?: boolean;
+    allowComment?: boolean;
+    withDarkBackground?: boolean;
+    isSingleLine?: boolean;
+    rowIndex?: number;
+};

package/build/plugins/highcharts/renderer/helpers/tooltip/types.js

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

package/build/plugins/highcharts/renderer/helpers/types.d.ts

@@ -0,0 +1,22 @@
+import type { FormatNumberOptions } from '../../../shared';
+import type { DrillDownConfig, HighchartsWidgetData } from '../../types';
+export declare type ConfigOptions = {
+    highcharts: HighchartsWidgetData['libraryConfig'];
+    nonBodyScroll?: boolean;
+    splitTooltip?: boolean;
+    drillDownData?: DrillDownConfig;
+    extremes?: {
+        min?: number;
+        max?: number;
+    };
+} & HighchartsWidgetData['config'];
+export declare type ChartKitFormatNumberSettings = {
+    chartKitFormatting?: boolean;
+    chartKitFormat?: FormatNumberOptions['format'];
+    chartKitPostfix?: FormatNumberOptions['postfix'];
+    chartKitPrecision?: FormatNumberOptions['precision'];
+    chartKitPrefix?: FormatNumberOptions['prefix'];
+    chartKitShowRankDelimiter?: FormatNumberOptions['showRankDelimiter'];
+    chartKitUnit?: FormatNumberOptions['unit'];
+    chartKitLabelMode?: FormatNumberOptions['labelMode'];
+};

package/build/plugins/highcharts/renderer/helpers/types.js

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

package/build/plugins/highcharts/types/comments.d.ts

@@ -0,0 +1,51 @@
+interface CommentBase {
+    id: string;
+    feed: string;
+    creatorLogin: string;
+    createdDate: string;
+    modifierLogin: string;
+    modifiedDate: string;
+    data: string;
+    dateUntil: string | null;
+    type: 'band-x' | 'dot-x-y' | 'flag-x' | 'line-x';
+    text: string;
+    params: object | null;
+    meta: object;
+}
+interface CommentDotXY extends CommentBase {
+    type: 'dot-x-y';
+    meta: {
+        color: string;
+        graphId: string;
+        visible: boolean;
+        fillColor: string;
+        textColor: string;
+    };
+}
+interface CommentLineX extends CommentBase {
+    type: 'line-x';
+    meta: {
+        color: string;
+        width: number;
+        dashStyle: string;
+    };
+}
+interface CommentBandX extends CommentBase {
+    dateUntil: string;
+    type: 'band-x';
+    meta: {
+        color: string;
+        zIndex: number;
+        visible: boolean;
+    };
+}
+interface CommentFlagX extends CommentBase {
+    type: 'flag-x';
+    meta: {
+        y: number;
+        color: string;
+        shape: string;
+    };
+}
+export declare type ChartKitComment = CommentDotXY | CommentBandX | CommentLineX | CommentFlagX;
+export {};

package/build/plugins/highcharts/types/comments.js

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

package/build/plugins/highcharts/types/highcharts-extends.d.ts

@@ -0,0 +1,38 @@
+import 'highcharts';
+import type {StringParams} from './misc';
+
+declare module 'highcharts' {
+    interface Axis {
+        closestPointRange: number;
+    }
+
+    interface Chart {
+        afterRedrawCallback: () => void;
+        updateParams: (params: StringParams) => void;
+        getParams: () => StringParams;
+        plotSizeY: number;
+        pointsForInitialRefresh: Highcharts.Point[] | Highcharts.Point;
+    }
+
+    interface Tooltip {
+        fixed: boolean;
+        splitTooltip: boolean;
+        isHidden: boolean;
+        lastVisibleRowIndex: number;
+        preFixationHeight?: number;
+        getTooltipContainer: Function;
+        hideFixedTooltip: Function;
+        yagrChart?: {height: number};
+    }
+
+    interface PointOptionsObject extends Record<string, string> {
+        url?: string;
+        params?: Array<string>;
+    }
+
+    interface Options extends Record<string, unknown> {
+        url?: string;
+    }
+
+    interface SeriesOptionsRegistry extends Record<string, Record<string, unknown>> {}
+}

package/build/plugins/highcharts/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { Highcharts } from './lib';
+export type { HighchartsWidgetData } from './widget';
+export type { DrillDownConfig, ExtendedHChart, StringParams, XAxisItem } from './misc';
+export type { ChartKitComment } from './comments';

package/build/plugins/highcharts/types/index.js

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

package/build/plugins/highcharts/types/lib.d.ts

@@ -0,0 +1 @@
+export type { default as Highcharts } from 'highcharts';

package/build/plugins/highcharts/types/lib.js

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

package/build/plugins/highcharts/types/misc.d.ts

@@ -0,0 +1,19 @@
+import type { ChartKitComment } from './comments';
+export declare type StringParams = Record<string, string | string[]>;
+export declare type DrillDownConfig = {
+    breadcrumbs: string[];
+};
+export declare type XAxisItem = Highcharts.Axis & {
+    dataMin: number;
+    dataMax: number;
+    setExtremes: (...args: any[]) => void;
+};
+export declare type ExtendedHChart = Highcharts.Chart & {
+    userOptions: Highcharts.Options & {
+        _internalComments: ChartKitComment[];
+        _externalComments: ChartKitComment[];
+        _getComments: () => ChartKitComment[];
+    };
+    xAxis: XAxisItem[];
+    navigator?: Highcharts.Options['navigator'];
+};

package/build/plugins/highcharts/types/misc.js

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

package/build/plugins/highcharts/types/widget.d.ts

@@ -0,0 +1,47 @@
+import type { Highcharts } from './lib';
+import type { ChartKitComment } from './comments';
+import type { DrillDownConfig, StringParams } from './misc';
+declare type GraphWidgetSeriesOptions = Highcharts.SeriesOptionsType & {
+    title?: string;
+    sname?: string;
+    fname?: string;
+};
+export declare type HighchartsWidgetData = {
+    data: (GraphWidgetSeriesOptions[] | {
+        graphs: GraphWidgetSeriesOptions[];
+        categories_ms: number[];
+    } | {
+        graphs: GraphWidgetSeriesOptions[];
+        categories: string[];
+    } | {
+        graphs: GraphWidgetSeriesOptions[];
+    }) & {
+        comments?: ChartKitComment[];
+    };
+    config: {
+        hideComments?: boolean;
+        hideHolidaysBands?: boolean;
+        disableExternalComments?: boolean;
+        hideHolidays?: boolean;
+        normalizeDiv?: boolean;
+        normalizeSub?: boolean;
+        withoutLineLimit?: boolean;
+        precision?: number;
+        title?: string;
+        subtitle?: string;
+        highstock?: {
+            override_range_min: number | string;
+            override_range_max: number | string;
+            range_min?: number | string;
+            range_max?: number | string;
+        };
+        drillDown?: DrillDownConfig;
+        enableSum?: boolean;
+        unsafe?: boolean;
+    };
+    libraryConfig: Highcharts.Options;
+    params?: StringParams;
+    comments?: ChartKitComment[];
+    sideMarkdown?: string;
+};
+export {};

package/build/plugins/highcharts/types/widget.js

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

package/build/plugins/index.d.ts

@@ -1,4 +1,6 @@
 export { YagrPlugin } from './yagr';
-export type { Yagr, YagrWidgetData, YagrWidgetProps } from './yagr/types';
+export type { Yagr, YagrWidgetData } from './yagr/types';
 export { IndicatorPlugin } from './indicator';
-export type { IndicatorWidgetData, IndicatorWidgetProps } from './indicator/types';
+export type { IndicatorWidgetData } from './indicator/types';
+export { HighchartsPlugin } from './highcharts';
+export type { Highcharts, HighchartsWidgetData } from './highcharts/types';

package/build/plugins/index.js

@@ -1,2 +1,3 @@
 export { YagrPlugin } from './yagr';
 export { IndicatorPlugin } from './indicator';
+export { HighchartsPlugin } from './highcharts';

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import type { IndicatorWidgetProps, IndicatorWidgetDataItem } from '../types';
+import type { ChartKitProps } from '../../../types';
+import type { IndicatorWidgetDataItem } from '../types';
 export declare const IndicatorItem: (props: IndicatorWidgetDataItem & {
     defaultColor?: string;
-    formatNumber?: IndicatorWidgetProps['formatNumber'];
+    formatNumber?: ChartKitProps<'indicator'>['formatNumber'];
 }) => JSX.Element;