Initial commit: data-viz-elements-demo application
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Giuliano Silvestro
221
src/app/app.component.html
Normal file
221
src/app/app.component.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user