dees-catalog/ts_web/elements/00group-chart/dees-chart-bar/demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';
import type { DeesChartBar } from './component.js';
import '@design.estate/dees-wcctools/demotools';
import './component.js';

export const demoFunc = () => {
  const endpointCategories = ['/api/users', '/api/orders', '/api/products', '/api/auth', '/api/search'];
  const endpointSeries = [
    { name: 'GET', data: [1240, 890, 720, 2100, 560] },
    { name: 'POST', data: [320, 450, 180, 890, 40] },
    { name: 'PUT', data: [90, 210, 150, 30, 10] },
  ];

  const regionCategories = ['US-East', 'US-West', 'EU', 'Asia', 'Other'];
  const regionSeries = [
    { name: 'Requests', data: [4500, 3200, 2800, 1900, 600] },
  ];

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const vertChart = elementArg.querySelector('#vert-chart') as DeesChartBar;
      const horizChart = elementArg.querySelector('#horiz-chart') as DeesChartBar;
      const stackChart = elementArg.querySelector('#stack-chart') as DeesChartBar;

      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button: any) => {
        const text = button.text?.trim();
        if (text === 'Randomize') {
          button.addEventListener('click', () => {
            vertChart.series = endpointSeries.map((s) => ({
              ...s,
              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
            }));
            horizChart.series = regionSeries.map((s) => ({
              ...s,
              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
            }));
            stackChart.series = endpointSeries.map((s) => ({
              ...s,
              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
            }));
          });
        }
      });
    }}>
      <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-bar
            id="vert-chart"
            .label=${'Requests by Endpoint'}
            .categories=${endpointCategories}
            .series=${endpointSeries}
            .valueFormatter=${(val: number) => `${val} req`}
          ></dees-chart-bar>

          <dees-chart-bar
            id="horiz-chart"
            .label=${'Traffic by Region'}
            .categories=${regionCategories}
            .series=${regionSeries}
            .horizontal=${true}
            .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k`}
          ></dees-chart-bar>
        </div>

        <dees-chart-bar
          id="stack-chart"
          .label=${'Stacked: Requests by Endpoint'}
          .categories=${endpointCategories}
          .series=${endpointSeries}
          .stacked=${true}
          .valueFormatter=${(val: number) => `${val} req`}
        ></dees-chart-bar>

        <div class="info">
          Bar chart with vertical, horizontal, and stacked modes •
          Click 'Randomize' to update data with animation
        </div>
      </div>
    </dees-demowrapper>
  `;
};