Dynamic Graph Dashboard - Copy this Html, Bootstrap Component to your project

I want to create a dynamic graph dashboard where there will be a left navigation menu and an empty container on the right. The left navigation will contain a list of graph types such as area, bar, funnel, and others. Users should be able to drag any of these graph types from the left navigation and drop them into the empty container on the right. Once a graph is dropped, it should appear in the container and automatically display data, either predefined or randomly generated, relevant to the type of graph. Each graph should be resizable, allowing the user to adjust its size by dragging the edges of the graph. Additionally, when multiple graphs are dropped into the container, the user should be able to drag and drop them within the container to reorder their layout. The graphs should be individually manageable, meaning each graph can be resized and reordered independently, without affecting the others. Each graph should also have "Edit" and "Delete" buttons located at the top right corner. The "Edit" button will allow the user to modify the graph's data or type, while the "Delete" button will remove the graph from the container. Additionally, there will be a "Save" button at the bottom of the left navigation menu. When the user clicks on this button, the current state of the graphs, including their size, order, and any edits made, should be saved. When the page is refreshed, the graphs should retain their saved size, order, and any changes, ensuring the layout remains unchanged.