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

[WEB-4855] refactor: chart tick improvements (#7732)

Browse source 
* 🚧 WIP: Introduced customTicks prop in BarChart for flexible tick rendering.

* ✨ feat: added customTicks to axis charts for flexible tick rendering

* 🔧 fix: update default bar fill color to black and ensure consistent color usage in BarChart

* ✨ feat: add customTooltipContent prop to LineChart for enhanced tooltip flexibility

* 🔧 fix: update bar fill color handling to support dynamic colors based on data and removed DEFAULT_BAR_FILL_COLOR

* 🔧 fix: correct bar fill color handling in BarChart to ensure proper color assignment for tooltips

* 🔧 fix: update customTicks prop types in TAxisChartProps to use unknown type for better type safety

* 📝 chore: updated translations and cleaned up insight card

* 🚨 fix: lint

* 🔧 fix: remove unused translation key "no_of" from Russian translations
This commit is contained in:
Jayash Tripathy 2025-09-09 23:51:13 +05:30 • committed by GitHub
parent 498613284e
commit 43b7a6ad0a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 115 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/propel/src/charts/area-chart/root.tsx
View file

@ -23,6 +23,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
x: undefined,
y: 10,
},
customTicks,
showTooltip = true,
comparisonLine,
} = props;
@ -114,7 +115,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => <CustomXAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.x || CustomXAxisTick;
return <TickComponent {...props} />;
}}
tickLine={false}
axisLine={false}
label={
@ -140,7 +144,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
className: AXIS_LABEL_CLASSNAME,
}
}
tick={(props) => <CustomYAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.y || CustomYAxisTick;
return <TickComponent {...props} />;
}}
tickCount={tickCount.y}
allowDecimals={!!yAxis.allowDecimals}
/>

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

@ -35,6 +35,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
x: undefined,
y: 10,
},
customTicks,
showTooltip = true,
customTooltipContent,
} = props;
@ -52,7 +53,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
keys.push(bar.key);
labels[bar.key] = bar.label;
// For tooltip, we need a string color. If fill is a function, use a default color
colors[bar.key] = typeof bar.fill === "function" ? "#000000" : bar.fill;
colors[bar.key] = typeof bar.fill === "function" ? bar.fill({}) : bar.fill;
}
return { stackKeys: keys, stackLabels: labels, stackDotColors: colors };
@ -65,6 +66,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
key={bar.key}
dataKey={bar.key}
stackId={bar.stackId}
fill={typeof bar.fill === "function" ? bar.fill({}) : bar.fill}
opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
shape={(shapeProps: any) => {
const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
@ -96,7 +98,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => <CustomXAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.x || CustomXAxisTick;
return <TickComponent {...props} />;
}}
tickLine={false}
axisLine={false}
label={{
@ -118,7 +123,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
dx: yAxis.dx ?? -16,
className: AXIS_LABEL_CLASSNAME,
}}
tick={(props) => <CustomYAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.y || CustomYAxisTick;
return <TickComponent {...props} />;
}}
tickCount={tickCount.y}
allowDecimals={!!yAxis.allowDecimals}
/>

37
packages/propel/src/charts/line-chart/root.tsx
View file

@ -32,8 +32,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
x: undefined,
y: 10,
},
customTicks,
legend,
showTooltip = true,
customTooltipContent,
} = props;
// states
const [activeLine, setActiveLine] = useState<string | null>(null);
@ -100,7 +102,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => <CustomXAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.x || CustomXAxisTick;
return <TickComponent {...props} />;
}}
tickLine={false}
axisLine={false}
label={
@ -126,7 +131,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
className: AXIS_LABEL_CLASSNAME,
}
}
tick={(props) => <CustomYAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.y || CustomYAxisTick;
return <TickComponent {...props} />;
}}
tickCount={tickCount.y}
allowDecimals={!!yAxis.allowDecimals}
/>
@ -148,17 +156,20 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
wrapperStyle={{
pointerEvents: "auto",
}}
content={({ active, label, payload }) => (
<CustomTooltip
active={active}
activeKey={activeLine}
label={label}
payload={payload}
itemKeys={itemKeys}
itemLabels={itemLabels}
itemDotColors={itemDotColors}
/>
)}
content={({ active, label, payload }) => {
if (customTooltipContent) return customTooltipContent({ active, label, payload });
return (
<CustomTooltip
active={active}
activeKey={activeLine}
label={label}
payload={payload}
itemKeys={itemKeys}
itemLabels={itemLabels}
itemDotColors={itemDotColors}
/>
);
}}
/>
)}
{renderLines}

11
packages/propel/src/charts/scatter-chart/root.tsx
View file

@ -28,6 +28,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
xAxis,
yAxis,
className,
customTicks,
tickCount = {
x: undefined,
y: 10,
@ -85,7 +86,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => <CustomXAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.x || CustomXAxisTick;
return <TickComponent {...props} />;
}}
tickLine={false}
axisLine={false}
label={
@ -111,7 +115,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
className: AXIS_LABEL_CLASSNAME,
}
}
tick={(props) => <CustomYAxisTick {...props} />}
tick={(props) => {
const TickComponent = customTicks?.y || CustomYAxisTick;
return <TickComponent {...props} />;
}}
tickCount={tickCount.y}
allowDecimals={!!yAxis.allowDecimals}
/>