Add a setting for the Y-axis of the area chart to connect empty values

src/i18n-keysets/wizard/en.json

@@ -279,6 +279,7 @@
   "label_two-color": "Two colors",
   "label_type": "Type",
   "label_type-preaggregated": "Type (before aggregation)",
+  "label_use-previous": "Use previous",
   "label_value": "Value",
   "label_vertical": "Vertical",
   "label_violet": "Violet (shades)",

src/i18n-keysets/wizard/ru.json

@@ -279,6 +279,7 @@
   "label_two-color": "Два цвета",
   "label_type": "Тип",
   "label_type-preaggregated": "Тип (до агрегации)",
+  "label_use-previous": "Использовать предыдущее",
   "label_value": "Значение",
   "label_vertical": "Вертикальные",
   "label_violet": "Фиолетовый (оттенки)",

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

@@ -1,11 +1,13 @@
 import _isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
 
 import type {HighchartsSeriesCustomObject} from '../../../../../../../shared';
 import {
     AxisMode,
     AxisNullsMode,
     PlaceholderId,
     WizardVisualizationId,
+    getAxisNullsSettings,
     getFakeTitleOrTitle,
     getXAxisMode,
     isDateField,
@@ -131,12 +133,6 @@ export function prepareLineData(args: PrepareFunctionArgs) {
         measureColorSortLine[getFakeTitleOrTitle(colorItem)] = {data: {}};
     }
 
-    const defaultNullValue =
-        visualizationId === WizardVisualizationId.Area ||
-        visualizationId === WizardVisualizationId.Area100p
-            ? AxisNullsMode.AsZero
-            : AxisNullsMode.Connect;
-
     const nullsY1 = yPlaceholder?.settings?.nulls;
     const nullsY2 = y2Placeholder?.settings?.nulls;
 
@@ -335,12 +331,16 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                     nulls = nullsY2;
                 }
 
-                nulls = nulls || defaultNullValue;
+                nulls = getAxisNullsSettings(nulls, visualizationId);
 
                 const innerLabels = labelsValues[lineKey];
 
                 const customSeriesData: HighchartsSeriesCustomObject = {};
 
+                const shouldUsePreviousValueForEmptyPoint =
+                    visualizationId === WizardVisualizationId.Area &&
+                    nulls === AxisNullsMode.UsePrevious;
+                let prevYValue: string | number | null | undefined = null;
                 const graph: any = {
                     id: line.id,
                     title: line.title || 'Null',
@@ -357,6 +357,14 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                                 value = 0;
                             }
 
+                            if (shouldUsePreviousValueForEmptyPoint) {
+                                if (isNil(value)) {
+                                    value = prevYValue ?? value;
+                                } else {
+                                    prevYValue = value;
+                                }
+                            }
+
                             // We can skip a point only if we put x in each point instead of categories
                             if (
                                 !isXCategoryAxis &&

src/shared/modules/wizard/axis-settings.ts

@@ -0,0 +1,16 @@
+import {WizardVisualizationId} from '../../constants';
+import {AxisNullsMode} from '../../types';
+
+export function getAxisNullsSettings(value: AxisNullsMode, visualizationId: string) {
+    const isArea =
+        visualizationId === WizardVisualizationId.Area ||
+        visualizationId === WizardVisualizationId.Area100p;
+    const defaultValue = isArea ? AxisNullsMode.AsZero : AxisNullsMode.Connect;
+    const isCurrentValueValid = value && !(value === AxisNullsMode.UsePrevious && !isArea);
+
+    if (isCurrentValueValid) {
+        return value;
+    }
+
+    return defaultValue;
+}

src/shared/modules/wizard/index.ts

@@ -1,2 +1,3 @@
 export * from './axis-mode';
+export * from './axis-settings';
 export * from './config';

src/shared/types/wizard/misc.ts

@@ -55,4 +55,5 @@ export const enum AxisNullsMode {
     Ignore = 'ignore',
     Connect = 'connect',
     AsZero = 'as-0',
+    UsePrevious = 'use-previous',
 }

src/ui/constants/visualizations/index.ts

@@ -97,6 +97,7 @@ export const SETTINGS = {
         IGNORE: AxisNullsMode.Ignore,
         CONNECT: AxisNullsMode.Connect,
         AS_ZERO: AxisNullsMode.AsZero,
+        USE_PREVIOUS: AxisNullsMode.UsePrevious,
     },
     HOLIDAYS: {
         ON: 'on',

src/ui/constants/visualizations/line.ts

@@ -106,7 +106,7 @@ export const LINE_VISUALIZATION: GraphShared['visualization'] = {
     availableLabelModes: ['absolute'],
     onDesignItemsChange: onLineChartDesignItemsChange,
     placeholders: [
-        LineXPlaceholder,
+        {...LineXPlaceholder},
         LineYPlaceholder,
         {
             allowedTypes: ITEM_TYPES.DIMENSIONS_AND_MEASURES,

src/ui/units/wizard/components/Dialogs/DialogPlaceholder/DialogPlaceholder.tsx

@@ -9,19 +9,21 @@ import block from 'bem-cn-lite';
 import DialogManager from 'components/DialogManager/DialogManager';
 import {i18n} from 'i18n';
 import type {
+    AxisNullsMode,
     Field,
     Placeholder,
     PlaceholderSettings,
     ServerChartsConfig,
     ServerPlaceholderSettings,
     ServerSort,
-    WizardVisualizationId,
 } from 'shared';
 import {
     DialogPlaceholderQa,
     Feature,
     PlaceholderId,
+    WizardVisualizationId,
     getAxisMode,
+    getAxisNullsSettings,
     hasSortThanAffectAxisMode,
     isContinuousAxisModeDisabled,
     isFieldHierarchy,
@@ -206,16 +208,26 @@ class DialogPlaceholder extends React.PureComponent<Props, State> {
             nullsOptions.splice(1, 0, connectOption);
         }
 
+        if (visualizationId === WizardVisualizationId.Area) {
+            nullsOptions.push({
+                value: SETTINGS.NULLS.USE_PREVIOUS,
+                content: i18n('wizard', 'label_use-previous'),
+            });
+        }
+
+        const selectedValue = getAxisNullsSettings(
+            settings.nulls as AxisNullsMode,
+            visualizationId,
+        );
+
         return (
             <DialogPlaceholderRow
-                settingCustomWidth="400px"
                 title={i18n('wizard', 'label_nulls')}
                 setting={
                     <DialogRadioButtons
-                        stretched={true}
                         qa="connect-nulls-radio-buttons"
                         items={nullsOptions}
-                        value={settings.nulls}
+                        value={selectedValue}
                         onUpdate={this.handleNullsRadioButtonUpdate}
                     />
                 }

tests/suites/wizard/placeholder-settings/connectNulls.test.ts

@@ -100,11 +100,15 @@ datalensTest.describe('Wizard - placeholder dialog ("Empty values (null)") ', ()
     });
 
     datalensTest(
-        'For a chart with areas, only 2 settings are available "Do not display", "Display as 0" and "Display as 0" is selected',
+        'For a chart with areas, 3 settings are available and "Display as 0" is selected',
         async ({page}: {page: Page}) => {
             const wizardPage = new WizardPage({page});
 
-            const expectedValues = [AxisNullsMode.Ignore, AxisNullsMode.AsZero];
+            const expectedValues = [
+                AxisNullsMode.Ignore,
+                AxisNullsMode.AsZero,
+                AxisNullsMode.UsePrevious,
+            ];
 
             await openTestPage(page, RobotChartsWizardUrls.WizardForDatasetSampleCh);