Dashboard

Great Work! Thanks for sharing.

Awesome work Sangita! Thanks for sharing!

Thank you - this is super helpful. 

One update: the password now seems to require a number, so just add a 1 to the example: "MSSQL_SA_PASSWORD=MyPass@word1" 

Here's a video tutorial on resizing and compressing image. This also involves a lot of JavaScript and working with file and dataUrls. 
https://youtu.be/sq2e6nuhb2M

UPDATE: Here's one more method, using Python in Google Colab,

https://blog.greenflux.us/extracting-all-images-from-a-google-doc-using…

This is a great exploration of how we can embed a OpenAI Chat Assistant directly into appsmith experience to feed live data directy into  a multitude of echarts.  I was able to pretty quickly connect to Jira REST API.  

Assistant Instructions (note... I adjusted the results to return JUST the logic within the generateCode function.):

You are a wizard at Javascript, and charts, and echarts.apache.org.   Your job is to help Appsmith users write javascript to transform their JSON data into an option object to feed a chart using apache echarts. The user will provide a few sample rows of data, and ask for a specific type of echart. Reply with a json object containing the javascript to generate the chart.
Given this data:
[
{ day: 'Mon', value: 150 },
{ day: 'Tue', value: 230 },
{ day: 'Wed', value: 224 },
{ day: 'Thu', value: 218 },
{ day: 'Fri', value: 135 },
{ day: 'Sat', value: 147 },
{ day: 'Sun', value: 260 }
]
___
If the user asks for a line graph then the option object should be:
{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
___
So you would return a function to help them generate that dynamically when the data changes, like this:
generateOption(dataArray) {
const xAxisData = dataArray.map(item => item.day);
const seriesData = dataArray.map(item => item.value);
return {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
data: seriesData,
type: 'line'
}
]
};
}
___
leave out the function keyword because the code will be stored in an object. Reply with only Javascript code that will generate the appropriate response:
```
const dataArray=JiraAPI_Issues_GET.data.issues;
// Group the data by nationality
const natGroups = dataArray.reduce((acc, user) => {
if (!acc[user.nat]) {
acc[user.nat] = [];
}
acc[user.nat].push(user.location.country);
return acc;
}, {});
// Prepare nodes and links for the Sankey diagram
const nodes = [];
const links = [];
const addedNodes = new Set();
// Add nationality nodes and country nodes with corresponding links
for (const [nat, countries] of Object.entries(natGroups)) {
if (!addedNodes.has(nat)) {
nodes.push({ name: nat });
addedNodes.add(nat);
}
countries.forEach(country => {
const countryNat = `${country} (${nat})`;
if (!addedNodes.has(countryNat)) {
nodes.push({ name: countryNat });
addedNodes.add(countryNat);
}
links.push({ source: nat, target: countryNat, value: 1 });
});
}
return {
series: [
{
type: 'sankey',
data: nodes,
links: links,
}
]
};
```
___
always include dataArray=JiraAPI_Issues_GET.data.issues as the default param unless another query name is requested by the user.

The resulting code can then be evaluated and run as a dynamic function)

export default {

	extractJavaScriptCode(codeSample) {
		// Define the start and end delimiters for JavaScript code
		const jsStart = "```javascript";
		const jsEnd = "```";

		// Find the start and end positions of the JavaScript code
		const start = codeSample.indexOf(jsStart) + jsStart.length;
		const end = codeSample.indexOf(jsEnd, start);

		// Extract and trim the JavaScript code
		if (start >= jsStart.length && end > start) {
			return codeSample.substring(start, end).trim();
		}
		return null; // Return null if JavaScript code block is not found
	},
	
	async checkMessages() {
    	setInterval(async () => {
        	await OpenAI_4_GetMessages_GET.run();

        	if (OpenAI_4_GetMessages_GET.data.data[0].role === 'assistant' && OpenAI_4_GetMessages_GET.data.data[0].content[0].text.value) {
				this.run_code(Text11.text);  // *** This will RUN the resulting code from AI assist
            	clearInterval('msg_checker');
            	return;
        	}
    	}, 3000, 'msg_checker');
	},
	
	stop_interval(strInterval = 'msg_checker') {
		clearInterval(strInterval);
	},
	
	run_code(strInstructions = Text11.text) {
		var theInstructions = this.extractJavaScriptCode(Text11.text);
		var F=new Function (theInstructions);

		return(F());
	},
};

The idea of using emojis as array elements is great!

Its a very interesting articles and show all the crud around it.
But when the file exceed 5mb it stoping to work like this. How to do it?

Looks good, thanks

This is exactly what I need.Straight to the point with no filler to waste my time. A+

Thanks for the tutorial!

"you can also us git diff" -> use

Plus what Thomas said.

Great improvement. Can you tell us an approximate release date?

Hola Oscar, quiero empezar con algo sencillo, una pantalla para visualizar datos de una tabla, una aplicación CRUD,
También necesito información sobre la versión comunitaria para desarrollar y desplegar aplicaciones.
Si es necesario bajar una un software para empezar a desarrollar.
Lo que necesito es un tutorial en español
Muchas Gracias!

Sanjiv Anand, thank you for your excellent contribution

Hi Joseph and team,

Great starting point. Unlike other templates, I only seem to be able to run the preview. Is it possible to obtain the template within my own Appsmith dev environment ?

Thanks

Simon

Cool stuff, Joseph.  That was very 'followable' !!

@Ron, just a comment, there is a small bug in the Query "addMessage", the history of the chat is referenced as: {{chat.chatHistory}}, but is has to be {{chat.history}}.

Besides this, the template is perfect!

Thanks for this!

Is it meta or just lazy when using AI to generate an image for an AI tutorial?

Asking for a friend...