A modern, responsive data exploration and analysis tool built with React, TypeScript, and Tailwind CSS. The application lets users load, visualize, analyze, and manipulate tabular data with an intuitive interface.
- Data Loading: Import data from local CSV files or URLs
- Interactive Data Table: View, sort, and navigate through data with pagination
- Data Summary: Get quick insights with statistical summaries
- Univariate Statistics: Analyze individual columns with detailed statistics
- Column Renaming & Type Conversion: Modify column names and data types
- Visualization: Generate interactive charts for data exploration
- Dark/Light Theme: Seamless theme switching for comfortable viewing
- Responsive Design: Works on desktop and mobile devices
- Export Functionality: Save modified data as CSV files
The root component that sets up the app structure and ErrorBoundary.
The main container component that conditionally renders data visualization components when data is loaded.
DataLoader.tsx
: Manages file/URL uploads with toggle between browse mode and URL modeDataTable.tsx
: Displays tabular data with pagination and export functionalityDataSummary.tsx
: Shows dataset statistics including row/column counts, null values, data typesUnivariateStats.tsx
: Provides detailed statistics for individual columnsChartModal.tsx
: Visualizes column data with appropriate chart types
TitleBar.tsx
: App header with theme toggle and navigationButton.tsx
: Reusable button component with various stylesFileBrowser.tsx
: Component for selecting and processing CSV filesFetchUrl.tsx
: Component for entering and processing data URLsRenameColumnDialog.tsx
: Modal for renaming columns and changing data typesSettingsDialog.tsx
: Modal for configuring app settingsRadioCheckbox.tsx
: Custom toggle component for selecting input methodsErrorBoundary.tsx
: React error boundary for graceful error handling
The app uses React Context for global state management:
DataContext.tsx
: Manages the DataFrame state across componentsSettingsContext.tsx
: Handles app configuration like rows per page, column widthThemeContext.tsx
: Controls light/dark theme switching
Located in the utility/
directory:
FileUtility.ts
: Functions for file validation and CSV parsingDfUtility.ts
: DataFrame utility functions for type conversion, duplicates detectiondataLoaderReducer.ts
: Reducer for managing the data loading state machine
Located in the hooks/
directory:
useData.tsx
: Access the DataFrame contextuseSettings.tsx
: Access and update app settingsuseTheme.tsx
: Control the app's themeuseColumnStats.tsx
: Calculate statistics for individual columnsuseDataStats.tsx
: Calculate dataset-wide statistics
The app uses Tailwind CSS for styling with a consistent design system:
- Color Palette: Based on zinc color scale for a clean, professional look
- Typography: Uses Montserrat for headings and monospace fonts for data display
- Responsive Design: Mobile-first approach with responsive breakpoints
- Custom Components: Styled buttons, tables, and form elements
The app features a comprehensive dark/light theme implementation:
- Theme preference is saved in localStorage
- Auto-detects system preference when no saved preference exists
- Smooth transitions between themes
- Dark theme optimized for reduced eye strain with careful color selection
- Custom Scrollbars: Enhanced scrollbar styling for better usability
- Data Tables: Fixed header tables with optimized column widths
- Form Controls: Consistent styling across inputs, buttons, and selectors
- Modal Dialogs: Clean, focused dialog boxes for settings and operations
- Tooltips: Contextual information display for better user experience
- React: Functional components with hooks for state management
- TypeScript: Strong typing throughout the application
- Danfojs: JavaScript data analysis library (similar to pandas)
- Plotly.js: Interactive data visualization
- Vite: Fast, modern build tool and development server
- Error Handling: Comprehensive error boundaries and user-friendly messages
- Performance Optimization: Memoization of calculations and renders
- Clone the repository
- Install dependencies with
npm install
orpnpm install
- Run the development server with
npm run dev
orpnpm dev
- Build for production with
npm run build
orpnpm build
- Load a CSV file using the file browser or URL input
- Explore the data table with pagination controls
- View dataset summary statistics
- Select columns in the Univariate Statistics panel to analyze
- Generate visualizations using the Chart button
- Rename columns or change data types as needed
- Export modified data to CSV for further use
git subtree push --prefix build origin gh-pages