feat(chart): added border radius to bar charts

core-ds · Oct 1, 2021 · cfd0ad2 · cfd0ad2
1 parent 9d1e888
commit cfd0ad2
Show file tree

Hide file tree

Showing 6 changed files with 359 additions and 140 deletions.
diff --git a/packages/chart/src/Component.tsx b/packages/chart/src/Component.tsx
@@ -27,6 +27,7 @@ import { ToggleChartProps } from './types/chart.types';
 import { DataDynamicProps, DataDynamicBooleanProps } from './types/utils/data.types';
 import { ActiveDotProps } from './types/utils/dot.types';
 import { CoordinatesProps } from './types/utils/coordinates.types';
+import { RectBar } from './components/RectBar';
 import { Tick } from './components/Tick';
 import { TooltipContent } from './components/TooltipContent';
 
@@ -192,13 +193,17 @@ const Chart = (props: OptionsProps) => {
         if (!state || !charts) return null;
 
         return state.series.map((item: SeriaProps) => {
-            const { chart, properties } = item;
+            const { chart, properties, radius } = item;
             const show = charts[`${properties.dataKey}`];
 
             switch (chart) {
                 case 'bar':
                     return show && !item?.hide ? (
-                        <Bar key={`${state.id}-${properties.dataKey}`} {...properties}>
+                        <Bar
+                            key={`${state.id}-${properties.dataKey}`}
+                            {...properties}
+                            shape={<RectBar radius={radius} />}
+                        >
                             {data.map((_: DataDynamicProps, index: number) => {
                                 const key = `${state.id}-${properties.dataKey}-${index}`;
                                 return (

diff --git a/packages/chart/src/components/RectBar.tsx b/packages/chart/src/components/RectBar.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { RadiusProp } from '../types/seria.types';
+
+const getPath = (
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: RadiusProp | number = 0,
+): string =>
+    `
+        M${x + (typeof radius === 'number' ? radius : radius?.bottomLeft || 0)} ${y + height}
+        Q${x} ${y + height} ${x} ${y +
+        height -
+        (typeof radius === 'number' ? radius : radius?.bottomLeft || 0)}
+        L${x} ${y + (typeof radius === 'number' ? radius : radius?.topLeft || 0)}
+        Q${x} ${y} ${x + (typeof radius === 'number' ? radius : radius?.topLeft || 0)} ${y}
+        L${x + width - (typeof radius === 'number' ? radius : radius?.topRight || 0)} ${y}
+        Q${x + width} ${y} ${x + width} ${y +
+        (typeof radius === 'number' ? radius : radius?.topRight || 0)}
+        L${x + width} ${y +
+        height -
+        (typeof radius === 'number' ? radius : radius?.bottomRight || 0)}
+        Q${x + width} ${y + height} ${x +
+        width -
+        (typeof radius === 'number' ? radius : radius?.bottomRight || 0)} ${y + height}
+        Z
+    `;
+
+export const RectBar: React.FC<any> = (props): JSX.Element => {
+    const { fill, x, y, width, height, radius } = props;
+    return <path d={getPath(x, y, width, height, radius)} stroke='none' fill={fill} />;
+};
diff --git a/packages/chart/src/docs/Component.stories.mdx b/packages/chart/src/docs/Component.stories.mdx
@@ -191,6 +191,12 @@ import Changelog from '../../CHANGELOG.md';
         const barHideTooltipFirst = boolean('hideTooltip', false, barIdFirst);
         const barZIndexFirst = number('zIndex', 1, {}, barIdFirst);
         const barIconFirst = select('icon', iconTypes, 'circle', barIdFirst);
+        const barRadiusFirst = object('radius', {
+            topLeft: 10,
+            topRight: 10,
+            bottomLeft: 10,
+            bottomRight: 10
+        }, barIdFirst);
 
         const barFillFirst = text('properties.fill', 'var(--color-static-graphic-persimmon)', barIdFirst);
         const barNameFirst = text('properties.name', 'расход', barIdFirst);
@@ -202,6 +208,7 @@ import Changelog from '../../CHANGELOG.md';
         const barHideTooltipSecond = boolean('hideTooltip', false, barIdSecond);
         const barZIndexSecond = number('zIndex', 10, {}, barIdSecond);
         const barIconSecond = select('icon', iconTypes, 'circle', barIdSecond);
+        const barRadiusSecond = number('radius', 10, {}, barIdSecond);
 
         const barFillSecond = text('properties.fill', 'var(--color-static-graphic-green-jungle)', barIdSecond);
         const barNameSecond = text('properties.name', 'приход', barIdSecond);
@@ -310,6 +317,7 @@ import Changelog from '../../CHANGELOG.md';
             zIndex: barZIndexFirst,
             chart: 'bar',
             icon: barIconFirst,
+            radius: barRadiusFirst,
             properties: {
                 name: barNameFirst,
                 dataKey: 'uv',
@@ -351,6 +359,7 @@ import Changelog from '../../CHANGELOG.md';
             zIndex: barZIndexSecond,
             chart: 'bar',
             icon: barIconSecond,
+            radius: barRadiusSecond || 0,
             properties: {
                 name: barNameSecond,
                 dataKey: 'pv',