@design.estate/dees-catalog 3.55.2 → 3.55.4

package/ts_web/elements/00group-chart/dees-chart-radar/component.ts

@@ -0,0 +1,130 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { radarStyles } from './styles.js';
+import { renderChartRadar } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IRadarIndicator {
+  name: string;
+  max: number;
+}
+
+export interface IRadarSeriesItem {
+  name: string;
+  values: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-radar': DeesChartRadar;
+  }
+}
+
+@customElement('dees-chart-radar')
+export class DeesChartRadar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor indicators: IRadarIndicator[] = [];
+
+  @property({ type: Array })
+  accessor series: IRadarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor fillArea: boolean = true;
+
+  public static styles = radarStyles;
+
+  public render(): TemplateResult {
+    return renderChartRadar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('indicators') ||
+        changedProperties.has('series') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('fillArea'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      return {
+        name: s.name,
+        value: s.values,
+        itemStyle: { color },
+        lineStyle: { color, width: 2 },
+        areaStyle: this.fillArea ? { color, opacity: 0.15 } : undefined,
+        symbol: 'circle',
+        symbolSize: 6,
+      };
+    });
+
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        : { show: false },
+      radar: {
+        indicator: this.indicators.map((ind) => ({
+          name: ind.name,
+          max: ind.max,
+        })),
+        shape: 'polygon',
+        splitNumber: 4,
+        axisName: {
+          color: colors.textSecondary,
+          fontSize: 11,
+        },
+        splitArea: {
+          areaStyle: {
+            color: [colors.bgTertiary, colors.bgSecondary],
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+      },
+      series: [
+        {
+          type: 'radar',
+          data: seriesData,
+          emphasis: {
+            lineStyle: {
+              width: 3,
+            },
+          },
+        },
+      ],
+    };
+  }
+}

package/ts_web/elements/00group-chart/dees-chart-radar/demo.ts

@@ -0,0 +1,119 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const indicators = [
+    { name: 'Latency', max: 100 },
+    { name: 'Throughput', max: 100 },
+    { name: 'Availability', max: 100 },
+    { name: 'Error Rate', max: 100 },
+    { name: 'Saturation', max: 100 },
+    { name: 'Security', max: 100 },
+  ];
+
+  const series = [
+    { name: 'Service A', values: [85, 90, 99, 12, 45, 78] },
+    { name: 'Service B', values: [70, 65, 95, 28, 60, 90] },
+  ];
+
+  const singleIndicators = [
+    { name: 'Speed', max: 10 },
+    { name: 'Reliability', max: 10 },
+    { name: 'Comfort', max: 10 },
+    { name: 'Safety', max: 10 },
+    { name: 'Cost', max: 10 },
+  ];
+
+  const singleSeries = [
+    { name: 'Rating', values: [8.5, 9.2, 7.0, 9.5, 6.0] },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const compChart = elementArg.querySelector('#comparison-chart') as DeesChartRadar;
+      const singleChart = elementArg.querySelector('#single-chart') as DeesChartRadar;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            compChart.series = series.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round(20 + Math.random() * 80)),
+            }));
+            singleChart.series = singleSeries.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round((2 + Math.random() * 8) * 10) / 10),
+            }));
+          });
+        }
+      });
+    }}>
+      <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;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .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="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-radar
+            id="comparison-chart"
+            .label=${'Service Health Comparison'}
+            .indicators=${indicators}
+            .series=${series}
+          ></dees-chart-radar>
+
+          <dees-chart-radar
+            id="single-chart"
+            .label=${'Product Rating'}
+            .indicators=${singleIndicators}
+            .series=${singleSeries}
+            .fillArea=${true}
+          ></dees-chart-radar>
+        </div>
+
+        <div class="info">
+          Radar chart for multi-dimensional comparison •
+          Supports multiple overlay series and configurable fill •
+          Click 'Randomize' to update data
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

package/ts_web/elements/00group-chart/dees-chart-radar/index.ts

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

package/ts_web/elements/00group-chart/dees-chart-radar/styles.ts

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const radarStyles = [
+  ...echartsBaseStyles,
+  css``,
+];

package/ts_web/elements/00group-chart/dees-chart-radar/template.ts

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+
+export const renderChartRadar = (component: DeesChartRadar): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

package/ts_web/elements/00group-chart/index.ts

@@ -1,3 +1,7 @@
 // Chart Components
 export * from './dees-chart-area/index.js';
+export * from './dees-chart-bar/index.js';
+export * from './dees-chart-donut/index.js';
+export * from './dees-chart-gauge/index.js';
 export * from './dees-chart-log/index.js';
+export * from './dees-chart-radar/index.js';

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
   DeesElement,
   html,
+  css,
   customElement,
   type TemplateResult,
   property,
@@ -9,6 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 import type { HLJSApi } from 'highlight.js';
 
@@ -39,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
   })
   accessor codeToDisplay: string = '';
 
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+  ];
+
   constructor() {
     super();
   }
@@ -56,11 +63,11 @@ export class DeesDataviewCodebox extends DeesElement {
           box-sizing: border-box;
         }
         dees-tile {
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+          color: var(--dees-color-text-primary);
         }
 
         .appbar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
           height: 32px;
           display: flex;
           font-size: 13px;
@@ -78,7 +85,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
           height: 28px;
           font-size: 11px;
           line-height: 28px;
@@ -118,10 +125,10 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          color: var(--dees-color-text-muted);
           padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-right: 1px solid var(--dees-color-border-default);
         }
 
         .lineCounter:last-child {

package/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -42,7 +42,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       dees-tile {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         cursor: default;
       }
 
@@ -61,7 +61,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
         flex: 1;
       }
 
@@ -78,21 +78,21 @@ export class DeesDataviewStatusobject extends DeesElement {
       .copyMain {
         font-size: 11px;
         font-weight: 500;
-        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%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         text-align: center;
         padding: 4px 10px;
         border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         user-select: none;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .copyMain: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%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .copyMain:active {
@@ -121,7 +121,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         gap: 10px;
         height: 36px;
         padding: 0 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         transition: background-color 0.15s ease;
         cursor: context-menu;
       }
@@ -149,7 +149,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         letter-spacing: -0.01em;
         white-space: nowrap;
         flex-shrink: 0;
@@ -167,7 +167,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .bottomBar {
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         height: 28px;
         font-size: 11px;
         line-height: 28px;

package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -160,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
       .grid-title {
         font-size: 16px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
         letter-spacing: -0.01em;
       }
 
@@ -186,7 +186,7 @@ export class DeesStatsGrid extends DeesElement {
       }
 
       .stats-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
+        border-color: var(--dees-color-border-strong);
       }
 
       .stats-tile.clickable {
@@ -281,7 +281,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-background {
         fill: none;
-        stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        stroke: var(--dees-color-border-default);
         stroke-width: 6;
       }
 
@@ -329,7 +329,7 @@ export class DeesStatsGrid extends DeesElement {
       .percentage-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
         margin-top: auto;
@@ -337,7 +337,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
@@ -386,14 +386,14 @@ export class DeesStatsGrid extends DeesElement {
       .multi-percentage-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
 
       .multi-percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 2px;
       }
@@ -464,7 +464,7 @@ export class DeesStatsGrid extends DeesElement {
       .cpu-core-bar-wrapper {
         flex: 1;
         width: 100%;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         position: relative;
         overflow: hidden;
@@ -477,21 +477,21 @@ export class DeesStatsGrid extends DeesElement {
         left: 0;
         right: 0;
         width: 100%;
-        background: ${cssManager.bdTheme('#666666', '#888888')};
+        background: var(--dees-color-text-muted);
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
         border-radius: 2px 2px 0 0;
       }
 
       .cpu-core-bar-fill.low {
-        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        background: var(--dees-color-accent-success);
       }
 
       .cpu-core-bar-fill.medium {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .cpu-core-bar-fill.high {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .cpu-core-label {
@@ -531,24 +531,24 @@ export class DeesStatsGrid extends DeesElement {
       .partition-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
       }
 
       .partition-bar-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
 
       .partition-bar-fill.warning {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .partition-bar-fill.critical {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .partition-stats {
@@ -695,7 +695,7 @@ export class DeesStatsGrid extends DeesElement {
       .disk-health-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
@@ -771,7 +771,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .trend-line {
         fill: none;
-        stroke: ${cssManager.bdTheme('#999999', '#666666')};
+        stroke: var(--dees-color-text-muted);
         stroke-width: 1.5;
         stroke-linejoin: round;
         stroke-linecap: round;