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

feat(layout): introduce dees-tile component for unified tile layout

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 11:49:58 +00:00
parent 472132e8cf
commit 6e5def5708
10 changed files with 296 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ts_web/elements/00group-chart/dees-chart-area/component.ts
View File

@@ -13,6 +13,7 @@ import { renderChartArea } from './template.js';
import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
import '../../00group-layout/dees-tile/dees-tile.js';
export type ChartSeriesConfig = {
name?: string;

46
ts_web/elements/00group-chart/dees-chart-area/styles.ts
View File

@@ -4,52 +4,27 @@ export const chartAreaStyles = [
cssManager.defaultStyles,
css`
:host {
display: block;
height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-size: 14px;
}
.mainbox {
position: relative;
width: 100%;
height: 400px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px;
overflow: hidden;
}
.chartTitle {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: left;
padding: 16px 24px;
z-index: 10;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
dees-tile {
height: 100%;
}
.chartContainer {
position: absolute;
top: 44px;
left: 0;
bottom: 32px;
right: 0;
inset: 0;
}
.statsBar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 32px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 24px;
padding: 0 16px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
width: 100%;
box-sizing: border-box;
}
.statsSeries {
display: flex;
@@ -68,9 +43,14 @@ export const chartAreaStyles = [
}
.statsName {
font-weight: 500;
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
margin-right: 4px;
}
.statsItem {
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
}
.statsItem strong {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
}

7
ts_web/elements/00group-chart/dees-chart-area/template.ts
View File

@@ -3,11 +3,10 @@ import type { DeesChartArea } from './component.js';
export const renderChartArea = (component: DeesChartArea): TemplateResult => {
return html`
<div class="mainbox">
<div class="chartTitle">${component.label}</div>
<dees-tile .heading=${component.label}>
<div class="chartContainer"></div>
${component.seriesStats.length > 0 ? html`
<div class="statsBar">
<div slot="footer" class="statsBar">
${component.seriesStats.map(s => html`
<div class="statsSeries">
<span class="statsColor" style="background:${s.color}"></span>
@@ -20,6 +19,6 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
`)}
</div>
` : ''}
</div>
</dees-tile>
`;
};

38
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
View File

@@ -13,6 +13,7 @@ import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chart-log.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
import '../../00group-layout/dees-tile/dees-tile.js';
// Type imports (no runtime overhead)
import type { Terminal } from 'xterm';
@@ -103,30 +104,20 @@ export class DeesChartLog extends DeesElement {
css`
:host {
display: block;
height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
}
.mainbox {
position: relative;
width: 100%;
height: 400px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
dees-tile {
height: 100%;
}
.header {
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
padding: 8px 12px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
@@ -241,10 +232,10 @@ export class DeesChartLog extends DeesElement {
}
.terminal-container {
flex: 1;
position: absolute;
inset: 0;
overflow: hidden;
padding: 8px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
}
.terminal-container .xterm {
@@ -262,14 +253,15 @@ export class DeesChartLog extends DeesElement {
}
.metrics-bar {
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
padding: 6px 12px;
height: 32px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 16px;
font-size: 11px;
font-weight: 500;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
}
.metric {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {
public render(): TemplateResult {
return html`
<div class="mainbox">
<div class="header">
<dees-tile .heading=${this.label}>
<div slot="header" class="header">
<div class="title">${this.label}</div>
<div class="search-box">
<input
@@ -367,7 +359,7 @@ export class DeesChartLog extends DeesElement {
${this.showMetrics
? html`
<div class="metrics-bar">
<div slot="footer" class="metrics-bar">
<span class="metric error">errors: ${this.metrics.error}</span>
<span class="metric warn">warns: ${this.metrics.warn}</span>
<span class="metric info">info: ${this.metrics.info}</span>
@@ -377,7 +369,7 @@ export class DeesChartLog extends DeesElement {
</div>
`
: ''}
</div>
</dees-tile>
`;
}