@gravity-ui/chartkit 0.7.2

package/build/plugins/yagr/renderer/tooltip/tooltip.css

@@ -0,0 +1,368 @@
+.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(--yc-color-infographics-tooltip-bg);
+  background-color: var(--yc-color-infographics-tooltip-bg);
+  color: var(--yc-color-text-primary);
+  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(--yc-color-line-generic);
+}
+
+._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(--yc-color-base-generic);
+}
+
+._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
+  background-color: var(--yc-color-base-generic);
+}
+
+._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(--yc-color-text-complementary);
+  font-size: 12px;
+  border-top: 1px solid var(--yc-color-line-generic);
+}
+
+._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(--yc-color-line-generic);
+  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/yagr/renderer/tooltip/tooltip.d.ts

@@ -0,0 +1,141 @@
+import './tooltip.css';
+export declare const SERIES_NAME_DATA_ATTRIBUTE = "data-series-name";
+export declare const SERIES_IDX_DATA_ATTRIBUTE = "data-series-idx";
+export declare const TOOLTIP_CONTAINER_CLASS_NAME = "_tooltip";
+export declare const TOOLTIP_ROW_NAME_CLASS_NANE = "_tooltip-rows__name-td";
+export declare const TOOLTIP_ROW_CLASS_NAME = "_tooltip-row";
+export declare const TOOLTIP_HEADER_CLASS_NAME = "_tooltip-header";
+export declare const TOOLTIP_LIST_CLASS_NAME = "_tooltip-list";
+export declare const TOOLTIP_FOOTER_CLASS_NAME = "_tooltip-footer";
+declare type Tooltip = any;
+export interface TooltipData {
+    /**
+     * Массив строк выводящихся в тултипе (см. TooltipLine)
+     */
+    lines: Array<TooltipLine>;
+    /**
+     * массив комментариев (задаются в диалоге комментариев)
+     */
+    xComments?: Array<{
+        /**
+         * текст комментария
+         */
+        text: string;
+        /**
+         * цвет отображающийся над комментарием
+         */
+        color: string;
+    }>;
+    /**
+     * текст комментария (задаётся через manageTooltipConfig)
+     */
+    commentDateText?: string;
+    /**
+     * флаг, указывающий что нужно всегда дублировать активную строку выводя её поверх основного списка (дефолтное
+     * поведение - активная строка выводится поверх основного списка только если "не поместилась" в тултип)
+     */
+    activeRowAlwaysFirstInTooltip?: boolean;
+    /**
+     *  флаг, указыващий что чарт отображается в режиме split tooltip
+     */
+    splitTooltip?: boolean;
+    /**
+     * текст хедера тултипа
+     */
+    tooltipHeader?: string;
+    /**
+     * флаг, указывающий, что в тултипе выводится колонка с названием строки
+     */
+    shared?: boolean;
+    /**
+     * флаг, указывающий, что в тултипе выводится колонка с процентным значением
+     */
+    withPercent?: boolean;
+    /**
+     * флаг, указывающий, что в тултипе выводится колонка с diff-ом
+     */
+    useCompareFrom?: boolean;
+    /**
+     * флаг, указывающий, что в тултипе выводится блок с информацией о праздничном дне
+     */
+    holiday?: boolean;
+    /**
+     * название праздничного дня
+     */
+    holidayText?: string;
+    /**
+     * регион для которого актуален праздничный день
+     */
+    region?: string;
+    /**
+     * сумма значений выводящихся в тултипе строк
+     */
+    sum?: number | string;
+    /**
+     * количество скрытых строк "не поместившихся" в тултип
+     */
+    hiddenRowsNumber: number;
+    /**
+     * сумма значений скрытых ("не поместившихся" в тултип) строк
+     */
+    hiddenRowsSum?: number | string;
+}
+export interface TooltipLine {
+    /**
+     * цвет выводящийся в соответсвующей ячейке
+     */
+    seriesColor: string;
+    /**
+     * название измерения выводящееся в соответсвующей ячейке
+     */
+    seriesName: string;
+    /**
+     * индекс линии
+     */
+    seriesIdx?: number;
+    /**
+     * флаг, указывающий, должно ли отображаться название строки
+     */
+    hideSeriesName?: boolean;
+    /**
+     * процентное значение выводящееся в соответвующей ячейке
+     */
+    percentValue?: number | string;
+    /**
+     * значение diff-а выводящееся в соответвующей ячейке
+     */
+    diff?: string;
+    /**
+     * отформатированное числовое значение для текущего измерения выводящееся в соответствующей ячейке
+     */
+    value: string;
+    /**
+     * Комментарий к строке (отображается под соответствующей строкой), задаётся через manageTooltipConfig
+     */
+    commentText?: string;
+    /**
+     * Комментарий к строке (отображается под соответствующей строкой), задаётся через диалог комментариев
+     */
+    xyCommentText?: string;
+    /**
+     * флаг, указывающий, что данная строка активна
+     */
+    selectedSeries?: boolean;
+    /**
+     * кастомный рендер соответсвующей строки (строка с текстом либо html разметкой)
+     */
+    customRender?: string;
+    /**
+     * объект, где ключи - индексы ячеек, контент которых должен быть заменён, значения - функции возвращающие
+     * строку (с текстом либо html разметкой) которая будет вставлена в ячейку на соответствующем индексе
+     */
+    replaceCellAt?: Record<number, (line: TooltipLine) => string>;
+    /**
+     * объект, где ключи - индексы на которые будут вставлены новые ячейки (ячейка ранее располагавшаяся на этом
+     * индексе и последующие за ней будут сдвинуты), значения - функции возвращающие строку (с текстом либо html
+     * разметкой) которая будет вставлена в добавившуюся ячейку
+     */
+    insertCellAt?: Record<number, (line: TooltipLine) => string>;
+}
+export declare const formatTooltip: (data: TooltipData, tooltip: Tooltip) => string;
+export {};