@ihabdevteam/core 0.90.0 → 0.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/components.cjs.js +14 -14
- package/dist/components.esm.css +1 -1
- package/dist/hooks.cjs.js +1 -1
- package/dist/i18n.cjs.js +1 -1
- package/dist/ihabdevteam-core.cjs.js +14 -14
- package/dist/ihabdevteam-core.d.ts +34 -3
- package/dist/packages/core/src/components/BarChart.css +7 -0
- package/dist/packages/core/src/components/BarChart.d.ts +1 -1
- package/dist/packages/core/src/components/BarChart.js +31 -14
- package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.css +10 -0
- package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.d.ts +20 -1
- package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.js +5 -4
- package/dist/packages/core/src/components/barChartTypes.d.ts +11 -0
- package/dist/packages/core/src/version.d.ts +1 -1
- package/dist/packages/core/src/version.js +1 -1
- package/dist/utils.cjs.js +1 -1
- package/package.json +1 -1
|
@@ -286,7 +286,7 @@ export declare type BadgeType = 'bar' | 'dot';
|
|
|
286
286
|
* - 주(week): 'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
|
|
287
287
|
* 원시 렌더링은 내부 BarChartCanvas가 담당한다.
|
|
288
288
|
*/
|
|
289
|
-
export declare function BarChart({ size, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): JSX.Element;
|
|
289
|
+
export declare function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): JSX.Element;
|
|
290
290
|
|
|
291
291
|
/** @public */
|
|
292
292
|
export declare interface BarChartControl {
|
|
@@ -330,6 +330,17 @@ export declare interface BarChartProps {
|
|
|
330
330
|
* - large: 카드가 가로 폭을 거의 100% 차지(1열). medium과 정보량은 동일, 캔버스만 더 크게
|
|
331
331
|
*/
|
|
332
332
|
size?: BarChartSize;
|
|
333
|
+
/**
|
|
334
|
+
* 막대 굵기(px) — `size` 프리셋(small 16 / medium 20 / large 24)을 이것만 덮어쓴다.
|
|
335
|
+
*
|
|
336
|
+
* 굵기만 줄이고 싶을 때 `small` 로 가면 높이·헤더 컨트롤·합계 라벨까지 같이
|
|
337
|
+
* 줄어든다(2026-09-10 말귀 실측). 이 값은 굵기만 바꾼다. 막대가 많아지면 여기
|
|
338
|
+
* 적은 값을 **위 한계**로 두고 점진 축소하는 것은 그대로다.
|
|
339
|
+
*
|
|
340
|
+
* CSS 로 덮고 싶으면 `.manager-bar-chart-bar`·`-stack` 의 `--bar-width` 를 쓴다 —
|
|
341
|
+
* 굵기는 인라인이 아니라 그 변수로 박혀 있다.
|
|
342
|
+
*/
|
|
343
|
+
barWidth?: number;
|
|
333
344
|
/** 섹션 제목 i18n 키 */
|
|
334
345
|
titleKey: string;
|
|
335
346
|
/** 구간(월) 키 → 주별/일별 데이터 */
|
|
@@ -1322,7 +1333,7 @@ export declare function copyText(text: string): Promise<boolean>;
|
|
|
1322
1333
|
*
|
|
1323
1334
|
* 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
|
|
1324
1335
|
*/
|
|
1325
|
-
export declare const CORE_VERSION = "0.
|
|
1336
|
+
export declare const CORE_VERSION = "0.92.0";
|
|
1326
1337
|
|
|
1327
1338
|
/** @public */
|
|
1328
1339
|
declare const coreDefault: Record<string, unknown>;
|
|
@@ -1569,6 +1580,20 @@ export declare function deriveNoiseContexts(trainingData: Record<string, unknown
|
|
|
1569
1580
|
*/
|
|
1570
1581
|
export declare function derivePassCard(p: PassCardProduct): PassCardDisplay;
|
|
1571
1582
|
|
|
1583
|
+
/**
|
|
1584
|
+
* 항목 하나 — 글자만 주면 그대로 한 줄이고, `color` 를 주면 앞에 색 점이 붙는다.
|
|
1585
|
+
*
|
|
1586
|
+
* 색 점은 **범례와 같은 색으로 줄을 읽게** 하려는 것이다. 차트의 쌓인 막대를 호버하면
|
|
1587
|
+
* 유형이 넷·다섯인데, 한 줄에 `A: 3 / B: 5 / …` 로 늘어놓으면 가로로 길어지고
|
|
1588
|
+
* 어느 색이 어느 유형인지 눈이 두 번 오간다(2026-09-10 말귀 실측, 사용자가 짚음).
|
|
1589
|
+
* @public
|
|
1590
|
+
*/
|
|
1591
|
+
export declare interface DescriptionItem {
|
|
1592
|
+
text: string;
|
|
1593
|
+
/** 앞에 붙는 점의 색. 없으면 점도 없다 */
|
|
1594
|
+
color?: string;
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1572
1597
|
/** @public */
|
|
1573
1598
|
export declare function DescriptionTooltip(props: TooltipDescriptionProps): JSX.Element | null;
|
|
1574
1599
|
|
|
@@ -6240,13 +6265,19 @@ export declare function Tooltip(props: TooltipProps): JSX.Element;
|
|
|
6240
6265
|
export declare interface TooltipDescriptionProps {
|
|
6241
6266
|
anchorRect?: DOMRect | AnchorRectLike | null;
|
|
6242
6267
|
title?: string;
|
|
6243
|
-
|
|
6268
|
+
/** 글자 하나, 글자 여럿, 또는 `{ text, color }` 여럿. 섞어도 된다 */
|
|
6269
|
+
items?: string | Array<string | DescriptionItem>;
|
|
6244
6270
|
/** 현재 재생 중인 항목 인덱스 (-1 이면 없음) */
|
|
6245
6271
|
activeIndex?: number;
|
|
6246
6272
|
/** 항목 번호 표시 여부 (기본값 true) */
|
|
6247
6273
|
showIndex?: boolean;
|
|
6248
6274
|
onClose?: () => void;
|
|
6249
6275
|
offset?: number;
|
|
6276
|
+
/**
|
|
6277
|
+
* 바깥을 누르면 닫히는가 (기본값 true). 호버로 여닫는 자리(차트 막대)에서는
|
|
6278
|
+
* `false` 로 — 막대를 누르는 것이 "바깥" 이라 눌릴 때마다 닫힌다.
|
|
6279
|
+
*/
|
|
6280
|
+
closeOnOutsideClick?: boolean;
|
|
6250
6281
|
}
|
|
6251
6282
|
|
|
6252
6283
|
/** @public */
|
|
@@ -125,6 +125,13 @@
|
|
|
125
125
|
height: 100%;
|
|
126
126
|
gap: 2px;
|
|
127
127
|
}
|
|
128
|
+
/* 막대 굵기 — 컴포넌트가 `--bar-width` 로 박고 여기서 읽는다. 인라인 flex/maxWidth 로
|
|
129
|
+
박으면 소비자가 CSS 로 못 줄인다(`!important` 로만). 변수면 선택자로 덮으면 된다. */
|
|
130
|
+
.manager-bar-chart-stack,
|
|
131
|
+
.manager-bar-chart-bar {
|
|
132
|
+
flex: 0 1 var(--bar-width);
|
|
133
|
+
max-width: var(--bar-width);
|
|
134
|
+
}
|
|
128
135
|
.manager-bar-chart-stack {
|
|
129
136
|
min-width: 0;
|
|
130
137
|
display: flex;
|
|
@@ -13,4 +13,4 @@ import type { BarChartProps } from './barChartTypes';
|
|
|
13
13
|
* - 주(week): 'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
|
|
14
14
|
* 원시 렌더링은 내부 BarChartCanvas가 담당한다.
|
|
15
15
|
*/
|
|
16
|
-
export default function BarChart({ size, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): import("react").JSX.Element;
|
|
16
|
+
export default function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): import("react").JSX.Element;
|
|
@@ -7,7 +7,7 @@ import Dropdown from './Dropdown';
|
|
|
7
7
|
import SegmentedControl from './SegmentedControl';
|
|
8
8
|
import Button from './Button';
|
|
9
9
|
import Loader from './Loader';
|
|
10
|
-
import
|
|
10
|
+
import DescriptionTooltip from './Tooltip/DescriptionTooltip';
|
|
11
11
|
import ChartSection, { ChartTotal, ChartLegend } from './ChartSection';
|
|
12
12
|
import { firstMondayOfMonth, KO_ORD } from './barChartData';
|
|
13
13
|
import { useBarChartControl } from './useBarChartControl';
|
|
@@ -27,6 +27,9 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
|
|
|
27
27
|
const cols = Math.max(1, data.length);
|
|
28
28
|
return Math.max(8, Math.min(barWidth, Math.round(120 / (cols * barsPerCol) + 6)));
|
|
29
29
|
}, [data.length, barsPerCol, barWidth]);
|
|
30
|
+
/* 굵기는 인라인 flex/maxWidth 가 아니라 CSS 변수로 박는다 — 소비자가 `!important`
|
|
31
|
+
없이 CSS 로 덮을 수 있게. 읽는 규칙은 BarChart.css 의 `.manager-bar-chart-bar`·`-stack`. */
|
|
32
|
+
const 막대굵기 = { '--bar-width': `${effBarWidth}px` };
|
|
30
33
|
const ticks = useMemo(() => {
|
|
31
34
|
const mid = Math.round(padded / 2);
|
|
32
35
|
return mid !== padded ? [padded, mid, 0] : [padded, 0];
|
|
@@ -40,26 +43,40 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
|
|
|
40
43
|
const parts = d.parts ?? [];
|
|
41
44
|
return (_jsx("div", { className: "manager-bar-chart-col", style: { cursor: isFuture ? 'default' : 'pointer' }, onMouseEnter: isFuture ? undefined : (e) => {
|
|
42
45
|
const r = e.currentTarget.getBoundingClientRect();
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
/* 한 줄에 `A: 3 / B: 5 / …` 로 늘어놓던 것을 줄마다 하나로 — 유형이 넷·다섯이면
|
|
47
|
+
가로로 길어져 읽기 어려웠다(사용자가 짚음). 제목은 날짜, 항목은 색 점·이름·값. */
|
|
48
|
+
const title = [d.label, d.sublabel].filter(Boolean).join(' ');
|
|
49
|
+
let items;
|
|
50
|
+
if (stacked) {
|
|
51
|
+
const 전부 = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${parts[k] ?? 0}`, color: (seriesColors ?? [])[k] }));
|
|
52
|
+
const 있는 = 전부.filter((_, k) => (parts[k] ?? 0) > 0);
|
|
53
|
+
items = 있는.length ? 있는 : 전부;
|
|
54
|
+
}
|
|
55
|
+
else if (rateLabels && !single) {
|
|
56
|
+
items = [{ text: `${labelA} ${d.a}%`, color: colorA }, { text: `${labelB} ${d.b}%`, color: colorB }];
|
|
57
|
+
}
|
|
58
|
+
else if (rateLabels && d.rawB !== undefined) {
|
|
59
|
+
items = [{ text: `${rateLabels.total} ${d.rawB}` }, { text: `${rateLabels.done} ${d.rawA ?? 0}`, color: colorA }];
|
|
60
|
+
}
|
|
61
|
+
else if (single) {
|
|
62
|
+
items = [{ text: `${labelA}: ${d.a}`, color: colorA }];
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
items = [{ text: `${labelA}: ${d.a}`, color: colorA }, { text: `${labelB}: ${d.b}`, color: colorB }];
|
|
66
|
+
}
|
|
67
|
+
setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, title, items });
|
|
51
68
|
}, onMouseLeave: handleBarLeave, children: !isFuture && (stacked ? (
|
|
52
69
|
// 계열별 stacked — 아래부터 위로 쌓고, 맨 위 segment만 상단 라운드
|
|
53
|
-
_jsx("div", { className: "manager-bar-chart-stack", style:
|
|
70
|
+
_jsx("div", { className: "manager-bar-chart-stack", style: 막대굵기, children: (() => {
|
|
54
71
|
const topK = parts.reduce((acc, v, k) => (v > 0 ? k : acc), -1); // 맨 위(최상단) 세그먼트
|
|
55
72
|
return parts.map((v, k) => (v > 0
|
|
56
73
|
? _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: (v / padded) * h, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k)
|
|
57
74
|
: null));
|
|
58
|
-
})() })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "manager-bar-chart-bar", style: {
|
|
75
|
+
})() })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "manager-bar-chart-bar", style: { ...막대굵기, height: ha, background: colorA } }), !single && _jsx("div", { className: "manager-bar-chart-bar", style: { ...막대굵기, height: hb, background: colorB } })] }))) }, i));
|
|
59
76
|
})] }), _jsx("div", { className: "manager-bar-chart-x-axis", children: data.map((d, i) => {
|
|
60
77
|
const isFuture = d.a === -1; // 아직 도래하지 않은 날 — 글씨 흐리게
|
|
61
78
|
return (_jsxs("span", { className: `manager-bar-chart-x-axis__label${isFuture ? ' manager-bar-chart-x-axis__label--future' : ''}`, children: [_jsxs("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: [d.isToday && _jsx("span", { className: "manager-bar-chart-x-axis__today-dot", style: { background: colorA } }), d.label] }), d.sublabel && _jsx("span", { className: "caption-1", children: d.sublabel })] }, i));
|
|
62
|
-
}) })] }) }) }), tooltip && (_jsx(
|
|
79
|
+
}) })] }) }) }), tooltip && (_jsx(DescriptionTooltip, { anchorRect: tooltip.rect, title: tooltip.title, items: tooltip.items, showIndex: false, closeOnOutsideClick: false }))] }));
|
|
63
80
|
}
|
|
64
81
|
/** 기간 컨트롤 UI(이전/다음·월 드롭다운·월/주 토글). Toolbar 등 외부에 배치 가능. @public */
|
|
65
82
|
export function BarChartControls({ control }) {
|
|
@@ -134,7 +151,7 @@ const BAR_SIZE_PRESET = {
|
|
|
134
151
|
* - 주(week): 'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
|
|
135
152
|
* 원시 렌더링은 내부 BarChartCanvas가 담당한다.
|
|
136
153
|
*/
|
|
137
|
-
export default function BarChart({ size = 'medium', titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, tightMax = false, avgMode = false, totalFormat, series, loading = false, onDetail, }) {
|
|
154
|
+
export default function BarChart({ size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, tightMax = false, avgMode = false, totalFormat, series, loading = false, onDetail, }) {
|
|
138
155
|
const { t, i18n } = useTranslation();
|
|
139
156
|
const sizePreset = BAR_SIZE_PRESET[size];
|
|
140
157
|
// 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
|
|
@@ -183,5 +200,5 @@ export default function BarChart({ size = 'medium', titleKey, data, colorA, colo
|
|
|
183
200
|
// 숫자는 h0, 단위(시간/분/초 등)는 h5로 분리
|
|
184
201
|
(totalFormat(total).match(/(\d+|[^\d]+)/g) ?? []).map((part, i) => (/\d/.test(part)
|
|
185
202
|
? _jsx("span", { className: "barchart-total__num h0", children: part }, i)
|
|
186
|
-
: _jsx("span", { className: "barchart-total__unit h5", children: part }, i)))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] })) })) : (_jsxs(ChartTotal, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), _jsx("span", { className: "barchart-total__unit h5", children: t(labelAKey) }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] }))) : _jsx("span", {}), _jsx(ChartLegend, { items: legendItems, className: "caption-1" })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: sizePreset.barWidth, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined })) }));
|
|
203
|
+
: _jsx("span", { className: "barchart-total__unit h5", children: part }, i)))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] })) })) : (_jsxs(ChartTotal, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), _jsx("span", { className: "barchart-total__unit h5", children: t(labelAKey) }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] }))) : _jsx("span", {}), _jsx(ChartLegend, { items: legendItems, className: "caption-1" })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: barWidth ?? sizePreset.barWidth, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined })) }));
|
|
187
204
|
}
|
|
@@ -40,6 +40,16 @@
|
|
|
40
40
|
color: var(--color-main);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
/* 항목 앞 색 점 — 범례와 같은 색으로 줄을 읽게 한다. 글줄 첫 줄 가운데에 오도록
|
|
44
|
+
위 여백을 둔다(항목이 flex-start 정렬이라 여러 줄이어도 첫 줄에 붙는다). */
|
|
45
|
+
.tooltip-description__dot {
|
|
46
|
+
flex-shrink: 0;
|
|
47
|
+
width: 8px;
|
|
48
|
+
height: 8px;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
margin-top: 6px;
|
|
51
|
+
}
|
|
52
|
+
|
|
43
53
|
/* 현재 재생 중인 항목 */
|
|
44
54
|
.tooltip-description__item--active {
|
|
45
55
|
color: var(--color-main);
|
|
@@ -1,16 +1,35 @@
|
|
|
1
1
|
import './DescriptionTooltip.css';
|
|
2
2
|
import type { AnchorRectLike } from '../../types/geometry';
|
|
3
|
+
/**
|
|
4
|
+
* 항목 하나 — 글자만 주면 그대로 한 줄이고, `color` 를 주면 앞에 색 점이 붙는다.
|
|
5
|
+
*
|
|
6
|
+
* 색 점은 **범례와 같은 색으로 줄을 읽게** 하려는 것이다. 차트의 쌓인 막대를 호버하면
|
|
7
|
+
* 유형이 넷·다섯인데, 한 줄에 `A: 3 / B: 5 / …` 로 늘어놓으면 가로로 길어지고
|
|
8
|
+
* 어느 색이 어느 유형인지 눈이 두 번 오간다(2026-09-10 말귀 실측, 사용자가 짚음).
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export interface DescriptionItem {
|
|
12
|
+
text: string;
|
|
13
|
+
/** 앞에 붙는 점의 색. 없으면 점도 없다 */
|
|
14
|
+
color?: string;
|
|
15
|
+
}
|
|
3
16
|
/** @public */
|
|
4
17
|
export interface TooltipDescriptionProps {
|
|
5
18
|
anchorRect?: DOMRect | AnchorRectLike | null;
|
|
6
19
|
title?: string;
|
|
7
|
-
|
|
20
|
+
/** 글자 하나, 글자 여럿, 또는 `{ text, color }` 여럿. 섞어도 된다 */
|
|
21
|
+
items?: string | Array<string | DescriptionItem>;
|
|
8
22
|
/** 현재 재생 중인 항목 인덱스 (-1 이면 없음) */
|
|
9
23
|
activeIndex?: number;
|
|
10
24
|
/** 항목 번호 표시 여부 (기본값 true) */
|
|
11
25
|
showIndex?: boolean;
|
|
12
26
|
onClose?: () => void;
|
|
13
27
|
offset?: number;
|
|
28
|
+
/**
|
|
29
|
+
* 바깥을 누르면 닫히는가 (기본값 true). 호버로 여닫는 자리(차트 막대)에서는
|
|
30
|
+
* `false` 로 — 막대를 누르는 것이 "바깥" 이라 눌릴 때마다 닫힌다.
|
|
31
|
+
*/
|
|
32
|
+
closeOnOutsideClick?: boolean;
|
|
14
33
|
}
|
|
15
34
|
/** @public */
|
|
16
35
|
export default function DescriptionTooltip(props: TooltipDescriptionProps): import("react").JSX.Element | null;
|
|
@@ -5,12 +5,13 @@ import './DescriptionTooltip.css';
|
|
|
5
5
|
/** @public */
|
|
6
6
|
export default function DescriptionTooltip(props) {
|
|
7
7
|
const { t } = useTranslation();
|
|
8
|
-
const { anchorRect, title, items, activeIndex = -1, showIndex = true, onClose, offset = 12 } = props || {};
|
|
9
|
-
const
|
|
8
|
+
const { anchorRect, title, items, activeIndex = -1, showIndex = true, onClose, offset = 12, closeOnOutsideClick = true } = props || {};
|
|
9
|
+
const raw = Array.isArray(items) ? items : (items ? [items] : []);
|
|
10
|
+
const list = raw.map((it) => (typeof it === 'string' ? { text: it } : it));
|
|
10
11
|
if (!list.length && !title)
|
|
11
12
|
return null;
|
|
12
|
-
return (_jsx(Tooltip, { anchorRect: anchorRect, offset: offset, onClose: onClose, closeOnOutsideClick:
|
|
13
|
+
return (_jsx(Tooltip, { anchorRect: anchorRect, offset: offset, onClose: onClose, closeOnOutsideClick: closeOnOutsideClick, useBorder: false, className: "tooltip-description",
|
|
13
14
|
/* `Tooltip` 의 기본 역할은 `dialog` 다. 이름을 안 주면 낭독기가 "대화상자" 라고만
|
|
14
15
|
읽어 **무슨 창인지 알 수 없다.** 보이는 제목이 있으면 그것이 곧 이름이다. */
|
|
15
|
-
ariaLabel: title || t('tooltip.description', '설명'), children: _jsxs("div", { className: "tooltip-description__box", children: [title && _jsx("span", { className: "tooltip-description__title body-2", children: title }), _jsx("ol", { className: "tooltip-description__items", children: list.map((item, i) => (_jsxs("li", { className: `tooltip-description__item body-3${i === activeIndex ? ' tooltip-description__item--active' : ''}`, children: [showIndex && list.length > 1 && _jsxs("span", { className: "tooltip-description__index button-1", children: [i + 1, "."] }), _jsx("span", { children: item })] }, i))) })] }) }));
|
|
16
|
+
ariaLabel: title || t('tooltip.description', '설명'), children: _jsxs("div", { className: "tooltip-description__box", children: [title && _jsx("span", { className: "tooltip-description__title body-2", children: title }), _jsx("ol", { className: "tooltip-description__items", children: list.map((item, i) => (_jsxs("li", { className: `tooltip-description__item body-3${i === activeIndex ? ' tooltip-description__item--active' : ''}`, children: [showIndex && list.length > 1 && _jsxs("span", { className: "tooltip-description__index button-1", children: [i + 1, "."] }), item.color && _jsx("span", { className: "tooltip-description__dot", style: { background: item.color }, "aria-hidden": "true" }), _jsx("span", { children: item.text })] }, i))) })] }) }));
|
|
16
17
|
}
|
|
@@ -37,6 +37,17 @@ export interface BarChartProps {
|
|
|
37
37
|
* - large: 카드가 가로 폭을 거의 100% 차지(1열). medium과 정보량은 동일, 캔버스만 더 크게
|
|
38
38
|
*/
|
|
39
39
|
size?: BarChartSize;
|
|
40
|
+
/**
|
|
41
|
+
* 막대 굵기(px) — `size` 프리셋(small 16 / medium 20 / large 24)을 이것만 덮어쓴다.
|
|
42
|
+
*
|
|
43
|
+
* 굵기만 줄이고 싶을 때 `small` 로 가면 높이·헤더 컨트롤·합계 라벨까지 같이
|
|
44
|
+
* 줄어든다(2026-09-10 말귀 실측). 이 값은 굵기만 바꾼다. 막대가 많아지면 여기
|
|
45
|
+
* 적은 값을 **위 한계**로 두고 점진 축소하는 것은 그대로다.
|
|
46
|
+
*
|
|
47
|
+
* CSS 로 덮고 싶으면 `.manager-bar-chart-bar`·`-stack` 의 `--bar-width` 를 쓴다 —
|
|
48
|
+
* 굵기는 인라인이 아니라 그 변수로 박혀 있다.
|
|
49
|
+
*/
|
|
50
|
+
barWidth?: number;
|
|
40
51
|
/** 섹션 제목 i18n 키 */
|
|
41
52
|
titleKey: string;
|
|
42
53
|
/** 구간(월) 키 → 주별/일별 데이터 */
|