do_graphs

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

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

Functions

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

Props

• 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.

• 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;