@gravity-ui/charts 1.28.2 → 1.29.0

package/dist/cjs/constants/defaults/legend.d.ts

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    verticalAlign: Required<ChartLegend>["verticalAlign"];
     justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;

package/dist/cjs/constants/defaults/legend.js

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    verticalAlign: 'top',
     justifyContent: 'center',
     itemDistance: 20,
     margin: 15,

package/dist/cjs/hooks/useRangeSlider/index.js

@@ -51,6 +51,7 @@ export function useRangeSlider(props) {
         clipPathId,
         clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
         htmlLayout,
+        isRangeSlider: true,
         series: filteredPreparedSeries,
         seriesOptions: preparedSeriesOptions,
         split: EMPTY_PREPARED_SPLIT,

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -57,6 +57,7 @@ export async function getPreparedLegend(args) {
     }
     return {
         align: get(legend, 'align', legendDefaults.align),
+        verticalAlign: get(legend, 'verticalAlign', legendDefaults.verticalAlign),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
         height,
@@ -174,7 +175,19 @@ function getPagination(args) {
     return { pages };
 }
 function getLegendOffset(args) {
-    const { position, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight } = args;
+    const { position, verticalAlign, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight, } = args;
+    const getVerticalTop = () => {
+        const availableHeight = chartHeight - chartMargin.top - chartMargin.bottom;
+        switch (verticalAlign) {
+            case 'bottom':
+                return chartMargin.top + availableHeight - legendHeight;
+            case 'center':
+                return chartMargin.top + (availableHeight - legendHeight) / 2;
+            case 'top':
+            default:
+                return chartMargin.top;
+        }
+    };
     switch (position) {
         case 'top':
             return {
@@ -183,12 +196,12 @@ function getLegendOffset(args) {
             };
         case 'right':
             return {
-                top: chartMargin.top,
+                top: getVerticalTop(),
                 left: chartWidth - chartMargin.right - legendWidth,
             };
         case 'left':
             return {
-                top: chartMargin.top,
+                top: getVerticalTop(),
                 left: chartMargin.left,
             };
         case 'bottom':
@@ -257,6 +270,7 @@ export function getLegendComponents(args) {
     }
     const offset = getLegendOffset({
         position: preparedLegend.position,
+        verticalAlign: preparedLegend.verticalAlign,
         chartWidth,
         chartHeight,
         chartMargin,

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -94,7 +94,7 @@ export function prepareLineSeries(args) {
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
             tooltip: series.tooltip,
-            rangeSlider: Object.assign({}, seriesRangeSliderOptionsDefaults, series.rangeSlider),
+            rangeSlider: Object.assign(Object.assign({}, seriesRangeSliderOptionsDefaults), series.rangeSlider),
         };
         return prepared;
     }, []);

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -83,7 +83,7 @@ type BasePreparedSeries = {
     tooltip: ChartSeries['tooltip'];
 };
 type BasePreparedAxisRelatedSeries = {
-    rangeSlider: Required<ChartSeriesRangeSliderOptions>;
+    rangeSlider: Required<ChartSeriesRangeSliderOptions> & Partial<LineSeriesLineBaseStyle>;
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];

package/dist/cjs/hooks/useShapes/area/index.js

@@ -62,7 +62,7 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -53,7 +53,7 @@ export const BarXSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -43,7 +43,7 @@ export function BarYSeriesShapes(args) {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/funnel/index.js

@@ -56,7 +56,7 @@ export const FunnelSeriesShapes = (args) => {
             .selectAll('text')
             .data(preparedData.svgLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/heatmap/index.js

@@ -34,7 +34,7 @@ export const HeatmapSeriesShapes = (args) => {
             .selectAll('text')
             .data(preparedData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -34,6 +34,7 @@ type Args = {
     clipPathBySeriesType?: ClipPathBySeriesType;
     dispatcher?: Dispatch<object>;
     isOutsideBounds?: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
 };

package/dist/cjs/hooks/useShapes/index.js

@@ -30,7 +30,7 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -106,6 +106,7 @@ export const useShapes = (args) => {
                                 yScale,
                                 split,
                                 isOutsideBounds,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
@@ -232,6 +233,7 @@ export const useShapes = (args) => {
         dispatcher,
         htmlLayout,
         isOutsideBounds,
+        isRangeSlider,
         series,
         seriesOptions,
         split,

package/dist/cjs/hooks/useShapes/line/index.js

@@ -33,10 +33,10 @@ export const LineSeriesShapes = (args) => {
             .attr('d', (d) => line(d.points))
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
-            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-width', (d) => d.lineWidth)
             .attr('stroke-linejoin', (d) => d.linecap)
             .attr('stroke-linecap', (d) => d.linecap)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.reduce((acc, d) => {
@@ -49,7 +49,7 @@ export const LineSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/line/prepare-data.d.ts

@@ -11,4 +11,5 @@ export declare const prepareLineData: (args: {
     yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedLineData[]>;

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -13,8 +13,8 @@ async function getHtmlLabel(point, series, xMax) {
     };
 }
 export const prepareLineData = async (args) => {
-    var _a;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds } = args;
+    var _a, _b, _c;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -99,16 +99,16 @@ export const prepareLineData = async (args) => {
             points,
             markers,
             labels,
-            color: s.color,
-            width: s.lineWidth,
             series: s,
             hovered: false,
             active: true,
             id: s.id,
+            htmlElements,
+            color: s.color,
+            lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
-            opacity: s.opacity,
-            htmlElements,
+            opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
         };
         acc.push(result);
     }

package/dist/cjs/hooks/useShapes/line/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LineCap } from '../../../constants';
-import type { HtmlItem, LabelData, LineSeriesData } from '../../../types';
+import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
     x: number | null;
@@ -22,14 +22,12 @@ export type PreparedLineData = {
     id: string;
     points: PointData[];
     markers: MarkerData[];
-    color: string;
-    width: number;
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    htmlElements: HtmlItem[];
+    color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
-    opacity: number | null;
-    htmlElements: HtmlItem[];
-};
+} & Required<LineSeriesLineBaseStyle>;

package/dist/cjs/hooks/useShapes/radar/index.js

@@ -69,7 +69,7 @@ export function RadarSeriesShapes(args) {
             .selectAll('text')
             .data((radarData) => radarData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/sankey/index.js

@@ -42,7 +42,7 @@ export const SankeySeriesShape = (props) => {
             .selectAll()
             .data(preparedData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -41,7 +41,7 @@ export const WaterfallSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/types/chart/legend.d.ts

@@ -25,6 +25,13 @@ export interface ChartLegend extends ChartLegendItem {
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
+    /**
+     * The vertical alignment of the legend box within the chart area.
+     * Only applies when position is 'left' or 'right'.
+     *
+     * @default top
+     * */
+    verticalAlign?: 'top' | 'center' | 'bottom';
     /**
      * Defines how items should be positioned in the legend when overflowing (moving to the next line).
      *

package/dist/cjs/types/chart/line.d.ts

@@ -29,30 +29,36 @@ export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
         };
     };
 }
-export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
+export interface LineSeriesLineBaseStyle {
+    /** Pixel width of the graph line.
+     *
+     * @default 1 (for individual series).
+     * For series within the range slider, values are inherited from the individual series by default.
+     */
+    lineWidth?: number;
+    /** Individual opacity for the line.
+     *
+     * For series within the range slider, values are inherited from the individual series by default.
+     */
+    opacity?: number | null;
+}
+export interface LineSeries<T = MeaningfulAny> extends BaseSeries, LineSeriesLineBaseStyle {
     type: typeof SERIES_TYPE.Line;
     data: LineSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
-    /** Pixel width of the graph line.
-     *
-     * @default 1
-     * */
-    lineWidth?: number;
+    /** Option for line stroke style */
+    dashStyle?: DashStyle;
+    /** Option for line cap style */
+    linecap?: `${LineCap}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line series */
     marker?: PointMarkerOptions;
-    /** Option for line stroke style */
-    dashStyle?: DashStyle;
-    /** Option for line cap style */
-    linecap?: `${LineCap}`;
-    /** Individual opacity for the line. */
-    opacity?: number;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
     /**
@@ -68,5 +74,5 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     /**
      * Options to configure how this series appears and behaves in the Range Slider component.
      */
-    rangeSlider?: ChartSeriesRangeSliderOptions;
+    rangeSlider?: ChartSeriesRangeSliderOptions & LineSeriesLineBaseStyle;
 }

package/dist/esm/constants/defaults/legend.d.ts

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    verticalAlign: Required<ChartLegend>["verticalAlign"];
     justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;

package/dist/esm/constants/defaults/legend.js

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    verticalAlign: 'top',
     justifyContent: 'center',
     itemDistance: 20,
     margin: 15,

package/dist/esm/hooks/useRangeSlider/index.js

@@ -51,6 +51,7 @@ export function useRangeSlider(props) {
         clipPathId,
         clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
         htmlLayout,
+        isRangeSlider: true,
         series: filteredPreparedSeries,
         seriesOptions: preparedSeriesOptions,
         split: EMPTY_PREPARED_SPLIT,

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -57,6 +57,7 @@ export async function getPreparedLegend(args) {
     }
     return {
         align: get(legend, 'align', legendDefaults.align),
+        verticalAlign: get(legend, 'verticalAlign', legendDefaults.verticalAlign),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
         height,
@@ -174,7 +175,19 @@ function getPagination(args) {
     return { pages };
 }
 function getLegendOffset(args) {
-    const { position, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight } = args;
+    const { position, verticalAlign, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight, } = args;
+    const getVerticalTop = () => {
+        const availableHeight = chartHeight - chartMargin.top - chartMargin.bottom;
+        switch (verticalAlign) {
+            case 'bottom':
+                return chartMargin.top + availableHeight - legendHeight;
+            case 'center':
+                return chartMargin.top + (availableHeight - legendHeight) / 2;
+            case 'top':
+            default:
+                return chartMargin.top;
+        }
+    };
     switch (position) {
         case 'top':
             return {
@@ -183,12 +196,12 @@ function getLegendOffset(args) {
             };
         case 'right':
             return {
-                top: chartMargin.top,
+                top: getVerticalTop(),
                 left: chartWidth - chartMargin.right - legendWidth,
             };
         case 'left':
             return {
-                top: chartMargin.top,
+                top: getVerticalTop(),
                 left: chartMargin.left,
             };
         case 'bottom':
@@ -257,6 +270,7 @@ export function getLegendComponents(args) {
     }
     const offset = getLegendOffset({
         position: preparedLegend.position,
+        verticalAlign: preparedLegend.verticalAlign,
         chartWidth,
         chartHeight,
         chartMargin,

package/dist/esm/hooks/useSeries/prepare-line.js

@@ -94,7 +94,7 @@ export function prepareLineSeries(args) {
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
             tooltip: series.tooltip,
-            rangeSlider: Object.assign({}, seriesRangeSliderOptionsDefaults, series.rangeSlider),
+            rangeSlider: Object.assign(Object.assign({}, seriesRangeSliderOptionsDefaults), series.rangeSlider),
         };
         return prepared;
     }, []);

package/dist/esm/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -83,7 +83,7 @@ type BasePreparedSeries = {
     tooltip: ChartSeries['tooltip'];
 };
 type BasePreparedAxisRelatedSeries = {
-    rangeSlider: Required<ChartSeriesRangeSliderOptions>;
+    rangeSlider: Required<ChartSeriesRangeSliderOptions> & Partial<LineSeriesLineBaseStyle>;
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];

package/dist/esm/hooks/useShapes/area/index.js

@@ -62,7 +62,7 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/bar-x/index.js

@@ -53,7 +53,7 @@ export const BarXSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -43,7 +43,7 @@ export function BarYSeriesShapes(args) {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/funnel/index.js

@@ -56,7 +56,7 @@ export const FunnelSeriesShapes = (args) => {
             .selectAll('text')
             .data(preparedData.svgLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/heatmap/index.js

@@ -34,7 +34,7 @@ export const HeatmapSeriesShapes = (args) => {
             .selectAll('text')
             .data(preparedData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/index.d.ts

@@ -34,6 +34,7 @@ type Args = {
     clipPathBySeriesType?: ClipPathBySeriesType;
     dispatcher?: Dispatch<object>;
     isOutsideBounds?: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
 };

package/dist/esm/hooks/useShapes/index.js

@@ -30,7 +30,7 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -106,6 +106,7 @@ export const useShapes = (args) => {
                                 yScale,
                                 split,
                                 isOutsideBounds,
+                                isRangeSlider,
                             });
                             shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
@@ -232,6 +233,7 @@ export const useShapes = (args) => {
         dispatcher,
         htmlLayout,
         isOutsideBounds,
+        isRangeSlider,
         series,
         seriesOptions,
         split,

package/dist/esm/hooks/useShapes/line/index.js

@@ -33,10 +33,10 @@ export const LineSeriesShapes = (args) => {
             .attr('d', (d) => line(d.points))
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
-            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-width', (d) => d.lineWidth)
             .attr('stroke-linejoin', (d) => d.linecap)
             .attr('stroke-linecap', (d) => d.linecap)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.reduce((acc, d) => {
@@ -49,7 +49,7 @@ export const LineSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/line/prepare-data.d.ts

@@ -11,4 +11,5 @@ export declare const prepareLineData: (args: {
     yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
 }) => Promise<PreparedLineData[]>;

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -13,8 +13,8 @@ async function getHtmlLabel(point, series, xMax) {
     };
 }
 export const prepareLineData = async (args) => {
-    var _a;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds } = args;
+    var _a, _b, _c;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -99,16 +99,16 @@ export const prepareLineData = async (args) => {
             points,
             markers,
             labels,
-            color: s.color,
-            width: s.lineWidth,
             series: s,
             hovered: false,
             active: true,
             id: s.id,
+            htmlElements,
+            color: s.color,
+            lineWidth: (_b = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _b !== void 0 ? _b : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
-            opacity: s.opacity,
-            htmlElements,
+            opacity: (_c = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _c !== void 0 ? _c : s.opacity,
         };
         acc.push(result);
     }

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LineCap } from '../../../constants';
-import type { HtmlItem, LabelData, LineSeriesData } from '../../../types';
+import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
     x: number | null;
@@ -22,14 +22,12 @@ export type PreparedLineData = {
     id: string;
     points: PointData[];
     markers: MarkerData[];
-    color: string;
-    width: number;
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    htmlElements: HtmlItem[];
+    color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
-    opacity: number | null;
-    htmlElements: HtmlItem[];
-};
+} & Required<LineSeriesLineBaseStyle>;

package/dist/esm/hooks/useShapes/radar/index.js

@@ -69,7 +69,7 @@ export function RadarSeriesShapes(args) {
             .selectAll('text')
             .data((radarData) => radarData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/sankey/index.js

@@ -42,7 +42,7 @@ export const SankeySeriesShape = (props) => {
             .selectAll()
             .data(preparedData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/hooks/useShapes/waterfall/index.js

@@ -41,7 +41,7 @@ export const WaterfallSeriesShapes = (args) => {
             .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/esm/types/chart/legend.d.ts

@@ -25,6 +25,13 @@ export interface ChartLegend extends ChartLegendItem {
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
+    /**
+     * The vertical alignment of the legend box within the chart area.
+     * Only applies when position is 'left' or 'right'.
+     *
+     * @default top
+     * */
+    verticalAlign?: 'top' | 'center' | 'bottom';
     /**
      * Defines how items should be positioned in the legend when overflowing (moving to the next line).
      *

package/dist/esm/types/chart/line.d.ts

@@ -29,30 +29,36 @@ export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
         };
     };
 }
-export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
+export interface LineSeriesLineBaseStyle {
+    /** Pixel width of the graph line.
+     *
+     * @default 1 (for individual series).
+     * For series within the range slider, values are inherited from the individual series by default.
+     */
+    lineWidth?: number;
+    /** Individual opacity for the line.
+     *
+     * For series within the range slider, values are inherited from the individual series by default.
+     */
+    opacity?: number | null;
+}
+export interface LineSeries<T = MeaningfulAny> extends BaseSeries, LineSeriesLineBaseStyle {
     type: typeof SERIES_TYPE.Line;
     data: LineSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
-    /** Pixel width of the graph line.
-     *
-     * @default 1
-     * */
-    lineWidth?: number;
+    /** Option for line stroke style */
+    dashStyle?: DashStyle;
+    /** Option for line cap style */
+    linecap?: `${LineCap}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line series */
     marker?: PointMarkerOptions;
-    /** Option for line stroke style */
-    dashStyle?: DashStyle;
-    /** Option for line cap style */
-    linecap?: `${LineCap}`;
-    /** Individual opacity for the line. */
-    opacity?: number;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
     /**
@@ -68,5 +74,5 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     /**
      * Options to configure how this series appears and behaves in the Range Slider component.
      */
-    rangeSlider?: ChartSeriesRangeSliderOptions;
+    rangeSlider?: ChartSeriesRangeSliderOptions & LineSeriesLineBaseStyle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.28.2",
+  "version": "1.29.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",