Add Markup support in Labels (#1483)

datalens-tech · Sep 6, 2024 · b435ff3 · b435ff3
1 parent f5c5191
commit b435ff3
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 17 deletions.
diff --git a/src/server/components/features/features-list/MarkupInLabels.ts b/src/server/components/features/features-list/MarkupInLabels.ts
@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.MarkupInLabels,
+    state: {
+        development: false,
+        production: false,
+    },
+});
diff --git a/src/server/modes/charts/plugins/datalens/preparers/bar-x/prepare-bar-x.ts b/src/server/modes/charts/plugins/datalens/preparers/bar-x/prepare-bar-x.ts
@@ -17,6 +17,7 @@ import {
     isDateField,
     isDimensionField,
     isMarkdownField,
+    isMarkupField,
     isMeasureField,
     isMeasureValue,
     isPercentVisualization,
@@ -73,6 +74,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const widgetConfig = ChartEditor.getWidgetConfig();
     const isActionParamsEnable = widgetConfig?.actionParams?.enable;
     const isMarkdownFieldsEnabled = features[Feature.WizardMarkdownFields];
+    const isMarkupLabelsEnabled = features[Feature.MarkupInLabels];
 
     const xPlaceholder = placeholders.find((p) => p.id === PlaceholderId.X);
     const x: ServerField | undefined = xPlaceholder?.items[0];
@@ -123,6 +125,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const labelItem = labels?.[0];
     const labelsLength = labels && labels.length;
     const isMarkdownLabel = isMarkdownFieldsEnabled && isMarkdownField(labelItem);
+    const isMarkupLabel = isMarkupLabelsEnabled && isMarkupField(labelItem);
 
     const segmentField = segments[0];
     const segmentIndexInOrder = getSegmentsIndexInOrder(order, segmentField, idToTitle);
@@ -254,6 +257,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                 segmentIndexInOrder,
                 layers: shared.visualization?.layers,
                 colorMode,
+                convertMarkupToString: !isMarkupLabelsEnabled,
             });
         });
 
@@ -340,7 +344,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                     id: line.id,
                     title: line.title || 'Null',
                     tooltip: line.tooltip,
-                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel},
+                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel || isMarkupLabel},
                     data: categories
                         .map((category, i) => {
                             const lineData = line.data[category];
@@ -390,7 +394,10 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                                 }
                             }
 
-                            point.label = getLabelValue(innerLabels?.[category], isMarkdownLabel);
+                            point.label = getLabelValue(innerLabels?.[category], {
+                                isMarkdownLabel,
+                                isMarkupLabel,
+                            });
 
                             if (isActionParamsEnable) {
                                 const actionParams: Record<string, any> = {};
@@ -486,6 +493,10 @@ export function prepareBarX(args: PrepareFunctionArgs) {
             ChartEditor.updateConfig({useMarkdown: true});
         }
 
+        if (isMarkupLabel) {
+            ChartEditor.updateConfig({useMarkup: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

diff --git a/src/server/modes/charts/plugins/datalens/preparers/bar-y/prepare-bar-y-data.ts b/src/server/modes/charts/plugins/datalens/preparers/bar-y/prepare-bar-y-data.ts
@@ -13,6 +13,7 @@ import {
     getFakeTitleOrTitle,
     isDateField,
     isMarkdownField,
+    isMarkupField,
     isMeasureField,
     isMeasureValue,
     isNumberField,
@@ -62,6 +63,8 @@ export function prepareBarYData({
     const widgetConfig = ChartEditor.getWidgetConfig();
     const isActionParamsEnable = widgetConfig?.actionParams?.enable;
     const isMarkdownFieldsEnabled = features[Feature.WizardMarkdownFields];
+    const isMarkupLabelsEnabled = features[Feature.MarkupInLabels];
+
     const xPlaceholder = placeholders[0];
     const x: ServerField | undefined = placeholders[0].items[0];
     const xDataType = x ? idToDataType[x.guid] : null;
@@ -109,6 +112,7 @@ export function prepareBarYData({
 
     const labelItem = labels?.[0];
     const isMarkdownLabel = isMarkdownFieldsEnabled && isMarkdownField(labelItem);
+    const isMarkupLabel = isMarkupLabelsEnabled && isMarkupField(labelItem);
 
     const isColorItemExist = Boolean(colorItem && colorItem.type !== 'PSEUDO');
     const isColorizeByMeasure = isMeasureField(colorItem);
@@ -235,6 +239,7 @@ export function prepareBarYData({
                 segmentIndexInOrder: -1,
                 layers: shared.visualization?.layers,
                 colorMode,
+                convertMarkupToString: !isMarkupLabelsEnabled,
             });
         });
 
@@ -321,7 +326,7 @@ export function prepareBarYData({
                     dataLabels: {
                         enabled: Boolean(labelItem),
                         ...line.dataLabels,
-                        useHTML: isMarkdownLabel,
+                        useHTML: isMarkdownLabel || isMarkupLabel,
                     },
                     data: categories
                         .map((category, i) => {
@@ -359,7 +364,10 @@ export function prepareBarYData({
                                 }
                             }
 
-                            point.label = getLabelValue(innerLabels?.[category], isMarkdownLabel);
+                            point.label = getLabelValue(innerLabels?.[category], {
+                                isMarkdownLabel,
+                                isMarkupLabel,
+                            });
 
                             if (isActionParamsEnable) {
                                 const [yField] = ySectionItems || [];
@@ -450,6 +458,10 @@ export function prepareBarYData({
             ChartEditor.updateConfig({useMarkdown: true});
         }
 
+        if (isMarkupLabel) {
+            ChartEditor.updateConfig({useMarkup: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/prepareLines.ts b/src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/prepareLines.ts
@@ -100,6 +100,7 @@ const mergeLabelDataWithLines = (args: MergeLabelDataWithLinesArgs) => {
         idToTitle,
         idToDataType,
         lines,
+        convertMarkupToString = true,
     } = args;
     const key = keys.key;
     const lastKey = keys.lastKey as string | number;
@@ -133,7 +134,7 @@ const mergeLabelDataWithLines = (args: MergeLabelDataWithLinesArgs) => {
             labelsValues[key][lastKey] = Number(labelValue);
         } else if (isDateField({data_type: labelDataType})) {
             labelsValues[key][lastKey] = new Date(labelValue);
-        } else if (isMarkupField({data_type: labelDataType})) {
+        } else if (convertMarkupToString && isMarkupField({data_type: labelDataType})) {
             labelsValues[key][lastKey] = markupToRawString(labelValue as unknown as MarkupItem);
         } else {
             labelsValues[key][lastKey] = labelValue;
@@ -197,6 +198,7 @@ export const prepareLines = (args: PrepareLinesArgs) => {
         segmentIndexInOrder,
         layers = [],
         colorMode,
+        convertMarkupToString,
     } = args;
 
     const x2DataType = x2Field ? (idToDataType[x2Field.guid] as DATASET_FIELD_TYPES) : null;
@@ -340,6 +342,7 @@ export const prepareLines = (args: PrepareLinesArgs) => {
             values,
             yDataType,
             yItemFormatting,
+            convertMarkupToString,
         });
 
         const currentLine = lines[keys.key];

diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/types.ts b/src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/types.ts
@@ -40,6 +40,7 @@ export interface PrepareLinesArgs {
     segmentIndexInOrder: number;
     layers?: ServerVisualizationLayer[];
     colorMode?: ColorMode;
+    convertMarkupToString?: boolean;
 }
 
 export interface GetMappedDataToLinesArgs {
@@ -145,6 +146,7 @@ export interface MergeLabelDataWithLinesArgs {
     values: PrepareFunctionDataRow;
     yDataType: DATASET_FIELD_TYPES;
     yItemFormatting: CommonNumberFormattingOptions | undefined;
+    convertMarkupToString?: boolean;
 }
 
 export interface ExtendLineWithSegmentDataArgs {

diff --git a/src/server/modes/charts/plugins/datalens/preparers/line/prepare-line-data.ts b/src/server/modes/charts/plugins/datalens/preparers/line/prepare-line-data.ts
@@ -11,6 +11,7 @@ import {
     getFakeTitleOrTitle,
     isDateField,
     isMarkdownField,
+    isMarkupField,
     isMeasureField,
     isMeasureValue,
     isNumberField,
@@ -66,6 +67,8 @@ export function prepareLineData(args: PrepareFunctionArgs) {
     const widgetConfig = ChartEditor.getWidgetConfig();
     const isActionParamsEnable = widgetConfig?.actionParams?.enable;
     const isMarkdownFieldsEnabled = features[Feature.WizardMarkdownFields];
+    const isMarkupLabelsEnabled = features[Feature.MarkupInLabels];
+
     const xPlaceholder = placeholders.find((p) => p.id === PlaceholderId.X);
     const xField = xPlaceholder?.items[0];
     const xDataType = xField ? idToDataType[xField.guid] : null;
@@ -114,6 +117,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
     const labelItem = labels?.[0];
     const labelsLength = labels && labels.length;
     const isMarkdownLabel = isMarkdownFieldsEnabled && isMarkdownField(labelItem);
+    const isMarkupLabel = isMarkupLabelsEnabled && isMarkupField(labelItem);
 
     const segmentField = segments[0];
     const segmentIndexInOrder = getSegmentsIndexInOrder(order, segmentField, idToTitle);
@@ -259,6 +263,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                 segmentIndexInOrder,
                 layers: shared.visualization?.layers,
                 colorMode,
+                convertMarkupToString: !isMarkupLabelsEnabled,
             });
         });
 
@@ -351,7 +356,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                     id: line.id,
                     title: line.title || 'Null',
                     tooltip: line.tooltip,
-                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel},
+                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel || isMarkupLabel},
                     data: categories
                         .map((category, i) => {
                             const lineData = line.data[category];
@@ -410,7 +415,10 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                                 }
                             }
 
-                            point.label = getLabelValue(innerLabels?.[category], isMarkdownLabel);
+                            point.label = getLabelValue(innerLabels?.[category], {
+                                isMarkdownLabel,
+                                isMarkupLabel,
+                            });
 
                             if (isActionParamsEnable) {
                                 const [yField] = ySectionItems || [];
@@ -523,6 +531,10 @@ export function prepareLineData(args: PrepareFunctionArgs) {
             ChartEditor.updateConfig({useMarkdown: true});
         }
 
+        if (isMarkupLabel) {
+            ChartEditor.updateConfig({useMarkup: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

diff --git a/src/server/modes/charts/plugins/datalens/preparers/pie/prepare-pie-data.ts b/src/server/modes/charts/plugins/datalens/preparers/pie/prepare-pie-data.ts
@@ -8,9 +8,11 @@ import {
     getFakeTitleOrTitle,
     isFieldHierarchy,
     isMarkdownField,
+    isMarkupField,
     isMeasureValue,
     isNumberField,
     isPseudoField,
+    wrapMarkupValue,
 } from '../../../../../../../shared';
 import {wrapMarkdownValue} from '../../../../../../../shared/utils/markdown';
 import type {ChartColorsConfig} from '../../types';
@@ -100,6 +102,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
     const {data, order, totals} = resultData;
     const widgetConfig = ChartEditor.getWidgetConfig();
     const isMarkdownFieldsEnabled = features[Feature.WizardMarkdownFields];
+    const isMarkupLabelsEnabled = features[Feature.MarkupInLabels];
 
     const measure = placeholders.find((p) => p.id === PlaceholderId.Measures)?.items[0];
     let colorField = placeholders.find((p) => p.id === PlaceholderId.Colors)?.items[0];
@@ -129,6 +132,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
         ? findIndexInOrder(order, labelField, idToTitle[labelField.guid])
         : -1;
     const isMarkdownLabel = isMarkdownFieldsEnabled && isMarkdownField(labelItem);
+    const isMarkupLabel = isMarkupLabelsEnabled && isMarkupField(labelItem);
 
     const measureIndex = findIndexInOrder(order, measure, idToTitle[measure.guid]);
     const measureDataType = idToDataType[measure.guid] || measure.data_type;
@@ -183,7 +187,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
                               ? MINIMUM_FRACTION_DIGITS
                               : 0,
                   }),
-            useHTML: isMarkdownLabel,
+            useHTML: isMarkdownLabel || isMarkupLabel,
         },
     };
 
@@ -246,6 +250,8 @@ export function preparePieData(args: PrepareFunctionArgs) {
                 point.label = Number(labelValue);
             } else if (labelValue && isMarkdownLabel) {
                 point.label = wrapMarkdownValue(labelValue);
+            } else if (labelValue && isMarkupLabel) {
+                point.label = wrapMarkupValue(labelValue);
             } else {
                 point.label = getFormattedValue(labelValue, {
                     ...labelField,
@@ -296,6 +302,10 @@ export function preparePieData(args: PrepareFunctionArgs) {
         ChartEditor.updateConfig({useMarkdown: true});
     }
 
+    if (isMarkupLabel) {
+        ChartEditor.updateConfig({useMarkup: true});
+    }
+
     return {graphs: [pie], totals: totals.find((value) => value), label: labelField, measure};
 }
 

diff --git a/src/server/modes/charts/plugins/datalens/preparers/types.ts b/src/server/modes/charts/plugins/datalens/preparers/types.ts
@@ -13,6 +13,7 @@ import type {
     ServerShapesConfig,
     ServerSort,
     ServerTooltip,
+    WrappedMarkup,
 } from '../../../../../../shared';
 import type {ApiV2RequestField} from '../../../../../../shared/types/bi-api/v2';
 import type {WrappedMarkdown} from '../../../../../../shared/utils/markdown';
@@ -91,6 +92,6 @@ export type PiePoint = {
     color?: string;
     colorGuid?: string;
     colorValue?: string | number;
-    label?: string | number | null | WrappedMarkdown;
+    label?: string | number | null | WrappedMarkdown | WrappedMarkup;
     custom?: object;
 };
diff --git a/src/server/modes/charts/plugins/datalens/utils/misc-helpers.ts b/src/server/modes/charts/plugins/datalens/utils/misc-helpers.ts
@@ -21,6 +21,7 @@ import {
     isDateField,
     isMeasureField,
     isMeasureValue,
+    wrapMarkupValue,
 } from '../../../../../../shared';
 import {wrapMarkdownValue} from '../../../../../../shared/utils/markdown';
 import type {ChartKitFormatSettings, ResultDataOrder} from '../preparers/types';
@@ -376,7 +377,12 @@ export function isLegendEnabled(chartSetting?: ServerCommonSharedExtraSettings)
     return chartSetting?.legendMode !== LegendDisplayMode.Hide;
 }
 
-export function getLabelValue(value: undefined | string, isMarkdownLabel?: boolean) {
+export function getLabelValue(
+    value: undefined | string,
+    options: {isMarkdownLabel?: boolean; isMarkupLabel?: boolean} = {},
+) {
+    const {isMarkdownLabel, isMarkupLabel} = options;
+
     if (value === undefined) {
         return '';
     }
@@ -385,6 +391,10 @@ export function getLabelValue(value: undefined | string, isMarkdownLabel?: boole
         return wrapMarkdownValue(value);
     }
 
+    if (isMarkupLabel) {
+        return wrapMarkupValue(value);
+    }
+
     return value;
 }
 

diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts
@@ -25,3 +25,4 @@ export * from './api-v2';
 export * from './ui-sandbox';
 export * from './themes';
 export * from './markdown';
+export * from './markup';
diff --git a/src/shared/constants/markup.ts b/src/shared/constants/markup.ts
@@ -0,0 +1 @@
+export const WRAPPED_MARKUP_KEY = '__wrappedMarkup__';
diff --git a/src/shared/types/feature.ts b/src/shared/types/feature.ts
@@ -92,6 +92,8 @@ export enum Feature {
     WizardMarkdownFields = 'WizardMarkdownFields',
     EnableEmbedsInDialogShare = 'EnableEmbedsInDialogShare',
     EnableEntryMenuItemShare = 'EnableEntryMenuItemShare',
+    /** Render markup in chart dataLabels. */
+    MarkupInLabels = 'MarkupInLabels',
 }
 
 export type FeatureConfig = Record<string, boolean>;
diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
@@ -2,3 +2,5 @@ export * from './visualization-check';
 export * from './feature';
 export * from './wizard';
 export * from './date-time';
+export * from './markup';
+export * from './markdown';
diff --git a/src/shared/utils/markup.ts b/src/shared/utils/markup.ts
@@ -0,0 +1,7 @@
+import {WRAPPED_MARKUP_KEY} from '../constants';
+
+export function wrapMarkupValue(value: unknown) {
+    return {[WRAPPED_MARKUP_KEY]: value};
+}
+
+export type WrappedMarkup = ReturnType<typeof wrapMarkupValue>;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const WRAPPED_MARKUP_KEY = '__wrappedMarkup__';