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

package/dist-client/components/kpi-mini-trend-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-mini-trend-chart.js","sourceRoot":"","sources":["../../client/components/kpi-mini-trend-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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACsB,SAAI,GAAa,EAAE,CAAA;QAClB,UAAK,GAAW,EAAE,CAAA;QAClB,WAAM,GAAW,EAAE,CAAA;QACnB,cAAS,GAAW,SAAS,CAAA;QAC7B,gBAAW,GAAW,GAAG,CAAA;QACxB,eAAU,GAAY,IAAI,CAAA;QAC3B,gBAAW,GAAW,GAAG,CAAA;IAgHvD,CAAC;IAjFC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,KAAK;mBACT,IAAI,CAAC,MAAM;yBACL,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;;;;KAI7C,CAAA;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAEhD,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAA;QACnE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAE3B,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;QACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAA;QACrD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;QAEvD,SAAS;QACT,MAAM,MAAM,GAAG,EAAE;aACd,WAAW,EAAE;aACb,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACjC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAA;QAEpB,MAAM,MAAM,GAAG,EAAE;aACd,WAAW,EAAE;aACb,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;aACrC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QAErB,SAAS;QACT,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QACzD,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAEtF,SAAS;QACT,MAAM,IAAI,GAAG,EAAE;aACZ,IAAI,EAAU;aACd,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aACtB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aACjB,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAA;QAE3B,aAAa;QACb,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;aAChB,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;aAC3B,IAAI,CAAC,GAAG,EAAE,IAAW,CAAC;aACtB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC;aAC9B,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAEzC,+BAA+B;QAC/B,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5C,WAAW;YACX,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACf,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;iBAC3B,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;iBACrB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;iBAChC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC;iBAC3B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;YAExB,UAAU;YACV,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;qBAC3B,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACxC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;qBACnD,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC;qBAC3B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;qBACzB,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;YAC1B,CAAC;QACH,CAAC;IACH,CAAC;;AA7GM,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BZ;AAnC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;iDAAoB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAA0B;AACxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;uDAA2B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAA0B;AAP1C,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CAuH/B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-mini-trend-chart')\nexport class SvKpiMiniTrendChart extends LitElement {\n  @property({ type: Array }) data: number[] = []\n  @property({ type: Number }) width: number = 60\n  @property({ type: Number }) height: number = 30\n  @property({ type: String }) lineColor: string = '#2196f3'\n  @property({ type: Number }) strokeWidth: number = 1.5\n  @property({ type: Boolean }) showPoints: boolean = true\n  @property({ type: Number }) pointRadius: number = 1.5\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .mini-chart {\n      width: 100%;\n      height: 100%;\n      background: #f8f9fa;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .trend-line {\n      fill: none;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .data-point {\n      fill: white;\n      stroke-width: 1;\n    }\n  `\n\n  render() {\n    return html`\n      <div class=\"mini-chart\">\n        <svg\n          id=\"mini-trend\"\n          width=${this.width}\n          height=${this.height}\n          viewBox=\"0 0 ${this.width} ${this.height}\"\n          preserveAspectRatio=\"xMidYMid meet\"\n        ></svg>\n      </div>\n    `\n  }\n\n  updated() {\n    this.drawMiniTrend()\n  }\n\n  drawMiniTrend() {\n    if (!this.data || this.data.length === 0) return\n\n    const svg = d3.select(this.renderRoot.querySelector('#mini-trend'))\n    svg.selectAll('*').remove()\n\n    const margin = { top: 2, right: 2, bottom: 2, left: 2 }\n    const width = this.width - margin.left - margin.right\n    const height = this.height - margin.top - margin.bottom\n\n    // 스케일 설정\n    const xScale = d3\n      .scaleLinear()\n      .domain([0, this.data.length - 1])\n      .range([0, width])\n\n    const yScale = d3\n      .scaleLinear()\n      .domain([0, d3.max(this.data) || 100])\n      .range([height, 0])\n\n    // SVG 설정\n    svg.attr('width', this.width).attr('height', this.height)\n    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 라인 생성기\n    const line = d3\n      .line<number>()\n      .x((d, i) => xScale(i))\n      .y(d => yScale(d))\n      .curve(d3.curveMonotoneX)\n\n    // 트렌드 라인 그리기\n    g.append('path')\n      .datum(this.data)\n      .attr('class', 'trend-line')\n      .attr('d', line as any)\n      .attr('stroke', this.lineColor)\n      .attr('stroke-width', this.strokeWidth)\n\n    // 데이터 포인트 그리기 (첫 번째와 마지막 포인트만)\n    if (this.showPoints && this.data.length > 0) {\n      // 첫 번째 포인트\n      g.append('circle')\n        .attr('class', 'data-point')\n        .attr('cx', xScale(0))\n        .attr('cy', yScale(this.data[0]))\n        .attr('r', this.pointRadius)\n        .attr('stroke', '#4caf50')\n        .attr('fill', 'white')\n\n      // 마지막 포인트\n      if (this.data.length > 1) {\n        g.append('circle')\n          .attr('class', 'data-point')\n          .attr('cx', xScale(this.data.length - 1))\n          .attr('cy', yScale(this.data[this.data.length - 1]))\n          .attr('r', this.pointRadius)\n          .attr('stroke', '#2196f3')\n          .attr('fill', 'white')\n      }\n    }\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-export declare class KpiRadarChart extends LitElement {
+export declare class SvKpiRadarChart extends LitElement {
     data: any[];
     categories: string[];
     valueKey: string;

package/dist-client/components/kpi-radar-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 KpiRadarChart = class KpiRadarChart extends LitElement {
+let SvKpiRadarChart = class SvKpiRadarChart extends LitElement {
     constructor() {
         super(...arguments);
         this.data = [];
@@ -50,12 +50,6 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
         svg.selectAll('*').remove();
         const w = this.chartWidth || 300;
         const h = this.chartHeight || 300;
-        // 레전드를 위한 공간 확보 (오른쪽에 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
             .groups(this.data, d => d.org)
@@ -66,18 +60,36 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
                 return { category: cat, value: found ? found[this.valueKey] : 0 };
             })
         }));
-        // 스케일
-        const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1;
+        // 레전드를 위한 공간 확보 (org가 2개 이상일 때만)
+        const legendWidth = orgData.length > 1 ? 120 : 0;
+        const chartWidth = w - legendWidth;
+        const chartHeight = h;
+        const r = Math.min(chartWidth, chartHeight) / 2 - 40;
+        const angleSlice = (2 * Math.PI) / (this.categories.length || 1);
+        // 스케일 - 0-100 고정 범위 사용 (박스플롯과 동일한 범위)
+        const dataMaxValue = d3.max(this.data, d => d[this.valueKey]) || 1;
+        const maxValue = Math.max(100, dataMaxValue); // 최소 100까지 표시
         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(${chartWidth / 2},${chartHeight / 2})`);
         // 그리드/축
         for (let i = 1; i <= 5; i++) {
-            g.append('circle')
-                .attr('r', (r / 5) * i)
-                .attr('fill', 'none')
-                .attr('stroke', '#ccc');
+            const gridRadius = (r / 5) * i;
+            const gridValue = (maxValue / 5) * i;
+            g.append('circle').attr('r', gridRadius).attr('fill', 'none').attr('stroke', '#ccc');
+            // 그리드 값 라벨 (30도 시계방향 = Y1에서 30도 회전)
+            // 차트가 위쪽에서 시작하므로 -90도 + 30도 = -60도
+            const labelAngle = (-60 * Math.PI) / 180;
+            g.append('text')
+                .attr('x', gridRadius * Math.cos(labelAngle))
+                .attr('y', gridRadius * Math.sin(labelAngle))
+                .attr('text-anchor', 'middle')
+                .attr('alignment-baseline', 'middle')
+                .attr('font-size', 10)
+                .attr('fill', '#999')
+                .attr('background', '#fff')
+                .text(gridValue.toFixed(0));
         }
         this.categories.forEach((cat, i) => {
             const angle = i * angleSlice - Math.PI / 2;
@@ -144,41 +156,47 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
                     .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);
+        // 레전드 추가 (org가 2개 이상일 때만)
+        if (orgData.length > 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 `
+SvKpiRadarChart.styles = css `
     :host {
       display: block;
       width: 100%;
@@ -193,25 +211,25 @@ KpiRadarChart.styles = css `
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], KpiRadarChart.prototype, "data", void 0);
+], SvKpiRadarChart.prototype, "data", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], KpiRadarChart.prototype, "categories", void 0);
+], SvKpiRadarChart.prototype, "categories", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiRadarChart.prototype, "valueKey", void 0);
+], SvKpiRadarChart.prototype, "valueKey", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], KpiRadarChart.prototype, "currentGroup", void 0);
+], SvKpiRadarChart.prototype, "currentGroup", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
-], KpiRadarChart.prototype, "seriesColors", void 0);
-KpiRadarChart = __decorate([
-    customElement('kpi-radar-chart')
-], KpiRadarChart);
-export { KpiRadarChart };
+], SvKpiRadarChart.prototype, "seriesColors", void 0);
+SvKpiRadarChart = __decorate([
+    customElement('sv-kpi-radar-chart')
+], SvKpiRadarChart);
+export { SvKpiRadarChart };
 //# sourceMappingURL=kpi-radar-chart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/components/kpi-radar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('kpi-radar-chart')\nexport class KpiRadarChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\n  @property({ type: Object }) seriesColors: Record<string, string> = {\n    기준평균: '#E3F2FD',\n    프로젝트성과: '#2196F3'\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  render() {\n    return html`<svg\n      id=\"radar\"\n      width=${this.chartWidth}\n      height=${this.chartHeight}\n      viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n      preserveAspectRatio=\"xMidYMid meet\"\n    ></svg>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const rect = entry.contentRect\n        this.chartWidth = rect.width\n        this.chartHeight = rect.height\n        this.requestUpdate()\n      }\n    })\n    this.resizeObserver.observe(this)\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  updated() {\n    this.drawRadar()\n  }\n\n  drawRadar() {\n    const svg = d3.select(this.renderRoot.querySelector('#radar'))\n    svg.selectAll('*').remove()\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n\n    // 레전드를 위한 공간 확보 (오른쪽에 120px)\n    const legendWidth = 120\n    const chartWidth = w - legendWidth\n    const chartHeight = h\n    const r = Math.min(chartWidth, chartHeight) / 2 - 40\n    const angleSlice = (2 * Math.PI) / (this.categories.length || 1)\n\n    // 데이터 변환: { org, values: [ {category, value} ... ] }\n    const orgData = d3\n      .groups(this.data, d => d.org)\n      .map(([org, values]) => ({\n        org,\n        values: this.categories.map((cat, i) => {\n          const found = values.find(v => v.category === cat)\n          return { category: cat, value: found ? found[this.valueKey] : 0 }\n        })\n      }))\n\n    // 스케일\n    const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1\n    const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])\n\n    // SVG 기본\n    svg.attr('width', w).attr('height', h)\n    const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`)\n\n    // 그리드/축\n    for (let i = 1; i <= 5; i++) {\n      g.append('circle')\n        .attr('r', (r / 5) * i)\n        .attr('fill', 'none')\n        .attr('stroke', '#ccc')\n    }\n    this.categories.forEach((cat, i) => {\n      const angle = i * angleSlice - Math.PI / 2\n      g.append('line')\n        .attr('x1', 0)\n        .attr('y1', 0)\n        .attr('x2', radius(maxValue) * Math.cos(angle))\n        .attr('y2', radius(maxValue) * Math.sin(angle))\n        .attr('stroke', '#ccc')\n      g.append('text')\n        .attr('x', (radius(maxValue) + 10) * Math.cos(angle))\n        .attr('y', (radius(maxValue) + 10) * Math.sin(angle))\n        .attr('text-anchor', 'middle')\n        .attr('alignment-baseline', 'middle')\n        .attr('font-size', 12)\n        .attr('fill', '#333')\n        .text(cat)\n    })\n\n    // 그룹별 폴리곤 - 기준평균을 먼저 그리고 프로젝트성과를 위에 그리기\n    const sortedOrgData = orgData.sort((a, b) => {\n      if (a.org === '기준평균') return -1\n      if (b.org === '기준평균') return 1\n      return 0\n    })\n\n    sortedOrgData.forEach(gd => {\n      // 마지막에 첫 점을 한 번 더 추가\n      const closedValues = [...gd.values, gd.values[0]]\n      const line = d3\n        .lineRadial()\n        .radius((d: any) => radius(d.value))\n        .angle((d, i) => i * angleSlice)\n\n      // 색상 및 스타일 결정\n      const baseColor = this.seriesColors[gd.org] || '#ccc'\n      const fillColor =\n        gd.org === '기준평균'\n          ? 'rgba(76,175,80,0.4)' // 진한 녹색 배경\n          : 'rgba(33,150,243,0.4)' // 진한 파란색 배경\n      const strokeColor =\n        gd.org === '기준평균'\n          ? '#4CAF50' // 진한 녹색 선\n          : '#2196F3' // 진한 파란색 선\n      const strokeWidth = gd.org === '프로젝트성과' ? 1.5 : 1.5\n\n      g.append('path')\n        .datum(closedValues)\n        .attr('d', line as any)\n        .attr('fill', fillColor)\n        .attr('stroke', strokeColor)\n        .attr('stroke-width', strokeWidth)\n        .attr('stroke-dasharray', 'none') // 모두 직선으로 변경\n    })\n\n    // 데이터 포인트 표시\n    sortedOrgData.forEach(gd => {\n      gd.values.forEach((d, i) => {\n        const angle = i * angleSlice - Math.PI / 2\n        const pointRadius = radius(d.value)\n        const x = pointRadius * Math.cos(angle)\n        const y = pointRadius * Math.sin(angle)\n\n        g.append('circle')\n          .attr('cx', x)\n          .attr('cy', y)\n          .attr('r', 3)\n          .attr('fill', gd.org === '기준평균' ? '#4CAF50' : '#2196F3')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 1)\n      })\n    })\n\n    // 레전드 추가\n    const legend = svg.append('g')\n      .attr('class', 'legend')\n      .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`)\n\n    const legendData = [\n      { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },\n      { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }\n    ]\n\n    const legendItems = legend.selectAll('.legend-item')\n      .data(legendData)\n      .enter()\n      .append('g')\n      .attr('class', 'legend-item')\n      .attr('transform', (d, i) => `translate(0, ${i * 25})`)\n\n    // 레전드 아이콘 (작은 사각형)\n    legendItems.append('rect')\n      .attr('x', 0)\n      .attr('y', 0)\n      .attr('width', 12)\n      .attr('height', 12)\n      .attr('fill', d => d.color)\n      .attr('opacity', 0.6)\n      .attr('stroke', d => d.color)\n      .attr('stroke-width', 1.5)\n\n    // 레전드 텍스트\n    legendItems.append('text')\n      .attr('x', 18)\n      .attr('y', 9)\n      .attr('font-size', '12px')\n      .attr('fill', '#333')\n      .attr('alignment-baseline', 'middle')\n      .text(d => d.label)\n  }\n}\n"]}
+{"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/components/kpi-radar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-radar-chart')\nexport class SvKpiRadarChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\n  @property({ type: Object }) seriesColors: Record<string, string> = {\n    기준평균: '#E3F2FD',\n    프로젝트성과: '#2196F3'\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  render() {\n    return html`<svg\n      id=\"radar\"\n      width=${this.chartWidth}\n      height=${this.chartHeight}\n      viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n      preserveAspectRatio=\"xMidYMid meet\"\n    ></svg>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const rect = entry.contentRect\n        this.chartWidth = rect.width\n        this.chartHeight = rect.height\n        this.requestUpdate()\n      }\n    })\n    this.resizeObserver.observe(this)\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  updated() {\n    this.drawRadar()\n  }\n\n  drawRadar() {\n    const svg = d3.select(this.renderRoot.querySelector('#radar'))\n    svg.selectAll('*').remove()\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n\n    // 데이터 변환: { org, values: [ {category, value} ... ] }\n    const orgData = d3\n      .groups(this.data, d => d.org)\n      .map(([org, values]) => ({\n        org,\n        values: this.categories.map((cat, i) => {\n          const found = values.find(v => v.category === cat)\n          return { category: cat, value: found ? found[this.valueKey] : 0 }\n        })\n      }))\n\n    // 레전드를 위한 공간 확보 (org가 2개 이상일 때만)\n    const legendWidth = orgData.length > 1 ? 120 : 0\n    const chartWidth = w - legendWidth\n    const chartHeight = h\n    const r = Math.min(chartWidth, chartHeight) / 2 - 40\n    const angleSlice = (2 * Math.PI) / (this.categories.length || 1)\n\n    // 스케일 - 0-100 고정 범위 사용 (박스플롯과 동일한 범위)\n    const dataMaxValue = d3.max(this.data, d => d[this.valueKey]) || 1\n    const maxValue = Math.max(100, dataMaxValue) // 최소 100까지 표시\n    const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])\n\n    // SVG 기본\n    svg.attr('width', w).attr('height', h)\n    const g = svg.append('g').attr('transform', `translate(${chartWidth / 2},${chartHeight / 2})`)\n\n    // 그리드/축\n    for (let i = 1; i <= 5; i++) {\n      const gridRadius = (r / 5) * i\n      const gridValue = (maxValue / 5) * i\n\n      g.append('circle').attr('r', gridRadius).attr('fill', 'none').attr('stroke', '#ccc')\n\n      // 그리드 값 라벨 (30도 시계방향 = Y1에서 30도 회전)\n      // 차트가 위쪽에서 시작하므로 -90도 + 30도 = -60도\n      const labelAngle = (-60 * Math.PI) / 180\n      g.append('text')\n        .attr('x', gridRadius * Math.cos(labelAngle))\n        .attr('y', gridRadius * Math.sin(labelAngle))\n        .attr('text-anchor', 'middle')\n        .attr('alignment-baseline', 'middle')\n        .attr('font-size', 10)\n        .attr('fill', '#999')\n        .attr('background', '#fff')\n        .text(gridValue.toFixed(0))\n    }\n    this.categories.forEach((cat, i) => {\n      const angle = i * angleSlice - Math.PI / 2\n      g.append('line')\n        .attr('x1', 0)\n        .attr('y1', 0)\n        .attr('x2', radius(maxValue) * Math.cos(angle))\n        .attr('y2', radius(maxValue) * Math.sin(angle))\n        .attr('stroke', '#ccc')\n      g.append('text')\n        .attr('x', (radius(maxValue) + 10) * Math.cos(angle))\n        .attr('y', (radius(maxValue) + 10) * Math.sin(angle))\n        .attr('text-anchor', 'middle')\n        .attr('alignment-baseline', 'middle')\n        .attr('font-size', 12)\n        .attr('fill', '#333')\n        .text(cat)\n    })\n\n    // 그룹별 폴리곤 - 기준평균을 먼저 그리고 프로젝트성과를 위에 그리기\n    const sortedOrgData = orgData.sort((a, b) => {\n      if (a.org === '기준평균') return -1\n      if (b.org === '기준평균') return 1\n      return 0\n    })\n\n    sortedOrgData.forEach(gd => {\n      // 마지막에 첫 점을 한 번 더 추가\n      const closedValues = [...gd.values, gd.values[0]]\n      const line = d3\n        .lineRadial()\n        .radius((d: any) => radius(d.value))\n        .angle((d, i) => i * angleSlice)\n\n      // 색상 및 스타일 결정\n      const baseColor = this.seriesColors[gd.org] || '#ccc'\n      const fillColor =\n        gd.org === '기준평균'\n          ? 'rgba(76,175,80,0.4)' // 진한 녹색 배경\n          : 'rgba(33,150,243,0.4)' // 진한 파란색 배경\n      const strokeColor =\n        gd.org === '기준평균'\n          ? '#4CAF50' // 진한 녹색 선\n          : '#2196F3' // 진한 파란색 선\n      const strokeWidth = gd.org === '프로젝트성과' ? 1.5 : 1.5\n\n      g.append('path')\n        .datum(closedValues)\n        .attr('d', line as any)\n        .attr('fill', fillColor)\n        .attr('stroke', strokeColor)\n        .attr('stroke-width', strokeWidth)\n        .attr('stroke-dasharray', 'none') // 모두 직선으로 변경\n    })\n\n    // 데이터 포인트 표시\n    sortedOrgData.forEach(gd => {\n      gd.values.forEach((d, i) => {\n        const angle = i * angleSlice - Math.PI / 2\n        const pointRadius = radius(d.value)\n        const x = pointRadius * Math.cos(angle)\n        const y = pointRadius * Math.sin(angle)\n\n        g.append('circle')\n          .attr('cx', x)\n          .attr('cy', y)\n          .attr('r', 3)\n          .attr('fill', gd.org === '기준평균' ? '#4CAF50' : '#2196F3')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 1)\n      })\n    })\n\n    // 레전드 추가 (org가 2개 이상일 때만)\n    if (orgData.length > 1) {\n      const legend = svg\n        .append('g')\n        .attr('class', 'legend')\n        .attr('transform', `translate(${chartWidth + 20}, ${chartHeight / 2 - 30})`)\n\n      const legendData = [\n        { label: '기준평균값', color: '#4CAF50', strokeStyle: 'none' },\n        { label: '프로젝트 성과', color: '#2196F3', strokeStyle: 'none' }\n      ]\n\n      const legendItems = legend\n        .selectAll('.legend-item')\n        .data(legendData)\n        .enter()\n        .append('g')\n        .attr('class', 'legend-item')\n        .attr('transform', (d, i) => `translate(0, ${i * 25})`)\n\n      // 레전드 아이콘 (작은 사각형)\n      legendItems\n        .append('rect')\n        .attr('x', 0)\n        .attr('y', 0)\n        .attr('width', 12)\n        .attr('height', 12)\n        .attr('fill', d => d.color)\n        .attr('opacity', 0.6)\n        .attr('stroke', d => d.color)\n        .attr('stroke-width', 1.5)\n\n      // 레전드 텍스트\n      legendItems\n        .append('text')\n        .attr('x', 18)\n        .attr('y', 9)\n        .attr('font-size', '12px')\n        .attr('fill', '#333')\n        .attr('alignment-baseline', 'middle')\n        .text(d => d.label)\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+export declare class SvKpiTrendChart extends LitElement {
+    data: {
+        date: string;
+        value: number;
+        color?: string;
+    }[];
+    valueKey: string;
+    dateKey: string;
+    width: number;
+    height: number;
+    lineColor: string;
+    strokeWidth: number;
+    showPoints: boolean;
+    pointRadius: number;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    drawTrendChart(): void;
+}

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

@@ -0,0 +1,220 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let SvKpiTrendChart = class SvKpiTrendChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.valueKey = 'value';
+        this.dateKey = 'date';
+        this.width = 400;
+        this.height = 200;
+        this.lineColor = '#2196f3';
+        this.strokeWidth = 2;
+        this.showPoints = true;
+        this.pointRadius = 4;
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    render() {
+        return html `
+      <div class="chart-container">
+        <svg
+          id="trend-chart"
+          width=${this.chartWidth || this.width}
+          height=${this.chartHeight || this.height}
+          viewBox="0 0 ${this.chartWidth || this.width} ${this.chartHeight || this.height}"
+          preserveAspectRatio="xMidYMid meet"
+        ></svg>
+      </div>
+    `;
+    }
+    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.drawTrendChart();
+    }
+    drawTrendChart() {
+        if (!this.data || this.data.length === 0)
+            return;
+        const svg = d3.select(this.renderRoot.querySelector('#trend-chart'));
+        svg.selectAll('*').remove();
+        const margin = { top: 20, right: 20, bottom: 50, left: 40 };
+        const width = this.chartWidth || this.width;
+        const height = this.chartHeight || this.height;
+        const chartWidth = width - margin.left - margin.right;
+        const chartHeight = height - margin.top - margin.bottom;
+        // 데이터 파싱
+        const parsedData = this.data.map(d => ({
+            date: new Date(d[this.dateKey]),
+            value: +d[this.valueKey],
+            color: d.color || this.lineColor
+        }));
+        // 스케일 설정
+        const xScale = d3
+            .scaleTime()
+            .domain(d3.extent(parsedData, d => d.date))
+            .range([0, chartWidth]);
+        const yScale = d3
+            .scaleLinear()
+            .domain([0, d3.max(parsedData, d => d.value) || 100])
+            .range([chartHeight, 0]);
+        // SVG 설정
+        svg.attr('width', width).attr('height', height);
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        // 축 생성 - 연도가 바뀌면 연도 포함
+        const timeFormat = (date) => {
+            const dates = parsedData.map(d => d.date);
+            const years = [...new Set(dates.map(d => d.getFullYear()))];
+            // 여러 연도가 있으면 연도 포함
+            if (years.length > 1) {
+                return d3.timeFormat('%Y-%m')(date);
+            }
+            else {
+                return d3.timeFormat('%m/%d')(date);
+            }
+        };
+        const xAxis = d3.axisBottom(xScale).tickFormat(timeFormat).ticks(Math.min(parsedData.length, 10));
+        const yAxis = d3.axisLeft(yScale).ticks(5);
+        // X축 그리드 라인 추가
+        g.append('g')
+            .attr('class', 'grid')
+            .attr('transform', `translate(0,${chartHeight})`)
+            .call(d3
+            .axisBottom(xScale)
+            .ticks(Math.min(parsedData.length, 10))
+            .tickSize(-chartHeight)
+            .tickFormat(() => ''));
+        g.append('g')
+            .attr('class', 'axis')
+            .attr('transform', `translate(0,${chartHeight})`)
+            .call(xAxis)
+            .selectAll('text')
+            .style('text-anchor', 'end')
+            .attr('dx', '-.5em')
+            .attr('dy', '.3em')
+            .attr('transform', 'rotate(-30)');
+        g.append('g').attr('class', 'axis').call(yAxis);
+        // 라인 생성기
+        const line = d3
+            .line()
+            .x(d => xScale(d.date))
+            .y(d => yScale(d.value))
+            .curve(d3.curveMonotoneX);
+        // 트렌드 라인 그리기
+        g.append('path')
+            .datum(parsedData)
+            .attr('class', 'trend-line')
+            .attr('d', line)
+            .attr('stroke', this.lineColor)
+            .attr('stroke-width', this.strokeWidth);
+        // 데이터 포인트 그리기
+        if (this.showPoints) {
+            g.selectAll('.data-point')
+                .data(parsedData)
+                .enter()
+                .append('circle')
+                .attr('class', 'data-point')
+                .attr('cx', d => xScale(d.date))
+                .attr('cy', d => yScale(d.value))
+                .attr('r', this.pointRadius)
+                .attr('stroke', d => d.color)
+                .attr('fill', 'white');
+        }
+    }
+};
+SvKpiTrendChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .trend-line {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .data-point {
+      fill: white;
+      stroke-width: 2;
+    }
+
+    .axis line,
+    .axis path,
+    .grid line {
+      stroke: #ddd;
+    }
+
+    .grid path {
+      stroke: none;
+    }
+
+    .axis text {
+      font-size: 10px;
+      fill: #666;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], SvKpiTrendChart.prototype, "data", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "dateKey", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiTrendChart.prototype, "lineColor", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "strokeWidth", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], SvKpiTrendChart.prototype, "showPoints", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], SvKpiTrendChart.prototype, "pointRadius", void 0);
+SvKpiTrendChart = __decorate([
+    customElement('sv-kpi-trend-chart')
+], SvKpiTrendChart);
+export { SvKpiTrendChart };
+//# sourceMappingURL=kpi-trend-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-trend-chart.js","sourceRoot":"","sources":["../../client/components/kpi-trend-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('sv-kpi-trend-chart')\nexport class SvKpiTrendChart extends LitElement {\n  @property({ type: Array }) data: { date: string; value: number; color?: string }[] = []\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) dateKey: string = 'date'\n  @property({ type: Number }) width: number = 400\n  @property({ type: Number }) height: number = 200\n  @property({ type: String }) lineColor: string = '#2196f3'\n  @property({ type: Number }) strokeWidth: number = 2\n  @property({ type: Boolean }) showPoints: boolean = true\n  @property({ type: Number }) pointRadius: number = 4\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-container {\n      width: 100%;\n      height: 100%;\n    }\n\n    .trend-line {\n      fill: none;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .data-point {\n      fill: white;\n      stroke-width: 2;\n    }\n\n    .axis line,\n    .axis path,\n    .grid line {\n      stroke: #ddd;\n    }\n\n    .grid path {\n      stroke: none;\n    }\n\n    .axis text {\n      font-size: 10px;\n      fill: #666;\n    }\n  `\n\n  render() {\n    return html`\n      <div class=\"chart-container\">\n        <svg\n          id=\"trend-chart\"\n          width=${this.chartWidth || this.width}\n          height=${this.chartHeight || this.height}\n          viewBox=\"0 0 ${this.chartWidth || this.width} ${this.chartHeight || this.height}\"\n          preserveAspectRatio=\"xMidYMid meet\"\n        ></svg>\n      </div>\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.drawTrendChart()\n  }\n\n  drawTrendChart() {\n    if (!this.data || this.data.length === 0) return\n\n    const svg = d3.select(this.renderRoot.querySelector('#trend-chart'))\n    svg.selectAll('*').remove()\n\n    const margin = { top: 20, right: 20, bottom: 50, left: 40 }\n    const width = this.chartWidth || this.width\n    const height = this.chartHeight || this.height\n    const chartWidth = width - margin.left - margin.right\n    const chartHeight = height - margin.top - margin.bottom\n\n    // 데이터 파싱\n    const parsedData = this.data.map(d => ({\n      date: new Date(d[this.dateKey]),\n      value: +d[this.valueKey],\n      color: d.color || this.lineColor\n    }))\n\n    // 스케일 설정\n    const xScale = d3\n      .scaleTime()\n      .domain(d3.extent(parsedData, d => d.date) as [Date, Date])\n      .range([0, chartWidth])\n\n    const yScale = d3\n      .scaleLinear()\n      .domain([0, d3.max(parsedData, d => d.value) || 100])\n      .range([chartHeight, 0])\n\n    // SVG 설정\n    svg.attr('width', width).attr('height', height)\n    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 축 생성 - 연도가 바뀌면 연도 포함\n    const timeFormat = (date: Date) => {\n      const dates = parsedData.map(d => d.date)\n      const years = [...new Set(dates.map(d => d.getFullYear()))]\n\n      // 여러 연도가 있으면 연도 포함\n      if (years.length > 1) {\n        return d3.timeFormat('%Y-%m')(date)\n      } else {\n        return d3.timeFormat('%m/%d')(date)\n      }\n    }\n\n    const xAxis = d3.axisBottom(xScale).tickFormat(timeFormat as any).ticks(Math.min(parsedData.length, 10))\n\n    const yAxis = d3.axisLeft(yScale).ticks(5)\n\n    // X축 그리드 라인 추가\n    g.append('g')\n      .attr('class', 'grid')\n      .attr('transform', `translate(0,${chartHeight})`)\n      .call(\n        d3\n          .axisBottom(xScale)\n          .ticks(Math.min(parsedData.length, 10))\n          .tickSize(-chartHeight)\n          .tickFormat(() => '')\n      )\n\n    g.append('g')\n      .attr('class', 'axis')\n      .attr('transform', `translate(0,${chartHeight})`)\n      .call(xAxis)\n      .selectAll('text')\n      .style('text-anchor', 'end')\n      .attr('dx', '-.5em')\n      .attr('dy', '.3em')\n      .attr('transform', 'rotate(-30)')\n\n    g.append('g').attr('class', 'axis').call(yAxis)\n\n    // 라인 생성기\n    const line = d3\n      .line<{ date: Date; value: number; color: string }>()\n      .x(d => xScale(d.date))\n      .y(d => yScale(d.value))\n      .curve(d3.curveMonotoneX)\n\n    // 트렌드 라인 그리기\n    g.append('path')\n      .datum(parsedData)\n      .attr('class', 'trend-line')\n      .attr('d', line as any)\n      .attr('stroke', this.lineColor)\n      .attr('stroke-width', this.strokeWidth)\n\n    // 데이터 포인트 그리기\n    if (this.showPoints) {\n      g.selectAll('.data-point')\n        .data(parsedData)\n        .enter()\n        .append('circle')\n        .attr('class', 'data-point')\n        .attr('cx', d => xScale(d.date))\n        .attr('cy', d => yScale(d.value))\n        .attr('r', this.pointRadius)\n        .attr('stroke', d => d.color)\n        .attr('fill', 'white')\n    }\n  }\n}\n"]}

package/dist-client/google-map/common-google-map.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        google: any;
+        markerClusterer?: any;
+    }
+}
+export declare class CommonGoogleMap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    center: any;
+    zoom: any;
+    locations: any[];
+    focused: any;
+    polygons: any;
+    polylines: any;
+    markers: any;
+    boundCoords: any;
+    controls: any;
+    clusterZoom: number;
+    map: any;
+    defaultCenter: any;
+    private _infoWindow;
+    private _markerClusterer;
+    private _buildMarkersTimer;
+    get anchor(): Element | null;
+    readyMap(): Promise<void>;
+    buildMarkers(locations?: any[]): Promise<void>;
+    get infoWindow(): any;
+    setFocus(focus: any, icon: any): void;
+    resetFocus(focus: any, icon: any): void;
+    changeFocus(after: any, before: any): Promise<void>;
+    updated(changes: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    resetBounds(): void;
+}