fix AxisLabelMaxWidth

gravity-ui · Sep 14, 2023 · e8f2838 · e8f2838
1 parent 38b01d0
commit e8f2838
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/src/plugins/d3/renderer/components/Chart.tsx b/src/plugins/d3/renderer/components/Chart.tsx
@@ -36,7 +36,9 @@ export const Chart = (props: Props) => {
     const {top, left, width, height, data} = props;
     const svgRef = React.createRef<SVGSVGElement>();
     const {chartHovered, handleMouseEnter, handleMouseLeave} = useChartEvents();
-    const {chart, title, tooltip, xAxis, yAxis} = useChartOptions(data);
+    const {chart, title, tooltip, xAxis, yAxis} = useChartOptions({
+        data,
+    });
     const {legendItems, legendConfig, preparedSeries, preparedLegend, handleLegendItemClick} =
         useSeries({
             chartWidth: width,

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/index.ts b/src/plugins/d3/renderer/hooks/useChartOptions/index.ts
@@ -9,10 +9,14 @@ import {getPreparedXAxis} from './x-axis';
 import {getPreparedYAxis} from './y-axis';
 import type {ChartOptions} from './types';
 
-type Args = ChartKitWidgetData;
+type Args = {
+    data: ChartKitWidgetData;
+};
 
 export const useChartOptions = (args: Args): ChartOptions => {
-    const {chart, series, title, tooltip, xAxis, yAxis} = args;
+    const {
+        data: {chart, series, title, tooltip, xAxis, yAxis},
+    } = args;
     const options: ChartOptions = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({title});
         const preparedTooltip = getPreparedTooltip({tooltip});

diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts
@@ -1,5 +1,4 @@
-import {select, max} from 'd3';
-import type {AxisDomain} from 'd3';
+import {select, ScaleLinear} from 'd3';
 import get from 'lodash/get';
 
 import type {
@@ -13,62 +12,55 @@ import {
     DEFAULT_AXIS_LABEL_PADDING,
     DEFAULT_AXIS_TITLE_FONT_SIZE,
 } from '../../constants';
-import {getDomainDataYBySeries, getHorisontalSvgTextHeight, formatAxisTickLabel} from '../../utils';
+import {getHorisontalSvgTextHeight, formatAxisTickLabel} from '../../utils';
 import type {PreparedAxis} from './types';
+import {createYScale} from '../useAxisScales';
+import {PreparedSeries} from '../useSeries/types';
 
 const getAxisLabelMaxWidth = (args: {axis: PreparedAxis; series: ChartKitWidgetSeries[]}) => {
     const {axis, series} = args;
-    let maxDomainValue: AxisDomain;
-    let width = 0;
 
-    switch (axis.type) {
-        case 'category': {
-            const yCategories = get(axis, 'categories', [] as string[]);
-            maxDomainValue = [...yCategories].sort((c1, c2) => c2.length - c1.length)[0];
-            break;
-        }
-        case 'datetime': {
-            const yTimestamps = get(axis, 'timestamps');
-            const domain = yTimestamps || (getDomainDataYBySeries(series) as number[]);
-            maxDomainValue = max(domain) as number;
-            break;
-        }
-        case 'linear': {
-            const domain = getDomainDataYBySeries(series) as number[];
-            maxDomainValue = max(domain) as number;
-        }
+    if (!axis.labels.enabled) {
+        return 0;
     }
 
-    let formattedValue = '';
+    const scale = createYScale(axis, series as PreparedSeries[], 1) as ScaleLinear<number, number>;
+    const ticks = axis.type === 'category' ? axis.categories || [] : scale.ticks();
+    const tickStep = axis.type === 'category' ? undefined : Number(ticks[0]);
 
-    if (axis.labels.enabled) {
-        formattedValue = formatAxisTickLabel({
-            axisType: axis.type,
-            value: maxDomainValue,
-            dateFormat: axis.labels['dateFormat'],
-            numberFormat: axis.labels['numberFormat'],
+    // ToDo: it is necessary to filter data, since we do not draw overlapping ticks
+
+    const svg = select(document.body).append('svg');
+    const text = svg.append('g').append('text').style('font-size', axis.labels.style.fontSize);
+    text.selectAll('tspan')
+        .data(ticks as (string | number)[])
+        .enter()
+        .append('tspan')
+        .attr('x', 0)
+        .attr('dy', 0)
+        .text((d) => {
+            return formatAxisTickLabel({
+                axisType: axis.type,
+                value: d,
+                dateFormat: axis.labels['dateFormat'],
+                numberFormat: axis.labels['numberFormat'],
+                step: tickStep,
+            });
         });
-    }
 
-    select(document.body)
-        .append('text')
-        .style('font-size', axis.labels.style.fontSize)
-        .text(formattedValue)
-        .each(function () {
-            width = this.getBoundingClientRect().width;
-        })
-        .remove();
+    const maxWidth = (text.node() as SVGTextElement).getBoundingClientRect()?.width || 0;
+    svg.remove();
 
-    return width;
+    return maxWidth;
 };
 
 const applyLabelsMaxWidth = (args: {
     series: ChartKitWidgetSeries[];
     preparedYAxis: PreparedAxis;
 }) => {
     const {series, preparedYAxis} = args;
-    const maxWidth = getAxisLabelMaxWidth({axis: preparedYAxis, series});
-    preparedYAxis.labels.maxWidth = maxWidth;
+
+    preparedYAxis.labels.maxWidth = getAxisLabelMaxWidth({axis: preparedYAxis, series});
 };
 
 export const getPreparedYAxis = ({