design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update statsgrid

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 13:44:36 +00:00
parent bd10b4e64d
commit 4146a348ab
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ts_web/elements/dees-statsgrid.demo.ts
View File

@ -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\`
<script>
// Cleanup live updates on page unload
window.addEventListener('beforeunload', () => {
if (window.liveUpdateInterval) {
clearInterval(window.liveUpdateInterval);
if ((window as any).liveUpdateInterval) {
clearInterval((window as any).liveUpdateInterval);
}
});
</script>

7
ts_web/elements/dees-statsgrid.ts
View File

@ -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;