binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4889] refactor: add fill in bar chart bar stroke (#7776)

Browse source 
* ♻️ refactor: add fill in barchart bar stroke

* ♻️ refactor: added fill in the circle
This commit is contained in:
Jayash Tripathy 2025-09-12 00:04:16 +05:30 • committed by GitHub
parent b60f12a88e
commit 9ffc30f7b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/propel/src/charts/bar-chart/bar.tsx
View file

@ -23,7 +23,7 @@ interface TShapeProps {
}
interface TBarProps extends TShapeProps {
fill: string | ((payload: any) => string);
fill: string;
stackKeys: string[];
textClassName?: string;
showPercentage?: boolean;
@ -108,7 +108,7 @@ const CustomBar = React.memo((props: TBarProps) => {
<path
d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
className="transition-opacity duration-200"
fill={typeof fill === "function" ? fill(payload) : fill}
fill={fill}
opacity={opacity}
/>
{showText && (
@ -130,18 +130,12 @@ const CustomBarLollipop = React.memo((props: TBarProps) => {
y1={y + height}
x2={x + width / 2}
y2={y}
stroke={typeof fill === "function" ? fill(payload) : fill}
stroke={fill}
strokeWidth={DEFAULT_LOLLIPOP_LINE_WIDTH}
strokeLinecap="round"
strokeDasharray={dotted ? "4 4" : "0"}
/>
<circle
cx={x + width / 2}
cy={y}
r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS}
fill={typeof fill === "function" ? fill(payload) : fill}
stroke="none"
/>
<circle cx={x + width / 2} cy={y} r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS} fill={fill} stroke="none" />
{showPercentage && (
<PercentageText x={x + width / 2} y={y} percentage={currentBarPercentage} className={textClassName} />
)}

3
packages/propel/src/charts/bar-chart/root.tsx
View file

@ -111,9 +111,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
className="[&_path]:transition-opacity [&_path]:duration-200"
onMouseEnter={() => setActiveBar(bar.key)}
onMouseLeave={() => setActiveBar(null)}
fill={getBarColor(data, bar.key)}
/>
)),
[activeLegend, stackKeys, bars]
[activeLegend, stackKeys, bars, getBarColor, data]
);
return (