iamleson98 / graph-maker-front-end

users can create charts they want with a sophisticated user interface and save them for later use.

Features

1. Multi languges support (English, Vietnamese, Chinese)
2. Draw charts quickly as user fill in the chart data form
3. Save chart data in database or as png files so users can view them later
4. 5 chart popular chart types supported
   1. area
   2. scatter
   3. line
   4. bar
   5. pie (doughnut)

Design file

Figma link

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

contribution guide

Please create a pull request and i will review it as soon as possible Thank you!

graph-maker-front-end's Issues

[Feature request] Support more import methods & HTML export

List of requesting features

Feature	Description
CSV, Google Sheet import	Can import data by CSV file or Google Sheet
HTML Exporter	Export chart with nice format & animation in HTML

Problems

Working with chart = working with data, A-LOT-OF-DATA.
So the first problem is UX friendly. Is the UI with lots of input-fields friendly with user in this case? Absolutely not.
Then the most pressing global issue today is....

1. Support CSV, Google Sheet Import

• Life will be easier
• UI will be simplier
• User will be happier
• More way to import = more user traffic

2. HTML Exporter

• One of website chart rendering advantages compare with boring-traditional chart maker (Excel, Docs...) is animation or better UI.
• ChartJS already help you with the better UI, right?
• Then you should take advantage in animated chart in presentation

Solution

1. CSV, Google Sheet import

• For CSV there are many library to convert CSV file => array object or something similar
• Google has published Drive API for centuries. You should look into their documentation

2. HTML Exporter

• Setting up a backend API to push your user input chart data, user chart config
• That API will retrieve those information & parse in pre-defined HTML chart template at backend.
• Package or zip needed resources into 1 HTML or zip file. Then we will send it back to user.