@gravity-ui/chartkit 0.7.2

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

@@ -0,0 +1,229 @@
+import { i18n } from '../../../../i18n';
+import { escapeHTML } from './helpers/escapeHTML';
+import './tooltip.css';
+export const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
+export const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
+export const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
+export const TOOLTIP_ROW_NAME_CLASS_NANE = '_tooltip-rows__name-td';
+export const TOOLTIP_ROW_CLASS_NAME = '_tooltip-row';
+export const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
+export const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
+export const TOOLTIP_FOOTER_CLASS_NAME = '_tooltip-footer';
+const renderEmptyCell = () => '<td />';
+const renderColorCell = (line) => `<td class="_tooltip-rows__bubble-td">
+        <div class="_tooltip-rows__bubble-div" style="background-color:${line.seriesColor};"></div>
+    </td>`;
+const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NANE}">
+        ${line.hideSeriesName ? '' : escapeHTML(line.seriesName)}
+    </td>`;
+const renderPercentCell = (line) => `<td class="_tooltip-rows__percent-td">
+        ${line.percentValue ? line.percentValue + '%' : ''}
+    </td>`;
+const renderValueCell = (line) => `<td class="_tooltip-rows__value-td">
+        ${line.value}
+    </td>`;
+const renderDiffCell = (line) => `<td class="_tooltip-rows__diff-td">
+        ${line.diff ? ` (${line.diff})` : ''}
+    </td>`;
+const renderAdditionalSection = (data, splitTooltip = false, colspanNumber = 1) => {
+    return `<td class="_tooltip-right__td ${splitTooltip ? '_tooltip-right__td_with-split-tooltip' : ''}" colspan="${colspanNumber || 1}">
+             ${data.holiday
+        ? `<div class="_tooltip-right__holiday-div">
+                    <div class="_tooltip-right__holiday-emoji">🎈</div>
+                    <div>
+                        ${data.holidayText}
+                        ${data.region
+            ? `<span class="_tooltip-right__holiday-region">[${data.region}]</span>`
+            : ''}
+                    </div>
+                </div>`
+        : ''}
+
+            ${data.commentDateText
+        ? `<div class="${data.xComments ? '_tooltip-right__margin-bot' : ''}">${data.commentDateText}</div>`
+        : ''}
+
+            ${data.xComments
+        ? data.xComments
+            .map((comment) => `<div class="_tooltip-right__traf-div ${splitTooltip
+            ? '_tooltip-right__traf-div_for-split-tooltip'
+            : ''}" style="border-color: ${comment.color};">${comment.text}</div>`)
+            .join('')
+        : ''}
+        </td>`;
+};
+const renderRow = (line, { isSelectedLine, cellsRenderers, isSingleLine, allowComment, withDarkBackground, rowIndex, }) => {
+    const hasComment = line.commentText || line.xyCommentText;
+    const needRenderComment = allowComment && hasComment;
+    const fullCellsRenderers = cellsRenderers.slice();
+    const rowKey = `${String(rowIndex) || ''}-${String(escapeHTML(line.seriesName))
+        .slice(0, 20)
+        .replace(/(\r\n|\n|\r)/gm, '')}`;
+    if (line.insertCellAt) {
+        (Object.keys(line.insertCellAt) || []).forEach((index) => {
+            fullCellsRenderers.splice(Number(index), 0, renderEmptyCell);
+        });
+    }
+    if (line.customRender) {
+        return `<tr class="${TOOLTIP_ROW_CLASS_NAME}${isSelectedLine ? ' _tooltip-selected-row' : ''}${isSingleLine ? ' _tooltip-uniq-row' : ''}${withDarkBackground ? ' _tooltip-row-dark-bg' : ''}" ${SERIES_NAME_DATA_ATTRIBUTE}="${rowKey}" ${line.seriesIdx ? `${SERIES_IDX_DATA_ATTRIBUTE}="${line.seriesIdx}"` : ''}>
+            ${line.customRender.trim().indexOf('<td') === 0
+            ? line.customRender
+            : `<td colspan="${cellsRenderers.length}">${line.customRender}</td>`}
+        </tr>
+        ${needRenderComment
+            ? `<tr class="_tooltip-comment-row${isSelectedLine ? ' _tooltip-selected-row' : ''}${withDarkBackground ? ' _tooltip-row-dark-bg' : ''}">
+                    <td>
+                        ${line.commentText
+                ? `<div class="_tooltip-rows__comment-div">${line.commentText}</div>`
+                : ''}
+                        ${line.xyCommentText
+                ? `<div class="_tooltip-rows__comment-div">${line.xyCommentText}</div>`
+                : ''}
+                    </td>
+                </tr>`
+            : ''}`;
+    }
+    return `<tr class="${TOOLTIP_ROW_CLASS_NAME}${isSelectedLine ? ' _tooltip-selected-row' : ''}${isSingleLine ? ' _tooltip-uniq-row' : ''}${withDarkBackground ? ' _tooltip-row-dark-bg' : ''}" ${SERIES_NAME_DATA_ATTRIBUTE}="${rowKey}" ${line.seriesIdx ? `${SERIES_IDX_DATA_ATTRIBUTE}="${line.seriesIdx}"` : ''}>
+            ${fullCellsRenderers
+        .map((render, index) => {
+        if (line.replaceCellAt && line.replaceCellAt[index]) {
+            return typeof line.replaceCellAt[index] === 'string'
+                ? line.replaceCellAt[index]
+                : line.replaceCellAt[index](line);
+        }
+        else if (line.insertCellAt && line.insertCellAt[index]) {
+            return typeof line.insertCellAt[index] === 'string'
+                ? line.insertCellAt[index]
+                : line.insertCellAt[index](line);
+        }
+        else {
+            return render(line);
+        }
+    })
+        .join('')}
+        </tr>
+
+        ${needRenderComment
+        ? `<tr class="_tooltip-comment-row${isSelectedLine ? ' _tooltip-selected-row' : ''}${withDarkBackground ? ' _tooltip-row-dark-bg' : ''}">
+                    <td colspan="4">
+                        ${line.commentText
+            ? `<div class="_tooltip-rows__comment-div">${line.commentText}</div>`
+            : ''}
+                        ${line.xyCommentText
+            ? `<div class="_tooltip-rows__comment-div">${line.xyCommentText}</div>`
+            : ''}
+                    </td>
+                </tr>`
+        : ''}`;
+};
+export const formatTooltip = (data, tooltip) => {
+    const { splitTooltip, activeRowAlwaysFirstInTooltip } = data;
+    const selectedLineIndex = data.lines.findIndex(({ selectedSeries }) => selectedSeries);
+    const selectedLine = data.lines[selectedLineIndex];
+    const lines = data.lines.slice(0, (tooltip.lastVisibleRowIndex || data.lines.length) + 1);
+    const cellsRenderers = [];
+    cellsRenderers.push(renderColorCell);
+    if (data.shared) {
+        cellsRenderers.push(renderNameCell);
+    }
+    if (data.withPercent) {
+        cellsRenderers.push(renderPercentCell);
+    }
+    cellsRenderers.push(renderValueCell);
+    if (data.useCompareFrom) {
+        cellsRenderers.push(renderDiffCell);
+    }
+    const rowRenderingConfig = {
+        isSingleLine: lines.length === 1,
+        cellsRenderers,
+    };
+    const rowRenderingConfigForSelectedLine = {
+        cellsRenderers,
+        useCompareFrom: data.useCompareFrom,
+        isSelectedLine: true,
+        allowComment: selectedLineIndex > tooltip.lastVisibleRowIndex,
+    };
+    const windowHeight = 
+    // @ts-ignore
+    document.body.clientHeight / ((window.visualViewport && window.visualViewport.scale) || 1);
+    function getRowRenderConfig(index) {
+        return Object.assign(Object.assign({}, rowRenderingConfig), { rowIndex: index, isSelectedLine: lines.length > 1 && index === selectedLineIndex, withDarkBackground: lines.length > 2 && Boolean(index % 2), allowComment: index !== selectedLineIndex || !rowRenderingConfigForSelectedLine.allowComment });
+    }
+    let tooltipContainerClassNames = TOOLTIP_CONTAINER_CLASS_NAME;
+    if (splitTooltip) {
+        tooltipContainerClassNames += ` ${TOOLTIP_CONTAINER_CLASS_NAME}_split-tooltip`;
+    }
+    return `
+<div class="${tooltipContainerClassNames}" style="${tooltip.preFixationHeight ? `height: ${tooltip.preFixationHeight}px; ` : ''}max-height: ${splitTooltip ? 'auto' : `${windowHeight}px`}">
+    ${data.tooltipHeader
+        ? `<div title="${(document.createRange().createContextualFragment(data.tooltipHeader).textContent ||
+            '').trim()}" class="_tooltip-date">
+                ${data.tooltipHeader.trim()}
+            </div>`
+        : ''}
+    ${splitTooltip &&
+        (data.holiday || data.commentDateText || (data.xComments && data.xComments.length))
+        ? `<table border="0" cellpadding="0" cellspacing="0">
+                <tbody>
+                    <tr>
+                        ${renderAdditionalSection(data, true, cellsRenderers.length)}
+                    </tr>
+                </tbody>
+            </table>`
+        : ''}
+    <table border="0" cellpadding="0" cellspacing="0">
+        <tr>
+            <td class="_tooltip-left__td">
+                <table class="_tooltip-rows__table">
+                    ${splitTooltip
+        ? ''
+        : `<thead class=${TOOLTIP_HEADER_CLASS_NAME}>
+                                ${selectedLine &&
+            (activeRowAlwaysFirstInTooltip ||
+                (tooltip.lastVisibleRowIndex &&
+                    selectedLineIndex > tooltip.lastVisibleRowIndex))
+            ? renderRow(selectedLine, rowRenderingConfigForSelectedLine)
+            : ''}
+                                <tr class="_tooltip-fake-row">${Array(cellsRenderers.length)
+            .fill('<td></td>')
+            .join('')}</tr>
+                            </thead>`}
+                    <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
+                        ${lines
+        .map((line, index) => renderRow(line, getRowRenderConfig(index)))
+        .join('')}
+                    </tbody>
+                    ${splitTooltip
+        ? ''
+        : `<tbody class="${TOOLTIP_FOOTER_CLASS_NAME}">
+                                ${tooltip.lastVisibleRowIndex && data.hiddenRowsNumber > 0
+            ? `<tr class="${TOOLTIP_ROW_CLASS_NAME} _hidden-rows-sum${lines.length % 2 ? ' _hidden-rows-sum-dark-bg' : ''}">
+                                            <td colspan="${cellsRenderers.length - 1}" class="_hidden-rows-number">
+                                                ${i18n('common', 'tooltip-rest')} ${data.hiddenRowsNumber}
+                                            </td>
+                                            <td class="_hidden-rows-value">${data.hiddenRowsSum}</td>
+                                        </tr>`
+            : ''}
+                                <tr class="_tooltip-fake-row">${Array(cellsRenderers.length)
+            .fill('<td></td>')
+            .join('')}</tr>
+                                ${data.sum
+            ? `<tr class="_tooltip-rows__summ-tr">
+                                            <td class="_tooltip-rows__summ-td" colspan="${cellsRenderers.length - 1}">${i18n('common', 'tooltip-sum')}</td>
+                                            <td class="_tooltip-rows__summ-td _tooltip-rows__summ-td-value">
+                                                ${data.sum}
+                                            </td>
+                                        </tr>`
+            : ''}
+                            </tbody>`}
+                </table>
+            </td>
+
+            ${!splitTooltip &&
+        (data.holiday || data.commentDateText || (data.xComments && data.xComments.length))
+        ? renderAdditionalSection(data)
+        : ''}
+        </tr>
+    </table>
+</div>`;
+};

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

@@ -0,0 +1,21 @@
+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: {
+        graphs: RawSerieData[];
+        timeline: number[];
+    };
+    libraryConfig: Partial<YagrConfig>;
+    sources?: Record<number, {
+        data: {
+            program: string;
+        };
+    }>;
+};
+export declare type YagrWidgetProps = {
+    id: string;
+    data: YagrWidgetData;
+    lang?: ChartKitLang;
+    onLoad?: (data?: ChartKitOnLoadData<'yagr'>) => void;
+};

package/build/plugins/yagr/types.js

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

package/build/types/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { ChartkitWidget } from './widget';
+export declare type ChartKitLang = 'ru' | 'en';
+export declare type ChartkitType = keyof ChartkitWidget;
+export declare type ChartKitRef = {
+    reflow: (details?: unknown) => void;
+};
+export declare type ChartKitWidgetRef = {
+    reflow?: ChartKitRef['reflow'];
+};
+export declare type ChartKitOnLoadData<T extends ChartkitType> = {
+    widget?: ChartkitWidget[T]['widget'];
+    widgetRendering?: number;
+};
+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'];
+    id?: string;
+    onLoad?: (data?: ChartKitOnLoadData<T>) => void;
+    onError?: ChartKitOnError;
+    formatNumber?: ChartKitFormatNumber;
+} & {
+    [key in keyof Omit<ChartkitWidget[T], 'data' | 'widget'>]: ChartkitWidget[T][key];
+};
+export declare type ChartKitPlugin = {
+    type: ChartkitType;
+    renderer: React.LazyExoticComponent<any>;
+};
+export type { ChartkitWidget };

package/build/types/index.js

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

package/build/types/widget.d.ts

@@ -0,0 +1,13 @@
+import type Yagr from 'yagr';
+import type { YagrWidgetData } from '../plugins/yagr/types';
+import type { IndicatorWidgetData } from '../plugins/indicator/types';
+export interface ChartkitWidget {
+    yagr: {
+        data: YagrWidgetData;
+        widget: Yagr;
+    };
+    indicator: {
+        data: IndicatorWidgetData;
+        widget: never;
+    };
+}

package/build/types/widget.js

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

package/build/utils/__tests__/common.test.d.ts

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

package/build/utils/__tests__/common.test.js

@@ -0,0 +1,9 @@
+import { getRandomCKId } from '../common';
+// length of "ck." + 10 random symbols
+const ID_LENGTH = 13;
+describe('utils/getRandomCKId', () => {
+    it('Id should have 13 symbols', () => {
+        const result = getRandomCKId();
+        expect(result.length).toBe(ID_LENGTH);
+    });
+});

package/build/utils/common.d.ts

@@ -0,0 +1 @@
+export declare const getRandomCKId: () => string;

package/build/utils/common.js

@@ -0,0 +1,8 @@
+const randomString = (length, chars) => {
+    let result = '';
+    for (let i = length; i > 0; --i) {
+        result += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return result;
+};
+export const getRandomCKId = () => `ck.${randomString(10, '0123456789abcdefghijklmnopqrstuvwxyz')}`;

package/build/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getRandomCKId } from './common';
+export { typedMemo } from './react';

package/build/utils/index.js

@@ -0,0 +1,2 @@
+export { getRandomCKId } from './common';
+export { typedMemo } from './react';

package/build/utils/react.d.ts

@@ -0,0 +1 @@
+export declare const typedMemo: <T>(component: T) => T;

package/build/utils/react.js

@@ -0,0 +1,4 @@
+import React from 'react';
+// For some reason React.memo drops the generic prop type and creates a regular union type
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-542793243
+export const typedMemo = React.memo;

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@gravity-ui/chartkit",
+  "version": "0.7.2",
+  "description": "React component used to render charts based on any sources you need",
+  "license": "MIT",
+  "repository": "git@github.com:gravity-ui/ChartKit.git",
+  "main": "build/index.js",
+  "typings": "build/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "bem-cn-lite": "^4.1.0",
+    "lodash": "^4.17.21",
+    "yagr": "1.3.7"
+  },
+  "devDependencies": {
+    "@gravity-ui/eslint-config": "^1.0.2",
+    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/stylelint-config": "^1.0.1",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^3.0.2",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.9",
+    "@types/jest": "^28.1.3",
+    "@types/lodash": "^4.14.177",
+    "@types/node": "^18.0.0",
+    "@types/react": "^17.0.48",
+    "@types/react-dom": "^17.0.17",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@yandex-cloud/i18n": "^0.5.0",
+    "eslint": "^8.11.0",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "gulp-dart-sass": "^1.0.2",
+    "gulp-replace": "^1.1.3",
+    "gulp-typescript": "^5.0.1",
+    "husky": "^4.2.5",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.2",
+    "lint-staged": "^10.2.7",
+    "moment": "^2.29.4",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^10.2.1",
+    "stylelint": "^14.6.0",
+    "ts-jest": "^28.0.5",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.2.3"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0",
+    "moment": "^2.19.3",
+    "@gravity-ui/uikit": "^3.0.0",
+    "@yandex-cloud/i18n": "^0.5.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "clean": "gulp clean",
+    "start": "start-storybook -p 7007",
+    "build": "gulp",
+    "lint:js": "eslint --quiet --ext .js,.jsx,.ts,.tsx .",
+    "lint:styles": "stylelint '{styles,src}/**/*.scss' --quiet",
+    "lint:prettier": "prettier --check --loglevel=error '**/*.{js,jsx,ts,tsx,scss}'",
+    "lint": "run-p lint:*",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{css,scss}": [
+      "stylelint --fix --quiet",
+      "prettier --write"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet",
+      "prettier --write"
+    ]
+  }
+}