feat: add borderRadius option to bar-y series (#47)

kuzmadom · web-flow · commit f4ac52d813b1 · 2025-03-21T17:44:54.000+03:00
diff --git a/src/__stories__/__data__/bar-y/playground.ts b/src/__stories__/__data__/bar-y/playground.ts
@@ -21,6 +21,7 @@ function prepareData(): ChartData {
                     dataLabels: {
                         enabled: true,
                     },
+                    borderRadius: 4,
                 },
             ],
         },
diff --git a/src/hooks/useSeries/prepare-bar-y.ts b/src/hooks/useSeries/prepare-bar-y.ts
@@ -1,7 +1,7 @@
 import type {ScaleOrdinal} from 'd3';
 import get from 'lodash/get';
 
-import type {BarYSeries} from '../../types';
+import type {BarYSeries, ChartSeriesOptions} from '../../types';
 import {getLabelsSize, getUniqId} from '../../utils';
 
 import {DEFAULT_DATALABELS_STYLE} from './constants';
@@ -12,6 +12,7 @@ type PrepareBarYSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarYSeries[];
     legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
 };
 
 function prepareDataLabels(series: BarYSeries) {
@@ -37,7 +38,7 @@ function prepareDataLabels(series: BarYSeries) {
 }
 
 export function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[] {
-    const {colorScale, series: seriesList, legend} = args;
+    const {colorScale, series: seriesList, seriesOptions, legend} = args;
 
     return seriesList.map<PreparedBarYSeries>((series) => {
         const name = series.name || '';
@@ -58,6 +59,7 @@ export function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[]
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
+            borderRadius: series.borderRadius ?? seriesOptions?.['bar-y']?.borderRadius ?? 0,
         };
     }, []);
 }
diff --git a/src/hooks/useSeries/prepareSeries.ts b/src/hooks/useSeries/prepareSeries.ts
@@ -53,7 +53,12 @@ export function prepareSeries(args: {
             });
         }
         case 'bar-y': {
-            return prepareBarYSeries({series: series as BarYSeries[], legend, colorScale});
+            return prepareBarYSeries({
+                series: series as BarYSeries[],
+                legend,
+                colorScale,
+                seriesOptions,
+            });
         }
         case 'scatter': {
             return prepareScatterSeries({series: series as ScatterSeries[], legend, colorScale});
diff --git a/src/hooks/useSeries/types.ts b/src/hooks/useSeries/types.ts
@@ -165,6 +165,7 @@ export type PreparedBarYSeries = {
         maxWidth: number;
         html: boolean;
     };
+    borderRadius: number;
 } & BasePreparedSeries;
 
 export type PreparedPieSeries = {
diff --git a/src/hooks/useShapes/bar-x/index.tsx b/src/hooks/useShapes/bar-x/index.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
 
-import {color, path, select} from 'd3';
+import {color, select} from 'd3';
 import type {Dispatch} from 'd3';
 import get from 'lodash/get';
 
 import type {LabelData} from '../../../types';
 import {block, filterOverlappingLabels} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
+import {getRectPath} from '../utils';
 
 import type {PreparedBarXData} from './types';
 
 export {prepareBarXData} from './prepare-data';
 export * from './types';
 
-const b = block('d3-bar-x');
+const b = block('bar-x');
 
 type Args = {
     dispatcher: Dispatch<object>;
@@ -42,26 +43,18 @@ export const BarXSeriesShapes = (args: Args) => {
             .data(preparedData)
             .join('path')
             .attr('d', (d) => {
-                const borderRadius = d.isTopItem
+                const borderRadius = d.isLastStackItem
                     ? Math.min(d.height, d.width / 2, d.series.borderRadius)
                     : 0;
-                const p = path();
-                p.moveTo(d.x + borderRadius, d.y);
-                p.lineTo(d.x + d.width - borderRadius, d.y);
-                p.arc(
-                    d.x + d.width - borderRadius,
-                    d.y + borderRadius,
-                    borderRadius,
-                    -Math.PI / 2,
-                    0,
-                    false,
-                );
-                p.lineTo(d.x + d.width, d.y + d.height);
-                p.lineTo(d.x, d.y + d.height);
-                p.lineTo(d.x, d.y + borderRadius);
-                p.arc(d.x + borderRadius, d.y + borderRadius, borderRadius, Math.PI, -Math.PI / 2);
-                p.moveTo(d.x + borderRadius, d.y);
-                p.closePath();
+
+                const p = getRectPath({
+                    x: d.x,
+                    y: d.y,
+                    width: d.width,
+                    height: d.height,
+                    borderRadius: [borderRadius, borderRadius, 0, 0],
+                });
+
                 return p.toString();
             })
             .attr('class', b('segment'))
diff --git a/src/hooks/useShapes/bar-x/prepare-data.ts b/src/hooks/useShapes/bar-x/prepare-data.ts
@@ -171,7 +171,7 @@ export const prepareBarXData = (args: {
                     data: yValue.data,
                     series: yValue.series,
                     htmlElements: [],
-                    isTopItem: yValueIndex === sortedData.length - 1,
+                    isLastStackItem: yValueIndex === sortedData.length - 1,
                 };
 
                 const label = getLabelData(barData);
diff --git a/src/hooks/useShapes/bar-x/types.ts b/src/hooks/useShapes/bar-x/types.ts
@@ -10,5 +10,5 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     series: PreparedBarXSeries;
     label?: LabelData;
     htmlElements: HtmlItem[];
-    isTopItem: boolean;
+    isLastStackItem: boolean;
 };
diff --git a/src/hooks/useShapes/bar-y/index.tsx b/src/hooks/useShapes/bar-y/index.tsx
@@ -8,11 +8,12 @@ import type {LabelData} from '../../../types';
 import {block} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
+import {getRectPath} from '../utils';
 
 import type {PreparedBarYData} from './types';
 export {prepareBarYData} from './prepare-data';
 
-const b = block('d3-bar-y');
+const b = block('bar-y');
 
 type Args = {
     dispatcher: Dispatch<object>;
@@ -36,7 +37,22 @@ export const BarYSeriesShapes = (args: Args) => {
         const rectSelection = svgElement
             .selectAll('rect')
             .data(preparedData)
-            .join('rect')
+            .join('path')
+            .attr('d', (d) => {
+                const borderRadius = d.isLastStackItem
+                    ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+                    : 0;
+
+                const p = getRectPath({
+                    x: d.x,
+                    y: d.y,
+                    width: d.width,
+                    height: d.height,
+                    borderRadius: [0, borderRadius, borderRadius, 0],
+                });
+
+                return p.toString();
+            })
             .attr('class', b('segment'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)
diff --git a/src/hooks/useShapes/bar-y/prepare-data.ts b/src/hooks/useShapes/bar-y/prepare-data.ts
@@ -170,7 +170,7 @@ export const prepareBarYData = (args: {
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : measureValues;
-            sortedData.forEach(({data, series: s}) => {
+            sortedData.forEach(({data, series: s}, xValueIndex) => {
                 let center;
 
                 if (yAxis[0].type === 'category') {
@@ -196,6 +196,7 @@ export const prepareBarYData = (args: {
                     data,
                     series: s,
                     htmlElements: [],
+                    isLastStackItem: xValueIndex === sortedData.length - 1,
                 };
 
                 stackItems.push(item);
diff --git a/src/hooks/useShapes/bar-y/types.ts b/src/hooks/useShapes/bar-y/types.ts
@@ -11,4 +11,5 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     series: PreparedBarYSeries;
     label?: LabelData;
     htmlElements: HtmlItem[];
+    isLastStackItem: boolean;
 };
diff --git a/src/hooks/useShapes/styles.scss b/src/hooks/useShapes/styles.scss
@@ -18,15 +18,15 @@
     }
 }
 
-.gcharts-d3-bar-x {
+.gcharts-bar-x {
     &__label {
         user-select: none;
 
         fill: var(--g-color-text-complementary);
     }
 }
 
-.gcharts-d3-bar-y {
+.gcharts-bar-y {
     &__label {
         user-select: none;
 
diff --git a/src/hooks/useShapes/utils.ts b/src/hooks/useShapes/utils.ts
@@ -1,5 +1,5 @@
 import type {BaseType, ScaleBand, ScaleLinear, ScaleTime} from 'd3';
-import {select} from 'd3';
+import {path, select} from 'd3';
 import get from 'lodash/get';
 
 import type {BasicInactiveState} from '../../types';
@@ -66,3 +66,70 @@ export function setActiveState<T extends {active?: boolean}>(args: {
 
     return datum;
 }
+
+export function getRectPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius?: number | number[];
+}) {
+    const {x, y, width, height, borderRadius = 0} = args;
+    const borderRadiuses =
+        typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [
+        borderRadiusTopLeft = 0,
+        borderRadiusTopRight = 0,
+        borderRadiusBottomRight = 0,
+        borderRadiusBottomLeft = 0,
+    ] = borderRadiuses ?? [];
+
+    const p = path();
+
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(
+        x + width - borderRadiusTopRight,
+        y + borderRadiusTopRight,
+        borderRadiusTopRight,
+        startAngle,
+        startAngle + angle,
+    );
+    startAngle += angle;
+
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(
+        x + width - borderRadiusBottomRight,
+        y + height - borderRadiusBottomRight,
+        borderRadiusBottomRight,
+        startAngle,
+        startAngle + angle,
+    );
+    startAngle += angle;
+
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(
+        x + borderRadiusBottomLeft,
+        y + height - borderRadiusBottomLeft,
+        borderRadiusBottomLeft,
+        startAngle,
+        startAngle + angle,
+    );
+    startAngle += angle;
+
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(
+        x + borderRadiusTopLeft,
+        y + borderRadiusTopLeft,
+        borderRadiusTopLeft,
+        startAngle,
+        startAngle + angle,
+    );
+
+    p.closePath();
+
+    return p;
+}
diff --git a/src/types/chart/bar-y.ts b/src/types/chart/bar-y.ts
@@ -32,6 +32,11 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
     /** Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
      *
diff --git a/src/types/chart/series.ts b/src/types/chart/series.ts
@@ -140,6 +140,11 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,12 @@ export function prepareSeries(args: {`
`53`	`53`	`});`
`54`	`54`	`}`
`55`	`55`	`case 'bar-y': {`
`56`		`- return prepareBarYSeries({series: series as BarYSeries[], legend, colorScale});`
	`56`	`+ return prepareBarYSeries({`
	`57`	`+ series: series as BarYSeries[],`
	`58`	`+ legend,`
	`59`	`+ colorScale,`
	`60`	`+ seriesOptions,`
	`61`	`+ });`
`57`	`62`	`}`
`58`	`63`	`case 'scatter': {`
`59`	`64`	`return prepareScatterSeries({series: series as ScatterSeries[], legend, colorScale});`