@things-factory/kpi 9.0.31 → 9.0.33

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ScrollbarStyles } from '@operato/styles'
 
 import '../../../charts/kpi-radar-chart.js'
 import '../../../charts/kpi-boxplot-chart.js'
@@ -7,165 +8,168 @@ import '../../../charts/kpi-mini-trend-chart.js'
 
 @customElement('kpi-left-panel')
 export class KpiLeftPanel extends LitElement {
-  static 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;
-    }
-  `
+  static styles = [
+    ScrollbarStyles,
+    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: 20px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      .panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        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;
+      }
+    `
+  ]
 
   @property({ type: String }) selectedCategory = '전체 KPI'
   @property({ type: String }) selectedChartType = 'boxplot'
@@ -174,6 +178,27 @@ export class KpiLeftPanel extends LitElement {
   @state() private chartData: any[] = []
   @state() private chartCategories: string[] = []
 
+  // 행정안전부 행정구역코드 순서
+  private readonly regionOrder = [
+    '서울특별시',
+    '부산광역시',
+    '대구광역시',
+    '인천광역시',
+    '광주광역시',
+    '대전광역시',
+    '울산광역시',
+    '세종특별자치시',
+    '경기도',
+    '강원도',
+    '충청북도',
+    '충청남도',
+    '전라북도',
+    '전라남도',
+    '경상북도',
+    '경상남도',
+    '제주특별자치도'
+  ]
+
   connectedCallback() {
     super.connectedCallback()
     this.generateChartData()
@@ -280,6 +305,18 @@ export class KpiLeftPanel extends LitElement {
     )
   }
 
+  // regionOrder에 따라 지역 데이터를 정렬
+  private getSortedRegionData() {
+    // 모든 시도에 대한 데이터 생성
+    return this.regionOrder.map(regionName => ({
+      region: regionName,
+      kpi: (Math.random() * 30 + 70).toFixed(1), // 70-100 범위
+      change: (Math.random() * 0.4 - 0.2).toFixed(2), // -0.2 ~ 0.2 범위
+      lat: 36.5,
+      lng: 127.5
+    }))
+  }
+
   private getChangeRateClass(change: number): string {
     if (change > 0) return 'change-up'
     if (change < 0) return 'change-down'
@@ -334,6 +371,7 @@ export class KpiLeftPanel extends LitElement {
                     .groups=${this.chartCategories}
                     .valueKey=${'value'}
                     .currentGroup=${this.selectedCategory}
+                    .independentScale=${true}
                   ></kpi-boxplot-chart>
                 `
               : html`
@@ -360,7 +398,7 @@ export class KpiLeftPanel extends LitElement {
               </tr>
             </thead>
             <tbody>
-              ${this.mapData?.slice(0, 5).map(
+              ${this.getSortedRegionData().map(
                 (item: any) => html`
                   <tr
                     style="cursor: pointer; transition: background-color 0.2s;"

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

@@ -56,6 +56,40 @@ export class KpiMapPanel extends LitElement {
     .category-button.active:hover {
       background: #5a6fd8;
     }
+    .period-form {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #e9ecef;
+    }
+    .period-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .period-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #495057;
+      min-width: 40px;
+    }
+    .period-select {
+      padding: 4px 8px;
+      border: 1px solid #ced4da;
+      border-radius: 4px;
+      background: white;
+      font-size: 0.8rem;
+      cursor: pointer;
+    }
+    .period-select:focus {
+      outline: none;
+      border-color: #667eea;
+    }
+    .period-separator {
+      font-size: 0.85rem;
+      color: #6c757d;
+      margin: 0 4px;
+    }
     .map-container {
       flex: 1;
       position: relative;
@@ -117,6 +151,10 @@ export class KpiMapPanel extends LitElement {
   @property({ type: Array }) mapData: any[] = []
 
   @state() private map: any = null
+  @state() private startYear = '전체'
+  @state() private startMonth = '전체'
+  @state() private endYear = '전체'
+  @state() private endMonth = '전체'
 
   // mapData를 지도 마커 형식으로 변환
   get mapLocations() {
@@ -222,6 +260,21 @@ export class KpiMapPanel extends LitElement {
     }
   }
 
+  private onPeriodChange() {
+    this.dispatchEvent(
+      new CustomEvent('period-change', {
+        detail: {
+          startYear: this.startYear,
+          startMonth: this.startMonth,
+          endYear: this.endYear,
+          endMonth: this.endMonth
+        },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   render() {
     return html`
       <div class="map-overlay">
@@ -263,6 +316,86 @@ export class KpiMapPanel extends LitElement {
             환경 성과
           </button>
         </div>
+
+        <!-- 기간 선택 폼 -->
+        <div class="period-form">
+          <div class="period-row">
+            <span class="period-label">기간:</span>
+            <select
+              class="period-select"
+              .value=${this.startYear}
+              @change=${(e: Event) => {
+                this.startYear = (e.target as HTMLSelectElement).value
+                this.onPeriodChange()
+              }}
+            >
+              <option value="전체">전체</option>
+              <option value="2025">2025년</option>
+              <option value="2024">2024년</option>
+              <option value="2023">2023년</option>
+              <option value="2022">2022년</option>
+            </select>
+            <select
+              class="period-select"
+              .value=${this.startMonth}
+              @change=${(e: Event) => {
+                this.startMonth = (e.target as HTMLSelectElement).value
+                this.onPeriodChange()
+              }}
+            >
+              <option value="전체">전체</option>
+              <option value="1">1월</option>
+              <option value="2">2월</option>
+              <option value="3">3월</option>
+              <option value="4">4월</option>
+              <option value="5">5월</option>
+              <option value="6">6월</option>
+              <option value="7">7월</option>
+              <option value="8">8월</option>
+              <option value="9">9월</option>
+              <option value="10">10월</option>
+              <option value="11">11월</option>
+              <option value="12">12월</option>
+            </select>
+            <span class="period-separator">~</span>
+            <select
+              class="period-select"
+              .value=${this.endYear}
+              @change=${(e: Event) => {
+                this.endYear = (e.target as HTMLSelectElement).value
+                this.onPeriodChange()
+              }}
+            >
+              <option value="전체">전체</option>
+              <option value="2025">2025년</option>
+              <option value="2024">2024년</option>
+              <option value="2023">2023년</option>
+              <option value="2022">2022년</option>
+            </select>
+            <select
+              class="period-select"
+              .value=${this.endMonth}
+              @change=${(e: Event) => {
+                this.endMonth = (e.target as HTMLSelectElement).value
+                this.onPeriodChange()
+              }}
+            >
+              <option value="전체">전체</option>
+              <option value="1">1월</option>
+              <option value="2">2월</option>
+              <option value="3">3월</option>
+              <option value="4">4월</option>
+              <option value="5">5월</option>
+              <option value="6">6월</option>
+              <option value="7">7월</option>
+              <option value="8">8월</option>
+              <option value="9">9월</option>
+              <option value="10">10월</option>
+              <option value="11">11월</option>
+              <option value="12">12월</option>
+            </select>
+          </div>
+        </div>
       </div>
 
       <div class="map-container">

package/client/pages/kpi-dashboard/components/kpi-region-popup.ts

@@ -24,7 +24,7 @@ export class KpiRegionPopup extends LitElement {
       box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
     }
     .popup-content {
-      padding: 24px;
+      padding: 20px;
       overflow-y: auto;
       flex: 1;
     }
@@ -32,7 +32,7 @@ export class KpiRegionPopup extends LitElement {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 20px 24px;
+      padding: 20px;
       border-bottom: 1px solid #e0e0e0;
       background: #fff;
       height: 70px;
@@ -295,6 +295,7 @@ export class KpiRegionPopup extends LitElement {
                     .groups=${this.chartCategories}
                     .valueKey=${'value'}
                     .currentGroup=${this.selectedRegion || '전체'}
+                    .independentScale=${true}
                   ></kpi-boxplot-chart>
                 `
               : html`