narang-ai
230d3847ef
- 디자인 시스템: #151515 배경, 1px 보더 카드, CSS vars, mono 포인트 - GlobalStyle/theme.ts v2 (DESIGN-SYSTEM.md 기반) - 공통 컴포넌트 (ui/base.tsx): LabelMeta, BracketValue, Card, TechBar, Timeline 등 - Sidebar: [대시] 브라켓 네비 + 모바일 하단 탭바 (767px) - LayoutShell: SidebarContext 제거, 단순화 - 대시보드 (/): SYS 상태 카드 4개 + ONGOING PROJECTS + ACTIVITY FEED - 활동 로그 (/activities): 로그 테이블 + 필터 + 검색 + 페이지네이션 (신규) - 설정 (/settings): 4섹션 Toggle/Bracket Input 그리드 - 자매 노드 관리 (/sisters): 3열 수평 레이아웃 (INFO/GRAPH/SYNC) - 자매 상세 (/sisters/[name]): 간소화 + 터미널 스타일 - 조직도 (/org): 터미널 카드 트리 구조 + 레벨 색상 - 프로젝트 목록 (/projects): 새 라우트 - 프로젝트 상세 (/projects/[id]): Phase Timeline + Audit Log + Checklist - FE 14 routes build 성공
114 lines
2.6 KiB
TypeScript
114 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { theme } from '@/styles/theme';
|
|
|
|
interface BarChartProps {
|
|
data: Array<{ label: string; value: number; color?: string }>;
|
|
maxValue?: number;
|
|
unit?: string;
|
|
title?: string;
|
|
}
|
|
|
|
const Wrapper = styled.div`
|
|
width: 100%;
|
|
`;
|
|
|
|
const Title = styled.div`
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
const ChartArea = styled.div`
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
height: 140px;
|
|
`;
|
|
|
|
const BarWrapper = styled.div`
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
`;
|
|
|
|
const Bar = styled.div<{ $height: number; $color: string }>`
|
|
width: 100%;
|
|
height: ${({ $height }) => $height}%;
|
|
min-height: 2px;
|
|
background: ${({ $color }) => $color};
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 0.4s ease;
|
|
position: relative;
|
|
|
|
&:hover::after {
|
|
content: attr(data-value);
|
|
position: absolute;
|
|
top: -24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 11px;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
background: rgba(22,27,34,0.95);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
`;
|
|
|
|
const Label = styled.div`
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 60px;
|
|
`;
|
|
|
|
const Empty = styled.div`
|
|
padding: 32px;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
`;
|
|
|
|
const COLORS = ['#58A6FF', '#00FF00', '#FF9800', '#E040FB', '#00BCD4'];
|
|
|
|
export default function BarChart({ data, maxValue, unit = '', title }: BarChartProps) {
|
|
if (!data.length) return <Empty>데이터 없음</Empty>;
|
|
|
|
const max = maxValue ?? Math.max(...data.map((d) => d.value), 1);
|
|
|
|
return (
|
|
<Wrapper>
|
|
{title && <Title>{title}</Title>}
|
|
<ChartArea>
|
|
{data.map((item, i) => {
|
|
const height = Math.max((item.value / max) * 100, item.value > 0 ? 2 : 0);
|
|
const color = item.color ?? COLORS[i % COLORS.length];
|
|
const displayValue = unit === '$'
|
|
? `$${item.value.toFixed(4)}`
|
|
: `${item.value.toLocaleString()}${unit}`;
|
|
return (
|
|
<BarWrapper key={item.label}>
|
|
<Bar $height={height} $color={color} data-value={displayValue} />
|
|
<Label title={item.label}>{item.label}</Label>
|
|
</BarWrapper>
|
|
);
|
|
})}
|
|
</ChartArea>
|
|
</Wrapper>
|
|
);
|
|
}
|