diff --git a/jest/mocks/globals.mock.js b/jest/mocks/globals.mock.js index 0ad56e8f48..73c8757944 100644 --- a/jest/mocks/globals.mock.js +++ b/jest/mocks/globals.mock.js @@ -61,3 +61,11 @@ jest.mock(`../../src/ui/libs/userSettings/index.ts`, () => { }, }; }); + +jest.mock('@gravity-ui/chartkit/d3', () => { + return { + CustomShapeRenderer: { + pieCenterText: () => {}, + }, + }; +}); diff --git a/package-lock.json b/package-lock.json index 2c0d187b3c..099ed9a5ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@diplodoc/transform": "^4.20.0", "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", - "@gravity-ui/chartkit": "^5.17.1", + "@gravity-ui/chartkit": "^5.18.1", "@gravity-ui/dashkit": "^8.20.1", "@gravity-ui/date-utils": "^2.3.0", "@gravity-ui/expresskit": "^2.1.0", @@ -4996,18 +4996,17 @@ "integrity": "sha512-GhZemc/gPq/Kf4OYyXZpeZLgL69pI8oidWhdOKUHOWSYQyKviDDZDxrMzjZzvCWOxrpQVFtmqiCBMW8nqJivEQ==" }, "node_modules/@gravity-ui/chartkit": { - "version": "5.17.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.17.1.tgz", - "integrity": "sha512-P6wSqqggUQEHzygC8OE3/hIiaz5RMz+/PvNwvmyIhYp/d2UyduYnMQKXJa1NMpvewT8Wvwoq69hQRduwelcZIg==", + "version": "5.18.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.18.1.tgz", + "integrity": "sha512-XxDroLbp/ISQE102hjUQ2LIb/8LMtZ348kaVRd+FivsPwXS5oKXTPAyKzXcpTpqaNAupy824Nsw70wOhI4fkwQ==", "dependencies": { "@bem-react/classname": "^1.6.0", + "@gravity-ui/charts": "^0.4.1", "@gravity-ui/date-utils": "^2.1.0", "@gravity-ui/i18n": "^1.0.0", "@gravity-ui/yagr": "^4.3.4", "afterframe": "^1.0.2", - "d3": "^7.8.5", "lodash": "^4.17.21", - "react-split-pane": "^0.1.92", "tslib": "^2.6.2" }, "peerDependencies": { @@ -5015,6 +5014,24 @@ "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@gravity-ui/charts": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/charts/-/charts-0.4.1.tgz", + "integrity": "sha512-/coBYT+abt0S4uYAGWiTFe6qEROpVamx+ZxQqymfpRzxLrF4SoMTOTIJeGCq9atAZLHhTBhuBIMYTWDxXdI2Zg==", + "dependencies": { + "@bem-react/classname": "^1.6.0", + "@gravity-ui/date-utils": "^2.5.4", + "@gravity-ui/i18n": "^1.6.0", + "d3": "^7.9.0", + "lodash": "^4.17.21", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "@gravity-ui/uikit": "^6.0.0", + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, "node_modules/@gravity-ui/components": { "version": "3.12.3", "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-3.12.3.tgz", @@ -14246,9 +14263,9 @@ } }, "node_modules/d3": { - "version": "7.8.5", - "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz", - "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz", + "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==", "dependencies": { "d3-array": "3", "d3-axis": "3", @@ -26251,6 +26268,7 @@ }, "node_modules/react-lifecycles-compat": { "version": "3.0.4", + "dev": true, "license": "MIT" }, "node_modules/react-list": { @@ -26379,6 +26397,7 @@ }, "node_modules/react-split-pane": { "version": "0.1.92", + "dev": true, "license": "MIT", "dependencies": { "prop-types": "^15.7.2", @@ -26392,6 +26411,7 @@ }, "node_modules/react-style-proptype": { "version": "3.2.2", + "dev": true, "license": "MIT", "dependencies": { "prop-types": "^15.5.4" diff --git a/package.json b/package.json index 27a27bccbf..afdb83d198 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@diplodoc/transform": "^4.20.0", "@gravity-ui/app-layout": "^2.1.0", "@gravity-ui/browserslist-config": "^4.3.0", - "@gravity-ui/chartkit": "^5.17.1", + "@gravity-ui/chartkit": "^5.18.1", "@gravity-ui/dashkit": "^8.20.1", "@gravity-ui/date-utils": "^2.3.0", "@gravity-ui/expresskit": "^2.1.0", diff --git a/tests/opensource-suites/dash/base/loading.test.ts b/tests/opensource-suites/dash/base/loading.test.ts index 00815dc9e1..56143981bc 100644 --- a/tests/opensource-suites/dash/base/loading.test.ts +++ b/tests/opensource-suites/dash/base/loading.test.ts @@ -14,7 +14,7 @@ const TEXTS = { }; const SELECTORS = { - CHART_LINE_ITEM: '.chartkit-d3-axis', + CHART_LINE_ITEM: '.gcharts-d3-axis', }; const waitForDashFirstResponseSentData = async ({ diff --git a/tests/opensource-suites/dash/base/relations.test.ts b/tests/opensource-suites/dash/base/relations.test.ts index 7b6396d5b7..bbf34f958e 100644 --- a/tests/opensource-suites/dash/base/relations.test.ts +++ b/tests/opensource-suites/dash/base/relations.test.ts @@ -7,7 +7,7 @@ import {ConnectionsDialogQA, Feature} from '../../../../src/shared'; import {TestParametrizationConfig} from '../../../types/config'; const SELECTORS = { - CHART_LEGEND_ITEM: '.chartkit-d3-legend__item', + CHART_LEGEND_ITEM: '.gcharts-d3-legend__item', CONTROL_SELECT_ITEMS_KEY: 'chartkit-control-select-items', }; const PARAMS = { diff --git a/tests/opensource-suites/dash/relations/ignore.test.ts b/tests/opensource-suites/dash/relations/ignore.test.ts index 871e903be7..4b8854cdf9 100644 --- a/tests/opensource-suites/dash/relations/ignore.test.ts +++ b/tests/opensource-suites/dash/relations/ignore.test.ts @@ -7,7 +7,7 @@ import {DashRelationTypes} from '../../../../src/shared'; import {TestParametrizationConfig} from '../../../types/config'; const SELECTORS = { - CHART_LEGEND_ITEM: '.chartkit-d3-legend__item', + CHART_LEGEND_ITEM: '.gcharts-d3-legend__item', CONTROL_SELECT_ITEMS_KEY: 'chartkit-control-select-items', }; diff --git a/tests/opensource-suites/dash/relations/relations.test.ts b/tests/opensource-suites/dash/relations/relations.test.ts index e50bcfa118..1da66b5254 100644 --- a/tests/opensource-suites/dash/relations/relations.test.ts +++ b/tests/opensource-suites/dash/relations/relations.test.ts @@ -7,7 +7,7 @@ import {DashCommonQa, DashRelationTypes} from '../../../../src/shared'; import {TestParametrizationConfig} from '../../../types/config'; const SELECTORS = { - CHART_LEGEND_ITEM: '.chartkit-d3-legend__item', + CHART_LEGEND_ITEM: '.gcharts-d3-legend__item', CONTROL_SELECT_ITEMS_KEY: 'chartkit-control-select-items', }; diff --git a/tests/opensource-suites/ql/visualizations/column/column.test.ts b/tests/opensource-suites/ql/visualizations/column/column.test.ts index b7e3729863..f8791b79a0 100644 --- a/tests/opensource-suites/ql/visualizations/column/column.test.ts +++ b/tests/opensource-suites/ql/visualizations/column/column.test.ts @@ -28,7 +28,7 @@ datalensTest.describe('QL', () => { const qlPage = new QLPage({page}); const previewLoader = page.locator('.grid-loader'); - const chart = page.locator('.chartkit-graph,.chartkit-d3'); + const chart = page.locator('.chartkit-graph,.gcharts-d3'); await qlPage.sectionVisualization.removeFieldByClick( PlaceholderName.X, diff --git a/tests/opensource-suites/ql/visualizations/pie/labels.test.ts b/tests/opensource-suites/ql/visualizations/pie/labels.test.ts index be2895b38c..d06aa6370b 100644 --- a/tests/opensource-suites/ql/visualizations/pie/labels.test.ts +++ b/tests/opensource-suites/ql/visualizations/pie/labels.test.ts @@ -20,7 +20,7 @@ datalensTest.describe('QL', () => { datalensTest('"Column names" in Labels section @screenshot', async ({page}) => { const qlPage = new QLPage({page}); const previewLoader = page.locator('.grid-loader'); - const chart = page.locator('.chartkit-graph,.chartkit-d3'); + const chart = page.locator('.chartkit-graph,.gcharts-d3'); await qlPage.sectionVisualization.addFieldByClick(PlaceholderName.Labels, 'city'); await expect(previewLoader).not.toBeVisible(); diff --git a/tests/opensource-suites/ql/visualizations/treemap/basic.test.ts b/tests/opensource-suites/ql/visualizations/treemap/basic.test.ts index a501a1c9b6..2abaa6ff36 100644 --- a/tests/opensource-suites/ql/visualizations/treemap/basic.test.ts +++ b/tests/opensource-suites/ql/visualizations/treemap/basic.test.ts @@ -27,7 +27,7 @@ datalensTest.describe('QL', () => { datalensTest('Visualization of the graph without errors', async ({page}) => { const previewLoader = page.locator('.grid-loader'); - const chart = page.locator('.chartkit-d3'); + const chart = page.locator('.gcharts-d3'); await expect(previewLoader).not.toBeVisible(); await expect(chart).toBeVisible(); diff --git a/tests/opensource-suites/wizard/edit-history/basic.test.ts b/tests/opensource-suites/wizard/edit-history/basic.test.ts index 55193e524a..cac03b1a3e 100644 --- a/tests/opensource-suites/wizard/edit-history/basic.test.ts +++ b/tests/opensource-suites/wizard/edit-history/basic.test.ts @@ -32,7 +32,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Make some changes, then undo them', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-graph,.chartkit-d3'); + const chart = chartContainer.locator('.chartkit-graph,.gcharts-d3'); await expect(chart).toBeVisible(); @@ -62,7 +62,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Make some changes, then undo them, then redo them', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-graph,.chartkit-d3'); + const chart = chartContainer.locator('.chartkit-graph,.gcharts-d3'); await expect(chart).toBeVisible(); diff --git a/tests/opensource-suites/wizard/fields/parameters.test.ts b/tests/opensource-suites/wizard/fields/parameters.test.ts index 7c5cc4771f..aa9ee0ac07 100644 --- a/tests/opensource-suites/wizard/fields/parameters.test.ts +++ b/tests/opensource-suites/wizard/fields/parameters.test.ts @@ -61,7 +61,7 @@ datalensTest.describe('Wizard', () => { const datasetFields = page.locator(slct(SectionDatasetQA.DatasetFields)); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); - const chart = chartContainer.locator('.chartkit-graph,.chartkit-d3'); + const chart = chartContainer.locator('.chartkit-graph,.gcharts-d3'); const noData = chartContainer.locator(slct('ERR.CK.NO_DATA')); // Create parameter (value = 1) diff --git a/tests/opensource-suites/wizard/visualizations/line/axis.test.ts b/tests/opensource-suites/wizard/visualizations/line/axis.test.ts index 159592555f..350697cf22 100644 --- a/tests/opensource-suites/wizard/visualizations/line/axis.test.ts +++ b/tests/opensource-suites/wizard/visualizations/line/axis.test.ts @@ -21,7 +21,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Date and time on the Y axis @screenshot', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-graph,.chartkit-d3'); + const chart = chartContainer.locator('.chartkit-graph,.gcharts-d3'); // Create dateTime field const dateTimeMeasureField = 'MaxDate'; diff --git a/tests/opensource-suites/wizard/visualizations/pie/basic.test.ts b/tests/opensource-suites/wizard/visualizations/pie/basic.test.ts index 401170dd95..dcbde0f0c5 100644 --- a/tests/opensource-suites/wizard/visualizations/pie/basic.test.ts +++ b/tests/opensource-suites/wizard/visualizations/pie/basic.test.ts @@ -22,7 +22,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Auto coloring @screenshot', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-graph,.chartkit-d3'); + const chart = chartContainer.locator('.chartkit-graph,.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); // 1. Only Measures placeholder is filled diff --git a/tests/opensource-suites/wizard/visualizations/pie/hierarchy.test.ts b/tests/opensource-suites/wizard/visualizations/pie/hierarchy.test.ts index 6b09e45e81..9d68b58add 100644 --- a/tests/opensource-suites/wizard/visualizations/pie/hierarchy.test.ts +++ b/tests/opensource-suites/wizard/visualizations/pie/hierarchy.test.ts @@ -29,7 +29,7 @@ datalensTest.describe('Wizard', () => { async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-d3'); + const chart = chartContainer.locator('.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); await wizardPage.sectionVisualization.addFieldByClick( diff --git a/tests/opensource-suites/wizard/visualizations/scatter/coloring.test.ts b/tests/opensource-suites/wizard/visualizations/scatter/coloring.test.ts index 90a2a44a9d..84043813b4 100644 --- a/tests/opensource-suites/wizard/visualizations/scatter/coloring.test.ts +++ b/tests/opensource-suites/wizard/visualizations/scatter/coloring.test.ts @@ -22,7 +22,7 @@ datalensTest.describe('Wizard', () => { await page.setViewportSize(SMALL_SCREENSHOT_VIEWPORT_SIZE); const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-d3'); + const chart = chartContainer.locator('.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); await wizardPage.createNewFieldWithFormula( diff --git a/tests/opensource-suites/wizard/visualizations/treemap/hierarchy.test.ts b/tests/opensource-suites/wizard/visualizations/treemap/hierarchy.test.ts index a3bca0ec3c..dc8f2bb681 100644 --- a/tests/opensource-suites/wizard/visualizations/treemap/hierarchy.test.ts +++ b/tests/opensource-suites/wizard/visualizations/treemap/hierarchy.test.ts @@ -29,7 +29,7 @@ datalensTest.describe('Wizard', () => { async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-d3'); + const chart = chartContainer.locator('.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); await wizardPage.sectionVisualization.addFieldByClick( diff --git a/tests/opensource-suites/wizard/visualizations/treemap/html-in-chart.test.ts b/tests/opensource-suites/wizard/visualizations/treemap/html-in-chart.test.ts index dfbf6c0a44..8bc20491b5 100644 --- a/tests/opensource-suites/wizard/visualizations/treemap/html-in-chart.test.ts +++ b/tests/opensource-suites/wizard/visualizations/treemap/html-in-chart.test.ts @@ -23,7 +23,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Markdown dimension @screenshot', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-d3'); + const chart = chartContainer.locator('.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); await wizardPage.createNewFieldWithFormula( diff --git a/tests/opensource-suites/wizard/visualizations/treemap/tooltip.test.ts b/tests/opensource-suites/wizard/visualizations/treemap/tooltip.test.ts index 439657a263..45c344b271 100644 --- a/tests/opensource-suites/wizard/visualizations/treemap/tooltip.test.ts +++ b/tests/opensource-suites/wizard/visualizations/treemap/tooltip.test.ts @@ -18,7 +18,7 @@ datalensTest.describe('Wizard', () => { datalensTest('Tooltip when hovering chart area @screenshot', async ({page}) => { const wizardPage = new WizardPage({page}); const chartContainer = page.locator(slct(WizardPageQa.SectionPreview)); - const chart = chartContainer.locator('.chartkit-d3'); + const chart = chartContainer.locator('.gcharts-d3'); const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader)); await wizardPage.sectionVisualization.addFieldByClick( diff --git a/tests/page-objects/constants/chartkit.ts b/tests/page-objects/constants/chartkit.ts index 7e44e2b2ef..afefebb391 100644 --- a/tests/page-objects/constants/chartkit.ts +++ b/tests/page-objects/constants/chartkit.ts @@ -4,5 +4,5 @@ export const COMMON_CHARTKIT_SELECTORS = { scrollableNode: 'chartkit-scrollable-node', tooltipContainer: 'highcharts-tooltip-container', tooltipNameColumn: '_tooltip-rows__name-td', - chartLegendItem: '.chartkit-d3-legend__item', + chartLegendItem: '.gcharts-d3-legend__item', }; diff --git a/tests/page-objects/ql/QLPage.ts b/tests/page-objects/ql/QLPage.ts index 3ad44a0986..49d2c22451 100644 --- a/tests/page-objects/ql/QLPage.ts +++ b/tests/page-objects/ql/QLPage.ts @@ -221,7 +221,7 @@ class QLPage extends ChartPage { waitForSomeSuccessfulRender() { return new Promise((resolve, reject) => { - this.page.waitForSelector('.chartkit .chartkit-d3').then(resolve, () => undefined); + this.page.waitForSelector('.chartkit .gcharts-d3').then(resolve, () => undefined); this.page.waitForSelector('.chartkit .chartkit-graph').then(resolve, () => undefined); const metricLocators = [