DO-Graphs 📊

DO-Graphs is a powerful, low-code React package designed to help developers create, manage, and deploy dynamic dashboards and graphs with ease. Stop hardcoding charts—start designing them.

🚀 Why Choose DO-Graphs?

Managing dashboards in large React applications often leads to massive, unmaintainable components. DO-Graphs solves this by providing a drag-and-drop interface and a dynamic configuration system.

• Dynamic by Design: Change chart types, colors, and data sources in real-time without touching the code.
• Low-Code Customization: Use our built-in UI to design pages, then render them instantly in your app.
• Rich Visualization: Supports Bar, Line, Pie, Doughnut, Mixed, Polar Area, Scatter, and more.
• Seamless Integration: Built on top of Chart.js and React-Grid-Layout for performance and reliability.

✨ Key Features

1. Dynamic Chart Type Switching

Switch between visualization modes (e.g., Bar to Line) instantly. The package automatically sanitizes configurations to ensure your dashboard never crashes.

2. Multi-Filter Support

Apply complex filters to your data directly from the UI. Support for multiple filter rows ensures your users can drill down into the data they need.

3. Smart India State Mapping

Built-in intelligence to handle Indian state data. Automatically map state abbreviations and full names to ensure consistent reporting across regions.

4. Interactive Sidebar & Menu

Easily organize your chart pages with a dynamically generated sidebar that adapts to your backend configuration.

🛠 Installation

npm install @msrajawat298/do-graphs

📖 Quick Start Guidance

1. Configure your Dashboard

Use the CustomDashboard component to provide a management interface for your dynamic pages.

import { CustomDashboard } from '@msrajawat298/do-graphs';

const MyDashboardManager = () => (
  <CustomDashboard 
    routeBackendUrl="https://api.yourdomain.com/layouts" 
    isMenuLayoutPresent={true} 
    headers={{ Authorization: 'Bearer ...' }} 
  />
);

2. Render Dynamic Pages

Use the Layouts component to display the charts in your application routes.

import { Layouts } from '@msrajawat298/do-graphs';

// In your Router
<Route 
  path="/my-dynamic-page" 
  element={<Layouts title={pageData.title} html={pageData.element} menuId={pageData.menu_id} />} 
/>

📊 Supported Chart Types

| Chart Type | Best For | Features | | :--- | :--- | :--- | | Bar / Horizontal Bar | Comparisons | Stacking, Multi-dataset | | Line / Mixed | Trends Over Time | Smooth curves, combined Bar/Line | | Pie / Doughnut | Proportions | Datalabels, Hover effects | | Polar Area | Cyclical Data | Area scaling | | Scatter | Correlation | X/Y Coordinate mapping | | Progress / Table | KPI Metrics | Custom thresholds, Tabular data |

🛡 Performance Optimization

This package implements a "Preview-on-Change, Save-on-Click" pattern. This ensures that even with large datasets and complex dashboards, the UI remains fluid and responsive during the configuration phase.

📄 License

Distributed under the MIT License. See LICENSE for more information.

Built with ❤️ by Mayank Singh Kushwah