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

fix(structure): group components into groups inside the repo

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 12:04:01 +00:00
parent f67be189eb
commit 8f8aedc6b0
258 changed files with 675 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

667
ts_web/elements/00group-chart/dees-chart-area/component.ts Normal file
View File

@@ -0,0 +1,667 @@
import {
DeesElement,
customElement,
property,
state,
type TemplateResult,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './demo.js';
import { chartAreaStyles } from './styles.js';
import { renderChartArea } from './template.js';
import ApexCharts from 'apexcharts';
declare global {
interface HTMLElementTagNameMap {
'dees-chart-area': DeesChartArea;
}
}
@customElement('dees-chart-area')
export class DeesChartArea extends DeesElement {
public static demo = demoFunc;
// instance
@state()
accessor chart: ApexCharts;
@property()
accessor label: string = 'Untitled Chart';
@property({ type: Array })
accessor series: ApexAxisChartSeries = [];
// Override getter to return internal chart data
get chartSeries(): ApexAxisChartSeries {
return this.internalChartData.length > 0 ? this.internalChartData : this.series;
}
@property({ attribute: false })
accessor yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
@property({ type: Number })
accessor rollingWindow: number = 0; // 0 means no rolling window
@property({ type: Boolean })
accessor realtimeMode: boolean = false;
@property({ type: String })
accessor yAxisScaling: 'fixed' | 'dynamic' | 'percentage' = 'dynamic';
@property({ type: Number })
accessor yAxisMax: number = 100; // Used when yAxisScaling is 'fixed' or 'percentage'
@property({ type: Number })
accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
private resizeObserver: ResizeObserver;
private resizeTimeout: number;
private internalChartData: ApexAxisChartSeries = [];
private autoScrollTimer: number | null = null;
private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging
// Chart color schemes
private readonly CHART_COLORS = {
dark: [
'hsl(217.2 91.2% 59.8%)', // Blue
'hsl(173.4 80.4% 40%)', // Teal
'hsl(280.3 87.4% 66.7%)', // Purple
'hsl(24.6 95% 53.1%)', // Orange
],
light: [
'hsl(222.2 47.4% 51.2%)', // Blue (shadcn primary)
'hsl(142.1 76.2% 36.3%)', // Green (shadcn success)
'hsl(280.3 47.7% 50.2%)', // Purple (muted)
'hsl(20.5 90.2% 48.2%)', // Orange (shadcn destructive variant)
]
};
constructor() {
super();
domtools.elementBasic.setup();
this.resizeObserver = new ResizeObserver((entries) => {
// Debounce resize calls to prevent excessive updates
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
this.resizeTimeout = window.setTimeout(() => {
// Simply resize if we have a chart, since we're only observing the mainbox
if (this.chart) {
// Log resize event for debugging
if (this.DEBUG_RESIZE && entries.length > 0) {
const entry = entries[0];
console.log('DeesChartArea - Resize detected:', {
width: entry.contentRect.width,
height: entry.contentRect.height
});
}
this.resizeChart();
}
}, 100); // 100ms debounce
});
// Note: ResizeObserver is now set up after chart initialization in firstUpdated()
// to ensure proper timing and avoid race conditions
this.registerGarbageFunction(async () => {
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
this.stopAutoScroll();
// Critical: Destroy chart instance to prevent memory leak
if (this.chart) {
try {
this.chart.destroy();
this.chart = null;
} catch (error) {
console.error('Error destroying chart:', error);
}
}
});
}
public async connectedCallback() {
super.connectedCallback();
// Trigger resize when element is connected to DOM
// This helps with dynamically added charts
if (this.chart) {
// Wait a frame for layout to settle
await new Promise(resolve => requestAnimationFrame(resolve));
await this.resizeChart();
}
}
public static styles = chartAreaStyles;
public render(): TemplateResult {
return renderChartArea(this);
}
public async firstUpdated() {
await this.domtoolsPromise;
// Wait for next animation frame to ensure layout is complete
await new Promise(resolve => requestAnimationFrame(resolve));
// Get actual dimensions of the container
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
if (!mainbox || !chartContainer) {
console.error('Chart containers not found');
return;
}
// Calculate initial dimensions
const styleChartContainer = window.getComputedStyle(chartContainer);
const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
const initialWidth = mainbox.clientWidth - paddingLeft - paddingRight;
const initialHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
// Use provided series data or default demo data
const chartSeries = this.series.length > 0 ? this.series : [
{
name: 'cpu',
data: [
{ x: '2025-01-15T03:00:00', y: 25 },
{ x: '2025-01-15T07:00:00', y: 30 },
{ x: '2025-01-15T11:00:00', y: 20 },
{ x: '2025-01-15T15:00:00', y: 35 },
{ x: '2025-01-15T19:00:00', y: 25 },
],
},
{
name: 'memory',
data: [
{ x: '2025-01-15T03:00:00', y: 10 },
{ x: '2025-01-15T07:00:00', y: 12 },
{ x: '2025-01-15T11:00:00', y: 10 },
{ x: '2025-01-15T15:00:00', y: 30 },
{ x: '2025-01-15T19:00:00', y: 40 },
],
},
];
// Store internal data
this.internalChartData = chartSeries;
// Get current theme
const isDark = !this.goBright;
const theme = isDark ? 'dark' : 'light';
var options: ApexCharts.ApexOptions = {
series: chartSeries,
chart: {
width: initialWidth || 100, // Use actual width or fallback
height: initialHeight || 100, // Use actual height or fallback
type: 'area',
background: 'transparent', // Transparent background to inherit from container
toolbar: {
show: false, // This line disables the toolbar
},
animations: {
enabled: !this.realtimeMode, // Disable animations in realtime mode
speed: 400,
animateGradually: {
enabled: false, // Disable gradual animation for cleaner updates
delay: 0
},
dynamicAnimation: {
enabled: !this.realtimeMode,
speed: 350
}
},
zoom: {
enabled: false, // Disable zoom for cleaner interaction
},
selection: {
enabled: false, // Disable selection
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
curve: 'smooth',
},
xaxis: {
type: 'datetime', // Time-series data
labels: {
format: 'HH:mm:ss', // Time formatting with seconds
datetimeUTC: false,
style: {
colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'], // Label color
fontSize: '12px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
fontWeight: '400',
},
},
axisBorder: {
show: false, // Hide x-axis border
},
axisTicks: {
show: false, // Hide x-axis ticks
},
},
yaxis: {
min: 0,
max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax,
labels: {
formatter: this.yAxisFormatter,
style: {
colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'], // Label color
fontSize: '12px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
fontWeight: '400',
},
},
axisBorder: {
show: false, // Hide y-axis border
},
axisTicks: {
show: false, // Hide y-axis ticks
},
},
tooltip: {
shared: true, // Enables the tooltip to display across series
intersect: false, // Allows hovering anywhere on the chart
followCursor: true, // Makes tooltip follow mouse even between points
x: {
format: 'dd/MM/yy HH:mm',
},
custom: ({ series, dataPointIndex, w }: any) => {
// Iterate through each series and get its value
// Note: We can't access component instance here, so we'll use w.config.theme.mode
const currentTheme = w.config.theme.mode;
const isDarkMode = currentTheme === 'dark';
const bgColor = isDarkMode ? 'hsl(0 0% 9%)' : 'hsl(0 0% 100%)';
const textColor = isDarkMode ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)';
const borderColor = isDarkMode ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)';
// Get formatter from chart config
const formatter = w.config.yaxis[0]?.labels?.formatter || ((val: number) => val.toString());
let tooltipContent = `<div style="padding: 12px; background: ${bgColor}; color: ${textColor}; border-radius: 6px; box-shadow: 0 2px 8px 0 hsl(0 0% 0% / ${isDarkMode ? '0.2' : '0.1'}); border: 1px solid ${borderColor};font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px;">`;
series.forEach((s: number[], index: number) => {
const label = w.globals.seriesNames[index]; // Get series label
const value = s[dataPointIndex]; // Get value at data point
const color = w.globals.colors[index];
const formattedValue = formatter(value);
tooltipContent += `<div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? '6px' : '0'} 0;">
<span style="display: inline-block; width: 10px; height: 10px; background: ${color}; border-radius: 2px;"></span>
<span style="font-weight: 500;">${label}:</span>
<span style="margin-left: auto; font-weight: 600;">${formattedValue}</span>
</div>`;
});
tooltipContent += `</div>`;
return tooltipContent;
},
},
grid: {
xaxis: {
lines: {
show: false, // Hide vertical grid lines for cleaner look
},
},
yaxis: {
lines: {
show: true,
},
},
borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)', // Very subtle grid lines
strokeDashArray: 0, // Solid line
padding: {
top: 10,
right: 20,
bottom: 10,
left: 20,
},
},
fill: {
type: 'gradient', // Gradient fill for the area
gradient: {
shade: isDark ? 'dark' : 'light',
type: 'vertical',
shadeIntensity: 0.1,
opacityFrom: isDark ? 0.2 : 0.3,
opacityTo: 0,
stops: [0, 100],
},
},
colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
theme: {
mode: theme,
},
};
try {
this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
await this.chart.render();
// Give the chart a moment to fully initialize before resizing
await new Promise(resolve => setTimeout(resolve, 100));
await this.resizeChart();
// Ensure resize observer is watching the mainbox
const mainbox = this.shadowRoot.querySelector('.mainbox');
if (mainbox && this.resizeObserver) {
// Disconnect any previous observations
this.resizeObserver.disconnect();
// Start observing the mainbox
this.resizeObserver.observe(mainbox);
if (this.DEBUG_RESIZE) {
console.log('DeesChartArea - ResizeObserver attached to mainbox');
}
}
} catch (error) {
console.error('Failed to initialize chart:', error);
// Optionally, you could set an error state here
// this.chartState = 'error';
// this.errorMessage = 'Failed to initialize chart';
}
}
public async updated(changedProperties: Map<string, any>) {
super.updated(changedProperties);
// Update chart theme when goBright changes
if (changedProperties.has('goBright') && this.chart) {
await this.updateChartTheme();
}
// Update chart if series data changes
if (changedProperties.has('series') && this.chart && this.series.length > 0) {
await this.updateSeries(this.series);
}
// Update y-axis formatter if it changes
if (changedProperties.has('yAxisFormatter') && this.chart) {
await this.chart.updateOptions({
yaxis: {
labels: {
formatter: this.yAxisFormatter,
},
},
});
}
// Handle realtime mode changes
if (changedProperties.has('realtimeMode') && this.chart) {
await this.chart.updateOptions({
chart: {
animations: {
enabled: !this.realtimeMode,
speed: 400,
animateGradually: {
enabled: false,
delay: 0
},
dynamicAnimation: {
enabled: !this.realtimeMode,
speed: 350
}
}
}
});
// Start/stop auto-scroll based on realtime mode
if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
this.startAutoScroll();
} else {
this.stopAutoScroll();
}
}
// Handle auto-scroll interval changes
if (changedProperties.has('autoScrollInterval') && this.chart) {
this.stopAutoScroll();
if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
this.startAutoScroll();
}
}
// Handle y-axis scaling changes
if ((changedProperties.has('yAxisScaling') || changedProperties.has('yAxisMax')) && this.chart) {
await this.chart.updateOptions({
yaxis: {
min: 0,
max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax
}
});
}
}
public async updateSeries(newSeries: ApexAxisChartSeries, animate: boolean = true) {
if (!this.chart) {
return;
}
try {
// Store the new data first
this.internalChartData = newSeries;
// Handle rolling window if enabled
if (this.rollingWindow > 0 && this.realtimeMode) {
const now = Date.now();
const cutoffTime = now - this.rollingWindow;
// Filter data to only include points within the rolling window
const filteredSeries = newSeries.map(series => ({
name: series.name,
data: (series.data as any[]).filter(point => {
if (typeof point === 'object' && point !== null && 'x' in point) {
return new Date(point.x).getTime() > cutoffTime;
}
return false;
})
}));
// Only update if we have data
if (filteredSeries.some(s => s.data.length > 0)) {
// Handle y-axis scaling first
if (this.yAxisScaling === 'dynamic') {
const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y));
if (allValues.length > 0) {
const maxValue = Math.max(...allValues);
const dynamicMax = Math.ceil(maxValue * 1.1);
await this.chart.updateOptions({
yaxis: {
min: 0,
max: dynamicMax
}
}, false, false);
}
}
await this.chart.updateSeries(filteredSeries, false);
}
} else {
await this.chart.updateSeries(newSeries, animate);
}
} catch (error) {
console.error('Failed to update chart series:', error);
}
}
// Update just the x-axis for smooth scrolling in realtime mode
// Public for advanced usage in demos, but typically handled automatically
public async updateTimeWindow() {
if (!this.chart || this.rollingWindow <= 0) {
return;
}
const now = Date.now();
const cutoffTime = now - this.rollingWindow;
await this.chart.updateOptions({
xaxis: {
min: cutoffTime,
max: now,
labels: {
format: 'HH:mm:ss',
datetimeUTC: false,
style: {
colors: [!this.goBright ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
fontSize: '12px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
fontWeight: '400',
},
},
tickAmount: 6,
}
}, false, false);
}
public async appendData(newData: { data: any[] }[]) {
if (!this.chart) {
return;
}
// Use ApexCharts' appendData method for smoother real-time updates
this.chart.appendData(newData);
}
public async updateOptions(options: ApexCharts.ApexOptions, redrawPaths?: boolean, animate?: boolean) {
if (!this.chart) {
return;
}
return this.chart.updateOptions(options, redrawPaths, animate);
}
public async resizeChart() {
if (!this.chart) {
return;
}
if (this.DEBUG_RESIZE) {
console.log('DeesChartArea - resizeChart called');
}
try {
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
if (!mainbox || !chartContainer) {
return;
}
// Force layout recalculation
void mainbox.offsetHeight;
// Get computed style of the element
const styleChartContainer = window.getComputedStyle(chartContainer);
// Extract padding values
const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
// Calculate the actual width and height to use, subtracting padding
const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
// Validate dimensions
if (actualWidth > 0 && actualHeight > 0) {
if (this.DEBUG_RESIZE) {
console.log('DeesChartArea - Updating chart dimensions:', {
width: actualWidth,
height: actualHeight
});
}
await this.chart.updateOptions({
chart: {
width: actualWidth,
height: actualHeight,
},
}, true, false); // Redraw paths but don't animate
}
} catch (error) {
console.error('Failed to resize chart:', error);
}
}
/**
* Manually trigger a chart resize. Useful when automatic detection doesn't work.
* This is a convenience method that can be called from outside the component.
*/
public async forceResize() {
await this.resizeChart();
}
private startAutoScroll() {
if (this.autoScrollTimer) {
return; // Already running
}
this.autoScrollTimer = window.setInterval(() => {
this.updateTimeWindow();
}, this.autoScrollInterval);
}
private stopAutoScroll() {
if (this.autoScrollTimer) {
window.clearInterval(this.autoScrollTimer);
this.autoScrollTimer = null;
}
}
private async updateChartTheme() {
if (!this.chart) {
return;
}
const isDark = !this.goBright;
const theme = isDark ? 'dark' : 'light';
await this.chart.updateOptions({
theme: {
mode: theme,
},
colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
xaxis: {
labels: {
style: {
colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
},
},
},
yaxis: {
labels: {
style: {
colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
},
},
},
grid: {
borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)',
},
fill: {
gradient: {
shade: isDark ? 'dark' : 'light',
opacityFrom: isDark ? 0.2 : 0.3,
},
},
});
}
}

484
ts_web/elements/00group-chart/dees-chart-area/demo.ts Normal file
View File

@@ -0,0 +1,484 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import type { DeesChartArea } from './component.js';
import '@design.estate/dees-wcctools/demotools';
import './component.js';
export const demoFunc = () => {
// Initial dataset values
const initialDatasets = {
system: {
label: 'System Usage (%)',
series: [
{
name: 'CPU',
data: [
{ x: new Date(Date.now() - 300000).toISOString(), y: 25 },
{ x: new Date(Date.now() - 240000).toISOString(), y: 30 },
{ x: new Date(Date.now() - 180000).toISOString(), y: 28 },
{ x: new Date(Date.now() - 120000).toISOString(), y: 35 },
{ x: new Date(Date.now() - 60000).toISOString(), y: 32 },
{ x: new Date().toISOString(), y: 38 },
],
},
{
name: 'Memory',
data: [
{ x: new Date(Date.now() - 300000).toISOString(), y: 45 },
{ x: new Date(Date.now() - 240000).toISOString(), y: 48 },
{ x: new Date(Date.now() - 180000).toISOString(), y: 46 },
{ x: new Date(Date.now() - 120000).toISOString(), y: 52 },
{ x: new Date(Date.now() - 60000).toISOString(), y: 50 },
{ x: new Date().toISOString(), y: 55 },
],
},
],
},
};
const initialFormatters = {
system: (val: number) => `${val}%`,
};
return html`
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// Get the chart elements
const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
let intervalId: number;
let connectionsIntervalId: number;
let currentDataset = 'system';
// Y-axis formatters for different datasets
const formatters = {
system: (val: number) => `${val}%`,
network: (val: number) => `${val} Mbps`,
sales: (val: number) => `$${val.toLocaleString()}`,
};
// Time window configuration (in milliseconds)
const TIME_WINDOW = 2 * 60 * 1000; // 2 minutes
const UPDATE_INTERVAL = 1000; // 1 second
const DATA_POINT_INTERVAL = 5000; // Show data points every 5 seconds
// Store previous values for smooth transitions
let previousValues = {
cpu: 30,
memory: 50,
download: 150,
upload: 30,
connections: 150
};
// Generate initial data points for time window
const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
const data = [];
const now = Date.now();
const pointCount = Math.floor(TIME_WINDOW / interval);
for (let i = pointCount; i >= 0; i--) {
const timestamp = new Date(now - (i * interval)).toISOString();
const value = baseValue + (Math.random() - 0.5) * variance;
data.push({ x: timestamp, y: Math.round(value) });
}
return data;
};
// Different datasets to showcase
const datasets = {
system: {
label: 'System Usage (%)',
series: [
{
name: 'CPU',
data: generateInitialData(previousValues.cpu, 10),
},
{
name: 'Memory',
data: generateInitialData(previousValues.memory, 8),
},
],
},
network: {
label: 'Network Traffic (Mbps)',
series: [
{
name: 'Download',
data: generateInitialData(previousValues.download, 30),
},
{
name: 'Upload',
data: generateInitialData(previousValues.upload, 10),
},
],
},
sales: {
label: 'Sales Analytics',
series: [
{
name: 'Revenue',
data: [
{ x: '2025-01-01', y: 45000 },
{ x: '2025-01-02', y: 52000 },
{ x: '2025-01-03', y: 48000 },
{ x: '2025-01-04', y: 61000 },
{ x: '2025-01-05', y: 58000 },
{ x: '2025-01-06', y: 65000 },
],
},
{
name: 'Profit',
data: [
{ x: '2025-01-01', y: 12000 },
{ x: '2025-01-02', y: 14000 },
{ x: '2025-01-03', y: 11000 },
{ x: '2025-01-04', y: 18000 },
{ x: '2025-01-05', y: 16000 },
{ x: '2025-01-06', y: 20000 },
],
},
],
},
};
// Generate smooth value transitions
const getNextValue = (current: number, min: number, max: number, maxChange: number = 5) => {
// Add some randomness but keep it close to current value
const change = (Math.random() - 0.5) * maxChange * 2;
let newValue = current + change;
// Apply some "pressure" to move towards center of range
const center = (min + max) / 2;
const pressure = (center - newValue) * 0.1;
newValue += pressure;
// Ensure within bounds
newValue = Math.max(min, Math.min(max, newValue));
return Math.round(newValue);
};
// Track time of last data point
let lastDataPointTime = Date.now();
let connectionsLastUpdate = Date.now();
// Add real-time data
const addRealtimeData = () => {
if (!chartElement) return;
const now = Date.now();
// Only add new data point every DATA_POINT_INTERVAL
const shouldAddPoint = (now - lastDataPointTime) >= DATA_POINT_INTERVAL;
if (shouldAddPoint) {
lastDataPointTime = now;
const newTimestamp = new Date(now).toISOString();
// Generate smooth transitions for new values
if (currentDataset === 'system') {
// Generate new values
previousValues.cpu = getNextValue(previousValues.cpu, 20, 50, 3);
previousValues.memory = getNextValue(previousValues.memory, 40, 70, 2);
// Get current data and add new points
const currentSeries = chartElement.chartSeries.map((series, index) => ({
name: series.name,
data: [
...(series.data as Array<{x: any; y: any}>),
index === 0
? { x: newTimestamp, y: previousValues.cpu }
: { x: newTimestamp, y: previousValues.memory }
]
}));
chartElement.updateSeries(currentSeries, false);
} else if (currentDataset === 'network') {
// Generate new values
previousValues.download = getNextValue(previousValues.download, 100, 200, 10);
previousValues.upload = getNextValue(previousValues.upload, 20, 50, 5);
// Get current data and add new points
const currentSeries = chartElement.chartSeries.map((series, index) => ({
name: series.name,
data: [
...(series.data as Array<{x: any; y: any}>),
index === 0
? { x: newTimestamp, y: previousValues.download }
: { x: newTimestamp, y: previousValues.upload }
]
}));
chartElement.updateSeries(currentSeries, false);
}
}
};
// Update connections chart data
const updateConnections = () => {
if (!connectionsChartElement) return;
const now = Date.now();
const newTimestamp = new Date(now).toISOString();
// Generate new connections value with discrete changes
const change = Math.floor(Math.random() * 21) - 10; // -10 to +10 connections
previousValues.connections = Math.max(50, Math.min(300, previousValues.connections + change));
// Get current data and add new point
const currentSeries = connectionsChartElement.chartSeries;
const newData = [{
name: currentSeries[0]?.name || 'Connections',
data: [
...(currentSeries[0]?.data as Array<{x: any; y: any}> || []),
{ x: newTimestamp, y: previousValues.connections }
]
}];
connectionsChartElement.updateSeries(newData, false);
};
// Switch dataset
const switchDataset = (name: string) => {
currentDataset = name;
const dataset = datasets[name];
chartElement.label = dataset.label;
chartElement.series = dataset.series;
chartElement.yAxisFormatter = formatters[name];
// Set appropriate y-axis scaling
if (name === 'system') {
chartElement.yAxisScaling = 'percentage';
chartElement.yAxisMax = 100;
} else if (name === 'network') {
chartElement.yAxisScaling = 'dynamic';
} else {
chartElement.yAxisScaling = 'dynamic';
}
// Reset last data point time to get fresh data immediately
lastDataPointTime = Date.now() - DATA_POINT_INTERVAL;
};
// Start/stop real-time updates
const startRealtime = () => {
if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
chartElement.realtimeMode = true;
// Only add data every 5 seconds, chart auto-scrolls independently
intervalId = window.setInterval(() => addRealtimeData(), DATA_POINT_INTERVAL);
}
// Start connections updates
if (!connectionsIntervalId) {
connectionsChartElement.realtimeMode = true;
// Update connections every second
connectionsIntervalId = window.setInterval(() => updateConnections(), UPDATE_INTERVAL);
}
};
const stopRealtime = () => {
if (intervalId) {
window.clearInterval(intervalId);
intervalId = null;
chartElement.realtimeMode = false;
}
// Stop connections updates
if (connectionsIntervalId) {
window.clearInterval(connectionsIntervalId);
connectionsIntervalId = null;
connectionsChartElement.realtimeMode = false;
}
};
// Randomize current data (spike/drop simulation)
const randomizeData = () => {
if (currentDataset === 'system') {
// Simulate CPU/Memory spike
previousValues.cpu = Math.random() > 0.5 ? 85 : 25;
previousValues.memory = Math.random() > 0.5 ? 80 : 45;
} else if (currentDataset === 'network') {
// Simulate network traffic spike
previousValues.download = Math.random() > 0.5 ? 250 : 100;
previousValues.upload = Math.random() > 0.5 ? 80 : 20;
}
// Also spike connections
previousValues.connections = Math.random() > 0.5 ? 280 : 80;
// Force immediate update by resetting timers
lastDataPointTime = 0;
connectionsLastUpdate = 0;
};
// Wire up button click handlers
const buttons = elementArg.querySelectorAll('dees-button');
buttons.forEach(button => {
const text = button.textContent?.trim();
if (text === 'System Usage') {
button.addEventListener('click', () => switchDataset('system'));
} else if (text === 'Network Traffic') {
button.addEventListener('click', () => switchDataset('network'));
} else if (text === 'Sales Data') {
button.addEventListener('click', () => switchDataset('sales'));
} else if (text === 'Start Live') {
button.addEventListener('click', () => startRealtime());
} else if (text === 'Stop Live') {
button.addEventListener('click', () => stopRealtime());
} else if (text === 'Spike Values') {
button.addEventListener('click', () => randomizeData());
}
});
// Update button states based on current dataset
const updateButtonStates = () => {
const buttons = elementArg.querySelectorAll('dees-button');
buttons.forEach(button => {
const text = button.textContent?.trim();
if (text === 'System Usage') {
button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
} else if (text === 'Network Traffic') {
button.type = currentDataset === 'network' ? 'highlighted' : 'normal';
} else if (text === 'Sales Data') {
button.type = currentDataset === 'sales' ? 'highlighted' : 'normal';
}
});
};
// Configure main chart with rolling window
chartElement.rollingWindow = TIME_WINDOW;
chartElement.realtimeMode = false; // Will be enabled when starting live updates
chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
chartElement.yAxisMax = 100;
chartElement.autoScrollInterval = 1000; // Auto-scroll every second
// Set initial time window
setTimeout(() => {
chartElement.updateTimeWindow();
}, 100);
// Update button states when dataset changes
const originalSwitchDataset = switchDataset;
const switchDatasetWithButtonUpdate = (name: string) => {
originalSwitchDataset(name);
updateButtonStates();
};
// Replace switchDataset with the one that updates buttons
buttons.forEach(button => {
const text = button.textContent?.trim();
if (text === 'System Usage') {
button.removeEventListener('click', () => switchDataset('system'));
button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
} else if (text === 'Network Traffic') {
button.removeEventListener('click', () => switchDataset('network'));
button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
} else if (text === 'Sales Data') {
button.removeEventListener('click', () => switchDataset('sales'));
button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
}
});
// Initialize connections chart with data
if (connectionsChartElement) {
const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);
connectionsChartElement.series = [{
name: 'Connections',
data: initialConnectionsData
}];
// Configure connections chart
connectionsChartElement.rollingWindow = TIME_WINDOW;
connectionsChartElement.realtimeMode = false; // Will be enabled when starting live updates
connectionsChartElement.yAxisScaling = 'fixed';
connectionsChartElement.yAxisMax = 350;
connectionsChartElement.autoScrollInterval = 1000; // Auto-scroll every second
// Set initial time window
setTimeout(() => {
connectionsChartElement.updateTimeWindow();
}, 100);
}
}}>
<style>
${css`
.demoBox {
position: relative;
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
height: 100%;
width: 100%;
padding: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 24px;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 8px;
}
.chart-container {
flex: 1;
min-height: 400px;
}
.info {
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
text-align: center;
margin-top: 8px;
}
`}
</style>
<div class="demoBox">
<div class="controls">
<dees-button-group label="Dataset:">
<dees-button type="highlighted">System Usage</dees-button>
<dees-button>Network Traffic</dees-button>
<dees-button>Sales Data</dees-button>
</dees-button-group>
<dees-button-group label="Real-time:">
<dees-button>Start Live</dees-button>
<dees-button>Stop Live</dees-button>
</dees-button-group>
<dees-button-group label="Actions:">
<dees-button>Spike Values</dees-button>
</dees-button-group>
</div>
<div class="chart-container">
<dees-chart-area
id="main-chart"
.label=${initialDatasets.system.label}
.series=${initialDatasets.system.series}
.yAxisFormatter=${initialFormatters.system}
></dees-chart-area>
</div>
<div class="chart-container" style="margin-top: 20px;">
<dees-chart-area
id="connections-chart"
.label=${'Active Connections'}
.series=${[{
name: 'Connections',
data: [] as Array<{x: any; y: any}>
}]}
.yAxisFormatter=${(val: number) => `${val}`}
></dees-chart-area>
</div>
<div class="info">
Real-time monitoring with 2-minute rolling window •
Updates every second with smooth value transitions •
Click 'Spike Values' to simulate load spikes
</div>
</div>
</dees-demowrapper>
`;
};

1
ts_web/elements/00group-chart/dees-chart-area/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './component.js';

60
ts_web/elements/00group-chart/dees-chart-area/styles.ts Normal file
View File

@@ -0,0 +1,60 @@
import { css, cssManager } from '@design.estate/dees-element';
export const chartAreaStyles = [
cssManager.defaultStyles,
css`
:host {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-weight: 400;
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%)')};
}
.chartContainer {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
padding: 44px 16px 16px 0px;
overflow: hidden;
background: transparent; /* Ensure container doesn't override chart background */
}
/* ApexCharts theme overrides */
.apexcharts-canvas {
background: transparent !important;
}
.apexcharts-inner {
background: transparent !important;
}
.apexcharts-graphical {
background: transparent !important;
}
`,
];

12
ts_web/elements/00group-chart/dees-chart-area/template.ts Normal file
View File

@@ -0,0 +1,12 @@
import { html, type TemplateResult } from '@design.estate/dees-element';
import type { DeesChartArea } from './component.js';
export const renderChartArea = (component: DeesChartArea): TemplateResult => {
return html`
<div class="mainbox">
<div class="chartTitle">${component.label}</div>
<div class="chartContainer"></div>
</div>
`;
};

170
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts Normal file
View File

@@ -0,0 +1,170 @@
import { html } from '@design.estate/dees-element';
import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
import '@design.estate/dees-wcctools/demotools';
export const demoFunc = () => {
return html`
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
// Get the log element
const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
let intervalId: number;
const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
const logTemplates = {
debug: [
'Loading module: {{module}}',
'Cache hit for key: {{key}}',
'SQL query executed in {{time}}ms',
'Request headers: {{headers}}',
'Environment variable loaded: {{var}}',
],
info: [
'Request received: {{method}} {{path}}',
'User {{userId}} authenticated successfully',
'Processing job {{jobId}} from queue',
'Scheduled task "{{task}}" started',
'WebSocket connection established from {{ip}}',
],
warn: [
'Slow query detected: {{query}} ({{time}}ms)',
'Memory usage at {{percent}}%',
'Rate limit approaching for IP {{ip}}',
'Deprecated API endpoint called: {{endpoint}}',
'Certificate expires in {{days}} days',
],
error: [
'Database connection lost: {{error}}',
'Failed to process request: {{error}}',
'Authentication failed for user {{user}}',
'File not found: {{path}}',
'Service unavailable: {{service}}',
],
success: [
'Server started successfully on port {{port}}',
'Database migration completed',
'Backup completed: {{size}} MB',
'SSL certificate renewed',
'Health check passed: all systems operational',
],
};
const generateRandomLog = () => {
const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
const random = Math.random();
let cumulative = 0;
let level: typeof levels[0] = 'info';
for (let i = 0; i < weights.length; i++) {
cumulative += weights[i];
if (random < cumulative) {
level = levels[i];
break;
}
}
const source = serverSources[Math.floor(Math.random() * serverSources.length)];
const templates = logTemplates[level];
const template = templates[Math.floor(Math.random() * templates.length)];
// Replace placeholders with random values
const message = template
.replace('{{module}}', ['express', 'mongoose', 'redis', 'socket.io'][Math.floor(Math.random() * 4)])
.replace('{{key}}', 'user:' + Math.floor(Math.random() * 1000))
.replace('{{time}}', String(Math.floor(Math.random() * 500) + 50))
.replace('{{headers}}', 'Content-Type: application/json, Authorization: Bearer ...')
.replace('{{var}}', ['NODE_ENV', 'DATABASE_URL', 'API_KEY', 'PORT'][Math.floor(Math.random() * 4)])
.replace('{{method}}', ['GET', 'POST', 'PUT', 'DELETE'][Math.floor(Math.random() * 4)])
.replace('{{path}}', ['/api/users', '/api/auth/login', '/api/products', '/health'][Math.floor(Math.random() * 4)])
.replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
.replace('{{jobId}}', 'job_' + Math.random().toString(36).substring(2, 11))
.replace('{{task}}', ['cleanup', 'backup', 'report-generation', 'cache-refresh'][Math.floor(Math.random() * 4)])
.replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
.replace('{{query}}', 'SELECT * FROM users WHERE ...')
.replace('{{percent}}', String(Math.floor(Math.random() * 30) + 70))
.replace('{{endpoint}}', '/api/v1/legacy')
.replace('{{days}}', String(Math.floor(Math.random() * 30) + 1))
.replace('{{error}}', ['ECONNREFUSED', 'ETIMEDOUT', 'ENOTFOUND'][Math.floor(Math.random() * 3)])
.replace('{{user}}', 'user_' + Math.floor(Math.random() * 1000))
.replace('{{service}}', ['Redis', 'MongoDB', 'ElasticSearch'][Math.floor(Math.random() * 3)])
.replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
.replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));
logElement.addLog(level, message, source);
};
const startSimulation = () => {
if (!intervalId) {
// Generate logs at random intervals between 500ms and 2500ms
const scheduleNext = () => {
generateRandomLog();
const nextDelay = Math.random() * 2000 + 500;
intervalId = window.setTimeout(() => {
if (intervalId) {
scheduleNext();
}
}, nextDelay);
};
scheduleNext();
}
};
const stopSimulation = () => {
if (intervalId) {
window.clearTimeout(intervalId);
intervalId = null;
}
};
// Wire up button click handlers
const buttons = elementArg.querySelectorAll('dees-button');
buttons.forEach(button => {
const text = button.textContent?.trim();
if (text === 'Add Single Log') {
button.addEventListener('click', () => generateRandomLog());
} else if (text === 'Start Simulation') {
button.addEventListener('click', () => startSimulation());
} else if (text === 'Stop Simulation') {
button.addEventListener('click', () => stopSimulation());
}
});
}}>
<style>
.demoBox {
position: relative;
background: #000000;
height: 100%;
width: 100%;
padding: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
}
.controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.info {
color: #888;
font-size: 12px;
font-family: 'Geist Sans', sans-serif;
}
</style>
<div class="demoBox">
<div class="controls">
<dees-button>Add Single Log</dees-button>
<dees-button>Start Simulation</dees-button>
<dees-button>Stop Simulation</dees-button>
</div>
<div class="info">Simulating realistic server logs with various levels and sources</div>
<dees-chart-log
.label=${'Production Server Logs'}
></dees-chart-log>
</div>
</dees-demowrapper>
`;
};

326
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts Normal file
View File

@@ -0,0 +1,326 @@
import {
DeesElement,
css,
cssManager,
customElement,
html,
property,
type TemplateResult,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chart-log.demo.js';
declare global {
interface HTMLElementTagNameMap {
'dees-chart-log': DeesChartLog;
}
}
export interface ILogEntry {
timestamp: string;
level: 'debug' | 'info' | 'warn' | 'error' | 'success';
message: string;
source?: string;
}
@customElement('dees-chart-log')
export class DeesChartLog extends DeesElement {
public static demo = demoFunc;
@property()
accessor label: string = 'Server Logs';
@property({ type: Array })
accessor logEntries: ILogEntry[] = [];
@property({ type: Boolean })
accessor autoScroll: boolean = true;
@property({ type: Number })
accessor maxEntries: number = 1000;
private logContainer: HTMLDivElement;
constructor() {
super();
domtools.elementBasic.setup();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-size: 12px;
line-height: 1.5;
}
.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;
}
.header {
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
padding: 12px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.title {
font-weight: 500;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.controls {
display: flex;
gap: 8px;
}
.control-button {
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px;
padding: 6px 12px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all 0.15s;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.control-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
}
.control-button.active {
background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 93.9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
}
.logContainer {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
font-size: 12px;
}
.logEntry {
margin-bottom: 4px;
display: flex;
white-space: pre-wrap;
word-break: break-all;
font-variant-numeric: tabular-nums;
}
.timestamp {
color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
margin-right: 12px;
flex-shrink: 0;
}
.level {
margin-right: 8px;
padding: 0 6px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
flex-shrink: 0;
}
.level.debug {
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
background: ${cssManager.bdTheme('hsl(0 0% 45.1% / 0.1)', 'hsl(0 0% 63.9% / 0.1)')};
}
.level.info {
color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
}
.level.warn {
color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
background: ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
}
.level.error {
color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
}
.level.success {
color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
}
.source {
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
margin-right: 8px;
flex-shrink: 0;
}
.message {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
flex: 1;
}
.empty-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
font-style: italic;
}
/* Custom scrollbar */
.logContainer::-webkit-scrollbar {
width: 8px;
}
.logContainer::-webkit-scrollbar-track {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
}
.logContainer::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 30%)')};
border-radius: 4px;
}
.logContainer::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 40%)')};
}
`,
];
public render(): TemplateResult {
return html`
<div class="mainbox">
<div class="header">
<div class="title">${this.label}</div>
<div class="controls">
<button
class="control-button ${this.autoScroll ? 'active' : ''}"
@click=${() => { this.autoScroll = !this.autoScroll; }}
>
Auto Scroll
</button>
<button
class="control-button"
@click=${() => { this.clearLogs(); }}
>
Clear
</button>
</div>
</div>
<div class="logContainer">
${this.logEntries.length === 0
? html`<div class="empty-state">No logs to display</div>`
: this.logEntries.map(entry => this.renderLogEntry(entry))
}
</div>
</div>
`;
}
private renderLogEntry(entry: ILogEntry): TemplateResult {
const timestamp = new Date(entry.timestamp).toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3
});
return html`
<div class="logEntry">
<span class="timestamp">${timestamp}</span>
<span class="level ${entry.level}">${entry.level}</span>
${entry.source ? html`<span class="source">[${entry.source}]</span>` : ''}
<span class="message">${entry.message}</span>
</div>
`;
}
public async firstUpdated() {
await this.domtoolsPromise;
this.logContainer = this.shadowRoot.querySelector('.logContainer');
// Initialize with demo server logs
const demoLogs: ILogEntry[] = [
{ timestamp: new Date().toISOString(), level: 'info', message: 'Server started on port 3000', source: 'Server' },
{ timestamp: new Date().toISOString(), level: 'debug', message: 'Loading configuration from /etc/app/config.json', source: 'Config' },
{ timestamp: new Date().toISOString(), level: 'info', message: 'Connected to MongoDB at mongodb://localhost:27017', source: 'Database' },
{ timestamp: new Date().toISOString(), level: 'success', message: 'Database connection established successfully', source: 'Database' },
{ timestamp: new Date().toISOString(), level: 'warn', message: 'No SSL certificate found, using self-signed certificate', source: 'Security' },
{ timestamp: new Date().toISOString(), level: 'info', message: 'API routes initialized: GET /api/users, POST /api/users, DELETE /api/users/:id', source: 'Router' },
{ timestamp: new Date().toISOString(), level: 'debug', message: 'Middleware stack: cors, bodyParser, authentication, errorHandler', source: 'Middleware' },
{ timestamp: new Date().toISOString(), level: 'info', message: 'WebSocket server listening on ws://localhost:3001', source: 'WebSocket' },
];
this.logEntries = demoLogs;
this.scrollToBottom();
}
public async updateLog(entries?: ILogEntry[]) {
if (entries) {
// Add new entries
this.logEntries = [...this.logEntries, ...entries];
// Trim if exceeds max entries
if (this.logEntries.length > this.maxEntries) {
this.logEntries = this.logEntries.slice(-this.maxEntries);
}
// Trigger re-render
this.requestUpdate();
// Auto-scroll if enabled
await this.updateComplete;
if (this.autoScroll) {
this.scrollToBottom();
}
}
}
public clearLogs() {
this.logEntries = [];
this.requestUpdate();
}
private scrollToBottom() {
if (this.logContainer) {
this.logContainer.scrollTop = this.logContainer.scrollHeight;
}
}
public addLog(level: ILogEntry['level'], message: string, source?: string) {
const newEntry: ILogEntry = {
timestamp: new Date().toISOString(),
level,
message,
source
};
this.updateLog([newEntry]);
}
}

1
ts_web/elements/00group-chart/dees-chart-log/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-chart-log.js';

3
ts_web/elements/00group-chart/index.ts Normal file
View File

@@ -0,0 +1,3 @@
// Chart Components
export * from './dees-chart-area/index.js';
export * from './dees-chart-log/index.js';