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

package/KPI-STATISTICS-SERVICE.md

@@ -0,0 +1,233 @@
+# KPI Statistics Service Implementation
+
+## Overview
+
+This implementation provides GraphQL services for KPI statistics visualization, specifically designed for box plots and radar charts. The service analyzes KPI values across different geographical groups and provides real-time statistical data for completed projects.
+
+## GraphQL Types
+
+### KpiBoxPlotStats
+Box plot statistics for KPI values:
+- `geoGroup`: Geographical group identifier
+- `kpiName`: KPI name (optional for aggregated data)
+- `minVal`: Minimum score value
+- `q1Val`: First quartile (25th percentile)
+- `medVal`: Median value (50th percentile)
+- `q3Val`: Third quartile (75th percentile)
+- `maxVal`: Maximum score value
+
+### KpiRadarStats
+Radar chart statistics for KPI values:
+- `geoGroup`: Geographical group identifier
+- `kpiName`: KPI name
+- `avgScore`: Average KPI score
+- `projectCount`: Number of projects in calculation
+
+## GraphQL Queries
+
+### 1. kpiZValueBoxPlotStats
+Returns box plot statistics for Z-category KPIs grouped by geographical region.
+
+**Query:**
+```graphql
+query GetZValueBoxPlot($geoGroup: String) {
+  kpiZValueBoxPlotStats(geoGroup: $geoGroup) {
+    geoGroup
+    minVal
+    q1Val
+    medVal
+    q3Val
+    maxVal
+  }
+}
+```
+
+**Parameters:**
+- `geoGroup` (optional): Filter by specific geographical group
+
+### 2. kpiYValueBoxPlotStats
+Returns box plot statistics for Y-category KPIs, broken down by both geographical region and individual KPI names.
+
+**Query:**
+```graphql
+query GetYValueBoxPlot($geoGroup: String) {
+  kpiYValueBoxPlotStats(geoGroup: $geoGroup) {
+    geoGroup
+    kpiName
+    minVal
+    q1Val
+    medVal
+    q3Val
+    maxVal
+  }
+}
+```
+
+**Parameters:**
+- `geoGroup` (optional): Filter by specific geographical group
+
+### 3. kpiRadarStats
+Returns radar chart statistics for KPIs matching a specific pattern.
+
+**Query:**
+```graphql
+query GetRadarStats($kpiPattern: String!, $geoGroup: String) {
+  kpiRadarStats(kpiPattern: $kpiPattern, geoGroup: $geoGroup) {
+    geoGroup
+    kpiName
+    avgScore
+    projectCount
+  }
+}
+```
+
+**Parameters:**
+- `kpiPattern`: SQL LIKE pattern for KPI names (default: '%')
+- `geoGroup` (optional): Filter by specific geographical group
+
+### 4. kpiComprehensiveStats
+Returns comprehensive statistics for all KPIs across completed projects.
+
+**Query:**
+```graphql
+query GetComprehensiveStats($geoGroup: String, $includeOngoing: Boolean) {
+  kpiComprehensiveStats(geoGroup: $geoGroup, includeOngoing: $includeOngoing) {
+    geoGroup
+    kpiName
+    avgScore
+    projectCount
+  }
+}
+```
+
+**Parameters:**
+- `geoGroup` (optional): Filter by specific geographical group
+- `includeOngoing` (default: false): Include ongoing projects in analysis
+
+## Usage Examples
+
+### JavaScript/Frontend Usage
+
+```typescript
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+// Get Z-category box plot data for all regions
+const getZBoxPlotData = async () => {
+  const result = await client.query({
+    query: gql`
+      query {
+        kpiZValueBoxPlotStats {
+          geoGroup
+          minVal
+          q1Val
+          medVal
+          q3Val
+          maxVal
+        }
+      }
+    `
+  })
+  return result.data.kpiZValueBoxPlotStats
+}
+
+// Get Y-category box plot data for specific region
+const getYBoxPlotData = async (region: string) => {
+  const result = await client.query({
+    query: gql`
+      query GetYBoxPlot($geoGroup: String) {
+        kpiYValueBoxPlotStats(geoGroup: $geoGroup) {
+          geoGroup
+          kpiName
+          minVal
+          q1Val
+          medVal
+          q3Val
+          maxVal
+        }
+      }
+    `,
+    variables: { geoGroup: region }
+  })
+  return result.data.kpiYValueBoxPlotStats
+}
+
+// Get radar chart data for X-category KPIs
+const getRadarData = async () => {
+  const result = await client.query({
+    query: gql`
+      query {
+        kpiRadarStats(kpiPattern: "X%") {
+          geoGroup
+          kpiName
+          avgScore
+          projectCount
+        }
+      }
+    `
+  })
+  return result.data.kpiRadarStats
+}
+```
+
+### Data Processing for Charts
+
+```typescript
+// Process box plot data for Chart.js or similar
+const processBoxPlotData = (data: KpiBoxPlotStats[]) => {
+  return data.map(item => ({
+    label: item.geoGroup,
+    data: [item.minVal, item.q1Val, item.medVal, item.q3Val, item.maxVal]
+  }))
+}
+
+// Process radar data for radar charts
+const processRadarData = (data: KpiRadarStats[]) => {
+  const groupedData = data.reduce((acc, item) => {
+    if (!acc[item.geoGroup]) {
+      acc[item.geoGroup] = []
+    }
+    acc[item.geoGroup].push({
+      label: item.kpiName,
+      value: item.avgScore
+    })
+    return acc
+  }, {} as Record<string, Array<{label: string, value: number}>>)
+
+  return groupedData
+}
+```
+
+## Database Schema Requirements
+
+The service expects the following database structure:
+
+- `kpi_values` table with columns: `id`, `score`, `kpi_id`, `kpi_org_scope_id`, `domain_id`
+- `kpis` table with columns: `id`, `name`
+- `projects` table with columns: `id`, `geo_group`, `end_date`
+
+## Security
+
+All queries require KPI query privileges:
+- Category: "kpi"
+- Privilege: "query"
+- Domain owner granted: true
+- Super user granted: true
+
+## Performance Considerations
+
+1. **Indexing**: Ensure indexes on:
+   - `kpi_values.kpi_id`
+   - `kpi_values.kpi_org_scope_id`
+   - `kpi_values.domain_id`
+   - `projects.end_date`
+   - `projects.geo_group`
+   - `kpis.name`
+
+2. **Caching**: Consider implementing GraphQL query result caching for frequently accessed statistics.
+
+3. **Aggregation**: The percentile calculations may be expensive on large datasets. Consider pre-computing statistics for better performance.
+
+## File Location
+
+Implementation: `/Users/super/Documents/GitHub/dssp/packages/dkpi/server/service/kpi/kpi-query.ts`

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

@@ -86,175 +86,173 @@ let KpiSingleBoxplotChart = class KpiSingleBoxplotChart extends LitElement {
             .attr('transform', `translate(${margin}, ${margin})`);
         if (this.vertical) {
             // 세로형 boxplot (기본)
-            this.drawVerticalBoxplot(g, plotW, plotH, values);
+            this.drawVerticalBoxplot(g, plotW, plotH);
         }
         else {
             // 가로형 boxplot
-            this.drawHorizontalBoxplot(g, plotW, plotH, values);
+            this.drawHorizontalBoxplot(g, plotW, plotH);
         }
     }
-    drawVerticalBoxplot(g, plotW, plotH, values) {
-        var _a, _b;
+    drawVerticalBoxplot(g, plotW, plotH) {
+        // 박스플롯 도메인은 min/max 통계 범위로 유지
         const y = d3
             .scaleLinear()
-            .domain([(_a = d3.min(values)) !== null && _a !== void 0 ? _a : 0, (_b = d3.max(values)) !== null && _b !== void 0 ? _b : 1])
-            .nice()
+            .domain([this.data[this.minKey], this.data[this.maxKey]])
             .range([plotH, 0]);
-        const boxWidth = Math.min(plotW * 0.6, 60); // 박스 너비 제한
-        const boxX = (plotW - boxWidth) / 2; // 중앙 정렬
-        // Outlier 계산
-        const iqr = this.data[this.q3Key] - this.data[this.q1Key];
-        const lowerFence = this.data[this.q1Key] - 1.5 * iqr;
-        const upperFence = this.data[this.q3Key] + 1.5 * iqr;
-        const actualMin = Math.max(this.data[this.minKey], lowerFence);
-        const actualMax = Math.min(this.data[this.maxKey], upperFence);
-        // 박스
+        // 현재값이 범위를 벗어나면 도메인 확장
+        if (this.data[this.valueKey] != null) {
+            const currentValue = this.data[this.valueKey];
+            if (currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]) {
+                const allValues = [this.data[this.minKey], this.data[this.maxKey], currentValue];
+                y.domain([Math.min(...allValues), Math.max(...allValues)]);
+            }
+        }
+        const boxWidth = Math.min(plotW * 0.6, 80);
+        const centerX = plotW / 2;
+        // 박스 (Q1 ~ Q3)
+        const boxHeight = y(this.data[this.q1Key]) - y(this.data[this.q3Key]);
         g.append('rect')
-            .attr('x', boxX)
-            .attr('y', y(Math.max(this.data[this.q1Key], this.data[this.q3Key])))
+            .attr('x', centerX - boxWidth / 2)
+            .attr('y', y(this.data[this.q3Key]))
             .attr('width', boxWidth)
-            .attr('height', Math.abs(y(this.data[this.q1Key]) - y(this.data[this.q3Key])))
-            .attr('fill', this.color)
-            .attr('opacity', 0.6)
-            .attr('stroke', '#333')
+            .attr('height', boxHeight)
+            .attr('fill', '#B3D4FC')
+            .attr('opacity', 0.8)
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // 중앙선(중앙값)
+        // 중앙선 (Median)
         g.append('line')
-            .attr('x1', boxX)
-            .attr('x2', boxX + boxWidth)
+            .attr('x1', centerX - boxWidth / 2)
+            .attr('x2', centerX + boxWidth / 2)
             .attr('y1', y(this.data[this.medianKey]))
             .attr('y2', y(this.data[this.medianKey]))
-            .attr('stroke', '#333')
-            .attr('stroke-width', 2);
-        // 수염
-        const centerX = boxX + boxWidth / 2;
+            .attr('stroke', '#7BB3F0')
+            .attr('stroke-width', 1.5);
+        // 위쪽 수염 (Q3 ~ Max)
+        g.append('line')
+            .attr('x1', centerX)
+            .attr('x2', centerX)
+            .attr('y1', y(this.data[this.q3Key]))
+            .attr('y2', y(this.data[this.maxKey]))
+            .attr('stroke', '#7BB3F0')
+            .attr('stroke-width', 1);
+        // 아래쪽 수염 (Min ~ Q1)
         g.append('line')
             .attr('x1', centerX)
             .attr('x2', centerX)
-            .attr('y1', y(actualMin))
-            .attr('y2', y(actualMax))
-            .attr('stroke', '#333')
+            .attr('y1', y(this.data[this.minKey]))
+            .attr('y2', y(this.data[this.q1Key]))
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // min/max 선
-        const capWidth = boxWidth / 3;
+        // Max 캡
+        const capWidth = boxWidth * 0.6;
         g.append('line')
             .attr('x1', centerX - capWidth / 2)
             .attr('x2', centerX + capWidth / 2)
-            .attr('y1', y(actualMin))
-            .attr('y2', y(actualMin))
-            .attr('stroke', '#333')
+            .attr('y1', y(this.data[this.maxKey]))
+            .attr('y2', y(this.data[this.maxKey]))
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
+        // Min 캡
         g.append('line')
             .attr('x1', centerX - capWidth / 2)
             .attr('x2', centerX + capWidth / 2)
-            .attr('y1', y(actualMax))
-            .attr('y2', y(actualMax))
-            .attr('stroke', '#333')
+            .attr('y1', y(this.data[this.minKey]))
+            .attr('y2', y(this.data[this.minKey]))
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // Outliers
-        if (this.data[this.minKey] < lowerFence) {
-            g.append('circle')
-                .attr('cx', centerX)
-                .attr('cy', y(this.data[this.minKey]))
-                .attr('r', 4.5)
-                .attr('fill', '#ff4444');
-        }
-        if (this.data[this.maxKey] > upperFence) {
-            g.append('circle')
-                .attr('cx', centerX)
-                .attr('cy', y(this.data[this.maxKey]))
-                .attr('r', 4.5)
-                .attr('fill', '#ff4444');
-        }
         // 현재값 (있는 경우)
         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(this.data[this.valueKey]))
+                .attr('cy', y(currentValue))
                 .attr('r', 3)
-                .attr('fill', '#ff4444');
+                .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1);
         }
     }
-    drawHorizontalBoxplot(g, plotW, plotH, values) {
-        var _a, _b;
+    drawHorizontalBoxplot(g, plotW, plotH) {
+        // 박스플롯 도메인은 min/max 통계 범위로 유지
         const x = d3
             .scaleLinear()
-            .domain([(_a = d3.min(values)) !== null && _a !== void 0 ? _a : 0, (_b = d3.max(values)) !== null && _b !== void 0 ? _b : 1])
-            .nice()
+            .domain([this.data[this.minKey], this.data[this.maxKey]])
             .range([0, plotW]);
-        const boxHeight = Math.min(plotH * 0.6, 60);
-        const boxY = (plotH - boxHeight) / 2;
-        // Outlier 계산
-        const iqr = this.data[this.q3Key] - this.data[this.q1Key];
-        const lowerFence = this.data[this.q1Key] - 1.5 * iqr;
-        const upperFence = this.data[this.q3Key] + 1.5 * iqr;
-        const actualMin = Math.max(this.data[this.minKey], lowerFence);
-        const actualMax = Math.min(this.data[this.maxKey], upperFence);
-        // 박스 (가로)
+        // 현재값이 범위를 벗어나면 도메인 확장
+        if (this.data[this.valueKey] != null) {
+            const currentValue = this.data[this.valueKey];
+            if (currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]) {
+                const allValues = [this.data[this.minKey], this.data[this.maxKey], currentValue];
+                x.domain([Math.min(...allValues), Math.max(...allValues)]);
+            }
+        }
+        const boxHeight = Math.min(plotH * 0.6, 80);
+        const centerY = plotH / 2;
+        // 박스 (Q1 ~ Q3)
+        const boxWidth = x(this.data[this.q3Key]) - x(this.data[this.q1Key]);
         g.append('rect')
-            .attr('x', x(Math.min(this.data[this.q1Key], this.data[this.q3Key])))
-            .attr('y', boxY)
-            .attr('width', Math.abs(x(this.data[this.q3Key]) - x(this.data[this.q1Key])))
+            .attr('x', x(this.data[this.q1Key]))
+            .attr('y', centerY - boxHeight / 2)
+            .attr('width', boxWidth)
             .attr('height', boxHeight)
-            .attr('fill', this.color)
-            .attr('opacity', 0.6)
-            .attr('stroke', '#333')
+            .attr('fill', '#B3D4FC')
+            .attr('opacity', 0.8)
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // 중앙선 (가로)
+        // 중앙선 (Median)
         g.append('line')
             .attr('x1', x(this.data[this.medianKey]))
             .attr('x2', x(this.data[this.medianKey]))
-            .attr('y1', boxY)
-            .attr('y2', boxY + boxHeight)
-            .attr('stroke', '#333')
-            .attr('stroke-width', 2);
-        // 수염 (가로)
-        const centerY = boxY + boxHeight / 2;
+            .attr('y1', centerY - boxHeight / 2)
+            .attr('y2', centerY + boxHeight / 2)
+            .attr('stroke', '#7BB3F0')
+            .attr('stroke-width', 1.5);
+        // 왼쪽 수염 (Min ~ Q1)
+        g.append('line')
+            .attr('x1', x(this.data[this.minKey]))
+            .attr('x2', x(this.data[this.q1Key]))
+            .attr('y1', centerY)
+            .attr('y2', centerY)
+            .attr('stroke', '#7BB3F0')
+            .attr('stroke-width', 1);
+        // 오른쪽 수염 (Q3 ~ Max)
         g.append('line')
-            .attr('x1', x(actualMin))
-            .attr('x2', x(actualMax))
+            .attr('x1', x(this.data[this.q3Key]))
+            .attr('x2', x(this.data[this.maxKey]))
             .attr('y1', centerY)
             .attr('y2', centerY)
-            .attr('stroke', '#333')
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // min/max 선 (가로)
-        const capHeight = boxHeight / 3;
+        // Min 캡
+        const capHeight = boxHeight * 0.6;
         g.append('line')
-            .attr('x1', x(actualMin))
-            .attr('x2', x(actualMin))
+            .attr('x1', x(this.data[this.minKey]))
+            .attr('x2', x(this.data[this.minKey]))
             .attr('y1', centerY - capHeight / 2)
             .attr('y2', centerY + capHeight / 2)
-            .attr('stroke', '#333')
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
+        // Max 캡
         g.append('line')
-            .attr('x1', x(actualMax))
-            .attr('x2', x(actualMax))
+            .attr('x1', x(this.data[this.maxKey]))
+            .attr('x2', x(this.data[this.maxKey]))
             .attr('y1', centerY - capHeight / 2)
             .attr('y2', centerY + capHeight / 2)
-            .attr('stroke', '#333')
+            .attr('stroke', '#7BB3F0')
             .attr('stroke-width', 1);
-        // Outliers (가로)
-        if (this.data[this.minKey] < lowerFence) {
-            g.append('circle')
-                .attr('cx', x(this.data[this.minKey]))
-                .attr('cy', centerY)
-                .attr('r', 4.5)
-                .attr('fill', '#ff4444');
-        }
-        if (this.data[this.maxKey] > upperFence) {
-            g.append('circle')
-                .attr('cx', x(this.data[this.maxKey]))
-                .attr('cy', centerY)
-                .attr('r', 4.5)
-                .attr('fill', '#ff4444');
-        }
-        // 현재값 (가로)
+        // 현재값 (있는 경우)
         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(this.data[this.valueKey]))
+                .attr('cx', x(currentValue))
                 .attr('cy', centerY)
                 .attr('r', 3)
-                .attr('fill', '#ff4444');
+                .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1);
         }
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"kpi-single-boxplot-chart.js","sourceRoot":"","sources":["../../client/components/kpi-single-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-single-boxplot-chart')\nexport class KpiSingleBoxplotChart extends LitElement {\n  @property({ type: Object }) data: any = {}\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 }) color: string = '#2196f3'\n  @property({ type: Boolean }) vertical: boolean = true // true: 세로형, 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`\n      <svg\n        id=\"single-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\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.drawSingleBoxplot()\n  }\n\n  private drawSingleBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#single-boxplot'))\n    svg.selectAll('*').remove()\n\n    // 데이터 검증\n    if (!this.data || Object.keys(this.data).length === 0) {\n      return\n    }\n\n    const w = this.chartWidth || 200\n    const h = this.chartHeight || 200\n    const margin = 20\n    const plotW = w - margin * 2\n    const plotH = h - margin * 2\n\n    // 필수 필드 검증\n    const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n    const missingFields = requiredFields.filter(field => this.data[field] == null)\n    if (missingFields.length > 0) {\n      console.warn('Missing required fields:', missingFields)\n      return\n    }\n\n    const values = [\n      this.data[this.minKey],\n      this.data[this.maxKey],\n      this.data[this.q1Key],\n      this.data[this.q3Key],\n      this.data[this.medianKey],\n      this.data[this.meanKey]\n    ]\n\n    if (this.data[this.valueKey] != null) {\n      values.push(this.data[this.valueKey])\n    }\n\n    const g = svg\n      .attr('width', w)\n      .attr('height', h)\n      .append('g')\n      .attr('transform', `translate(${margin}, ${margin})`)\n\n    if (this.vertical) {\n      // 세로형 boxplot (기본)\n      this.drawVerticalBoxplot(g, plotW, plotH, values)\n    } else {\n      // 가로형 boxplot\n      this.drawHorizontalBoxplot(g, plotW, plotH, values)\n    }\n  }\n\n  private drawVerticalBoxplot(g: any, plotW: number, plotH: number, values: number[]) {\n    const y = d3\n      .scaleLinear()\n      .domain([d3.min(values) ?? 0, d3.max(values) ?? 1])\n      .nice()\n      .range([plotH, 0])\n\n    const boxWidth = Math.min(plotW * 0.6, 60) // 박스 너비 제한\n    const boxX = (plotW - boxWidth) / 2 // 중앙 정렬\n\n    // Outlier 계산\n    const iqr = this.data[this.q3Key] - this.data[this.q1Key]\n    const lowerFence = this.data[this.q1Key] - 1.5 * iqr\n    const upperFence = this.data[this.q3Key] + 1.5 * iqr\n\n    const actualMin = Math.max(this.data[this.minKey], lowerFence)\n    const actualMax = Math.min(this.data[this.maxKey], upperFence)\n\n    // 박스\n    g.append('rect')\n      .attr('x', boxX)\n      .attr('y', y(Math.max(this.data[this.q1Key], this.data[this.q3Key])))\n      .attr('width', boxWidth)\n      .attr('height', Math.abs(y(this.data[this.q1Key]) - y(this.data[this.q3Key])))\n      .attr('fill', this.color)\n      .attr('opacity', 0.6)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // 중앙선(중앙값)\n    g.append('line')\n      .attr('x1', boxX)\n      .attr('x2', boxX + boxWidth)\n      .attr('y1', y(this.data[this.medianKey]))\n      .attr('y2', y(this.data[this.medianKey]))\n      .attr('stroke', '#333')\n      .attr('stroke-width', 2)\n\n    // 수염\n    const centerX = boxX + boxWidth / 2\n    g.append('line')\n      .attr('x1', centerX)\n      .attr('x2', centerX)\n      .attr('y1', y(actualMin))\n      .attr('y2', y(actualMax))\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // min/max 선\n    const capWidth = boxWidth / 3\n    g.append('line')\n      .attr('x1', centerX - capWidth / 2)\n      .attr('x2', centerX + capWidth / 2)\n      .attr('y1', y(actualMin))\n      .attr('y2', y(actualMin))\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    g.append('line')\n      .attr('x1', centerX - capWidth / 2)\n      .attr('x2', centerX + capWidth / 2)\n      .attr('y1', y(actualMax))\n      .attr('y2', y(actualMax))\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // Outliers\n    if (this.data[this.minKey] < lowerFence) {\n      g.append('circle')\n        .attr('cx', centerX)\n        .attr('cy', y(this.data[this.minKey]))\n        .attr('r', 4.5)\n        .attr('fill', '#ff4444')\n    }\n\n    if (this.data[this.maxKey] > upperFence) {\n      g.append('circle')\n        .attr('cx', centerX)\n        .attr('cy', y(this.data[this.maxKey]))\n        .attr('r', 4.5)\n        .attr('fill', '#ff4444')\n    }\n\n\n    // 현재값 (있는 경우)\n    if (this.data[this.valueKey] != null) {\n      g.append('circle')\n        .attr('cx', centerX)\n        .attr('cy', y(this.data[this.valueKey]))\n        .attr('r', 3)\n        .attr('fill', '#ff4444')\n    }\n  }\n\n  private drawHorizontalBoxplot(g: any, plotW: number, plotH: number, values: number[]) {\n    const x = d3\n      .scaleLinear()\n      .domain([d3.min(values) ?? 0, d3.max(values) ?? 1])\n      .nice()\n      .range([0, plotW])\n\n    const boxHeight = Math.min(plotH * 0.6, 60)\n    const boxY = (plotH - boxHeight) / 2\n\n    // Outlier 계산\n    const iqr = this.data[this.q3Key] - this.data[this.q1Key]\n    const lowerFence = this.data[this.q1Key] - 1.5 * iqr\n    const upperFence = this.data[this.q3Key] + 1.5 * iqr\n\n    const actualMin = Math.max(this.data[this.minKey], lowerFence)\n    const actualMax = Math.min(this.data[this.maxKey], upperFence)\n\n    // 박스 (가로)\n    g.append('rect')\n      .attr('x', x(Math.min(this.data[this.q1Key], this.data[this.q3Key])))\n      .attr('y', boxY)\n      .attr('width', Math.abs(x(this.data[this.q3Key]) - x(this.data[this.q1Key])))\n      .attr('height', boxHeight)\n      .attr('fill', this.color)\n      .attr('opacity', 0.6)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // 중앙선 (가로)\n    g.append('line')\n      .attr('x1', x(this.data[this.medianKey]))\n      .attr('x2', x(this.data[this.medianKey]))\n      .attr('y1', boxY)\n      .attr('y2', boxY + boxHeight)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 2)\n\n    // 수염 (가로)\n    const centerY = boxY + boxHeight / 2\n    g.append('line')\n      .attr('x1', x(actualMin))\n      .attr('x2', x(actualMax))\n      .attr('y1', centerY)\n      .attr('y2', centerY)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // min/max 선 (가로)\n    const capHeight = boxHeight / 3\n    g.append('line')\n      .attr('x1', x(actualMin))\n      .attr('x2', x(actualMin))\n      .attr('y1', centerY - capHeight / 2)\n      .attr('y2', centerY + capHeight / 2)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    g.append('line')\n      .attr('x1', x(actualMax))\n      .attr('x2', x(actualMax))\n      .attr('y1', centerY - capHeight / 2)\n      .attr('y2', centerY + capHeight / 2)\n      .attr('stroke', '#333')\n      .attr('stroke-width', 1)\n\n    // Outliers (가로)\n    if (this.data[this.minKey] < lowerFence) {\n      g.append('circle')\n        .attr('cx', x(this.data[this.minKey]))\n        .attr('cy', centerY)\n        .attr('r', 4.5)\n        .attr('fill', '#ff4444')\n    }\n\n    if (this.data[this.maxKey] > upperFence) {\n      g.append('circle')\n        .attr('cx', x(this.data[this.maxKey]))\n        .attr('cy', centerY)\n        .attr('r', 4.5)\n        .attr('fill', '#ff4444')\n    }\n\n\n    // 현재값 (가로)\n    if (this.data[this.valueKey] != null) {\n      g.append('circle')\n        .attr('cx', x(this.data[this.valueKey]))\n        .attr('cy', centerY)\n        .attr('r', 3)\n        .attr('fill', '#ff4444')\n    }\n  }\n}"]}
+{"version":3,"file":"kpi-single-boxplot-chart.js","sourceRoot":"","sources":["../../client/components/kpi-single-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-single-boxplot-chart')\nexport class KpiSingleBoxplotChart extends LitElement {\n  @property({ type: Object }) data: any = {}\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 }) color: string = '#2196f3'\n  @property({ type: Boolean }) vertical: boolean = true // true: 세로형, 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`\n      <svg\n        id=\"single-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\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.drawSingleBoxplot()\n  }\n\n  private drawSingleBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#single-boxplot'))\n    svg.selectAll('*').remove()\n\n    // 데이터 검증\n    if (!this.data || Object.keys(this.data).length === 0) {\n      return\n    }\n\n    const w = this.chartWidth || 200\n    const h = this.chartHeight || 200\n    const margin = 20\n    const plotW = w - margin * 2\n    const plotH = h - margin * 2\n\n    // 필수 필드 검증\n    const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n    const missingFields = requiredFields.filter(field => this.data[field] == null)\n    if (missingFields.length > 0) {\n      console.warn('Missing required fields:', missingFields)\n      return\n    }\n\n    const values = [\n      this.data[this.minKey],\n      this.data[this.maxKey],\n      this.data[this.q1Key],\n      this.data[this.q3Key],\n      this.data[this.medianKey],\n      this.data[this.meanKey]\n    ]\n\n    if (this.data[this.valueKey] != null) {\n      values.push(this.data[this.valueKey])\n    }\n\n    const g = svg\n      .attr('width', w)\n      .attr('height', h)\n      .append('g')\n      .attr('transform', `translate(${margin}, ${margin})`)\n\n    if (this.vertical) {\n      // 세로형 boxplot (기본)\n      this.drawVerticalBoxplot(g, plotW, plotH)\n    } else {\n      // 가로형 boxplot\n      this.drawHorizontalBoxplot(g, plotW, plotH)\n    }\n  }\n\n  private drawVerticalBoxplot(g: any, plotW: number, plotH: number) {\n    // 박스플롯 도메인은 min/max 통계 범위로 유지\n    const y = d3\n      .scaleLinear()\n      .domain([this.data[this.minKey], this.data[this.maxKey]])\n      .range([plotH, 0])\n\n    // 현재값이 범위를 벗어나면 도메인 확장\n    if (this.data[this.valueKey] != null) {\n      const currentValue = this.data[this.valueKey]\n      if (currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]) {\n        const allValues = [this.data[this.minKey], this.data[this.maxKey], currentValue]\n        y.domain([Math.min(...allValues), Math.max(...allValues)])\n      }\n    }\n\n    const boxWidth = Math.min(plotW * 0.6, 80)\n    const centerX = plotW / 2\n\n    // 박스 (Q1 ~ Q3)\n    const boxHeight = y(this.data[this.q1Key]) - y(this.data[this.q3Key])\n    g.append('rect')\n      .attr('x', centerX - boxWidth / 2)\n      .attr('y', y(this.data[this.q3Key]))\n      .attr('width', boxWidth)\n      .attr('height', boxHeight)\n      .attr('fill', '#B3D4FC')\n      .attr('opacity', 0.8)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 중앙선 (Median)\n    g.append('line')\n      .attr('x1', centerX - boxWidth / 2)\n      .attr('x2', centerX + boxWidth / 2)\n      .attr('y1', y(this.data[this.medianKey]))\n      .attr('y2', y(this.data[this.medianKey]))\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1.5)\n\n    // 위쪽 수염 (Q3 ~ Max)\n    g.append('line')\n      .attr('x1', centerX)\n      .attr('x2', centerX)\n      .attr('y1', y(this.data[this.q3Key]))\n      .attr('y2', y(this.data[this.maxKey]))\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 아래쪽 수염 (Min ~ Q1)\n    g.append('line')\n      .attr('x1', centerX)\n      .attr('x2', centerX)\n      .attr('y1', y(this.data[this.minKey]))\n      .attr('y2', y(this.data[this.q1Key]))\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // Max 캡\n    const capWidth = boxWidth * 0.6\n    g.append('line')\n      .attr('x1', centerX - capWidth / 2)\n      .attr('x2', centerX + capWidth / 2)\n      .attr('y1', y(this.data[this.maxKey]))\n      .attr('y2', y(this.data[this.maxKey]))\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // Min 캡\n    g.append('line')\n      .attr('x1', centerX - capWidth / 2)\n      .attr('x2', centerX + capWidth / 2)\n      .attr('y1', y(this.data[this.minKey]))\n      .attr('y2', y(this.data[this.minKey]))\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 현재값 (있는 경우)\n    if (this.data[this.valueKey] != null) {\n      const currentValue = this.data[this.valueKey]\n      const isOutlier = currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]\n\n      g.append('circle')\n        .attr('cx', centerX)\n        .attr('cy', y(currentValue))\n        .attr('r', 3)\n        .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')\n        .attr('stroke', '#fff')\n        .attr('stroke-width', 1)\n    }\n  }\n\n  private drawHorizontalBoxplot(g: any, plotW: number, plotH: number) {\n    // 박스플롯 도메인은 min/max 통계 범위로 유지\n    const x = d3\n      .scaleLinear()\n      .domain([this.data[this.minKey], this.data[this.maxKey]])\n      .range([0, plotW])\n\n    // 현재값이 범위를 벗어나면 도메인 확장\n    if (this.data[this.valueKey] != null) {\n      const currentValue = this.data[this.valueKey]\n      if (currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]) {\n        const allValues = [this.data[this.minKey], this.data[this.maxKey], currentValue]\n        x.domain([Math.min(...allValues), Math.max(...allValues)])\n      }\n    }\n\n    const boxHeight = Math.min(plotH * 0.6, 80)\n    const centerY = plotH / 2\n\n    // 박스 (Q1 ~ Q3)\n    const boxWidth = x(this.data[this.q3Key]) - x(this.data[this.q1Key])\n    g.append('rect')\n      .attr('x', x(this.data[this.q1Key]))\n      .attr('y', centerY - boxHeight / 2)\n      .attr('width', boxWidth)\n      .attr('height', boxHeight)\n      .attr('fill', '#B3D4FC')\n      .attr('opacity', 0.8)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 중앙선 (Median)\n    g.append('line')\n      .attr('x1', x(this.data[this.medianKey]))\n      .attr('x2', x(this.data[this.medianKey]))\n      .attr('y1', centerY - boxHeight / 2)\n      .attr('y2', centerY + boxHeight / 2)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1.5)\n\n    // 왼쪽 수염 (Min ~ Q1)\n    g.append('line')\n      .attr('x1', x(this.data[this.minKey]))\n      .attr('x2', x(this.data[this.q1Key]))\n      .attr('y1', centerY)\n      .attr('y2', centerY)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 오른쪽 수염 (Q3 ~ Max)\n    g.append('line')\n      .attr('x1', x(this.data[this.q3Key]))\n      .attr('x2', x(this.data[this.maxKey]))\n      .attr('y1', centerY)\n      .attr('y2', centerY)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // Min 캡\n    const capHeight = boxHeight * 0.6\n    g.append('line')\n      .attr('x1', x(this.data[this.minKey]))\n      .attr('x2', x(this.data[this.minKey]))\n      .attr('y1', centerY - capHeight / 2)\n      .attr('y2', centerY + capHeight / 2)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // Max 캡\n    g.append('line')\n      .attr('x1', x(this.data[this.maxKey]))\n      .attr('x2', x(this.data[this.maxKey]))\n      .attr('y1', centerY - capHeight / 2)\n      .attr('y2', centerY + capHeight / 2)\n      .attr('stroke', '#7BB3F0')\n      .attr('stroke-width', 1)\n\n    // 현재값 (있는 경우)\n    if (this.data[this.valueKey] != null) {\n      const currentValue = this.data[this.valueKey]\n      const isOutlier = currentValue < this.data[this.minKey] || currentValue > this.data[this.maxKey]\n\n      g.append('circle')\n        .attr('cx', x(currentValue))\n        .attr('cy', centerY)\n        .attr('r', 3)\n        .attr('fill', isOutlier ? '#ff4444' : '#4CAF50')\n        .attr('stroke', '#fff')\n        .attr('stroke-width', 1)\n    }\n  }\n}"]}

package/dist-client/pages/sv-project-completed-list.d.ts

@@ -12,13 +12,16 @@ export declare class SvProjectCompletedListPage extends SvProjectCompletedListPa
     private projectList;
     private projectCount;
     private currentPage;
+    private kpiBoxPlotStats;
     private readonly pageLimit;
     get totalPages(): number;
     render(): import("lit-html").TemplateResult<1>;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
     getProjectList(): Promise<void>;
+    getKpiBoxPlotStats(): Promise<void>;
     private _onInputChange;
     private _onKeypress;
     private _changePage;
+    private getBoxPlotDataForProject;
 }
 export {};