Charts V2#130
Merged
Merged
Conversation
ankit-thesys
force-pushed
the
chartsV2
branch
3 times, most recently
from
May 22, 2025 12:12
f61ad0f to
b30f20a
Compare
This change introduces a new BarChartV2 component in the react-ui package. The new component provides an enhanced version of the existing BarChart component with additional features and customization options. The key changes include: - Implement a new BarChartV2 component with support for grouped and stacked bar charts - Add support for custom themes, legends, labels, and grid lines - Implement dynamic axis label formatting based on the chart data length - Provide options to control the animation and visibility of the Y-axis These changes aim to improve the flexibility and usability of the BarChart component, allowing developers to create more visually appealing and customizable bar charts in their applications.
…e features This commit adds a new PieChartV2 component to the react-ui package, enhancing chart visualization capabilities. Key features include: - Support for pie and donut chart variants - Dynamic radius calculation based on layout - Customizable themes and data formatting options - Integration with existing chart utilities for color distribution and tooltip rendering - Storybook integration for easy demonstration and testing These enhancements aim to provide developers with a flexible and visually appealing way to represent data in their applications.
The changes made in this commit are: 1. Renamed the `BarChartProps` interface to `BarChartPropsV2` in the `BarChartV2.tsx` file. 2. Updated the corresponding references to `BarChartProps` in the `barChartV2.stories.tsx` file. 3. Updated the export in the `index.ts` file to export `BarChartV2` instead of `BarChartv2`. These changes were made to avoid naming conflicts and maintain consistency in the codebase.
This commit introduces a new function to calculate chart dimensions dynamically, ensuring the PieChart maintains its aspect ratio based on the container width. Key changes include: - Added `calculateChartDimensions` function to determine outer and inner radii based on width, variant, and label presence. - Updated the `useEffect` hook to utilize the new function for calculating radii, simplifying the logic and improving responsiveness. These enhancements aim to provide a more flexible and visually consistent PieChart experience across different layouts.
…ing and customizable features This commit introduces the PieChartCard component, enhancing the charting capabilities within the react-ui package. Key changes include: - Implementation of the PieChartCard component that supports pie and donut chart variants. - Dynamic resizing functionality based on layout to maintain aspect ratio. - Customizable themes, data formatting options, and legend display. - Integration with existing chart utilities for improved data visualization. - Storybook stories for demonstration and testing. These enhancements aim to provide developers with a flexible and visually appealing way to represent data in their applications.
This commit introduces several improvements to the BarChartV2 component: 1. Adds support for responsive layout by using a ResizeObserver to detect changes in the container width and update the chart accordingly. 2. Implements a new `getPadding` function to dynamically calculate the left and right padding of the chart based on the data and container width. 3. Adds a new `getWidthOfData` function to calculate the total width of the chart based on the data. 4. Introduces a new `getRadiusArray` function to handle the different radius styles for grouped and stacked bar charts. 5. Updates the `ChartContainer` component to pass the `rechartsProps` object to the `ResponsiveContainer` component, allowing for better control over the chart's responsiveness. These changes improve the overall user experience and flexibility of the BarChartV2 component, making it more adaptable to different data sets and container sizes.
Removes the `style` prop from the chart container component, as the width, min-width, and aspect ratio are already set in the component's styles. This simplifies the component and removes redundant configuration.
…atures This commit adds the BarChartV3 component to the react-ui package, providing an improved version of the bar chart with several new features: - Supports both grouped and stacked bar chart variants. - Implements responsive design using ResizeObserver for dynamic width adjustments. - Allows customizable themes and bar radius. - Includes a total value display next to the chart. - Storybook stories for demonstration and testing. These enhancements aim to offer developers a more flexible and visually appealing way to represent data in their applications.
…izing and customizable features This commit adds the PieChartV3 component to the react-ui package, enhancing charting capabilities with the following features: - Supports pie and donut chart variants. - Implements dynamic resizing to maintain aspect ratio based on container width. - Allows customizable themes, data formatting options, and legend display. - Integrates with existing chart utilities for improved data visualization. - Includes Storybook stories for demonstration and testing. These enhancements aim to provide developers with a flexible and visually appealing way to represent data in their applications.
This commit adds the BarChartV2 component to the react-ui package, providing an improved version of the bar chart with several new features: - Supports both grouped and stacked bar chart variants. - Implements responsive design using ResizeObserver for dynamic width adjustments. - Allows customizable themes, bar radius, and display options for labels and legends. - Includes a total value display next to the chart. - Storybook stories for demonstration and testing. These enhancements aim to offer developers a more flexible and visually appealing way to represent data in their applications.
…tures This commit adds the PieChartCard component to the react-ui package, enhancing charting capabilities with the following features: - Supports both pie and donut chart variants. - Implements dynamic resizing based on layout to maintain aspect ratio. - Allows customizable themes, data formatting options, and legend display. - Integrates with existing chart utilities for improved data visualization. - Includes Storybook stories for demonstration and testing. These enhancements aim to provide developers with a flexible and visually appealing way to represent data in their applications.
This commit refactors the MiniPieChart and PieChartV2 components by moving the `calculatePercentage`, `calculateChartDimensions`, and `layoutMap` functions into a new utility file, `PieChartUtils.ts`. This change enhances code organization and reusability across pie chart components, promoting cleaner and more maintainable code.
This commit introduces several improvements to the BarChartV2 component: 1. Calculates the width of the chart content based on the data and the variant (grouped or stacked). 2. Adjusts the padding of the chart container to center the chart content within the available space. 3. Implements custom radius calculations for the stacked bar chart variant to achieve the desired visual effect. 4. Updates the bar chart story with a new data point to showcase the changes. 5. Removes the `legend` prop from the component, as it is currently not being used. These changes aim to enhance the overall appearance and functionality of the BarChartV2 component.
Improve the calculation of padding and width for the MiniBarChart component based on the provided data and the chart variant. This ensures the chart is properly sized and positioned within the container, providing a better visual experience for users.
… and customizable features This commit introduces the TwoLevelPieChart component to the react-ui package, enhancing charting capabilities with the following features: - Supports two-level pie chart visualization. - Implements dynamic resizing based on container width to maintain aspect ratio. - Allows customizable themes, data formatting options, and legend display. - Includes Storybook stories for demonstration and testing. These enhancements aim to provide developers with a flexible and visually appealing way to represent hierarchical data in their applications.
…charts This commit introduces an `appearance` prop to the PieChartV2 component, allowing users to choose between a full circular chart and a semi-circular chart. The default value is set to "circular". Additionally, the Storybook stories have been updated to include this new prop with appropriate descriptions and controls for better visualization and testing.
…ffects This commit introduces hover effects to the PieChartV2 and TwoLevelPieChart components by implementing a reusable `useChartHover` hook. The hover effects improve user interaction by highlighting chart segments on mouse events. Additionally, the `getHoverStyles` utility function is added to manage hover styles dynamically, enhancing the visual feedback for users. These changes aim to provide a more engaging and interactive charting experience.
Adds a new `rechartsProps` prop to the `BarChartV2` component, which allows setting the aspect ratio of the Recharts chart. This ensures the chart maintains a consistent 16:9 aspect ratio, regardless of the container size.
…atures This commit introduces the MiniAreaChart component to the react-ui package, providing a compact area chart visualization with the following features: - Supports customizable themes and variants for area interpolation. - Allows for dynamic opacity settings and optional icons for data series. - Integrates with existing chart utilities for improved data handling. - Includes Storybook stories for demonstration and testing. These enhancements aim to offer developers a flexible and visually appealing way to represent data trends in their applications.
…ble features This commit adds the MiniLineChart component to the react-ui package, providing a compact line chart visualization with the following features: - Supports customizable themes and variants for line interpolation. - Allows for dynamic stroke width and optional icons for data series. - Integrates with existing chart utilities for improved data handling. - Includes Storybook stories for demonstration and testing. These enhancements aim to offer developers a flexible and visually appealing way to represent data trends in their applications.
…zable features This commit adds the MiniRadarChart component to the react-ui package, providing a compact radar chart visualization with the following features: - Supports customizable themes and variants for line and area styles. - Allows for dynamic stroke width, area opacity, and optional icons for data series. - Integrates with existing chart utilities for improved data handling. - Includes Storybook stories for demonstration and testing. These enhancements aim to offer developers a flexible and visually appealing way to represent multi-dimensional data in their applications.
…omponent styles This commit includes the following changes: - Duplicated component import description in BarChartV2 story for clarity. - Adjusted Card width in PieChart story from 500px to 300px for better layout. - Modified PieChartV2 story to set legend and label properties to false, and increased Card width from 500px to 700px. These updates aim to enhance the presentation and usability of the chart components in Storybook.
…ty functions and Storybook stories This commit adds the MiniRadialChart component to the react-ui package, providing a compact radial chart visualization with the following features: - Supports customizable themes and variants (circular and semicircle). - Integrates utility functions for percentage calculations, dynamic resizing, and hover effects. - Includes Storybook stories for demonstration and testing, showcasing various configurations and data formats. These enhancements aim to offer developers a flexible and visually appealing way to represent data in a radial format.
…uration utilities This commit introduces several enhancements across multiple chart components, including MiniAreaChart, MiniLineChart, MiniPieChart, MiniRadarChart, and others. Key changes include: - Creation of utility functions for chart configuration and data transformation, improving code reusability and maintainability. - Refactoring of existing components to leverage these new utilities, streamlining the configuration process for themes, colors, and data handling. - Introduction of new types for chart data, enhancing type safety and clarity. These updates aim to provide a more consistent and efficient approach to chart rendering within the react-ui package, ultimately improving the developer experience and component performance.
The changes add new data series for tablet and laptop to the BarChartV2 component. This allows for more detailed visualization of the data across different device types. Additionally, the legend has been added to display the data series and their corresponding colors/icons.
…e and documentation This commit refactors the PieChart stories to improve data representation and documentation. The monthly sales data has been restructured for clarity, and comprehensive usage instructions, including data structure requirements and performance considerations, have been added. Additionally, the layout of the stories has been enhanced for better visual presentation, and new story examples have been introduced to showcase various configurations and responsive behavior.
…arChart imports This commit refines the formatting of the PieChart stories for better readability by adjusting the description strings and layout. Additionally, it updates the RadarChart stories to remove unused imports, streamlining the codebase and improving overall clarity.
This commit modifies the tags for the MiniAreaChart stories, changing them from ["dev", "autodocs"] to ["!dev", "!autodocs"]. This adjustment aims to enhance the clarity and categorization of the story documentation.
…tyles This commit removes the CustomCursor component and its associated SCSS file from the BarChart implementation, streamlining the codebase. Additionally, it updates the BarChart styles to improve spacing and element dimensions, enhancing the overall visual presentation of the charts. A new data structure for single group sales has also been added to the BarChart stories for better representation.
… and animation settings This commit enhances the responsiveness of various chart components, including AreaChart, BarChart, LineChart, and RadialChart, by adjusting their animation settings to be inactive by default. Additionally, it introduces a new SegmentedBarChart export in the Charts index file. The PieChart and RadialChart components have been updated to utilize new constants for minimum and maximum chart sizes, ensuring better layout management. Furthermore, the styling of the PieChart has been refined for improved visual presentation and responsiveness.
This commit introduces a minimum bar height constraint in the LineInBarShape component to ensure visibility for grouped bars. It adjusts the corner radius application based on the height and variant, preventing rendering issues for small bars. Additionally, the y-position is recalibrated to maintain alignment when enforcing the minimum height.
This commit removes the isFirstInStack prop from both the BarChartComponent and LineInBarShape components. The logic for handling stacked bar gaps has been simplified by eliminating the need for this prop, streamlining the code and improving maintainability.
…rChart components This commit updates the opacity of the cursor in the BarChartComponent for improved visibility. Additionally, it refines the minimum height constraints in the LineInBarShape component, introducing separate minimum heights for grouped and stacked bar variants to enhance rendering consistency and visual clarity.
…for consistency This commit reinstates the import of the Charts component in the index.scss file. It also updates various SCSS files to enhance typography and spacing, ensuring a more consistent visual presentation across chart components. Notable changes include adjustments to the opacity in the BarChartComponent, typography settings in the DefaultLegend and Tooltip components, and the addition of a title element in the XAxisTick component for improved accessibility.
This commit removes the gap property from the SideBarTooltip SCSS for improved layout consistency and adds a secondary variant to the close button in the SideBarTooltip component. These changes enhance the visual presentation and usability of the tooltip in chart components.
…sual spacing This commit updates the padding value in the getXAxisTickFormatter function from 0 to 2, enhancing the visual spacing of the XAxis component in BarCharts. This change aims to improve the overall presentation and readability of the chart elements.
This commit updates the left padding value in the AreaChart component from 20 to 25, enhancing the visual spacing and overall layout of the chart elements. This change aims to improve the presentation and readability of the AreaChart.
This commit adjusts the left padding value in the LineChart component from 20 to 25, enhancing the visual spacing and overall layout of the chart elements. This change aims to improve the presentation and readability of the LineChart.
…roved layout and responsiveness This commit refines the styling of the PieChart and RadialChart components by removing fixed width and height properties, allowing for better responsiveness. It also updates the layout management in the StackedLegend component to support show more/less functionality, enhancing user interaction. Additionally, redundant styles have been cleaned up, and the PieChart stories have been updated with improved data representation.
This commit eliminates redundant entries for April and May in the monthly sales data of the PieChart stories, streamlining the data representation and improving clarity in the component's examples.
…culation This commit refines the styling of the RadarChart component by replacing the stroke color with a variable from cssUtils for consistency. Additionally, it enhances the chart size calculation logic for better clarity and readability. Unused PolarGrid properties have been removed to streamline the component's code.
…istency This commit modifies the styling of the StackedLegend and RadarChart components by updating padding values and stroke colors to use variables from cssUtils. The changes aim to enhance visual consistency and improve the overall layout of the chart elements, including adjustments to typography settings for better readability.
…orts This commit refactors the chart components by reorganizing the directory structure, consolidating SCSS files, and updating import paths for consistency. It removes obsolete files related to AreaCharts, BarCharts, LineCharts, PieCharts, RadarCharts, and RadialCharts, streamlining the codebase. The changes enhance maintainability and improve the overall organization of the chart components.
…ct in Tabs styles This commit modifies the corner radius of the RadialChart component from 0 to 10 for improved aesthetics. Additionally, it removes the blur effect from the Tabs component styles to enhance clarity and visual consistency.
…tency This commit modifies the gradient definitions in the AreaChart component by using transformed keys for gradient IDs. This change enhances consistency in the gradient rendering and improves the overall clarity of the chart's visual elements.
This commit adds a background color to the BarChart scroll button and enhances the hover effect by applying the same background color. These changes aim to improve the visual consistency and user experience of the BarChart component.
…rt, and LineChart components This commit updates the documentation for the AreaChart, BarChart, and LineChart components, providing detailed descriptions of their features, usage, and data structure requirements. Additionally, it improves the stories for these components, showcasing various scenarios such as label collision, data density, and responsive behavior. The changes aim to enhance clarity and usability for developers working with these chart components.
…emoving unused props and optimizing calculations This commit refactors the RadarChart and RadialChart components by removing the unused `isLegendExpanded` prop from the AxisLabel component and optimizing the `calculateRadialChartDimensions` function to only require the width parameter. These changes enhance code clarity and maintainability.
abhithesys
approved these changes
Jun 30, 2025
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
3 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.
No description provided.