From c8acfbc1ff0f6c23e5a2229ca83a3b09eec826c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?= <43071496+adam-kov@users.noreply.github.com> Date: Wed, 19 Apr 2023 22:46:00 +0200 Subject: [PATCH] fix(frontend): Update app default codes (#1432) * fix(frontend): Update app default codes * remove console log --- .../apps/editor/component/default-codes.ts | 592 +++++++++++------- .../EmptyInlineScript.svelte | 2 +- 2 files changed, 366 insertions(+), 228 deletions(-) diff --git a/frontend/src/lib/components/apps/editor/component/default-codes.ts b/frontend/src/lib/components/apps/editor/component/default-codes.ts index 4c136dd855..d9e9bc04ee 100644 --- a/frontend/src/lib/components/apps/editor/component/default-codes.ts +++ b/frontend/src/lib/components/apps/editor/component/default-codes.ts @@ -5,7 +5,10 @@ export function defaultCode(component: string, language: string): string | undef } export const DEFAULT_CODES: Partial< - Record> + Record< + AppComponent['type'], + Partial> + > > = { tablecomponent: { deno: `export async function main() { @@ -34,42 +37,63 @@ export const DEFAULT_CODES: Partial< "name": "A briefer cell", "age": 84 } - ]` + ]`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return query.rows; +}` }, textcomponent: { deno: `export async function main() { -return "foo" + return "foo" }`, python3: `def main(): -return "foo"` + return "foo"` }, barchartcomponent: { deno: `export async function main() { -return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Bar", - "Charts", - "<3" - ] -} + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Bar", + "Charts", + "<3" + ] + } }`, python3: `def main(): -return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Bar", - "Charts", - "<3" - ] + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Bar", + "Charts", + "<3" + ] + }`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: query.rows.map((row) => row['0']), + labels: query.rows.map((row) => row['1'].slice(0, 6)) + }; }` }, displaycomponent: { @@ -85,243 +109,357 @@ return { }, htmlcomponent: { deno: `export async function main() { -return \` -

-Hello world -

\` + return \` +

+ Hello world +

\` }`, python3: `def main(): -return ''' -

-Hello world -

'''` + return ''' +

+ Hello world +

'''` }, vegalitecomponent: { deno: `export async function main() { -return { - data: { - values: [ - { a: "A", b: 28 }, - { a: "B", b: 55 }, - { a: "C", b: 43 }, - { a: "D", b: 91 }, - ], - }, - mark: "bar", - encoding: { - x: { field: "a", type: "ordinal" }, - y: { field: "b", type: "quantitative" }, - }, -} + return { + data: { + values: [ + { a: "A", b: 28 }, + { a: "B", b: 55 }, + { a: "C", b: 43 }, + { a: "D", b: 91 }, + ], + }, + mark: "bar", + encoding: { + x: { field: "a", type: "ordinal" }, + y: { field: "b", type: "quantitative" }, + } + } }`, python3: `def main(): -return { - "data": { - "values": [ - { "a": "A", "b": 28 }, - { "a": "B", "b": 55 }, - { "a": "C", "b": 43 }, - { "a": "D", "b": 91 }, - ], - }, - "mark": "bar", - "encoding": { - "x": { "field": "a", "type": "ordinal" }, - "y": { "field": "b", "type": "quantitative" }, - }, + return { + "data": { + "values": [ + { "a": "A", "b": 28 }, + { "a": "B", "b": 55 }, + { "a": "C", "b": 43 }, + { "a": "D", "b": 91 }, + ], + }, + "mark": "bar", + "encoding": { + "x": { "field": "a", "type": "ordinal" }, + "y": { "field": "b", "type": "quantitative" }, + }, + }`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: { + values: query.rows.map((row) => { + row['1'] = row['1'].slice(0, 6); + return row; + }) + }, + mark: "bar", + encoding: { + x: { field: "1", type: "ordinal" }, + y: { field: "0", type: "quantitative" }, + } + }; }` }, plotlycomponent: { deno: `export async function main() { -return { - type: 'bar', - x: [1, 2, 3, 4], - y: [5, 10, 2, 8], - marker: { - color: '#C8A2C8', - line: { - width: 2.5 + return { + type: 'bar', + x: [1, 2, 3, 4], + y: [5, 10, 2, 8], + marker: { + color: '#C8A2C8', + line: { + width: 2.5 + } } - } -}; + }; }`, python3: `def main(): -return { - "type": "bar", - "x": [1, 2, 3, 4], - "y": [5, 10, 2, 8], - "marker": { - "color": "#C8A2C8", - "line": { - "width": 2.5 + return { + "type": "bar", + "x": [1, 2, 3, 4], + "y": [5, 10, 2, 8], + "marker": { + "color": "#C8A2C8", + "line": { + "width": 2.5 + } } - } + }`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + type: 'bar', + x: query.rows.map((row) => row['1'].slice(0, 6)), + y: query.rows.map((row) => row['0']), + marker: { + color: '#C8A2C8', + line: { + width: 2.5 + } + } + }; }` }, piechartcomponent: { deno: `export async function main() { -return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Pie", - "Charts", - "<3" - ] -} + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Pie", + "Charts", + "<3" + ] + } }`, python3: `def main(): -return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Pie", - "Charts", - "<3" - ] + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Pie", + "Charts", + "<3" + ] + }`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: query.rows.map((row) => row['0']), + labels: query.rows.map((row) => row['1'].slice(0, 6)) + }; }` }, scatterchartcomponent: { deno: `export async function main() { -return [ - { - "label": "foo", - "data": [ - { "x": 25, "y": 50 }, - { "x": 23, "y": 23 }, - { "x": 12, "y": 37 } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { "x": 32, "y": 32 }, - { "x": 25, "y": 42 }, - { "x": 3, "y": 27 } - ], - "backgroundColor": "orange" - } -] + return [ + { + label: "foo", + data: [ + { x: 25, y: 50 }, + { x: 23, y: 23 }, + { x: 12, y: 37 } + ], + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: [ + { x: 32, y: 32 }, + { x: 25, y: 42 }, + { x: 3, y: 27 } + ], + backgroundColor: "orange" + } + ]; }`, python3: `def main(): -return [ - { - "label": "foo", - "data": [ - { "x": 25, "y": 50 }, - { "x": 23, "y": 23 }, - { "x": 12, "y": 37 } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { "x": 32, "y": 32 }, - { "x": 25, "y": 42 }, - { "x": 3, "y": 27 } - ], - "backgroundColor": "orange" + return [ + { + "label": "foo", + "data": [ + { "x": 25, "y": 50 }, + { "x": 23, "y": 23 }, + { "x": 12, "y": 37 } + ], + "backgroundColor": "rgb(255, 12, 137)" + }, + { + "label": "bar", + "data": [ + { "x": 32, "y": 32 }, + { "x": 25, "y": 42 }, + { "x": 3, "y": 27 } + ], + "backgroundColor": "orange" + } + ]`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"; + +export async function main(db: Resource<"postgresql">) { + try { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + const rows = query.rows.map((row, i) => ({ + x: row['0'], + y: query.rows[query.rows.length - (i + 1)]['0'] + })) + return [ + { + label: "foo", + data: rows, + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: rows.map(({x, y}) => ({ + x: x * 2, + y: y * 1.5 + })), + backgroundColor: "orange" + } + ]; + } catch (e) { + return []; } -]` +}` }, timeseriescomponent: { deno: `export async function main() { -return [ - { - "label": "foo", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 50 - }, - { - "x": "2021-11-07 01:00:28", - "y": 60 - }, - { - "x": "2021-11-07 09:00:28", - "y": 20 - } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 20 - }, - { - "x": "2021-11-07 01:00:28", - "y": 13 - }, - { - "x": "2021-11-07 09:00:28", - "y": 45 - } - ], - "backgroundColor": "orange" - } -] + return [ + { + label: "foo", + data: [ + { + x: "2021-11-06 23:39:30", + y: 50 + }, + { + x: "2021-11-07 01:00:28", + y: 60 + }, + { + x: "2021-11-07 09:00:28", + y: 20 + } + ], + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: [ + { + x: "2021-11-06 23:39:30", + y: 20 + }, + { + x: "2021-11-07 01:00:28", + y: 13 + }, + { + x: "2021-11-07 09:00:28", + y: 45 + } + ], + backgroundColor: "orange" + } + ] }`, python3: `def main(): -return [ - { - "label": "foo", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 50 - }, - { - "x": "2021-11-07 01:00:28", - "y": 60 - }, - { - "x": "2021-11-07 09:00:28", - "y": 20 - } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 20 - }, - { - "x": "2021-11-07 01:00:28", - "y": 13 - }, - { - "x": "2021-11-07 09:00:28", - "y": 45 - } - ], - "backgroundColor": "orange" - } -]` + return [ + { + "label": "foo", + "data": [ + { + "x": "2021-11-06 23:39:30", + "y": 50 + }, + { + "x": "2021-11-07 01:00:28", + "y": 60 + }, + { + "x": "2021-11-07 09:00:28", + "y": 20 + } + ], + "backgroundColor": "rgb(255, 12, 137)" + }, + { + "label": "bar", + "data": [ + { + "x": "2021-11-06 23:39:30", + "y": 20 + }, + { + "x": "2021-11-07 01:00:28", + "y": 13 + }, + { + "x": "2021-11-07 09:00:28", + "y": 45 + } + ], + "backgroundColor": "orange" + } + ]`, + pgsql: `import { + pgSql, + type Resource, +} from "https://deno.land/x/windmill@v1.88.1/mod.ts"; + +export async function main(db: Resource<"postgresql">) { + try { + const query = await pgSql(db)\`SELECT * FROM demo;\`; + const rows = query.rows.map((row, i) => ({ + x: new Date(Date.now() - (i * 1000 * 60 * 60 * 24)).toISOString(), + y: row['0'] + })) + return [ + { + label: "foo", + data: rows, + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: rows.map(({x, y}) => ({ + x, + y: y * 2 + })), + backgroundColor: "orange" + } + ]; + } catch(e) { + return []; + } +}` }, iconcomponent: { deno: `export async function main() { -return "smile"; + return "Smile"; }`, python3: `def main(): -return "smile"` + return "Smile"` } } as const diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index ada151a83d..d182e4ccfb 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -47,7 +47,7 @@ subkind: 'pgsql' | 'mysql' | undefined = undefined ) { const content = - defaultCode(componentType ?? '', language) ?? + defaultCode(componentType ?? '', subkind || language) ?? initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow') return newInlineScript(content, language, path)