@adminforth/dashboard 1.3.0 → 1.4.0

package/dist/schema/widget.js

@@ -123,6 +123,7 @@ const QueryCalcItemSchema = z.object({
     as: z.string(),
 }).strict();
 const FormattingConfigSchema = z.record(z.string(), z.unknown());
+const VariablesConfigSchema = z.record(z.string(), z.unknown());
 export const QueryConfigSchema = z.object({
     resource: z.string(),
     select: z.array(QuerySelectItemSchema).optional(),
@@ -145,11 +146,13 @@ const FunnelQueryStepSchema = z.object({
 }).strict();
 export const FunnelQueryConfigSchema = z.object({
     steps: z.array(FunnelQueryStepSchema).min(1),
+    calcs: z.array(QueryCalcItemSchema).optional(),
 }).strict();
 const WidgetBaseSchema = z.object({
     id: z.string().optional(),
     group_id: z.string().optional(),
     label: z.string().optional(),
+    variables: VariablesConfigSchema.optional(),
     size: DashboardWidgetSizeSchema.optional(),
     width: z.number().positive('Width must be greater than 0').optional(),
     height: z.number().positive('Height must be greater than 0').optional(),
@@ -191,8 +194,8 @@ const BarChartSchema = ChartBaseSchema.extend({
 const StackedBarChartSchema = ChartBaseSchema.extend({
     type: z.literal('stacked_bar'),
     x: ChartFieldRefSchema,
-    y: ChartFieldRefSchema,
-    series: ChartSeriesRefSchema,
+    y: z.union([ChartFieldRefSchema, z.array(ChartFieldRefSchema).min(1)]),
+    series: ChartSeriesRefSchema.optional(),
     colors: z.array(z.string()).optional(),
 });
 const PieChartSchema = ChartBaseSchema.extend({
@@ -283,11 +286,11 @@ const ChartWidgetTargetConfigSchema = WidgetBaseSchema.extend({
 }).superRefine((widget, ctx) => {
     const isFunnelChart = widget.chart.type === 'funnel';
     const isFunnelQuery = 'steps' in widget.query;
-    if (isFunnelChart !== isFunnelQuery) {
+    if (isFunnelChart && !isFunnelQuery) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
             path: ['query'],
-            message: 'Funnel charts must use steps query, other charts must use resource query',
+            message: 'Funnel charts must use steps query',
         });
     }
 });

package/dist/services/widgetDataService.d.ts

@@ -1,10 +1,11 @@
 import type { IAdminForth } from 'adminforth';
-import type { DashboardWidgetConfig, DashboardWidgetData } from '../custom/model/dashboard.types.js';
+import type { DashboardWidgetConfig, DashboardWidgetData, DashboardVariables } from '../custom/model/dashboard.types.js';
 export type DashboardWidgetDataOptions = {
     pagination?: {
         page: number;
         pageSize: number;
     };
+    variables?: DashboardVariables;
 };
 export type WidgetDataService = {
     getWidgetData: (widget: DashboardWidgetConfig, options?: DashboardWidgetDataOptions) => Promise<DashboardWidgetData | null>;

package/dist/services/widgetDataService.js

@@ -10,15 +10,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Filters, Sorts } from 'adminforth';
 const NOW_MINUS_RE = /^(\d+)([dhw])$/;
 const CALC_IDENTIFIER_RE = /\b[a-zA-Z_][a-zA-Z0-9_]*\b/g;
+const LOOKUP_CALL_RE = /lookup\(\s*(\$variables(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\s*,\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/g;
+const VARIABLE_PATH_PREFIX_RE = /^\$variables\.?/;
 const SAFE_CALC_EXPRESSION_RE = /^[\d+\-*/().\s]+$/;
 export function getWidgetData(adminforth_1, widget_1) {
     return __awaiter(this, arguments, void 0, function* (adminforth, widget, options = {}) {
+        var _a, _b;
         if (!('query' in widget)) {
             return null;
         }
         const data = 'steps' in widget.query
-            ? yield getFunnelWidgetData(adminforth, widget.query)
-            : yield getQueryWidgetData(adminforth, widget.query);
+            ? yield getFunnelWidgetData(adminforth, widget.query, (_a = options.variables) !== null && _a !== void 0 ? _a : {})
+            : yield getQueryWidgetData(adminforth, widget.query, (_b = options.variables) !== null && _b !== void 0 ? _b : {});
         if (widget.target !== 'table' || !options.pagination) {
             return data;
         }
@@ -33,28 +36,39 @@ export function getWidgetData(adminforth_1, widget_1) {
             } });
     });
 }
-function getFunnelWidgetData(adminforth, query) {
+function getFunnelWidgetData(adminforth, query, variables) {
     return __awaiter(this, void 0, void 0, function* () {
+        var _a;
         const rows = yield Promise.all(query.steps.map((step) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const valueField = step.metric.as;
             const sourceRows = yield getResourceRows(adminforth, step.resource, step.filters);
-            return {
+            const row = {
                 name: step.name,
+                resource: step.resource,
                 [valueField]: calculateAggregate(sourceRows, step.metric),
             };
+            for (const calc of (_a = query.calcs) !== null && _a !== void 0 ? _a : []) {
+                row[calc.as] = evaluateCalc(calc.calc, row, variables);
+            }
+            return row;
         })));
         return {
             kind: 'aggregate',
-            columns: ['name', ...Array.from(new Set(query.steps.map((step) => step.metric.as)))],
+            columns: [
+                'name',
+                ...Array.from(new Set(query.steps.map((step) => step.metric.as))),
+                ...Array.from(new Set(((_a = query.calcs) !== null && _a !== void 0 ? _a : []).map((calc) => calc.as))),
+            ],
             rows,
         };
     });
 }
-function getQueryWidgetData(adminforth, query) {
+function getQueryWidgetData(adminforth, query, variables) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         const rows = yield getResourceRows(adminforth, query.resource, query.filters, getBackendSort(query.orderBy));
-        const selectedRows = buildQueryRows(rows, query);
+        const selectedRows = buildQueryRows(rows, query, variables);
         const orderedRows = sortRows(selectedRows, query.orderBy);
         const slicedRows = typeof query.limit === 'number'
             ? orderedRows.slice((_a = query.offset) !== null && _a !== void 0 ? _a : 0, ((_b = query.offset) !== null && _b !== void 0 ? _b : 0) + query.limit)
@@ -76,23 +90,23 @@ function getResourceRows(adminforth, resourceId, filters, sort) {
         return adminforth.resource(resourceId).list(normalizeFilters(filters), undefined, 0, sort);
     });
 }
-function buildQueryRows(rows, query) {
+function buildQueryRows(rows, query, variables) {
     var _a, _b;
     const select = (_a = query.select) !== null && _a !== void 0 ? _a : getDefaultSelect(rows);
     const groupBy = (_b = query.groupBy) !== null && _b !== void 0 ? _b : [];
     if (isAggregateQuery(query)) {
-        return buildGroupedRows(rows, select, groupBy, query.calcs);
+        return buildGroupedRows(rows, select, groupBy, variables, query.calcs);
     }
-    return rows.map((row) => buildPlainRow(row, select, query.calcs));
+    return rows.map((row) => buildPlainRow(row, select, query.calcs, variables));
 }
-function buildGroupedRows(rows, select, groupBy, calcs = []) {
+function buildGroupedRows(rows, select, groupBy, variables, calcs = []) {
     var _a;
     const groups = new Map();
     const effectiveGroupBy = groupBy.length
         ? groupBy
         : select.filter(isFieldSelectItem).map((item) => ({ field: item.field, as: item.as, grain: item.grain }));
     if (!effectiveGroupBy.length) {
-        const values = calculateGroupValues(rows, select, calcs);
+        const values = calculateGroupValues(rows, select, calcs, variables);
         return Object.keys(values).length ? [values] : [];
     }
     for (const row of rows) {
@@ -107,10 +121,10 @@ function buildGroupedRows(rows, select, groupBy, calcs = []) {
         group.rows.push(row);
         groups.set(key, group);
     }
-    return Array.from(groups.values()).map((group) => (Object.assign(Object.assign({}, group.values), calculateGroupValues(group.rows, select, calcs))));
+    return Array.from(groups.values()).map((group) => (Object.assign(Object.assign({}, group.values), calculateGroupValues(group.rows, select, calcs, variables, group.values))));
 }
-function calculateGroupValues(rows, select, calcs) {
-    const values = {};
+function calculateGroupValues(rows, select, calcs, variables, baseValues = {}) {
+    const values = Object.assign({}, baseValues);
     for (const item of select) {
         if (isAggregateSelectItem(item)) {
             const filteredRows = item.filters
@@ -120,11 +134,11 @@ function calculateGroupValues(rows, select, calcs) {
         }
     }
     for (const item of [...select.filter(isCalcSelectItem), ...calcs]) {
-        values[item.as] = evaluateCalc(item.calc, values);
+        values[item.as] = evaluateCalc(item.calc, values, variables);
     }
     return values;
 }
-function buildPlainRow(row, select, calcs = []) {
+function buildPlainRow(row, select, calcs = [], variables) {
     var _a;
     const values = {};
     for (const item of select) {
@@ -135,7 +149,7 @@ function buildPlainRow(row, select, calcs = []) {
         }
     }
     for (const item of [...select.filter(isCalcSelectItem), ...calcs]) {
-        values[item.as] = evaluateCalc(item.calc, values);
+        values[item.as] = evaluateCalc(item.calc, values, variables);
     }
     return values;
 }
@@ -174,13 +188,29 @@ function calculateMedian(values) {
         ? sorted[middle]
         : (sorted[middle - 1] + sorted[middle]) / 2;
 }
-function evaluateCalc(calc, values) {
-    const expression = calc.replace(CALC_IDENTIFIER_RE, (name) => String(toFiniteNumber(values[name])));
+function evaluateCalc(calc, values, variables) {
+    const expression = calc
+        .replace(LOOKUP_CALL_RE, (_match, path, keyField, defaultValue) => {
+        var _a;
+        const map = resolveVariablePath(variables, path);
+        const key = String((_a = values[keyField]) !== null && _a !== void 0 ? _a : '');
+        return String(toFiniteNumber(isRecord(map) && Object.prototype.hasOwnProperty.call(map, key)
+            ? map[key]
+            : Number(defaultValue)));
+    })
+        .replace(CALC_IDENTIFIER_RE, (name) => String(toFiniteNumber(values[name])));
     if (!SAFE_CALC_EXPRESSION_RE.test(expression)) {
         throw new Error(`Unsupported calc expression: ${calc}`);
     }
     return Function(`"use strict"; return (${expression});`)();
 }
+function resolveVariablePath(variables, path) {
+    return path
+        .replace(VARIABLE_PATH_PREFIX_RE, '')
+        .split('.')
+        .filter(Boolean)
+        .reduce((current, segment) => isRecord(current) ? current[segment] : undefined, variables);
+}
 function sortRows(rows, orderBy = []) {
     if (!orderBy.length) {
         return rows;

package/endpoint/dashboard.ts

@@ -1,12 +1,35 @@
-import type { IHttpServer } from 'adminforth';
-import { DashboardApiResponseSchema, SlugRequestSchema } from '../schema/api.js';
-import type { DashboardRecord } from '../services/dashboardConfigService.js';
+import type { AdminUser, IHttpServer } from 'adminforth';
+import { normalizeDashboardConfig } from '../custom/model/dashboard.types.js';
+import type { DashboardConfig, DashboardWidgetConfig } from '../custom/model/dashboard.types.js';
+import {
+  DashboardApiResponseSchema,
+  DashboardConfigZodSchema,
+  SetDashboardConfigRequestSchema,
+  SlugRequestSchema,
+} from '../schema/api.js';
+import type { DashboardWidgetConfigValidationError } from '../schema/widget.js';
+import type { DashboardRecord, PersistedDashboardResponse } from '../services/dashboardConfigService.js';
 import { buildDashboardResponse } from '../services/dashboardConfigService.js';
 
 type DashboardEndpointsContext = {
+  canEditDashboard: (adminUser: AdminUser) => boolean;
   getDashboardRecord: (slug: string) => Promise<DashboardRecord | null>;
+  persistDashboardConfig: (
+    dashboard: DashboardRecord,
+    config: DashboardConfig,
+  ) => Promise<PersistedDashboardResponse>;
+  validateDashboardWidgetApiConfig: (
+    widget: DashboardWidgetConfig,
+  ) => DashboardWidgetConfigValidationError[];
 };
 
+function formatDashboardConfigValidationErrors(error: { issues: { path: PropertyKey[], message: string }[] }) {
+  return error.issues.map((issue) => ({
+    field: issue.path.length ? issue.path.map(String).join('.') : 'config',
+    message: issue.message,
+  }));
+}
+
 export function registerDashboardEndpoints(
   server: IHttpServer,
   ctx: DashboardEndpointsContext,
@@ -29,4 +52,54 @@ export function registerDashboardEndpoints(
       return buildDashboardResponse(dashboard);
     },
   });
+
+  server.endpoint({
+    method: 'POST',
+    path: '/dashboard/set_dashboard_config',
+    description: 'Replaces one dashboard configuration, including groups and widgets. Superadmin only.',
+    request_schema: SetDashboardConfigRequestSchema,
+    response_schema: DashboardApiResponseSchema,
+    handler: async ({ body, adminUser, response }) => {
+      if (!ctx.canEditDashboard(adminUser)) {
+        response.setStatus(403);
+        return { error: 'Dashboard edit is not allowed' };
+      }
+
+      const slug = String(body?.slug || 'default');
+      const dashboard = await ctx.getDashboardRecord(slug);
+
+      if (!dashboard) {
+        response.setStatus(404);
+        return { error: 'Dashboard not found' };
+      }
+
+      const normalizedConfig = normalizeDashboardConfig(body?.config);
+      const parsedConfig = DashboardConfigZodSchema.safeParse(normalizedConfig);
+
+      if (!parsedConfig.success) {
+        response.setStatus(422);
+        return {
+          error: 'Invalid dashboard config',
+          validationErrors: formatDashboardConfigValidationErrors(parsedConfig.error),
+        };
+      }
+
+      const widgetValidationErrors = parsedConfig.data.widgets.flatMap((widget, index) => (
+        ctx.validateDashboardWidgetApiConfig(widget as DashboardWidgetConfig).map((error) => ({
+          ...error,
+          field: `widgets.${index}.${error.field}`,
+        }))
+      ));
+
+      if (widgetValidationErrors.length) {
+        response.setStatus(422);
+        return {
+          error: 'Invalid dashboard config',
+          validationErrors: widgetValidationErrors,
+        };
+      }
+
+      return ctx.persistDashboardConfig(dashboard, parsedConfig.data as DashboardConfig);
+    },
+  });
 }

package/endpoint/widgets.ts

@@ -3,7 +3,7 @@ import { randomUUID } from 'crypto';
 import {
   normalizeDashboardWidgetConfig,
 } from '../custom/model/dashboard.types.js';
-import type { DashboardConfig, DashboardWidgetConfig } from '../custom/model/dashboard.types.js';
+import type { DashboardConfig, DashboardVariables, DashboardWidgetConfig } from '../custom/model/dashboard.types.js';
 import {
   DashboardApiResponseSchema,
   DashboardWidgetDataResponseSchema,
@@ -31,7 +31,10 @@ type WidgetEndpointsContext = {
   ) => DashboardWidgetConfigValidationError[];
   getWidgetData: (
     widget: DashboardWidgetConfig,
-    options?: { pagination?: { page: number, pageSize: number } },
+    options?: {
+      pagination?: { page: number, pageSize: number },
+      variables?: DashboardVariables,
+    },
   ) => Promise<unknown>;
 };
 
@@ -301,6 +304,7 @@ export function registerWidgetEndpoints(
         widget,
         data: await ctx.getWidgetData(widget, {
           pagination: body?.pagination,
+          variables: widget.variables,
         }),
       };
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/dashboard",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/schema/api.ts

@@ -50,6 +50,11 @@ export const SlugRequestZodSchema = z.object({
   slug: z.string().optional(),
 }).strict()
 
+export const SetDashboardConfigRequestZodSchema = z.object({
+  slug: z.string().optional(),
+  config: z.record(z.string(), z.unknown()),
+}).strict()
+
 export const GroupIdRequestZodSchema = z.object({
   slug: z.string().optional(),
   groupId: z.string(),
@@ -100,6 +105,7 @@ export const DashboardResponseSchema = toAdminForthJsonSchema(DashboardResponseZ
 export const DashboardApiResponseSchema = toAdminForthJsonSchema(DashboardApiResponseZodSchema)
 export const DashboardWidgetDataResponseSchema = toAdminForthJsonSchema(DashboardWidgetDataResponseZodSchema)
 export const SlugRequestSchema = toAdminForthJsonSchema(SlugRequestZodSchema)
+export const SetDashboardConfigRequestSchema = toAdminForthJsonSchema(SetDashboardConfigRequestZodSchema)
 export const GroupIdRequestSchema = toAdminForthJsonSchema(GroupIdRequestZodSchema)
 export const MoveGroupRequestSchema = toAdminForthJsonSchema(MoveGroupRequestZodSchema)
 export const SetGroupConfigRequestSchema = toAdminForthJsonSchema(SetGroupConfigRequestZodSchema)

package/schema/widget.ts

@@ -145,6 +145,7 @@ const QueryCalcItemSchema = z.object({
 }).strict()
 
 const FormattingConfigSchema = z.record(z.string(), z.unknown())
+const VariablesConfigSchema = z.record(z.string(), z.unknown())
 
 export const QueryConfigSchema = z.object({
   resource: z.string(),
@@ -170,12 +171,14 @@ const FunnelQueryStepSchema = z.object({
 
 export const FunnelQueryConfigSchema = z.object({
   steps: z.array(FunnelQueryStepSchema).min(1),
+  calcs: z.array(QueryCalcItemSchema).optional(),
 }).strict()
 
 const WidgetBaseSchema = z.object({
   id: z.string().optional(),
   group_id: z.string().optional(),
   label: z.string().optional(),
+  variables: VariablesConfigSchema.optional(),
   size: DashboardWidgetSizeSchema.optional(),
   width: z.number().positive('Width must be greater than 0').optional(),
   height: z.number().positive('Height must be greater than 0').optional(),
@@ -224,8 +227,8 @@ const BarChartSchema = ChartBaseSchema.extend({
 const StackedBarChartSchema = ChartBaseSchema.extend({
   type: z.literal('stacked_bar'),
   x: ChartFieldRefSchema,
-  y: ChartFieldRefSchema,
-  series: ChartSeriesRefSchema,
+  y: z.union([ChartFieldRefSchema, z.array(ChartFieldRefSchema).min(1)]),
+  series: ChartSeriesRefSchema.optional(),
   colors: z.array(z.string()).optional(),
 })
 
@@ -327,11 +330,11 @@ const ChartWidgetTargetConfigSchema = WidgetBaseSchema.extend({
   const isFunnelChart = widget.chart.type === 'funnel'
   const isFunnelQuery = 'steps' in widget.query
 
-  if (isFunnelChart !== isFunnelQuery) {
+  if (isFunnelChart && !isFunnelQuery) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
       path: ['query'],
-      message: 'Funnel charts must use steps query, other charts must use resource query',
+      message: 'Funnel charts must use steps query',
     })
   }
 })

package/services/widgetDataService.ts

@@ -8,6 +8,7 @@ import type {
 import type {
   DashboardWidgetConfig,
   DashboardWidgetData,
+  DashboardVariables,
   FilterExpression,
   FunnelQueryConfig,
   QueryAggregateOperation,
@@ -26,6 +27,7 @@ export type DashboardWidgetDataOptions = {
     page: number;
     pageSize: number;
   };
+  variables?: DashboardVariables;
 };
 
 type DashboardWidgetFilters =
@@ -40,6 +42,8 @@ type QueryRowGroup = {
 
 const NOW_MINUS_RE = /^(\d+)([dhw])$/;
 const CALC_IDENTIFIER_RE = /\b[a-zA-Z_][a-zA-Z0-9_]*\b/g;
+const LOOKUP_CALL_RE = /lookup\(\s*(\$variables(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\s*,\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/g;
+const VARIABLE_PATH_PREFIX_RE = /^\$variables\.?/;
 const SAFE_CALC_EXPRESSION_RE = /^[\d+\-*/().\s]+$/;
 
 export type WidgetDataService = {
@@ -56,8 +60,8 @@ export async function getWidgetData(
   }
 
   const data = 'steps' in widget.query
-    ? await getFunnelWidgetData(adminforth, widget.query)
-    : await getQueryWidgetData(adminforth, widget.query);
+    ? await getFunnelWidgetData(adminforth, widget.query, options.variables ?? {})
+    : await getQueryWidgetData(adminforth, widget.query, options.variables ?? {});
 
   if (widget.target !== 'table' || !options.pagination) {
     return data;
@@ -82,20 +86,32 @@ export async function getWidgetData(
 async function getFunnelWidgetData(
   adminforth: IAdminForth,
   query: FunnelQueryConfig,
+  variables: DashboardVariables,
 ): Promise<DashboardWidgetData> {
   const rows = await Promise.all(query.steps.map(async (step) => {
     const valueField = step.metric.as;
     const sourceRows = await getResourceRows(adminforth, step.resource, step.filters);
 
-    return {
+    const row: Record<string, unknown> = {
       name: step.name,
+      resource: step.resource,
       [valueField]: calculateAggregate(sourceRows, step.metric),
     };
+
+    for (const calc of query.calcs ?? []) {
+      row[calc.as] = evaluateCalc(calc.calc, row, variables);
+    }
+
+    return row;
   }));
 
   return {
     kind: 'aggregate',
-    columns: ['name', ...Array.from(new Set(query.steps.map((step) => step.metric.as)))],
+    columns: [
+      'name',
+      ...Array.from(new Set(query.steps.map((step) => step.metric.as))),
+      ...Array.from(new Set((query.calcs ?? []).map((calc) => calc.as))),
+    ],
     rows,
   };
 }
@@ -103,9 +119,10 @@ async function getFunnelWidgetData(
 async function getQueryWidgetData(
   adminforth: IAdminForth,
   query: QueryConfig,
+  variables: DashboardVariables,
 ): Promise<DashboardWidgetData> {
   const rows = await getResourceRows(adminforth, query.resource, query.filters, getBackendSort(query.orderBy));
-  const selectedRows = buildQueryRows(rows, query);
+  const selectedRows = buildQueryRows(rows, query, variables);
   const orderedRows = sortRows(selectedRows, query.orderBy);
   const slicedRows = typeof query.limit === 'number'
     ? orderedRows.slice(query.offset ?? 0, (query.offset ?? 0) + query.limit)
@@ -144,21 +161,22 @@ async function getResourceRows(
   );
 }
 
-function buildQueryRows(rows: Record<string, unknown>[], query: QueryConfig) {
+function buildQueryRows(rows: Record<string, unknown>[], query: QueryConfig, variables: DashboardVariables) {
   const select = query.select ?? getDefaultSelect(rows);
   const groupBy = query.groupBy ?? [];
 
   if (isAggregateQuery(query)) {
-    return buildGroupedRows(rows, select, groupBy, query.calcs);
+    return buildGroupedRows(rows, select, groupBy, variables, query.calcs);
   }
 
-  return rows.map((row) => buildPlainRow(row, select, query.calcs));
+  return rows.map((row) => buildPlainRow(row, select, query.calcs, variables));
 }
 
 function buildGroupedRows(
   rows: Record<string, unknown>[],
   select: QuerySelectItem[],
   groupBy: QueryGroupByItem[],
+  variables: DashboardVariables,
   calcs: QueryCalcSelectItem[] = [],
 ) {
   const groups = new Map<string, QueryRowGroup>();
@@ -167,7 +185,7 @@ function buildGroupedRows(
     : select.filter(isFieldSelectItem).map((item) => ({ field: item.field, as: item.as, grain: item.grain }));
 
   if (!effectiveGroupBy.length) {
-    const values = calculateGroupValues(rows, select, calcs);
+    const values = calculateGroupValues(rows, select, calcs, variables);
     return Object.keys(values).length ? [values] : [];
   }
 
@@ -188,7 +206,7 @@ function buildGroupedRows(
 
   return Array.from(groups.values()).map((group) => ({
     ...group.values,
-    ...calculateGroupValues(group.rows, select, calcs),
+    ...calculateGroupValues(group.rows, select, calcs, variables, group.values),
   }));
 }
 
@@ -196,8 +214,10 @@ function calculateGroupValues(
   rows: Record<string, unknown>[],
   select: QuerySelectItem[],
   calcs: QueryCalcSelectItem[],
+  variables: DashboardVariables,
+  baseValues: Record<string, unknown> = {},
 ) {
-  const values: Record<string, unknown> = {};
+  const values: Record<string, unknown> = { ...baseValues };
 
   for (const item of select) {
     if (isAggregateSelectItem(item)) {
@@ -210,7 +230,7 @@ function calculateGroupValues(
   }
 
   for (const item of [...select.filter(isCalcSelectItem), ...calcs]) {
-    values[item.as] = evaluateCalc(item.calc, values);
+    values[item.as] = evaluateCalc(item.calc, values, variables);
   }
 
   return values;
@@ -220,6 +240,7 @@ function buildPlainRow(
   row: Record<string, unknown>,
   select: QuerySelectItem[],
   calcs: QueryCalcSelectItem[] = [],
+  variables: DashboardVariables,
 ) {
   const values: Record<string, unknown> = {};
 
@@ -232,7 +253,7 @@ function buildPlainRow(
   }
 
   for (const item of [...select.filter(isCalcSelectItem), ...calcs]) {
-    values[item.as] = evaluateCalc(item.calc, values);
+    values[item.as] = evaluateCalc(item.calc, values, variables);
   }
 
   return values;
@@ -282,8 +303,17 @@ function calculateMedian(values: number[]) {
     : (sorted[middle - 1] + sorted[middle]) / 2;
 }
 
-function evaluateCalc(calc: string, values: Record<string, unknown>) {
-  const expression = calc.replace(CALC_IDENTIFIER_RE, (name) => String(toFiniteNumber(values[name])));
+function evaluateCalc(calc: string, values: Record<string, unknown>, variables: DashboardVariables) {
+  const expression = calc
+    .replace(LOOKUP_CALL_RE, (_match, path: string, keyField: string, defaultValue: string) => {
+      const map = resolveVariablePath(variables, path);
+      const key = String(values[keyField] ?? '');
+
+      return String(toFiniteNumber(isRecord(map) && Object.prototype.hasOwnProperty.call(map, key)
+        ? map[key]
+        : Number(defaultValue)));
+    })
+    .replace(CALC_IDENTIFIER_RE, (name) => String(toFiniteNumber(values[name])));
 
   if (!SAFE_CALC_EXPRESSION_RE.test(expression)) {
     throw new Error(`Unsupported calc expression: ${calc}`);
@@ -292,6 +322,14 @@ function evaluateCalc(calc: string, values: Record<string, unknown>) {
   return Function(`"use strict"; return (${expression});`)();
 }
 
+function resolveVariablePath(variables: DashboardVariables, path: string) {
+  return path
+    .replace(VARIABLE_PATH_PREFIX_RE, '')
+    .split('.')
+    .filter(Boolean)
+    .reduce<unknown>((current, segment) => isRecord(current) ? current[segment] : undefined, variables);
+}
+
 function sortRows(rows: Record<string, unknown>[], orderBy: QueryOrderByItem[] = []) {
   if (!orderBy.length) {
     return rows;