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', name: 'Increment',
iconName: 'lucide:plus', iconName: 'lucide:plus',
action: async () => { action: async () => {
const grid = document.querySelector('#interactive-grid'); const grid = document.querySelector('#interactive-grid') as any;
const tile = grid.tiles.find(t => t.id === 'counter'); if (!grid) return;
const tile = grid.tiles.find((t: any) => t.id === 'counter');
tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1; tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
grid.tiles = [...grid.tiles]; grid.tiles = [...grid.tiles];
} }
@ -391,8 +392,9 @@ export const demoFunc = () => {
name: 'Reset', name: 'Reset',
iconName: 'lucide:rotate-ccw', iconName: 'lucide:rotate-ccw',
action: async () => { action: async () => {
const grid = document.querySelector('#interactive-grid'); const grid = document.querySelector('#interactive-grid') as any;
const tile = grid.tiles.find(t => t.id === 'counter'); if (!grid) return;
const tile = grid.tiles.find((t: any) => t.id === 'counter');
tile.value = 0; tile.value = 0;
grid.tiles = [...grid.tiles]; grid.tiles = [...grid.tiles];
} }
@ -406,9 +408,9 @@ export const demoFunc = () => {
iconName: 'lucide:play', iconName: 'lucide:play',
action: async function() { action: async function() {
// Toggle live updates // Toggle live updates
if (!window.liveUpdateInterval) { if (!(window as any).liveUpdateInterval) {
window.liveUpdateInterval = setInterval(() => { (window as any).liveUpdateInterval = setInterval(() => {
const grid = document.querySelector('#interactive-grid'); const grid = document.querySelector('#interactive-grid') as any;
if (grid) { if (grid) {
const tiles = [...grid.tiles]; const tiles = [...grid.tiles];
@ -433,8 +435,8 @@ export const demoFunc = () => {
this.name = 'Stop Live Updates'; this.name = 'Stop Live Updates';
this.iconName = 'lucide:pause'; this.iconName = 'lucide:pause';
} else { } else {
clearInterval(window.liveUpdateInterval); clearInterval((window as any).liveUpdateInterval);
window.liveUpdateInterval = null; (window as any).liveUpdateInterval = null;
this.name = 'Start Live Updates'; this.name = 'Start Live Updates';
this.iconName = 'lucide:play'; this.iconName = 'lucide:play';
} }
@ -506,8 +508,8 @@ html\`
<script> <script>
// Cleanup live updates on page unload // Cleanup live updates on page unload
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
if (window.liveUpdateInterval) { if ((window as any).liveUpdateInterval) {
clearInterval(window.liveUpdateInterval); clearInterval((window as any).liveUpdateInterval);
} }
}); });
</script> </script>

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

@ -226,8 +226,9 @@ export class DeesStatsGrid extends DeesElement {
.gauge-container { .gauge-container {
width: 140px; width: 140px;
height: 70px; height: 80px;
position: relative; position: relative;
margin-top: -10px;
} }
.gauge-svg { .gauge-svg {
@ -473,10 +474,10 @@ export class DeesStatsGrid extends DeesElement {
// SVG dimensions and calculations // SVG dimensions and calculations
const width = 140; const width = 140;
const height = 70; const height = 80;
const strokeWidth = 8; const strokeWidth = 8;
const padding = strokeWidth / 2 + 2; const padding = strokeWidth / 2 + 2;
const radius = 40; const radius = 48;
const centerX = width / 2; const centerX = width / 2;
const centerY = height - padding; const centerY = height - padding;