Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Markup support in Labels #1483

Merged
merged 2 commits into from
Sep 6, 2024
Merged

Add Markup support in Labels #1483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
784bcee
Add Markup support in Labels
kuzmadom Sep 6, 2024
d4b77e4
Merge branch 'main' into CHARTS-9656
kuzmadom Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/server/components/features/features-list/MarkupInLabels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {Feature} from '../../../../shared';
import {createFeatureConfig} from '../utils';

export default createFeatureConfig({
name: Feature.MarkupInLabels,
state: {
development: false,
production: false,
},
});
15 changes: 13 additions & 2 deletions src/server/modes/charts/plugins/datalens/preparers/bar-x/prepare-bar-x.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
isDateField,
isDimensionField,
isMarkdownField,
isMarkupField,
isMeasureField,
isMeasureValue,
isPercentVisualization,
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -254,6 +257,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
segmentIndexInOrder,
layers: shared.visualization?.layers,
colorMode,
convertMarkupToString: !isMarkupLabelsEnabled,
});
});

Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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> = {};
Expand Down Expand Up @@ -486,6 +493,10 @@ export function prepareBarX(args: PrepareFunctionArgs) {
ChartEditor.updateConfig({useMarkdown: true});
}

if (isMarkupLabel) {
ChartEditor.updateConfig({useMarkup: true});
}

if (isXCategoryAxis) {
return {
graphs,
Expand Down
16 changes: 14 additions & 2 deletions src/server/modes/charts/plugins/datalens/preparers/bar-y/prepare-bar-y-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
getFakeTitleOrTitle,
isDateField,
isMarkdownField,
isMarkupField,
isMeasureField,
isMeasureValue,
isNumberField,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -235,6 +239,7 @@ export function prepareBarYData({
segmentIndexInOrder: -1,
layers: shared.visualization?.layers,
colorMode,
convertMarkupToString: !isMarkupLabelsEnabled,
});
});

Expand Down Expand Up @@ -321,7 +326,7 @@ export function prepareBarYData({
dataLabels: {
enabled: Boolean(labelItem),
...line.dataLabels,
useHTML: isMarkdownLabel,
useHTML: isMarkdownLabel || isMarkupLabel,
},
data: categories
.map((category, i) => {
Expand Down Expand Up @@ -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 || [];
Expand Down Expand Up @@ -450,6 +458,10 @@ export function prepareBarYData({
ChartEditor.updateConfig({useMarkdown: true});
}

if (isMarkupLabel) {
ChartEditor.updateConfig({useMarkup: true});
}

if (isXCategoryAxis) {
return {
graphs,
Expand Down
5 changes: 4 additions & 1 deletion src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/prepareLines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -340,6 +342,7 @@ export const prepareLines = (args: PrepareLinesArgs) => {
values,
yDataType,
yItemFormatting,
convertMarkupToString,
});

const currentLine = lines[keys.key];
Expand Down
2 changes: 2 additions & 0 deletions src/server/modes/charts/plugins/datalens/preparers/line/helpers/line-mappers/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface PrepareLinesArgs {
segmentIndexInOrder: number;
layers?: ServerVisualizationLayer[];
colorMode?: ColorMode;
convertMarkupToString?: boolean;
}

export interface GetMappedDataToLinesArgs {
Expand Down Expand Up @@ -145,6 +146,7 @@ export interface MergeLabelDataWithLinesArgs {
values: PrepareFunctionDataRow;
yDataType: DATASET_FIELD_TYPES;
yItemFormatting: CommonNumberFormattingOptions | undefined;
convertMarkupToString?: boolean;
}

export interface ExtendLineWithSegmentDataArgs {
Expand Down
16 changes: 14 additions & 2 deletions src/server/modes/charts/plugins/datalens/preparers/line/prepare-line-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getFakeTitleOrTitle,
isDateField,
isMarkdownField,
isMarkupField,
isMeasureField,
isMeasureValue,
isNumberField,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -259,6 +263,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
segmentIndexInOrder,
layers: shared.visualization?.layers,
colorMode,
convertMarkupToString: !isMarkupLabelsEnabled,
});
});

Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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 || [];
Expand Down Expand Up @@ -523,6 +531,10 @@ export function prepareLineData(args: PrepareFunctionArgs) {
ChartEditor.updateConfig({useMarkdown: true});
}

if (isMarkupLabel) {
ChartEditor.updateConfig({useMarkup: true});
}

if (isXCategoryAxis) {
return {
graphs,
Expand Down
12 changes: 11 additions & 1 deletion src/server/modes/charts/plugins/datalens/preparers/pie/prepare-pie-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -183,7 +187,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
? MINIMUM_FRACTION_DIGITS
: 0,
}),
useHTML: isMarkdownLabel,
useHTML: isMarkdownLabel || isMarkupLabel,
},
};

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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};
}

Expand Down
3 changes: 2 additions & 1 deletion src/server/modes/charts/plugins/datalens/preparers/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
};
12 changes: 11 additions & 1 deletion src/server/modes/charts/plugins/datalens/utils/misc-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
isDateField,
isMeasureField,
isMeasureValue,
wrapMarkupValue,
} from '../../../../../../shared';
import {wrapMarkdownValue} from '../../../../../../shared/utils/markdown';
import type {ChartKitFormatSettings, ResultDataOrder} from '../preparers/types';
Expand Down Expand Up @@ -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 '';
}
Expand All @@ -385,6 +391,10 @@ export function getLabelValue(value: undefined | string, isMarkdownLabel?: boole
return wrapMarkdownValue(value);
}

if (isMarkupLabel) {
return wrapMarkupValue(value);
}

return value;
}

Expand Down
1 change: 1 addition & 0 deletions src/shared/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@ export * from './api-v2';
export * from './ui-sandbox';
export * from './themes';
export * from './markdown';
export * from './markup';
1 change: 1 addition & 0 deletions src/shared/constants/markup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const WRAPPED_MARKUP_KEY = '__wrappedMarkup__';
2 changes: 2 additions & 0 deletions src/shared/types/feature.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
2 changes: 2 additions & 0 deletions src/shared/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ export * from './visualization-check';
export * from './feature';
export * from './wizard';
export * from './date-time';
export * from './markup';
export * from './markdown';
7 changes: 7 additions & 0 deletions src/shared/utils/markup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>;
Loading
Loading