100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import { Search } from 'lucide-react';
|
||
import type { CurrentItem } from '../../../entities/current/types';
|
||
import { MetricWidget } from '../../../components/MetricWidget';
|
||
import { MetricWidgetsContainer } from '../../../components/MetricWidgetsContainer';
|
||
|
||
type IndicatorsViewProps = {
|
||
error: unknown;
|
||
getTagLabel: (tag: string) => string;
|
||
isError: boolean;
|
||
items: CurrentItem[];
|
||
search: string;
|
||
selectedTags: string[];
|
||
onSearchChange: (value: string) => void;
|
||
onToggleTag: (tag: string) => void;
|
||
};
|
||
|
||
export function IndicatorsView({
|
||
error,
|
||
getTagLabel,
|
||
isError,
|
||
items,
|
||
search,
|
||
selectedTags,
|
||
onSearchChange,
|
||
onToggleTag,
|
||
}: IndicatorsViewProps) {
|
||
return (
|
||
<section className="tags-section">
|
||
<div className="section-header">
|
||
<div>
|
||
<span className="page-kicker">
|
||
<Search size={14} />
|
||
Показатели
|
||
</span>
|
||
<h2>Текущие значения</h2>
|
||
</div>
|
||
<div className="indicator-controls">
|
||
<label className="search-box">
|
||
<Search size={16} />
|
||
<input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск показателя" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="indicator-summary">
|
||
<div>
|
||
<span>Всего</span>
|
||
<strong>{items.length}</strong>
|
||
</div>
|
||
<div>
|
||
<span>На графике</span>
|
||
<strong>{selectedTags.length}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
{isError ? (
|
||
<div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
|
||
) : (
|
||
<>
|
||
{/* displayMode === 'overview' ? (
|
||
<div className="metric-mosaic">
|
||
{itemStatuses.map(({ item, statusInfo }) => (
|
||
<button
|
||
key={`${item.edge}:${item.tag}`}
|
||
type="button"
|
||
className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
|
||
title={`${getTagLabel(item.tag)} (${item.tag}): ${formatNumber(item.value)} · ${statusInfo.label}`}
|
||
onClick={() => onToggleTag(item.tag)}
|
||
>
|
||
<span className="metric-tile__status" />
|
||
<span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
|
||
<strong>{formatNumber(item.value)}</strong>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="metric-grid">
|
||
{itemStatuses.map(({ item, statusInfo }) => (
|
||
<MetricCard
|
||
key={`${item.edge}:${item.tag}`}
|
||
item={item}
|
||
displayName={getTagLabel(item.tag)}
|
||
statusInfo={statusInfo}
|
||
selected={selectedTags.includes(item.tag)}
|
||
onToggle={onToggleTag}
|
||
/>
|
||
))}
|
||
</div>
|
||
) */}
|
||
<MetricWidgetsContainer>
|
||
{items.map((item) => (
|
||
<MetricWidget key={item.tag} item={item} />
|
||
))}
|
||
</MetricWidgetsContainer>
|
||
</>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|