@things-factory/kpi 9.0.29 → 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

@@ -0,0 +1,370 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ScrollbarStyles } from '@operato/styles'
+
+import GoogleMapLoader from './google-map-loader.js'
+
+declare global {
+  interface Window {
+    google: any
+    markerClusterer?: any
+  }
+}
+
+declare const google: any
+
+declare namespace google.maps {
+  interface MapsLibrary {
+    Map: any
+    InfoWindow: any
+  }
+
+  interface MarkerLibrary {
+    AdvancedMarkerElement: any
+    PinElement: any
+  }
+}
+
+@customElement('common-google-map')
+export class CommonGoogleMap extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+      }
+
+      [map] {
+        flex: 1;
+      }
+
+      .gm-style .gm-style-iw-c {
+        padding: 0;
+      }
+
+      .gm-style .gm-style-iw-d {
+        overflow: auto !important;
+      }
+      .gm-style .gm-style-iw-d + button {
+        top: 0 !important;
+        right: 0 !important;
+      }
+    `
+  ]
+
+  @property({ type: Object }) center
+  @property({ type: Number }) zoom
+  @property({ type: Array }) locations: any[] = []
+  @property({ type: Object }) focused
+  @property({ type: Array }) polygons
+  @property({ type: Array }) polylines
+  @property({ type: Array }) markers
+  @property({ type: Array }) boundCoords
+  @property({ type: Object }) controls
+  @property({ type: Number }) clusterZoom = 10
+
+  @state() map: any = null
+  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }
+  private _infoWindow: any = null
+  private _markerClusterer: any = null
+
+  get anchor() {
+    return this.renderRoot.querySelector('[map]')
+  }
+
+  async readyMap() {
+    await GoogleMapLoader.load()
+
+    // MarkerClusterer 라이브러리 로드
+    if (!window.markerClusterer) {
+      await GoogleMapLoader.loadMarkerClusterer()
+    }
+
+    if (this.map) {
+      return
+    }
+
+    // DOM이 준비될 때까지 기다림
+    await this.updateComplete
+
+    // anchor가 준비될 때까지 기다림
+    let attempts = 0
+    const maxAttempts = 20
+    while (attempts < maxAttempts) {
+      const anchor = this.anchor as HTMLElement
+      if (anchor && anchor.offsetWidth > 0) {
+        break
+      }
+      await new Promise(resolve => setTimeout(resolve, 50))
+      attempts++
+    }
+
+    if (!this.anchor) {
+      console.error('Map anchor element not found')
+      return
+    }
+
+    var show = async (center, zoom) => {
+      try {
+        // Google Maps 최신 API 사용
+        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary
+
+        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))
+
+        this.map = map
+
+        this.dispatchEvent(
+          new CustomEvent('map-change', {
+            detail: this.map
+          })
+        )
+
+        this.resetBounds()
+      } catch (e) {
+        console.error(e)
+      }
+    }
+
+    var { center, zoom = 10 } = this
+
+    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */
+    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {
+      navigator.geolocation.getCurrentPosition(
+        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),
+        err => {
+          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)
+          show(this.defaultCenter, zoom)
+        },
+        {
+          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */
+          timeout: 500
+        }
+      )
+    } else {
+      show(center, zoom)
+    }
+  }
+
+  async buildMarkers(locations: any[] = []) {
+    if (!this.map) {
+      return
+    }
+
+    if (this.markers) {
+      this.markers.forEach(marker => marker.setMap(null))
+      this.markers = []
+    }
+
+    // 기존 클러스터 제거
+    if (this._markerClusterer) {
+      this._markerClusterer.clearMarkers()
+      this._markerClusterer = null
+    }
+
+    // Google Maps 최신 API 사용
+    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(
+      'marker'
+    )) as google.maps.MarkerLibrary
+
+    this.markers = locations
+      .map(location => {
+        // location 객체가 유효한지 확인
+        if (!location || typeof location !== 'object') {
+          console.warn('Invalid location object:', location)
+          return null
+        }
+
+        // lat, lng 값이 유효한지 확인
+        const lat = parseFloat(location.lat)
+        const lng = parseFloat(location.lng)
+
+        if (isNaN(lat) || isNaN(lng)) {
+          console.warn('Invalid lat/lng values:', location)
+          return null
+        }
+
+        // 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, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+          content: markerElement
+        })
+
+        marker.addListener('click', () => {
+          // InfoWindow 대신 커스텀 이벤트 발생
+          if (location?.region) {
+            this.dispatchEvent(
+              new CustomEvent('region-click', {
+                detail: { region: location.region },
+                bubbles: true,
+                composed: true
+              })
+            )
+          }
+        })
+
+        return marker
+      })
+      .filter(marker => marker !== null) // null 마커 제거
+
+    // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)
+    if (this.markers.length > 0 && window.markerClusterer) {
+      this._markerClusterer = new window.markerClusterer.MarkerClusterer({
+        markers: this.markers,
+        map: this.map
+      })
+    }
+  }
+
+  get infoWindow() {
+    if (!this._infoWindow && this.map) {
+      this._infoWindow = new google.maps.InfoWindow({
+        content: 'loading...'
+      })
+    }
+
+    return this._infoWindow
+  }
+
+  setFocus(focus, icon) {
+    focus.setZIndex(1)
+    focus.setIcon(icon)
+  }
+
+  resetFocus(focus, icon) {
+    focus.setZIndex(0)
+    focus.setIcon(icon)
+  }
+
+  async changeFocus(after, before) {
+    await this.readyMap()
+
+    // map이 준비되지 않았으면 포커스 변경하지 않음
+    if (!this.map) {
+      return
+    }
+
+    var locations = this.locations || []
+
+    if (before) {
+      var idx = locations.findIndex(location => {
+        // location 객체의 구조를 안전하게 확인
+        const beforePos = before?.position
+        const locationPos = location?.position
+
+        return (
+          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng
+        )
+      })
+      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)
+    }
+
+    if (after) {
+      var idx = locations.findIndex(location => {
+        // location 객체의 구조를 안전하게 확인
+        const afterPos = after?.position
+        const locationPos = location?.position
+
+        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng
+      })
+      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)
+    }
+  }
+
+  async updated(changes) {
+    if (!this.map) {
+      await this.readyMap()
+    }
+
+    if (changes.has('locations')) {
+      this.buildMarkers(this.locations)
+    }
+
+    if (changes.has('focused')) {
+      this.changeFocus(this.focused, changes.get('focused'))
+    }
+
+    if (changes.has('center')) {
+      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))
+    }
+
+    if (changes.has('polylines')) {
+      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))
+      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))
+    }
+
+    if (changes.has('markers')) {
+      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))
+      ;(this.markers || []).forEach(marker => marker.setMap(this.map))
+    }
+
+    if (changes.has('boundCoords')) {
+      this.resetBounds()
+    }
+
+    // 클러스터링 설정 변경 시 마커 재구성
+    if (changes.has('clusterZoom')) {
+      this.buildMarkers(this.locations)
+    }
+  }
+
+  render() {
+    return html` <div map></div> `
+  }
+
+  resetBounds() {
+    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {
+      return
+    }
+
+    var bounds = new google.maps.LatLngBounds()
+    this.boundCoords.forEach(coord => bounds.extend(coord))
+    this.map.fitBounds(bounds)
+  }
+}

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

@@ -0,0 +1,29 @@
+import ScriptLoader from '@operato/utils/script-loader.js'
+
+export default class GoogleMapLoader {
+  static loaded = false
+  static markerClustererLoaded = false
+
+  static async load() {
+    if (GoogleMapLoader.loaded) {
+      return
+    }
+    var key = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA'
+
+    await ScriptLoader.load(
+      'https://maps.googleapis.com/maps/api/js' + (key ? '?key=' + key : '') + '&libraries=places'
+    )
+    GoogleMapLoader.loaded = true
+  }
+
+  static async loadMarkerClusterer() {
+    if (GoogleMapLoader.markerClustererLoaded) {
+      return
+    }
+
+    // Google Maps 공식 MarkerClusterer 라이브러리 로드
+    await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js')
+
+    GoogleMapLoader.markerClustererLoaded = true
+  }
+}