@gravity-ui/charts 1.42.3 → 1.43.0

package/dist/cjs/core/utils/labels.js

@@ -43,20 +43,20 @@ export function filterOverlappingLabels(labels) {
     return result;
 }
 export function getSvgLabelConstraintedPosition(args) {
-    const { boundsHeight, boundsWidth, height, width, x, y } = args;
+    const { boundsHeight, boundsWidth, height, width, x, y, hangingOffset } = args;
     let resultX = x;
-    let resultY = y;
+    let resultY = y - height / 2 + hangingOffset;
     if (x < 0) {
         resultX = 0;
     }
     if (x + width > boundsWidth) {
         resultX = boundsWidth - width;
     }
-    if (y - height < 0) {
+    if (resultY < 0) {
         resultY = 0;
     }
-    if (y > boundsHeight) {
-        resultY = boundsHeight;
+    if (resultY + height > boundsHeight) {
+        resultY = boundsHeight - height + hangingOffset;
     }
     return { x: resultX, y: resultY };
 }

package/dist/cjs/core/utils/text.d.ts

@@ -27,6 +27,7 @@ export declare function getTextSizeFn({ style }: {
 }): (str: string) => Promise<{
     width: number;
     height: number;
+    hangingOffset: number;
 }>;
 export declare function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }: {
     text: string;

package/dist/cjs/core/utils/text.js

@@ -189,14 +189,28 @@ export function getTextSizeFn({ style }) {
     const defaultFontFamily = computedStyle.getPropertyValue('font-family');
     const defaultFontSize = computedStyle.getPropertyValue('font-size');
     const defaultFontWeight = computedStyle.getPropertyValue('font-weight');
+    const resolveCSSVar = (value) => {
+        const match = value.match(/^var\(\s*([\w-]+)/);
+        if (match) {
+            return computedStyle.getPropertyValue(match[1]).trim() || value;
+        }
+        return value;
+    };
     return async (str) => {
-        var _a, _b;
         await document.fonts.ready;
-        context.font = `${(_a = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _a !== void 0 ? _a : defaultFontWeight} ${(_b = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _b !== void 0 ? _b : defaultFontSize} ${defaultFontFamily}`;
+        const fontWeight = (style === null || style === void 0 ? void 0 : style.fontWeight)
+            ? resolveCSSVar(String(style.fontWeight))
+            : defaultFontWeight;
+        const fontSize = (style === null || style === void 0 ? void 0 : style.fontSize) ? resolveCSSVar(style.fontSize) : defaultFontSize;
+        context.font = `${fontWeight} ${fontSize} ${defaultFontFamily}`;
         const textMetric = context.measureText(unescapeHtml(str));
+        // we calculate hanging based on an approximate algorithm from chromium
+        // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32;drc=7cf6ac3dd6dca800fbc0d28e80a7732d4ea90340?q=member_hanging_&ss=chromium%2Fchromium%2Fsrc
+        // it would be possible to use native, but the browsers are not working in harmony right now
         return {
             width: textMetric.width,
             height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
+            hangingOffset: textMetric.fontBoundingBoxAscent * 0.2,
         };
     };
 }

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

@@ -1,4 +1,5 @@
-import type { ChartBrush, ChartData, ChartMargin, ChartZoom, DeepRequired } from '../types';
+import type { TextRowData } from '../components/types';
+import type { ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
 export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
     brush: ChartBrush;
 }>;
@@ -6,8 +7,10 @@ export type PreparedChart = {
     margin: ChartMargin;
     zoom: PreparedZoom | null;
 };
-export type PreparedTitle = ChartData['title'] & {
+export type PreparedTitle = Omit<ChartTitle, 'margin'> & {
     height: number;
+    margin: number;
+    contentRows: TextRowData[];
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;

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

@@ -1,4 +1,4 @@
-import { group } from 'd3-array';
+import { group, min } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
@@ -60,7 +60,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
         else {
             const labelSize = await getTextSize(text);
             const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height);
+            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height + labelSize.hangingOffset);
             svgLabels.push({
                 text,
                 x,
@@ -76,7 +76,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
     return { svgLabels, htmlLabels };
 }
 export const prepareAreaData = async (args) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -144,12 +144,17 @@ export const prepareAreaData = async (args) => {
                     continue;
                 }
                 const yAxisTop = ((_a = split.plots[plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const yMin = (_b = getYValue({
-                    point: { y: 0 },
+                let base = 0;
+                if (seriesYAxis.type === 'logarithmic') {
+                    const domainData = seriesYScale.domain();
+                    base = (_b = min(domainData)) !== null && _b !== void 0 ? _b : 0;
+                }
+                const yMin = (_c = getYValue({
+                    point: { y: base },
                     points: s.data,
                     yAxis: seriesYAxis,
                     yScale: seriesYScale,
-                })) !== null && _b !== void 0 ? _b : 0;
+                })) !== null && _c !== void 0 ? _c : 0;
                 const seriesData = s.data.reduce((m, d) => {
                     const key = String(xAxis.type === 'category'
                         ? getDataCategoryValue({
@@ -309,7 +314,7 @@ export const prepareAreaData = async (args) => {
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];
-                const itemYAxisTop = ((_c = split.plots[currentYAxis.plotIndex]) === null || _c === void 0 ? void 0 : _c.top) || 0;
+                const itemYAxisTop = ((_d = split.plots[currentYAxis.plotIndex]) === null || _d === void 0 ? void 0 : _d.top) || 0;
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({
                         series: item.series,

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, max, reverse, sort } from 'd3-array';
+import { ascending, descending, max, min, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
@@ -35,7 +35,7 @@ async function getLabelData(d, xMax) {
     };
 }
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
@@ -145,7 +145,15 @@ export const prepareBarXData = async (args) => {
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
                     const y = seriesYScale(yDataValue);
-                    const base = seriesYScale(0);
+                    let base = 0;
+                    if (seriesYAxis.type === 'logarithmic') {
+                        const domainData = seriesYScale.domain();
+                        const yMinValue = (_e = min(domainData)) !== null && _e !== void 0 ? _e : 0;
+                        base = seriesYScale(yMinValue);
+                    }
+                    else {
+                        base = seriesYScale(0);
+                    }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
                     const height = Math.abs(base - y);
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
@@ -198,7 +206,7 @@ export const prepareBarXData = async (args) => {
             barData.x >= xMax ||
             barData.y + barData.height <= 0 ||
             barData.y >= plotHeight;
-        const isZeroValue = ((_e = barData.data.y) !== null && _e !== void 0 ? _e : 0) === 0;
+        const isZeroValue = ((_f = barData.data.y) !== null && _f !== void 0 ? _f : 0) === 0;
         if (barData.series.dataLabels.enabled &&
             !isRangeSlider &&
             (!isBarOutsideBounds || isZeroValue)) {

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -171,7 +171,7 @@ export async function prepareBarYData(args) {
                     map.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
                 }
                 const getTextSize = map.get(dataLabels.style);
-                const { width, height } = await getTextSize(content);
+                const { width, height, hangingOffset } = await getTextSize(content);
                 const x = dataLabels.inside
                     ? prepared.x + prepared.width / 2 - width / 2
                     : prepared.x + prepared.width + dataLabels.padding;
@@ -181,7 +181,8 @@ export async function prepareBarYData(args) {
                     height,
                     width,
                     x,
-                    y: y + height / 2,
+                    y,
+                    hangingOffset,
                 });
                 labels.push({
                     size: { width, height },

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

@@ -62,7 +62,10 @@ export async function prepareFunnelData(args) {
             }
             svgLabels.push({
                 x,
-                y: getSegmentY(index) + itemHeight / 2 - labelSize.height / 2,
+                y: getSegmentY(index) +
+                    itemHeight / 2 -
+                    labelSize.height / 2 +
+                    labelSize.hangingOffset,
                 text: labelContent,
                 style: s.dataLabels.style,
                 size: labelSize,

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

@@ -82,7 +82,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                     if (text) {
                         svgDataLabels.push({
                             x: item.x + item.width / 2 - size.width / 2,
-                            y: item.y + item.height / 2 - size.height / 2,
+                            y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
                             style: series.dataLabels.style,
                         });

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

@@ -68,7 +68,10 @@ export const prepareLineData = async (args) => {
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
-                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const y = Math.max(yAxisTop, point.y -
+                            s.dataLabels.padding -
+                            labelSize.height +
+                            labelSize.hangingOffset);
                         const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
                         const labelData = {
                             text,

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

@@ -95,6 +95,7 @@ export function preparePieData(args) {
             const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
+            let labelHangingOffset = 0;
             if (dataLabels.html) {
                 const size = await getLabelsSize({
                     labels: [text],
@@ -108,10 +109,11 @@ export function preparePieData(args) {
                 const size = await getTextSize(text);
                 labelWidth = size.width;
                 labelHeight = size.height;
+                labelHangingOffset = size.hangingOffset;
             }
             const label = {
                 text,
-                size: { width: labelWidth, height: labelHeight },
+                size: { width: labelWidth, height: labelHeight, hangingOffset: labelHangingOffset },
             };
             acc[d.id] = label;
         }
@@ -165,11 +167,16 @@ export function preparePieData(args) {
              * @returns {[number, number]} A tuple [x, y] relative to the pie center.
              */
             const getLabelPosition = (angle) => {
+                var _a;
                 let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
                 if (shouldUseHtml) {
                     x = x < 0 ? x - labelWidth : x;
+                    y = y < 0 ? y - labelHeight : y;
+                }
+                else {
+                    const hangingOffset = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _a !== void 0 ? _a : 0;
+                    y = y < 0 ? y - labelHeight + hangingOffset : y + hangingOffset;
                 }
-                y = y < 0 ? y - labelHeight : y;
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {

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

@@ -1,7 +1,7 @@
 import { range } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { curveLinearClosed, line } from 'd3-shape';
-import { getLabelsSize } from '../../../core/utils';
+import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 export async function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
@@ -116,18 +116,28 @@ export async function prepareRadarData(args) {
             const shouldUseHtml = dataLabels.html;
             data.labels = await Promise.all(categories.map(async (category, index) => {
                 const text = getFormattedValue(Object.assign({ value: category.key }, dataLabels));
-                const labelSize = await getLabelsSize({ labels: [text], style });
                 const angle = index * angleStep - Math.PI / 2;
                 // Position label slightly outside the point
                 const labelRadius = data.radius + 10;
                 let x = center[0] + Math.cos(angle) * labelRadius;
                 let y = center[1] + Math.sin(angle) * labelRadius;
+                let labelWidth = 0;
+                let labelHeight = 0;
                 if (shouldUseHtml) {
-                    x = x < center[0] ? x - labelSize.maxWidth : x;
-                    y = y - labelSize.maxHeight;
+                    const labelSize = await getLabelsSize({ labels: [text], style });
+                    labelWidth = labelSize.maxWidth;
+                    labelHeight = labelSize.maxHeight;
+                    x = x < center[0] ? x - labelWidth : x;
+                    y = y - labelHeight;
                 }
                 else {
-                    y = y < center[1] ? y - labelSize.maxHeight : y;
+                    const labelSize = await getTextSizeFn({ style })(text);
+                    labelWidth = labelSize.width;
+                    labelHeight = labelSize.height;
+                    y =
+                        y < center[1]
+                            ? y - labelHeight + labelSize.hangingOffset
+                            : y + labelSize.hangingOffset;
                 }
                 x = Math.max(-boundsWidth / 2, x);
                 return {
@@ -135,8 +145,8 @@ export async function prepareRadarData(args) {
                     x,
                     y,
                     style,
-                    size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
-                    maxWidth: labelSize.maxWidth,
+                    size: { width: labelWidth, height: labelHeight },
+                    maxWidth: labelWidth,
                     textAnchor: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'end' : 'start',
                     series: { id: series.id },
                 };

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

@@ -1,5 +1,5 @@
-import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
 import { getFormattedValue } from '../../../core/utils/format';
+import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
     const htmlElements = [];

package/dist/cjs/hooks/useShapes/sankey/sankey-layout.d.ts

@@ -0,0 +1,49 @@
+type SankeyLayoutNodeProps = {
+    index: number;
+    depth: number;
+    height: number;
+    layer: number;
+    value: number;
+    fixedValue?: number;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+type SankeyLayoutLinkProps = {
+    index: number;
+    value: number;
+    width: number;
+    y0: number;
+    y1: number;
+};
+export type SankeyComputedNode<N, L> = N & SankeyLayoutNodeProps & {
+    sourceLinks: SankeyComputedLink<N, L>[];
+    targetLinks: SankeyComputedLink<N, L>[];
+};
+export type SankeyComputedLink<N, L> = L & SankeyLayoutLinkProps & {
+    source: SankeyComputedNode<N, L>;
+    target: SankeyComputedNode<N, L>;
+};
+export type SankeyGraph<N, L> = {
+    nodes: SankeyComputedNode<N, L>[];
+    links: SankeyComputedLink<N, L>[];
+};
+type AlignFn<N, L> = (node: SankeyComputedNode<N, L>, n: number) => number;
+type SortFn<T> = (a: T, b: T) => number;
+export declare function sankey<N, L>(): {
+    (input: {
+        nodes: N[];
+        links: L[];
+    }): SankeyGraph<N, L>;
+    nodeId(fn: (d: N, i: number) => string | number): /*elided*/ any;
+    nodeAlign(fn: AlignFn<N, L>): /*elided*/ any;
+    nodeSort(fn: SortFn<SankeyComputedNode<N, L>> | undefined): /*elided*/ any;
+    nodeWidth(value: number): /*elided*/ any;
+    nodePadding(value: number): /*elided*/ any;
+    linkSort(fn: SortFn<SankeyComputedLink<N, L>> | undefined): /*elided*/ any;
+    extent([[left, top], [right, bottom]]: [[number, number], [number, number]]): /*elided*/ any;
+    iterations(value: number): /*elided*/ any;
+};
+export declare function sankeyLinkHorizontal<N, L>(): import("d3-shape").Link<any, SankeyComputedLink<N, L>, [number, number]>;
+export {};