Conversation
…t components to use passed width prop if available, improving flexibility in rendering. Updated dependencies in useEffect hooks for better responsiveness.
…ned-chart-bug-fix
… dependencies, enhancing responsiveness in chart width calculations.
…rties. 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.
|
Re-review triggered for new commit 44065e1. |
WalkthroughThis PR applies code formatting and style improvements to the BarChartCondensed component with no functional changes. The updates focus on improving code readability and consistency by reformatting the Changes
Sequence DiagramThis diagram shows the interactions between components: sequenceDiagram
participant Component as BarChart Component
participant WidthCalc as Width Calculator (useMemo)
participant ResizeObs as ResizeObserver
participant ChartContainer as ChartContainer
Component->>WidthCalc: Calculate bar width
activate WidthCalc
alt explicitChartWidth provided
WidthCalc->>WidthCalc: Use explicitChartWidth
else chartContainerWidth available
WidthCalc->>WidthCalc: Use chartContainerWidth
else no width available
WidthCalc-->>Component: Return defaultBarWidth
end
WidthCalc->>WidthCalc: Parse BAR_CATEGORY_GAP percentage
WidthCalc->>WidthCalc: Calculate spacePerCategory<br/>(availableWidth / data.length)
alt variant === "stacked"
WidthCalc->>WidthCalc: barsPerCategory = 1
else variant === "grouped"
WidthCalc->>WidthCalc: barsPerCategory = dataKeys.length
end
WidthCalc->>WidthCalc: Calculate categoryGapWidth
WidthCalc->>WidthCalc: Calculate spaceForBars
alt barsPerCategory === 1
WidthCalc->>WidthCalc: barWidth = spaceForBars
else multiple bars per category
WidthCalc->>WidthCalc: barWidth = (spaceForBars - totalGapWidth) / barsPerCategory
end
WidthCalc->>WidthCalc: Apply min/max constraints
WidthCalc-->>Component: Return calculated barWidth
deactivate WidthCalc
Component->>ResizeObs: Setup resize observer
activate ResizeObs
ResizeObs->>ResizeObs: Observe chartContainerRef
opt width not provided
ResizeObs->>ResizeObs: Also observe containerRef
end
ResizeObs-->>Component: Monitor dimension changes
deactivate ResizeObs
Component->>ChartContainer: Render chart
activate ChartContainer
alt explicitChartWidth exists
Component->>ChartContainer: Set width to explicitChartWidth px
else no explicit width
Component->>ChartContainer: Set width to 100%
end
Component->>ChartContainer: Set height to effectiveHeight
ChartContainer-->>Component: Chart rendered
deactivate ChartContainer
🔒 Security Analysis
🔗 Cross-Repository Impact AnalysisEnable automatic detection of breaking changes across your dependent repositories. → Set up now Learn more about Cross-Repository AnalysisWhat It Does
How to Enable
Benefits
{'files_selected': ['js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx'], 'files_unselected': []}
Note for WindsurfPlease change the default marketplace provider to the following in the windsurf settings:Marketplace Extension Gallery Service URL: https://marketplace.visualstudio.com/_apis/public/gallery Marketplace Gallery Item URL: https://marketplace.visualstudio.com/items Entelligence.ai can learn from your feedback. Simply add 👍 / 👎 emojis to teach it your preferences. More shortcuts belowEmoji Descriptions:
Interact with the Bot:
Also you can trigger various commands with the bot by doing The current supported commands are
More commands to be added soon. |
ankit-thesys
changed the title
…ions. 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.
|
Re-review triggered for new commit cc33ecd. |
WalkthroughThis PR refactors the BarChartCondensed component to simplify bar width calculation logic by removing manual minimum and default width constraints, instead delegating to Recharts' automatic sizing capabilities. The changes eliminate three props and associated constants, streamlining the calculation to only enforce a maximum width constraint. A new Storybook playground story is added to facilitate testing of various bar width scenarios with different data configurations. Additionally, the LineInBarShape component is enhanced with a minimum width threshold to prevent rendering lines in bars that are too thin, improving visual quality and preventing awkward rendering artifacts. Changes
Sequence DiagramThis diagram shows the interactions between components: sequenceDiagram
participant Component as BarChartCondensed
participant Hook as useMemo(calculatedBarWidth)
participant Recharts as Recharts Library
Note over Component: Component renders with props:<br/>maxBarWidth, data, dataKeys, variant
Component->>Hook: Calculate bar width
activate Hook
Hook->>Hook: Get availableWidth<br/>(explicitChartWidth ?? chartContainerWidth)
alt availableWidth unavailable OR data empty
Hook-->>Component: return undefined
Note over Component,Recharts: Let Recharts auto-size bars
Component->>Recharts: Render with barWidth=undefined
Recharts->>Recharts: Auto-calculate bar dimensions
else availableWidth available AND data exists
Hook->>Hook: Calculate spacePerCategory<br/>(availableWidth / data.length)
alt variant === "stacked"
Hook->>Hook: barsPerCategory = 1
else variant === "grouped"
Hook->>Hook: barsPerCategory = dataKeys.length
end
Hook->>Hook: barWidth = spacePerCategory / barsPerCategory
Hook->>Hook: Apply max constraint:<br/>Math.min(maxBarWidth, barWidth)
Hook-->>Component: return constrained barWidth
Component->>Recharts: Render with calculated barWidth
Note over Recharts: Recharts applies gaps automatically<br/>via barGap and barCategoryGap props
end
deactivate Hook
Note over Component: Simplified calculation:<br/>- No min constraint<br/>- No manual gap calculations<br/>- No default fallback width
🔒 Security Analysis
🔗 Cross-Repository Impact AnalysisEnable automatic detection of breaking changes across your dependent repositories. → Set up now Learn more about Cross-Repository AnalysisWhat It Does
How to Enable
Benefits
{'files_selected': ['js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx', 'js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx', 'js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx'], 'files_unselected': []}
Note for WindsurfPlease change the default marketplace provider to the following in the windsurf settings:Marketplace Extension Gallery Service URL: https://marketplace.visualstudio.com/_apis/public/gallery Marketplace Gallery Item URL: https://marketplace.visualstudio.com/items Entelligence.ai can learn from your feedback. Simply add 👍 / 👎 emojis to teach it your preferences. More shortcuts belowEmoji Descriptions:
Interact with the Bot:
Also you can trigger various commands with the bot by doing The current supported commands are
More commands to be added soon. |
|
✅ Review completed for commit 4faa556. |
…y. Removed unnecessary line breaks in story descriptions for better readability.
|
✅ Review completed for commit e2f5897. |
2 participants
EntelligenceAI PR Summary
Refactors BarChartCondensed to simplify bar width calculations and adds visual quality improvements for thin bars.
minBarWidthanddefaultBarWidthprops from BarChartCondensed, delegating auto-sizing to RechartscalculatedBarWidthcalculation to only enforce maximum width constraint