Introduction

Do Graph is an open source package used to build/create/design dynamic graphs for your react project.

Installation

npm i do_graphs --save

Components

1. CustomDashboard: Dashboard to display and create list of dynamic chart pages.
2. LayoutPages: Page layout design using in-built charts and configure as per your requirement.
3. Layouts: View Dynamic created pages in your app. Use this component in your root/main file i.e, App.js.

Functions

1. getRoutLists: Fetch dynamic pages and list it using CustomDashboard component.
2. getMenuList: Fetch dynamic menu and list it using CustomDashboard component.

Props

1. CustomDashboard: a. routeBackendUrl: (mandatory) backend url of list of dynamically created route pages. b. isMenuLayoutPresent: (mandatory) true if your app has side menu bar. c. headers: (optional) API headers.

2. LayoutPages: a. routeBackendUrl: (mandatory) backend url of list of dynamically created route pages. b. menuBackendUrl: (mandatory) backend url of list of dynamically created menu. c. frontendUrl: (mandatory) frontend url of your application. d. headers: (optional) API headers.

Implementation

Use Layouts component in your App.js file to add dynamically ceated pages in your app. Example:

import { RouteContext, getRoutLists, getMenuList, Layouts, CustomDashboard, LayoutPages } from 'do_graphs';

const App = () => {
    const [routePages, setRoutePages] = useState([])
    const [menu, setMenu] = useState([])
    const getRoutes = async () => {
        const result: any = await getRoutLists(backendUrl, config) // return the list of pages from backend
        setRoutePages(result)
    }
    const getMenus = async () => {
        const result: any = await getMenuList(backendUrl, config) // return the list of menu from backend
        if (result?.length > 0) {
            setMenu(result)
        } else {
            setMenu([])
        }
    }
    useMemo(() => {
        getRoutes()
        getMenus()
    }, [])
    return (
        <RouteContext.Provider value={{ routePages, setRoutePages, menu, setMenu }}>
            <Route path={'/custom_layout'} element={<CustomDashboard routeBackendUrl={routeBackendUrl} isMenuLayoutPresent={isMenuLayoutPresent} headers={headers} />} />
            <Route path={'/layout/:id'} element={<LayoutPages routeBackendUrl={CustomRouteUrl} menuBackendUrl={CustomMenuUrl} frontendUrl={Frontend} headers={headers} />} />
            {routePages?.length > 0 && routePages?.map((it: any, n: number) => (
                <React.Fragment key={n}>
                  <Route path={it.path} element={(<Layouts title={it?.title} html={it?.element} menuId={it?.menu_id} />)} />
                </React.Fragment>
            ))}
        </RouteContext>
    )
}

export default App;