diff --git a/package-lock.json b/package-lock.json index 89d26d77..c66ff3a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/charts": "^0.5.0", + "@gravity-ui/charts": "^0.7.0", "@gravity-ui/date-utils": "^2.1.0", "@gravity-ui/i18n": "^1.0.0", "@gravity-ui/yagr": "^4.6.0", @@ -26,7 +26,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^6.35.2", + "@gravity-ui/uikit": "^7.4.0", "@jest/types": "^29.6.3", "@playwright/experimental-ct-react17": "^1.41.1", "@storybook/addon-actions": "^7.6.14", @@ -74,7 +74,7 @@ "typescript": "^5.3.3" }, "peerDependencies": { - "@gravity-ui/uikit": "^6.0.0", + "@gravity-ui/uikit": "^7.0.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, @@ -3010,6 +3010,40 @@ "@floating-ui/core": "^1.3.1" } }, + "node_modules/@floating-ui/react": { + "version": "0.27.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.4.tgz", + "integrity": "sha512-05mXdkUiVh8NCEcYKQ2C9SV9IkZ9k/dFtYmaEIN2riLv80UHoXylgBM76cgPJYfLJM3dJz7UE5MOVH0FypMd2Q==", + "dev": true, + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.9", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dev": true, + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "dev": true + }, "node_modules/@gravity-ui/charts": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@gravity-ui/charts/-/charts-0.5.0.tgz", @@ -3234,15 +3268,23 @@ "dev": true }, "node_modules/@gravity-ui/i18n": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.6.0.tgz", - "integrity": "sha512-ftMLGZy7migLEtPkZa8jM6onipIeEOnEg9976RRpg3f39H+Q2bYYAGMjU+NJpWQ90ZDp6ztYLt5WAMEg248tEg==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.7.0.tgz", + "integrity": "sha512-jZotOX73lMVARsNZ5L8rquDhyCIcHnX7GwT32m6vrnqy6iKBfBdOuAnAalUbnoVJoasfvYiSyX3kwusetyZgfQ==" }, "node_modules/@gravity-ui/icons": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.8.1.tgz", - "integrity": "sha512-cldaFAN3W2OAzEZBiurD7RsqyqGhS7xoVS9TC4DrOG9bXy8dWUvNEeeOnKgpIvZgAGFlTmg01BK6jMH0IFFSPw==", - "dev": true + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.13.0.tgz", + "integrity": "sha512-oHWJTb8rTuZo1czZRBSggEWMmthiXeM5LBpB0GzyS1tCkNE1A7DpEvvrKUwHYVHTxpw/xWIqQCxNj7LIo2R3NQ==", + "dev": true, + "peerDependencies": { + "react": "*" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } }, "node_modules/@gravity-ui/prettier-config": { "version": "1.1.0", @@ -3281,31 +3323,29 @@ "license": "MIT" }, "node_modules/@gravity-ui/uikit": { - "version": "6.35.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.35.2.tgz", - "integrity": "sha512-fwt9IRDS2E9MEs9l/3b5SRdrVvYs7W4bfs4VPi0qjvO5p/55N7OfVO4mvvxSbAh+CkmySi514rwhzfKbUpO62Q==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.4.0.tgz", + "integrity": "sha512-zAOy8LBBk7zITDL2fE64wl6kTRbTeRCEor1t3BWCYVRkDaqAH2P1I0jI6jc0WknHicqv1nPagkgX/Al4Wd7WkQ==", "dev": true, "dependencies": { "@bem-react/classname": "^1.6.0", - "@gravity-ui/i18n": "^1.6.0", - "@gravity-ui/icons": "^2.8.1", - "@popperjs/core": "^2.11.8", + "@floating-ui/react": "^0.27.3", + "@gravity-ui/i18n": "^1.7.0", + "@gravity-ui/icons": "^2.12.0", + "@tanstack/react-virtual": "^3.11.2", "blueimp-md5": "^2.19.0", - "focus-trap": "^7.5.4", "lodash": "^4.17.21", - "rc-slider": "^10.6.2", + "rc-slider": "^11.1.8", "react-beautiful-dnd": "^13.1.1", - "react-copy-to-clipboard": "^5.1.0", - "react-popper": "^2.3.0", "react-transition-group": "^4.4.5", - "react-virtualized-auto-sizer": "^1.0.21", - "react-window": "^1.8.10", + "react-virtualized-auto-sizer": "^1.0.25", + "react-window": "^1.8.11", "tabbable": "^6.2.0", - "tslib": "^2.6.2" + "tslib": "^2.8.1" }, "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@gravity-ui/yagr": { @@ -4795,15 +4835,6 @@ "node": ">= 8" } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "dev": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -6828,6 +6859,33 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.0.tgz", + "integrity": "sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==", + "dev": true, + "dependencies": { + "@tanstack/virtual-core": "3.13.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.0.tgz", + "integrity": "sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -14408,15 +14466,6 @@ "readable-stream": "^2.3.6" } }, - "node_modules/focus-trap": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz", - "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==", - "dev": true, - "dependencies": { - "tabbable": "^6.2.0" - } - }, "node_modules/for-each": { "version": "0.3.3", "dev": true, @@ -22432,9 +22481,9 @@ } }, "node_modules/rc-slider": { - "version": "10.6.2", - "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.6.2.tgz", - "integrity": "sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==", + "version": "11.1.8", + "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.8.tgz", + "integrity": "sha512-2gg/72YFSpKP+Ja5AjC5DPL1YnV8DEITDQrcc1eASrUYjl0esptaBVJBh5nLTXCCp15eD8EuGjwezVGSHhs9tQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", @@ -22450,9 +22499,9 @@ } }, "node_modules/rc-util": { - "version": "5.43.0", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz", - "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==", + "version": "5.44.4", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz", + "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==", "dev": true, "dependencies": { "@babel/runtime": "^7.18.3", @@ -22509,18 +22558,6 @@ "react-dom": ">=16.8.0" } }, - "node_modules/react-copy-to-clipboard": { - "version": "5.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "copy-to-clipboard": "^3.3.1", - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "react": "^15.3.0 || 16 || 17 || 18" - } - }, "node_modules/react-docgen": { "version": "5.4.3", "dev": true, @@ -22589,11 +22626,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-fast-compare": { - "version": "3.2.2", - "dev": true, - "license": "MIT" - }, "node_modules/react-inspector": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz", @@ -22613,20 +22645,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-popper": { - "version": "2.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-redux": { "version": "7.2.9", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", @@ -22702,19 +22720,19 @@ } }, "node_modules/react-virtualized-auto-sizer": { - "version": "1.0.22", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.22.tgz", - "integrity": "sha512-2CGT/4rZ6jvVkKqzJGnZlyQxj4rWPKAwZR80vMlmpYToN18xaB0yIODOoBltWZLbSgpHBpIk0Ae1nrVO9hVClA==", + "version": "1.0.25", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.25.tgz", + "integrity": "sha512-YHsksEGDfsHbHuaBVDYwJmcktblcHGafz4ZVuYPQYuSHMUGjpwmUCrAOcvMSGMwwk1eFWj1M/1GwYpNPuyhaBg==", "dev": true, "peerDependencies": { - "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", - "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/react-window": { - "version": "1.8.10", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", - "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "version": "1.8.11", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz", + "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.0.0", @@ -22724,8 +22742,8 @@ "node": ">8.0.0" }, "peerDependencies": { - "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/react-window/node_modules/memoize-one": { @@ -25843,9 +25861,9 @@ } }, "node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -26681,14 +26699,6 @@ "makeerror": "1.0.12" } }, - "node_modules/warning": { - "version": "4.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.0", "dev": true, diff --git a/package.json b/package.json index ec78f5c7..e1f8c01b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^6.35.2", + "@gravity-ui/uikit": "^7.4.0", "@jest/types": "^29.6.3", "@playwright/experimental-ct-react17": "^1.41.1", "@storybook/addon-actions": "^7.6.14", @@ -111,7 +111,7 @@ "typescript": "^5.3.3" }, "peerDependencies": { - "@gravity-ui/uikit": "^6.0.0", + "@gravity-ui/uikit": "^7.0.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0" }, "scripts": { diff --git a/src/index.ts b/src/index.ts index 599933e3..70e58154 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,6 @@ import {ChartKit} from './components/ChartKit'; import {settings} from './libs'; -export * from './types/widget-data'; export * from './libs/chartkit-error/chartkit-error'; export type { diff --git a/src/plugins/d3/renderer/__tests__/D3Widget.visual.test.tsx b/src/plugins/d3/renderer/__tests__/D3Widget.visual.test.tsx index 0a3db5cb..ba0e640c 100644 --- a/src/plugins/d3/renderer/__tests__/D3Widget.visual.test.tsx +++ b/src/plugins/d3/renderer/__tests__/D3Widget.visual.test.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import type {ChartData} from '@gravity-ui/charts'; import {expect, test} from '@playwright/experimental-ct-react17'; -import {ChartKitWidgetData} from '../../../../types'; - import {TestStory} from './TestStory.visual'; const VALID_CHART_DATA = { @@ -19,7 +18,7 @@ const VALID_CHART_DATA = { type: 'category', categories: ['A'], }, -} as ChartKitWidgetData; +} as ChartData; test('Validation should work when updating chart data (empty series)', async ({mount}) => { const component = await mount(); diff --git a/src/types/index.ts b/src/types/index.ts index 02e931b8..eaf48c56 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -5,8 +5,6 @@ import {ChartKitError} from '../libs'; import type {ChartKitWidget} from './widget'; export type {ChartKitHolidays} from './misc'; -// TODO: remove in the next major. This types should be consumed directly from '@gravity-ui/charts' -export * from './widget-data'; export type ChartKitLang = 'ru' | 'en'; diff --git a/src/types/widget-data/area.ts b/src/types/widget-data/area.ts deleted file mode 100644 index 9ac4c2df..00000000 --- a/src/types/widget-data/area.ts +++ /dev/null @@ -1,80 +0,0 @@ -import {SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import type {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; -import type {PointMarkerOptions} from './marker'; - -export type AreaSeriesData = BaseSeriesData & { - /** - * The `x` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - * - timestamp value (for `datetime` y axis) - * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories` - */ - y?: string | number; - /** Data label value of the point. If not specified, the y value is used. */ - label?: string | number; - /** Individual marker options for the point. */ - marker?: { - /** States for a single point marker. */ - states?: { - /** The normal state of a single point marker. */ - normal?: { - /** - * Enable or disable the point marker. - * - * @default false - * */ - enabled: boolean; - }; - }; - }; -}; - -export type AreaMarkerSymbol = 'circle' | 'square'; - -export type AreaMarkerOptions = PointMarkerOptions & { - symbol?: AreaMarkerSymbol; -}; - -export type AreaSeries = BaseSeries & { - type: typeof SeriesType.Area; - data: AreaSeriesData[]; - /** The name of the series (used in legend, tooltip etc) */ - name: string; - /** Whether to stack the values of each series on top of each other. - * Possible values are undefined to disable, "normal" to stack by value or "percent" - * - * @default undefined - * */ - stacking?: 'normal' | 'percent'; - /** This option allows grouping series in a stacked chart */ - stackId?: string; - /** The main color of the series (hex, rgba) */ - color?: string; - /** Fill opacity for the area - * - * @default 0.75 - * */ - opacity?: number; - /** Pixel width of the graph line. - * - * @default 1 - * */ - lineWidth?: number; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - /** Options for the point markers of line in area series */ - marker?: AreaMarkerOptions; - /** Y-axis index (when using two axes) */ - yAxis?: number; -}; diff --git a/src/types/widget-data/axis.ts b/src/types/widget-data/axis.ts deleted file mode 100644 index 66103034..00000000 --- a/src/types/widget-data/axis.ts +++ /dev/null @@ -1,91 +0,0 @@ -import type {FormatNumberOptions} from '../../plugins/shared'; - -import type {BaseTextStyle} from './base'; - -export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic'; -export type ChartKitWidgetAxisTitleAlignment = 'left' | 'center' | 'right'; - -export type ChartKitWidgetAxisLabels = { - /** Enable or disable the axis labels. */ - enabled?: boolean; - /** 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; - /** 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; - /** Rotation of the labels in degrees. - * - * @default: 0 - */ - rotation?: number; -}; - -export type ChartKitWidgetAxis = { - categories?: string[]; - timestamps?: number[]; - type?: ChartKitWidgetAxisType; - /** The axis labels show the number or category for each tick. */ - labels?: ChartKitWidgetAxisLabels; - /** The color of the line marking the axis itself. */ - lineColor?: string; - title?: { - text?: string; - /** CSS styles for the title */ - style?: Partial; - /** The pixel distance between the axis labels or line and the title. - * - * Defaults to 4 for horizontal axes, 8 for vertical. - * */ - margin?: number; - /** Alignment of the title. */ - align?: ChartKitWidgetAxisTitleAlignment; - /** Allows limiting of the contents of a title block to the specified number of lines. - * Defaults to 1. */ - maxRowCount?: number; - }; - /** The minimum value of the axis. If undefined the min value is automatically calculate. */ - min?: number; - /** The grid lines settings. */ - grid?: { - /** Enable or disable the grid lines. - * - * Defaults to true. - * */ - enabled?: boolean; - }; - ticks?: { - /** Pixel interval of the tick marks. Not applicable to categorized axis. - * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */ - pixelInterval?: number; - }; - /** Padding of the max value relative to the length of the axis. - * A padding of 0.05 will make a 100px axis 5px longer. - * - * Defaults to 0.05 for Y axis and to 0.01 for X axis. - * */ - maxPadding?: number; -}; - -export type ChartKitWidgetXAxis = ChartKitWidgetAxis; - -export type ChartKitWidgetYAxis = ChartKitWidgetAxis & { - /** Axis location. - * Possible values - 'left' and 'right'. - * */ - position?: 'left' | 'right'; - /** Property for splitting charts. Determines which area the axis is located in. - * */ - plotIndex?: number; -}; diff --git a/src/types/widget-data/bar-x.ts b/src/types/widget-data/bar-x.ts deleted file mode 100644 index 379d5c59..00000000 --- a/src/types/widget-data/bar-x.ts +++ /dev/null @@ -1,70 +0,0 @@ -import {SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; -import type {ChartKitWidgetSeriesOptions} from './series'; - -export type BarXSeriesData = BaseSeriesData & { - /** - * The `x` value of the bar. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value of the bar. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - * - timestamp value (for `datetime` y axis) - * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories` - */ - y?: string | number; - /** - * Corresponding value of axis category. - * - * @deprecated use `x` or `y` instead - */ - category?: string; - /** Data label value of the bar-x column. If not specified, the y value is used. */ - label?: string | number; - /** Individual opacity for the bar-x column. */ - opacity?: number; -}; - -export type BarXSeries = BaseSeries & { - type: typeof SeriesType.BarX; - data: BarXSeriesData[]; - /** The name of the series (used in legend, tooltip etc) */ - name: string; - /** The main color of the series (hex, rgba) */ - color?: string; - /** Whether to stack the values of each series on top of each other. - * Possible values are undefined to disable, "normal" to stack by value or "percent" - * - * @default undefined - * */ - stacking?: 'normal' | 'percent'; - /** This option allows grouping series in a stacked chart */ - stackId?: string; - /** Whether to group non-stacked columns or to let them render independent of each other. - * When false columns will be laid out individually and overlap each other. - * - * @default true - * */ - grouping?: boolean; - dataLabels?: BaseSeries['dataLabels'] & - ChartKitWidgetSeriesOptions['dataLabels'] & { - /** - * Whether to align the data label inside or outside the box - * - * @default false - * */ - inside?: boolean; - }; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - /** Y-axis index (when using two axes) */ - yAxis?: number; -}; diff --git a/src/types/widget-data/bar-y.ts b/src/types/widget-data/bar-y.ts deleted file mode 100644 index 90bcf5c0..00000000 --- a/src/types/widget-data/bar-y.ts +++ /dev/null @@ -1,62 +0,0 @@ -import {SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; -import type {ChartKitWidgetSeriesOptions} from './series'; - -export type BarYSeriesData = BaseSeriesData & { - /** - * The `x` value of the bar. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value of the bar. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - * - timestamp value (for `datetime` y axis) - * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories` - */ - y?: string | number; - /** Data label value of the bar. If not specified, the x value is used. */ - label?: string | number; - /** Individual opacity for the bar. */ - opacity?: number; -}; - -export type BarYSeries = BaseSeries & { - type: typeof SeriesType.BarY; - data: BarYSeriesData[]; - /** The name of the series (used in legend, tooltip etc) */ - name: string; - /** The main color of the series (hex, rgba) */ - color?: string; - /** Whether to stack the values of each series on top of each other. - * Possible values are undefined to disable, "normal" to stack by value or "percent" - * - * @default undefined - * */ - stacking?: 'normal' | 'percent'; - /** This option allows grouping series in a stacked chart */ - stackId?: string; - /** Whether to group non-stacked columns or to let them render independent of each other. - * When false columns will be laid out individually and overlap each other. - * - * @default true - * */ - grouping?: boolean; - dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & { - /** - * Whether to align the data label inside or outside the box. - * For charts with a percentage stack, it is always true. - * - * @default false - * */ - inside?: boolean; - }; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; -}; diff --git a/src/types/widget-data/base.ts b/src/types/widget-data/base.ts deleted file mode 100644 index 7d51831d..00000000 --- a/src/types/widget-data/base.ts +++ /dev/null @@ -1,49 +0,0 @@ -export type BaseSeries = { - /** Initial visibility of the series */ - visible?: boolean; - /** - * Options for the series data labels, appearing next to each data point. - * */ - dataLabels?: { - /** - * Enable or disable the data labels - * @default true - */ - enabled?: boolean; - style?: Partial; - /** - * @default 5 - * */ - padding?: number; - /** - * @default false - * */ - allowOverlap?: boolean; - /** - * Allows to use any html-tags to display the content. - * The element will be displayed outside the box of the SVG element. - * - * @default false - * */ - html?: boolean; - }; - /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */ - cursor?: string; -}; - -export type BaseSeriesData = { - /** - * A reserved subspace to store options and values for customized functionality - * - * Here you can add additional data for your own event callbacks and formatter callbacks - */ - custom?: T; - /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */ - color?: string; -}; - -export type BaseTextStyle = { - fontSize: string; - fontWeight?: string; - fontColor?: string; -}; diff --git a/src/types/widget-data/chart.ts b/src/types/widget-data/chart.ts deleted file mode 100644 index c579a7af..00000000 --- a/src/types/widget-data/chart.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type ChartMargin = { - top: number; - right: number; - bottom: number; - left: number; -}; - -export type ChartKitWidgetChart = { - margin?: Partial; - events?: { - click?: (data: {point: unknown; series: unknown}, event: PointerEvent) => void; - }; -}; diff --git a/src/types/widget-data/halo.ts b/src/types/widget-data/halo.ts deleted file mode 100644 index 1101495c..00000000 --- a/src/types/widget-data/halo.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */ -export type Halo = { - /** Enable or disable the halo */ - enabled?: boolean; - /** The opacity of halo */ - opacity?: number; - /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */ - size?: number; -}; diff --git a/src/types/widget-data/index.ts b/src/types/widget-data/index.ts deleted file mode 100644 index fd65b7df..00000000 --- a/src/types/widget-data/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type {ChartKitWidgetXAxis, ChartKitWidgetYAxis} from './axis'; -import type {ChartKitWidgetChart} from './chart'; -import type {ChartKitWidgetLegend} from './legend'; -import type {ChartKitWidgetSeries, ChartKitWidgetSeriesOptions} from './series'; -import type {ChartKitWidgetSplit} from './split'; -import type {ChartKitWidgetTitle} from './title'; -import type {ChartKitWidgetTooltip} from './tooltip'; - -export * from './axis'; -export * from './base'; -export * from './chart'; -export * from './legend'; -export * from './pie'; -export * from './scatter'; -export * from './bar-x'; -export * from './bar-y'; -export * from './area'; -export * from './line'; -export * from './series'; -export * from './split'; -export * from './title'; -export * from './tooltip'; -export * from './halo'; -export * from './treemap'; -export * from './waterfall'; - -export type ChartKitWidgetData = { - chart?: ChartKitWidgetChart; - legend?: ChartKitWidgetLegend; - series: { - data: ChartKitWidgetSeries[]; - options?: ChartKitWidgetSeriesOptions; - }; - title?: ChartKitWidgetTitle; - tooltip?: ChartKitWidgetTooltip; - xAxis?: ChartKitWidgetXAxis; - yAxis?: ChartKitWidgetYAxis[]; - /** Setting for displaying charts on different plots. - * It can be used to visualize related information on multiple charts. */ - split?: ChartKitWidgetSplit; -}; diff --git a/src/types/widget-data/legend.ts b/src/types/widget-data/legend.ts deleted file mode 100644 index 8affda16..00000000 --- a/src/types/widget-data/legend.ts +++ /dev/null @@ -1,111 +0,0 @@ -import type {BaseTextStyle} from './base'; - -export type ChartKitWidgetLegend = { - enabled?: boolean; - /** - * Different types for different color schemes. - * If the color scheme is continuous, a gradient legend will be drawn. - * Otherwise, samples for different point values - * - * @default 'discrete' - */ - type?: 'discrete' | 'continuous'; - /** - * 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 - * - * @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; - /* The title that will be added on top of the legend. */ - title?: { - text?: string; - /** CSS styles for the title */ - style?: Partial; - /** The distance(in pixels) between the main content of the legend and its title - * - * Defaults to 4 for horizontal axes, 8 for vertical. - * */ - margin?: number; - }; - /* Gradient color settings for continuous legend type */ - colorScale?: { - /* Color stops for the gradient. - * If not defined, it is distributed evenly according to the number of specified colors - * */ - stops?: number[]; - /* The colors that form the gradient */ - colors: string[]; - /* Data that is displayed as ticks. - * It can be useful when the points are colored according to additional dimensions that are not involved in the chart display. - * By default, it is formed depending on the type of series ("y" for bar-x or "value" for pie series, for example). - **/ - domain?: number[]; - }; - /* Width of the legend */ - width?: number; -}; - -export type BaseLegendSymbol = { - /** - * 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 - * - * @default 10 - * */ - width?: number; - - /** - * 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. - */ - radius?: number; -}; - -export type PathLegendSymbolOptions = BaseLegendSymbol & { - /** - * The pixel width of the symbol for series types that use a path in the legend - * - * @default 16 - * */ - width?: number; -}; - -export type SymbolLegendSymbolOptions = BaseLegendSymbol & { - /** - * The pixel width of the symbol for series types that use a symbol in the legend - * - * @default 8 - * */ - width?: number; -}; diff --git a/src/types/widget-data/line.ts b/src/types/widget-data/line.ts deleted file mode 100644 index d0324656..00000000 --- a/src/types/widget-data/line.ts +++ /dev/null @@ -1,59 +0,0 @@ -import {DashStyle, LineCap, SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import type {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; -import type {PointMarkerOptions} from './marker'; - -export type LineSeriesData = BaseSeriesData & { - /** - * The `x` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - * - timestamp value (for `datetime` y axis) - * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories` - */ - y?: string | number; - /** Data label value of the point. If not specified, the y value is used. */ - label?: string | number; - marker?: { - states?: { - normal?: { - enabled: boolean; - }; - }; - }; -}; - -export type LineSeries = BaseSeries & { - type: typeof SeriesType.Line; - data: LineSeriesData[]; - /** The name of the series (used in legend, tooltip etc) */ - name: string; - /** The main color of the series (hex, rgba) */ - color?: string; - /** Pixel width of the graph line. - * - * @default 1 - * */ - lineWidth?: number; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - /** Options for the point markers of line series */ - marker?: PointMarkerOptions; - /** Option for line stroke style */ - dashStyle?: `${DashStyle}`; - /** Option for line cap style */ - linecap?: `${LineCap}`; - /** Individual opacity for the line. */ - opacity?: number; - /** Y-axis index (when using two axes) */ - yAxis?: number; -}; diff --git a/src/types/widget-data/marker.ts b/src/types/widget-data/marker.ts deleted file mode 100644 index 1e113470..00000000 --- a/src/types/widget-data/marker.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {SymbolType} from '../../constants'; - -export type PointMarkerOptions = { - /** Enable or disable the point marker */ - enabled?: boolean; - /** The radius of the point marker */ - radius?: number; - /** The color of the point marker's border */ - borderColor?: string; - /** The width of the point marker's border */ - borderWidth?: number; - symbol?: `${SymbolType}`; -}; diff --git a/src/types/widget-data/pie.ts b/src/types/widget-data/pie.ts deleted file mode 100644 index efe392c6..00000000 --- a/src/types/widget-data/pie.ts +++ /dev/null @@ -1,88 +0,0 @@ -import type {BaseType} from 'd3'; - -import {SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; - -export type PieSeriesData = BaseSeriesData & { - /** The value of the pie segment. */ - value: number; - /** The name of the pie segment (used in legend, tooltip etc). */ - name: string; - /** Initial visibility of the pie segment. */ - visible?: boolean; - /** Initial data label of the pie segment. If not specified, the value is used. */ - label?: string; - /** Individual opacity for the pie segment. */ - opacity?: number; -}; - -export type ConnectorShape = 'straight-line' | 'polyline'; -export type ConnectorCurve = 'linear' | 'basic'; - -export type PieSeries = BaseSeries & { - type: typeof SeriesType.Pie; - data: PieSeriesData[]; - /** - * The color of the border surrounding each segment. - * @default `--g-color-base-background` from @gravity-ui/uikit. - */ - borderColor?: string; - /** - * The width of the border surrounding each segment. - * @default '1px' - */ - borderWidth?: number; - /** - * The corner radius of the border surrounding each segment. - * @default 0 - */ - borderRadius?: number; - /** The center of the pie chart relative to the chart area. */ - center?: [string | number | null, string | number | null]; - /** - * The inner radius of the pie. - * @default 0 - */ - innerRadius?: string | number; - /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */ - radius?: string | number; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - dataLabels?: BaseSeries['dataLabels'] & { - /** - * The distance of the data label from the pie's edge. - * - * @default 30 - * */ - distance?: number; - /** - * The distance from the data label to the connector. - * - * @default 5 - * */ - connectorPadding?: number; - /** - * The method that is used to generate the connector path. - * - * @default 'polyline' - * */ - connectorShape?: ConnectorShape; - /** - * How to interpolate between two-dimensional [x, y] points for a connector. - * Works only if connectorShape equals to 'polyline' - * - * @default 'basic' - * */ - connectorCurve?: ConnectorCurve; - }; - /** - * Function for adding custom svg nodes for a series - * - * @return BaseType - * */ - renderCustomShape?: (args: {series: {innerRadius: number}}) => BaseType; -}; diff --git a/src/types/widget-data/scatter.ts b/src/types/widget-data/scatter.ts deleted file mode 100644 index 9708e803..00000000 --- a/src/types/widget-data/scatter.ts +++ /dev/null @@ -1,48 +0,0 @@ -import {SeriesType, SymbolType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import type {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; - -export type ScatterSeriesData = BaseSeriesData & { - /** - * The `x` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value of the point. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - * - timestamp value (for `datetime` y axis) - * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories` - */ - y?: string | number; - /** - * Corresponding value of axis category. - * - * @deprecated use `x` or `y` instead - */ - category?: string; - /** Individual radius for the point. */ - radius?: number; - /** Individual opacity for the point. */ - opacity?: number; -}; - -export type ScatterSeries = BaseSeries & { - type: typeof SeriesType.Scatter; - data: ScatterSeriesData[]; - /** The name of the series (used in legend, tooltip etc) */ - name: string; - /** The main color of the series (hex, rgba) */ - color?: string; - /** A predefined shape or symbol for the dot */ - symbolType?: `${SymbolType}`; - /** Individual series legend options. Has higher priority than legend options in widget data */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - /** Y-axis index (when using two axes) */ - yAxis?: number; -}; diff --git a/src/types/widget-data/series.ts b/src/types/widget-data/series.ts deleted file mode 100644 index fa33a9e1..00000000 --- a/src/types/widget-data/series.ts +++ /dev/null @@ -1,250 +0,0 @@ -import React from 'react'; - -import {DashStyle, LineCap} from '../../constants'; - -import type {AreaSeries, AreaSeriesData} from './area'; -import type {BarXSeries, BarXSeriesData} from './bar-x'; -import type {BarYSeries, BarYSeriesData} from './bar-y'; -import type {Halo} from './halo'; -import type {LineSeries, LineSeriesData} from './line'; -import type {PointMarkerOptions} from './marker'; -import type {PieSeries, PieSeriesData} from './pie'; -import type {ScatterSeries, ScatterSeriesData} from './scatter'; -import type {TreemapSeries, TreemapSeriesData} from './treemap'; -import type {WaterfallSeries, WaterfallSeriesData} from './waterfall'; - -export type ChartKitWidgetSeries = - | ScatterSeries - | PieSeries - | BarXSeries - | BarYSeries - | LineSeries - | AreaSeries - | TreemapSeries - | WaterfallSeries; - -export type ChartKitWidgetSeriesData = - | ScatterSeriesData - | PieSeriesData - | BarXSeriesData - | BarYSeriesData - | LineSeriesData - | AreaSeriesData - | TreemapSeriesData - | WaterfallSeriesData; - -export type DataLabelRendererData = { - data: ChartKitWidgetSeriesData; -}; - -type BasicHoverState = { - /** - * Enable separate styles for the hovered series. - * - * @default true - * */ - enabled?: boolean; - /** - * How much to brighten/darken the point on hover. Use positive to brighten, negative to darken. - * The behavior of this property is dependent on the implementing color space ([more details](https://d3js.org/d3-color#color_brighter)). - * For example in case of using rgb color you can use floating point number from `-5.0` to `5.0`. - * Rgb color space is used by default. - * - * @default 0.3 - */ - brightness?: number; -}; - -export type BasicInactiveState = { - /** - * Enable separate styles for the inactive series. - * - * @default true - * */ - enabled?: boolean; - /** - * Opacity of series elements (bars, data labels) - * - * @default 0.5 - * */ - opacity?: number; -}; - -export type ChartKitWidgetSeriesOptions = { - /** Individual data label for each point. */ - dataLabels?: { - /** Enable or disable the data labels */ - enabled?: boolean; - /** Callback function to render the data label */ - renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes; - }; - 'bar-x'?: { - /** The maximum allowed pixel width for a column. - * This prevents the columns from becoming too wide when there is a small number of points in the chart. - * - * @default 50 - */ - barMaxWidth?: number; - /** Padding between each column or bar, in x axis units. - * - * @default 0.1 - * */ - barPadding?: number; - /** Padding between each value groups, in x axis units - * - * @default 0.2 - */ - groupPadding?: number; - dataSorting?: { - /** Determines what data value should be used to sort by. - * Possible values are undefined to disable, "name" to sort by series name or "y" - * - * @default undefined - * */ - key?: 'name' | 'y' | undefined; - /** Sorting direction. - * - * @default 'asc' - * */ - direction?: 'asc' | 'desc'; - }; - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState; - inactive?: BasicInactiveState; - }; - }; - 'bar-y'?: { - /** The maximum allowed pixel width for a column. - * This prevents the columns from becoming too wide when there is a small number of points in the chart. - * - * @default 50 - */ - barMaxWidth?: number; - /** Padding between each column or bar, in x axis units. - * - * @default 0.1 - * */ - barPadding?: number; - /** Padding between each value groups, in x axis units - * - * @default 0.2 - */ - groupPadding?: number; - dataSorting?: { - /** Determines what data value should be used to sort by. - * Possible values are undefined to disable, "name" to sort by series name or "x" - * - * @default undefined - * */ - key?: 'name' | 'x' | undefined; - /** Sorting direction. - * - * @default 'asc' - * */ - direction?: 'asc' | 'desc'; - }; - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState; - inactive?: BasicInactiveState; - }; - }; - pie?: { - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState & { - /** Options for the halo appearing outside the hovered slice */ - halo?: Halo; - }; - inactive?: BasicInactiveState; - }; - }; - scatter?: { - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState & { - marker?: PointMarkerOptions & { - /** Options for the halo appearing around the hovered point */ - halo?: Halo; - }; - }; - inactive?: BasicInactiveState; - }; - }; - line?: { - /** Pixel width of the graph line. - * - * @default 1 - * */ - lineWidth?: number; - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState & { - marker?: PointMarkerOptions & { - /** Options for the halo appearing around the hovered point */ - halo?: Halo; - }; - }; - inactive?: BasicInactiveState; - }; - /** Options for the point markers of line series */ - marker?: PointMarkerOptions; - - /** Options for line style - * - * @default 'Solid' - * */ - dashStyle?: `${DashStyle}`; - - /** Options for line cap style - * - * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid' - * */ - linecap?: `${LineCap}`; - }; - area?: { - /** Pixel width of the graph line. - * - * @default 1 - * */ - lineWidth?: number; - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState & { - marker?: PointMarkerOptions & { - /** Options for the halo appearing around the hovered point */ - halo?: Halo; - }; - }; - inactive?: BasicInactiveState; - }; - /** Options for the point markers of line series */ - marker?: PointMarkerOptions; - }; - treemap?: { - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState; - inactive?: BasicInactiveState; - }; - }; - waterfall?: { - /** The maximum allowed pixel width for a column. - * This prevents the columns from becoming too wide when there is a small number of points in the chart. - * - * @default 50 - */ - barMaxWidth?: number; - /** Padding between each column or bar, in x axis units. - * - * @default 0.1 - * */ - barPadding?: number; - /** Options for the series states that provide additional styling information to the series. */ - states?: { - hover?: BasicHoverState; - inactive?: BasicInactiveState; - }; - }; -}; diff --git a/src/types/widget-data/split.ts b/src/types/widget-data/split.ts deleted file mode 100644 index 2115c28e..00000000 --- a/src/types/widget-data/split.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {BaseTextStyle} from './base'; - -export type SplitPlotOptions = { - title?: { - text: string; - style?: Partial; - }; -}; - -export type ChartKitWidgetSplit = { - enable: boolean; - layout?: 'vertical'; - gap?: string | number; - plots?: SplitPlotOptions[]; -}; diff --git a/src/types/widget-data/title.ts b/src/types/widget-data/title.ts deleted file mode 100644 index efe9cff4..00000000 --- a/src/types/widget-data/title.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type {BaseTextStyle} from './base'; - -export type ChartKitWidgetTitle = { - text: string; - style?: Partial; -}; diff --git a/src/types/widget-data/tooltip.ts b/src/types/widget-data/tooltip.ts deleted file mode 100644 index b04cf48c..00000000 --- a/src/types/widget-data/tooltip.ts +++ /dev/null @@ -1,81 +0,0 @@ -import type {AreaSeries, AreaSeriesData} from './area'; -import type {BarXSeries, BarXSeriesData} from './bar-x'; -import type {BarYSeries, BarYSeriesData} from './bar-y'; -import type {LineSeries, LineSeriesData} from './line'; -import type {PieSeries, PieSeriesData} from './pie'; -import type {ScatterSeries, ScatterSeriesData} from './scatter'; -import type {TreemapSeries, TreemapSeriesData} from './treemap'; -import type {WaterfallSeries, WaterfallSeriesData} from './waterfall'; - -export type TooltipDataChunkBarX = { - data: BarXSeriesData; - series: BarXSeries; -}; - -export type TooltipDataChunkBarY = { - data: BarYSeriesData; - series: BarYSeries; -}; - -export type TooltipDataChunkPie = { - data: PieSeriesData; - series: { - type: PieSeries['type']; - id: string; - name: string; - }; -}; - -export type TooltipDataChunkScatter = { - data: ScatterSeriesData; - series: { - type: ScatterSeries['type']; - id: string; - name: string; - }; -}; - -export type TooltipDataChunkLine = { - data: LineSeriesData; - series: { - type: LineSeries['type']; - id: string; - name: string; - }; -}; - -export type TooltipDataChunkArea = { - data: AreaSeriesData; - series: { - type: AreaSeries['type']; - id: string; - name: string; - }; -}; - -export type TooltipDataChunkTreemap = { - data: TreemapSeriesData; - series: TreemapSeries; -}; - -export type TooltipDataChunkWaterfall = { - data: WaterfallSeriesData; - series: WaterfallSeries; -}; - -export type TooltipDataChunk = ( - | TooltipDataChunkBarX - | TooltipDataChunkBarY - | TooltipDataChunkPie - | TooltipDataChunkScatter - | TooltipDataChunkLine - | TooltipDataChunkArea - | TooltipDataChunkTreemap - | TooltipDataChunkWaterfall -) & {closest?: boolean}; - -export type ChartKitWidgetTooltip = { - enabled?: boolean; - /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */ - renderer?: (args: {hovered: TooltipDataChunk[]}) => React.ReactElement | null; -}; diff --git a/src/types/widget-data/treemap.ts b/src/types/widget-data/treemap.ts deleted file mode 100644 index ded6af3e..00000000 --- a/src/types/widget-data/treemap.ts +++ /dev/null @@ -1,48 +0,0 @@ -import {LayoutAlgorithm, SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; - -export type TreemapSeriesData = BaseSeriesData & { - /** The name of the node (used in legend, tooltip etc). */ - name: string | string[]; - /** The value of the node. All nodes should have this property except nodes that have children. */ - value?: number; - /** An id for the node. Used to group children. */ - id?: string; - /** - * Parent id. Used to build a tree structure. The value should be the id of the node which is the parent. - * If no nodes has a matching id, or this option is undefined, then the parent will be set to the root. - */ - parentId?: string; -}; - -export type TreemapSeries = BaseSeries & { - type: typeof SeriesType.Treemap; - data: TreemapSeriesData[]; - /** The name of the series (used in legend, tooltip etc). */ - name: string; - /** The main color of the series (hex, rgba). */ - color?: string; - /** Individual series legend options. Has higher priority than legend options in widget data. */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; - /** Set options on specific levels. Takes precedence over series options, but not point options. */ - levels?: { - /** Decides which level takes effect from the options set in the levels object. */ - index: number; - /** Can set the padding between all points which lies on the same level. */ - padding?: number; - /** Can set a color on all points which lies on the same level. */ - color?: string; - }[]; - layoutAlgorithm?: `${LayoutAlgorithm}`; - /** - * Options for the series data labels, appearing next to each data point. - * */ - dataLabels?: BaseSeries['dataLabels'] & { - /** Horizontal alignment of the data label inside the tile. */ - align?: 'left' | 'center' | 'right'; - }; -}; diff --git a/src/types/widget-data/waterfall.ts b/src/types/widget-data/waterfall.ts deleted file mode 100644 index a3cf72ff..00000000 --- a/src/types/widget-data/waterfall.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {SeriesType} from '../../constants'; - -import type {BaseSeries, BaseSeriesData} from './base'; -import {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend'; - -export type WaterfallSeriesData = BaseSeriesData & { - /** - * The `x` value. Depending on the context , it may represents: - * - numeric value (for `linear` x axis) - * - timestamp value (for `datetime` x axis) - * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories` - */ - x?: string | number; - /** - * The `y` value. Depending on the context , it may represents: - * - numeric value (for `linear` y axis) - */ - y?: number; - /** Data label value of the point. If not specified, the y value is used. */ - label?: string | number; - /** Individual opacity for the point. */ - opacity?: number; - /** When this property is true, the point display the total sum across the entire series. */ - total?: boolean; -}; - -export type WaterfallSeries = BaseSeries & { - type: typeof SeriesType.Waterfall; - data: WaterfallSeriesData[]; - /** The name of the series (used in legend, tooltip etc). */ - name: string; - /** The main color of the series (hex, rgba). */ - color?: string; - /** The color used for positive values. If it is not specified, the general color of the series is used. */ - positiveColor?: string; - /** The color used for negative values. If it is not specified, the general color of the series is used. */ - negativeColor?: string; - /** Individual series legend options. Has higher priority than legend options in widget data. */ - legend?: ChartKitWidgetLegend & { - symbol?: RectLegendSymbolOptions; - }; -}; diff --git a/src/types/widget.ts b/src/types/widget.ts index 610b42a3..846d34aa 100644 --- a/src/types/widget.ts +++ b/src/types/widget.ts @@ -1,10 +1,10 @@ +import type {ChartData} from '@gravity-ui/charts'; + import type {SplitLayoutType} from '../components/SplitPane/types'; import type {Highcharts, HighchartsWidgetData, StringParams} from '../plugins/highcharts/types'; import type {IndicatorWidgetData} from '../plugins/indicator/types'; import type {CustomTooltipProps, Yagr, YagrWidgetData} from '../plugins/yagr/types'; -import type {ChartKitWidgetData} from './widget-data'; - export interface ChartKitWidget { yagr: { data: YagrWidgetData; @@ -31,7 +31,7 @@ export interface ChartKitWidget { ) => void; }; d3: { - data: ChartKitWidgetData; + data: ChartData; widget: never; tooltip?: { splitted?: boolean;