Some performance improvement and introducing multi line xaxis ticks, for line, bar and area charts, #145
Merged
Merged
Conversation
…rmance-improvement
This commit improves the rendering performance of the AreaChart, BarChart, and LineChart components by memoizing the Y-axis. The Y-axis for these charts is now wrapped in a `useMemo` hook to prevent unnecessary re-renders when unrelated props change. This results in a smoother experience, particularly for charts that are interactive or update frequently. Additionally, the `chartSyncID` has been removed as it is no longer required with the new implementation.
…culation This commit introduces a new hook, useMaxLabelHeight, which calculates the maximum height of labels in a chart based on the provided data and category key. The hook utilizes memoization for performance optimization and ensures accurate height measurement by creating temporary DOM elements. Additionally, it cleans up by removing unused code from useTransformKey.
This commit introduces a new type, XAxisTickVariant, which defines the possible variants for X-axis ticks in charts. The type is exported from a new file, enhancing the type definitions available for chart components.
This commit updates the charts hooks index file to export the useMaxLabelHeight hook, allowing for dynamic label height calculations to be utilized in other components.
This commit modifies the ThemeProvider component to reference themes.light instead of lightTheme for the default theme. This change ensures consistency with the updated theme structure.
…ht and X-axis tick improvements This commit introduces the useMaxLabelHeight hook in both AreaChart and LineChart components to dynamically calculate the maximum height of X-axis labels based on their content. The X-axis tick rendering has been updated to utilize this height for better spacing. Additionally, the XAxisTick component has been refactored to support different tick variants, improving the overall flexibility and appearance of the charts. Unused code related to X-axis position handling has been removed for cleaner implementation.
… tick rendering This commit modifies the AreaChart and LineChart components to include the maximum label height in their height calculations, ensuring better spacing for dynamic content. The XAxisTick component has been updated to accept a customizable width for improved layout flexibility. Additionally, a new utility function, getCanvasContext, has been introduced to streamline font style application for canvas rendering, enhancing overall chart rendering accuracy.
…handling This commit refactors the BarChart utility functions by introducing the getCanvasContext utility for better font style management in X-axis tick rendering. It also updates the padding values for chart content and adjusts the label width handling in the useMaxLabelHeight hook to enhance layout consistency and visual spacing.
…and width handling This commit refactors the AreaChart, BarChart, and LineChart components to support a new "multiLine" tick variant for X-axis labels. It introduces the widthOfGroup calculation to improve label height management and adjusts the useMaxLabelHeight hook accordingly. The XAxisTick component is updated to accommodate the new variant and width properties, enhancing layout flexibility and visual consistency across charts.
…readability This commit refactors the data structure in the BarChart stories to enhance readability by formatting the data entries with consistent indentation and spacing. This change improves the clarity of the data variations used in the stories, making it easier for developers to understand and modify the chart data.
ankit-thesys
changed the title
This commit refactors the AreaChart, BarChart, and LineChart components to streamline the usage of the XAxisTick component by removing the unnecessary chartVariant prop. The tick rendering is simplified for better readability and maintainability, enhancing the overall code structure across the chart components.
…ck component This commit removes the unused getCanvasContext utility from the XAxisTick component, streamlining the code and improving maintainability. The change contributes to a cleaner implementation by eliminating unnecessary references, enhancing overall code clarity.
…label height This commit enhances the XAxisTick component by adding a new labelHeight prop, allowing for more flexible height management of X-axis ticks across AreaChart, BarChart, and LineChart components. The tick rendering in these charts has been updated to utilize this new prop, improving layout consistency and visual appearance.
ankit-thesys
marked this pull request as ready for review
July 3, 2025 10:35
…rt components This commit introduces a new constant, X_AXIS_PADDING, to standardize the left and right padding for the X-axis in both AreaChart and LineChart components. This change enhances code maintainability and ensures consistent layout across chart components.
abhithesys
approved these changes
Jul 3, 2025
…rmance-improvement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.