@things-factory/kpi 9.0.30 → 9.0.31

package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '../../../charts/kpi-radar-chart.js';
+import '../../../charts/kpi-boxplot-chart.js';
+import '../../../charts/kpi-mini-trend-chart.js';
+export declare class KpiLeftPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    selectedCategory: string;
+    selectedChartType: string;
+    mapData: any[];
+    private chartData;
+    private chartCategories;
+    connectedCallback(): void;
+    private generateTrendData;
+    private generateChartData;
+    private onCategoryChange;
+    private onChartTypeChange;
+    private onRegionClick;
+    private downloadExcel;
+    private getChangeRateClass;
+    private getChangeIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.js

@@ -0,0 +1,404 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '../../../charts/kpi-radar-chart.js';
+import '../../../charts/kpi-boxplot-chart.js';
+import '../../../charts/kpi-mini-trend-chart.js';
+let KpiLeftPanel = class KpiLeftPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedCategory = '전체 KPI';
+        this.selectedChartType = 'boxplot';
+        this.mapData = [];
+        this.chartData = [];
+        this.chartCategories = [];
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 400px;
+      background: #fff;
+      border-right: 1px solid #e0e0e0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    }
+    .panel-content {
+      padding: 24px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 24px;
+      border-bottom: 1px solid #e0e0e0;
+      background: #fff;
+      height: 70px;
+      box-sizing: border-box;
+    }
+    .panel-title {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin: 0;
+    }
+    .panel-close {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: #fff;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.2rem;
+      color: #666;
+      transition: all 0.2s;
+    }
+    .panel-close:hover {
+      background: #e9ecef;
+      color: #333;
+    }
+    .sub-title {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #495057;
+    }
+    .chart-section {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 20px;
+    }
+    .chart-toggle {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    .toggle-button {
+      padding: 8px 16px;
+      border: 1px solid #ced4da;
+      background: #fff;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: all 0.2s;
+    }
+    .toggle-button.active {
+      background: #667eea;
+      color: white;
+      border-color: #667eea;
+    }
+    .chart-container {
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: white;
+      border-radius: 6px;
+      border: 1px solid #e9ecef;
+    }
+    .performance-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 16px;
+    }
+    .performance-table th,
+    .performance-table td {
+      padding: 12px 8px;
+      text-align: left;
+      border-bottom: 1px solid #e9ecef;
+    }
+    .performance-table th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #495057;
+    }
+    .performance-table td {
+      color: #333;
+    }
+    .change-rate {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .change-up {
+      color: #dc3545;
+    }
+    .change-down {
+      color: #198754;
+    }
+    .change-neutral {
+      color: #6c757d;
+    }
+    .trend-chart {
+      width: 60px;
+      height: 30px;
+      background: #f8f9fa;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.8rem;
+      color: #666;
+    }
+    .download-button {
+      margin-top: 16px;
+      padding: 8px 16px;
+      background: #28a745;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .download-button:hover {
+      background: #218838;
+    }
+    .category-select {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #ced4da;
+      border-radius: 6px;
+      background: white;
+      margin-bottom: 20px;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.generateChartData();
+    }
+    generateTrendData(region) {
+        // 각 지역별로 7일간의 트렌드 데이터 생성
+        const baseValue = Math.random() * 30 + 60; // 60-90 범위
+        const trendData = [];
+        for (let i = 0; i < 7; i++) {
+            const trend = Math.sin(i * 0.5) * 5; // 사인파로 변동
+            const noise = (Math.random() - 0.5) * 3; // 랜덤 노이즈
+            const value = Math.max(0, Math.min(100, baseValue + trend + noise));
+            trendData.push(Math.round(value));
+        }
+        return trendData;
+    }
+    generateChartData() {
+        // 선택된 카테고리에 따른 차트 데이터 생성
+        const categories = ['일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과'];
+        this.chartCategories = categories;
+        if (this.selectedChartType === 'radar') {
+            // 레이더 차트용 데이터 생성
+            this.chartData = categories.map(category => ({
+                category,
+                value: Math.random() * 50 + 25, // 25-75 범위
+                group: this.selectedCategory
+            }));
+        }
+        else {
+            // 박스플롯용 데이터 생성
+            this.chartData = categories.map(category => {
+                const baseValue = Math.random() * 50 + 25; // 25-75 범위
+                const variation = Math.random() * 20; // 변동폭
+                // 각 카테고리별로 20개의 데이터 포인트 생성
+                const dataPoints = [];
+                for (let i = 0; i < 20; i++) {
+                    dataPoints.push({
+                        value: baseValue + (Math.random() - 0.5) * variation,
+                        group: category
+                    });
+                }
+                // 통계값 계산
+                const values = dataPoints.map(d => d.value).sort((a, b) => a - b);
+                const min = Math.min(...values);
+                const max = Math.max(...values);
+                const q1 = values[Math.floor(values.length * 0.25)];
+                const q3 = values[Math.floor(values.length * 0.75)];
+                const median = values[Math.floor(values.length * 0.5)];
+                const mean = values.reduce((a, b) => a + b, 0) / values.length;
+                return {
+                    group: category,
+                    min: min,
+                    max: max,
+                    q1: q1,
+                    q3: q3,
+                    median: median,
+                    mean: mean,
+                    value: mean
+                };
+            });
+        }
+    }
+    onCategoryChange(event) {
+        const target = event.target;
+        this.dispatchEvent(new CustomEvent('category-change', {
+            detail: { category: target.value },
+            bubbles: true,
+            composed: true
+        }));
+        this.generateChartData();
+    }
+    onChartTypeChange(type) {
+        this.selectedChartType = type;
+        this.generateChartData();
+    }
+    onRegionClick(region) {
+        this.dispatchEvent(new CustomEvent('region-click', {
+            detail: { region },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    downloadExcel() {
+        this.dispatchEvent(new CustomEvent('download-excel', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    getChangeRateClass(change) {
+        if (change > 0)
+            return 'change-up';
+        if (change < 0)
+            return 'change-down';
+        return 'change-neutral';
+    }
+    getChangeIcon(change) {
+        if (change > 0)
+            return '▲';
+        if (change < 0)
+            return '▼';
+        return '─';
+    }
+    render() {
+        return html `
+      <div class="panel-header">
+        <div class="panel-title">전국 KPI</div>
+        <button class="panel-close" style="visibility: hidden;">×</button>
+      </div>
+      <div class="panel-content">
+        <!-- KPI 카테고리 선택 -->
+        <select class="category-select" .value=${this.selectedCategory} @change=${this.onCategoryChange}>
+          <option value="전체 KPI">전체 KPI</option>
+          <option value="일정 성과">일정 성과</option>
+          <option value="비용 성과">비용 성과</option>
+          <option value="품질 성과">품질 성과</option>
+          <option value="안전 성과">안전 성과</option>
+          <option value="환경 성과">환경 성과</option>
+        </select>
+
+        <!-- 종합 성과 -->
+        <div class="chart-section">
+          <div class="sub-title">종합 성과</div>
+          <div class="chart-toggle">
+            <button
+              class="toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}"
+              @click=${() => this.onChartTypeChange('boxplot')}
+            >
+              박스플롯
+            </button>
+            <button
+              class="toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}"
+              @click=${() => this.onChartTypeChange('radar')}
+            >
+              레이더차트
+            </button>
+          </div>
+          <div class="chart-container">
+            ${this.selectedChartType === 'boxplot'
+            ? html `
+                  <kpi-boxplot-chart
+                    .data=${this.chartData}
+                    .groups=${this.chartCategories}
+                    .valueKey=${'value'}
+                    .currentGroup=${this.selectedCategory}
+                  ></kpi-boxplot-chart>
+                `
+            : html `
+                  <kpi-radar-chart
+                    .data=${this.chartData}
+                    .categories=${this.chartCategories}
+                    .valueKey=${'value'}
+                    .currentGroup=${this.selectedCategory}
+                  ></kpi-radar-chart>
+                `}
+          </div>
+        </div>
+
+        <!-- 시도별 성과 -->
+        <div class="chart-section">
+          <div class="sub-title">시도별 성과</div>
+          <table class="performance-table">
+            <thead>
+              <tr>
+                <th>지역명</th>
+                <th>KPI</th>
+                <th>변동률(%)</th>
+                <th>성과 추이</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${this.mapData?.slice(0, 5).map((item) => html `
+                  <tr
+                    style="cursor: pointer; transition: background-color 0.2s;"
+                    @click=${() => this.onRegionClick(item.region)}
+                    @mouseenter=${(e) => (e.target.style.backgroundColor = '#f8f9fa')}
+                    @mouseleave=${(e) => (e.target.style.backgroundColor = '')}
+                  >
+                    <td>${item.region}</td>
+                    <td>${item.kpi}</td>
+                    <td>
+                      <div class="change-rate ${this.getChangeRateClass(item.change)}">
+                        ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%
+                      </div>
+                    </td>
+                    <td>
+                      <kpi-mini-trend-chart
+                        .data=${this.generateTrendData(item.region)}
+                        .width=${60}
+                        .height=${30}
+                        .lineColor=${'#2196f3'}
+                        .strokeWidth=${1.5}
+                        .showPoints=${true}
+                        .pointRadius=${1.5}
+                      ></kpi-mini-trend-chart>
+                    </td>
+                  </tr>
+                `)}
+            </tbody>
+          </table>
+          <button class="download-button" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiLeftPanel.prototype, "selectedCategory", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiLeftPanel.prototype, "selectedChartType", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiLeftPanel.prototype, "mapData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiLeftPanel.prototype, "chartData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiLeftPanel.prototype, "chartCategories", void 0);
+KpiLeftPanel = __decorate([
+    customElement('kpi-left-panel')
+], KpiLeftPanel);
+export { KpiLeftPanel };
+//# sourceMappingURL=kpi-left-panel.js.map

package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-left-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-left-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../charts/kpi-radar-chart.js'\nimport '../../../charts/kpi-boxplot-chart.js'\nimport '../../../charts/kpi-mini-trend-chart.js'\n\n@customElement('kpi-left-panel')\nexport class KpiLeftPanel extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      width: 400px;\n      background: #fff;\n      border-right: 1px solid #e0e0e0;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n    }\n    .panel-content {\n      padding: 24px;\n      overflow-y: auto;\n      flex: 1;\n    }\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 20px 24px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fff;\n      height: 70px;\n      box-sizing: border-box;\n    }\n    .panel-title {\n      font-size: 1.3rem;\n      font-weight: bold;\n      color: #333;\n      margin: 0;\n    }\n    .panel-close {\n      width: 32px;\n      height: 32px;\n      border: none;\n      background: #fff;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.2rem;\n      color: #666;\n      transition: all 0.2s;\n    }\n    .panel-close:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n    .sub-title {\n      font-size: 1rem;\n      font-weight: 600;\n      margin-bottom: 16px;\n      color: #495057;\n    }\n    .chart-section {\n      background: #f8f9fa;\n      border-radius: 8px;\n      padding: 16px;\n      margin-bottom: 20px;\n    }\n    .chart-toggle {\n      display: flex;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n    .toggle-button {\n      padding: 8px 16px;\n      border: 1px solid #ced4da;\n      background: #fff;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 0.9rem;\n      transition: all 0.2s;\n    }\n    .toggle-button.active {\n      background: #667eea;\n      color: white;\n      border-color: #667eea;\n    }\n    .chart-container {\n      height: 300px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      border-radius: 6px;\n      border: 1px solid #e9ecef;\n    }\n    .performance-table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 16px;\n    }\n    .performance-table th,\n    .performance-table td {\n      padding: 12px 8px;\n      text-align: left;\n      border-bottom: 1px solid #e9ecef;\n    }\n    .performance-table th {\n      background: #f8f9fa;\n      font-weight: 600;\n      color: #495057;\n    }\n    .performance-table td {\n      color: #333;\n    }\n    .change-rate {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .change-up {\n      color: #dc3545;\n    }\n    .change-down {\n      color: #198754;\n    }\n    .change-neutral {\n      color: #6c757d;\n    }\n    .trend-chart {\n      width: 60px;\n      height: 30px;\n      background: #f8f9fa;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 0.8rem;\n      color: #666;\n    }\n    .download-button {\n      margin-top: 16px;\n      padding: 8px 16px;\n      background: #28a745;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 0.9rem;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .download-button:hover {\n      background: #218838;\n    }\n    .category-select {\n      width: 100%;\n      padding: 8px 12px;\n      border: 1px solid #ced4da;\n      border-radius: 6px;\n      background: white;\n      margin-bottom: 20px;\n    }\n  `\n\n  @property({ type: String }) selectedCategory = '전체 KPI'\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: Array }) mapData: any[] = []\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.generateChartData()\n  }\n\n  private generateTrendData(region: string): number[] {\n    // 각 지역별로 7일간의 트렌드 데이터 생성\n    const baseValue = Math.random() * 30 + 60 // 60-90 범위\n    const trendData: number[] = []\n\n    for (let i = 0; i < 7; i++) {\n      const trend = Math.sin(i * 0.5) * 5 // 사인파로 변동\n      const noise = (Math.random() - 0.5) * 3 // 랜덤 노이즈\n      const value = Math.max(0, Math.min(100, baseValue + trend + noise))\n      trendData.push(Math.round(value))\n    }\n\n    return trendData\n  }\n\n  private generateChartData() {\n    // 선택된 카테고리에 따른 차트 데이터 생성\n    const categories = ['일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']\n    this.chartCategories = categories\n\n    if (this.selectedChartType === 'radar') {\n      // 레이더 차트용 데이터 생성\n      this.chartData = categories.map(category => ({\n        category,\n        value: Math.random() * 50 + 25, // 25-75 범위\n        group: this.selectedCategory\n      }))\n    } else {\n      // 박스플롯용 데이터 생성\n      this.chartData = categories.map(category => {\n        const baseValue = Math.random() * 50 + 25 // 25-75 범위\n        const variation = Math.random() * 20 // 변동폭\n\n        // 각 카테고리별로 20개의 데이터 포인트 생성\n        const dataPoints: { value: number; group: string }[] = []\n        for (let i = 0; i < 20; i++) {\n          dataPoints.push({\n            value: baseValue + (Math.random() - 0.5) * variation,\n            group: category\n          })\n        }\n\n        // 통계값 계산\n        const values = dataPoints.map(d => d.value).sort((a, b) => a - b)\n        const min = Math.min(...values)\n        const max = Math.max(...values)\n        const q1 = values[Math.floor(values.length * 0.25)]\n        const q3 = values[Math.floor(values.length * 0.75)]\n        const median = values[Math.floor(values.length * 0.5)]\n        const mean = values.reduce((a, b) => a + b, 0) / values.length\n\n        return {\n          group: category,\n          min: min,\n          max: max,\n          q1: q1,\n          q3: q3,\n          median: median,\n          mean: mean,\n          value: mean\n        }\n      })\n    }\n  }\n\n  private onCategoryChange(event: Event) {\n    const target = event.target as HTMLSelectElement\n    this.dispatchEvent(\n      new CustomEvent('category-change', {\n        detail: { category: target.value },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.generateChartData()\n  }\n\n  private onChartTypeChange(type: string) {\n    this.selectedChartType = type\n    this.generateChartData()\n  }\n\n  private onRegionClick(region: string) {\n    this.dispatchEvent(\n      new CustomEvent('region-click', {\n        detail: { region },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private downloadExcel() {\n    this.dispatchEvent(\n      new CustomEvent('download-excel', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private getChangeRateClass(change: number): string {\n    if (change > 0) return 'change-up'\n    if (change < 0) return 'change-down'\n    return 'change-neutral'\n  }\n\n  private getChangeIcon(change: number): string {\n    if (change > 0) return '▲'\n    if (change < 0) return '▼'\n    return '─'\n  }\n\n  render() {\n    return html`\n      <div class=\"panel-header\">\n        <div class=\"panel-title\">전국 KPI</div>\n        <button class=\"panel-close\" style=\"visibility: hidden;\">×</button>\n      </div>\n      <div class=\"panel-content\">\n        <!-- KPI 카테고리 선택 -->\n        <select class=\"category-select\" .value=${this.selectedCategory} @change=${this.onCategoryChange}>\n          <option value=\"전체 KPI\">전체 KPI</option>\n          <option value=\"일정 성과\">일정 성과</option>\n          <option value=\"비용 성과\">비용 성과</option>\n          <option value=\"품질 성과\">품질 성과</option>\n          <option value=\"안전 성과\">안전 성과</option>\n          <option value=\"환경 성과\">환경 성과</option>\n        </select>\n\n        <!-- 종합 성과 -->\n        <div class=\"chart-section\">\n          <div class=\"sub-title\">종합 성과</div>\n          <div class=\"chart-toggle\">\n            <button\n              class=\"toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}\"\n              @click=${() => this.onChartTypeChange('boxplot')}\n            >\n              박스플롯\n            </button>\n            <button\n              class=\"toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}\"\n              @click=${() => this.onChartTypeChange('radar')}\n            >\n              레이더차트\n            </button>\n          </div>\n          <div class=\"chart-container\">\n            ${this.selectedChartType === 'boxplot'\n              ? html`\n                  <kpi-boxplot-chart\n                    .data=${this.chartData}\n                    .groups=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedCategory}\n                  ></kpi-boxplot-chart>\n                `\n              : html`\n                  <kpi-radar-chart\n                    .data=${this.chartData}\n                    .categories=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedCategory}\n                  ></kpi-radar-chart>\n                `}\n          </div>\n        </div>\n\n        <!-- 시도별 성과 -->\n        <div class=\"chart-section\">\n          <div class=\"sub-title\">시도별 성과</div>\n          <table class=\"performance-table\">\n            <thead>\n              <tr>\n                <th>지역명</th>\n                <th>KPI</th>\n                <th>변동률(%)</th>\n                <th>성과 추이</th>\n              </tr>\n            </thead>\n            <tbody>\n              ${this.mapData?.slice(0, 5).map(\n                (item: any) => html`\n                  <tr\n                    style=\"cursor: pointer; transition: background-color 0.2s;\"\n                    @click=${() => this.onRegionClick(item.region)}\n                    @mouseenter=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '#f8f9fa')}\n                    @mouseleave=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '')}\n                  >\n                    <td>${item.region}</td>\n                    <td>${item.kpi}</td>\n                    <td>\n                      <div class=\"change-rate ${this.getChangeRateClass(item.change)}\">\n                        ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%\n                      </div>\n                    </td>\n                    <td>\n                      <kpi-mini-trend-chart\n                        .data=${this.generateTrendData(item.region)}\n                        .width=${60}\n                        .height=${30}\n                        .lineColor=${'#2196f3'}\n                        .strokeWidth=${1.5}\n                        .showPoints=${true}\n                        .pointRadius=${1.5}\n                      ></kpi-mini-trend-chart>\n                    </td>\n                  </tr>\n                `\n              )}\n            </tbody>\n          </table>\n          <button class=\"download-button\" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-dashboard/components/kpi-map-panel.d.ts

@@ -10,14 +10,19 @@ export declare class KpiMapPanel extends LitElement {
     selectedCategory: string;
     mapData: any[];
     private map;
-    private mapInitialized;
     get mapLocations(): {
         lat: any;
         lng: any;
         title: any;
+        region: any;
+        markerContent: string;
         content: string;
     }[];
     private onCategoryButtonClick;
     private onMapChange;
+    private onRegionClick;
+    private zoomIn;
+    private zoomOut;
+    private resetView;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-client/pages/kpi-dashboard/components/kpi-map-panel.js

@@ -1,7 +1,6 @@
 import { __decorate, __metadata } from "tslib";
-import { html, css } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { LitElement } from 'lit';
 import '../../../google-map/common-google-map.js';
 let KpiMapPanel = class KpiMapPanel extends LitElement {
     constructor() {
@@ -9,7 +8,6 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
         this.selectedCategory = '전체 KPI';
         this.mapData = [];
         this.map = null;
-        this.mapInitialized = false;
     }
     static { this.styles = css `
     :host {
@@ -86,7 +84,7 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
     .map-control-button:hover {
       background: #f8f9fa;
     }
-    .map-scale {
+    .map-scale-direction {
       position: absolute;
       bottom: 16px;
       right: 16px;
@@ -97,6 +95,15 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
       font-size: 0.8rem;
       color: #666;
       z-index: 10;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      text-align: center;
+    }
+    .north-arrow {
+      font-size: 1rem;
+      margin-bottom: 4px;
+    }
+    .scale-info {
+      font-size: 0.7rem;
     }
     common-google-map {
       width: 100%;
@@ -109,15 +116,56 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
             lat: item.lat,
             lng: item.lng,
             title: item.region,
+            region: item.region, // 지역명 추가
+            // 커스텀 마커 콘텐츠 생성
+            markerContent: `
+          <div style="
+            background: white;
+            border-radius: 8px;
+            padding: 8px 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            border: 1px solid #e9ecef;
+            min-width: 80px;
+            text-align: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            cursor: pointer;
+          ">
+            <div style="
+              font-size: 11px;
+              font-weight: 600;
+              color: #495057;
+              margin-bottom: 2px;
+              white-space: nowrap;
+            ">${item.region}</div>
+            <div style="
+              font-size: 13px;
+              font-weight: 700;
+              color: #212529;
+              margin-bottom: 2px;
+            ">${item.kpi}</div>
+            <div style="
+              font-size: 10px;
+              color: ${item.change > 0 ? '#dc3545' : '#198754'};
+              font-weight: 500;
+            ">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>
+          </div>
+        `,
             content: `
-        <div style="padding: 8px;">
-          <h3 style="margin: 0 0 8px 0; font-size: 14px;">${item.region}</h3>
-          <p style="margin: 0 0 4px 0; font-size: 12px;">KPI: ${item.kpi}</p>
-          <p style="margin: 0; font-size: 12px; color: ${item.change > 0 ? '#dc3545' : '#198754'}">
-            ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%
-          </p>
-        </div>
-      `
+          <div style="padding: 12px; min-width: 200px;">
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; color: #212529;">${item.region}</h3>
+            <div style="margin-bottom: 8px;">
+              <span style="font-size: 14px; color: #6c757d;">KPI: </span>
+              <span style="font-size: 16px; font-weight: 600; color: #212529;">${item.kpi}</span>
+            </div>
+            <div style="
+              font-size: 14px;
+              color: ${item.change > 0 ? '#dc3545' : '#198754'};
+              font-weight: 500;
+            ">
+              ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화
+            </div>
+          </div>
+        `
         })) || []);
     }
     onCategoryButtonClick(category) {
@@ -129,7 +177,29 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
     }
     onMapChange(event) {
         this.map = event.detail;
-        this.mapInitialized = true;
+    }
+    onRegionClick(event) {
+        this.dispatchEvent(new CustomEvent('region-click', {
+            detail: event.detail,
+            bubbles: true,
+            composed: true
+        }));
+    }
+    zoomIn() {
+        if (this.map) {
+            this.map.setZoom(this.map.getZoom() + 1);
+        }
+    }
+    zoomOut() {
+        if (this.map) {
+            this.map.setZoom(this.map.getZoom() - 1);
+        }
+    }
+    resetView() {
+        if (this.map) {
+            this.map.setCenter({ lat: 36.5, lng: 127.5 });
+            this.map.setZoom(7);
+        }
     }
     render() {
         return html `
@@ -175,17 +245,17 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
       </div>
 
       <div class="map-container">
-        <!-- 지도 컨트롤 -->
+        <!-- 지도 컨트롤 (오른쪽 상단) -->
         <div class="map-controls">
-          <button class="map-control-button" title="확대">+</button>
-          <button class="map-control-button" title="축소">-</button>
-          <button class="map-control-button" title="뷰 초기화">⌖</button>
+          <button class="map-control-button" title="확대" @click=${() => this.zoomIn()}>+</button>
+          <button class="map-control-button" title="축소" @click=${() => this.zoomOut()}>-</button>
+          <button class="map-control-button" title="뷰 초기화" @click=${() => this.resetView()}>⌖</button>
         </div>
 
-        <!-- 지도 스케일 -->
-        <div class="map-scale">
-          ↑ N<br />
-          25km
+        <!-- 스케일 및 방향 정보 (오른쪽 하단) -->
+        <div class="map-scale-direction">
+          <div class="north-arrow">↑ N</div>
+          <div class="scale-info">25km</div>
         </div>
 
         <!-- 공통 Google Maps 컴포넌트 사용 -->
@@ -194,7 +264,16 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
           .zoom=${7}
           .locations=${this.mapLocations}
           .clusterZoom=${10}
+          .controls=${{
+            zoomControl: false,
+            mapTypeControl: false,
+            scaleControl: false,
+            streetViewControl: false,
+            rotateControl: false,
+            fullscreenControl: false
+        }}
           @map-change=${this.onMapChange}
+          @region-click=${this.onRegionClick}
         ></common-google-map>
       </div>
     `;
@@ -212,10 +291,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiMapPanel.prototype, "map", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiMapPanel.prototype, "mapInitialized", void 0);
 KpiMapPanel = __decorate([
     customElement('kpi-map-panel')
 ], KpiMapPanel);