@dssp/dkpi 1.0.0-alpha.58 → 1.0.0-alpha.59

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.
Files changed (84) hide show
  1. package/dist-client/components/kpi-boxplot-chart.d.ts +1 -1
  2. package/dist-client/components/kpi-boxplot-chart.js +17 -17
  3. package/dist-client/components/kpi-boxplot-chart.js.map +1 -1
  4. package/dist-client/components/kpi-lookup-chart.d.ts +29 -0
  5. package/dist-client/components/kpi-lookup-chart.js +434 -0
  6. package/dist-client/components/kpi-lookup-chart.js.map +1 -0
  7. package/dist-client/components/kpi-mini-trend-chart.d.ts +14 -0
  8. package/dist-client/components/kpi-mini-trend-chart.js +148 -0
  9. package/dist-client/components/kpi-mini-trend-chart.js.map +1 -0
  10. package/dist-client/components/kpi-radar-chart.d.ts +1 -1
  11. package/dist-client/components/kpi-radar-chart.js +73 -55
  12. package/dist-client/components/kpi-radar-chart.js.map +1 -1
  13. package/dist-client/components/kpi-trend-chart.d.ts +25 -0
  14. package/dist-client/components/kpi-trend-chart.js +220 -0
  15. package/dist-client/components/kpi-trend-chart.js.map +1 -0
  16. package/dist-client/google-map/common-google-map.d.ts +35 -0
  17. package/dist-client/google-map/common-google-map.js +343 -0
  18. package/dist-client/google-map/common-google-map.js.map +1 -0
  19. package/dist-client/google-map/google-map-loader.d.ts +6 -0
  20. package/dist-client/google-map/google-map-loader.js +23 -0
  21. package/dist-client/google-map/google-map-loader.js.map +1 -0
  22. package/dist-client/pages/kpi-dashboard/cards/kpi-level1-card.d.ts +17 -0
  23. package/dist-client/pages/kpi-dashboard/cards/kpi-level1-card.js +280 -0
  24. package/dist-client/pages/kpi-dashboard/cards/kpi-level1-card.js.map +1 -0
  25. package/dist-client/pages/kpi-dashboard/cards/kpi-level2-comparison.d.ts +21 -0
  26. package/dist-client/pages/kpi-dashboard/cards/kpi-level2-comparison.js +389 -0
  27. package/dist-client/pages/kpi-dashboard/cards/kpi-level2-comparison.js.map +1 -0
  28. package/dist-client/pages/kpi-dashboard/cards/kpi-level3-comparison.d.ts +25 -0
  29. package/dist-client/pages/kpi-dashboard/cards/kpi-level3-comparison.js +469 -0
  30. package/dist-client/pages/kpi-dashboard/cards/kpi-level3-comparison.js.map +1 -0
  31. package/dist-client/pages/kpi-dashboard/components/kpi-chart-toggle.d.ts +8 -0
  32. package/dist-client/pages/kpi-dashboard/components/kpi-chart-toggle.js +78 -0
  33. package/dist-client/pages/kpi-dashboard/components/kpi-chart-toggle.js.map +1 -0
  34. package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.d.ts +34 -0
  35. package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.js +642 -0
  36. package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.js.map +1 -0
  37. package/dist-client/pages/kpi-dashboard/components/kpi-map-panel.d.ts +38 -0
  38. package/dist-client/pages/kpi-dashboard/components/kpi-map-panel.js +501 -0
  39. package/dist-client/pages/kpi-dashboard/components/kpi-map-panel.js.map +1 -0
  40. package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.d.ts +26 -0
  41. package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.js +439 -0
  42. package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.js.map +1 -0
  43. package/dist-client/pages/kpi-dashboard/kpi-alert-panel.d.ts +18 -0
  44. package/dist-client/pages/kpi-dashboard/kpi-alert-panel.js +131 -0
  45. package/dist-client/pages/kpi-dashboard/kpi-alert-panel.js.map +1 -0
  46. package/dist-client/pages/kpi-dashboard/kpi-dashboard-map.d.ts +36 -0
  47. package/dist-client/pages/kpi-dashboard/kpi-dashboard-map.js +572 -0
  48. package/dist-client/pages/kpi-dashboard/kpi-dashboard-map.js.map +1 -0
  49. package/dist-client/pages/kpi-dashboard/kpi-dashboard.d.ts +59 -0
  50. package/dist-client/pages/kpi-dashboard/kpi-dashboard.js +1027 -0
  51. package/dist-client/pages/kpi-dashboard/kpi-dashboard.js.map +1 -0
  52. package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.d.ts +12 -0
  53. package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.js +82 -0
  54. package/dist-client/pages/kpi-dashboard/kpi-grade-visualization.js.map +1 -0
  55. package/dist-client/pages/kpi-dashboard/kpi-history-viewer.d.ts +11 -0
  56. package/dist-client/pages/kpi-dashboard/kpi-history-viewer.js +65 -0
  57. package/dist-client/pages/kpi-dashboard/kpi-history-viewer.js.map +1 -0
  58. package/dist-client/pages/kpi-dashboard/kpi-list-summary.d.ts +13 -0
  59. package/dist-client/pages/kpi-dashboard/kpi-list-summary.js +115 -0
  60. package/dist-client/pages/kpi-dashboard/kpi-list-summary.js.map +1 -0
  61. package/dist-client/pages/kpi-dashboard/kpi-performance-summary.d.ts +15 -0
  62. package/dist-client/pages/kpi-dashboard/kpi-performance-summary.js +147 -0
  63. package/dist-client/pages/kpi-dashboard/kpi-performance-summary.js.map +1 -0
  64. package/dist-client/pages/kpi-dashboard/kpi-value-entry.d.ts +7 -0
  65. package/dist-client/pages/kpi-dashboard/kpi-value-entry.js +86 -0
  66. package/dist-client/pages/kpi-dashboard/kpi-value-entry.js.map +1 -0
  67. package/dist-client/pages/sv-project-detail.d.ts +6 -0
  68. package/dist-client/pages/sv-project-detail.js +170 -10
  69. package/dist-client/pages/sv-project-detail.js.map +1 -1
  70. package/dist-client/route.d.ts +1 -1
  71. package/dist-client/route.js +3 -0
  72. package/dist-client/route.js.map +1 -1
  73. package/dist-client/tsconfig.tsbuildinfo +1 -1
  74. package/dist-server/service/kpi-metric-value/kpi-metric-value-mutation.d.ts +16 -0
  75. package/dist-server/service/kpi-metric-value/kpi-metric-value-mutation.js +132 -16
  76. package/dist-server/service/kpi-metric-value/kpi-metric-value-mutation.js.map +1 -1
  77. package/dist-server/service/kpi-stat/kpi-stat-query.d.ts +6 -4
  78. package/dist-server/service/kpi-stat/kpi-stat-query.js +232 -22
  79. package/dist-server/service/kpi-stat/kpi-stat-query.js.map +1 -1
  80. package/dist-server/service/kpi-stat/kpi-stat-types.d.ts +6 -0
  81. package/dist-server/service/kpi-stat/kpi-stat-types.js +23 -1
  82. package/dist-server/service/kpi-stat/kpi-stat-types.js.map +1 -1
  83. package/dist-server/tsconfig.tsbuildinfo +1 -1
  84. package/package.json +3 -3
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kpi-lookup-chart.js","sourceRoot":"","sources":["../../client/components/kpi-lookup-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\ninterface Grade {\n name: string\n minValue: number\n maxValue: number\n score?: number // Optional to match KpiScore type\n color?: string\n description?: string // Optional field from KpiScore\n}\n\n@customElement('kpi-lookup-chart')\nexport class KpiLookupChart extends LitElement {\n @property({ type: Array }) grades: Grade[] = []\n @property({ type: Number }) value: number | null = null\n @property({ type: String }) unit: string = ''\n @property({ type: String }) kpiName: string = ''\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n min-height: 200px;\n }\n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n .chart-title {\n font-size: 14px;\n font-weight: 600;\n fill: #333;\n }\n .grade-label {\n font-size: 11px;\n fill: #666;\n }\n .value-label {\n font-size: 12px;\n font-weight: 600;\n fill: #e53935;\n }\n .axis-label {\n font-size: 11px;\n fill: #999;\n }\n `\n\n private chartWidth = 0\n private chartHeight = 0\n private resizeObserver?: ResizeObserver\n\n render() {\n return html`\n <svg\n id=\"lookup-chart\"\n width=${this.chartWidth}\n height=${this.chartHeight}\n viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n preserveAspectRatio=\"xMidYMid meet\"\n ></svg>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.resizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n const rect = entry.contentRect\n this.chartWidth = rect.width\n this.chartHeight = rect.height\n this.requestUpdate()\n }\n })\n this.resizeObserver.observe(this)\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect()\n super.disconnectedCallback()\n }\n\n updated() {\n this.renderChart()\n }\n\n private renderChart() {\n const svg = d3.select(this.renderRoot.querySelector('#lookup-chart'))\n svg.selectAll('*').remove()\n\n // 데이터 검증\n if (!this.grades || this.grades.length === 0) {\n this.drawEmptyState(svg)\n return\n }\n\n const w = this.chartWidth || 400\n const h = this.chartHeight || 200\n const margin = { top: 40, right: 30, bottom: 50, left: 60 }\n const plotW = w - margin.left - margin.right\n const plotH = h - margin.top - margin.bottom\n\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n // 제목\n if (this.kpiName) {\n svg\n .append('text')\n .attr('class', 'chart-title')\n .attr('x', w / 2)\n .attr('y', 15)\n .attr('text-anchor', 'middle')\n .text(this.kpiName)\n }\n\n // KPI Value와 Score를 차트 상단에 표시\n this.drawHeader(svg, w)\n\n // grades를 정렬 (minValue 기준)\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n this.drawChart(g, svg, sortedGrades, plotW, plotH, w)\n }\n\n private drawHeader(svg: any, chartWidth: number) {\n const headerY = 30\n\n // KPI Value 표시\n if (this.value !== null && this.value !== undefined) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .text(`KPI Value: ${this.value.toFixed(2)}${this.unit}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('fill', '#999')\n .text(`KPI Value: N/A`)\n }\n\n // KPI Score 표시\n if (this.value !== null && this.value !== undefined) {\n // grades를 정렬\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n // grades를 범위로 변환\n const gradeRanges = sortedGrades.map((grade, index) => {\n let min: number, max: number\n if (grade.minValue === grade.maxValue) {\n min = index === 0 ? 0 : (sortedGrades[index - 1].maxValue || 0)\n max = grade.maxValue\n } else {\n min = grade.minValue\n max = grade.maxValue\n }\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n // 마지막 grade인지 확인\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n // 해당 value가 속한 grade 찾기\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n const kpiScore = matchedGradeRange?.score\n\n // KPI Score 표시\n if (kpiScore !== undefined && kpiScore !== null) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .text(`KPI Score: ${kpiScore.toFixed(2)}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#ff0000')\n .text(`KPI Score: 범위를 찾을 수 없음`)\n }\n } else {\n // value가 없을 때 KPI Score N/A 표시\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .text(`KPI Score: N/A`)\n }\n }\n\n private drawChart(g: any, svg: any, grades: Grade[], width: number, height: number, chartWidth: number) {\n console.log('drawVerticalChart - Original grades:', grades)\n console.log('drawVerticalChart - Current value:', this.value)\n\n // grades를 범위로 변환 (minValue == maxValue인 경우, 이전 값부터 현재 값까지를 범위로 간주)\n const gradeRanges = grades.map((grade, index) => {\n let min: number, max: number\n\n if (grade.minValue === grade.maxValue) {\n // Point 값인 경우: 이전 grade의 max ~ 현재 grade의 value\n min = index === 0 ? 0 : (grades[index - 1].maxValue || 0)\n max = grade.maxValue\n } else {\n // Range 값인 경우: 그대로 사용\n min = grade.minValue\n max = grade.maxValue\n }\n\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n console.log('drawVerticalChart - Grade ranges:', gradeRanges)\n\n // Y축 스케일 (value 범위)\n // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 \"이상\"으로 표시)\n const allValues = gradeRanges\n .slice(0, -1) // 마지막 제외\n .flatMap(g => [g.actualMin, g.actualMax])\n\n // 마지막 grade의 min도 포함\n if (gradeRanges.length > 0) {\n allValues.push(gradeRanges[gradeRanges.length - 1].actualMin)\n }\n\n const minVal = allValues.length > 0 ? Math.min(...allValues, 0) : 0\n const maxVal = allValues.length > 0 ? Math.max(...allValues) : 100\n\n console.log('drawVerticalChart - Scaled min/max:', minVal, maxVal)\n\n // 현재 value가 있으면 범위에 포함\n let displayMax = maxVal\n if (this.value !== null && this.value !== undefined) {\n displayMax = Math.max(maxVal, this.value)\n }\n\n const yScale = d3.scaleLinear().domain([minVal, displayMax]).range([height, 0]).nice()\n\n // X축 스케일 (score 범위)\n const barWidth = width / grades.length\n const isManyGrades = grades.length > 10 // 10개 이상이면 \"많은 경우\"로 간주\n\n // 각 grade별로 영역과 라인 그리기\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n gradeRanges.forEach((grade, index) => {\n // 마지막 grade는 \"infinity\"로 간주하고 차트 상단까지 표시\n const minValue = grade.actualMin\n const maxValue = grade.actualMax\n const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue\n const yMin = yScale(minValue)\n const yMax = yScale(effectiveMaxValue)\n const xCenter = index * barWidth + barWidth / 2\n\n // 배경 영역 (매우 연한 색상)\n g.append('rect')\n .attr('x', index * barWidth)\n .attr('y', yMax)\n .attr('width', barWidth)\n .attr('height', yMin - yMax)\n .attr('fill', grade.color || this.getDefaultColor(index))\n .attr('opacity', 0.1)\n\n // 수평선으로 grade 경계 표시\n // 하한선\n g.append('line')\n .attr('x1', index * barWidth)\n .attr('x2', (index + 1) * barWidth)\n .attr('y1', yMin)\n .attr('y2', yMin)\n .attr('stroke', grade.color || this.getDefaultColor(index))\n .attr('stroke-width', 2)\n\n // 상한선 (마지막 grade가 아닌 경우)\n if (!isLastGrade(index)) {\n g.append('line')\n .attr('x1', index * barWidth)\n .attr('x2', (index + 1) * barWidth)\n .attr('y1', yMax)\n .attr('y2', yMax)\n .attr('stroke', grade.color || this.getDefaultColor(index))\n .attr('stroke-width', 2)\n .attr('stroke-dasharray', '3,3')\n }\n\n // Grade가 많은 경우: 라벨을 표시하지 않음\n if (!isManyGrades) {\n // Grade 라벨\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', xCenter)\n .attr('y', (yMin + yMax) / 2 + 4)\n .attr('text-anchor', 'middle')\n .text(grade.name)\n\n // Score 라벨 (score가 있을 경우만 표시)\n if (grade.score !== undefined && grade.score !== null) {\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', xCenter)\n .attr('y', height + 20)\n .attr('text-anchor', 'middle')\n .text(`Score: ${grade.score.toFixed(2)}`)\n }\n\n // Value range 라벨 (마지막 grade인 경우 \"이상\" 표시)\n const rangeText = isLastGrade(index)\n ? `${minValue.toFixed(1)}${this.unit} 이상`\n : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`\n\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', xCenter)\n .attr('y', height + 35)\n .attr('text-anchor', 'middle')\n .text(rangeText)\n }\n })\n\n // Y축 그리기\n const yAxis = d3.axisLeft(yScale).ticks(5)\n g.append('g').call(yAxis)\n\n // Y축 라벨 (KPI Value)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('transform', 'rotate(-90)')\n .attr('x', -height / 2)\n .attr('y', -45)\n .attr('text-anchor', 'middle')\n .text('KPI Value')\n\n // X축 라인 그리기\n g.append('line')\n .attr('x1', 0)\n .attr('x2', width)\n .attr('y1', height)\n .attr('y2', height)\n .attr('stroke', '#999')\n .attr('stroke-width', 1)\n\n // X축 그리기 (Grade가 많은 경우 적절히 스킵)\n if (isManyGrades) {\n // Grade가 많은 경우: 적절한 간격으로 라벨 표시\n const tickInterval = Math.ceil(grades.length / 10) // 최대 10개 정도만 표시\n\n gradeRanges.forEach((grade, index) => {\n if (index % tickInterval === 0 || index === gradeRanges.length - 1) {\n const tickX = index * barWidth + barWidth / 2\n let label = ''\n\n if (grade.score !== undefined && grade.score !== null) {\n label = `${grade.score.toFixed(1)}`\n } else {\n // score가 없으면 범위 표시\n const gradeIdx = gradeRanges.indexOf(grade)\n label = isLastGrade(gradeIdx) ? `${grade.actualMin.toFixed(0)} 이상` : `${grade.actualMax.toFixed(0)}`\n }\n\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', tickX)\n .attr('y', height + 20)\n .attr('text-anchor', 'middle')\n .text(label)\n }\n })\n }\n\n // X축 라벨 (KPI Score)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', width / 2)\n .attr('y', height + 50)\n .attr('text-anchor', 'middle')\n .attr('font-weight', 'bold')\n .text('KPI Score')\n\n // 현재 value가 있을 때만 차트에 포인터 표시\n if (this.value !== null && this.value !== undefined) {\n // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)\n // 마지막 grade는 \"이상\"이므로 actualMin 이상만 체크\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n // 범위를 찾은 경우에만 차트에 포인터 표시\n if (matchedGradeRange) {\n const valueY = yScale(this.value)\n const gradeIndex = gradeRanges.indexOf(matchedGradeRange)\n const valueX = gradeIndex * barWidth + barWidth / 2\n\n console.log('Current value:', this.value, 'valueY:', valueY)\n console.log('Grade index:', gradeIndex, 'valueX:', valueX)\n\n // 현재 값 포인터\n g.append('circle')\n .attr('cx', valueX)\n .attr('cy', valueY)\n .attr('r', 6)\n .attr('fill', '#e53935')\n .attr('stroke', '#fff')\n .attr('stroke-width', 2)\n\n // Grade가 많은 경우: 현재 값의 grade 정보도 표시\n if (isManyGrades) {\n const matchedGradeIdx = gradeRanges.indexOf(matchedGradeRange)\n const rangeText = isLastGrade(matchedGradeIdx)\n ? `${matchedGradeRange.actualMin.toFixed(1)}${this.unit} 이상`\n : `${matchedGradeRange.actualMin.toFixed(1)}-${matchedGradeRange.actualMax.toFixed(1)}${this.unit}`\n\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', valueX)\n .attr('y', height + 35)\n .attr('text-anchor', 'middle')\n .attr('fill', '#e53935')\n .text(rangeText)\n }\n }\n }\n }\n\n private drawEmptyState(svg: any) {\n svg\n .append('text')\n .attr('x', this.chartWidth / 2)\n .attr('y', this.chartHeight / 2)\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .attr('font-size', '14px')\n .text('No grade data available')\n }\n\n private getDefaultColor(index: number): string {\n const colors = ['#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722']\n return colors[index % colors.length]\n }\n}\n"]}
@@ -0,0 +1,14 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class SvKpiMiniTrendChart extends LitElement {
3
+ data: number[];
4
+ width: number;
5
+ height: number;
6
+ lineColor: string;
7
+ strokeWidth: number;
8
+ showPoints: boolean;
9
+ pointRadius: number;
10
+ static styles: import("lit").CSSResult;
11
+ render(): import("lit-html").TemplateResult<1>;
12
+ updated(): void;
13
+ drawMiniTrend(): void;
14
+ }
@@ -0,0 +1,148 @@
1
+ import { __decorate, __metadata } from "tslib";
2
+ import { LitElement, html, css } from 'lit';
3
+ import { customElement, property } from 'lit/decorators.js';
4
+ import * as d3 from 'd3';
5
+ let SvKpiMiniTrendChart = class SvKpiMiniTrendChart extends LitElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.data = [];
9
+ this.width = 60;
10
+ this.height = 30;
11
+ this.lineColor = '#2196f3';
12
+ this.strokeWidth = 1.5;
13
+ this.showPoints = true;
14
+ this.pointRadius = 1.5;
15
+ }
16
+ render() {
17
+ return html `
18
+ <div class="mini-chart">
19
+ <svg
20
+ id="mini-trend"
21
+ width=${this.width}
22
+ height=${this.height}
23
+ viewBox="0 0 ${this.width} ${this.height}"
24
+ preserveAspectRatio="xMidYMid meet"
25
+ ></svg>
26
+ </div>
27
+ `;
28
+ }
29
+ updated() {
30
+ this.drawMiniTrend();
31
+ }
32
+ drawMiniTrend() {
33
+ if (!this.data || this.data.length === 0)
34
+ return;
35
+ const svg = d3.select(this.renderRoot.querySelector('#mini-trend'));
36
+ svg.selectAll('*').remove();
37
+ const margin = { top: 2, right: 2, bottom: 2, left: 2 };
38
+ const width = this.width - margin.left - margin.right;
39
+ const height = this.height - margin.top - margin.bottom;
40
+ // 스케일 설정
41
+ const xScale = d3
42
+ .scaleLinear()
43
+ .domain([0, this.data.length - 1])
44
+ .range([0, width]);
45
+ const yScale = d3
46
+ .scaleLinear()
47
+ .domain([0, d3.max(this.data) || 100])
48
+ .range([height, 0]);
49
+ // SVG 설정
50
+ svg.attr('width', this.width).attr('height', this.height);
51
+ const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
52
+ // 라인 생성기
53
+ const line = d3
54
+ .line()
55
+ .x((d, i) => xScale(i))
56
+ .y(d => yScale(d))
57
+ .curve(d3.curveMonotoneX);
58
+ // 트렌드 라인 그리기
59
+ g.append('path')
60
+ .datum(this.data)
61
+ .attr('class', 'trend-line')
62
+ .attr('d', line)
63
+ .attr('stroke', this.lineColor)
64
+ .attr('stroke-width', this.strokeWidth);
65
+ // 데이터 포인트 그리기 (첫 번째와 마지막 포인트만)
66
+ if (this.showPoints && this.data.length > 0) {
67
+ // 첫 번째 포인트
68
+ g.append('circle')
69
+ .attr('class', 'data-point')
70
+ .attr('cx', xScale(0))
71
+ .attr('cy', yScale(this.data[0]))
72
+ .attr('r', this.pointRadius)
73
+ .attr('stroke', '#4caf50')
74
+ .attr('fill', 'white');
75
+ // 마지막 포인트
76
+ if (this.data.length > 1) {
77
+ g.append('circle')
78
+ .attr('class', 'data-point')
79
+ .attr('cx', xScale(this.data.length - 1))
80
+ .attr('cy', yScale(this.data[this.data.length - 1]))
81
+ .attr('r', this.pointRadius)
82
+ .attr('stroke', '#2196f3')
83
+ .attr('fill', 'white');
84
+ }
85
+ }
86
+ }
87
+ };
88
+ SvKpiMiniTrendChart.styles = css `
89
+ :host {
90
+ display: block;
91
+ width: 100%;
92
+ height: 100%;
93
+ }
94
+
95
+ .mini-chart {
96
+ width: 100%;
97
+ height: 100%;
98
+ background: #f8f9fa;
99
+ border-radius: 4px;
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ }
104
+
105
+ .trend-line {
106
+ fill: none;
107
+ stroke-linecap: round;
108
+ stroke-linejoin: round;
109
+ }
110
+
111
+ .data-point {
112
+ fill: white;
113
+ stroke-width: 1;
114
+ }
115
+ `;
116
+ __decorate([
117
+ property({ type: Array }),
118
+ __metadata("design:type", Array)
119
+ ], SvKpiMiniTrendChart.prototype, "data", void 0);
120
+ __decorate([
121
+ property({ type: Number }),
122
+ __metadata("design:type", Number)
123
+ ], SvKpiMiniTrendChart.prototype, "width", void 0);
124
+ __decorate([
125
+ property({ type: Number }),
126
+ __metadata("design:type", Number)
127
+ ], SvKpiMiniTrendChart.prototype, "height", void 0);
128
+ __decorate([
129
+ property({ type: String }),
130
+ __metadata("design:type", String)
131
+ ], SvKpiMiniTrendChart.prototype, "lineColor", void 0);
132
+ __decorate([
133
+ property({ type: Number }),
134
+ __metadata("design:type", Number)
135
+ ], SvKpiMiniTrendChart.prototype, "strokeWidth", void 0);
136
+ __decorate([
137
+ property({ type: Boolean }),
138
+ __metadata("design:type", Boolean)
139
+ ], SvKpiMiniTrendChart.prototype, "showPoints", void 0);
140
+ __decorate([
141
+ property({ type: Number }),
142
+ __metadata("design:type", Number)
143
+ ], SvKpiMiniTrendChart.prototype, "pointRadius", void 0);
144
+ SvKpiMiniTrendChart = __decorate([
145
+ customElement('sv-kpi-mini-trend-chart')
146
+ ], SvKpiMiniTrendChart);
147
+ export { SvKpiMiniTrendChart };
148
+ //# sourceMappingURL=kpi-mini-trend-chart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kpi-mini-trend-chart.js","sourceRoot":"","sources":["../../client/components/kpi-mini-trend-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-mini-trend-chart')\nexport class SvKpiMiniTrendChart extends LitElement {\n @property({ type: Array }) data: number[] = []\n @property({ type: Number }) width: number = 60\n @property({ type: Number }) height: number = 30\n @property({ type: String }) lineColor: string = '#2196f3'\n @property({ type: Number }) strokeWidth: number = 1.5\n @property({ type: Boolean }) showPoints: boolean = true\n @property({ type: Number }) pointRadius: number = 1.5\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .mini-chart {\n width: 100%;\n height: 100%;\n background: #f8f9fa;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .trend-line {\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n .data-point {\n fill: white;\n stroke-width: 1;\n }\n `\n\n render() {\n return html`\n <div class=\"mini-chart\">\n <svg\n id=\"mini-trend\"\n width=${this.width}\n height=${this.height}\n viewBox=\"0 0 ${this.width} ${this.height}\"\n preserveAspectRatio=\"xMidYMid meet\"\n ></svg>\n </div>\n `\n }\n\n updated() {\n this.drawMiniTrend()\n }\n\n drawMiniTrend() {\n if (!this.data || this.data.length === 0) return\n\n const svg = d3.select(this.renderRoot.querySelector('#mini-trend'))\n svg.selectAll('*').remove()\n\n const margin = { top: 2, right: 2, bottom: 2, left: 2 }\n const width = this.width - margin.left - margin.right\n const height = this.height - margin.top - margin.bottom\n\n // 스케일 설정\n const xScale = d3\n .scaleLinear()\n .domain([0, this.data.length - 1])\n .range([0, width])\n\n const yScale = d3\n .scaleLinear()\n .domain([0, d3.max(this.data) || 100])\n .range([height, 0])\n\n // SVG 설정\n svg.attr('width', this.width).attr('height', this.height)\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n // 라인 생성기\n const line = d3\n .line<number>()\n .x((d, i) => xScale(i))\n .y(d => yScale(d))\n .curve(d3.curveMonotoneX)\n\n // 트렌드 라인 그리기\n g.append('path')\n .datum(this.data)\n .attr('class', 'trend-line')\n .attr('d', line as any)\n .attr('stroke', this.lineColor)\n .attr('stroke-width', this.strokeWidth)\n\n // 데이터 포인트 그리기 (첫 번째와 마지막 포인트만)\n if (this.showPoints && this.data.length > 0) {\n // 첫 번째 포인트\n g.append('circle')\n .attr('class', 'data-point')\n .attr('cx', xScale(0))\n .attr('cy', yScale(this.data[0]))\n .attr('r', this.pointRadius)\n .attr('stroke', '#4caf50')\n .attr('fill', 'white')\n\n // 마지막 포인트\n if (this.data.length > 1) {\n g.append('circle')\n .attr('class', 'data-point')\n .attr('cx', xScale(this.data.length - 1))\n .attr('cy', yScale(this.data[this.data.length - 1]))\n .attr('r', this.pointRadius)\n .attr('stroke', '#2196f3')\n .attr('fill', 'white')\n }\n }\n }\n}\n"]}
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- export declare class KpiRadarChart extends LitElement {
2
+ export declare class SvKpiRadarChart extends LitElement {
3
3
  data: any[];
4
4
  categories: string[];
5
5
  valueKey: string;
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
2
2
  import { LitElement, html, css } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
4
  import * as d3 from 'd3';
5
- let KpiRadarChart = class KpiRadarChart extends LitElement {
5
+ let SvKpiRadarChart = class SvKpiRadarChart extends LitElement {
6
6
  constructor() {
7
7
  super(...arguments);
8
8
  this.data = [];
@@ -50,12 +50,6 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
50
50
  svg.selectAll('*').remove();
51
51
  const w = this.chartWidth || 300;
52
52
  const h = this.chartHeight || 300;
53
- // 레전드를 위한 공간 확보 (오른쪽에 120px)
54
- const legendWidth = 120;
55
- const chartWidth = w - legendWidth;
56
- const chartHeight = h;
57
- const r = Math.min(chartWidth, chartHeight) / 2 - 40;
58
- const angleSlice = (2 * Math.PI) / (this.categories.length || 1);
59
53
  // 데이터 변환: { org, values: [ {category, value} ... ] }
60
54
  const orgData = d3
61
55
  .groups(this.data, d => d.org)
@@ -66,18 +60,36 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
66
60
  return { category: cat, value: found ? found[this.valueKey] : 0 };
67
61
  })
68
62
  }));
69
- // 스케일
70
- const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1;
63
+ // 레전드를 위한 공간 확보 (org가 2개 이상일 때만)
64
+ const legendWidth = orgData.length > 1 ? 120 : 0;
65
+ const chartWidth = w - legendWidth;
66
+ const chartHeight = h;
67
+ const r = Math.min(chartWidth, chartHeight) / 2 - 40;
68
+ const angleSlice = (2 * Math.PI) / (this.categories.length || 1);
69
+ // 스케일 - 0-100 고정 범위 사용 (박스플롯과 동일한 범위)
70
+ const dataMaxValue = d3.max(this.data, d => d[this.valueKey]) || 1;
71
+ const maxValue = Math.max(100, dataMaxValue); // 최소 100까지 표시
71
72
  const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r]);
72
73
  // SVG 기본
73
74
  svg.attr('width', w).attr('height', h);
74
75
  const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`);
75
76
  // 그리드/축
76
77
  for (let i = 1; i <= 5; i++) {
77
- g.append('circle')
78
- .attr('r', (r / 5) * i)
79
- .attr('fill', 'none')
80
- .attr('stroke', '#ccc');
78
+ const gridRadius = (r / 5) * i;
79
+ const gridValue = (maxValue / 5) * i;
80
+ g.append('circle').attr('r', gridRadius).attr('fill', 'none').attr('stroke', '#ccc');
81
+ // 그리드 값 라벨 (30도 시계방향 = Y1에서 30도 회전)
82
+ // 차트가 위쪽에서 시작하므로 -90도 + 30도 = -60도
83
+ const labelAngle = (-60 * Math.PI) / 180;
84
+ g.append('text')
85
+ .attr('x', gridRadius * Math.cos(labelAngle))
86
+ .attr('y', gridRadius * Math.sin(labelAngle))
87
+ .attr('text-anchor', 'middle')
88
+ .attr('alignment-baseline', 'middle')
89
+ .attr('font-size', 10)
90
+ .attr('fill', '#999')
91
+ .attr('background', '#fff')
92
+ .text(gridValue.toFixed(0));
81
93
  }
82
94
  this.categories.forEach((cat, i) => {
83
95
  const angle = i * angleSlice - Math.PI / 2;
@@ -144,41 +156,47 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
144
156
  .attr('stroke-width', 1);
145
157
  });
146
158
  });
147
- // 레전드 추가
148
- const legend = svg.append('g')
149
- .attr('class', 'legend')
150
- .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`);
151
- const legendData = [
152
- { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },
153
- { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }
154
- ];
155
- const legendItems = legend.selectAll('.legend-item')
156
- .data(legendData)
157
- .enter()
158
- .append('g')
159
- .attr('class', 'legend-item')
160
- .attr('transform', (d, i) => `translate(0, ${i * 25})`);
161
- // 레전드 아이콘 (작은 사각형)
162
- legendItems.append('rect')
163
- .attr('x', 0)
164
- .attr('y', 0)
165
- .attr('width', 12)
166
- .attr('height', 12)
167
- .attr('fill', d => d.color)
168
- .attr('opacity', 0.6)
169
- .attr('stroke', d => d.color)
170
- .attr('stroke-width', 1.5);
171
- // 레전드 텍스트
172
- legendItems.append('text')
173
- .attr('x', 18)
174
- .attr('y', 9)
175
- .attr('font-size', '12px')
176
- .attr('fill', '#333')
177
- .attr('alignment-baseline', 'middle')
178
- .text(d => d.label);
159
+ // 레전드 추가 (org가 2개 이상일 때만)
160
+ if (orgData.length > 1) {
161
+ const legend = svg
162
+ .append('g')
163
+ .attr('class', 'legend')
164
+ .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`);
165
+ const legendData = [
166
+ { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },
167
+ { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }
168
+ ];
169
+ const legendItems = legend
170
+ .selectAll('.legend-item')
171
+ .data(legendData)
172
+ .enter()
173
+ .append('g')
174
+ .attr('class', 'legend-item')
175
+ .attr('transform', (d, i) => `translate(0, ${i * 25})`);
176
+ // 레전드 아이콘 (작은 사각형)
177
+ legendItems
178
+ .append('rect')
179
+ .attr('x', 0)
180
+ .attr('y', 0)
181
+ .attr('width', 12)
182
+ .attr('height', 12)
183
+ .attr('fill', d => d.color)
184
+ .attr('opacity', 0.6)
185
+ .attr('stroke', d => d.color)
186
+ .attr('stroke-width', 1.5);
187
+ // 레전드 텍스트
188
+ legendItems
189
+ .append('text')
190
+ .attr('x', 18)
191
+ .attr('y', 9)
192
+ .attr('font-size', '12px')
193
+ .attr('fill', '#333')
194
+ .attr('alignment-baseline', 'middle')
195
+ .text(d => d.label);
196
+ }
179
197
  }
180
198
  };
181
- KpiRadarChart.styles = css `
199
+ SvKpiRadarChart.styles = css `
182
200
  :host {
183
201
  display: block;
184
202
  width: 100%;
@@ -193,25 +211,25 @@ KpiRadarChart.styles = css `
193
211
  __decorate([
194
212
  property({ type: Array }),
195
213
  __metadata("design:type", Array)
196
- ], KpiRadarChart.prototype, "data", void 0);
214
+ ], SvKpiRadarChart.prototype, "data", void 0);
197
215
  __decorate([
198
216
  property({ type: Array }),
199
217
  __metadata("design:type", Array)
200
- ], KpiRadarChart.prototype, "categories", void 0);
218
+ ], SvKpiRadarChart.prototype, "categories", void 0);
201
219
  __decorate([
202
220
  property({ type: String }),
203
221
  __metadata("design:type", String)
204
- ], KpiRadarChart.prototype, "valueKey", void 0);
222
+ ], SvKpiRadarChart.prototype, "valueKey", void 0);
205
223
  __decorate([
206
224
  property({ type: String }),
207
225
  __metadata("design:type", String)
208
- ], KpiRadarChart.prototype, "currentGroup", void 0);
226
+ ], SvKpiRadarChart.prototype, "currentGroup", void 0);
209
227
  __decorate([
210
228
  property({ type: Object }),
211
229
  __metadata("design:type", Object)
212
- ], KpiRadarChart.prototype, "seriesColors", void 0);
213
- KpiRadarChart = __decorate([
214
- customElement('kpi-radar-chart')
215
- ], KpiRadarChart);
216
- export { KpiRadarChart };
230
+ ], SvKpiRadarChart.prototype, "seriesColors", void 0);
231
+ SvKpiRadarChart = __decorate([
232
+ customElement('sv-kpi-radar-chart')
233
+ ], SvKpiRadarChart);
234
+ export { SvKpiRadarChart };
217
235
  //# sourceMappingURL=kpi-radar-chart.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/components/kpi-radar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('kpi-radar-chart')\nexport class KpiRadarChart extends LitElement {\n @property({ type: Array }) data: any[] = []\n @property({ type: Array }) categories: string[] = []\n @property({ type: String }) valueKey: string = 'value'\n @property({ type: String }) currentGroup: string = ''\n @property({ type: Object }) seriesColors: Record<string, string> = {\n 기준평균: '#E3F2FD',\n 프로젝트성과: '#2196F3'\n }\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n `\n\n private chartWidth = 0\n private chartHeight = 0\n private resizeObserver?: ResizeObserver\n\n render() {\n return html`<svg\n id=\"radar\"\n width=${this.chartWidth}\n height=${this.chartHeight}\n viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n preserveAspectRatio=\"xMidYMid meet\"\n ></svg>`\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.resizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n const rect = entry.contentRect\n this.chartWidth = rect.width\n this.chartHeight = rect.height\n this.requestUpdate()\n }\n })\n this.resizeObserver.observe(this)\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect()\n super.disconnectedCallback()\n }\n\n updated() {\n this.drawRadar()\n }\n\n drawRadar() {\n const svg = d3.select(this.renderRoot.querySelector('#radar'))\n svg.selectAll('*').remove()\n const w = this.chartWidth || 300\n const h = this.chartHeight || 300\n\n // 레전드를 위한 공간 확보 (오른쪽에 120px)\n const legendWidth = 120\n const chartWidth = w - legendWidth\n const chartHeight = h\n const r = Math.min(chartWidth, chartHeight) / 2 - 40\n const angleSlice = (2 * Math.PI) / (this.categories.length || 1)\n\n // 데이터 변환: { org, values: [ {category, value} ... ] }\n const orgData = d3\n .groups(this.data, d => d.org)\n .map(([org, values]) => ({\n org,\n values: this.categories.map((cat, i) => {\n const found = values.find(v => v.category === cat)\n return { category: cat, value: found ? found[this.valueKey] : 0 }\n })\n }))\n\n // 스케일\n const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1\n const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])\n\n // SVG 기본\n svg.attr('width', w).attr('height', h)\n const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`)\n\n // 그리드/축\n for (let i = 1; i <= 5; i++) {\n g.append('circle')\n .attr('r', (r / 5) * i)\n .attr('fill', 'none')\n .attr('stroke', '#ccc')\n }\n this.categories.forEach((cat, i) => {\n const angle = i * angleSlice - Math.PI / 2\n g.append('line')\n .attr('x1', 0)\n .attr('y1', 0)\n .attr('x2', radius(maxValue) * Math.cos(angle))\n .attr('y2', radius(maxValue) * Math.sin(angle))\n .attr('stroke', '#ccc')\n g.append('text')\n .attr('x', (radius(maxValue) + 10) * Math.cos(angle))\n .attr('y', (radius(maxValue) + 10) * Math.sin(angle))\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'middle')\n .attr('font-size', 12)\n .attr('fill', '#333')\n .text(cat)\n })\n\n // 그룹별 폴리곤 - 기준평균을 먼저 그리고 프로젝트성과를 위에 그리기\n const sortedOrgData = orgData.sort((a, b) => {\n if (a.org === '기준평균') return -1\n if (b.org === '기준평균') return 1\n return 0\n })\n\n sortedOrgData.forEach(gd => {\n // 마지막에 첫 점을 한 번 더 추가\n const closedValues = [...gd.values, gd.values[0]]\n const line = d3\n .lineRadial()\n .radius((d: any) => radius(d.value))\n .angle((d, i) => i * angleSlice)\n\n // 색상 및 스타일 결정\n const baseColor = this.seriesColors[gd.org] || '#ccc'\n const fillColor =\n gd.org === '기준평균'\n ? 'rgba(76,175,80,0.4)' // 진한 녹색 배경\n : 'rgba(33,150,243,0.4)' // 진한 파란색 배경\n const strokeColor =\n gd.org === '기준평균'\n ? '#4CAF50' // 진한 녹색 선\n : '#2196F3' // 진한 파란색 선\n const strokeWidth = gd.org === '프로젝트성과' ? 1.5 : 1.5\n\n g.append('path')\n .datum(closedValues)\n .attr('d', line as any)\n .attr('fill', fillColor)\n .attr('stroke', strokeColor)\n .attr('stroke-width', strokeWidth)\n .attr('stroke-dasharray', 'none') // 모두 직선으로 변경\n })\n\n // 데이터 포인트 표시\n sortedOrgData.forEach(gd => {\n gd.values.forEach((d, i) => {\n const angle = i * angleSlice - Math.PI / 2\n const pointRadius = radius(d.value)\n const x = pointRadius * Math.cos(angle)\n const y = pointRadius * Math.sin(angle)\n\n g.append('circle')\n .attr('cx', x)\n .attr('cy', y)\n .attr('r', 3)\n .attr('fill', gd.org === '기준평균' ? '#4CAF50' : '#2196F3')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n })\n })\n\n // 레전드 추가\n const legend = svg.append('g')\n .attr('class', 'legend')\n .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`)\n\n const legendData = [\n { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },\n { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }\n ]\n\n const legendItems = legend.selectAll('.legend-item')\n .data(legendData)\n .enter()\n .append('g')\n .attr('class', 'legend-item')\n .attr('transform', (d, i) => `translate(0, ${i * 25})`)\n\n // 레전드 아이콘 (작은 사각형)\n legendItems.append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', d => d.color)\n .attr('opacity', 0.6)\n .attr('stroke', d => d.color)\n .attr('stroke-width', 1.5)\n\n // 레전드 텍스트\n legendItems.append('text')\n .attr('x', 18)\n .attr('y', 9)\n .attr('font-size', '12px')\n .attr('fill', '#333')\n .attr('alignment-baseline', 'middle')\n .text(d => d.label)\n }\n}\n"]}
1
+ {"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/components/kpi-radar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-radar-chart')\nexport class SvKpiRadarChart extends LitElement {\n @property({ type: Array }) data: any[] = []\n @property({ type: Array }) categories: string[] = []\n @property({ type: String }) valueKey: string = 'value'\n @property({ type: String }) currentGroup: string = ''\n @property({ type: Object }) seriesColors: Record<string, string> = {\n 기준평균: '#E3F2FD',\n 프로젝트성과: '#2196F3'\n }\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n `\n\n private chartWidth = 0\n private chartHeight = 0\n private resizeObserver?: ResizeObserver\n\n render() {\n return html`<svg\n id=\"radar\"\n width=${this.chartWidth}\n height=${this.chartHeight}\n viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n preserveAspectRatio=\"xMidYMid meet\"\n ></svg>`\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.resizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n const rect = entry.contentRect\n this.chartWidth = rect.width\n this.chartHeight = rect.height\n this.requestUpdate()\n }\n })\n this.resizeObserver.observe(this)\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect()\n super.disconnectedCallback()\n }\n\n updated() {\n this.drawRadar()\n }\n\n drawRadar() {\n const svg = d3.select(this.renderRoot.querySelector('#radar'))\n svg.selectAll('*').remove()\n const w = this.chartWidth || 300\n const h = this.chartHeight || 300\n\n // 데이터 변환: { org, values: [ {category, value} ... ] }\n const orgData = d3\n .groups(this.data, d => d.org)\n .map(([org, values]) => ({\n org,\n values: this.categories.map((cat, i) => {\n const found = values.find(v => v.category === cat)\n return { category: cat, value: found ? found[this.valueKey] : 0 }\n })\n }))\n\n // 레전드를 위한 공간 확보 (org가 2개 이상일 때만)\n const legendWidth = orgData.length > 1 ? 120 : 0\n const chartWidth = w - legendWidth\n const chartHeight = h\n const r = Math.min(chartWidth, chartHeight) / 2 - 40\n const angleSlice = (2 * Math.PI) / (this.categories.length || 1)\n\n // 스케일 - 0-100 고정 범위 사용 (박스플롯과 동일한 범위)\n const dataMaxValue = d3.max(this.data, d => d[this.valueKey]) || 1\n const maxValue = Math.max(100, dataMaxValue) // 최소 100까지 표시\n const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])\n\n // SVG 기본\n svg.attr('width', w).attr('height', h)\n const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`)\n\n // 그리드/축\n for (let i = 1; i <= 5; i++) {\n const gridRadius = (r / 5) * i\n const gridValue = (maxValue / 5) * i\n\n g.append('circle').attr('r', gridRadius).attr('fill', 'none').attr('stroke', '#ccc')\n\n // 그리드 값 라벨 (30도 시계방향 = Y1에서 30도 회전)\n // 차트가 위쪽에서 시작하므로 -90도 + 30도 = -60도\n const labelAngle = (-60 * Math.PI) / 180\n g.append('text')\n .attr('x', gridRadius * Math.cos(labelAngle))\n .attr('y', gridRadius * Math.sin(labelAngle))\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'middle')\n .attr('font-size', 10)\n .attr('fill', '#999')\n .attr('background', '#fff')\n .text(gridValue.toFixed(0))\n }\n this.categories.forEach((cat, i) => {\n const angle = i * angleSlice - Math.PI / 2\n g.append('line')\n .attr('x1', 0)\n .attr('y1', 0)\n .attr('x2', radius(maxValue) * Math.cos(angle))\n .attr('y2', radius(maxValue) * Math.sin(angle))\n .attr('stroke', '#ccc')\n g.append('text')\n .attr('x', (radius(maxValue) + 10) * Math.cos(angle))\n .attr('y', (radius(maxValue) + 10) * Math.sin(angle))\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'middle')\n .attr('font-size', 12)\n .attr('fill', '#333')\n .text(cat)\n })\n\n // 그룹별 폴리곤 - 기준평균을 먼저 그리고 프로젝트성과를 위에 그리기\n const sortedOrgData = orgData.sort((a, b) => {\n if (a.org === '기준평균') return -1\n if (b.org === '기준평균') return 1\n return 0\n })\n\n sortedOrgData.forEach(gd => {\n // 마지막에 첫 점을 한 번 더 추가\n const closedValues = [...gd.values, gd.values[0]]\n const line = d3\n .lineRadial()\n .radius((d: any) => radius(d.value))\n .angle((d, i) => i * angleSlice)\n\n // 색상 및 스타일 결정\n const baseColor = this.seriesColors[gd.org] || '#ccc'\n const fillColor =\n gd.org === '기준평균'\n ? 'rgba(76,175,80,0.4)' // 진한 녹색 배경\n : 'rgba(33,150,243,0.4)' // 진한 파란색 배경\n const strokeColor =\n gd.org === '기준평균'\n ? '#4CAF50' // 진한 녹색 선\n : '#2196F3' // 진한 파란색 선\n const strokeWidth = gd.org === '프로젝트성과' ? 1.5 : 1.5\n\n g.append('path')\n .datum(closedValues)\n .attr('d', line as any)\n .attr('fill', fillColor)\n .attr('stroke', strokeColor)\n .attr('stroke-width', strokeWidth)\n .attr('stroke-dasharray', 'none') // 모두 직선으로 변경\n })\n\n // 데이터 포인트 표시\n sortedOrgData.forEach(gd => {\n gd.values.forEach((d, i) => {\n const angle = i * angleSlice - Math.PI / 2\n const pointRadius = radius(d.value)\n const x = pointRadius * Math.cos(angle)\n const y = pointRadius * Math.sin(angle)\n\n g.append('circle')\n .attr('cx', x)\n .attr('cy', y)\n .attr('r', 3)\n .attr('fill', gd.org === '기준평균' ? '#4CAF50' : '#2196F3')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n })\n })\n\n // 레전드 추가 (org가 2개 이상일 때만)\n if (orgData.length > 1) {\n const legend = svg\n .append('g')\n .attr('class', 'legend')\n .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`)\n\n const legendData = [\n { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },\n { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }\n ]\n\n const legendItems = legend\n .selectAll('.legend-item')\n .data(legendData)\n .enter()\n .append('g')\n .attr('class', 'legend-item')\n .attr('transform', (d, i) => `translate(0, ${i * 25})`)\n\n // 레전드 아이콘 (작은 사각형)\n legendItems\n .append('rect')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', d => d.color)\n .attr('opacity', 0.6)\n .attr('stroke', d => d.color)\n .attr('stroke-width', 1.5)\n\n // 레전드 텍스트\n legendItems\n .append('text')\n .attr('x', 18)\n .attr('y', 9)\n .attr('font-size', '12px')\n .attr('fill', '#333')\n .attr('alignment-baseline', 'middle')\n .text(d => d.label)\n }\n }\n}\n"]}
@@ -0,0 +1,25 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class SvKpiTrendChart extends LitElement {
3
+ data: {
4
+ date: string;
5
+ value: number;
6
+ color?: string;
7
+ }[];
8
+ valueKey: string;
9
+ dateKey: string;
10
+ width: number;
11
+ height: number;
12
+ lineColor: string;
13
+ strokeWidth: number;
14
+ showPoints: boolean;
15
+ pointRadius: number;
16
+ private chartWidth;
17
+ private chartHeight;
18
+ private resizeObserver?;
19
+ static styles: import("lit").CSSResult;
20
+ render(): import("lit-html").TemplateResult<1>;
21
+ connectedCallback(): void;
22
+ disconnectedCallback(): void;
23
+ updated(): void;
24
+ drawTrendChart(): void;
25
+ }