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