Developing a custom chart

custom-chart-builder/
├── custom-chart-build-output/  # Production build files
├── projects/
│   ├── builder/                # Angular application for the chart builder UI
│   └── custom-chart/           # Your custom chart implementation
│       └── src/
│           ├── chart.ts        # Main chart rendering logic
│           ├── chart.css       # Chart styles
│           ├── manifest.json   # Data slots, chart options, and translations
│           ├── icon.svg        # Chart icon
│           └── index.ts        # Entry point

export { render, resize, buildQuery } from './chart';

{
  "slots": [
    { "name": "revenue", "label": "Revenue", "type": "numeric", "canAcceptDataIndependentOf": ["target"] },
    { "name": "target",  "label": "Target",  "type": "numeric", "canAcceptDataIndependentOf": ["revenue"] }
  ]
}

{
  "options": [
    {
      "key": "layout",
      "type": "group",
      "open": true,
      "children": [
        {
          "key": "layout.mode",
          "control": {
            "type": "picker",
            "default": "grouped",
            "enum": ["grouped", "stacked", "percentage"]
          }
        },
        {
          "key": "layout.orientation",
          "control": {
            "type": "radio-button-group",
            "default": "vertical",
            "enum": ["horizontal", "vertical"]
          }
        },
        {
          "key": "layout.maxCategories",
          "control": {
            "type": "number-field",
            "default": 10,
            "min": 1,
            "max": 100,
            "step": 1
          }
        }
      ]
    }
  ],
  "translations": {
    "en": {
      "options": {
        "groups": {
          "layout": { "label": "Layout" }
        },
        "layout.mode": {
          "label": "Display mode",
          "enum": {
            "grouped": "Grouped",
            "stacked": "Stacked",
            "percentage": "100% stacked"
          }
        },
        "layout.orientation": {
          "label": "Orientation",
          "enum": {
            "horizontal": "Horizontal",
            "vertical": "Vertical"
          }
        },
        "layout.maxCategories": {
          "label": "Maximum categories"
        }
      }
    }
  }
}

{
  "layout": {
    "mode": "stacked",
    "orientation": "horizontal",
    "maxCategories": 10
  }
}

[
  {
    "key": "layout.mode",
    "control": { "type": "picker", "default": "grouped", "enum": ["grouped", "stacked"] }
  },
  {
    "key": "layout.showValues",
    "control": { "type": "switch", "default": true }
  }
]

{
  "layout": {
    "mode": "grouped",
    "showValues": true
  }
}

[
  {
    "key": "layout.mode",
    "control": {
      "type": "picker",
      "default": "grouped",
      "enum": ["grouped", "stacked", "percentage"]
    }
  },
  {
    "key": "layout.orientation",
    "control": {
      "type": "radio-button-group",
      "default": "vertical",
      "enum": ["horizontal", "vertical"]
    }
  }
]

{
  "key": "title.alignment",
  "control": {
    "type": "action-button-group",
    "default": ["center"],
    "selects": "single",
    "values": {
      "left": { "iconName": "alignLeft", "label": "Align left" },
      "center": { "iconName": "alignCenter", "label": "Align center" },
      "right": { "iconName": "alignRight", "label": "Align right" }
    }
  }
}

const alignment = Array.isArray(options.title?.alignment)
  ? options.title.alignment[0]
  : options.title?.alignment;

[
  {
    "key": "appearance.interactive",
    "control": { "type": "switch", "default": true }
  },
  {
    "key": "appearance.opacity",
    "control": { "type": "slider", "default": 85, "min": 10, "max": 100, "step": 5 }
  },
  {
    "key": "layout.maxCategories",
    "control": {
      "type": "number-field",
      "default": 10,
      "min": 1,
      "max": 100,
      "step": 1,
      "placeholder": "Number of categories"
    }
  },
  {
    "key": "title.subtitle",
    "control": {
      "type": "text-field",
      "default": "Revenue by product",
      "placeholder": "Enter a subtitle"
    }
  },
  {
    "key": "title.text",
    "control": {
      "type": "multi-language-field",
      "default": {
        "en": "Regional performance",
        "fr": "Performance régionale"
      },
      "placeholder": "Enter a chart title"
    }
  }
]

const title = options.title?.text?.[language] ?? options.title?.text?.en ?? '';

[
  {
    "key": "appearance.color",
    "control": { "type": "color-picker", "default": "#3366cc" }
  },
  {
    "key": "appearance.palette",
    "control": {
      "type": "color-palette-picker",
      "default": "Spectrum",
      "enum": ["Spectrum", "Plasma", "Inferno"]
    }
  },
  {
    "key": "appearance.ranges",
    "control": {
      "type": "color-range",
      "default": [
        { "color": "#d73027", "value": 0 },
        { "color": "#fee08b", "value": 50 },
        { "color": "#1a9850", "value": 100 }
      ],
      "percentage": true,
      "editRangeSize": true,
      "minimumRangeSize": 2,
      "noAlphaChannel": true,
      "reverse": false,
      "debounce": 200
    }
  }
]

{
  "key": "legend.position",
  "control": {
    "type": "position-picker",
    "default": "topRight",
    "positions": [
      "topLeft",
      "top",
      "topRight",
      "left",
      "center",
      "right",
      "bottomLeft",
      "bottom",
      "bottomRight"
    ]
  }
}

{
  "key": "layout.padding",
  "control": {
    "type": "positions-number-field",
    "default": { "top": 8, "right": 12, "bottom": 8, "left": 12 },
    "positions": ["top", "right", "bottom", "left"],
    "positionConfiguration": {
      "top": { "min": 0, "max": 100, "step": 1, "default": 8 },
      "right": { "min": 0, "max": 100, "step": 1, "default": 12 },
      "bottom": { "min": 0, "max": 100, "step": 1, "default": 8 },
      "left": { "min": 0, "max": 100, "step": 1, "default": 12 }
    }
  }
}

{
  "translations": {
    "en": {
      "slots": {
        "category": { "label": "Category" }
      },
      "options": {
        "groups": {
          "layout": { "label": "Layout" }
        },
        "layout.mode": {
          "label": "Display mode",
          "tooltip": "Choose how multiple series are combined.",
          "enum": {
            "grouped": "Grouped",
            "stacked": "Stacked",
            "percentage": "100% stacked"
          }
        },
        "title.text": {
          "label": "Chart title",
          "placeholder": "Enter a chart title"
        }
      }
    },
    "fr": {
      "slots": {
        "category": { "label": "Catégorie" }
      },
      "options": {
        "groups": {
          "layout": { "label": "Disposition" }
        },
        "layout.mode": {
          "label": "Mode d'affichage",
          "enum": {
            "grouped": "Groupé",
            "stacked": "Empilé",
            "percentage": "Empilé à 100 %"
          }
        },
        "title.text": {
          "label": "Titre du graphique",
          "placeholder": "Saisissez un titre"
        }
      }
    }
  }
}

{
  "slots": [
    {
      "name": "category",
      "rotate": false,
      "label": "Category",
      "type": "categorical",
      "options": {
        "isBinningDisabled": true,
        "areDatetimeOptionsEnabled": true
      },
      "isRequired": true,
      "position": "bottom"
    },
    {
      "name": "measure",
      "rotate": true,
      "label": "Value",
      "type": "numeric",
      "options": {
        "isAggregationDisabled": false
      },
      "isRequired": true,
      "position": "middle"
    },
    {
      "name": "legend",
      "rotate": false,
      "label": "Legend",
      "type": "categorical",
      "options": {
        "isBinningDisabled": true
      },
      "isRequired": false,
      "position": "right"
    }
  ],
  "options": [
    {
      "key": "bars",
      "type": "group",
      "open": true,
      "children": [
        {
          "key": "bars.roundedCorners",
          "control": {
            "type": "slider",
            "default": 4,
            "min": 0,
            "max": 20,
            "step": 1
          }
        },
        {
          "key": "bars.showValue",
          "control": { "type": "switch", "default": false }
        },
        {
          "key": "bars.color",
          "control": { "type": "color-picker", "default": "#3366cc" }
        }
      ]
    }
  ],
  "translations": {
    "en": {
      "slots": {
        "category": { "label": "Category" },
        "measure": { "label": "Value" },
        "legend": { "label": "Legend" }
      },
      "options": {
        "groups": {
          "bars": { "label": "Bars" }
        },
        "bars.roundedCorners": { "label": "Rounded corners" },
        "bars.showValue": { "label": "Show values" },
        "bars.color": { "label": "Bar color" }
      }
    }
  }
}

// Data response for a single query
[
  // All data returned by the query
  [
    // First row of data
    [
      // Hierarchy data (text values), returns:
      //  - Value as stored in the data source as "id"
      //  - Translated "name" & "colors" as defined in the column's Hierarchy
      // https://developer.luzmo.com/api/updateHierarchy
      { 
        id: 'Asia-Pacific', 
        name: { en: 'Asia-Pacific', nl: 'Azië-Pacific', fr: 'Asie-Pacifique' }, 
        color: null
      }, 
      // Datetime data returned as RFC3339 datetime format
      '2024-01-01T00:00:00.000Z',
      // Numeric data
      3959978.123
    ], 
    // Second row of data
    [
      { 
        id: 'Asia-Pacific', 
        name: { en: 'Asia-Pacific', nl: 'Azië-Pacific', fr: 'Asie-Pacifique' }, 
        color: null
      }, 
      '2024-01-01T00:00:00.000Z',
      3959978.123
    ], 
    ...
  ]
]

const hasLegend = (slots.find(s => s.name === 'legend')?.content?.length ?? 0) > 0;

data.forEach((row) => {
  const category = row[0];
  const legend = hasLegend ? row[1] : undefined;
  const measure = hasLegend ? row[2] : row[1];
  // category.id    -> 'Asia-Pacific'
  // legend         -> '2024-01-01T00:00:00.000Z' (undefined when the legend slot is empty)
  // measure        -> 3959978
});

// Array with two data responses from two queries
[
  // First data response (revenue query result)
  [
    // First row response
    [ 827.31 ]
  ],
  // Second data response (target query result)
  [
    // First row response
    [ 1200 ]
  ]
]

// Import required types
import type { ItemData, Slot, SlotConfig, ThemeConfig } from '@luzmo/dashboard-contents-types';
import * as d3 from 'd3';

interface ChartParams {
  container: HTMLElement;           // The DOM element where your chart will be rendered
  data: ItemData['data'];           // The data rows from the server
  slots: Slot[];                    // The filled slots with column mappings
  slotConfigurations: SlotConfig[]; // The configuration of available slots
  options: Record<string, any> & { theme?: ThemeConfig }; // Custom option values plus the dashboard theme
  timezoneId?: string;              // Dashboard IANA timezone (e.g., 'America/New_York')
  language: string;                 // Current language code (e.g., 'en')
  dimensions: {                     // Width and height of the chart container in pixels
    width: number;
    height: number;
  };
}

// Render function implementation
export function render({
  container,
  data = [],
  slots = [],
  slotConfigurations = [],
  options = {},
  timezoneId,
  language = 'en',
  dimensions: { width = 600, height = 400 } = {}
}: ChartParams): void {
  // 1. Clear the container
  container.innerHTML = '';

  // 2. Check if data exists
  const rows = data ?? [];
  const hasData = rows.length > 0;

  if (!hasData) {
    container.textContent = 'Add data to preview this chart.';
    return;
  }

  // 3. Extract and process data
  const chartData = rows.map(row => {
    const rawCategory = row[0];
    let categoryValue: unknown = rawCategory ?? 'Unknown';

    if (typeof rawCategory === 'object' && rawCategory !== null && 'name' in rawCategory) {
      const categoryObject = rawCategory as { name?: string | Record<string, string>; id?: string };
      categoryValue =
        typeof categoryObject.name === 'object' && categoryObject.name !== null
          ? categoryObject.name[language] ?? categoryObject.name.en ?? Object.values(categoryObject.name)[0]
          : categoryObject.name ?? categoryObject.id ?? 'Unknown';
    }

    return {
      category: String(categoryValue),
      value: Number(row[1] ?? 0)
    };
  });

  // 4. Create visualization (SVG, Canvas, etc.)
  const svg = d3.select(container)
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  // 5. Add your chart elements here...

  // 6. Store state for resize
  (container as any).__chartData = chartData;
}

{
  bars: {
    roundedCorners: 4,
    showValue: false,
    color: '#3366cc'
  },
  theme: {
    // Active dashboard theme
  }
}

export function resize({
  container,
  slots = [],
  slotConfigurations = [],
  options = {},
  language = 'en',
  dimensions: { width = 600, height = 400 } = {}
}: ChartParams): void {
  const chartData = (container as any).__chartData ?? [];

  const svg = d3.select(container)
    .select<SVGSVGElement>('svg')
    .attr('width', width)
    .attr('height', height);

  // Update scales, axes, and marks using chartData and the new dimensions.
  // If your chart is simpler, you can also call a shared updateChart(svg, chartData, dimensions) helper.
}

{
  "slots": [
    {
      "name": "revenue",
      "label": "Revenue",
      "type": "numeric",
      "canAcceptDataIndependentOf": ["target"]
    },
    {
      "name": "target",
      "label": "Target",
      "type": "numeric",
      "canAcceptDataIndependentOf": ["revenue"]
    }
  ]
}

import type {
  ItemQuery,
  ItemQueryDimension,
  ItemQueryMeasure,
  Slot,
  SlotConfig
} from '@luzmo/dashboard-contents-types';

interface BuildQueryParams {
  slots: Slot[];
  slotConfigurations: SlotConfig[];
}

export function buildQuery({
  slots = [],
  slotConfigurations = []
}: BuildQueryParams): ItemQuery[] {
  const dimensions: ItemQueryDimension[] = [];
  const measures: ItemQueryMeasure[] = [];
  
  // Extract category dimension
  const categorySlot = slots.find(slot => slot.name === 'category');
  const categoryContent = categorySlot?.content;

  if (categoryContent?.length > 0) {
    const [category] = categoryContent;
    dimensions.push({
      dataset_id: category.datasetId,
      column_id: category.columnId,
      level: category.level || 1
    });
  }

  // Extract measure
  const measureSlot = slots.find(slot => slot.name === 'measure');
  const measureContent = measureSlot?.content;

  if (measureContent?.length > 0) {
    const [measure] = measureContent;

    // Handle different types of measures
    if (measure.aggregationFunc && ['sum', 'average', 'min', 'max', 'count'].includes(measure.aggregationFunc)) {
      measures.push({
        dataset_id: measure.datasetId,
        column_id: measure.columnId,
        aggregation: { type: measure.aggregationFunc }
      });
    }
    else {
      measures.push({
        dataset_id: measure.datasetId,
        column_id: measure.columnId
      });
    }
  }

  // Add ordering by category, if category slot is filled.
  const order: ItemQuery['order'] = categoryContent?.[0]
    ? [{
        dataset_id: categoryContent[0].datasetId,
        column_id: categoryContent[0].columnId,
        order: 'asc'
      }]
    : [];
  
  // Add default limit of 10000 rows for performance reasons.
  const limit = { by: 10000, offset: 0 };

  const query: ItemQuery = {
    dimensions,
    measures,
    order,
    limit
  };

  return [query];
}

import type {
  ItemQuery,
  ItemQueryMeasure,
  Slot,
  SlotConfig
} from '@luzmo/dashboard-contents-types';

interface BuildQueryParams {
  slots: Slot[];
  slotConfigurations: SlotConfig[];
}

function getFirstMeasure(slots: Slot[], slotName: string): ItemQueryMeasure | undefined {
  const content = slots.find(slot => slot.name === slotName)?.content?.[0];

  if (!content) {
    return undefined;
  }

  const measure: ItemQueryMeasure = {
    dataset_id: content.datasetId,
    column_id: content.columnId
  };

  if (content.aggregationFunc) {
    measure.aggregation = { type: content.aggregationFunc };
  }

  return measure;
}

export function buildQuery({
  slots = [],
  slotConfigurations = []
}: BuildQueryParams): ItemQuery[] {
  const revenueMeasure = getFirstMeasure(slots, 'revenue');
  const targetMeasure = getFirstMeasure(slots, 'target');
  const queries: ItemQuery[] = [];

  if (revenueMeasure) {
    queries.push({
      measures: [revenueMeasure],
      limit: { by: 1, offset: 0 }
    });
  }

  if (targetMeasure) {
    queries.push({
      measures: [targetMeasure],
      limit: { by: 1, offset: 0 }
    });
  }

  return queries;
}

import { formatter, getValueForFormatter } from '@luzmo/analytics-components-kit/utils';

import { formatter, getValueForFormatter } from '@luzmo/analytics-components-kit/utils';

export function render({ data, slots, timezoneId, language = 'en' }: ChartParams): void {
  const rows = data ?? [];
  const categorySlot = slots.find(slot => slot.name === 'category');
  const measureSlot = slots.find(slot => slot.name === 'measure');
  const categoryContent = categorySlot?.content?.[0];
  const measureContent = measureSlot?.content?.[0];

  const measureFormatter = measureContent
    ? formatter(measureContent)
    : (val: any) => String(val);

  const categoryFormatter = categoryContent
    ? formatter(categoryContent, {
        level: categoryContent.level ?? 9,
        locale: language
      })
    : (val: any) => String(val);

  const formattedData = rows.map(row => {
    const rawCategoryValue =
      typeof row[0] === 'object' && row[0] !== null && 'name' in row[0]
        ? (row[0] as { name?: string | Record<string, string> }).name
        : row[0] ?? 'Unknown';
    const rawCategory =
      typeof rawCategoryValue === 'object' && rawCategoryValue !== null
        ? (rawCategoryValue as Record<string, string>)[language] ??
          (rawCategoryValue as Record<string, string>).en ??
          Object.values(rawCategoryValue)[0]
        : rawCategoryValue;

    const categoryValue =
      categoryContent?.type === 'datetime'
        ? (getValueForFormatter(rawCategory, categoryContent, timezoneId) ?? rawCategory)
        : rawCategory;

    return {
      category: categoryFormatter(
        typeof categoryValue === 'number' || categoryValue instanceof Date
          ? categoryValue
          : String(categoryValue ?? '')
      ),
      value: measureFormatter(row[1] as number | string | Date)
    };
  });
}

interface ThemeConfig {
  axis?: Record<'fontSize', number> // Font size of the axis labels.
  background?: string; // Background color of the dashboard canvas.
  borders?: {
    'border-color'?: string; // Color of the border
    'border-radius'?: string; // Radius of the border
    'border-style'?: string; // Style of the border
    'border-top-width'?: string; // Top width of the border
    'border-right-width'?: string; // Right width of the border
    'border-bottom-width'?: string; // Bottom width of the border
    'border-left-width'?: string; // Left width of the border
  }; // Border styling.
  boxShadow?: {
    size?: 'S' | 'M' | 'L' | 'none'; // Size of the boxshadow.
    color?: string; // Color of the boxshadow.
  }; // Box shadow styling.
  colors?: string[]; // Custom color palette, an array of colors used when a chart needs multiple colors (e.g. donut chart).
  font?: {
    fontFamily?: string; // Font family used in the chart.
    fontSize?: number; // Font size in px.
    'font-weight'?: number; // Font weight.
    'font-style'?: 'normal'; // Font style.
  }; // Font styling.
  itemsBackground?: string; // Background color of the chart.
  itemSpecific?: {
    rounding?: number; // Rounding of elements in the chart.
    padding?: number; // Padding between elements in the chart.
  };
  legend?: {
    type?: 'normal' | 'line' | 'circle'; // Display type of the legend.
    fontSize?: number; // Font size of the legend in px.
    lineHeight?: number; // Line height of the legend in px.
  }; // Legend styling, applied if a legend is displayed.
  mainColor?: string; // Main color of the theme.
  title?: {
    align?: 'left' | 'center' | 'right'; // Alignment of the title
    bold?: boolean; // Whether the title is bold
    border?: boolean; // Whether the title has a bottom border
    fontSize?: number; // Font size of the title in px
    italic?: boolean; // Whether the title is italic
    lineHeight?: number; // Line height of the title in px
    underline?: boolean; // Whether the title is underlined
  }; // Title styling, applied if a title is displayed.
  tooltip?: {
    fontSize?: number; // Font size of the tooltip in px
    background?: string; // Background color of the tooltip
    lineHeight?: number; // Line height of the tooltip in px
    opacity?: number; // Opacity of the tooltip
  }; // Tooltip styling, applied if a tooltip is displayed (e.g. on hover over a bar in a bar chart).
}

import { ThemeConfig } from '@luzmo/dashboard-contents-types';

// In your chart.ts file
export function render({
  container,
  data = [],
  slots = [],
  slotConfigurations = [],
  options = {},
  language = 'en',
  dimensions: { width = 600, height = 400 } = {}
}: ChartParams): void {
  // Extract theme from options
  const theme: ThemeConfig = options.theme ?? {};

  // Clear container and set background
  container.innerHTML = '';
  container.style.backgroundColor = theme.itemsBackground;

  // Create main chart container with dynamic theme properties
  const chartContainer = document.createElement('div');
  chartContainer.className = 'chart-container';
  chartContainer.style.fontFamily = theme.font?.fontFamily || 'system-ui, sans-serif';
  chartContainer.style.fontSize = (theme.font?.fontSize || 13) + 'px';

  // Add a title that uses mainColor
  const titleElement = document.createElement('h2');
  titleElement.textContent = 'Chart Title';
  titleElement.style.color = theme.mainColor;

  chartContainer.appendChild(titleElement);
}

.bar-chart-container {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.axis path,
.axis line {
  stroke: #e0e0e0;
}

.axis text {
  font-size: 12px;
  fill: #666;
}

.bar {
  transition: opacity 0.2s;
}

.bar:hover {
  opacity: 0.8;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  font-size: 12px;
}

cd projects/custom-chart
npm install <package-name>

import type { ItemFilter } from '@luzmo/dashboard-contents-types';

// Example of sending a filter event
function sendFilterEvent(filters: ItemFilter[]): void {
  const eventData: { type: 'setFilter'; filters: ItemFilter[] } = {
    type: 'setFilter',  // Must always be 'setFilter'
    filters: filters
  };

  // Post message to parent window
  window.parent.postMessage(eventData, '*');
}

function clearFilterEvent(): void {
  sendFilterEvent([]);
}

// Example usage in a click handler
function onBarClick(category: string): void {
  const filters: ItemFilter[] = [
    {
      expression: '? = ?',  // Filter expression
      parameters: [
        {
          column_id: 'category-column-id',  // Column to filter on
          dataset_id: 'dataset-id'          // Dataset containing the column
        },
        category  // Value to filter by
      ]
    }
  ];

  sendFilterEvent(filters);
}

interface ItemFilter {
  // Filter expression from a predefined list
  expression: '? = ?' | '? != ?' | '? in ?' | '? not in ?' | '? like ?' | '? not like ?' |
              '? starts with ?' | '? not starts with ?' | '? ends with ?' | '? not ends with ?' |
              '? < ?' | '? <= ?' | '? > ?' | '? >= ?' | '? between ?' | '? is null' | '? is not null';

  // Filter parameters
  parameters: [
    {
      column_id?: string;    // Column to filter on
      dataset_id?: string;   // Dataset containing the column
      level?: number;       // Optional level for hierarchical or datetime data
    },
    number | string         // Value to filter by
  ];
}

const numericFilter: ItemFilter = {
  expression: '? >= ?',
  parameters: [
    {
      column_id: '<revenue column id>',
      dataset_id: '<sales dataset id>'
    },
    100
  ]
};

const datetimeFilter: ItemFilter = {
  expression: '? >= ?',
  parameters: [
    {
      column_id: '<created_at column id>',
      dataset_id: '<sales dataset id>'
    },
    '2025-01-01T00:00:00.000Z'
  ]
};

const hierarchyFilter: ItemFilter = {
  expression: '? = ?',
  parameters: [
    {
      column_id: '<region column id>',
      dataset_id: '<sales dataset id>'
    },
    'North America'
  ]
};

type CustomChartEvent = {
  type: 'customEvent';
  data: Record<string, unknown>;
};

// Example of sending a custom event
function sendCustomEvent(eventType: string, data: Record<string, unknown>): void {
  const eventData: CustomChartEvent = {
    type: 'customEvent',  // Must always be 'customEvent'
    data: {
      eventType: eventType,  // Your custom event type
      ...data                // Any additional data you want to send
    }
  };

  // Post message to parent window
  window.parent.postMessage(eventData, '*');
}

// Example usage in a click handler
function onDataPointClick(category: string, value: number): void {
  sendCustomEvent('dataPointSelected', {
    category: category,
    value: value,
    timestamp: new Date().toISOString()
  });
}

import type { ItemQuery } from '@luzmo/dashboard-contents-types';

function sendQueryLoadedEvent(queries: ItemQuery[]): void {
  window.parent.postMessage({ type: 'queryLoaded', queries }, '*');
}

npm run validate

npm run build