Allow user to refine recharts API output

[merrillcook0]

Love the premise of Chart GPT. There's a solid gap between graphic output of BI tools / Excel / Tableau / interactive custom-made graphics (D3 etc) and literally making a chart design (Figma, etc).

This is from a marketing perspective. And feel free to ignore. But I think this would be true in many situations: the workflow for many genAI tools is they get you "80% there" then you fine-tune (often manually).

A similar ability for Chart GPT might be something like an edit button that appears when a chart is rendered. Depending on the type of chart the user then has a series of inputs corresponding with everything that can be edited about the chart via Recharts.

If the chart comes out perfect the first time, great. If it's all there except one label that needs to be moved, or you would like to change the font, a downloaded PNG or copied SVG code is actually a bit of a hassle to then edit and get a chart from 80% to 100%.

[merrillcook0]

@whoiskatrin I would be happy to try implementing this. I might need some advice on a few choices.

[uttej-vsk]

Love the premise of Chart GPT. There's a solid gap between graphic output of BI tools / Excel / Tableau / interactive custom-made graphics (D3 etc) and literally making a chart design (Figma, etc).

This is from a marketing perspective. And feel free to ignore. But I think this would be true in many situations: the workflow for many genAI tools is they get you "80% there" then you fine-tune (often manually).

A similar ability for Chart GPT might be something like an edit button that appears when a chart is rendered. Depending on the type of chart the user then has a series of inputs corresponding with everything that can be edited about the chart via Recharts.

If the chart comes out perfect the first time, great. If it's all there except one label that needs to be moved, or you would like to change the font, a downloaded PNG or copied SVG code is actually a bit of a hassle to then edit and get a chart from 80% to 100%.

Hi @merrillcook0 - This is a good suggestion. However, just to be on same page, you are saying that we need to have an edit button to the resulted chart so that we refine it and get it what we wanted?

OR

You want the idea of keeping the existing input on the text area and then after generating the chart, you need to update the GET request to modify the prompt so that we get updated chart?

[uttej-vsk]

Also, one suggestion is to make the issue title as descriptive as possible so that we can get 80% information by looking at it. Similar to user story writing either in Jira or any other project management tools.

@whoiskatrin - Do you suggest we need to have a contribution guidelines in detail so that everyone would follow similar paradigms?

Also, do you think we need to have coding standards to be followed with respect to naming conventions, design patterns, using certain linters like ESLint etc so that every incoming commit has similar structure?

[merrillcook0]

@uttej-vsk - in your first comment above you get at the main choice we have here.

An initial take on the pros and cons here could be:

Edit the result chart to refine it

Pros

• download button works as intended if the rendered SVG is changed on page
• easiest to initially set up and assess value of change
• no additional API calls

Cons

• Can't make use of rechart API methods.
• Can edit text but editing actual values that are computed onto canvas likely not feasible

Edit the chart via GET request to Recharts API

Pros

• Full use of rechart API methods
• Can change chart values and text

Cons

• More convoluted editor interface (for example, what is a suitable editor that allows editing of the appropriate data fields for each chart type?)
• Additional API calls

I would err towards the first option as it seems lower complexity and then we can assess if this is actually a useful addition.

Also, noted about the issue title, edited.

[Shifat7]

Leaving my 2 cents here, to make the chart editable, React-D3 would be the best course of action as the visualizations can be modified on the front-end using a few buttons/re-prompting GPT to produce D3 code instead to visualize the graph and then reprompt the GPT API to 'change' the D3 code for the aforementioned changes. The latter method might also output more unstable graphs since the code it will make might not be accurate 100% though so assess the tradeoffs.