Skip to content

feat: add AI Chart Creation#1290

Open
HardeepAsrani wants to merge 2 commits intodevelopmentfrom
feat/ai-chart
Open

feat: add AI Chart Creation#1290
HardeepAsrani wants to merge 2 commits intodevelopmentfrom
feat/ai-chart

Conversation

@HardeepAsrani
Copy link
Member

Summary

This PR adds an AI wizard to Visualizer.

  • Adds an AI-powered chart builder alongside the classic wizard, with a chooser modal for new charts.
  • Introduces a React-based AI Builder flow with data import, prompt presets, reference image support, and D3 live preview.
  • Supports D3 rendering + PNG export, plus fullscreen preview and manual code editing.
  • Unifies data import (CSV/URL/JSON/DB) using existing source classes and improves error handling.
  • Adds optional data extraction flow (CSV) when requested from reference images.

Will affect visual aspect of the product

YES/NO

Screenshots

Screenshot 2026-03-26 at 12 52 31 AM

Test instructions

  • Make sure all the features work.

Check before Pull Request is ready:

Closes https://github.com/Codeinwp/visualizer-pro/issues/577, https://github.com/Codeinwp/visualizer-pro/issues/571.

@pirate-bot pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Mar 25, 2026
@pirate-bot
Copy link
Contributor

Plugin build for dcd36bd is ready 🛎️!

Comment on lines +52 to +80
// ── Upload helpers ─────────────────────────────────────────────────────────────

/** Build a FormData for any upload call, including the per-chart upload nonce. */
function uploadForm( action, chartId, uploadNonce, fields = {} ) {
const form = new FormData();
form.append( 'action', action );
form.append( 'nonce', uploadNonce );
form.append( 'chart_id', chartId );
for ( const [ key, val ] of Object.entries( fields ) ) {
if ( val !== null && val !== undefined && val !== '' ) {
form.append( key, val );
}
}
return form;
}

async function uploadFetch( form ) {
const res = await fetch( ajaxUrl, { method: 'POST', body: form } );
let json;
try {
json = await res.json();
} catch {
throw new Error( 'Server returned an unexpected response.' );
}
if ( ! json.success ) {
throw new Error( json.data?.message || 'Upload failed.' );
}
return json.data;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that there are two functions with the same structure for fetch: uploadFetch and post; post also contains some elements from uploadForm.

I think we can only use post.

/** Upload a remote CSV/XLSX URL. Returns { series, data }. */
export async function uploadFileUrl( chartId, uploadNonce, url, schedule = '' ) {
	return post( 'visualizer-ai-upload', {
        chart_id: chartId,
        nonce: uploadNonce, 
		source_type: 'file_url',
		file_url:    url,
		schedule:    schedule,
	} );
}

@ineagu
Copy link
Contributor

ineagu commented Mar 26, 2026

a small thing @HardeepAsrani , can we show manual data in a table like format? vs csv like?

@Soare-Robert-Daniel
Copy link
Contributor

Soare-Robert-Daniel commented Mar 26, 2026

@HardeepAsrani just some toughts about the UI:

  • For those icons, I think you can make the padding a little bigger since they are too close to the edge. It looks a bit unbalanced to me.
CleanShot 2026-03-26 at 08 43 49@2x CleanShot 2026-03-26 at 08 45 29@2x
  • You can reduce the space on Step 2 to make things more compact
CleanShot 2026-03-26 at 08 46 13@2x

@ineagu
Copy link
Contributor

ineagu commented Mar 26, 2026

some more feedback @HardeepAsrani https://www.loom.com/share/1cafed8651d84b229e39c001c9ac35af. for manual code we can have a doc telling people that they can explore different ai systems to enhance that or manually tweak it

@HardeepAsrani
Copy link
Member Author

@ineagu

@ineagu
Copy link
Contributor

ineagu commented Mar 26, 2026

okay, the classic editor has table like editing, but is not a big deal.

on the design, promt and models would be great that when we are trying to build ai features we can have a simple custom eval benchmark playground, I setup one that I exposed with you locally so I can see what's going on.

Screenshot 2026-03-26 at 09 56 09

promt can use the frotend skill from claude on top of what you have + trying a newer model.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pr-checklist-complete The Pull Request checklist is complete. (automatic label)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants