Set startOnTick & endOnTick to false for gravity-charts x-axis (#3523)

Author: korvin89

src/server/modes/charts/plugins/datalens/preparers/area/index.ts

@@ -234,7 +234,11 @@ export function prepareGravityChartArea(args: PrepareFunctionArgs) {
         legend.enabled = false;
     }
 
-    let xAxis: ChartData['xAxis'] = {};
+    let xAxis: ChartData['xAxis'] = {
+        startOnTick: false,
+        endOnTick: false,
+    };
+
     if (isCategoriesXAxis) {
         xAxis = {
             type: 'category',
@@ -251,6 +255,11 @@ export function prepareGravityChartArea(args: PrepareFunctionArgs) {
 
         if (isNumberField(xField)) {
             xAxis.type = xPlaceholder?.settings?.type === 'logarithmic' ? 'logarithmic' : 'linear';
+
+            if (xAxis.type === 'logarithmic') {
+                xAxis.startOnTick = true;
+                xAxis.endOnTick = true;
+            }
         }
     }
 

src/server/modes/charts/plugins/datalens/preparers/bar-x/gravity-charts.ts

@@ -290,7 +290,11 @@ export function prepareGravityChartBarX(args: PrepareFunctionArgs) {
         }
     }
 
-    let xAxis: ChartData['xAxis'] = {};
+    let xAxis: ChartData['xAxis'] = {
+        startOnTick: false,
+        endOnTick: false,
+    };
+
     if (isCategoriesXAxis && xCategories?.length) {
         xAxis = {
             type: 'category',
@@ -313,6 +317,11 @@ export function prepareGravityChartBarX(args: PrepareFunctionArgs) {
 
         if (isNumberField(xField)) {
             xAxis.type = xPlaceholder?.settings?.type === 'logarithmic' ? 'logarithmic' : 'linear';
+
+            if (xAxis.type === 'logarithmic') {
+                xAxis.startOnTick = true;
+                xAxis.endOnTick = true;
+            }
         }
 
         const xAxisLabelNumberFormat = xPlaceholder

src/server/modes/charts/plugins/datalens/preparers/line/gravity-charts.ts

@@ -226,7 +226,11 @@ export function prepareGravityChartLine(args: PrepareFunctionArgs) {
     const shouldUseHtmlForLegend = [colorItem, shapeItem].some(isHtmlField);
     const legend: ChartData['legend'] = {html: shouldUseHtmlForLegend};
 
-    let xAxis: ChartData['xAxis'] = {};
+    let xAxis: ChartData['xAxis'] = {
+        startOnTick: false,
+        endOnTick: false,
+    };
+
     if (isCategoriesXAxis) {
         xAxis = {
             type: 'category',
@@ -243,6 +247,11 @@ export function prepareGravityChartLine(args: PrepareFunctionArgs) {
 
         if (isNumberField(xField)) {
             xAxis.type = xPlaceholder?.settings?.type === 'logarithmic' ? 'logarithmic' : 'linear';
+
+            if (xAxis.type === 'logarithmic') {
+                xAxis.startOnTick = true;
+                xAxis.endOnTick = true;
+            }
         }
     }
 

tests/opensource-suites/__screenshots__/wizard/visualizations/line/axis.test.ts/Wizard-Line-chart-Chart-starts-and-ends-on-data-points-screenshot-1.png

@@ -102,5 +102,29 @@ datalensTest.describe('Wizard', () => {
             await expect(previewLoader).not.toBeVisible();
             await expect(preview).toHaveScreenshot();
         });
+
+        datalensTest('Chart starts and ends on data points @screenshot', async ({page}) => {
+            const wizardPage = new WizardPage({page});
+            const chartContainer = page.locator(slct(WizardPageQa.SectionPreview));
+            const chart = chartContainer.locator('.chartkit-graph,.gcharts-chart');
+            const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader));
+            await wizardPage.createNewFieldWithFormula('postalCodeInt', `int([postal_code])`);
+            await wizardPage.sectionVisualization.addFieldByClick(
+                PlaceholderName.X,
+                'postalCodeInt',
+            );
+            await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.Y, 'salesSum');
+            await wizardPage.sectionVisualization.addFieldByClick(
+                PlaceholderName.Filters,
+                'Order_date',
+            );
+            await wizardPage.filterEditor.selectRangeDate(['01.01.2018', '10.01.2018']);
+            await wizardPage.filterEditor.apply();
+            await expect(previewLoader).not.toBeVisible();
+            // // Put the mouse away so that the presence of hover elements does not interfere with taking screenshots
+            await page.mouse.move(-1, -1);
+            await expect(chart).toBeVisible();
+            await expect(chartContainer).toHaveScreenshot();
+        });
     });
 });