DashboardCanvas

import '@blukavantui/web/theme.css'

import {createDashboardCanvas} from '@blukavantui/web/dashboard-canvas';
import {createDashboardPanel} from '@blukavantui/web/dashboard-panel';
import {createStatistic} from '@blukavantui/web/statistic';
import {createSparkline} from '@blukavantui/web/sparkline';
import type {BluDashboardPanel} from '@blukavantui/web';
import '@blukavantui/web/dashboard-canvas.css';
import '@blukavantui/web/dashboard-panel.css';
import '@blukavantui/web/statistic.css';
import '@blukavantui/web/sparkline.css';
export function mount(host:HTMLElement) {
 const content=document.createElement('div');host.append(content);
 const metricHost=document.createElement('div'), taskContent=document.createElement('label');
 const check=document.createElement('input');check.type='checkbox';taskContent.append(check,' Review customer import');
 const metricPanel=createDashboardPanel(content,{PanelKey:'revenue',Content:metricHost});
 const taskPanel=createDashboardPanel(content,{PanelKey:'tasks',Content:taskContent});
 const panels:BluDashboardPanel[]=[{Key:'revenue',Title:'Revenue trend',ColumnSpan:7,RowSpan:3},{Key:'tasks',Title:'Team priorities',ColumnSpan:5,RowSpan:3}];
 const canvas=createDashboardCanvas(host,{Panels:panels,Content:content,RowHeight:80},{SaveRequested:(requestId,layout)=>{
   // Replace this storage call with your application's persistence API.
   try {localStorage.setItem('bluui-starter:dashboard-canvas',JSON.stringify(layout));queueMicrotask(()=>canvas.update({SaveResultRequestId:requestId,SaveResultSuccess:true,SaveResultMessage:'Layout saved in this browser.'}));}
   catch {queueMicrotask(()=>canvas.update({SaveResultRequestId:requestId,SaveResultSuccess:false,SaveResultMessage:'Layout could not be saved.'}));}
 }});
 const statistic=createStatistic(metricHost,{Label:'Monthly recurring revenue',Value:126840,Prefix:'$',Precision:0,Color:'Success'});
 const sparkline=createSparkline(metricHost,{Points:[42,55,49,72,67,93,105,126].map((Value,i)=>({Label:'Week '+(i+1),Value})),Height:60,ShowArea:true,AccessibleLabel:'Revenue trend'});
 return {destroy(){sparkline.destroy();statistic.destroy();canvas.destroy();metricPanel.destroy();taskPanel.destroy();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()