npm - @design.estate/dees-catalog - Versions diffs - 3.96.3 → 3.97.1 - Mend

@design.estate/dees-catalog 3.96.3 → 3.97.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist_bundle/bundle.js +3056 -3018
package/dist_ts_web/00_commitinfo_data.js +1 -1
package/dist_ts_web/elements/00group-chart/dees-chart-area/component.d.ts +21 -2
package/dist_ts_web/elements/00group-chart/dees-chart-area/component.js +109 -48
package/dist_ts_web/elements/00group-chart/dees-chart-area/demo.js +17 -2
package/dist_ts_web/elements/00group-chart/dees-chart-area/styles.js +5 -4
package/dist_ts_web/elements/00group-chart/dees-chart-area/template.js +7 -6
package/dist_watch/bundle.js +235637 -0
package/dist_watch/bundle.js.map +7 -0
package/dist_watch/index.html +28 -0
package/package.json +3 -3
package/ts_web/00_commitinfo_data.ts +1 -1
package/ts_web/elements/00group-chart/dees-chart-area/component.ts +99 -47
package/ts_web/elements/00group-chart/dees-chart-area/demo.ts +16 -1
package/ts_web/elements/00group-chart/dees-chart-area/styles.ts +4 -3
package/ts_web/elements/00group-chart/dees-chart-area/template.ts +6 -5

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.96.3",
+  "version": "3.97.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -35,11 +35,11 @@
   "devDependencies": {
     "@design.estate/dees-wcctools": "^3.9.2",
     "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.11.1",
+    "@git.zone/tsbundle": "^2.11.0",
     "@git.zone/tstest": "^3.6.6",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^26.1.1"
+    "@types/node": "^26.1.0"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts CHANGED Viewed

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.96.3',
+  version: '3.97.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-chart/dees-chart-area/component.ts CHANGED Viewed

@@ -10,6 +10,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './demo.js';
 import { chartAreaStyles } from './styles.js';
 import { renderChartArea } from './template.js';
+import { getEchartsSeriesColors, hexToRgba } from '../dees-chart-echarts-theme.js';
 import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
 import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
@@ -17,9 +18,16 @@ import '../../00group-layout/dees-tile/dees-tile.js';
 export type ChartSeriesConfig = {
   name?: string;
+  /** Explicit series color (hex or hsl). Falls back to the shared catalog palette by index. */
+  color?: string;
   data: Array<{ x: any; y: number }>;
 }[];
+export type TChartLegendStat = 'latest' | 'min' | 'max' | 'avg';
+export type TChartPriceLine = 'avg' | 'max';
+export const CHART_LEGEND_STATS: TChartLegendStat[] = ['latest', 'min', 'max', 'avg'];
 declare global {
   interface HTMLElementTagNameMap {
     'dees-chart-area': DeesChartArea;
@@ -68,6 +76,25 @@ export class DeesChartArea extends DeesElement {
   @property({ type: Number })
   accessor autoScrollInterval: number = 1000;
+  /**
+   * Which per-series stats appear in the footer legend, in the given order.
+   * Restrict (e.g. ['latest']) or empty ([] → color dot + name only) so the
+   * legend fits smaller tiles. Default shows all stats.
+   */
+  @property({ type: Array })
+  accessor legendStats: TChartLegendStat[] = [...CHART_LEGEND_STATS];
+  /** Hide the footer legend entirely. */
+  @property({ type: Boolean })
+  accessor hideLegend: boolean = false;
+  /**
+   * Which reference lines are drawn on the chart per series. The 'max' line
+   * keeps its existing rule of only appearing when max exceeds avg by >10%.
+   */
+  @property({ type: Array })
+  accessor chartLines: TChartPriceLine[] = ['avg', 'max'];
   private internalChartData: ChartSeriesConfig = [];
   private autoScrollTimer: number | null = null;
   private lcBundle: ILightweightChartsBundle | null = null;
@@ -75,21 +102,6 @@ export class DeesChartArea extends DeesElement {
   private priceLines: Map<string, any[]> = new Map();
   private tooltipEl: HTMLDivElement | null = null;
-  private readonly CHART_COLORS = {
-    dark: [
-      'hsl(217.2 91.2% 59.8%)',
-      'hsl(173.4 80.4% 40%)',
-      'hsl(280.3 87.4% 66.7%)',
-      'hsl(24.6 95% 53.1%)',
-    ],
-    light: [
-      'hsl(222.2 47.4% 51.2%)',
-      'hsl(142.1 76.2% 36.3%)',
-      'hsl(280.3 47.7% 50.2%)',
-      'hsl(20.5 90.2% 48.2%)',
-    ]
-  };
   constructor() {
     super();
     domtools.elementBasic.setup();
@@ -125,11 +137,18 @@ export class DeesChartArea extends DeesElement {
       .sort((a, b) => (a.time as number) - (b.time as number));
   }
-  private hslToRgba(hslColor: string, alpha: number): string {
-    const match = hslColor.match(/hsl\(([^)]+)\)/);
-    if (!match) return hslColor;
+  private colorToRgba(color: string, alpha: number): string {
+    if (/^#[0-9a-fA-F]{6}$/.test(color)) {
+      return hexToRgba(color, alpha);
+    }
+    if (/^#[0-9a-fA-F]{3}$/.test(color)) {
+      const expanded = `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+      return hexToRgba(expanded, alpha);
+    }
+    const match = color.match(/hsl\(([^)]+)\)/);
+    if (!match) return color;
     const parts = match[1].trim().split(/\s+/);
-    if (parts.length < 3) return hslColor;
+    if (parts.length < 3) return color;
     const h = parseFloat(parts[0]) / 360;
     const s = parseFloat(parts[1]) / 100;
     const l = parseFloat(parts[2]) / 100;
@@ -155,13 +174,20 @@ export class DeesChartArea extends DeesElement {
   }
   private getSeriesColors(isDark: boolean) {
-    return isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light;
+    // Shared catalog palette so the same index resolves to the same color
+    // in dees-chart-donut and every other echarts-based chart.
+    return getEchartsSeriesColors(!isDark);
+  }
+  private resolveSeriesColor(entry: { color?: string } | undefined, index: number, isDark: boolean): string {
+    if (entry?.color) return entry.color;
+    const palette = this.getSeriesColors(isDark);
+    return palette[index % palette.length];
   }
   private applyTheme() {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
-    const colors = this.getSeriesColors(isDark);
     this.chart.applyOptions({
       layout: {
@@ -177,10 +203,10 @@ export class DeesChartArea extends DeesElement {
     let idx = 0;
     for (const [, api] of this.seriesApis) {
-      const color = colors[idx % colors.length];
+      const color = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
       api.applyOptions({
-        topColor: this.hslToRgba(color, isDark ? 0.4 : 0.5),
-        bottomColor: this.hslToRgba(color, 0),
+        topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
+        bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
       });
       idx++;
@@ -190,7 +216,6 @@ export class DeesChartArea extends DeesElement {
   private recreateSeries(chartSeries: ChartSeriesConfig) {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
-    const colors = this.getSeriesColors(isDark);
     for (const [, api] of this.seriesApis) {
       this.chart.removeSeries(api);
@@ -199,10 +224,10 @@ export class DeesChartArea extends DeesElement {
     this.priceLines.clear();
     chartSeries.forEach((s, index) => {
-      const color = colors[index % colors.length];
+      const color = this.resolveSeriesColor(s, index, isDark);
       const api = this.chart!.addSeries(this.lcBundle!.AreaSeries, {
-        topColor: this.hslToRgba(color, isDark ? 0.4 : 0.5),
-        bottomColor: this.hslToRgba(color, 0),
+        topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
+        bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
         lineWidth: 2,
         lineType: this.lcBundle!.LineType.Curved,
@@ -236,17 +261,17 @@ export class DeesChartArea extends DeesElement {
   private computeStats(chartSeries: ChartSeriesConfig) {
     const isDark = !this.goBright;
-    const colors = this.getSeriesColors(isDark);
     this.seriesStats = chartSeries.map((s, index) => {
+      const color = this.resolveSeriesColor(s, index, isDark);
       const values = s.data.map(d => d.y);
       if (values.length === 0) {
-        return { name: s.name || `series-${index}`, latest: 0, min: 0, max: 0, avg: 0, color: colors[index % colors.length] };
+        return { name: s.name || `series-${index}`, latest: 0, min: 0, max: 0, avg: 0, color };
       }
       const latest = values[values.length - 1];
       const min = Math.min(...values);
       const max = Math.max(...values);
       const avg = Math.round((values.reduce((sum, v) => sum + v, 0) / values.length) * 100) / 100;
-      return { name: s.name || `series-${index}`, latest, min, max, avg, color: colors[index % colors.length] };
+      return { name: s.name || `series-${index}`, latest, min, max, avg, color };
     });
   }
@@ -270,20 +295,22 @@ export class DeesChartArea extends DeesElement {
     const lines: any[] = [];
-    lines.push(api.createPriceLine({
-      price: Math.round(avg * 100) / 100,
-      color: this.hslToRgba(color, 0.5),
-      lineWidth: 1,
-      lineStyle: 2, // Dashed
-      axisLabelVisible: true,
-      title: 'avg',
-    }));
+    if (this.chartLines.includes('avg')) {
+      lines.push(api.createPriceLine({
+        price: Math.round(avg * 100) / 100,
+        color: this.colorToRgba(color, 0.5),
+        lineWidth: 1,
+        lineStyle: 2, // Dashed
+        axisLabelVisible: true,
+        title: 'avg',
+      }));
+    }
     // Only show max line if it's more than 10% above average
-    if (avg > 0 && (max - avg) / avg > 0.1) {
+    if (this.chartLines.includes('max') && avg > 0 && (max - avg) / avg > 0.1) {
       lines.push(api.createPriceLine({
         price: max,
-        color: this.hslToRgba(color, 0.8),
+        color: this.colorToRgba(color, 0.8),
         lineWidth: 1,
         lineStyle: 1, // Dotted
         axisLabelVisible: true,
@@ -314,7 +341,6 @@ export class DeesChartArea extends DeesElement {
       const bgColor = isDark ? 'hsl(0 0% 9%)' : 'hsl(0 0% 100%)';
       const textColor = isDark ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)';
       const borderColor = isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)';
-      const colors = this.getSeriesColors(isDark);
       let html = '';
       let idx = 0;
@@ -323,7 +349,7 @@ export class DeesChartArea extends DeesElement {
         const data = param.seriesData.get(api);
         if (data && 'value' in data && (data as any).value !== undefined) {
           hasData = true;
-          const color = colors[idx % colors.length];
+          const color = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
           const formatted = this.yAxisFormatter((data as any).value);
           html += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? '6px' : '0'} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color};border-radius:2px;"></span>
@@ -458,6 +484,10 @@ export class DeesChartArea extends DeesElement {
       }
     }
+    if (changedProperties.has('chartLines') && this.chart) {
+      this.refreshPriceLines();
+    }
     if ((changedProperties.has('yAxisScaling') || changedProperties.has('yAxisMax')) && this.chart) {
       for (const [, api] of this.seriesApis) {
         if (this.yAxisScaling === 'dynamic') {
@@ -486,7 +516,7 @@ export class DeesChartArea extends DeesElement {
         if (newSeries.length !== this.seriesApis.size) {
           this.recreateSeries(newSeries);
         } else {
-          const colors = this.getSeriesColors(!this.goBright);
+          const isDark = !this.goBright;
           newSeries.forEach((s, index) => {
             const name = s.name || `series-${index}`;
             const api = this.seriesApis.get(name);
@@ -496,7 +526,13 @@ export class DeesChartArea extends DeesElement {
               return ms > cutoffTime;
             });
             api.setData(this.convertDataToLC(filtered));
-            this.updatePriceLines(name, api, filtered, colors[index % colors.length]);
+            const color = this.resolveSeriesColor(s, index, isDark);
+            api.applyOptions({
+              topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
+              bottomColor: this.colorToRgba(color, 0),
+              lineColor: color,
+            });
+            this.updatePriceLines(name, api, filtered, color);
           });
           this.computeStats(newSeries);
         }
@@ -528,13 +564,19 @@ export class DeesChartArea extends DeesElement {
         if (newSeries.length !== this.seriesApis.size) {
           this.recreateSeries(newSeries);
         } else {
-          const colors = this.getSeriesColors(!this.goBright);
+          const isDark = !this.goBright;
           newSeries.forEach((s, index) => {
             const name = s.name || `series-${index}`;
             const api = this.seriesApis.get(name);
             if (!api) return;
             api.setData(this.convertDataToLC(s.data));
-            this.updatePriceLines(name, api, s.data, colors[index % colors.length]);
+            const color = this.resolveSeriesColor(s, index, isDark);
+            api.applyOptions({
+              topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
+              bottomColor: this.colorToRgba(color, 0),
+              lineColor: color,
+            });
+            this.updatePriceLines(name, api, s.data, color);
           });
           this.computeStats(newSeries);
         }
@@ -609,6 +651,16 @@ export class DeesChartArea extends DeesElement {
     });
   }
+  private refreshPriceLines() {
+    const isDark = !this.goBright;
+    this.chartSeries.forEach((s, index) => {
+      const name = s.name || `series-${index}`;
+      const api = this.seriesApis.get(name);
+      if (!api) return;
+      this.updatePriceLines(name, api, s.data, this.resolveSeriesColor(s, index, isDark));
+    });
+  }
   private startAutoScroll() {
     if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {

package/ts_web/elements/00group-chart/dees-chart-area/demo.ts CHANGED Viewed

@@ -450,7 +450,22 @@ export const demoFunc = () => {
           .yAxisFormatter=${(val: number) => `${val}`}
         ></dees-chart-area>
       </div>
+      <div class="chart-container" style="margin-top: 20px; min-height: 260px; height: 260px;">
+        <dees-chart-area
+          id="compact-chart"
+          style="height: 260px;"
+          .label=${'Compact tile (legendStats=[avg], chartLines=[], explicit colors)'}
+          .legendStats=${['avg']}
+          .chartLines=${[]}
+          .series=${initialDatasets.system.series.map((s, idx) => ({
+            ...s,
+            color: idx === 0 ? '#0a84ff' : '#34c759',
+          }))}
+          .yAxisFormatter=${initialFormatters.system}
+        ></dees-chart-area>
+      </div>
       <div class="info">
         Real-time monitoring with 2-minute rolling window •
         Updates every second with smooth value transitions •

package/ts_web/elements/00group-chart/dees-chart-area/styles.ts CHANGED Viewed

@@ -51,11 +51,12 @@ export const chartAreaStyles = [
         inset: 0 0 4px 0;
       }
       .statsBar {
-        height: 32px;
-        padding: 0 16px;
+        min-height: 32px;
+        padding: 4px 16px;
         display: flex;
         align-items: center;
-        gap: 24px;
+        flex-wrap: wrap;
+        gap: 4px 24px;
         width: 100%;
         box-sizing: border-box;
       }

package/ts_web/elements/00group-chart/dees-chart-area/template.ts CHANGED Viewed

@@ -12,16 +12,17 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
             </button>
           </div>
           <div class="chartContainer"></div>
-          ${component.seriesStats.length > 0 ? html`
+          ${component.seriesStats.length > 0 && !component.hideLegend ? html`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`
                 <div class="statsSeries">
                   <span class="statsColor" style="background:${s.color}"></span>
                   <span class="statsName">${s.name}</span>
-                  <span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
-                  <span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
-                  <span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
-                  <span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
+                  ${component.legendStats
+                    .filter(key => key === 'latest' || key === 'min' || key === 'max' || key === 'avg')
+                    .map(key => html`
+                      <span class="statsItem">${key} <strong>${component.yAxisFormatter(s[key])}</strong></span>
+                    `)}
                 </div>
               `)}
             </div>