pgkiln 0.53.0 → 0.54.0

package/examples/gallery/samples/sample-cards.sql

@@ -0,0 +1,157 @@
+-- =====================================================================
+-- Sample app "Sample Cards" (App Gallery → Sample Apps)
+--
+-- Cards in all the forms pgkiln has: a cards region with title, subtitle,
+-- body, badge and icon that opens a form; KPI tiles (style metric); a list
+-- region as cards, badges, links and tabs; and the built-in template
+-- components (media list, metric cards, badges, avatars) as cards.
+--
+-- Installed by an administrator from the App Gallery, or with
+--   psql "$DATABASE_URL" -1 -f examples/gallery/samples/sample-cards.sql
+-- then open /a/sample-cards and sign in as demo / demo.
+-- =====================================================================
+
+create or replace function pg_temp.page_id(p_alias text, p_page int) returns int language sql stable as
+  $$ select p.id from meta.page p join meta.app a on a.id = p.app_id where a.alias = p_alias and p.page_no = p_page $$;
+
+-- 1. Schema and data ---------------------------------------------------------
+create schema sample_cards;
+
+create table sample_cards.product (
+  id          int generated always as identity primary key,
+  name        text not null unique,
+  category    text not null check (category in ('Furniture', 'Lighting', 'Accessories', 'Plants')),
+  price       numeric(10, 2) not null check (price >= 0),
+  stock       int not null default 0 check (stock >= 0),
+  rating      int check (rating between 1 and 5),
+  icon        text not null default 'box',
+  description text
+);
+
+insert into sample_cards.product (name, category, price, stock, rating, icon, description) values
+  ('Oak desk', 'Furniture', 640, 12, 5, 'briefcase', 'A solid oak desk, 160 by 80 cm, with a cable tray.'),
+  ('Task chair', 'Furniture', 290, 3, 4, 'user', 'Adjustable seat, arms and lumbar support.'),
+  ('Bookcase', 'Furniture', 210, 0, 4, 'book', 'Five shelves of birch plywood.'),
+  ('Desk lamp', 'Lighting', 79, 25, 5, 'lightbulb', 'Warm LED light with a dimmer.'),
+  ('Floor lamp', 'Lighting', 149, 7, 3, 'sun', 'A reading light that bends where you need it.'),
+  ('Monitor arm', 'Accessories', 95, 40, 4, 'tool', 'Holds one screen up to 32 inches.'),
+  ('Desk mat', 'Accessories', 29, 60, 4, 'layers', 'Felt, 90 by 40 cm.'),
+  ('Cable box', 'Accessories', 24, 2, 3, 'box', 'Hides a power strip and its cables.'),
+  ('Fiddle-leaf fig', 'Plants', 59, 9, 5, 'leaf', 'Large leaves; likes bright, indirect light.'),
+  ('Snake plant', 'Plants', 35, 18, 4, 'leaf', 'Thrives on neglect.');
+
+-- 2. The application's database role ----------------------------------------
+do $$ begin
+  if not exists (select 1 from pg_roles where rolname = 'app_sample_cards') then create role app_sample_cards nologin; end if;
+end $$;
+grant app_sample_cards to pgkiln_runtime;
+grant usage on schema sample_cards to app_sample_cards;
+grant select, insert, update, delete on all tables in schema sample_cards to app_sample_cards;
+
+-- 3. The application ----------------------------------------------------------
+insert into meta.app (alias, name, home_page, authentication, db_role)
+values ('sample-cards', 'Sample Cards', 1, 'app_users', 'app_sample_cards');
+
+insert into meta.app_user (app_id, username, password_hash, roles)
+select id, 'demo', meta.hash_password('demo'), '{}' from meta.app where alias = 'sample-cards';
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select a.id, p.no, p.name, p.name, p.parent
+  from meta.app a, (values
+  (1, 'Sample Cards', null), (2, 'Cards', 1), (4, 'KPI tiles', 1), (5, 'Lists as cards', 1), (6, 'Template components', 1)
+  ) as p (no, name, parent)
+ where a.alias = 'sample-cards';
+
+-- page 3: the product form, a modal dialog opened from the cards (the Form wizard)
+select meta.generate_page('sample-cards', 'form', 'sample_cards.product', 3,
+  '{"label": "Product", "mode": "modal", "return_page": 2, "nav": false}');
+update meta.page set parent_page = 2 where id = pg_temp.page_id('sample-cards', 3);
+update meta.item set type = 'select', lov = 'STATIC:Furniture,Lighting,Accessories,Plants'
+ where page_id = pg_temp.page_id('sample-cards', 3) and name = 'P3_CATEGORY';
+update meta.item set type = 'rating'
+ where page_id = pg_temp.page_id('sample-cards', 3) and name = 'P3_RATING';
+
+insert into meta.nav_entry (app_id, seq, label, icon, target_page)
+select a.id, n.seq, n.label, n.icon, n.page
+  from meta.app a, (values
+  (10, 'Home', 'home', 1), (20, 'Cards', 'layers', 2), (30, 'KPI tiles', 'dashboard', 4),
+  (40, 'Lists as cards', 'list', 5), (50, 'Template components', 'grid', 6)
+  ) as n (seq, label, icon, page)
+ where a.alias = 'sample-cards';
+
+insert into meta.list (app_id, name, type, description, query)
+select a.id, l.name, l.type, l.description, l.query
+  from meta.app a, (values
+  ('CARD_TOPICS', 'static', 'The pages of Sample Cards', null),
+  ('CATEGORIES', 'sql', 'The categories with the number of products, from a query',
+   E'select category as label, 2 as page, null::jsonb as items,\n       case category when ''Furniture'' then ''briefcase'' when ''Lighting'' then ''lightbulb'' when ''Plants'' then ''leaf'' else ''box'' end as icon,\n       count(*)::text as badge, count(*) filter (where stock = 0) || '' out of stock'' as description\n  from sample_cards.product group by category order by category')
+  ) as l (name, type, description, query)
+ where a.alias = 'sample-cards';
+
+insert into meta.list_entry (app_id, list_name, seq, label, icon, target_page, description)
+select a.id, 'CARD_TOPICS', e.seq, e.label, e.icon, e.page, e.description
+  from meta.app a, (values
+  (10, 'Cards', 'layers', 2, 'A cards region: title, subtitle, body, badge and icon from the query, each card a link to the form.'),
+  (20, 'KPI tiles', 'dashboard', 4, 'Key figures as tiles: the style metric, a format mask and an empty text.'),
+  (30, 'Lists as cards', 'list', 5, 'A list (Shared Components) shown as cards, badges, links or tabs.'),
+  (40, 'Template components', 'grid', 6, 'Media list, metric cards, badges and avatars: the built-in template components.')
+  ) as e (seq, label, icon, page, description)
+ where a.alias = 'sample-cards';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config)
+select pg_temp.page_id('sample-cards', r.page), r.seq, r.title, r.type, r.cols, r.template, r.source, r.config::jsonb
+  from (values
+  -- 1 Home
+  (1, 10, 'Sample Cards', 'static', 12, 'hero',
+   '<p>Cards show rows as tiles instead of table rows: good for a few dozen things with a name, a picture or icon and a key figure. pgkiln has a cards region, KPI tiles, lists shown as cards and template components; this application shows each on a page of its own.</p>',
+   '{"icon": "layers"}'),
+  (1, 20, 'Topics', 'list', 12, 'plain', null, '{"list": "CARD_TOPICS", "template": "cards"}'),
+
+  -- 2 Cards
+  (2, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">A <strong>cards</strong> region reads the columns <code>title</code>, <code>subtitle</code>, <code>body</code>, <code>badge</code> and <code>icon</code> of its query; other columns can be used in its link. Here every card opens the product form as a dialog (the attribute <code>link</code>), and the badge shows the price with a format mask.</p>',
+   '{}'),
+  (2, 10, 'Products', 'cards', 12, 'plain',
+   E'select name as title, category || '' · '' || stock || '' in stock'' as subtitle, description as body,\n       price as badge, icon, id\n  from sample_cards.product order by category, name',
+   '{"link": {"page": 3, "items": {"P3_ID": "#id#"}}, "formats": {"badge": "FML999G990D00"}, "empty": "No products yet."}'),
+
+  -- 4 KPI tiles
+  (4, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">With <code>{"style": "metric"}</code> a cards region shows KPI tiles: the <code>badge</code> as a big value and the <code>title</code> as its label. A query with no rows shows the region''s <code>empty</code> text instead.</p>',
+   '{}'),
+  (4, 10, 'Key figures', 'cards', 12, 'plain',
+   E'select ''Products'' as title, count(*)::text as badge, ''box'' as icon from sample_cards.product\nunion all\nselect ''Stock value'', to_char(sum(price * stock), ''FM999G999G990''), ''coins'' from sample_cards.product\nunion all\nselect ''Average rating'', to_char(avg(rating), ''FM0D0''), ''star'' from sample_cards.product\nunion all\nselect ''Out of stock'', count(*) filter (where stock = 0)::text, ''alert'' from sample_cards.product',
+   '{"style": "metric"}'),
+  (4, 20, 'Stock per category', 'cards', 12, 'standard',
+   E'select category as title, sum(stock)::text as badge,\n       case category when ''Furniture'' then ''briefcase'' when ''Lighting'' then ''lightbulb'' when ''Plants'' then ''leaf'' else ''box'' end as icon\n  from sample_cards.product group by category order by category',
+   '{"style": "metric"}'),
+  (4, 30, 'Products to reorder today', 'cards', 12, 'standard',
+   E'select name as title, stock || '' left'' as subtitle, ''alert'' as icon from sample_cards.product where stock < 0',
+   '{"empty": "Nothing to reorder: every product has stock. (This region''s query finds no rows, so it shows its empty text.)"}'),
+
+  -- 5 Lists as cards
+  (5, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">A <strong>list</strong> region shows a list from Shared Components → Lists with a template: <code>cards</code>, <code>badges</code>, <code>links</code> or <code>tabs</code>. The list here comes from a query (a dynamic list): a label, a page, an icon, a badge and a description per row.</p>',
+   '{}'),
+  (5, 10, 'Categories as cards', 'list', 12, 'standard', null, '{"list": "CATEGORIES", "template": "cards"}'),
+  (5, 20, 'Categories as badges', 'list', 6, 'standard', null, '{"list": "CATEGORIES", "template": "badges"}'),
+  (5, 30, 'Categories as links', 'list', 6, 'standard', null, '{"list": "CATEGORIES", "template": "links"}'),
+  (5, 40, 'Categories as tabs', 'list', 12, 'standard', null, '{"list": "CATEGORIES", "template": "tabs"}'),
+
+  -- 6 Template components
+  (6, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">A <strong>template component</strong> region draws each row of its query through a component; shown as <code>multiple</code>, the rows go into the component''s group. These are the built-in components every application has: <code>ut_metric_card</code>, <code>ut_media_list</code>, <code>ut_badge</code> and <code>ut_avatar</code>.</p>',
+   '{}'),
+  (6, 10, 'Metric cards', 'template_component', 12, 'standard',
+   E'select category as label, sum(stock)::text as value, ''in stock'' as unit,\n       count(*) || '' products'' as change, case when min(stock) = 0 then ''down'' else ''up'' end as trend, ''up'' as good\n  from sample_cards.product group by category order by category',
+   '{"component": "ut_metric_card", "display": "multiple"}'),
+  (6, 20, 'Media list', 'template_component', 6, 'standard',
+   E'select id, name as title, description, upper(left(name, 2)) as initials,\n       to_char(price, ''FM999G990D00'') as badge, case when stock = 0 then ''danger'' when stock < 5 then ''warning'' else ''success'' end as state\n  from sample_cards.product order by name limit 6',
+   '{"component": "ut_media_list", "display": "multiple", "link": {"page": 3, "items": {"P3_ID": "#id#"}}}'),
+  (6, 30, 'Badges', 'template_component', 6, 'standard',
+   E'select name as label, case when stock = 0 then ''danger'' when stock < 5 then ''warning'' else ''success'' end as state\n  from sample_cards.product order by name',
+   '{"component": "ut_badge", "display": "multiple"}'),
+  (6, 40, 'Avatars', 'template_component', 12, 'standard',
+   E'select name, upper(left(name, 2)) as initials from sample_cards.product order by name',
+   '{"component": "ut_avatar", "display": "multiple", "attributes": {"SIZE": "medium"}}')
+  ) as r (page, seq, title, type, cols, template, source, config);

package/examples/gallery/samples/sample-charts.sql

@@ -0,0 +1,265 @@
+-- =====================================================================
+-- Sample app "Sample Charts" (App Gallery → Sample Apps)
+--
+-- Every chart type of the chart region, a page per kind of question
+-- (comparing categories, change over time, parts of a whole, relations and
+-- spread, plans) and a drill-down from a chart to a report. Each page starts
+-- with a text that says how the query shapes the chart.
+--
+-- Installed by an administrator from the App Gallery, or with
+--   psql "$DATABASE_URL" -1 -f examples/gallery/samples/sample-charts.sql
+-- then open /a/sample-charts and sign in as demo / demo.
+-- =====================================================================
+
+-- helpers of this script (temporary: they go with the session)
+create or replace function pg_temp.page_id(p_alias text, p_page int) returns int language sql stable as
+  $$ select p.id from meta.page p join meta.app a on a.id = p.app_id where a.alias = p_alias and p.page_no = p_page $$;
+
+-- 1. Schema and data ---------------------------------------------------------
+create schema sample_charts;
+
+create table sample_charts.sale (
+  id      int generated always as identity primary key,
+  sold_on date not null,
+  region  text not null,
+  product text not null,
+  channel text not null,
+  units   int not null,
+  amount  numeric(12, 2) not null
+);
+
+-- twelve months of sales: four regions, three products, three channels
+insert into sample_charts.sale (sold_on, region, product, channel, units, amount)
+select (date_trunc('month', current_date) - make_interval(months => m))::date + ((r * 7 + p * 3) % 27)::int,
+       g.region, q.product, (array['Web', 'Store', 'Partner'])[1 + (m + r + p) % 3],
+       x.units, x.units * (array[640, 290, 95])[p]
+  from generate_series(0, 11) m,
+       unnest(array['North', 'South', 'East', 'West']) with ordinality as g (region, r),
+       unnest(array['Standing desk', 'Office chair', 'Monitor arm']) with ordinality as q (product, p),
+       lateral (select (5 + (m * 7 + r * 11 + p * 13) % 23)::int as units) x;
+
+create table sample_charts.share_price (
+  day   date primary key,
+  open  numeric(8, 2) not null,
+  high  numeric(8, 2) not null,
+  low   numeric(8, 2) not null,
+  close numeric(8, 2) not null
+);
+
+insert into sample_charts.share_price (day, open, high, low, close)
+select current_date - 30 + d, o, greatest(o, c) + 1.5, least(o, c) - 1.2, c
+  from generate_series(1, 30) d,
+       lateral (select round((100 + 8 * sin((d - 1) / 4.0) + (d - 1) * 0.3)::numeric, 2) as o,
+                       round((100 + 8 * sin(d / 4.0) + d * 0.3)::numeric, 2) as c) v;
+
+create table sample_charts.pipeline (
+  seq   int primary key,
+  stage text not null,
+  deals int not null
+);
+
+insert into sample_charts.pipeline values (1, 'Leads', 240), (2, 'Qualified', 130), (3, 'Proposal', 64), (4, 'Negotiation', 31), (5, 'Won', 18);
+
+create table sample_charts.budget (
+  node_id   int primary key,
+  parent_id int references sample_charts.budget,
+  label     text not null,
+  amount    numeric(10, 2) not null default 0
+);
+
+insert into sample_charts.budget values
+  (1, null, 'Operations', 0), (2, null, 'Marketing', 0), (3, null, 'Engineering', 0),
+  (11, 1, 'Rent', 40), (12, 1, 'Utilities', 12),
+  (21, 2, 'Events', 18), (22, 2, 'Online ads', 25), (23, 2, 'Print', 6),
+  (31, 3, 'Salaries', 120), (32, 3, 'Cloud', 30), (33, 3, 'Tools', 14);
+
+create table sample_charts.project_task (
+  id         int primary key,
+  name       text not null,
+  team       text not null,
+  starts     date not null,
+  ends       date,
+  progress   int not null default 0,
+  depends_on int[] not null default '{}'
+);
+
+insert into sample_charts.project_task values
+  (1, 'Kick-off', 'Product', current_date - 20, null, 100, '{}'),
+  (2, 'Requirements', 'Product', current_date - 19, current_date - 8, 100, '{1}'),
+  (3, 'Design', 'Product', current_date - 9, current_date + 3, 70, '{2}'),
+  (4, 'Build', 'Engineering', current_date + 1, current_date + 25, 10, '{3}'),
+  (5, 'Test', 'Quality', current_date + 18, current_date + 32, 0, '{4}'),
+  (6, 'Launch', 'Product', current_date + 33, null, 0, '{5}');
+
+-- 2. The application's database role ----------------------------------------
+do $$ begin
+  if not exists (select 1 from pg_roles where rolname = 'app_sample_charts') then create role app_sample_charts nologin; end if;
+end $$;
+grant app_sample_charts to pgkiln_runtime;
+grant usage on schema sample_charts to app_sample_charts;
+grant select on all tables in schema sample_charts to app_sample_charts;
+
+-- 3. The application ----------------------------------------------------------
+insert into meta.app (alias, name, home_page, authentication, db_role)
+values ('sample-charts', 'Sample Charts', 1, 'app_users', 'app_sample_charts');
+
+insert into meta.app_user (app_id, username, password_hash, roles)
+select id, 'demo', meta.hash_password('demo'), '{}' from meta.app where alias = 'sample-charts';
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select a.id, p.no, p.name, p.name, p.parent
+  from meta.app a, (values
+  (1, 'Sample Charts', null), (2, 'Comparing categories', 1), (3, 'Change over time', 1), (4, 'Parts of a whole', 1),
+  (5, 'Relations and spread', 1), (6, 'Plans and timelines', 1), (7, 'Drill-down', 1), (8, 'Sales by region', 7)
+  ) as p (no, name, parent)
+ where a.alias = 'sample-charts';
+
+insert into meta.nav_entry (app_id, seq, label, icon, target_page)
+select a.id, n.seq, n.label, n.icon, n.page
+  from meta.app a, (values
+  (10, 'Home', 'home', 1), (20, 'Comparing categories', 'chart', 2), (30, 'Change over time', 'line-chart', 3),
+  (40, 'Parts of a whole', 'pie-chart', 4), (50, 'Relations and spread', 'activity', 5), (60, 'Plans and timelines', 'calendar', 6),
+  (70, 'Drill-down', 'filter', 7)
+  ) as n (seq, label, icon, page)
+ where a.alias = 'sample-charts';
+
+-- the home page's list of topics
+insert into meta.list (app_id, name, type, description)
+select id, 'CHART_TOPICS', 'static', 'The pages of Sample Charts (cards on the home page)' from meta.app where alias = 'sample-charts';
+
+insert into meta.list_entry (app_id, list_name, seq, label, icon, target_page, description)
+select a.id, 'CHART_TOPICS', e.seq, e.label, e.icon, e.page, e.description
+  from meta.app a, (values
+  (10, 'Comparing categories', 'chart', 2, 'Bar, column, stacked and combination charts.'),
+  (20, 'Change over time', 'line-chart', 3, 'Line, area, range and stock charts.'),
+  (30, 'Parts of a whole', 'pie-chart', 4, 'Pie, donut, funnel, pyramid, treemap and sunburst charts.'),
+  (40, 'Relations and spread', 'activity', 5, 'Scatter, bubble, box plot, radar, polar and gauge charts.'),
+  (50, 'Plans and timelines', 'calendar', 6, 'Gantt and timeline charts.'),
+  (60, 'Drill-down', 'filter', 7, 'A chart whose columns open a report of their rows.')
+  ) as e (seq, label, icon, page, description)
+ where a.alias = 'sample-charts';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config)
+select pg_temp.page_id('sample-charts', r.page), r.seq, r.title, r.type, r.cols, r.template, r.source, r.config::jsonb
+  from (values
+  -- 1 Home
+  (1, 10, 'Sample Charts', 'static', 12, 'hero',
+   '<p>A chart region draws a SELECT: the first column is the label, every further number column a series, named by its alias. The attribute <code>kind</code> chooses one of 22 chart types. Every chart has tooltips, a legend for several series and a <em>Data table</em> toggle, the accessible alternative to the picture.</p>',
+   '{"icon": "chart"}'),
+  (1, 20, 'Topics', 'list', 12, 'plain', null, '{"list": "CHART_TOPICS", "template": "cards"}'),
+  (1, 30, 'The data', 'static', 12, 'standard',
+   '<p>The schema <code>sample_charts</code> holds a year of sales (<code>sale</code>: region, product, channel, units, amount), a month of share prices, a sales pipeline, a budget in two levels and a small project plan. The queries of the charts are in the Page Designer: open a region and look at its Source and its attributes.</p>',
+   '{}'),
+
+  -- 2 Comparing categories
+  (2, 5, 'About these charts', 'static', 12, 'plain',
+   '<p class="lead">Compare categories with bars and columns. <strong>bar</strong> draws horizontal bars, good for long labels; <strong>column</strong> vertical columns; <strong>stacked</strong> stacks the series of a label on top of each other; <strong>combo</strong> draws the first series as columns and the others as lines over them.</p>',
+   '{}'),
+  (2, 10, 'Units sold per product and channel (bar)', 'chart', 6, 'standard',
+   E'select product || '' via '' || lower(channel) as product, sum(units) as "Units"\n  from sample_charts.sale group by product, channel order by 2 desc',
+   '{"kind": "bar"}'),
+  (2, 20, 'Sales per region (column)', 'chart', 6, 'standard',
+   E'select region, sum(amount) as "Sales"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "column", "format_mask": "999G999G990"}'),
+  (2, 30, 'Sales per region and product (stacked)', 'chart', 6, 'standard',
+   E'select region,\n       sum(amount) filter (where product = ''Standing desk'') as "Standing desk",\n       sum(amount) filter (where product = ''Office chair'') as "Office chair",\n       sum(amount) filter (where product = ''Monitor arm'') as "Monitor arm"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "stacked", "format_mask": "999G999G990"}'),
+  (2, 40, 'Sales against the target (combo)', 'chart', 6, 'standard',
+   E'select region, sum(amount) as "Sales", 200000 as "Target"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "combo", "format_mask": "999G999G990"}'),
+
+  -- 3 Change over time
+  (3, 5, 'About these charts', 'static', 12, 'plain',
+   '<p class="lead">Show change over time with the label column in order (months, days). <strong>line</strong> and <strong>area</strong> draw one line per series; <strong>range</strong> a floating column from a low to a high column; <strong>stock</strong> a candle per row from the open, high, low and close columns.</p>',
+   '{}'),
+  (3, 10, 'Monthly sales per region (line)', 'chart', 12, 'standard',
+   E'select to_char(date_trunc(''month'', sold_on), ''YYYY-MM'') as month,\n       sum(amount) filter (where region = ''North'') as "North",\n       sum(amount) filter (where region = ''South'') as "South",\n       sum(amount) filter (where region = ''East'') as "East",\n       sum(amount) filter (where region = ''West'') as "West"\n  from sample_charts.sale group by 1 order by 1',
+   '{"kind": "line", "format_mask": "999G999G990"}'),
+  (3, 20, 'Sales so far this year (area)', 'chart', 6, 'standard',
+   E'select month, sum(total) over (order by month) as "Cumulative sales"\n  from (select to_char(date_trunc(''month'', sold_on), ''YYYY-MM'') as month, sum(amount) as total\n          from sample_charts.sale group by 1) m\n order by month',
+   '{"kind": "area", "format_mask": "999G999G990"}'),
+  (3, 30, 'Smallest and largest sale per region (range)', 'chart', 6, 'standard',
+   E'select region, min(amount) as "Smallest", max(amount) as "Largest"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "range", "format_mask": "999G999G990"}'),
+  (3, 40, 'Share price over the last month (stock)', 'chart', 12, 'standard',
+   E'select to_char(day, ''DD Mon'') as day, open as "Open", high as "High", low as "Low", close as "Close"\n  from sample_charts.share_price order by sample_charts.share_price.day',
+   '{"kind": "stock"}'),
+
+  -- 4 Parts of a whole
+  (4, 5, 'About these charts', 'static', 12, 'plain',
+   '<p class="lead">Show how a total divides. <strong>pie</strong> and <strong>donut</strong> use the first series (up to six slices, the rest folds into Other); <strong>funnel</strong> shows the stages of a process in the order of the query; <strong>pyramid</strong> with two series compares two groups back to back; <strong>treemap</strong> and <strong>sunburst</strong> show a hierarchy from the columns <code>node_id</code> and <code>parent_id</code>.</p>',
+   '{}'),
+  (4, 10, 'Sales per channel (pie)', 'chart', 6, 'standard',
+   E'select channel, sum(amount) as "Sales"\n  from sample_charts.sale group by channel order by 2 desc',
+   '{"kind": "pie", "format_mask": "999G999G990"}'),
+  (4, 20, 'Units per product (donut)', 'chart', 6, 'standard',
+   E'select product, sum(units) as "Units"\n  from sample_charts.sale group by product order by 2 desc',
+   '{"kind": "donut"}'),
+  (4, 30, 'Sales pipeline (funnel)', 'chart', 6, 'standard',
+   E'select stage, deals as "Deals" from sample_charts.pipeline order by seq',
+   '{"kind": "funnel"}'),
+  (4, 40, 'Units per product, North against South (pyramid)', 'chart', 6, 'standard',
+   E'select product,\n       sum(units) filter (where region = ''North'') as "North",\n       sum(units) filter (where region = ''South'') as "South"\n  from sample_charts.sale group by product order by product',
+   '{"kind": "pyramid"}'),
+  (4, 50, 'Budget (treemap)', 'chart', 6, 'standard',
+   E'select label, amount as "Budget", node_id, parent_id from sample_charts.budget order by node_id',
+   '{"kind": "treemap"}'),
+  (4, 60, 'Budget (sunburst)', 'chart', 6, 'standard',
+   E'select label, amount as "Budget", node_id, parent_id from sample_charts.budget order by node_id',
+   '{"kind": "sunburst"}'),
+
+  -- 5 Relations and spread
+  (5, 5, 'About these charts', 'static', 12, 'plain',
+   '<p class="lead">Look at numbers against each other. <strong>scatter</strong> takes a number as its first column (the x axis); <strong>bubble</strong> a label, then x, y and size; <strong>boxplot</strong> one row per observation and computes the quartiles per label; <strong>radar</strong> an axis per row; <strong>polar</strong> a sector per row; <strong>gauge</strong> a dial per row with thresholds in its attributes.</p>',
+   '{}'),
+  (5, 10, 'Units against amount per sale (scatter)', 'chart', 6, 'standard',
+   E'select units as "Units", amount as "Amount" from sample_charts.sale order by units',
+   '{"kind": "scatter"}'),
+  (5, 20, 'Products per region: units, average sale and number of sales (bubble)', 'chart', 6, 'standard',
+   E'select region || '' '' || lower(product) as product, sum(units) as "Units", round(avg(amount)) as "Average sale", count(*) as "Sales"\n  from sample_charts.sale group by region, product order by 1',
+   '{"kind": "bubble"}'),
+  (5, 30, 'Spread of the sales per region (box plot)', 'chart', 6, 'standard',
+   E'select region, amount as "Sale" from sample_charts.sale order by region',
+   '{"kind": "boxplot"}'),
+  (5, 40, 'Units per region and product (radar)', 'chart', 6, 'standard',
+   E'select region,\n       sum(units) filter (where product = ''Standing desk'') as "Standing desk",\n       sum(units) filter (where product = ''Office chair'') as "Office chair",\n       sum(units) filter (where product = ''Monitor arm'') as "Monitor arm"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "radar"}'),
+  (5, 50, 'Sales per month (polar)', 'chart', 6, 'standard',
+   E'select to_char(date_trunc(''month'', sold_on), ''Mon'') as month, sum(amount) as "Sales"\n  from sample_charts.sale group by date_trunc(''month'', sold_on) order by date_trunc(''month'', sold_on)',
+   '{"kind": "polar", "format_mask": "999G999G990"}'),
+  (5, 60, 'Target reached per region, % (gauge)', 'chart', 6, 'standard',
+   E'select region, round(100.0 * sum(amount) / 200000) as "Target reached"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "gauge", "gauge": {"min": 0, "max": 120, "warning": 90, "critical": 75}}'),
+
+  -- 6 Plans and timelines
+  (6, 5, 'About these charts', 'static', 12, 'plain',
+   '<p class="lead">Show plans. <strong>gantt</strong> takes a label, a start and an end (no end: a milestone), and optional columns <code>progress</code>, <code>task_id</code> and <code>depends_on</code>; <strong>timeline</strong> a label, a start and an end, with a lane per value of the column <code>series</code>.</p>',
+   '{}'),
+  (6, 10, 'Project plan (Gantt)', 'chart', 12, 'standard',
+   E'select name as "Task", starts as "Starts", ends as "Ends", progress, id as task_id,\n       array_to_string(depends_on, '','') as depends_on\n  from sample_charts.project_task order by starts, id',
+   '{"kind": "gantt"}'),
+  (6, 20, 'Who works when (timeline)', 'chart', 12, 'standard',
+   E'select name as "Task", starts as "Starts", ends as "Ends", team as series\n  from sample_charts.project_task order by starts, id',
+   '{"kind": "timeline"}'),
+
+  -- 7 Drill-down
+  (7, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">With the attribute <code>link</code> every column of the chart is a link: <code>#region#</code> is replaced by the value of the clicked row. The link carries a checksum, like every link pgkiln makes. Columns that only the link uses are not drawn. From the keyboard, the data table has the same links.</p>',
+   '{}'),
+  (7, 10, 'Sales per region: click a column', 'chart', 12, 'standard',
+   E'select region, sum(amount) as "Sales"\n  from sample_charts.sale group by region order by region',
+   '{"kind": "column", "format_mask": "999G999G990", "link": {"page": 8, "items": {"P8_REGION": "#region#"}}}'),
+
+  -- 8 Sales by region (the drill-down's target)
+  (8, 10, 'Sales', 'report', 12, 'standard',
+   E'select sold_on, region, product, channel, units, amount\n  from sample_charts.sale\n where :P8_REGION is null or region = :P8_REGION\n order by sold_on desc, id',
+   '{"headings": {"sold_on": "Sold on"}, "formats": {"amount": "999G999G990D00"}}'),
+  (8, 20, 'Per product', 'chart', 12, 'standard',
+   E'select product, sum(amount) as "Sales"\n  from sample_charts.sale where :P8_REGION is null or region = :P8_REGION\n group by product order by 2 desc',
+   '{"kind": "bar", "format_mask": "999G999G990"}')
+  ) as r (page, seq, title, type, cols, template, source, config);
+
+insert into meta.item (page_id, region_id, seq, name, label, type, lov, config)
+select pg_temp.page_id('sample-charts', 8), null, 10, 'P8_REGION', 'Region', 'select',
+       'select distinct region as d, region as r from sample_charts.sale order by 1',
+       '{"submit_on_change": true, "null_label": "All regions"}';

package/examples/gallery/samples/sample-dynamic-actions.sql

@@ -0,0 +1,177 @@
+-- =====================================================================
+-- Sample app "Sample Dynamic Actions" (App Gallery → Sample Apps)
+--
+-- Behaviour in the browser without JavaScript of your own:
+--   page 2  show, hide, enable and disable items on a condition;
+--   page 3  values from the server (set value, execute SQL) and a report
+--           refreshed when an item changes;
+--   page 4  messages, confirmations, a wait popup, classes, item errors,
+--           an inline dialog and actions on page load and key release.
+--
+-- Installed by an administrator from the App Gallery, or with
+--   psql "$DATABASE_URL" -1 -f examples/gallery/samples/sample-dynamic-actions.sql
+-- then open /a/sample-dynamic-actions and sign in as demo / demo.
+-- =====================================================================
+
+create or replace function pg_temp.page_id(p_alias text, p_page int) returns int language sql stable as
+  $$ select p.id from meta.page p join meta.app a on a.id = p.app_id where a.alias = p_alias and p.page_no = p_page $$;
+create or replace function pg_temp.region_id(p_alias text, p_page int, p_static text) returns int language sql stable as
+  $$ select r.id from meta.region r where r.page_id = pg_temp.page_id(p_alias, p_page) and r.static_id = p_static $$;
+
+-- 1. Schema and data ---------------------------------------------------------
+create schema sample_da;
+
+create table sample_da.product (
+  id       int generated always as identity primary key,
+  name     text not null unique,
+  category text not null,
+  price    numeric(10, 2) not null
+);
+
+insert into sample_da.product (name, category, price) values
+  ('Notebook', 'Paper', 3.50), ('Sticky notes', 'Paper', 2.25), ('Printer paper', 'Paper', 6.95),
+  ('Ballpoint', 'Pens', 1.20), ('Fountain pen', 'Pens', 24.00), ('Marker set', 'Pens', 8.40),
+  ('Stapler', 'Desk', 12.50), ('Desk organiser', 'Desk', 18.00), ('Scissors', 'Desk', 6.75);
+
+-- 2. The application's database role ----------------------------------------
+do $$ begin
+  if not exists (select 1 from pg_roles where rolname = 'app_sample_da') then create role app_sample_da nologin; end if;
+end $$;
+grant app_sample_da to pgkiln_runtime;
+grant usage on schema sample_da to app_sample_da;
+grant select on all tables in schema sample_da to app_sample_da;
+
+-- 3. The application ----------------------------------------------------------
+insert into meta.app (alias, name, home_page, authentication, db_role)
+values ('sample-dynamic-actions', 'Sample Dynamic Actions', 1, 'app_users', 'app_sample_da');
+
+insert into meta.app_user (app_id, username, password_hash, roles)
+select id, 'demo', meta.hash_password('demo'), '{}' from meta.app where alias = 'sample-dynamic-actions';
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select a.id, p.no, p.name, p.name, p.parent
+  from meta.app a, (values
+  (1, 'Sample Dynamic Actions', null), (2, 'Show, hide, enable', 1), (3, 'Values from the server', 1), (4, 'Messages and effects', 1)
+  ) as p (no, name, parent)
+ where a.alias = 'sample-dynamic-actions';
+
+insert into meta.nav_entry (app_id, seq, label, icon, target_page)
+select a.id, n.seq, n.label, n.icon, n.page
+  from meta.app a, (values
+  (10, 'Home', 'home', 1), (20, 'Show, hide, enable', 'eye', 2), (30, 'Values from the server', 'refresh', 3), (40, 'Messages and effects', 'bell', 4)
+  ) as n (seq, label, icon, page)
+ where a.alias = 'sample-dynamic-actions';
+
+insert into meta.list (app_id, name, type, description)
+select id, 'DA_TOPICS', 'static', 'The pages of Sample Dynamic Actions' from meta.app where alias = 'sample-dynamic-actions';
+
+insert into meta.list_entry (app_id, list_name, seq, label, icon, target_page, description)
+select a.id, 'DA_TOPICS', e.seq, e.label, e.icon, e.page, e.description
+  from meta.app a, (values
+  (10, 'Show, hide, enable', 'eye', 2, 'Items that appear, disappear or switch on depending on another item.'),
+  (20, 'Values from the server', 'refresh', 3, 'SQL fills in items and refreshes a report, without reloading the page.'),
+  (30, 'Messages and effects', 'bell', 4, 'Alerts, confirmations, a wait popup, classes, item errors and an inline dialog.')
+  ) as e (seq, label, icon, page, description)
+ where a.alias = 'sample-dynamic-actions';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config, static_id)
+select pg_temp.page_id('sample-dynamic-actions', r.page), r.seq, r.title, r.type, r.cols, r.template, r.source, r.config::jsonb, r.sid
+  from (values
+  -- 1 Home
+  (1, 10, 'Sample Dynamic Actions', 'static', 12, 'hero',
+   '<p>A dynamic action is an <strong>event</strong> (an item changes, a button is clicked, the page loads), an optional <strong>condition</strong> on the item''s value and an <strong>action</strong>: show or hide, set a value with SQL, refresh a region, show a message. The actions of one event run in sequence. They need JavaScript; without it the pages still work, without these conveniences.</p>',
+   '{"icon": "bolt"}', null),
+  (1, 20, 'Topics', 'list', 12, 'plain', null, '{"list": "DA_TOPICS", "template": "cards"}', null),
+
+  -- 2 Show, hide, enable
+  (2, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead"><strong>Show</strong> with a condition shows the company fields when <em>Customer type</em> equals Company, and hides them otherwise: one dynamic action does both, also when the page loads (already on the server, so nothing flickers). <strong>Enable</strong> works the same way for the e-mail address.</p>',
+   '{}', null),
+  (2, 10, 'Customer', 'static', 6, 'standard', null, '{}', 'customer'),
+  (2, 20, 'Newsletter', 'static', 6, 'standard', null, '{}', 'newsletter'),
+
+  -- 3 Values from the server
+  (3, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead"><strong>Set value</strong> runs a SELECT on the server with the items it submits and puts the columns of its first row into the affected items: choosing a product fills in its price, changing the quantity the total. <strong>Refresh region</strong> draws the report again with the chosen category. The SQL never reaches the browser.</p>',
+   '{}', null),
+  (3, 10, 'Order line', 'static', 6, 'standard', null, '{}', 'order-line'),
+  (3, 20, 'Filter', 'static', 6, 'standard', null, '{}', 'filter'),
+  (3, 30, 'Products', 'report', 12, 'standard',
+   E'select name, category, price from sample_da.product\n where :P3_CATEGORY is null or category = :P3_CATEGORY\n order by category, name',
+   '{"formats": {"price": "999G990D00"}}', 'products'),
+
+  -- 4 Messages and effects
+  (4, 5, 'About this page', 'static', 12, 'plain',
+   '<p class="lead">Each button has the action <em>Defined by dynamic action</em>. <strong>Confirm</strong> stops the actions after it when you answer No; <strong>Wait popup</strong> covers the page while an Ajax call runs; <strong>Add class</strong> and <strong>Remove class</strong> change a region''s look; <strong>Show error</strong> puts a message under an item; <strong>Open region</strong> opens an inline dialog. Typing in the name runs a <em>Key release</em> action, and the page load puts the cursor in it.</p>',
+   '{}', null),
+  (4, 10, 'Try the actions', 'static', 12, 'buttons_container', null, '{}', 'buttons'),
+  (4, 20, 'Greeting', 'static', 6, 'standard', null, '{}', 'greeting'),
+  (4, 30, 'A region to highlight', 'static', 6, 'standard',
+   '<p>The buttons <em>Highlight</em> and <em>Mute</em> add the theme''s classes <code>is-highlight</code> and <code>is-muted</code> to this region; <em>Reset</em> removes them.</p>',
+   '{}', 'target'),
+  (4, 40, 'An inline dialog', 'static', 12, 'inline_dialog',
+   '<p>This region has the template <em>Inline dialog</em>: hidden until a dynamic action (or a link to its id) opens it. Escape, the close button or a click beside it closes it.</p>',
+   '{}', 'dialog')
+  ) as r (page, seq, title, type, cols, template, source, config, sid);
+
+insert into meta.item (page_id, region_id, seq, name, label, type, lov, default_value, help, config)
+select pg_temp.page_id('sample-dynamic-actions', i.page), pg_temp.region_id('sample-dynamic-actions', i.page, i.region),
+       i.seq, i.name, i.label, i.type, i.lov, i.def, i.help, i.config::jsonb
+  from (values
+  (2, 'customer', 10, 'P2_TYPE', 'Customer type', 'radio', 'STATIC:Person;PERSON,Company;COMPANY', 'PERSON', null, '{}'),
+  (2, 'customer', 20, 'P2_NAME', 'Name', 'text', null, null, null, '{}'),
+  (2, 'customer', 30, 'P2_COMPANY', 'Company name', 'text', null, null, 'Shown only for companies.', '{}'),
+  (2, 'customer', 40, 'P2_VAT', 'VAT number', 'text', null, null, 'Shown only for companies.', '{}'),
+  (2, 'newsletter', 10, 'P2_NEWSLETTER', 'Send me the newsletter', 'radio', 'STATIC:Yes;YES,No;NO', 'NO', null, '{}'),
+  (2, 'newsletter', 20, 'P2_EMAIL', 'E-mail address', 'email', null, null, 'Enabled only when you want the newsletter.', '{}'),
+  (3, 'order-line', 10, 'P3_PRODUCT', 'Product', 'select', 'select name, id from sample_da.product order by name', null, null, '{"warn_unsaved": false}'),
+  (3, 'order-line', 20, 'P3_PRICE', 'Price', 'number', null, null, 'Set by the server when you choose a product.', '{"warn_unsaved": false}'),
+  (3, 'order-line', 30, 'P3_QTY', 'Quantity', 'number', null, '1', null, '{"warn_unsaved": false}'),
+  (3, 'order-line', 40, 'P3_TOTAL', 'Total', 'number', null, null, 'Price times quantity, computed by the server.', '{"warn_unsaved": false}'),
+  (3, 'filter', 10, 'P3_CATEGORY', 'Category', 'select', 'select distinct category as d, category as r from sample_da.product order by 1', null,
+   'The report below is refreshed when this changes.', '{"warn_unsaved": false, "null_label": "All categories"}'),
+  (4, 'greeting', 10, 'P4_NAME', 'Your name', 'text', null, null, 'Type: the greeting follows each key you release.', '{"warn_unsaved": false}'),
+  (4, 'greeting', 20, 'P4_GREETING', 'Greeting', 'text', null, null, null, '{"warn_unsaved": false}')
+  ) as i (page, region, seq, name, label, type, lov, def, help, config);
+
+insert into meta.button (page_id, region_id, seq, name, label, action, hot)
+select pg_temp.page_id('sample-dynamic-actions', 4), pg_temp.region_id('sample-dynamic-actions', 4, 'buttons'), b.seq, b.name, b.label, 'da', b.hot
+  from (values
+  (10, 'ALERT', 'Alert', false), (20, 'CONFIRM', 'Confirm, then a message', true), (30, 'WAIT', 'Wait popup', false),
+  (40, 'HIGHLIGHT', 'Highlight', false), (50, 'MUTE', 'Mute', false), (60, 'RESET', 'Reset', false),
+  (70, 'ERROR', 'Show an item error', false), (80, 'CLEAR', 'Clear the errors', false), (90, 'DIALOG', 'Open the inline dialog', false)
+  ) as b (seq, name, label, hot);
+
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, condition_type, condition_value,
+                                 action, affected_items, affected_region_id, code, items_to_submit, message, css_classes)
+select pg_temp.page_id('sample-dynamic-actions', d.page), d.seq, d.name, d.event, d.trig, d.ctype, d.cvalue,
+       d.action, d.items, pg_temp.region_id('sample-dynamic-actions', d.page, d.region), d.code, d.submit, d.message, d.classes
+  from (values
+  -- page 2
+  (2, 10, 'Company fields for companies', 'change', 'P2_TYPE', 'equals', 'COMPANY', 'show', 'P2_COMPANY,P2_VAT', null, null, null, null, null),
+  (2, 20, 'E-mail only with the newsletter', 'change', 'P2_NEWSLETTER', 'equals', 'YES', 'enable', 'P2_EMAIL', null, null, null, null, null),
+  -- page 3
+  (3, 10, 'The product''s price', 'change', 'P3_PRODUCT', null, null, 'set_value', 'P3_PRICE,P3_TOTAL', null,
+   'select price, price * coalesce(nullif(:P3_QTY, '''')::numeric, 1) from sample_da.product where id = nullif(:P3_PRODUCT, '''')::int',
+   'P3_PRODUCT,P3_QTY', null, null),
+  (3, 20, 'The total', 'change', 'P3_QTY', null, null, 'set_value', 'P3_TOTAL', null,
+   'select round(coalesce(nullif(:P3_PRICE, '''')::numeric, 0) * coalesce(nullif(:P3_QTY, '''')::numeric, 0), 2)',
+   'P3_PRICE,P3_QTY', null, null),
+  (3, 30, 'Refresh the products', 'change', 'P3_CATEGORY', null, null, 'refresh_region', null, 'products', null, 'P3_CATEGORY', null, null),
+  -- page 4
+  (4, 10, 'Put the cursor in the name', 'load', null, null, null, 'set_focus', 'P4_NAME', null, null, null, null, null),
+  (4, 20, 'Greet while typing', 'key_release', 'P4_NAME', null, null, 'set_value', 'P4_GREETING', null,
+   'select case when coalesce(:P4_NAME, '''') = '''' then '''' else ''Hello, '' || :P4_NAME || ''!'' end', 'P4_NAME', null, null),
+  (4, 30, 'An alert', 'click', 'ALERT', null, null, 'alert', null, null, null, null, 'This is an alert: the browser waits until you close it.', null),
+  (4, 40, 'Ask first', 'click', 'CONFIRM', null, null, 'confirm', null, null, null, null, 'Show a success message?', null),
+  (4, 50, 'Then the message', 'click', 'CONFIRM', null, null, 'show_success', null, null, null, null, 'You said yes: this is a success message.', null),
+  (4, 60, 'Wait popup', 'click', 'WAIT', null, null, 'wait_popup', null, null, null, null, 'Working on it…', null),
+  (4, 70, 'A slow call', 'click', 'WAIT', null, null, 'execute_sql', null, null, 'select pg_sleep(1.5)', null, null, null),
+  (4, 80, 'Done waiting', 'click', 'WAIT', null, null, 'remove_wait_popup', null, null, null, null, null, null),
+  (4, 90, 'Highlight the region', 'click', 'HIGHLIGHT', null, null, 'add_class', null, 'target', null, null, null, 'is-highlight'),
+  (4, 100, 'Mute the region', 'click', 'MUTE', null, null, 'add_class', null, 'target', null, null, null, 'is-muted'),
+  (4, 110, 'Reset the region', 'click', 'RESET', null, null, 'remove_class', null, 'target', null, null, null, 'is-highlight is-muted'),
+  (4, 120, 'An item error', 'click', 'ERROR', null, null, 'show_error', 'P4_NAME', null, null, null, 'This is how an error under an item looks.', null),
+  (4, 130, 'Clear the errors', 'click', 'CLEAR', null, null, 'clear_errors', null, null, null, null, null, null),
+  (4, 140, 'Open the dialog', 'click', 'DIALOG', null, null, 'open_region', null, 'dialog', null, null, null, null)
+  ) as d (page, seq, name, event, trig, ctype, cvalue, action, items, region, code, submit, message, classes);