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

32
packages/types/src/charts/index.ts
View file

@ -21,8 +21,17 @@ export type TChartData<K extends string, T extends string> = {
[key in K]: string | number;
} & Record<T, any>;
export type TChartProps<K extends string, T extends string> = {
export type TBaseChartProps<K extends string, T extends string> = {
data: TChartData<K, T>[];
className?: string;
legend?: TChartLegend;
margin?: TChartMargin;
showTooltip?: boolean;
customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
};
// Props specific to charts with X and Y axes
export type TAxisChartProps<K extends string, T extends string> = TBaseChartProps<K, T> & {
xAxis: {
key: keyof TChartData<K, T>;
label?: string;
@ -38,15 +47,14 @@ export type TChartProps<K extends string, T extends string> = {
offset?: number;
dx?: number;
};
className?: string;
legend?: TChartLegend;
margin?: TChartMargin;
tickCount?: {
x?: number;
y?: number;
};
showTooltip?: boolean;
customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
customTicks?: {
x?: React.ComponentType<unknown>;
y?: React.ComponentType<unknown>;
};
};
// ============================================================
@ -67,7 +75,7 @@ export type TBarItem<T extends string> = {
shapeVariant?: TBarChartShapeVariant;
};
export type TBarChartProps<K extends string, T extends string> = TChartProps<K, T> & {
export type TBarChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
bars: TBarItem<T>[];
barSize?: number;
};
@ -87,7 +95,7 @@ export type TLineItem<T extends string> = {
style?: Record<string, string | number>;
};
export type TLineChartProps<K extends string, T extends string> = TChartProps<K, T> & {
export type TLineChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
lines: TLineItem<T>[];
};
@ -102,7 +110,7 @@ export type TScatterPointItem<T extends string> = {
stroke: string;
};
export type TScatterChartProps<K extends string, T extends string> = TChartProps<K, T> & {
export type TScatterChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
scatterPoints: TScatterPointItem<T>[];
};
@ -123,7 +131,7 @@ export type TAreaItem<T extends string> = {
style?: Record<string, string | number>;
};
export type TAreaChartProps<K extends string, T extends string> = TChartProps<K, T> & {
export type TAreaChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
areas: TAreaItem<T>[];
comparisonLine?: {
dashedLine: boolean;
@ -141,7 +149,7 @@ export type TCellItem<T extends string> = {
};
export type TPieChartProps<K extends string, T extends string> = Pick<
TChartProps<K, T>,
TBaseChartProps<K, T>,
"className" | "data" | "showTooltip" | "legend" | "margin"
> & {
dataKey: T;
@ -223,7 +231,7 @@ export type TRadarItem<T extends string> = {
};
export type TRadarChartProps<K extends string, T extends string> = Pick<
TChartProps<K, T>,
TBaseChartProps<K, T>,
"className" | "showTooltip" | "margin" | "data" | "legend"
> & {
dataKey: T;