@things-factory/kpi 9.0.30 → 9.0.31

package/client/charts/kpi-mini-trend-chart.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+@customElement('kpi-mini-trend-chart')
+export class KpiMiniTrendChart extends LitElement {
+  @property({ type: Array }) data: number[] = []
+  @property({ type: Number }) width: number = 60
+  @property({ type: Number }) height: number = 30
+  @property({ type: String }) lineColor: string = '#2196f3'
+  @property({ type: Number }) strokeWidth: number = 1.5
+  @property({ type: Boolean }) showPoints: boolean = true
+  @property({ type: Number }) pointRadius: number = 1.5
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .mini-chart {
+      width: 100%;
+      height: 100%;
+      background: #f8f9fa;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .trend-line {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .data-point {
+      fill: white;
+      stroke-width: 1;
+    }
+  `
+
+  render() {
+    return html`
+      <div class="mini-chart">
+        <svg
+          id="mini-trend"
+          width=${this.width}
+          height=${this.height}
+          viewBox="0 0 ${this.width} ${this.height}"
+          preserveAspectRatio="xMidYMid meet"
+        ></svg>
+      </div>
+    `
+  }
+
+  updated() {
+    this.drawMiniTrend()
+  }
+
+  drawMiniTrend() {
+    if (!this.data || this.data.length === 0) return
+
+    const svg = d3.select(this.renderRoot.querySelector('#mini-trend'))
+    svg.selectAll('*').remove()
+
+    const margin = { top: 2, right: 2, bottom: 2, left: 2 }
+    const width = this.width - margin.left - margin.right
+    const height = this.height - margin.top - margin.bottom
+
+    // 스케일 설정
+    const xScale = d3
+      .scaleLinear()
+      .domain([0, this.data.length - 1])
+      .range([0, width])
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, d3.max(this.data) || 100])
+      .range([height, 0])
+
+    // SVG 설정
+    svg.attr('width', this.width).attr('height', this.height)
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+
+    // 라인 생성기
+    const line = d3
+      .line<number>()
+      .x((d, i) => xScale(i))
+      .y(d => yScale(d))
+      .curve(d3.curveMonotoneX)
+
+    // 트렌드 라인 그리기
+    g.append('path')
+      .datum(this.data)
+      .attr('class', 'trend-line')
+      .attr('d', line as any)
+      .attr('stroke', this.lineColor)
+      .attr('stroke-width', this.strokeWidth)
+
+    // 데이터 포인트 그리기 (첫 번째와 마지막 포인트만)
+    if (this.showPoints && this.data.length > 0) {
+      // 첫 번째 포인트
+      g.append('circle')
+        .attr('class', 'data-point')
+        .attr('cx', xScale(0))
+        .attr('cy', yScale(this.data[0]))
+        .attr('r', this.pointRadius)
+        .attr('stroke', '#4caf50')
+        .attr('fill', 'white')
+
+      // 마지막 포인트
+      if (this.data.length > 1) {
+        g.append('circle')
+          .attr('class', 'data-point')
+          .attr('cx', xScale(this.data.length - 1))
+          .attr('cy', yScale(this.data[this.data.length - 1]))
+          .attr('r', this.pointRadius)
+          .attr('stroke', '#2196f3')
+          .attr('fill', 'white')
+      }
+    }
+  }
+}

package/client/charts/kpi-trend-chart.ts

@@ -0,0 +1,163 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+@customElement('kpi-trend-chart')
+export class KpiTrendChart extends LitElement {
+  @property({ type: Array }) data: { date: string; value: number; color?: string }[] = []
+  @property({ type: String }) valueKey: string = 'value'
+  @property({ type: String }) dateKey: string = 'date'
+  @property({ type: Number }) width: number = 400
+  @property({ type: Number }) height: number = 200
+  @property({ type: String }) lineColor: string = '#2196f3'
+  @property({ type: Number }) strokeWidth: number = 2
+  @property({ type: Boolean }) showPoints: boolean = true
+  @property({ type: Number }) pointRadius: number = 4
+
+  private chartWidth = 0
+  private chartHeight = 0
+  private resizeObserver?: ResizeObserver
+
+  static 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 {
+      stroke: #ddd;
+    }
+
+    .axis text {
+      font-size: 10px;
+      fill: #666;
+    }
+  `
+
+  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() {
+    this.resizeObserver?.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: 30, 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) as [Date, 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 xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat('%m/%d')).ticks(5)
+
+    const yAxis = d3.axisLeft(yScale).ticks(5)
+
+    g.append('g').attr('class', 'axis').attr('transform', `translate(0,${chartHeight})`).call(xAxis)
+
+    g.append('g').attr('class', 'axis').call(yAxis)
+
+    // 라인 생성기
+    const line = d3
+      .line<{ date: Date; value: number; color: string }>()
+      .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 as any)
+      .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')
+    }
+  }
+}

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

@@ -109,11 +109,18 @@ export class CommonGoogleMap extends LitElement {
         // Google Maps 최신 API 사용
         const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary
 
-        const map = new Map(this.anchor, {
+        const mapOptions = {
           zoom,
           center,
           mapId: 'DEMO_MAP_ID'
-        })
+        }
+
+        // controls 속성이 있으면 지도 옵션에 추가
+        if (this.controls) {
+          Object.assign(mapOptions, this.controls)
+        }
+
+        const map = new Map(this.anchor, mapOptions)
 
         this.markers && this.markers.forEach(marker => marker.setMap(map))
 
@@ -192,17 +199,40 @@ export class CommonGoogleMap extends LitElement {
         // LatLng 객체 생성
         const position = new google.maps.LatLng(lat, lng)
 
+        // 커스텀 마커 콘텐츠가 있으면 사용
+        let markerElement
+        if (location.markerContent) {
+          // HTML 문자열을 DOM 요소로 변환
+          const tempDiv = document.createElement('div')
+          tempDiv.innerHTML = location.markerContent
+          markerElement = tempDiv.firstElementChild
+        } else {
+          // 기본 핀 사용
+          markerElement = new PinElement({
+            background: '#1976d2',
+            borderColor: '#1565c0',
+            glyphColor: '#ffffff',
+            scale: 1.2
+          })
+        }
+
         // AdvancedMarkerElement 사용
         const marker = new AdvancedMarkerElement({
           position: position,
-          map: null // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+          map: null, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+          content: markerElement
         })
 
         marker.addListener('click', () => {
-          if (location?.content) {
-            var infowindow = this.infoWindow
-            infowindow.open(this.map, marker)
-            infowindow.setContent(location.content)
+          // InfoWindow 대신 커스텀 이벤트 발생
+          if (location?.region) {
+            this.dispatchEvent(
+              new CustomEvent('region-click', {
+                detail: { region: location.region },
+                bubbles: true,
+                composed: true
+              })
+            )
           }
         })
 
@@ -291,6 +321,14 @@ export class CommonGoogleMap extends LitElement {
       this.map.setCenter(this.center)
     }
 
+    if (changes.has('controls')) {
+      // controls가 변경되면 기존 지도의 옵션만 업데이트
+      if (this.map && this.controls) {
+        // Google Maps API의 setOptions 메서드 사용
+        this.map.setOptions(this.controls)
+      }
+    }
+
     if (changes.has('polygons')) {
       ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))
       ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))

package/client/google-map/google-map-loader.ts

@@ -1,4 +1,4 @@
-import ScriptLoader from './script-loader.js'
+import ScriptLoader from '@operato/utils/script-loader.js'
 
 export default class GoogleMapLoader {
   static loaded = false

package/client/pages/kpi-dashboard/components/kpi-chart-toggle.ts

@@ -1,6 +1,5 @@
-import { html, css } from 'lit'
+import { LitElement, html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { LitElement } from 'lit'
 
 @customElement('kpi-chart-toggle')
 export class KpiChartToggle extends LitElement {