I have a challenge to create a "Report Builder", which aims to allow the creation of financial reports in a customized way from existing editable components.
I haven't found a library that is able to supply what I need, so I believe that the best thing is to build it in parts. I need some help to architect the application.
The first requirements of Report Builder:
A "page" component for the report
A list of components used for a build the report
(Example of components: Title, Text, Bar Graph, Column Graph, Table)
Each component can be individually editable according to its type
A component can be resizable
You can have more than one component
The component can be dragged on the report page and placed in the desired location
The report must be saved and its editing continued later
An existing project that has something very similar to what I need is FathomHQ Reporting.
Its Reporting is showed in this video: https://www.youtube.com/watch?v=Zz-CpLcBO7M
I'm thinking about using DNDKit (https://dndkit.com/) to drag and drop the report, but I'm still not sure how I can keep track of each individual component, and allow that it can be editable.
If anyone has any library or architectural recommendation for building this project, I'll be glad to hear.
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
How do they do this? I use React.JS and hooks and have online ordering set up, but I wish to do a similar thing where I can style the UI depending on the restaurant.
You can see in the links before, all the online ordering layout is similar but the UI is different for each one.
Thanks
These look like templates to me. You will need some kind of Admin interface from where a user can select the template, as well as information like brand, logo, menu for his website.
Think of something like WordPress, where we select or install a theme for our website and then set up the rest of the website by adding logo, items etc.
So you will definitely need a backend for this to store these values for the individual customers into the database.
You will also need to store the domain name mapped to each template somewhere.
Excellent answer from #vaibhavmande. That is in fact how we do it. (I'm the mobi2go CTO). Here's another sample : https://ghostytoasty.mobi2go.com/. At a basic level you can customize your theme and layout, but you can also customize CSS for each brand. On top of that we actually have a fairly comprehensive javascript framework so orders can be added to a basket without a roundtrip to the server. In some complicated cases we have custom javascript as well (this gives great power but can leave you open to certain bugs). Lots of snapshot testing with https://www.cypress.io/ helps. We're a proud NZ based company but have offices in Australia, North America and Europe. We're also hiring so if you want to learn it all first hand : https://mobi.bamboohr.com/jobs :)
I have to create small simple calendar and attendance list with React and Material-UI. The problem is I am new to React and programming overall so I don't know how to start :/. I know I am rushing my learning process but I recently gain an opportunity to start a practice job in software company and I want to make my best so they can offer my a job.
I have to do following:
Create list with workers(attendance list)
Create a Calendar
When I click on a name, calendar shows if that person was present or not
When I click on a date, calendar shows a name, entry and leave time
Worker's list won't be hard but calendar will :/ I don't ask you to do this. I would appreciate if you would show me the hints and maybe few lines of code.
ps. Only react, js, html and css. UI should be based on Maetrial Design. No jQuery or other frameworks.
Thanks
You can refer to the existing model.
react-big-calendar、react-event-calendar....
You can get them on https://www.npmjs.com/ .
Yes there are number of Material Design widgets. You can check at:
http://www.material-ui.com/#/components/date-picker
If you click on the grey heading of each example- it will show you the equivalent React.js code.
I want to dynamically render a web-based graph to the user such that the user may zoom-in/out, focus on a specific node, choose to display it by different orders (depending on the nodes' attributes etc.
The graph will start with very few nodes but is going to grow fastly as user may add new nodes and edges to it.
Also, please suggest also which database technology is best for your solution to store the nodes,edges and their attributes.
So far I've only encountered http://sigmajs.org/
Let me know if more details are required for you to answer.
We're planning a front end application where you can continuously add/remove UI components in the stage. You can configure them in place and finally can publish the stage (web page).
We’ve an inventory of components. The components are categorized. For example: headers, sidebars. In the inventory they will show a preview (may be an image) of the available components in that category.
An item can be added to the stage (traditionally a simple web page) from the inventory. The stages are related to inventory categories. For example, in the stage, there is one “headers containers” where you can add component only for headers inventory.
Each category may have own rule. For example, You can’t add more than one component in the in “headers containers” (which is in the stage/page) from headers inventory category. However, you can add as many item as you want in the “sidebar containers”.
In the same way, each component may have own rules. Each component may render differently and may have different configuration option. For example, you add an header component from “headers inventory” which has logo, background image. But another may not have background image. Unless a component has a feature (e.g. background image), it won’t be available in the configuration panel.
All of the above components will always work except previewing in inventory. That means, as soon as they’re added to stage, they’re live element, they should work as they should with default settings (unless configured). They will communicate in the backend services to get/save data.
Persisting data: We also want to persists data among the switching of the components (of same type). For example, if you add one header component added on the stage which you configured to have own your logo, switching to another header component (which also has support for logo) should keep the old selected logo.
I am also thinking it will be very good if we can everything a component. For example, logo is a component, background image is a component. Each of them should work independently, with own configurator (file upload button for logo component), validation (check file types for logo component) etc.. The previously mentioned each header component will be container of several components which can hold any number of components and can work as bridge among those components (like merging all the configuration in the same interface rather than individually).
My current thoughts are:
Backbone.js
jQuery UI Widget Factory
But both will require lots of fundamental job at our end. Is there any framework/library that already solved most or some of the problems we’re trying to solve. I am not sure whether Angular.js directive based solution will be good here too. Any suggestion towards that is highly appreciated
If I understand you correctly you want to build a dashboard like functionality. Try taking a look at sDashboard https://github.com/ModelN/sDashboard or commercial options like droptiles http://www.droptiles.com/ or razorflow http://razorflow.com/