tomevault-io Dashboard Patterns for Somali Dialect Classifier
Chart.js Integration
Pattern 1: Bar Chart Component
function DialectDistributionChart({ data }) {
const chartRef = useRef(null);
const chartInstance = useRef(null);
useEffect(() => {
if (!chartRef.current) return;
// Destroy previous chart
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext('2d');
chartInstance.current = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Northern', 'Southern', 'Central'],
datasets: [{
label: 'Records',
data: [data.northern, data.southern, data.central],
backgroundColor: ['#33BBEE', '#0077BB', '#66CCEE'] // Data colors
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
}
}
});
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
}
};
}, [data]);
return (
<div className="chart-container" style={{ height: '300px' }}>
<canvas ref={chartRef}></canvas>
</div>
);
}
Pattern 2: Line Chart with Time Series
function MetricsOverTimeChart({ timeSeriesData }) {
const chartRef = useRef(null);
useEffect(() => {
if (!chartRef.current) return;
const ctx = chartRef.current.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: timeSeriesData.map(d => d.date),
datasets: [{
label: 'Accuracy',
data: timeSeriesData.map(d => d.accuracy),
borderColor: '#33BBEE', // Data cyan
backgroundColor: 'rgba(51, 187, 238, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: (context) => `Accuracy: ${(context.parsed.y * 100).toFixed(1)}%`
}
}
}
}
});
}, [timeSeriesData]);
return <canvas ref={chartRef}></canvas>;
}
Data Card Components
Pattern 1: Metric Card
function MetricCard({ label, value, trend, trendDirection }) {
return (
<div className="data-card">
<div className="data-card__label">{label}</div>
<div className="data-card__value">{value.toLocaleString()}</div>
{trend && (
<div className="data-card__trend">
{trendDirection === 'up' && <span className="trend-icon">↑</span>}
{trendDirection === 'down' && <span className="trend-icon">↓</span>}
<span className="data-card__trend-text">{trend}</span>
</div>
)}
</div>
);
}
// Usage
<MetricCard
label="Total Records"
value={12345}
trend="+12.5% from last month"
trendDirection="up"
/>
Pattern 2: Grid of Metric Cards
function MetricsGrid({ metrics }) {
return (
<div className="metrics-grid">
{metrics.map((metric, idx) => (
<MetricCard
key={idx}
label={metric.label}
value={metric.value}
trend={metric.trend}
trendDirection={metric.trendDirection}
/>
))}
</div>
);
}
// CSS
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
Filter Patterns
Pattern 1: Toggle Capsule Filter
function DialectFilter({ selected, onChange }) {
const dialects = ['All', 'Northern', 'Southern', 'Central'];
return (
<div className="data-toggle">
{dialects.map(dialect => (
<button
key={dialect}
className={`data-toggle__option ${
selected === dialect ? 'data-toggle__option--active' : ''
}`}
=> onChange(dialect)}
>
{dialect}
</button>
))}
</div>
);
}
Pattern 2: Date Range Filter
function DateRangeFilter({ startDate, endDate, onChange }) {
return (
<div className="filter-group">
<label>Date Range</label>
<div className="date-inputs">
<input
type="date"
value={startDate}
=> onChange({ start: e.target.value, end: endDate })}
className="form__input"
/>
<span>to</span>
<input
type="date"
value={endDate}
=> onChange({ start: startDate, end: e.target.value })}
className="form__input"
/>
</div>
</div>
);
}
Data Fetching Patterns
Pattern 1: Custom Hook for Data Fetching
function useDataFetch(endpoint) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
const response = await fetch(endpoint);
if (!response.ok) throw new Error('Failed to fetch');
const json = await response.json();
setData(json);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchData();
}, [endpoint]);
return { data, loading, error };
}
// Usage
function DashboardView() {
const { data, loading, error } = useDataFetch('/api/metrics');
if (loading) return <LoadingSpinner />;
if (error) return <ErrorMessage message={error} />;
return <MetricsGrid metrics={data} />;
}
Loading & Empty States
Pattern 1: Loading Skeleton
function ChartSkeleton() {
return (
<div className="chart-skeleton">
<div className="skeleton-bar" />
<div className="skeleton-bar" />
<div className="skeleton-bar" />
</div>
);
}
// CSS
.skeleton-bar {
height: 200px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 8px;
margin-bottom: 1rem;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
Pattern 2: Empty State
function EmptyState({ message, action }) {
return (
<div className="empty-state">
<svg className="empty-state__icon" width="64" height="64">
{/* Icon SVG */}
</svg>
<p className="empty-state__message">{message}</p>
{action && (
<button className="btn btn--primary"
{action.label}
</button>
)}
</div>
);
}
// Usage
<EmptyState
message="No data available. Upload your first dataset to get started."
action={{
label: "Upload Dataset",
onClick: handleUpload
}}
/>
Responsive Layout Patterns
Pattern 1: Responsive Grid
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
padding: 2rem;
}
.dashboard-grid__full {
grid-column: 1 / -1;
}
.dashboard-grid__half {
grid-column: span 6;
}
.dashboard-grid__third {
grid-column: span 4;
}
@media (max-width: 768px) {
.dashboard-grid__half,
.dashboard-grid__third {
grid-column: 1 / -1;
}
}
Error Handling
Pattern 1: Error Boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error('Dashboard error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="error-message">
<h2>Something went wrong</h2>
<p>{this.state.error.message}</p>
<button => window.location.reload()}>
Reload Dashboard
</button>
</div>
);
}
return this.props.children;
}
}
// Usage
<ErrorBoundary>
<DashboardView />
</ErrorBoundary>
Performance Optimization
Pattern 1: Memoized Chart Component
const MemoizedChart = React.memo(({ data }) => {
return <DialectDistributionChart data={data} />;
}, (prevProps, nextProps) => {
// Only re-render if data actually changed
return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
});
Pattern 2: Debounced Filter
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}
// Usage in search filter
function SearchFilter() {
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearch = useDebounce(searchTerm, 300);
useEffect(() => {
if (debouncedSearch) {
fetchFilteredData(debouncedSearch);
}
}, [debouncedSearch]);
return (
<input
type="text"
value={searchTerm}
=> setSearchTerm(e.target.value)}
placeholder="Search..."
/>
);
}
When This Skill Activates
This skill auto-invokes when you mention:
- Dashboard, dashboard components, dashboard UI
- Chart.js, charts, data visualization
- React patterns, React components, React hooks
- Data cards, metric cards, KPI cards
- Filters, filtering, toggle filters
- Loading states, empty states, skeletons
- Responsive layout, grid layout
- Data fetching, API integration
Version: 1.0.0 Last Updated: 2025-11-06 Project: Somali Dialect Classifier Dashboard
Converted and distributed by TomeVault — claim your Tome and manage your conversions.