Visit OrangeDepth to explore the website
Welcome to OrangeDepth°, where citrus meets data mastery. This innovative web application is crafted with Vue.js to offer a seamless and interactive experience for data enthusiasts and citrus lovers alike.
- Multiple Chart Types: Explore data with bar, doughnut, and scatter charts.
- Interactive Data Visualizations: Click and interact with the charts, offering a dynamic user experience similar to professional data analysis tools.
- Responsive Design: Optimized for both desktop and mobile devices, ensuring accessibility and ease of use from anywhere.
- Local Storage Integration: Data configurations and settings are preserved between sessions, ensuring a consistent experience.
- Animations and Interactivity: Smooth transitions and responsive interactions enhance the user experience.
- Chart Navigation: Switch between various types of charts using the navigation menu to explore different datasets.
- Interactive Elements: Hover over data points to see detailed information; click elements to drill down into deeper analysis.
- Dynamic Data Loading: Data is dynamically loaded and rendered as you interact with the application.
- The application features a modern and clean design that emphasizes readability and user interaction.
- Active data points and chart segments are highlighted to help users focus on important details.
- Custom-designed UI components are tailored specifically for data interaction.
- : Powers the reactive and interactive user interfaces.
- : Provides a fast development environment and optimized build tooling.
- : Enhances CSS with more powerful styling capabilities.
- : Offers type safety for reliable code.
- AG-Grid: Provides a high-performance grid system that is both customizable and extensible.
- Chart.js: Enables the creation of dynamic and animated charts with ease.
- PrimeVue: Supplies a rich set of UI components tailored for Vue applications.
- VueUse Motion: Offers a robust solution for managing animations and transitions within Vue.
- Vue Router: Manages navigation within the application.
- Background videos are sourced from Pexels.
- All images, icons, and logos were generated using OpenAI's DALL-E 3.
To launch OrangeDepth° locally, follow these steps:
cd OrangeDepth/
npm install
npm run dev