From 4975486ab61e002e966d8fee42c58df69f250480 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 29 Jan 2026 19:15:54 +0530 Subject: [PATCH 1/8] Refactor chart width calculation in AreaChart, BarChart, and LineChart components to use passed width prop if available, improving flexibility in rendering. Updated dependencies in useEffect hooks for better responsiveness. --- .../Charts/AreaChartCondensed/AreaChartCondensed.tsx | 6 ++++-- .../Charts/BarChartCondensed/BarChartCondensed.tsx | 4 +++- .../Charts/LineChartCondensed/LineChartCondensed.tsx | 6 ++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx index b7d95b9b..667e2f02 100644 --- a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx @@ -99,8 +99,10 @@ const AreaChartCondensedComponent = ({ if (data.length === 0) { return 0; } - return chartContainerWidth / data.length; - }, [chartContainerWidth, data]); + // Use passed width if available, otherwise use observed chartContainerWidth + const chartWidth = width ?? chartContainerWidth; + return chartWidth / data.length; + }, [width, chartContainerWidth, data]); const { angle: calculatedAngle, height: xAxisHeight } = useAutoAngleCalculation( maxLabelWidth, diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx index d8ca9aaf..800fe792 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx @@ -105,7 +105,9 @@ const BarChartCondensedComponent = ({ if (data.length === 0) { return 0; } - return chartContainerWidth / data.length; + // Use passed width if available, otherwise use observed chartContainerWidth + const chartWidth = width ?? chartContainerWidth; + return chartWidth / data.length; }, [chartContainerWidth, data]); const { angle: calculatedAngle, height: xAxisHeight } = useAutoAngleCalculation( diff --git a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx index cb0d3119..c3f89fb0 100644 --- a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx @@ -101,8 +101,10 @@ const LineChartCondensedComponent = ({ if (data.length === 0) { return 0; } - return chartContainerWidth / data.length; - }, [chartContainerWidth, data]); + // Use passed width if available, otherwise use observed chartContainerWidth + const chartWidth = width ?? chartContainerWidth; + return chartWidth / data.length; + }, [width, chartContainerWidth, data]); const { angle: calculatedAngle, height: xAxisHeight } = useAutoAngleCalculation( maxLabelWidth, From fcde2a1ea038534ba9d28411b6de5b065b2f9a82 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 29 Jan 2026 19:18:47 +0530 Subject: [PATCH 2/8] Update version of @crayonai/react-ui to 0.9.15 in package.json --- js/packages/react-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/packages/react-ui/package.json b/js/packages/react-ui/package.json index 4945f468..2d45b7be 100644 --- a/js/packages/react-ui/package.json +++ b/js/packages/react-ui/package.json @@ -2,7 +2,7 @@ "type": "module", "name": "@crayonai/react-ui", "license": "MIT", - "version": "0.9.14", + "version": "0.9.15", "description": "Component library for Generative UI SDK", "main": "dist/index.js", "types": "dist/index.d.ts", From 384e1753d20331eb91a98dab0514e1ccd0e25b44 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 29 Jan 2026 19:31:28 +0530 Subject: [PATCH 3/8] Update BarChartCondensed component to include width prop in useEffect dependencies, enhancing responsiveness in chart width calculations. --- .../components/Charts/BarChartCondensed/BarChartCondensed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx index df8cd4bf..6f54cff9 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx @@ -109,7 +109,7 @@ const BarChartCondensedComponent = ({ // Use passed width if available, otherwise use observed chartContainerWidth const chartWidth = width ?? chartContainerWidth; return chartWidth / data.length; - }, [chartContainerWidth, data]); + }, [chartContainerWidth, data, width]); const { angle: calculatedAngle, height: xAxisHeight } = useAutoAngleCalculation( maxLabelWidth, From 7a5676dca9f84a9b0d8d7d97636ad0fad4ba26d7 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Fri, 30 Jan 2026 17:25:14 +0530 Subject: [PATCH 4/8] Enhance BarChartCondensed component with customizable bar width properties. Introduced minBarWidth, maxBarWidth, and defaultBarWidth props for improved flexibility in rendering. Updated width calculations to ensure responsiveness and accurate bar sizing based on available space. --- .../BarChartCondensed/BarChartCondensed.tsx | 92 +++++++++++++++++-- .../stories/barChartCondensed.stories.tsx | 4 +- 2 files changed, 84 insertions(+), 12 deletions(-) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx index 6f54cff9..3a8f47e4 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx @@ -59,9 +59,20 @@ export interface BarChartCondensedProps { className?: string; height?: number; width?: number; + /** Minimum bar width in pixels. Default: 12 */ + minBarWidth?: number; + /** Maximum bar width in pixels. Default: 12 */ + maxBarWidth?: number; + /** Default bar width used as fallback when container size is unknown. Default: 12 */ + defaultBarWidth?: number; } -const BAR_WIDTH = 12; +// Default constants - can be overridden via props +const DEFAULT_FALLBACK_BAR_WIDTH = 12; +const DEFAULT_MIN_BAR_WIDTH = DEFAULT_FALLBACK_BAR_WIDTH; +const DEFAULT_MAX_BAR_WIDTH = DEFAULT_FALLBACK_BAR_WIDTH; + +// Layout constants const BAR_GAP = 10; const BAR_CATEGORY_GAP = "20%"; const BAR_INTERNAL_LINE_WIDTH = 1; @@ -87,6 +98,9 @@ const BarChartCondensedComponent = ({ className, height = CHART_HEIGHT, width, + minBarWidth = DEFAULT_MIN_BAR_WIDTH, + maxBarWidth = DEFAULT_MAX_BAR_WIDTH, + defaultBarWidth = DEFAULT_FALLBACK_BAR_WIDTH, }: BarChartCondensedProps) => { const printContext = usePrintContext(); isAnimationActive = printContext ? false : isAnimationActive; @@ -203,6 +217,55 @@ const BarChartCondensedComponent = ({ return width ?? containerWidth; }, [width, containerWidth]); + // Calculate explicit chart width when width prop is provided + // This allows Recharts to calculate bar dimensions on first render + const explicitChartWidth = useMemo(() => { + if (!width) return undefined; + // Subtract Y-axis width and margins to get the actual chart area width + const yAxisSpace = showYAxis ? yAxisWidth : 0; + return width - yAxisSpace - chartMargin.left - chartMargin.right; + }, [width, showYAxis, yAxisWidth, chartMargin.left, chartMargin.right]); + + // Calculate optimal bar width based on available space + const calculatedBarWidth = useMemo(() => { + // Fallback for empty data or unavailable dimensions + if (data.length === 0) return defaultBarWidth; + + // Use explicitChartWidth if available, otherwise fall back to chartContainerWidth + const availableWidth = explicitChartWidth ?? chartContainerWidth; + + if (!availableWidth || availableWidth === 0) return defaultBarWidth; + + // Parse category gap percentage + const categoryGapPercent = typeof BAR_CATEGORY_GAP === 'string' + ? parseFloat(BAR_CATEGORY_GAP) / 100 + : BAR_CATEGORY_GAP / 100; + + // Calculate space per category + const spacePerCategory = availableWidth / data.length; + + // For grouped charts, multiple bars share the category space + const barsPerCategory = variant === 'stacked' ? 1 : dataKeys.length; + + // Calculate available space for bars after accounting for gaps + // Category gap is applied as a percentage of the category width + const categoryGapWidth = spacePerCategory * categoryGapPercent; + const spaceForBars = spacePerCategory - categoryGapWidth; + + // Calculate bar width accounting for gaps between bars + let barWidth: number; + if (barsPerCategory === 1) { + barWidth = spaceForBars; + } else { + // For multiple bars: distribute space among bars and gaps + const totalGapWidth = BAR_GAP * (barsPerCategory - 1); + barWidth = (spaceForBars - totalGapWidth) / barsPerCategory; + } + + // Apply both minimum and maximum constraints + return Math.max(minBarWidth, Math.min(maxBarWidth, barWidth)); + }, [explicitChartWidth, chartContainerWidth, data.length, dataKeys.length, variant, minBarWidth, maxBarWidth, defaultBarWidth]); + // Handle mouse events for bar hovering const handleChartMouseMove = useCallback((state: any) => { if (state && state.activeLabel !== undefined) { @@ -233,15 +296,16 @@ const BarChartCondensedComponent = ({ // Observe container width for legend useEffect(() => { - // Only set up ResizeObserver if width is not provided - if (width || !containerRef.current || !chartContainerRef.current) { + // Always set up ResizeObserver for chartContainerRef to get accurate bar width calculations + if (!chartContainerRef.current) { return () => {}; } const resizeObserver = new ResizeObserver((entries) => { // there is only one entry in the entries array because we are observing the chart container for (const entry of entries) { - if (entry.target === containerRef.current) { + if (entry.target === containerRef.current && !width) { + // Only observe containerRef if width is not provided setContainerWidth(entry.contentRect.width); } if (entry.target === chartContainerRef.current) { @@ -250,8 +314,13 @@ const BarChartCondensedComponent = ({ } }); - resizeObserver.observe(containerRef.current); + // Always observe chartContainerRef resizeObserver.observe(chartContainerRef.current); + + // Only observe containerRef if width is not provided + if (!width && containerRef.current) { + resizeObserver.observe(containerRef.current); + } return () => { resizeObserver.disconnect(); @@ -337,8 +406,8 @@ const BarChartCondensedComponent = ({ fill={color} stackId={variant === "stacked" ? "a" : undefined} isAnimationActive={isAnimationActive} - maxBarSize={BAR_WIDTH} - barSize={BAR_WIDTH} + maxBarSize={calculatedBarWidth} + barSize={calculatedBarWidth} shape={(props: any) => { const { payload, value, dataKey } = props; @@ -380,6 +449,7 @@ const BarChartCondensedComponent = ({ barInternalLineColor, hoveredCategory, categoryKey, + calculatedBarWidth, ]); return ( @@ -406,10 +476,10 @@ const BarChartCondensedComponent = ({
({ onMouseMove={handleChartMouseMove} onMouseLeave={handleChartMouseLeave} onClick={onBarClick} + width={explicitChartWidth} + height={effectiveHeight} > {grid && cartesianGrid()} diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx index f97ce8d7..3a7cad2c 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx @@ -265,7 +265,7 @@ const salesData = [ }, }, }, - tags: ["!dev", "autodocs"], + tags: ["dev", "autodocs"], argTypes: { data: { description: ` @@ -1057,7 +1057,7 @@ export const CustomPaletteStory: Story = {
- + ), From 44065e18e0a9c2d82daf204029b726de7fbac96c Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Fri, 30 Jan 2026 17:25:36 +0530 Subject: [PATCH 5/8] format fix --- .../BarChartCondensed/BarChartCondensed.tsx | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx index 3a8f47e4..ff9ebcea 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx @@ -233,25 +233,26 @@ const BarChartCondensedComponent = ({ // Use explicitChartWidth if available, otherwise fall back to chartContainerWidth const availableWidth = explicitChartWidth ?? chartContainerWidth; - + if (!availableWidth || availableWidth === 0) return defaultBarWidth; // Parse category gap percentage - const categoryGapPercent = typeof BAR_CATEGORY_GAP === 'string' - ? parseFloat(BAR_CATEGORY_GAP) / 100 - : BAR_CATEGORY_GAP / 100; + const categoryGapPercent = + typeof BAR_CATEGORY_GAP === "string" + ? parseFloat(BAR_CATEGORY_GAP) / 100 + : BAR_CATEGORY_GAP / 100; // Calculate space per category const spacePerCategory = availableWidth / data.length; - + // For grouped charts, multiple bars share the category space - const barsPerCategory = variant === 'stacked' ? 1 : dataKeys.length; - + const barsPerCategory = variant === "stacked" ? 1 : dataKeys.length; + // Calculate available space for bars after accounting for gaps // Category gap is applied as a percentage of the category width const categoryGapWidth = spacePerCategory * categoryGapPercent; const spaceForBars = spacePerCategory - categoryGapWidth; - + // Calculate bar width accounting for gaps between bars let barWidth: number; if (barsPerCategory === 1) { @@ -261,10 +262,19 @@ const BarChartCondensedComponent = ({ const totalGapWidth = BAR_GAP * (barsPerCategory - 1); barWidth = (spaceForBars - totalGapWidth) / barsPerCategory; } - + // Apply both minimum and maximum constraints return Math.max(minBarWidth, Math.min(maxBarWidth, barWidth)); - }, [explicitChartWidth, chartContainerWidth, data.length, dataKeys.length, variant, minBarWidth, maxBarWidth, defaultBarWidth]); + }, [ + explicitChartWidth, + chartContainerWidth, + data.length, + dataKeys.length, + variant, + minBarWidth, + maxBarWidth, + defaultBarWidth, + ]); // Handle mouse events for bar hovering const handleChartMouseMove = useCallback((state: any) => { @@ -316,7 +326,7 @@ const BarChartCondensedComponent = ({ // Always observe chartContainerRef resizeObserver.observe(chartContainerRef.current); - + // Only observe containerRef if width is not provided if (!width && containerRef.current) { resizeObserver.observe(containerRef.current); @@ -476,7 +486,10 @@ const BarChartCondensedComponent = ({
Date: Mon, 2 Feb 2026 17:26:36 +0530 Subject: [PATCH 6/8] Refactor BarChartCondensed component to streamline bar width calculations. Removed minBarWidth and defaultBarWidth props, simplifying the logic to only apply a maximum bar width constraint. Enhanced responsiveness by allowing Recharts to handle thin bars automatically. Added a new interactive story for testing bar width configurations, including variant and data size controls. --- .../BarChartCondensed/BarChartCondensed.tsx | 62 +-- .../stories/barChartCondensed.stories.tsx | 375 +++++++++++++++++- .../shared/LineInBarShape/LineInBarShape.tsx | 11 +- 3 files changed, 396 insertions(+), 52 deletions(-) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx index ff9ebcea..f2d61b5d 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx @@ -59,18 +59,12 @@ export interface BarChartCondensedProps { className?: string; height?: number; width?: number; - /** Minimum bar width in pixels. Default: 12 */ - minBarWidth?: number; - /** Maximum bar width in pixels. Default: 12 */ + /** Maximum bar width in pixels. Prevents bars from becoming too wide. Default: 12 */ maxBarWidth?: number; - /** Default bar width used as fallback when container size is unknown. Default: 12 */ - defaultBarWidth?: number; } -// Default constants - can be overridden via props -const DEFAULT_FALLBACK_BAR_WIDTH = 12; -const DEFAULT_MIN_BAR_WIDTH = DEFAULT_FALLBACK_BAR_WIDTH; -const DEFAULT_MAX_BAR_WIDTH = DEFAULT_FALLBACK_BAR_WIDTH; +// Default maximum bar width - prevents bars from becoming too wide with sparse data +const DEFAULT_MAX_BAR_WIDTH = 12; // Layout constants const BAR_GAP = 10; @@ -98,9 +92,7 @@ const BarChartCondensedComponent = ({ className, height = CHART_HEIGHT, width, - minBarWidth = DEFAULT_MIN_BAR_WIDTH, maxBarWidth = DEFAULT_MAX_BAR_WIDTH, - defaultBarWidth = DEFAULT_FALLBACK_BAR_WIDTH, }: BarChartCondensedProps) => { const printContext = usePrintContext(); isAnimationActive = printContext ? false : isAnimationActive; @@ -227,54 +219,28 @@ const BarChartCondensedComponent = ({ }, [width, showYAxis, yAxisWidth, chartMargin.left, chartMargin.right]); // Calculate optimal bar width based on available space + // Only applies maximum constraint - Recharts handles thin bars automatically const calculatedBarWidth = useMemo(() => { - // Fallback for empty data or unavailable dimensions - if (data.length === 0) return defaultBarWidth; - // Use explicitChartWidth if available, otherwise fall back to chartContainerWidth const availableWidth = explicitChartWidth ?? chartContainerWidth; - if (!availableWidth || availableWidth === 0) return defaultBarWidth; - - // Parse category gap percentage - const categoryGapPercent = - typeof BAR_CATEGORY_GAP === "string" - ? parseFloat(BAR_CATEGORY_GAP) / 100 - : BAR_CATEGORY_GAP / 100; + // If no width available, return undefined and let Recharts auto-size + if (!availableWidth || availableWidth === 0 || data.length === 0) { + return undefined; + } - // Calculate space per category + // Calculate space per category (Recharts handles gaps automatically via barGap and barCategoryGap props) const spacePerCategory = availableWidth / data.length; // For grouped charts, multiple bars share the category space const barsPerCategory = variant === "stacked" ? 1 : dataKeys.length; - // Calculate available space for bars after accounting for gaps - // Category gap is applied as a percentage of the category width - const categoryGapWidth = spacePerCategory * categoryGapPercent; - const spaceForBars = spacePerCategory - categoryGapWidth; + // Simple division - let Recharts apply gaps via barGap and barCategoryGap props + const barWidth = spacePerCategory / barsPerCategory; - // Calculate bar width accounting for gaps between bars - let barWidth: number; - if (barsPerCategory === 1) { - barWidth = spaceForBars; - } else { - // For multiple bars: distribute space among bars and gaps - const totalGapWidth = BAR_GAP * (barsPerCategory - 1); - barWidth = (spaceForBars - totalGapWidth) / barsPerCategory; - } - - // Apply both minimum and maximum constraints - return Math.max(minBarWidth, Math.min(maxBarWidth, barWidth)); - }, [ - explicitChartWidth, - chartContainerWidth, - data.length, - dataKeys.length, - variant, - minBarWidth, - maxBarWidth, - defaultBarWidth, - ]); + // Only apply maximum constraint, let Recharts handle thin bars automatically + return Math.min(maxBarWidth, barWidth); + }, [explicitChartWidth, chartContainerWidth, data.length, dataKeys.length, variant, maxBarWidth]); // Handle mouse events for bar hovering const handleChartMouseMove = useCallback((state: any) => { diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx index 3a7cad2c..a0e5679f 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx @@ -1057,7 +1057,7 @@ export const CustomPaletteStory: Story = {
- + ), @@ -1409,3 +1409,376 @@ export const ResponsiveBehaviorDemo: Story = { ); }, }; + +/** + * 🎯 Bar Width Testing Playground + * Interactive story to test bar width calculations with various configurations: + * - Different data set sizes (few bars vs many bars) + * - Grouped vs Stacked variants + * - Max bar width constraint (prevents bars from being too wide) + * - Container width variations + */ +export const BarWidthPlayground: StoryObj = { + render: () => { + const [variant, setVariant] = useState<"grouped" | "stacked">("grouped"); + const [dataSize, setDataSize] = useState<"small" | "medium" | "large" | "xlarge">("medium"); + const [maxBarWidth, setMaxBarWidth] = useState(60); + const [containerWidth, setContainerWidth] = useState(undefined); + + // Generate data based on size selection + const generateData = () => { + const sizes = { + small: 4, + medium: 12, + large: 24, + xlarge: 50, + }; + + const count = sizes[dataSize]; + return Array.from({ length: count }, (_, i) => ({ + quarter: `Q${(i % 4) + 1} FY${2022 + Math.floor(i / 4)}`, + revenue: Math.floor(Math.random() * 2000000) + 500000, + expenses: Math.floor(Math.random() * 1500000) + 300000, + profit: Math.floor(Math.random() * 800000) + 100000, + })); + }; + + const data = generateData(); + + return ( +
+ {/* Control Panel */} + +

+ 🎛️ Bar Width Controls +

+ +
+ {/* Variant Control */} +
+ +
+ + +
+
+ + {/* Data Size Control */} +
+ + +
+ + {/* Max Bar Width Control */} +
+ + setMaxBarWidth(Number(e.target.value))} + style={{ width: "100%" }} + /> +
+ 10px + 120px +
+
+ + {/* Container Width Control */} +
+ +
+ setContainerWidth(Number(e.target.value))} + style={{ flex: 1 }} + disabled={!containerWidth} + /> + +
+
+ 400px + 1400px +
+
+
+ + {/* Info Display */} +
+
+
+ Data Points: {data.length} +
+
+ Bars per Category: {variant === "stacked" ? 1 : 3} +
+
+ Total Bars: {data.length * (variant === "stacked" ? 1 : 3)} +
+
+
+ + + {/* Chart Display */} + +

+ {variant === "grouped" ? "📊 Grouped" : "📚 Stacked"} Bar Chart - Bar Width Test +

+
+ +
+ + + {/* Quick Test Presets */} + +

+ 🚀 Quick Test Presets +

+
+ + + + + + + + + + + +
+ +
+ ); + }, +}; diff --git a/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx b/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx index f984adef..a55b9e94 100644 --- a/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx +++ b/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx @@ -23,7 +23,8 @@ interface LineInBarShapeProps { } const DEFAULT_STACK_GAP = 1; -const MIN_LINE_DIMENSION = 8; // For internal line visibility +const MIN_LINE_DIMENSION = 8; // For internal line visibility (height/width threshold) +const MIN_BAR_WIDTH_FOR_LINE = 3; // Minimum bar width to show internal line in vertical mode const LINE_PADDING = 6; const MIN_GROUP_BAR_HEIGHT = 2; // For vertical bars const MIN_STACKED_BAR_HEIGHT = 4; // For vertical bars @@ -302,7 +303,11 @@ const LineInBarShape: FunctionComponent = React.memo((props const lineCoords = useMemo(() => { if (isVertical) { - if (width <= 0 || adjustedHeight < MIN_LINE_DIMENSION) return null; + // For vertical bars: hide line if bar width < 3px (too thin) OR height < 8px (too short) + // This ensures thin bars don't have a visible internal line that looks awkward + if (width <= 0 || width < MIN_BAR_WIDTH_FOR_LINE || adjustedHeight < MIN_LINE_DIMENSION) { + return null; + } const centerX = x + width / 2; return { x1: centerX, @@ -311,7 +316,7 @@ const LineInBarShape: FunctionComponent = React.memo((props y2: adjustedY + adjustedHeight - LINE_PADDING, }; } - // Horizontal + // Horizontal bars: hide line if width < 8px OR height <= 0 if (adjustedWidth < MIN_LINE_DIMENSION || height <= 0) return null; const centerY = y + height / 2; return { From 4faa55678ac017ebe4193ee1c46f00c84cd1e6a2 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Tue, 3 Feb 2026 18:57:10 +0530 Subject: [PATCH 7/8] Update version of @crayonai/react-ui to 0.9.16 in package.json --- js/packages/react-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/packages/react-ui/package.json b/js/packages/react-ui/package.json index 2d45b7be..dfd4ab3d 100644 --- a/js/packages/react-ui/package.json +++ b/js/packages/react-ui/package.json @@ -2,7 +2,7 @@ "type": "module", "name": "@crayonai/react-ui", "license": "MIT", - "version": "0.9.15", + "version": "0.9.16", "description": "Component library for Generative UI SDK", "main": "dist/index.js", "types": "dist/index.d.ts", From e2f58977fe7526412e281ec3c8691ecc22ef0c69 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Tue, 3 Feb 2026 19:24:45 +0530 Subject: [PATCH 8/8] Refactor BarChartCondensed stories for improved formatting consistency. Removed unnecessary line breaks in story descriptions for better readability. --- .../stories/barChartCondensed.stories.tsx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx index a0e5679f..3116cc7c 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx @@ -1057,7 +1057,7 @@ export const CustomPaletteStory: Story = { - + ), @@ -1662,9 +1662,7 @@ export const BarWidthPlayground: StoryObj = { }} >
🎯 Few Bars (Wide)
-
- 4 points, max 60px cap -
+
4 points, max 60px cap