121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
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>
|
|
`;
|
|
};
|