diff --git a/ts_web/elements/dees-statsgrid.demo.ts b/ts_web/elements/dees-statsgrid.demo.ts index a452b25..e79e53e 100644 --- a/ts_web/elements/dees-statsgrid.demo.ts +++ b/ts_web/elements/dees-statsgrid.demo.ts @@ -381,8 +381,9 @@ export const demoFunc = () => { name: 'Increment', iconName: 'lucide:plus', action: async () => { - const grid = document.querySelector('#interactive-grid'); - const tile = grid.tiles.find(t => t.id === 'counter'); + const grid = document.querySelector('#interactive-grid') as any; + if (!grid) return; + const tile = grid.tiles.find((t: any) => t.id === 'counter'); tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1; grid.tiles = [...grid.tiles]; } @@ -391,8 +392,9 @@ export const demoFunc = () => { name: 'Reset', iconName: 'lucide:rotate-ccw', action: async () => { - const grid = document.querySelector('#interactive-grid'); - const tile = grid.tiles.find(t => t.id === 'counter'); + const grid = document.querySelector('#interactive-grid') as any; + if (!grid) return; + const tile = grid.tiles.find((t: any) => t.id === 'counter'); tile.value = 0; grid.tiles = [...grid.tiles]; } @@ -406,9 +408,9 @@ export const demoFunc = () => { iconName: 'lucide:play', action: async function() { // Toggle live updates - if (!window.liveUpdateInterval) { - window.liveUpdateInterval = setInterval(() => { - const grid = document.querySelector('#interactive-grid'); + if (!(window as any).liveUpdateInterval) { + (window as any).liveUpdateInterval = setInterval(() => { + const grid = document.querySelector('#interactive-grid') as any; if (grid) { const tiles = [...grid.tiles]; @@ -433,8 +435,8 @@ export const demoFunc = () => { this.name = 'Stop Live Updates'; this.iconName = 'lucide:pause'; } else { - clearInterval(window.liveUpdateInterval); - window.liveUpdateInterval = null; + clearInterval((window as any).liveUpdateInterval); + (window as any).liveUpdateInterval = null; this.name = 'Start Live Updates'; this.iconName = 'lucide:play'; } @@ -506,8 +508,8 @@ html\` diff --git a/ts_web/elements/dees-statsgrid.ts b/ts_web/elements/dees-statsgrid.ts index ad5ec33..34e63c0 100644 --- a/ts_web/elements/dees-statsgrid.ts +++ b/ts_web/elements/dees-statsgrid.ts @@ -226,8 +226,9 @@ export class DeesStatsGrid extends DeesElement { .gauge-container { width: 140px; - height: 70px; + height: 80px; position: relative; + margin-top: -10px; } .gauge-svg { @@ -473,10 +474,10 @@ export class DeesStatsGrid extends DeesElement { // SVG dimensions and calculations const width = 140; - const height = 70; + const height = 80; const strokeWidth = 8; const padding = strokeWidth / 2 + 2; - const radius = 40; + const radius = 48; const centerX = width / 2; const centerY = height - padding;