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

package/dist-client/components/kpi-boxplot-chart.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-export declare class KpiBoxplotChart extends LitElement {
+export declare class SvKpiBoxplotChart extends LitElement {
     data: any[];
     groups: string[];
     minKey: string;

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import * as d3 from 'd3';
-let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
+let SvKpiBoxplotChart = class SvKpiBoxplotChart extends LitElement {
     constructor() {
         super(...arguments);
         this.data = [];
@@ -201,7 +201,7 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
         // 현재 그룹 값 강조는 이미 위에서 처리되므로 제거
     }
 };
-KpiBoxplotChart.styles = css `
+SvKpiBoxplotChart.styles = css `
     :host {
       display: block;
       width: 100%;
@@ -216,49 +216,49 @@ KpiBoxplotChart.styles = css `
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], KpiBoxplotChart.prototype, "data", void 0);
+], SvKpiBoxplotChart.prototype, "data", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], KpiBoxplotChart.prototype, "groups", void 0);
+], SvKpiBoxplotChart.prototype, "groups", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "minKey", void 0);
+], SvKpiBoxplotChart.prototype, "minKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "maxKey", void 0);
+], SvKpiBoxplotChart.prototype, "maxKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "meanKey", void 0);
+], SvKpiBoxplotChart.prototype, "meanKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "medianKey", void 0);
+], SvKpiBoxplotChart.prototype, "medianKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "q1Key", void 0);
+], SvKpiBoxplotChart.prototype, "q1Key", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "q3Key", void 0);
+], SvKpiBoxplotChart.prototype, "q3Key", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "valueKey", void 0);
+], SvKpiBoxplotChart.prototype, "valueKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiBoxplotChart.prototype, "currentGroup", void 0);
+], SvKpiBoxplotChart.prototype, "currentGroup", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
-], KpiBoxplotChart.prototype, "independentScale", void 0);
-KpiBoxplotChart = __decorate([
-    customElement('kpi-boxplot-chart')
-], KpiBoxplotChart);
-export { KpiBoxplotChart };
+], SvKpiBoxplotChart.prototype, "independentScale", void 0);
+SvKpiBoxplotChart = __decorate([
+    customElement('sv-kpi-boxplot-chart')
+], SvKpiBoxplotChart);
+export { SvKpiBoxplotChart };
 //# sourceMappingURL=kpi-boxplot-chart.js.map

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

@@ -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 =\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      // 수염은 단순히 실제 min/max\n      const actualMin = groupData[this.minKey]\n      const actualMax = groupData[this.maxKey]\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      // 평균값 (녹색)\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        const currentValue = groupData[this.valueKey]\n        // 단순하게: 현재 값이 min/max 범위를 벗어나면 아웃라이어\n        const isOutlier = currentValue < groupData[this.minKey] || currentValue > groupData[this.maxKey]\n\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(currentValue))\n          .attr('r', 3) // 현재 프로젝트 값은 조금 더 크게\n          .attr('fill', isOutlier ? '#ff4444' : '#ff9800') // 아웃라이어면 빨간색, 정상이면 오렌지색\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 1)\n      }\n    })\n    // 현재 그룹 값 강조는 이미 위에서 처리되므로 제거\n  }\n}\n"]}
+{"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('sv-kpi-boxplot-chart')\nexport class SvKpiBoxplotChart 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      // 수염은 단순히 실제 min/max\n      const actualMin = groupData[this.minKey]\n      const actualMax = groupData[this.maxKey]\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      // 평균값 (녹색)\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        const currentValue = groupData[this.valueKey]\n        // 단순하게: 현재 값이 min/max 범위를 벗어나면 아웃라이어\n        const isOutlier = currentValue < groupData[this.minKey] || currentValue > groupData[this.maxKey]\n\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(currentValue))\n          .attr('r', 3) // 현재 프로젝트 값은 조금 더 크게\n          .attr('fill', isOutlier ? '#ff4444' : '#ff9800') // 아웃라이어면 빨간색, 정상이면 오렌지색\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 1)\n      }\n    })\n    // 현재 그룹 값 강조는 이미 위에서 처리되므로 제거\n  }\n}\n"]}

package/dist-client/components/kpi-lookup-chart.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+interface Grade {
+    name: string;
+    minValue: number;
+    maxValue: number;
+    score?: number;
+    color?: string;
+    description?: string;
+}
+export declare class KpiLookupChart extends LitElement {
+    grades: Grade[];
+    value: number | null;
+    unit: string;
+    kpiName: string;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private renderChart;
+    private drawHeader;
+    private drawChart;
+    private drawEmptyState;
+    private getDefaultColor;
+}
+export {};

package/dist-client/components/kpi-lookup-chart.js

@@ -0,0 +1,434 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiLookupChart = class KpiLookupChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.grades = [];
+        this.value = null;
+        this.unit = '';
+        this.kpiName = '';
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    render() {
+        return html `
+      <svg
+        id="lookup-chart"
+        width=${this.chartWidth}
+        height=${this.chartHeight}
+        viewBox="0 0 ${this.chartWidth} ${this.chartHeight}"
+        preserveAspectRatio="xMidYMid meet"
+      ></svg>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const rect = entry.contentRect;
+                this.chartWidth = rect.width;
+                this.chartHeight = rect.height;
+                this.requestUpdate();
+            }
+        });
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.renderChart();
+    }
+    renderChart() {
+        const svg = d3.select(this.renderRoot.querySelector('#lookup-chart'));
+        svg.selectAll('*').remove();
+        // 데이터 검증
+        if (!this.grades || this.grades.length === 0) {
+            this.drawEmptyState(svg);
+            return;
+        }
+        const w = this.chartWidth || 400;
+        const h = this.chartHeight || 200;
+        const margin = { top: 40, right: 30, bottom: 50, left: 60 };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        // 제목
+        if (this.kpiName) {
+            svg
+                .append('text')
+                .attr('class', 'chart-title')
+                .attr('x', w / 2)
+                .attr('y', 15)
+                .attr('text-anchor', 'middle')
+                .text(this.kpiName);
+        }
+        // KPI Value와 Score를 차트 상단에 표시
+        this.drawHeader(svg, w);
+        // grades를 정렬 (minValue 기준)
+        const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue);
+        this.drawChart(g, svg, sortedGrades, plotW, plotH, w);
+    }
+    drawHeader(svg, chartWidth) {
+        const headerY = 30;
+        // KPI Value 표시
+        if (this.value !== null && this.value !== undefined) {
+            svg
+                .append('text')
+                .attr('class', 'value-label')
+                .attr('x', 10)
+                .attr('y', headerY)
+                .attr('font-size', '12px')
+                .attr('font-weight', 'bold')
+                .text(`KPI Value: ${this.value.toFixed(2)}${this.unit}`);
+        }
+        else {
+            svg
+                .append('text')
+                .attr('class', 'value-label')
+                .attr('x', 10)
+                .attr('y', headerY)
+                .attr('font-size', '12px')
+                .attr('font-weight', 'bold')
+                .attr('fill', '#999')
+                .text(`KPI Value: N/A`);
+        }
+        // KPI Score 표시
+        if (this.value !== null && this.value !== undefined) {
+            // grades를 정렬
+            const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue);
+            // grades를 범위로 변환
+            const gradeRanges = sortedGrades.map((grade, index) => {
+                let min, max;
+                if (grade.minValue === grade.maxValue) {
+                    min = index === 0 ? 0 : (sortedGrades[index - 1].maxValue || 0);
+                    max = grade.maxValue;
+                }
+                else {
+                    min = grade.minValue;
+                    max = grade.maxValue;
+                }
+                return Object.assign(Object.assign({}, grade), { actualMin: min, actualMax: max });
+            });
+            // 마지막 grade인지 확인
+            const isLastGrade = (idx) => idx === gradeRanges.length - 1;
+            // 해당 value가 속한 grade 찾기
+            let matchedGradeRange = gradeRanges.find((g, idx) => {
+                if (isLastGrade(idx)) {
+                    return this.value >= g.actualMin;
+                }
+                return this.value >= g.actualMin && this.value <= g.actualMax;
+            });
+            const kpiScore = matchedGradeRange === null || matchedGradeRange === void 0 ? void 0 : matchedGradeRange.score;
+            // KPI Score 표시
+            if (kpiScore !== undefined && kpiScore !== null) {
+                svg
+                    .append('text')
+                    .attr('class', 'value-label')
+                    .attr('x', chartWidth / 2)
+                    .attr('y', headerY)
+                    .attr('font-size', '12px')
+                    .attr('font-weight', 'bold')
+                    .attr('text-anchor', 'middle')
+                    .text(`KPI Score: ${kpiScore.toFixed(2)}`);
+            }
+            else {
+                svg
+                    .append('text')
+                    .attr('class', 'value-label')
+                    .attr('x', chartWidth / 2)
+                    .attr('y', headerY)
+                    .attr('font-size', '12px')
+                    .attr('font-weight', 'bold')
+                    .attr('text-anchor', 'middle')
+                    .attr('fill', '#ff0000')
+                    .text(`KPI Score: 범위를 찾을 수 없음`);
+            }
+        }
+        else {
+            // value가 없을 때 KPI Score N/A 표시
+            svg
+                .append('text')
+                .attr('class', 'value-label')
+                .attr('x', chartWidth / 2)
+                .attr('y', headerY)
+                .attr('font-size', '12px')
+                .attr('font-weight', 'bold')
+                .attr('text-anchor', 'middle')
+                .attr('fill', '#999')
+                .text(`KPI Score: N/A`);
+        }
+    }
+    drawChart(g, svg, grades, width, height, chartWidth) {
+        console.log('drawVerticalChart - Original grades:', grades);
+        console.log('drawVerticalChart - Current value:', this.value);
+        // grades를 범위로 변환 (minValue == maxValue인 경우, 이전 값부터 현재 값까지를 범위로 간주)
+        const gradeRanges = grades.map((grade, index) => {
+            let min, max;
+            if (grade.minValue === grade.maxValue) {
+                // Point 값인 경우: 이전 grade의 max ~ 현재 grade의 value
+                min = index === 0 ? 0 : (grades[index - 1].maxValue || 0);
+                max = grade.maxValue;
+            }
+            else {
+                // Range 값인 경우: 그대로 사용
+                min = grade.minValue;
+                max = grade.maxValue;
+            }
+            return Object.assign(Object.assign({}, grade), { actualMin: min, actualMax: max });
+        });
+        console.log('drawVerticalChart - Grade ranges:', gradeRanges);
+        // Y축 스케일 (value 범위)
+        // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 "이상"으로 표시)
+        const allValues = gradeRanges
+            .slice(0, -1) // 마지막 제외
+            .flatMap(g => [g.actualMin, g.actualMax]);
+        // 마지막 grade의 min도 포함
+        if (gradeRanges.length > 0) {
+            allValues.push(gradeRanges[gradeRanges.length - 1].actualMin);
+        }
+        const minVal = allValues.length > 0 ? Math.min(...allValues, 0) : 0;
+        const maxVal = allValues.length > 0 ? Math.max(...allValues) : 100;
+        console.log('drawVerticalChart - Scaled min/max:', minVal, maxVal);
+        // 현재 value가 있으면 범위에 포함
+        let displayMax = maxVal;
+        if (this.value !== null && this.value !== undefined) {
+            displayMax = Math.max(maxVal, this.value);
+        }
+        const yScale = d3.scaleLinear().domain([minVal, displayMax]).range([height, 0]).nice();
+        // X축 스케일 (score 범위)
+        const barWidth = width / grades.length;
+        const isManyGrades = grades.length > 10; // 10개 이상이면 "많은 경우"로 간주
+        // 각 grade별로 영역과 라인 그리기
+        const isLastGrade = (idx) => idx === gradeRanges.length - 1;
+        gradeRanges.forEach((grade, index) => {
+            // 마지막 grade는 "infinity"로 간주하고 차트 상단까지 표시
+            const minValue = grade.actualMin;
+            const maxValue = grade.actualMax;
+            const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue;
+            const yMin = yScale(minValue);
+            const yMax = yScale(effectiveMaxValue);
+            const xCenter = index * barWidth + barWidth / 2;
+            // 배경 영역 (매우 연한 색상)
+            g.append('rect')
+                .attr('x', index * barWidth)
+                .attr('y', yMax)
+                .attr('width', barWidth)
+                .attr('height', yMin - yMax)
+                .attr('fill', grade.color || this.getDefaultColor(index))
+                .attr('opacity', 0.1);
+            // 수평선으로 grade 경계 표시
+            // 하한선
+            g.append('line')
+                .attr('x1', index * barWidth)
+                .attr('x2', (index + 1) * barWidth)
+                .attr('y1', yMin)
+                .attr('y2', yMin)
+                .attr('stroke', grade.color || this.getDefaultColor(index))
+                .attr('stroke-width', 2);
+            // 상한선 (마지막 grade가 아닌 경우)
+            if (!isLastGrade(index)) {
+                g.append('line')
+                    .attr('x1', index * barWidth)
+                    .attr('x2', (index + 1) * barWidth)
+                    .attr('y1', yMax)
+                    .attr('y2', yMax)
+                    .attr('stroke', grade.color || this.getDefaultColor(index))
+                    .attr('stroke-width', 2)
+                    .attr('stroke-dasharray', '3,3');
+            }
+            // Grade가 많은 경우: 라벨을 표시하지 않음
+            if (!isManyGrades) {
+                // Grade 라벨
+                g.append('text')
+                    .attr('class', 'grade-label')
+                    .attr('x', xCenter)
+                    .attr('y', (yMin + yMax) / 2 + 4)
+                    .attr('text-anchor', 'middle')
+                    .text(grade.name);
+                // Score 라벨 (score가 있을 경우만 표시)
+                if (grade.score !== undefined && grade.score !== null) {
+                    g.append('text')
+                        .attr('class', 'grade-label')
+                        .attr('x', xCenter)
+                        .attr('y', height + 20)
+                        .attr('text-anchor', 'middle')
+                        .text(`Score: ${grade.score.toFixed(2)}`);
+                }
+                // Value range 라벨 (마지막 grade인 경우 "이상" 표시)
+                const rangeText = isLastGrade(index)
+                    ? `${minValue.toFixed(1)}${this.unit} 이상`
+                    : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`;
+                g.append('text')
+                    .attr('class', 'axis-label')
+                    .attr('x', xCenter)
+                    .attr('y', height + 35)
+                    .attr('text-anchor', 'middle')
+                    .text(rangeText);
+            }
+        });
+        // Y축 그리기
+        const yAxis = d3.axisLeft(yScale).ticks(5);
+        g.append('g').call(yAxis);
+        // Y축 라벨 (KPI Value)
+        g.append('text')
+            .attr('class', 'axis-label')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -height / 2)
+            .attr('y', -45)
+            .attr('text-anchor', 'middle')
+            .text('KPI Value');
+        // X축 라인 그리기
+        g.append('line')
+            .attr('x1', 0)
+            .attr('x2', width)
+            .attr('y1', height)
+            .attr('y2', height)
+            .attr('stroke', '#999')
+            .attr('stroke-width', 1);
+        // X축 그리기 (Grade가 많은 경우 적절히 스킵)
+        if (isManyGrades) {
+            // Grade가 많은 경우: 적절한 간격으로 라벨 표시
+            const tickInterval = Math.ceil(grades.length / 10); // 최대 10개 정도만 표시
+            gradeRanges.forEach((grade, index) => {
+                if (index % tickInterval === 0 || index === gradeRanges.length - 1) {
+                    const tickX = index * barWidth + barWidth / 2;
+                    let label = '';
+                    if (grade.score !== undefined && grade.score !== null) {
+                        label = `${grade.score.toFixed(1)}`;
+                    }
+                    else {
+                        // score가 없으면 범위 표시
+                        const gradeIdx = gradeRanges.indexOf(grade);
+                        label = isLastGrade(gradeIdx) ? `${grade.actualMin.toFixed(0)} 이상` : `${grade.actualMax.toFixed(0)}`;
+                    }
+                    g.append('text')
+                        .attr('class', 'axis-label')
+                        .attr('x', tickX)
+                        .attr('y', height + 20)
+                        .attr('text-anchor', 'middle')
+                        .text(label);
+                }
+            });
+        }
+        // X축 라벨 (KPI Score)
+        g.append('text')
+            .attr('class', 'axis-label')
+            .attr('x', width / 2)
+            .attr('y', height + 50)
+            .attr('text-anchor', 'middle')
+            .attr('font-weight', 'bold')
+            .text('KPI Score');
+        // 현재 value가 있을 때만 차트에 포인터 표시
+        if (this.value !== null && this.value !== undefined) {
+            // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)
+            // 마지막 grade는 "이상"이므로 actualMin 이상만 체크
+            let matchedGradeRange = gradeRanges.find((g, idx) => {
+                if (isLastGrade(idx)) {
+                    return this.value >= g.actualMin;
+                }
+                return this.value >= g.actualMin && this.value <= g.actualMax;
+            });
+            // 범위를 찾은 경우에만 차트에 포인터 표시
+            if (matchedGradeRange) {
+                const valueY = yScale(this.value);
+                const gradeIndex = gradeRanges.indexOf(matchedGradeRange);
+                const valueX = gradeIndex * barWidth + barWidth / 2;
+                console.log('Current value:', this.value, 'valueY:', valueY);
+                console.log('Grade index:', gradeIndex, 'valueX:', valueX);
+                // 현재 값 포인터
+                g.append('circle')
+                    .attr('cx', valueX)
+                    .attr('cy', valueY)
+                    .attr('r', 6)
+                    .attr('fill', '#e53935')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 2);
+                // Grade가 많은 경우: 현재 값의 grade 정보도 표시
+                if (isManyGrades) {
+                    const matchedGradeIdx = gradeRanges.indexOf(matchedGradeRange);
+                    const rangeText = isLastGrade(matchedGradeIdx)
+                        ? `${matchedGradeRange.actualMin.toFixed(1)}${this.unit} 이상`
+                        : `${matchedGradeRange.actualMin.toFixed(1)}-${matchedGradeRange.actualMax.toFixed(1)}${this.unit}`;
+                    g.append('text')
+                        .attr('class', 'axis-label')
+                        .attr('x', valueX)
+                        .attr('y', height + 35)
+                        .attr('text-anchor', 'middle')
+                        .attr('fill', '#e53935')
+                        .text(rangeText);
+                }
+            }
+        }
+    }
+    drawEmptyState(svg) {
+        svg
+            .append('text')
+            .attr('x', this.chartWidth / 2)
+            .attr('y', this.chartHeight / 2)
+            .attr('text-anchor', 'middle')
+            .attr('fill', '#999')
+            .attr('font-size', '14px')
+            .text('No grade data available');
+    }
+    getDefaultColor(index) {
+        const colors = ['#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
+        return colors[index % colors.length];
+    }
+};
+KpiLookupChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .chart-title {
+      font-size: 14px;
+      font-weight: 600;
+      fill: #333;
+    }
+    .grade-label {
+      font-size: 11px;
+      fill: #666;
+    }
+    .value-label {
+      font-size: 12px;
+      font-weight: 600;
+      fill: #e53935;
+    }
+    .axis-label {
+      font-size: 11px;
+      fill: #999;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiLookupChart.prototype, "grades", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], KpiLookupChart.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiLookupChart.prototype, "unit", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiLookupChart.prototype, "kpiName", void 0);
+KpiLookupChart = __decorate([
+    customElement('kpi-lookup-chart')
+], KpiLookupChart);
+export { KpiLookupChart };
+//# sourceMappingURL=kpi-lookup-chart.js.map