uild a responsive data dashboard with a dropdown labeled “View” that allows users to group data by Policy year, Policy quarter, Line of business, Product, Program, State, or Country. Add a second filter labeled “Filter” with options Top 5 and Bottom 5 to display the top or bottom performing categories within the selected view. Below the filters, include a toggle control that allows users to switch between a stacked bar chart view and a full table view.
In chart view, display a fixed-height stacked bar chart that adapts to the selected "View" and "Top/Bottom" filters. Use muted, colorblind-friendly tones for clarity. Bars should support tooltips on hover, and segments should be labeled if space allows.
In table view, show a full data table with sortable columns for category, year, and value, matching the filters applied. Include an export CSV button and highlight the top or bottom 5 rows if the corresponding filter is selected.
💡 Optional Enhancements
Use subtle animation when switching views.
Place “All Years Total” or “Summary” metrics above the chart/table in a dedicated header.
Keep axis scaling consistent between Top/Bottom views for fair comparison.
I'll create a responsive dashboard with the requested filtering capabilities and visualization options.
I've created a responsive insurance data dashboard with the following features:
Stacked Bar Chart:
The implementation uses shadcn/ui components for the UI elements and Recharts for the visualization, providing a clean, professional look with good accessibility.
Update this page and apply these chart mechanics to the final chart.
Under view, the options are: policy year, policy quarter, line of business, product, sub product and state.
Under group by, the options are top 5, bottom 5 and none. When a user selects none, the chart automatically gets toggled to table view.
Under type the options are written basis and earned basis
I'll update the dashboard with the requested chart mechanics and filtering options.
I've updated the insurance dashboard with the requested chart mechanics and filtering options:
View By Dropdown
Group By Dropdown (renamed from "Filter")
New Type Dropdown
These changes provide a more comprehensive filtering system while maintaining the dashboard's responsive design and user-friendly interface.