npm - @dssp/dkpi - Versions diffs - 1.0.0-alpha.54 → 1.0.0-alpha.56 - Mend

@dssp/dkpi 1.0.0-alpha.54 → 1.0.0-alpha.56

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 (29) hide show

package/assets/images/project-image.png ADDED Viewed

Binary file

package/dist-client/components/kpi-boxplot-chart.js CHANGED Viewed

@@ -50,7 +50,7 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
         this.drawBoxplot();
     }
     drawBoxplot() {
-        var _a, _b, _c, _d, _e;
+        var _a;
         const svg = d3.select(this.renderRoot.querySelector('#boxplot'));
         svg.selectAll('*').remove();
         // 데이터 검증
@@ -81,58 +81,35 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
         // y축 스케일 설정
         let y;
         if (this.independentScale) {
-            // 독립 스케일: 각 시리즈별로 개별 스케일 생성
+            // 독립 스케일: 각 시리즈별로 개별 스케일 생성 (모두 0-100 범위로 통일)
             const yScales = this.data.map(d => {
-                var _a, _b;
-                const values = [
-                    d[this.minKey],
-                    d[this.maxKey],
-                    d[this.q1Key],
-                    d[this.q3Key],
-                    d[this.medianKey],
-                    d[this.meanKey],
-                    d[this.valueKey]
-                ];
-                const min = (_a = d3.min(values)) !== null && _a !== void 0 ? _a : 0;
-                const max = (_b = d3.max(values)) !== null && _b !== void 0 ? _b : 1;
                 return {
                     org: d.org,
-                    scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+                    scale: d3.scaleLinear().domain([0, 100]).range([plotH, 0])
                 };
             });
             // 기본 y축은 첫 번째 스케일 사용
-            y = ((_a = yScales[0]) === null || _a === void 0 ? void 0 : _a.scale) || d3.scaleLinear().domain([0, 1]).range([plotH, 0]);
+            y = ((_a = yScales[0]) === null || _a === void 0 ? void 0 : _a.scale) || d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
         }
         else {
-            // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤
-            const allValues = this.data.flatMap(d => [
-                d[this.minKey],
-                d[this.maxKey],
-                d[this.q1Key],
-                d[this.q3Key],
-                d[this.medianKey],
-                d[this.meanKey],
-                d[this.valueKey]
-            ]);
-            y = d3
-                .scaleLinear()
-                .domain([(_b = d3.min(allValues)) !== null && _b !== void 0 ? _b : 0, (_c = d3.max(allValues)) !== null && _c !== void 0 ? _c : 1])
-                .nice()
-                .range([plotH, 0]);
+            // 통합 스케일: 0-100 범위로 고정
+            y = d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
         }
-        const g = svg
-            .attr('width', w)
-            .attr('height', h)
-            .append('g')
-            .attr('transform', `translate(${margin.left},${margin.top})`);
-        // 축
+        const g = svg.attr('width', w).attr('height', h).append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        // Y축 (왼쪽)
         if (!this.independentScale) {
-            g.append('g').call(d3.axisLeft(y));
+            const yAxis = g.append('g').call(d3.axisLeft(y).tickSize(-plotW));
+            yAxis.select('.domain').remove();
+            yAxis.selectAll('.tick line').attr('stroke', '#e0e0e0').attr('stroke-width', 1).attr('opacity', 0.7);
+            yAxis.selectAll('.tick text').attr('fill', '#666').attr('font-size', '12px');
         }
-        g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x));
+        // X축 (아래쪽)
+        const xAxis = g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x).tickSize(0));
+        xAxis.select('.domain').attr('stroke', '#e0e0e0').attr('stroke-width', 1);
+        xAxis.selectAll('.tick text').attr('fill', '#333').attr('font-size', '13px').attr('font-weight', '500').attr('dy', '1.5em');
         // 박스플롯 - 각 그룹별로 박스 생성
         groups.forEach(groupName => {
-            var _a, _b, _c;
+            var _a;
             // 해당 그룹의 데이터 찾기
             const groupData = this.data.find(d => this.getOrgValue(d) === groupName);
             console.log(`Searching for group: ${groupName}, found:`, groupData);
@@ -153,18 +130,7 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
             // 독립 스케일 사용 시 해당 그룹의 스케일 찾기
             let currentY = y;
             if (this.independentScale) {
-                const values = [
-                    groupData[this.minKey],
-                    groupData[this.maxKey],
-                    groupData[this.q1Key],
-                    groupData[this.q3Key],
-                    groupData[this.medianKey],
-                    groupData[this.meanKey],
-                    groupData[this.valueKey]
-                ];
-                const min = (_b = d3.min(values)) !== null && _b !== void 0 ? _b : 0;
-                const max = (_c = d3.max(values)) !== null && _c !== void 0 ? _c : 1;
-                currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0]);
+                currentY = d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
             }
             // Outlier 계산 (1.5 * IQR 규칙)
             const iqr = groupData[this.q3Key] - groupData[this.q1Key];
@@ -179,36 +145,41 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
                 .attr('y', currentY(groupData[this.q3Key]))
                 .attr('width', x.bandwidth())
                 .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))
-                .attr('fill', this.getOrgValue(groupData) === this.currentGroup ? '#2196f3' : '#bbb')
-                .attr('opacity', 0.5);
+                .attr('fill', '#B3D4FC')
+                .attr('opacity', 0.8)
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1);
             // 중앙선(중앙값)
             g.append('line')
                 .attr('x1', gx)
                 .attr('x2', gx + x.bandwidth())
                 .attr('y1', currentY(groupData[this.medianKey]))
                 .attr('y2', currentY(groupData[this.medianKey]))
-                .attr('stroke', '#333')
-                .attr('stroke-width', 2);
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1.5);
             // 수염 (fence 내부의 min-max)
             g.append('line')
                 .attr('x1', gx + x.bandwidth() / 2)
                 .attr('x2', gx + x.bandwidth() / 2)
                 .attr('y1', currentY(actualMin))
                 .attr('y2', currentY(actualMax))
-                .attr('stroke', '#333');
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1);
             // min/max 선 (fence 내부)
             g.append('line')
                 .attr('x1', gx + x.bandwidth() / 4)
                 .attr('x2', gx + (x.bandwidth() * 3) / 4)
                 .attr('y1', currentY(actualMin))
                 .attr('y2', currentY(actualMin))
-                .attr('stroke', '#333');
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1);
             g.append('line')
                 .attr('x1', gx + x.bandwidth() / 4)
                 .attr('x2', gx + (x.bandwidth() * 3) / 4)
                 .attr('y1', currentY(actualMax))
                 .attr('y2', currentY(actualMax))
-                .attr('stroke', '#333');
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1);
             // Outlier 표시 (fence 외부의 값들)
             if (groupData[this.minKey] < lowerFence) {
                 g.append('circle')
@@ -216,7 +187,7 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
                     .attr('cy', currentY(groupData[this.minKey]))
                     .attr('r', 3)
                     .attr('fill', '#ff4444')
-                    .attr('stroke', '#333')
+                    .attr('stroke', '#fff')
                     .attr('stroke-width', 1);
             }
             if (groupData[this.maxKey] > upperFence) {
@@ -225,15 +196,27 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
                     .attr('cy', currentY(groupData[this.maxKey]))
                     .attr('r', 3)
                     .attr('fill', '#ff4444')
-                    .attr('stroke', '#333')
+                    .attr('stroke', '#fff')
                     .attr('stroke-width', 1);
             }
             // 평균값
             g.append('circle')
                 .attr('cx', gx + x.bandwidth() / 2)
                 .attr('cy', currentY(groupData[this.meanKey]))
-                .attr('r', 4)
-                .attr('fill', 'orange');
+                .attr('r', 3)
+                .attr('fill', '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1);
+            // 현재 프로젝트 값 (오렌지색)
+            if (groupData[this.valueKey] != null) {
+                g.append('circle')
+                    .attr('cx', gx + x.bandwidth() / 2)
+                    .attr('cy', currentY(groupData[this.valueKey]))
+                    .attr('r', 3)
+                    .attr('fill', '#ff9800')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1);
+            }
         });
         // 현재 그룹 값 강조
         if (this.currentGroup && groups.includes(this.currentGroup)) {
@@ -241,24 +224,13 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
             if (currentGroupData) {
                 let currentY = y;
                 if (this.independentScale) {
-                    const values = [
-                        currentGroupData[this.minKey],
-                        currentGroupData[this.maxKey],
-                        currentGroupData[this.q1Key],
-                        currentGroupData[this.q3Key],
-                        currentGroupData[this.medianKey],
-                        currentGroupData[this.meanKey],
-                        currentGroupData[this.valueKey]
-                    ];
-                    const min = (_d = d3.min(values)) !== null && _d !== void 0 ? _d : 0;
-                    const max = (_e = d3.max(values)) !== null && _e !== void 0 ? _e : 1;
-                    currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0]);
+                    currentY = d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
                 }
                 g.append('circle')
                     .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)
                     .attr('cy', currentY(currentGroupData[this.valueKey]))
                     .attr('r', 6)
-                    .attr('fill', '#e91e63')
+                    .attr('fill', '#4CAF50')
                     .attr('stroke', '#fff')
                     .attr('stroke-width', 2);
             }

package/dist-client/components/kpi-boxplot-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/components/kpi-boxplot-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-boxplot-chart')\nexport class KpiBoxplotChart extends LitElement {\n @property({ type: Array }) data: any[] = []\n @property({ type: Array }) groups: string[] = [] // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)\n @property({ type: String }) minKey: string = 'min'\n @property({ type: String }) maxKey: string = 'max'\n @property({ type: String }) meanKey: string = 'mean'\n @property({ type: String }) medianKey: string = 'median'\n @property({ type: String }) q1Key: string = 'q1'\n @property({ type: String }) q3Key: string = 'q3'\n @property({ type: String }) valueKey: string = 'value'\n @property({ type: String }) currentGroup: string = ''\n @property({ type: Boolean }) independentScale: boolean = false\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=\"boxplot\"\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.drawBoxplot()\n }\n\n private getOrgValue = (d: any) => d.org \|\| d.group\n\n drawBoxplot() {\n const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n svg.selectAll('').remove()\n \n // 데이터 검증\n if (!this.data \|\| this.data.length === 0) {\n return\n }\n const w = this.chartWidth \|\| 300\n const h = this.chartHeight \|\| 300\n const margin = {\n top: 20,\n right: 20,\n bottom: 40,\n left: this.independentScale ? 20 : 40\n }\n const plotW = w - margin.left - margin.right\n const plotH = h - margin.top - margin.bottom\n\n // x축: 조직 단위 (그룹) - org 또는 group 필드 지원\n const groups = this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))]\n if (groups.length === 0) {\n console.warn('No valid groups found in data:', this.data)\n return // 유효한 그룹이 없으면 차트를 그리지 않음\n }\n \n console.log('Boxplot groups:', groups)\n console.log('Data org values:', this.data.map(d => this.getOrgValue(d)))\n console.log('Full data:', this.data)\n console.log('Chart dimensions:', { w, h, plotW, plotH })\n \n const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4)\n\n // y축 스케일 설정\n let y: d3.ScaleLinear<number, number>\n\n if (this.independentScale) {\n // 독립 스케일: 각 시리즈별로 개별 스케일 생성\n const yScales = this.data.map(d => {\n const values = [\n d[this.minKey],\n d[this.maxKey],\n d[this.q1Key],\n d[this.q3Key],\n d[this.medianKey],\n d[this.meanKey],\n d[this.valueKey]\n ]\n const min = d3.min(values) ?? 0\n const max = d3.max(values) ?? 1\n return {\n org: d.org,\n scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n }\n })\n\n // 기본 y축은 첫 번째 스케일 사용\n y = yScales[0]?.scale \|\| d3.scaleLinear().domain([0, 1]).range([plotH, 0])\n } else {\n // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤\n const allValues = this.data.flatMap(d => [\n d[this.minKey],\n d[this.maxKey],\n d[this.q1Key],\n d[this.q3Key],\n d[this.medianKey],\n d[this.meanKey],\n d[this.valueKey]\n ])\n y = d3\n .scaleLinear()\n .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])\n .nice()\n .range([plotH, 0])\n }\n\n const g = svg\n .attr('width', w)\n .attr('height', h)\n .append('g')\n .attr('transform', `translate(${margin.left},${margin.top})`)\n\n // 축\n if (!this.independentScale) {\n g.append('g').call(d3.axisLeft(y))\n }\n g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))\n\n // 박스플롯 - 각 그룹별로 박스 생성\n groups.forEach(groupName => {\n // 해당 그룹의 데이터 찾기\n const groupData = this.data.find(d => this.getOrgValue(d) === groupName)\n console.log(`Searching for group: ${groupName}, found:`, groupData)\n if (!groupData) {\n console.warn(`No data found for group: ${groupName}. Available data:`, this.data.map(d => ({ org: d.org, keys: Object.keys(d) })))\n return\n }\n \n // 필수 필드 검증\n const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n const missingFields = requiredFields.filter(field => groupData[field] == null)\n if (missingFields.length > 0) {\n console.warn(`Missing required fields for group ${groupName}:`, missingFields)\n console.log('Group data:', groupData)\n return\n }\n \n const gx = x(groupName) ?? 0\n console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`)\n\n // 독립 스케일 사용 시 해당 그룹의 스케일 찾기\n let currentY = y\n if (this.independentScale) {\n const values = [\n groupData[this.minKey],\n groupData[this.maxKey],\n groupData[this.q1Key],\n groupData[this.q3Key],\n groupData[this.medianKey],\n groupData[this.meanKey],\n groupData[this.valueKey]\n ]\n const min = d3.min(values) ?? 0\n const max = d3.max(values) ?? 1\n currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n }\n\n // Outlier 계산 (1.5 IQR 규칙)\n const iqr = groupData[this.q3Key] - groupData[this.q1Key]\n const lowerFence = groupData[this.q1Key] - 1.5 * iqr\n const upperFence = groupData[this.q3Key] + 1.5 * iqr\n\n // 실제 min/max 값 (fence 내부)\n const actualMin = Math.max(groupData[this.minKey], lowerFence)\n const actualMax = Math.min(groupData[this.maxKey], upperFence)\n\n // 박스\n g.append('rect')\n .attr('x', gx)\n .attr('y', currentY(groupData[this.q3Key]))\n .attr('width', x.bandwidth())\n .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))\n .attr('fill', this.getOrgValue(groupData) === this.currentGroup ? '#2196f3' : '#bbb')\n .attr('opacity', 0.5)\n\n // 중앙선(중앙값)\n g.append('line')\n .attr('x1', gx)\n .attr('x2', gx + x.bandwidth())\n .attr('y1', currentY(groupData[this.medianKey]))\n .attr('y2', currentY(groupData[this.medianKey]))\n .attr('stroke', '#333')\n .attr('stroke-width', 2)\n\n // 수염 (fence 내부의 min-max)\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 2)\n .attr('x2', gx + x.bandwidth() / 2)\n .attr('y1', currentY(actualMin))\n .attr('y2', currentY(actualMax))\n .attr('stroke', '#333')\n\n // min/max 선 (fence 내부)\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 4)\n .attr('x2', gx + (x.bandwidth() * 3) / 4)\n .attr('y1', currentY(actualMin))\n .attr('y2', currentY(actualMin))\n .attr('stroke', '#333')\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 4)\n .attr('x2', gx + (x.bandwidth() * 3) / 4)\n .attr('y1', currentY(actualMax))\n .attr('y2', currentY(actualMax))\n .attr('stroke', '#333')\n\n // Outlier 표시 (fence 외부의 값들)\n if (groupData[this.minKey] < lowerFence) {\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.minKey]))\n .attr('r', 3)\n .attr('fill', '#ff4444')\n .attr('stroke', '#333')\n .attr('stroke-width', 1)\n }\n if (groupData[this.maxKey] > upperFence) {\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.maxKey]))\n .attr('r', 3)\n .attr('fill', '#ff4444')\n .attr('stroke', '#333')\n .attr('stroke-width', 1)\n }\n\n // 평균값\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.meanKey]))\n .attr('r', 4)\n .attr('fill', 'orange')\n })\n // 현재 그룹 값 강조\n if (this.currentGroup && groups.includes(this.currentGroup)) {\n const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup)\n if (currentGroupData) {\n let currentY = y\n if (this.independentScale) {\n const values = [\n currentGroupData[this.minKey],\n currentGroupData[this.maxKey],\n currentGroupData[this.q1Key],\n currentGroupData[this.q3Key],\n currentGroupData[this.medianKey],\n currentGroupData[this.meanKey],\n currentGroupData[this.valueKey]\n ]\n const min = d3.min(values) ?? 0\n const max = d3.max(values) ?? 1\n currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n }\n\n g.append('circle')\n .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)\n .attr('cy', currentY(currentGroupData[this.valueKey]))\n .attr('r', 6)\n .attr('fill', '#e91e63')\n .attr('stroke', '#fff')\n .attr('stroke-width', 2)\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/components/kpi-boxplot-chart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AAGjB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACsB,SAAI,GAAU,EAAE,CAAA;QAChB,WAAM,GAAa,EAAE,CAAA,CAAC,gCAAgC;QACrD,WAAM,GAAW,KAAK,CAAA;QACtB,WAAM,GAAW,KAAK,CAAA;QACtB,YAAO,GAAW,MAAM,CAAA;QACxB,cAAS,GAAW,QAAQ,CAAA;QAC5B,UAAK,GAAW,IAAI,CAAA;QACpB,UAAK,GAAW,IAAI,CAAA;QACpB,aAAQ,GAAW,OAAO,CAAA;QAC1B,iBAAY,GAAW,EAAE,CAAA;QACxB,qBAAgB,GAAY,KAAK,CAAA;QAetD,eAAU,GAAG,CAAC,CAAA;QACd,gBAAW,GAAG,CAAC,CAAA;QAmCf,gBAAW,GAAG,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAA;IAyNpD,CAAC;IAzPC,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,UAAU;eACd,IAAI,CAAC,WAAW;qBACV,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;;YAE5C,CAAA;IACV,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACjD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;gBAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAA;gBAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAA;QACjC,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAID,WAAW;;QACT,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;QAChE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAE3B,SAAS;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,OAAM;QACR,CAAC;QACD,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,GAAG,CAAA;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAA;QACjC,MAAM,MAAM,GAAG;YACb,GAAG,EAAE,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;SACtC,CAAA;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;QAE5C,sCAAsC;QACtC,MAAM,MAAM,GACV,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QACzH,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACzD,OAAM,CAAC,yBAAyB;QAClC,CAAC;QAED,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;QACtC,OAAO,CAAC,GAAG,CACT,kBAAkB,EAClB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CACxC,CAAA;QACD,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QACpC,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;QAExD,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QAEtE,YAAY;QACZ,IAAI,CAAiC,CAAA;QAErC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBAChC,OAAO;oBACL,GAAG,EAAE,CAAC,CAAC,GAAG;oBACV,KAAK,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;iBAC3D,CAAA;YACH,CAAC,CAAC,CAAA;YAEF,qBAAqB;YACrB,CAAC,GAAG,CAAA,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QAC9E,CAAC;aAAM,CAAC;YACN,uBAAuB;YACvB,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QACzD,CAAC;QAED,MAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAEzH,UAAU;QACV,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;YACjE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,CAAA;YAChC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YACpG,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QAC9E,CAAC;QAED,WAAW;QACX,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QACzG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;QACzE,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QAE3H,sBAAsB;QACtB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;;YACzB,gBAAgB;YAChB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;YACxE,OAAO,CAAC,GAAG,CAAC,wBAAwB,SAAS,UAAU,EAAE,SAAS,CAAC,CAAA;YACnE,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CACV,4BAA4B,SAAS,mBAAmB,EACxD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC3D,CAAA;gBACD,OAAM;YACR,CAAC;YAED,WAAW;YACX,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;YACvG,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAA;YAC9E,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,OAAO,CAAC,IAAI,CAAC,qCAAqC,SAAS,GAAG,EAAE,aAAa,CAAC,CAAA;gBAC9E,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;gBACrC,OAAM;YACR,CAAC;YAED,MAAM,EAAE,GAAG,MAAA,CAAC,CAAC,SAAS,CAAC,mCAAI,CAAC,CAAA;YAC5B,OAAO,CAAC,GAAG,CAAC,mBAAmB,SAAS,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;YAElF,4BAA4B;YAC5B,IAAI,QAAQ,GAAG,CAAC,CAAA;YAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,QAAQ,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;YAChE,CAAC;YAED,4BAA4B;YAC5B,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACzD,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,CAAA;YACpD,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,CAAA;YAEpD,0BAA0B;YAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;YAC9D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;YAE9D,KAAK;YACL,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC1C,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;iBAC5B,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;iBACjF,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;iBACvB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC;iBACpB,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAE1B,WAAW;YACX,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;iBACd,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC;iBAC9B,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;iBAC/C,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;iBAC/C,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;YAE5B,yBAAyB;YACzB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAE1B,uBAAuB;YACvB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBACxC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC1B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBACxC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;iBAC/B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAE1B,4BAA4B;YAC5B,IAAI,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;gBACxC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;qBAClC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;qBAC5C,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;YACD,IAAI,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;gBACxC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;qBAClC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;qBAC5C,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;YAED,MAAM;YACN,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACf,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;iBAC7C,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;iBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;iBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;iBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAE1B,mBAAmB;YACnB,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;gBACrC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;qBAClC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;qBAC9C,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC,CAAC,CAAA;QACF,aAAa;QACb,IAAI,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAA;YACvF,IAAI,gBAAgB,EAAE,CAAC;gBACrB,IAAI,QAAQ,GAAG,CAAC,CAAA;gBAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAC1B,QAAQ,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;gBAChE,CAAC;gBAED,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;qBACpD,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;qBACrD,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;;AAzQM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWZ;AAvB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAiB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;+CAAsB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAA0B;AACxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;yDAAkC;AAXnD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAuR3B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('kpi-boxplot-chart')\nexport class KpiBoxplotChart extends LitElement {\n @property({ type: Array }) data: any[] = []\n @property({ type: Array }) groups: string[] = [] // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)\n @property({ type: String }) minKey: string = 'min'\n @property({ type: String }) maxKey: string = 'max'\n @property({ type: String }) meanKey: string = 'mean'\n @property({ type: String }) medianKey: string = 'median'\n @property({ type: String }) q1Key: string = 'q1'\n @property({ type: String }) q3Key: string = 'q3'\n @property({ type: String }) valueKey: string = 'value'\n @property({ type: String }) currentGroup: string = ''\n @property({ type: Boolean }) independentScale: boolean = false\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=\"boxplot\"\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.drawBoxplot()\n }\n\n private getOrgValue = (d: any) => d.org \|\| d.group\n\n drawBoxplot() {\n const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n svg.selectAll('').remove()\n\n // 데이터 검증\n if (!this.data \|\| this.data.length === 0) {\n return\n }\n const w = this.chartWidth \|\| 300\n const h = this.chartHeight \|\| 300\n const margin = {\n top: 20,\n right: 20,\n bottom: 40,\n left: this.independentScale ? 20 : 40\n }\n const plotW = w - margin.left - margin.right\n const plotH = h - margin.top - margin.bottom\n\n // x축: 조직 단위 (그룹) - org 또는 group 필드 지원\n const groups =\n this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))]\n if (groups.length === 0) {\n console.warn('No valid groups found in data:', this.data)\n return // 유효한 그룹이 없으면 차트를 그리지 않음\n }\n\n console.log('Boxplot groups:', groups)\n console.log(\n 'Data org values:',\n this.data.map(d => this.getOrgValue(d))\n )\n console.log('Full data:', this.data)\n console.log('Chart dimensions:', { w, h, plotW, plotH })\n\n const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4)\n\n // y축 스케일 설정\n let y: d3.ScaleLinear<number, number>\n\n if (this.independentScale) {\n // 독립 스케일: 각 시리즈별로 개별 스케일 생성 (모두 0-100 범위로 통일)\n const yScales = this.data.map(d => {\n return {\n org: d.org,\n scale: d3.scaleLinear().domain([0, 100]).range([plotH, 0])\n }\n })\n\n // 기본 y축은 첫 번째 스케일 사용\n y = yScales[0]?.scale \|\| d3.scaleLinear().domain([0, 100]).range([plotH, 0])\n } else {\n // 통합 스케일: 0-100 범위로 고정\n y = d3.scaleLinear().domain([0, 100]).range([plotH, 0])\n }\n\n const g = svg.attr('width', w).attr('height', h).append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n // Y축 (왼쪽)\n if (!this.independentScale) {\n const yAxis = g.append('g').call(d3.axisLeft(y).tickSize(-plotW))\n yAxis.select('.domain').remove()\n yAxis.selectAll('.tick line').attr('stroke', '#e0e0e0').attr('stroke-width', 1).attr('opacity', 0.7)\n yAxis.selectAll('.tick text').attr('fill', '#666').attr('font-size', '12px')\n }\n\n // X축 (아래쪽)\n const xAxis = g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x).tickSize(0))\n xAxis.select('.domain').attr('stroke', '#e0e0e0').attr('stroke-width', 1)\n xAxis.selectAll('.tick text').attr('fill', '#333').attr('font-size', '13px').attr('font-weight', '500').attr('dy', '1.5em')\n\n // 박스플롯 - 각 그룹별로 박스 생성\n groups.forEach(groupName => {\n // 해당 그룹의 데이터 찾기\n const groupData = this.data.find(d => this.getOrgValue(d) === groupName)\n console.log(`Searching for group: ${groupName}, found:`, groupData)\n if (!groupData) {\n console.warn(\n `No data found for group: ${groupName}. Available data:`,\n this.data.map(d => ({ org: d.org, keys: Object.keys(d) }))\n )\n return\n }\n\n // 필수 필드 검증\n const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n const missingFields = requiredFields.filter(field => groupData[field] == null)\n if (missingFields.length > 0) {\n console.warn(`Missing required fields for group ${groupName}:`, missingFields)\n console.log('Group data:', groupData)\n return\n }\n\n const gx = x(groupName) ?? 0\n console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`)\n\n // 독립 스케일 사용 시 해당 그룹의 스케일 찾기\n let currentY = y\n if (this.independentScale) {\n currentY = d3.scaleLinear().domain([0, 100]).range([plotH, 0])\n }\n\n // Outlier 계산 (1.5 IQR 규칙)\n const iqr = groupData[this.q3Key] - groupData[this.q1Key]\n const lowerFence = groupData[this.q1Key] - 1.5 * iqr\n const upperFence = groupData[this.q3Key] + 1.5 * iqr\n\n // 실제 min/max 값 (fence 내부)\n const actualMin = Math.max(groupData[this.minKey], lowerFence)\n const actualMax = Math.min(groupData[this.maxKey], upperFence)\n\n // 박스\n g.append('rect')\n .attr('x', gx)\n .attr('y', currentY(groupData[this.q3Key]))\n .attr('width', x.bandwidth())\n .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))\n .attr('fill', '#B3D4FC')\n .attr('opacity', 0.8)\n .attr('stroke', '#7BB3F0')\n .attr('stroke-width', 1)\n\n // 중앙선(중앙값)\n g.append('line')\n .attr('x1', gx)\n .attr('x2', gx + x.bandwidth())\n .attr('y1', currentY(groupData[this.medianKey]))\n .attr('y2', currentY(groupData[this.medianKey]))\n .attr('stroke', '#7BB3F0')\n .attr('stroke-width', 1.5)\n\n // 수염 (fence 내부의 min-max)\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 2)\n .attr('x2', gx + x.bandwidth() / 2)\n .attr('y1', currentY(actualMin))\n .attr('y2', currentY(actualMax))\n .attr('stroke', '#7BB3F0')\n .attr('stroke-width', 1)\n\n // min/max 선 (fence 내부)\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 4)\n .attr('x2', gx + (x.bandwidth() * 3) / 4)\n .attr('y1', currentY(actualMin))\n .attr('y2', currentY(actualMin))\n .attr('stroke', '#7BB3F0')\n .attr('stroke-width', 1)\n g.append('line')\n .attr('x1', gx + x.bandwidth() / 4)\n .attr('x2', gx + (x.bandwidth() * 3) / 4)\n .attr('y1', currentY(actualMax))\n .attr('y2', currentY(actualMax))\n .attr('stroke', '#7BB3F0')\n .attr('stroke-width', 1)\n\n // Outlier 표시 (fence 외부의 값들)\n if (groupData[this.minKey] < lowerFence) {\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.minKey]))\n .attr('r', 3)\n .attr('fill', '#ff4444')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n }\n if (groupData[this.maxKey] > upperFence) {\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.maxKey]))\n .attr('r', 3)\n .attr('fill', '#ff4444')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n }\n\n // 평균값\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.meanKey]))\n .attr('r', 3)\n .attr('fill', '#4CAF50')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n\n // 현재 프로젝트 값 (오렌지색)\n if (groupData[this.valueKey] != null) {\n g.append('circle')\n .attr('cx', gx + x.bandwidth() / 2)\n .attr('cy', currentY(groupData[this.valueKey]))\n .attr('r', 3)\n .attr('fill', '#ff9800')\n .attr('stroke', '#fff')\n .attr('stroke-width', 1)\n }\n })\n // 현재 그룹 값 강조\n if (this.currentGroup && groups.includes(this.currentGroup)) {\n const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup)\n if (currentGroupData) {\n let currentY = y\n if (this.independentScale) {\n currentY = d3.scaleLinear().domain([0, 100]).range([plotH, 0])\n }\n\n g.append('circle')\n .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)\n .attr('cy', currentY(currentGroupData[this.valueKey]))\n .attr('r', 6)\n .attr('fill', '#4CAF50')\n .attr('stroke', '#fff')\n .attr('stroke-width', 2)\n }\n }\n }\n}\n"]}

package/dist-client/components/kpi-radar-chart.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export declare class KpiRadarChart extends LitElement {
     categories: string[];
     valueKey: string;
     currentGroup: string;
+    seriesColors: Record<string, string>;
     static styles: import("lit").CSSResult;
     private chartWidth;
     private chartHeight;

package/dist-client/components/kpi-radar-chart.js CHANGED Viewed

@@ -9,6 +9,10 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
         this.categories = [];
         this.valueKey = 'value';
         this.currentGroup = '';
+        this.seriesColors = {
+            기준평균: '#E3F2FD',
+            프로젝트성과: '#2196F3'
+        };
         this.chartWidth = 0;
         this.chartHeight = 0;
     }
@@ -46,7 +50,11 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
         svg.selectAll('*').remove();
         const w = this.chartWidth || 300;
         const h = this.chartHeight || 300;
-        const r = Math.min(w, h) / 2 - 40;
+        // 레전드를 위한 공간 확보 (오른쪽에 120px)
+        const legendWidth = 120;
+        const chartWidth = w - legendWidth;
+        const chartHeight = h;
+        const r = Math.min(chartWidth, chartHeight) / 2 - 40;
         const angleSlice = (2 * Math.PI) / (this.categories.length || 1);
         // 데이터 변환: { org, values: [ {category, value} ... ] }
         const orgData = d3
@@ -63,7 +71,7 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
         const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r]);
         // SVG 기본
         svg.attr('width', w).attr('height', h);
-        const g = svg.append('g').attr('transform', `translate(${w / 2},${h / 2})`);
+        const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`);
         // 그리드/축
         for (let i = 1; i <= 5; i++) {
             g.append('circle')
@@ -85,23 +93,89 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
                 .attr('text-anchor', 'middle')
                 .attr('alignment-baseline', 'middle')
                 .attr('font-size', 12)
+                .attr('fill', '#333')
                 .text(cat);
         });
-        // 그룹별 폴리곤
-        orgData.forEach(gd => {
+        // 그룹별 폴리곤 - 기준평균을 먼저 그리고 프로젝트성과를 위에 그리기
+        const sortedOrgData = orgData.sort((a, b) => {
+            if (a.org === '기준평균')
+                return -1;
+            if (b.org === '기준평균')
+                return 1;
+            return 0;
+        });
+        sortedOrgData.forEach(gd => {
             // 마지막에 첫 점을 한 번 더 추가
             const closedValues = [...gd.values, gd.values[0]];
             const line = d3
                 .lineRadial()
                 .radius((d) => radius(d.value))
                 .angle((d, i) => i * angleSlice);
+            // 색상 및 스타일 결정
+            const baseColor = this.seriesColors[gd.org] || '#ccc';
+            const fillColor = gd.org === '기준평균'
+                ? 'rgba(76,175,80,0.4)' // 진한 녹색 배경
+                : 'rgba(33,150,243,0.4)'; // 진한 파란색 배경
+            const strokeColor = gd.org === '기준평균'
+                ? '#4CAF50' // 진한 녹색 선
+                : '#2196F3'; // 진한 파란색 선
+            const strokeWidth = gd.org === '프로젝트성과' ? 1.5 : 1.5;
             g.append('path')
                 .datum(closedValues)
                 .attr('d', line)
-                .attr('fill', gd.org === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')
-                .attr('stroke', gd.org === this.currentGroup ? '#2196f3' : '#aaa')
-                .attr('stroke-width', gd.org === this.currentGroup ? 3 : 1);
+                .attr('fill', fillColor)
+                .attr('stroke', strokeColor)
+                .attr('stroke-width', strokeWidth)
+                .attr('stroke-dasharray', 'none'); // 모두 직선으로 변경
+        });
+        // 데이터 포인트 표시
+        sortedOrgData.forEach(gd => {
+            gd.values.forEach((d, i) => {
+                const angle = i * angleSlice - Math.PI / 2;
+                const pointRadius = radius(d.value);
+                const x = pointRadius * Math.cos(angle);
+                const y = pointRadius * Math.sin(angle);
+                g.append('circle')
+                    .attr('cx', x)
+                    .attr('cy', y)
+                    .attr('r', 3)
+                    .attr('fill', gd.org === '기준평균' ? '#4CAF50' : '#2196F3')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1);
+            });
         });
+        // 레전드 추가
+        const legend = svg.append('g')
+            .attr('class', 'legend')
+            .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`);
+        const legendData = [
+            { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },
+            { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }
+        ];
+        const legendItems = legend.selectAll('.legend-item')
+            .data(legendData)
+            .enter()
+            .append('g')
+            .attr('class', 'legend-item')
+            .attr('transform', (d, i) => `translate(0, ${i * 25})`);
+        // 레전드 아이콘 (작은 사각형)
+        legendItems.append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', 12)
+            .attr('height', 12)
+            .attr('fill', d => d.color)
+            .attr('opacity', 0.6)
+            .attr('stroke', d => d.color)
+            .attr('stroke-width', 1.5);
+        // 레전드 텍스트
+        legendItems.append('text')
+            .attr('x', 18)
+            .attr('y', 9)
+            .attr('font-size', '12px')
+            .attr('fill', '#333')
+            .attr('alignment-baseline', 'middle')
+            .text(d => d.label);
     }
 };
 KpiRadarChart.styles = css `
@@ -132,6 +206,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], KpiRadarChart.prototype, "currentGroup", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiRadarChart.prototype, "seriesColors", void 0);
 KpiRadarChart = __decorate([
     customElement('kpi-radar-chart')
 ], KpiRadarChart);

package/dist-client/components/kpi-radar-chart.js.map CHANGED Viewed

	@@ -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\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 const r = Math.min(w, h) / 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(${w / 2},${h / 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 .text(cat)\n })\n\n // 그룹별 폴리곤\n orgData.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 g.append('path')\n .datum(closedValues)\n .attr('d', line as any)\n .attr('fill', gd.org === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')\n .attr('stroke', gd.org === this.currentGroup ? '#2196f3' : '#aaa')\n .attr('stroke-width', gd.org === this.currentGroup ? 3 : 1)\n })\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('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"]}

package/dist-client/components/kpi-single-boxplot-chart.js CHANGED Viewed

@@ -161,15 +161,24 @@ let KpiSingleBoxplotChart = class KpiSingleBoxplotChart extends LitElement {
             .attr('y2', y(this.data[this.minKey]))
             .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // 현재값 (있는 경우)
+        // 평균값 (초록색)
+        if (this.data[this.meanKey] != null) {
+            g.append('circle')
+                .attr('cx', centerX)
+                .attr('cy', y(this.data[this.meanKey]))
+                .attr('r', 3)
+                .attr('fill', '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1);
+        }
+        // 현재값 (오렌지색)
         if (this.data[this.valueKey] != null) {
             const currentValue = this.data[this.valueKey];
-            const isOutlier = currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey];
             g.append('circle')
                 .attr('cx', centerX)
                 .attr('cy', y(currentValue))
                 .attr('r', 3)
-                .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')
+                .attr('fill', '#ff9800')
                 .attr('stroke', '#fff')
                 .attr('stroke-width', 1);
         }
@@ -242,15 +251,24 @@ let KpiSingleBoxplotChart = class KpiSingleBoxplotChart extends LitElement {
             .attr('y2', centerY + capHeight / 2)
             .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // 현재값 (있는 경우)
+        // 평균값 (초록색)
+        if (this.data[this.meanKey] != null) {
+            g.append('circle')
+                .attr('cx', x(this.data[this.meanKey]))
+                .attr('cy', centerY)
+                .attr('r', 3)
+                .attr('fill', '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1);
+        }
+        // 현재값 (오렌지색)
         if (this.data[this.valueKey] != null) {
             const currentValue = this.data[this.valueKey];
-            const isOutlier = currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey];
             g.append('circle')
                 .attr('cx', x(currentValue))
                 .attr('cy', centerY)
                 .attr('r', 3)
-                .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')
+                .attr('fill', '#ff9800')
                 .attr('stroke', '#fff')
                 .attr('stroke-width', 1);
         }