222 lines
7.8 KiB
HTML
222 lines
7.8 KiB
HTML
<div class="demo-app">
|
|
<!-- Header -->
|
|
<header class="demo-header">
|
|
<h1 class="demo-header__title">Data Viz Elements</h1>
|
|
<p class="demo-header__subtitle">Angular components for data visualization powered by D3.js</p>
|
|
<div class="demo-header__actions">
|
|
<button class="demo-btn demo-btn--ghost" (click)="toggleDarkMode()" type="button">
|
|
{{ isDarkMode() ? 'Light Mode' : 'Dark Mode' }}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="demo-nav">
|
|
@for (section of sections; track section.id) {
|
|
<button
|
|
class="demo-nav__item"
|
|
[class.demo-nav__item--active]="activeSection() === section.id"
|
|
(click)="setSection(section.id)"
|
|
type="button"
|
|
>
|
|
{{ section.label }}
|
|
</button>
|
|
}
|
|
</nav>
|
|
|
|
<!-- Content -->
|
|
<main class="demo-content">
|
|
|
|
<!-- Standard Charts -->
|
|
@if (activeSection() === 'standard') {
|
|
<div class="demo-grid">
|
|
<section class="demo-card demo-card--wide">
|
|
<h2 class="demo-card__title">Bar Chart</h2>
|
|
<viz-bar-chart [data]="barData" [height]="280" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--wide">
|
|
<h2 class="demo-card__title">Bar Chart (Horizontal)</h2>
|
|
<viz-bar-chart [data]="barData" [height]="280" orientation="horizontal" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Line Chart</h2>
|
|
<viz-line-chart [series]="lineSeries" [height]="300" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Area Chart</h2>
|
|
<viz-area-chart [series]="lineSeries" [height]="300" [gradient]="true" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
|
|
<section class="demo-card">
|
|
<h2 class="demo-card__title">Pie Chart</h2>
|
|
<viz-pie-chart [data]="pieData" [height]="280" [legend]="{ visible: true, position: 'right' }" />
|
|
</section>
|
|
|
|
<section class="demo-card">
|
|
<h2 class="demo-card__title">Donut Chart</h2>
|
|
<viz-pie-chart [data]="pieData" [height]="280" [donut]="true" [legend]="{ visible: true, position: 'bottom' }" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Scatter / Bubble Chart</h2>
|
|
<viz-scatter-chart [series]="scatterSeries" [height]="350" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
</div>
|
|
}
|
|
|
|
<!-- Statistical Charts -->
|
|
@if (activeSection() === 'statistical') {
|
|
<div class="demo-grid">
|
|
<section class="demo-card demo-card--wide">
|
|
<h2 class="demo-card__title">Histogram</h2>
|
|
<viz-histogram [values]="histogramValues" [height]="300" [bins]="25" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--wide">
|
|
<h2 class="demo-card__title">Box Plot</h2>
|
|
<viz-box-plot [data]="boxPlotData" [height]="300" />
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Heatmap</h2>
|
|
<viz-heatmap
|
|
[data]="heatmapData"
|
|
[xLabels]="heatmapXLabels"
|
|
[yLabels]="heatmapYLabels"
|
|
[height]="300"
|
|
/>
|
|
</section>
|
|
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Treemap</h2>
|
|
<viz-treemap [data]="treemapData" [height]="350" />
|
|
</section>
|
|
</div>
|
|
}
|
|
|
|
<!-- Real-time & KPI -->
|
|
@if (activeSection() === 'realtime') {
|
|
<div class="demo-grid">
|
|
<!-- Stat Cards -->
|
|
<section class="demo-card">
|
|
<viz-stat-card
|
|
value="12,847"
|
|
label="Total Users"
|
|
trend="up"
|
|
trendValue="+12.5%"
|
|
/>
|
|
</section>
|
|
<section class="demo-card">
|
|
<viz-stat-card
|
|
value="$48.2K"
|
|
label="Revenue"
|
|
trend="up"
|
|
trendValue="+8.3%"
|
|
/>
|
|
</section>
|
|
<section class="demo-card">
|
|
<viz-stat-card
|
|
value="342"
|
|
label="Active Sessions"
|
|
trend="down"
|
|
trendValue="-3.1%"
|
|
/>
|
|
</section>
|
|
<section class="demo-card">
|
|
<viz-stat-card
|
|
value="99.9%"
|
|
label="Uptime"
|
|
trend="flat"
|
|
trendValue="0.0%"
|
|
/>
|
|
</section>
|
|
|
|
<!-- Gauges -->
|
|
<section class="demo-card demo-card--center">
|
|
<h2 class="demo-card__title">Radial Gauge</h2>
|
|
<viz-gauge [value]="72" [max]="100" label="CPU" [width]="180" [height]="140" />
|
|
</section>
|
|
<section class="demo-card demo-card--center">
|
|
<h2 class="demo-card__title">Radial Gauge</h2>
|
|
<viz-gauge [value]="45" [max]="100" label="Memory" [width]="180" [height]="140" />
|
|
</section>
|
|
|
|
<!-- Progress Rings -->
|
|
<section class="demo-card demo-card--center">
|
|
<h2 class="demo-card__title">Progress Rings</h2>
|
|
<div class="demo-row">
|
|
<viz-progress-ring [value]="75" [max]="100" [size]="80" />
|
|
<viz-progress-ring [value]="42" [max]="100" [size]="80" color="#10b981" />
|
|
<viz-progress-ring [value]="90" [max]="100" [size]="80" color="#f59e0b" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Progress Bars -->
|
|
<section class="demo-card demo-card--wide">
|
|
<h2 class="demo-card__title">Progress Bar</h2>
|
|
<div class="demo-stack">
|
|
<viz-progress-bar [value]="68" [max]="100" />
|
|
<viz-progress-bar [value]="45" [max]="100" color="#10b981" />
|
|
<viz-progress-bar [value]="82" [max]="100" color="#f59e0b" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trend Indicators -->
|
|
<section class="demo-card">
|
|
<h2 class="demo-card__title">Trend Indicators</h2>
|
|
<div class="demo-stack">
|
|
<viz-trend-indicator direction="up" value="+15.3%" label="vs last month" />
|
|
<viz-trend-indicator direction="down" value="-4.2%" label="vs last week" />
|
|
<viz-trend-indicator direction="flat" value="0.0%" label="vs yesterday" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sparklines -->
|
|
<section class="demo-card">
|
|
<h2 class="demo-card__title">Sparklines</h2>
|
|
<div class="demo-stack">
|
|
<div class="demo-row demo-row--between">
|
|
<span>Line:</span>
|
|
<viz-sparkline [data]="sparklineData" type="line" [showLastValue]="true" />
|
|
</div>
|
|
<div class="demo-row demo-row--between">
|
|
<span>Area:</span>
|
|
<viz-sparkline [data]="sparklineData" type="area" color="#10b981" />
|
|
</div>
|
|
<div class="demo-row demo-row--between">
|
|
<span>Bar:</span>
|
|
<viz-sparkline [data]="sparklineData" type="bar" color="#f59e0b" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Time Series -->
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Time Series</h2>
|
|
<viz-time-series [series]="timeSeriesData" [height]="300" [showArea]="true" [legend]="{ visible: true, position: 'top' }" />
|
|
</section>
|
|
</div>
|
|
}
|
|
|
|
<!-- Data Table -->
|
|
@if (activeSection() === 'table') {
|
|
<div class="demo-grid">
|
|
<section class="demo-card demo-card--full">
|
|
<h2 class="demo-card__title">Data Table</h2>
|
|
<viz-data-table
|
|
[data]="tableData"
|
|
[columns]="tableColumns"
|
|
[sortable]="true"
|
|
[filterable]="true"
|
|
[paginated]="true"
|
|
[pageSize]="8"
|
|
/>
|
|
</section>
|
|
</div>
|
|
}
|
|
</main>
|
|
</div>
|