Html in pie charts

datalens-tech · Dec 28, 2024 · a76a985 · a76a985
1 parent f9cdb3a
commit a76a985
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/src/server/modes/charts/plugins/datalens/config/config.ts b/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 = (

diff --git a/src/server/modes/charts/plugins/datalens/preparers/pie/highcharts.ts b/src/server/modes/charts/plugins/datalens/preparers/pie/highcharts.ts
@@ -1,4 +1,6 @@
-import {PlaceholderId, getFakeTitleOrTitle} from '../../../../../../../shared';
+import set from 'lodash/set';
+
+import {getFakeTitleOrTitle, isHtmlField} from '../../../../../../../shared';
 import {getGradientStops} from '../../utils/color-helpers';
 import {isLegendEnabled} from '../../utils/misc-helpers';
 import type {PrepareFunctionArgs} from '../types';
@@ -7,8 +9,8 @@ import preparePieData from './prepare-pie-data';
 import {isColoringByMeasure} from './utils';
 
 export function prepareHighchartsPie(args: PrepareFunctionArgs) {
-    const {ChartEditor, colorsConfig, labels, shared, placeholders} = args;
-    const {graphs, totals, measure, label} = preparePieData(args);
+    const {ChartEditor, colorsConfig, labels, shared} = args;
+    const {graphs, totals, measure, label, color, dimension} = preparePieData(args);
 
     const labelsLength = labels && labels.length;
     const isHideLabel = measure?.hideLabelMode === 'hide';
@@ -26,8 +28,6 @@ export function prepareHighchartsPie(args: PrepareFunctionArgs) {
     const pie = graphs[0];
 
     if (pie && pie.data) {
-        const colorField = placeholders.find((p) => p.id === PlaceholderId.Colors)?.items[0];
-
         if (isColoringByMeasure(args)) {
             pie.showInLegend = false;
 
@@ -47,14 +47,19 @@ export function prepareHighchartsPie(args: PrepareFunctionArgs) {
 
             customConfig.legend = {
                 title: {
-                    text: getFakeTitleOrTitle(colorField),
+                    text: getFakeTitleOrTitle(color),
                 },
                 enabled: isLegendEnabled(shared.extraSettings),
                 symbolWidth: null,
             };
         }
     }
 
+    const shouldUseHtmlForLegend = [dimension, color].some(isHtmlField);
+    if (shouldUseHtmlForLegend) {
+        set(customConfig, 'legend.useHTML', true);
+    }
+
     ChartEditor.updateHighchartsConfig(customConfig);
 
     return {graphs, totals};

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
@@ -1,4 +1,4 @@
-import type {ExtendedSeriesLineOptions} from '../../../../../../../shared';
+import type {ExtendedSeriesLineOptions, WrappedHTML} from '../../../../../../../shared';
 import {
     DATASET_FIELD_TYPES,
     MINIMUM_FRACTION_DIGITS,
@@ -109,7 +109,23 @@ export function preparePieData(args: PrepareFunctionArgs) {
         colorField = colorField.fields[Math.min(drillDownLevel, colorField.fields.length - 1)];
     }
 
-    const dimensionField = placeholders.find((p) => p.id === PlaceholderId.Dimensions)?.items[0];
+    if (colorField) {
+        colorField = {
+            ...colorField,
+            data_type: idToDataType[colorField.guid],
+        };
+    }
+    const isHtmlColor = isHtmlField(colorField);
+
+    let dimensionField = placeholders.find((p) => p.id === PlaceholderId.Dimensions)?.items[0];
+    if (dimensionField) {
+        dimensionField = {
+            ...dimensionField,
+            data_type: idToDataType[dimensionField.guid],
+        };
+    }
+    const isHtmlDimension = isHtmlField(dimensionField);
+
     if (!measure) {
         return {graphs: []};
     }
@@ -206,36 +222,29 @@ export function preparePieData(args: PrepareFunctionArgs) {
             } else {
                 colorValue = getDistinctValue(colorFieldValue);
                 legendParts.push(String(colorFieldValue));
-                formattedNameParts.push(
-                    String(
-                        getFormattedValue(colorFieldValue, {
-                            ...colorField,
-                            data_type: idToDataType[colorField.guid],
-                        }),
-                    ),
-                );
+                formattedNameParts.push(String(getFormattedValue(colorFieldValue, colorField)));
             }
         }
 
         if (dimensionField) {
             legendParts.push(String(dimensionValue));
-            formattedNameParts.push(
-                String(
-                    getFormattedValue(dimensionValue, {
-                        ...dimensionField,
-                        data_type: idToDataType[dimensionField.guid],
-                    }),
-                ),
-            );
+            formattedNameParts.push(String(getFormattedValue(dimensionValue, dimensionField)));
         }
 
-        const pointName = legendParts.join(': ') || getFakeTitleOrTitle(measure);
-        const formattedName = formattedNameParts.join(': ');
+        const pointName: string | WrappedHTML =
+            legendParts.join(': ') || getFakeTitleOrTitle(measure);
+        const drillDownFilterValue = pointName;
+        const shouldWrapPointName = isHtmlColor || isHtmlDimension;
+
+        let formattedName: string | WrappedHTML = formattedNameParts.join(': ');
+        if (isHtmlColor || isHtmlDimension) {
+            formattedName = wrapHtml(formattedName);
+        }
 
         const point: PiePoint = {
-            name: pointName,
+            name: shouldWrapPointName ? wrapHtml(pointName) : pointName,
             formattedName,
-            drillDownFilterValue: pointName,
+            drillDownFilterValue,
             y: Number(measureValue),
             colorGuid: colorField?.guid,
             colorValue,
@@ -271,11 +280,11 @@ export function preparePieData(args: PrepareFunctionArgs) {
             };
         }
 
-        if (acc.get(point.name)) {
+        if (acc.get(pointName)) {
             pie.pointConflict = true;
         }
 
-        acc.set(point.name, point);
+        acc.set(pointName, point);
 
         return acc;
     }, new Map<string, PiePoint>());
@@ -307,11 +316,18 @@ export function preparePieData(args: PrepareFunctionArgs) {
         ChartEditor.updateConfig({useMarkup: true});
     }
 
-    if (isHtmlLabel) {
+    if (isHtmlColor || isHtmlDimension || [labelField].some(isHtmlField)) {
         ChartEditor.updateConfig({useHtml: true});
     }
 
-    return {graphs: [pie], totals: totals.find((value) => value), label: labelField, measure};
+    return {
+        graphs: [pie],
+        totals: totals.find((value) => value),
+        label: labelField,
+        measure,
+        color: colorField,
+        dimension: dimensionField,
+    };
 }
 
 export default preparePieData;
diff --git a/src/server/modes/charts/plugins/datalens/preparers/types.ts b/src/server/modes/charts/plugins/datalens/preparers/types.ts
@@ -88,8 +88,8 @@ export type LayerChartMeta = {
 };
 
 export type PiePoint = {
-    name: string;
-    formattedName: string;
+    name: string | WrappedHTML;
+    formattedName: string | WrappedHTML;
     drillDownFilterValue: string;
     y: number;
     color?: string;