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

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

@@ -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;

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

@@ -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%)')};
       }

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

@@ -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>
       `;
 };