Html and markup in axes (wizard)

src/server/components/features/features-list/EscapingStringInWizard.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.EscapeStringInWizard,
+    state: {
+        development: false,
+        production: false,
+    },
+});

src/server/modes/charts/plugins/datalens/config/config.ts

@@ -183,12 +183,15 @@ export const buildChartsConfigPrivate = (
         }
     } else if (visualizationId === 'pie' || visualizationId === 'donut') {
         config.showPercentInTooltip = true;
+        config.manageTooltipConfig = ChartkitHandlers.WizardManageTooltipConfig;
     } else if (visualizationId === 'metric') {
         (config as MetricConfig).metricVersion = 2;
     } else if (visualizationId === 'pivotTable') {
         (config as TableConfig).settings = {
             externalSort: true,
         };
+    } else if (visualizationId === WizardVisualizationId.CombinedChart) {
+        config.manageTooltipConfig = ChartkitHandlers.WizardManageTooltipConfig;
     }
 
     const isTableWidget = (

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

@@ -4,14 +4,15 @@ import type {
     ChartKitWidgetData,
 } from '@gravity-ui/chartkit/build/types/widget-data';
 
-import type {SeriesExportSettings, ServerField} from '../../../../../../../shared';
+import type {SeriesExportSettings, ServerField, WrappedMarkdown} from '../../../../../../../shared';
 import {
     AxisMode,
     LabelsPositions,
     PlaceholderId,
     getFakeTitleOrTitle,
     getXAxisMode,
 } from '../../../../../../../shared';
+import type {WrappedHTML} from '../../../../../../../shared/types/charts';
 import {getFormattedLabel} from '../../d3/utils/dataLabels';
 import {getConfigWithActualFieldTypes} from '../../utils/config-helpers';
 import {getExportColumnSettings} from '../../utils/export-helpers';
@@ -27,14 +28,19 @@ type OldBarXDataItem = {
     custom?: any;
 } | null;
 
-type ExtendedBarXSeries = BarXSeries & {
+type ExtendedBaXrSeriesData = Omit<BarXSeriesData, 'x'> & {
+    x?: BarXSeriesData['x'] | WrappedHTML | WrappedMarkdown;
+};
+
+type ExtendedBarXSeries = Omit<BarXSeries, 'data'> & {
     custom?: {
         exportSettings?: SeriesExportSettings;
         colorValue?: string;
     };
+    data: ExtendedBaXrSeriesData[];
 };
 
-export function prepareD3BarX(args: PrepareFunctionArgs): ChartKitWidgetData {
+export function prepareD3BarX(args: PrepareFunctionArgs) {
     const {
         shared,
         labels,
@@ -97,8 +103,8 @@ export function prepareD3BarX(args: PrepareFunctionArgs): ChartKitWidgetData {
             stackId: graph.stack,
             stacking: 'normal',
             data: graph.data.reduce(
-                (acc: BarXSeriesData[], item: OldBarXDataItem, index: number) => {
-                    const dataItem: BarXSeriesData = {
+                (acc: ExtendedBaXrSeriesData[], item: OldBarXDataItem, index: number) => {
+                    const dataItem: ExtendedBaXrSeriesData = {
                         y: item?.y || 0,
                         custom: item?.custom,
                     };
@@ -130,22 +136,24 @@ export function prepareD3BarX(args: PrepareFunctionArgs): ChartKitWidgetData {
         };
     });
 
-    const config: ChartKitWidgetData = {
-        series: {
-            data: seriesData,
-        },
-    };
-
-    if (config.series.data.length <= 1) {
-        config.legend = {enabled: false};
+    let legend: ChartKitWidgetData['legend'];
+    if (seriesData.length <= 1) {
+        legend = {enabled: false};
     }
 
+    let xAxis: ChartKitWidgetData['xAxis'];
     if (isCategoriesXAxis) {
-        config.xAxis = {
+        xAxis = {
             type: 'category',
             categories: xCategories?.map(String),
         };
     }
 
-    return config;
+    return {
+        series: {
+            data: seriesData,
+        },
+        legend,
+        xAxis,
+    };
 }

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

@@ -1,4 +1,5 @@
 import _isEmpty from 'lodash/isEmpty';
+import set from 'lodash/set';
 
 import type {ServerPlaceholder, WizardVisualizationId} from '../../../../../../../shared';
 import {
@@ -11,6 +12,7 @@ import {
     getIsNavigatorEnabled,
     getXAxisMode,
     isDateField,
+    isHtmlField,
     isMeasureNameOrValue,
 } from '../../../../../../../shared';
 import {getConfigWithActualFieldTypes} from '../../utils/config-helpers';
@@ -40,6 +42,7 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
         idToDataType,
         visualizationId,
         shared,
+        segments,
     } = args;
     const preparedData = prepareBarX(args);
     const {graphs} = preparedData;
@@ -67,6 +70,8 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
 
     // Here we manage the highcharts settings depending on the parameters
     if (ChartEditor) {
+        const customConfig: any = {xAxis: {}};
+
         if (yFields.length) {
             const isYSectionHasFloatItem = yFields.some((y) => y.data_type === 'float');
             if (isYSectionHasFloatItem) {
@@ -75,7 +80,7 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
                 });
             }
 
-            const customConfig: any = {
+            Object.assign(customConfig, {
                 xAxis: {},
                 plotOptions: {},
                 axesFormatting: {xAxis: [], yAxis: []},
@@ -87,7 +92,7 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
                         columnHeaderFormatter: ChartkitHandlers.WizardExportColumnNamesFormatter,
                     },
                 },
-            };
+            });
 
             if (xPlaceholder?.settings?.axisFormatMode === AxisLabelFormatMode.ByField) {
                 customConfig.axesFormatting.xAxis.push(
@@ -179,22 +184,19 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
                         isLegendEnabled(shared.extraSettings),
                 };
 
-                const {yAxisFormattings, yAxisSettings} = getSegmentsYAxis(
+                const {yAxisFormattings, yAxisSettings} = getSegmentsYAxis({
+                    segment: segments[0],
                     segmentsMap,
-                    {
+                    placeholders: {
                         y: yPlaceholder as ServerPlaceholder,
                         y2: undefined as unknown as ServerPlaceholder,
                     },
                     visualizationId,
-                );
+                });
                 customConfig.yAxis = yAxisSettings;
                 customConfig.axesFormatting.yAxis = yAxisFormattings;
             }
-
-            ChartEditor.updateHighchartsConfig(customConfig);
         } else {
-            const customConfig: any = {xAxis: {}};
-
             if (xIsDate || xIsNumber) {
                 customConfig.xAxis.reversed = isXAxisReversed(
                     x,
@@ -214,8 +216,13 @@ export function prepareHighchartsBarX(args: PrepareFunctionArgs) {
                     customConfig.xAxis.type = 'category';
                 }
             }
+        }
+
+        ChartEditor.updateHighchartsConfig(customConfig);
 
-            ChartEditor.updateHighchartsConfig(customConfig);
+        const shouldUseHtmlForLegend = isHtmlField(colorItem);
+        if (shouldUseHtmlForLegend) {
+            set(customConfig, 'legend.useHTML', true);
         }
     }
 

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

@@ -5,6 +5,7 @@ import type {
     ServerField,
     ServerPlaceholder,
     WizardVisualizationId,
+    WrappedHTML,
 } from '../../../../../../../shared';
 import {
     AxisMode,
@@ -21,14 +22,16 @@ import {
     isMeasureValue,
     isPercentVisualization,
 } from '../../../../../../../shared';
+import {wrapHtml} from '../../../../../../../shared/utils/ui-sandbox';
 import {mapAndColorizeGraphsByPalette} from '../../utils/color-helpers';
 import {getConfigWithActualFieldTypes} from '../../utils/config-helpers';
 import {PSEUDO} from '../../utils/constants';
 import {
     chartKitFormatNumberWrapper,
     collator,
-    formatDate,
+    getCategoryFormatter,
     getLabelValue,
+    getSeriesTitleFormatter,
     getTimezoneOffsettedTime,
     isGradientMode,
     isNumericalDataType,
@@ -86,6 +89,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const x2IsNumber = Boolean(x2DataType && isNumericalDataType(x2DataType));
     const x2IsDate = Boolean(x2DataType && isDateField({data_type: x2DataType}));
     const x2IsPseudo = Boolean(x2 && x2.type === PSEUDO);
+    const isHtmlX = isHtmlField(x);
 
     const yPlaceholder: ServerPlaceholder = placeholders[1];
 
@@ -105,6 +109,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
 
     const colorItem = colors[0];
     const colorFieldDataType = colorItem ? idToDataType[colorItem.guid] : null;
+    const isHtmlColor = isHtmlField(colorItem);
 
     const gradientMode =
         colorItem &&
@@ -121,6 +126,8 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const segmentIndexInOrder = getSegmentsIndexInOrder(order, segmentField, idToTitle);
     const segmentsMap = getSegmentMap(args);
     const isSegmentsExists = !_isEmpty(segmentsMap);
+    const isHtmlSegment = isHtmlField(segmentField);
+    const segmentTitleFormatter = getSeriesTitleFormatter({fields: [segmentField]});
 
     const isShapeItemExist = false;
     const isColorItemExist = Boolean(colorItem && colorItem.type !== 'PSEUDO');
@@ -144,6 +151,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const nullsY1 = placeholders?.[1]?.settings?.nulls;
 
     const categoriesMap = new Map<string | number, boolean>();
+    const seriesNameFormatter = getSeriesTitleFormatter({fields: [colorItem]});
 
     if (mergedYSections.length) {
         let categories: (string | number)[] = [];
@@ -332,7 +340,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
 
                 const graph: any = {
                     id: line.id,
-                    title: line.title || 'Null',
+                    title: seriesNameFormatter(line.title || 'Null'),
                     tooltip: line.tooltip,
                     dataLabels: {
                         ...line.dataLabels,
@@ -368,7 +376,11 @@ export function prepareBarX(args: PrepareFunctionArgs) {
 
                             if (line.segmentNameKey) {
                                 const currentSegment = segmentsMap[line.segmentNameKey];
-                                const tooltipPointName = `${currentSegment.title}: ${line.title}`;
+                                let tooltipPointName: string | WrappedHTML =
+                                    `${currentSegment.title}: ${line.title}`;
+                                if (isHtmlSegment) {
+                                    tooltipPointName = wrapHtml(tooltipPointName);
+                                }
                                 point.custom = {
                                     tooltipPointName,
                                 };
@@ -423,7 +435,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                     const currentSegment = segmentsMap[line.segmentNameKey];
                     graph.yAxis = currentSegment.index;
 
-                    customSeriesData.segmentTitle = currentSegment.title;
+                    customSeriesData.segmentTitle = segmentTitleFormatter(currentSegment.title);
                 } else if (lineKeysIndex === 0 || ySectionItems.length === 0) {
                     graph.yAxis = 0;
                 } else {
@@ -491,18 +503,18 @@ export function prepareBarX(args: PrepareFunctionArgs) {
             ChartEditor.updateConfig({useMarkup: true});
         }
 
-        if (isHtmlLabel) {
+        if (isHtmlLabel || isHtmlX || isHtmlColor || isHtmlSegment) {
             ChartEditor.updateConfig({useHtml: true});
         }
 
-        if (isXCategoryAxis) {
+        if (x && isXCategoryAxis) {
+            const categoriesFormatter = getCategoryFormatter({
+                field: {...x, data_type: xDataType ?? x.data_type},
+            });
+
             return {
                 graphs,
-                categories: categories.map((value) => {
-                    return xIsDate
-                        ? formatDate({valueType: xDataType!, value, format: x?.format, utc: true})
-                        : value;
-                }),
+                categories: categories.map(categoriesFormatter),
             };
         } else {
             return {graphs};

src/server/modes/charts/plugins/datalens/preparers/bar-y/highcharts.ts

@@ -1,3 +1,5 @@
+import set from 'lodash/set';
+
 import type {ServerField, WizardVisualizationId} from '../../../../../../../shared';
 import {
     AxisLabelFormatMode,
@@ -11,6 +13,7 @@ import {
     getXAxisMode,
     isDateField,
     isFloatField,
+    isHtmlField,
     isMeasureNameOrValue,
 } from '../../../../../../../shared';
 import {getConfigWithActualFieldTypes} from '../../utils/config-helpers';
@@ -66,6 +69,7 @@ function getHighchartsConfig(args: PrepareFunctionArgs & {graphs: any[]}) {
                     isDateField(x) && isXDiscrete
                         ? ChartkitHandlers.WizardXAxisFormatter
                         : undefined,
+                useHTML: isHtmlField(x),
             },
         },
         axesFormatting: {
@@ -122,6 +126,11 @@ function getHighchartsConfig(args: PrepareFunctionArgs & {graphs: any[]}) {
         }
     }
 
+    const shouldUseHtmlForLegend = isHtmlField(colorItem);
+    if (shouldUseHtmlForLegend) {
+        set(customConfig, 'legend.useHTML', true);
+    }
+
     return customConfig;
 }