(The Source Code will not be given, only the component is the deliverable)
DataStudio Pro transforms your raw data files into a fully interactive analytics dashboard, right inside your Framer project. Drop in a CSV or Excel file, and the component automatically detects your columns, classifies them as dimensions or metrics, and puts a complete charting interface at your fingertips, no external APIs, no databases, no code.
Flexible Visualization: Switch between Bar, Line, Area, and Pie charts on the fly. Choose your X-axis dimension and Y-axis metric from auto-detected columns, then apply Sum, Average, Count, Min, or Max aggregation to explore the data from any angle.
Smart Data Controls: Sort results ascending, descending, or alphabetically. Filter down to the Top 10, Top 20, or show everything. The aggregation engine is fully memoized, so even large datasets stay snappy.
Responsive by Design: The layout adapts automatically between a desktop sidebar and a mobile slide-out drawer, detected via a ResizeObserver, no breakpoints to configure.
Themeable and On-Brand: Control primary color, panel color, background, text color, corner radius, font family, and a dedicated dark mode toggle, all from the Framer properties panel.
Export Ready: A one-click PNG export (powered by html2canvas at 2× resolution) lets users save any chart view directly from the published site.
Supported File Types: .csv, .xlsx.
Sajjadul Kibria
