@dssp/dkpi 1.0.0-alpha.87 → 1.0.0-alpha.89

package/dist-client/components/kpi-step-lookup-chart.js

@@ -0,0 +1,181 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiStepLookupChart = class KpiStepLookupChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.grades = [];
+        this.value = null;
+        this.score = null;
+        this.unit = '';
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    render() {
+        return html `
+      <svg
+        id="step-lookup-chart"
+        width=${this.chartWidth}
+        height=${this.chartHeight}
+        viewBox="0 0 ${this.chartWidth} ${this.chartHeight}"
+        preserveAspectRatio="xMidYMid meet"
+      ></svg>
+    `;
+    }
+    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.renderChart();
+    }
+    renderChart() {
+        var _a;
+        const svg = d3.select(this.renderRoot.querySelector('#step-lookup-chart'));
+        if (svg.empty())
+            return;
+        svg.selectAll('*').remove();
+        if (!Array.isArray(this.grades) || this.grades.length === 0)
+            return;
+        const w = this.chartWidth || 400;
+        const h = this.chartHeight || 200;
+        const margin = { top: 20, right: 30, bottom: 45, left: 55 };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        if (plotW <= 0 || plotH <= 0)
+            return;
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        const sorted = [...this.grades].filter(gr => gr && gr.score != null).sort((a, b) => a.minValue - b.minValue);
+        if (sorted.length === 0)
+            return;
+        // x 도메인: 마지막 개방 구간의 maxValue(999/99999 등 sentinel) 는 outlier 라 제외해야
+        // 함. 고정 임계값 대신 '두 번째로 큰 maxValue' 를 유한 한계로 사용(=outlier 자동 제외).
+        const allMaxValues = sorted.map(gr => gr.maxValue).sort((a, b) => a - b);
+        const secondLargestMax = allMaxValues.length > 1 ? allMaxValues[allMaxValues.length - 2] : allMaxValues[0];
+        const lastGradeMin = sorted[sorted.length - 1].minValue;
+        const xMin = sorted[0].minValue;
+        let xMax = Math.max(secondLargestMax, lastGradeMin);
+        xMax = xMax + Math.max(xMax - xMin, 0.1) * 0.15; // 마지막 개방 구간 꼬리 확장
+        if (this.value != null)
+            xMax = Math.max(xMax, this.value * 1.05);
+        const maxScore = Math.max(...sorted.map(gr => gr.score));
+        const xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, plotW]);
+        const yScale = d3.scaleLinear().domain([0, maxScore]).range([plotH, 0]);
+        // 등급 구간별 계단 사각형 — (min,0)-(max,0)-(max,score)-(min,score)
+        // p12 도식: 흰 바탕 + 외곽선으로 오름 계단을 그리고, 현재 측정값이 속한 구간만 채워 강조.
+        sorted.forEach(gr => {
+            const score = gr.score;
+            const x0 = xScale(gr.minValue);
+            const x1 = xScale(Math.min(gr.maxValue, xMax)); // 개방 구간(sentinel)은 도메인 끝에서 잘림
+            const yTop = yScale(score);
+            const yBase = yScale(0);
+            const isCurrent = this.value != null && this.value >= gr.minValue && this.value < gr.maxValue;
+            g.append('rect')
+                .attr('x', x0)
+                .attr('y', yTop)
+                .attr('width', Math.max(0, x1 - x0))
+                .attr('height', Math.max(0, yBase - yTop))
+                .attr('fill', isCurrent ? '#d2691e' : '#ffffff')
+                .attr('fill-opacity', isCurrent ? 0.85 : 1)
+                .attr('stroke', '#5b6b7b')
+                .attr('stroke-width', 1);
+        });
+        // 축
+        const xAxis = d3.axisBottom(xScale).ticks(6);
+        const yAxis = d3
+            .axisLeft(yScale)
+            .tickValues(d3.range(1, maxScore + 1))
+            .tickFormat(d3.format('d'));
+        g.append('g').attr('transform', `translate(0,${plotH})`).call(xAxis);
+        g.append('g').call(yAxis);
+        // 축 라벨
+        g.append('text')
+            .attr('x', plotW / 2)
+            .attr('y', plotH + 38)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '12px')
+            .attr('fill', '#666')
+            .text(`측정값${this.unit ? ` (${this.unit})` : ''}`);
+        g.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -plotH / 2)
+            .attr('y', -38)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '12px')
+            .attr('fill', '#666')
+            .text('성과 점수');
+        // 현재 측정값 마커 — (측정값, 점수). 점수는 저장값(score) 우선, 없으면 해당 구간 점수.
+        if (this.value != null) {
+            const band = sorted.find(gr => this.value >= gr.minValue && (gr.maxValue >= 9999 ? true : this.value < gr.maxValue));
+            const sc = this.score != null ? this.score : ((_a = band === null || band === void 0 ? void 0 : band.score) !== null && _a !== void 0 ? _a : null);
+            if (sc != null) {
+                const cx = xScale(this.value);
+                const cy = yScale(sc);
+                // 가이드 라인
+                g.append('line')
+                    .attr('x1', cx)
+                    .attr('x2', cx)
+                    .attr('y1', cy)
+                    .attr('y2', yScale(0))
+                    .attr('stroke', '#e53935')
+                    .attr('stroke-width', 1)
+                    .attr('stroke-dasharray', '3,3');
+                g.append('circle')
+                    .attr('cx', cx)
+                    .attr('cy', cy)
+                    .attr('r', 6)
+                    .attr('fill', '#e53935')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 2);
+            }
+        }
+    }
+};
+KpiStepLookupChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiStepLookupChart.prototype, "grades", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], KpiStepLookupChart.prototype, "value", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], KpiStepLookupChart.prototype, "score", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiStepLookupChart.prototype, "unit", void 0);
+KpiStepLookupChart = __decorate([
+    customElement('kpi-step-lookup-chart')
+], KpiStepLookupChart);
+export { KpiStepLookupChart };
+//# sourceMappingURL=kpi-step-lookup-chart.js.map

package/dist-client/components/kpi-step-lookup-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-step-lookup-chart.js","sourceRoot":"","sources":["../../client/components/kpi-step-lookup-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/**\n * 계단형(step) 등급 분포 차트\n *\n * SL-PA 결과처럼 측정값을 구간표로 1~5 이산 점수에 매핑하는 KPI 전용.\n * 각 등급 구간 [minValue, maxValue] 을 점수 높이만큼의 사각형(계단)으로 그리고,\n * 현재 측정값이 속한 구간을 강조한다. (곡선 보간 대신 이산 계단으로 표현)\n *\n * ※ 다른 KPI 차트에 영향을 주지 않도록 독립 컴포넌트로 분리.\n */\n\ninterface Grade {\n  name?: string\n  minValue: number\n  maxValue: number\n  score?: number\n  description?: string\n}\n\n@customElement('kpi-step-lookup-chart')\nexport class KpiStepLookupChart extends LitElement {\n  @property({ type: Array }) grades: Grade[] = []\n  @property({ type: Number }) value: number | null = null\n  @property({ type: Number }) score: number | null = null\n  @property({ type: String }) unit: string = ''\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      min-height: 200px;\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`\n      <svg\n        id=\"step-lookup-chart\"\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\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.renderChart()\n  }\n\n  private renderChart() {\n    const svg = d3.select(this.renderRoot.querySelector('#step-lookup-chart'))\n    if (svg.empty()) return\n    svg.selectAll('*').remove()\n\n    if (!Array.isArray(this.grades) || this.grades.length === 0) return\n\n    const w = this.chartWidth || 400\n    const h = this.chartHeight || 200\n    const margin = { top: 20, right: 30, bottom: 45, left: 55 }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n    if (plotW <= 0 || plotH <= 0) return\n\n    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n    const sorted = [...this.grades].filter(gr => gr && gr.score != null).sort((a, b) => a.minValue - b.minValue)\n    if (sorted.length === 0) return\n\n    // x 도메인: 마지막 개방 구간의 maxValue(999/99999 등 sentinel) 는 outlier 라 제외해야\n    // 함. 고정 임계값 대신 '두 번째로 큰 maxValue' 를 유한 한계로 사용(=outlier 자동 제외).\n    const allMaxValues = sorted.map(gr => gr.maxValue as number).sort((a, b) => a - b)\n    const secondLargestMax = allMaxValues.length > 1 ? allMaxValues[allMaxValues.length - 2] : allMaxValues[0]\n    const lastGradeMin = sorted[sorted.length - 1].minValue\n    const xMin = sorted[0].minValue\n    let xMax = Math.max(secondLargestMax, lastGradeMin)\n    xMax = xMax + Math.max(xMax - xMin, 0.1) * 0.15 // 마지막 개방 구간 꼬리 확장\n    if (this.value != null) xMax = Math.max(xMax, this.value * 1.05)\n\n    const maxScore = Math.max(...sorted.map(gr => gr.score as number))\n    const xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, plotW])\n    const yScale = d3.scaleLinear().domain([0, maxScore]).range([plotH, 0])\n\n    // 등급 구간별 계단 사각형 — (min,0)-(max,0)-(max,score)-(min,score)\n    // p12 도식: 흰 바탕 + 외곽선으로 오름 계단을 그리고, 현재 측정값이 속한 구간만 채워 강조.\n    sorted.forEach(gr => {\n      const score = gr.score as number\n      const x0 = xScale(gr.minValue)\n      const x1 = xScale(Math.min(gr.maxValue as number, xMax)) // 개방 구간(sentinel)은 도메인 끝에서 잘림\n      const yTop = yScale(score)\n      const yBase = yScale(0)\n      const isCurrent = this.value != null && this.value >= gr.minValue && this.value < (gr.maxValue as number)\n\n      g.append('rect')\n        .attr('x', x0)\n        .attr('y', yTop)\n        .attr('width', Math.max(0, x1 - x0))\n        .attr('height', Math.max(0, yBase - yTop))\n        .attr('fill', isCurrent ? '#d2691e' : '#ffffff')\n        .attr('fill-opacity', isCurrent ? 0.85 : 1)\n        .attr('stroke', '#5b6b7b')\n        .attr('stroke-width', 1)\n    })\n\n    // 축\n    const xAxis = d3.axisBottom(xScale).ticks(6)\n    const yAxis = d3\n      .axisLeft(yScale)\n      .tickValues(d3.range(1, maxScore + 1))\n      .tickFormat(d3.format('d'))\n\n    g.append('g').attr('transform', `translate(0,${plotH})`).call(xAxis as any)\n    g.append('g').call(yAxis as any)\n\n    // 축 라벨\n    g.append('text')\n      .attr('x', plotW / 2)\n      .attr('y', plotH + 38)\n      .attr('text-anchor', 'middle')\n      .attr('font-size', '12px')\n      .attr('fill', '#666')\n      .text(`측정값${this.unit ? ` (${this.unit})` : ''}`)\n\n    g.append('text')\n      .attr('transform', 'rotate(-90)')\n      .attr('x', -plotH / 2)\n      .attr('y', -38)\n      .attr('text-anchor', 'middle')\n      .attr('font-size', '12px')\n      .attr('fill', '#666')\n      .text('성과 점수')\n\n    // 현재 측정값 마커 — (측정값, 점수). 점수는 저장값(score) 우선, 없으면 해당 구간 점수.\n    if (this.value != null) {\n      const band = sorted.find(\n        gr => this.value! >= gr.minValue && (gr.maxValue >= 9999 ? true : this.value! < gr.maxValue)\n      )\n      const sc = this.score != null ? this.score : (band?.score ?? null)\n      if (sc != null) {\n        const cx = xScale(this.value)\n        const cy = yScale(sc)\n        // 가이드 라인\n        g.append('line')\n          .attr('x1', cx)\n          .attr('x2', cx)\n          .attr('y1', cy)\n          .attr('y2', yScale(0))\n          .attr('stroke', '#e53935')\n          .attr('stroke-width', 1)\n          .attr('stroke-dasharray', '3,3')\n        g.append('circle')\n          .attr('cx', cx)\n          .attr('cy', cy)\n          .attr('r', 6)\n          .attr('fill', '#e53935')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 2)\n      }\n    }\n  }\n}\n"]}

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

@@ -60,10 +60,10 @@ let SvKpiTrendChart = class SvKpiTrendChart extends LitElement {
         const height = this.chartHeight || this.height;
         const chartWidth = width - margin.left - margin.right;
         const chartHeight = height - margin.top - margin.bottom;
-        // 데이터 파싱
+        // 데이터 파싱 — value 가 null/undefined 인 월은 '데이터 없음'(0 아님)으로 보존해 플로팅에서 제외
         const parsedData = this.data.map(d => ({
             date: new Date(d[this.dateKey]),
-            value: +d[this.valueKey],
+            value: d[this.valueKey] == null ? null : +d[this.valueKey],
             color: d.color || this.lineColor
         }));
         // 스케일 설정
@@ -73,23 +73,13 @@ let SvKpiTrendChart = class SvKpiTrendChart extends LitElement {
             .range([0, chartWidth]);
         const yScale = d3
             .scaleLinear()
-            .domain([0, d3.max(parsedData, d => d.value) || 100])
+            .domain([0, d3.max(parsedData, d => (d.value == null ? undefined : 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);
-            }
-        };
+        // 축은 항상 연-월(YYYY-MM) 표기 — 월/일 대신
+        const timeFormat = (date) => d3.timeFormat('%Y-%m')(date);
         const xAxis = d3.axisBottom(xScale).tickFormat(timeFormat).ticks(Math.min(parsedData.length, 10));
         const yAxis = d3.axisLeft(yScale).ticks(5);
         // X축 그리드 라인 추가
@@ -111,23 +101,54 @@ let SvKpiTrendChart = class SvKpiTrendChart extends LitElement {
             .attr('dy', '.3em')
             .attr('transform', 'rotate(-30)');
         g.append('g').attr('class', 'axis').call(yAxis);
-        // 라인 생성기
+        // 라인 생성기 — defined() 로 데이터 없는(null) 월은 선을 끊어 gap 처리
         const line = d3
             .line()
+            .defined(d => d.value != null)
             .x(d => xScale(d.date))
             .y(d => yScale(d.value))
             .curve(d3.curveMonotoneX);
-        // 트렌드 라인 그리기
+        // 트렌드 라인(실선) — 연속 구간만 (defined() 로 null 월에서 끊김)
         g.append('path')
             .datum(parsedData)
             .attr('class', 'trend-line')
             .attr('d', line)
             .attr('stroke', this.lineColor)
-            .attr('stroke-width', this.strokeWidth);
-        // 데이터 포인트 그리기
+            .attr('stroke-width', this.strokeWidth)
+            .attr('fill', 'none');
+        // 결손 구간 점선 다리 — 사이에 데이터 없는 월이 낀 두 데이터점을 점선으로 연결
+        const present = parsedData.map((d, i) => (Object.assign(Object.assign({}, d), { i }))).filter(d => d.value != null);
+        for (let k = 1; k < present.length; k++) {
+            const a = present[k - 1];
+            const b = present[k];
+            if (b.i - a.i > 1) {
+                g.append('line')
+                    .attr('x1', xScale(a.date))
+                    .attr('y1', yScale(a.value))
+                    .attr('x2', xScale(b.date))
+                    .attr('y2', yScale(b.value))
+                    .attr('stroke', this.lineColor)
+                    .attr('stroke-width', this.strokeWidth)
+                    .attr('stroke-dasharray', '4,3');
+            }
+        }
+        // 뒷부분(기간 끝)에 데이터가 없으면 마지막 데이터값에서 기간 끝까지 같은 값으로 수평 점선 연장
+        const lastPresent = present[present.length - 1];
+        const lastAll = parsedData[parsedData.length - 1];
+        if (lastPresent && lastAll && lastPresent.i < parsedData.length - 1) {
+            g.append('line')
+                .attr('x1', xScale(lastPresent.date))
+                .attr('y1', yScale(lastPresent.value))
+                .attr('x2', xScale(lastAll.date))
+                .attr('y2', yScale(lastPresent.value)) // 같은 값(수평)
+                .attr('stroke', this.lineColor)
+                .attr('stroke-width', this.strokeWidth)
+                .attr('stroke-dasharray', '4,3');
+        }
+        // 데이터 포인트 그리기 — 데이터 있는 월만 (null 월은 점 미표시)
         if (this.showPoints) {
             g.selectAll('.data-point')
-                .data(parsedData)
+                .data(parsedData.filter(d => d.value != null))
                 .enter()
                 .append('circle')
                 .attr('class', 'data-point')

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

@@ -1 +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"]}
+{"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    // 데이터 파싱 — value 가 null/undefined 인 월은 '데이터 없음'(0 아님)으로 보존해 플로팅에서 제외\n    const parsedData = this.data.map(d => ({\n      date: new Date(d[this.dateKey]),\n      value: d[this.valueKey] == null ? null : +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 == null ? undefined : 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    // 축은 항상 연-월(YYYY-MM) 표기 — 월/일 대신\n    const timeFormat = (date: Date) => d3.timeFormat('%Y-%m')(date)\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    // 라인 생성기 — defined() 로 데이터 없는(null) 월은 선을 끊어 gap 처리\n    const line = d3\n      .line<{ date: Date; value: number | null; color: string }>()\n      .defined(d => d.value != null)\n      .x(d => xScale(d.date))\n      .y(d => yScale(d.value as number))\n      .curve(d3.curveMonotoneX)\n\n    // 트렌드 라인(실선) — 연속 구간만 (defined() 로 null 월에서 끊김)\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      .attr('fill', 'none')\n\n    // 결손 구간 점선 다리 — 사이에 데이터 없는 월이 낀 두 데이터점을 점선으로 연결\n    const present = parsedData.map((d, i) => ({ ...d, i })).filter(d => d.value != null)\n    for (let k = 1; k < present.length; k++) {\n      const a = present[k - 1]\n      const b = present[k]\n      if (b.i - a.i > 1) {\n        g.append('line')\n          .attr('x1', xScale(a.date))\n          .attr('y1', yScale(a.value as number))\n          .attr('x2', xScale(b.date))\n          .attr('y2', yScale(b.value as number))\n          .attr('stroke', this.lineColor)\n          .attr('stroke-width', this.strokeWidth)\n          .attr('stroke-dasharray', '4,3')\n      }\n    }\n\n    // 뒷부분(기간 끝)에 데이터가 없으면 마지막 데이터값에서 기간 끝까지 같은 값으로 수평 점선 연장\n    const lastPresent = present[present.length - 1]\n    const lastAll = parsedData[parsedData.length - 1]\n    if (lastPresent && lastAll && lastPresent.i < parsedData.length - 1) {\n      g.append('line')\n        .attr('x1', xScale(lastPresent.date))\n        .attr('y1', yScale(lastPresent.value as number))\n        .attr('x2', xScale(lastAll.date))\n        .attr('y2', yScale(lastPresent.value as number)) // 같은 값(수평)\n        .attr('stroke', this.lineColor)\n        .attr('stroke-width', this.strokeWidth)\n        .attr('stroke-dasharray', '4,3')\n    }\n\n    // 데이터 포인트 그리기 — 데이터 있는 월만 (null 월은 점 미표시)\n    if (this.showPoints) {\n      g.selectAll('.data-point')\n        .data(parsedData.filter(d => d.value != null))\n        .enter()\n        .append('circle')\n        .attr('class', 'data-point')\n        .attr('cx', d => xScale(d.date))\n        .attr('cy', d => yScale(d.value as number))\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.js

@@ -109,6 +109,7 @@ let CommonGoogleMap = class CommonGoogleMap extends LitElement {
         const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
         this.markers = locations
             .map(location => {
+            var _a;
             // location 객체가 유효한지 확인
             if (!location || typeof location !== 'object') {
                 console.warn('Invalid location object:', location);
@@ -141,10 +142,13 @@ let CommonGoogleMap = class CommonGoogleMap extends LitElement {
                 });
             }
             // AdvancedMarkerElement 사용
+            // collisionBehavior: 레이블(마커)이 서로 겹치면 우선순위 낮은 쪽을 자동 숨김 →
+            // 시도/시군구 레이블이 축척에 따라 겹쳐 보이는 문제 완화.
             const marker = new AdvancedMarkerElement({
                 position: position,
                 map: this.map,
-                content: markerElement
+                content: markerElement,
+                collisionBehavior: (_a = google.maps.CollisionBehavior) === null || _a === void 0 ? void 0 : _a.OPTIONAL_AND_HIDES_LOWER_PRIORITY
             });
             marker.addListener('click', () => {
                 // InfoWindow 대신 커스텀 이벤트 발생

package/dist-client/google-map/common-google-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"common-google-map.js","sourceRoot":"","sources":["../../client/google-map/common-google-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport GoogleMapLoader from './google-map-loader.js'\n\ndeclare global {\n  interface Window {\n    google: any\n    markerClusterer?: any\n  }\n}\n\ndeclare const google: any\n\ndeclare namespace google.maps {\n  interface MapsLibrary {\n    Map: any\n    InfoWindow: any\n  }\n\n  interface MarkerLibrary {\n    AdvancedMarkerElement: any\n    PinElement: any\n  }\n}\n\n@customElement('common-google-map')\nexport class CommonGoogleMap extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      [map] {\n        flex: 1;\n      }\n\n      .gm-style .gm-style-iw-c {\n        padding: 0;\n      }\n\n      .gm-style .gm-style-iw-d {\n        overflow: auto !important;\n      }\n      .gm-style .gm-style-iw-d + button {\n        top: 0 !important;\n        right: 0 !important;\n      }\n    `\n  ]\n\n  @property({ type: Object }) center\n  @property({ type: Number }) zoom\n  @property({ type: Array }) locations: any[] = []\n  @property({ type: Object }) focused\n  @property({ type: Array }) polygons\n  @property({ type: Array }) polylines\n  @property({ type: Array }) markers\n  @property({ type: Array }) boundCoords\n  @property({ type: Object }) controls\n  @property({ type: Number }) clusterZoom = 10\n\n  @state() map: any = null\n  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }\n  private _infoWindow: any = null\n  private _markerClusterer: any = null\n  private _buildMarkersTimer: any = null\n\n  get anchor() {\n    return this.renderRoot.querySelector('[map]')\n  }\n\n  async readyMap() {\n    await GoogleMapLoader.load()\n\n    // MarkerClusterer 라이브러리 로드\n    if (!window.markerClusterer) {\n      await GoogleMapLoader.loadMarkerClusterer()\n    }\n\n    if (this.map) {\n      return\n    }\n\n    // DOM이 준비될 때까지 기다림\n    await this.updateComplete\n\n    // anchor가 준비될 때까지 기다림\n    let attempts = 0\n    const maxAttempts = 20\n    while (attempts < maxAttempts) {\n      const anchor = this.anchor as HTMLElement\n      if (anchor && anchor.offsetWidth > 0) {\n        break\n      }\n      await new Promise(resolve => setTimeout(resolve, 50))\n      attempts++\n    }\n\n    if (!this.anchor) {\n      console.error('Map anchor element not found')\n      return\n    }\n\n    var show = async (center, zoom) => {\n      try {\n        // Google Maps 최신 API 사용\n        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary\n\n        const mapOptions = {\n          zoom,\n          center,\n          mapId: 'DEMO_MAP_ID'\n        }\n\n        // controls 속성이 있으면 지도 옵션에 추가\n        if (this.controls) {\n          Object.assign(mapOptions, this.controls)\n        }\n\n        const map = new Map(this.anchor, mapOptions)\n\n        this.markers && this.markers.forEach(marker => marker.setMap(map))\n\n        this.map = map\n\n        this.dispatchEvent(\n          new CustomEvent('map-change', {\n            detail: this.map\n          })\n        )\n\n        // 줌 변경 이벤트 전달\n        map.addListener('zoom_changed', () => {\n          this.dispatchEvent(\n            new CustomEvent('zoom-changed', {\n              detail: { zoom: map.getZoom() },\n              bubbles: true,\n              composed: true\n            })\n          )\n        })\n\n        this.resetBounds()\n      } catch (e) {\n        console.error(e)\n      }\n    }\n\n    var { center, zoom = 10 } = this\n\n    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */\n    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {\n      navigator.geolocation.getCurrentPosition(\n        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),\n        err => {\n          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)\n          show(this.defaultCenter, zoom)\n        },\n        {\n          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */\n          timeout: 500\n        }\n      )\n    } else {\n      show(center, zoom)\n    }\n  }\n\n  async buildMarkers(locations: any[] = []) {\n    if (!this.map) {\n      return\n    }\n\n    if (this.markers) {\n      this.markers.forEach(marker => marker.setMap(null))\n      this.markers = []\n    }\n\n    // 기존 클러스터 제거\n    if (this._markerClusterer) {\n      this._markerClusterer.clearMarkers()\n      this._markerClusterer = null\n    }\n\n    // Google Maps 최신 API 사용\n    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(\n      'marker'\n    )) as google.maps.MarkerLibrary\n\n    this.markers = locations\n      .map(location => {\n        // location 객체가 유효한지 확인\n        if (!location || typeof location !== 'object') {\n          console.warn('Invalid location object:', location)\n          return null\n        }\n\n        // lat, lng 값이 유효한지 확인\n        const lat = parseFloat(location.lat)\n        const lng = parseFloat(location.lng)\n\n        if (isNaN(lat) || isNaN(lng)) {\n          console.warn('Invalid lat/lng values:', location)\n          return null\n        }\n\n        // LatLng 객체 생성\n        const position = new google.maps.LatLng(lat, lng)\n\n        // 커스텀 마커 콘텐츠가 있으면 사용\n        let markerElement\n        if (location.markerContent) {\n          // HTML 문자열을 DOM 요소로 변환\n          const tempDiv = document.createElement('div')\n          tempDiv.innerHTML = location.markerContent\n          markerElement = tempDiv.firstElementChild\n        } else {\n          // 기본 핀 사용\n          markerElement = new PinElement({\n            background: '#1976d2',\n            borderColor: '#1565c0',\n            glyphColor: '#ffffff',\n            scale: 1.2\n          })\n        }\n\n        // AdvancedMarkerElement 사용\n        const marker = new AdvancedMarkerElement({\n          position: position,\n          map: this.map,\n          content: markerElement\n        })\n\n        marker.addListener('click', () => {\n          // InfoWindow 대신 커스텀 이벤트 발생\n          if (location?.region) {\n            this.dispatchEvent(\n              new CustomEvent('region-click', {\n                detail: { region: location.region },\n                bubbles: true,\n                composed: true\n              })\n            )\n          }\n        })\n\n        return marker\n      })\n      .filter(marker => marker !== null) // null 마커 제거\n\n    // MarkerClusterer 미사용 — 마커 수가 적으므로 직접 지도에 표시\n  }\n\n  get infoWindow() {\n    if (!this._infoWindow && this.map) {\n      this._infoWindow = new google.maps.InfoWindow({\n        content: 'loading...'\n      })\n    }\n\n    return this._infoWindow\n  }\n\n  setFocus(focus, icon) {\n    focus.setZIndex(1)\n    focus.setIcon(icon)\n  }\n\n  resetFocus(focus, icon) {\n    focus.setZIndex(0)\n    focus.setIcon(icon)\n  }\n\n  async changeFocus(after, before) {\n    await this.readyMap()\n\n    // map이 준비되지 않았으면 포커스 변경하지 않음\n    if (!this.map) {\n      return\n    }\n\n    var locations = this.locations || []\n\n    if (before) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const beforePos = before?.position\n        const locationPos = location?.position\n\n        return (\n          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng\n        )\n      })\n      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)\n    }\n\n    if (after) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const afterPos = after?.position\n        const locationPos = location?.position\n\n        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng\n      })\n      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)\n    }\n  }\n\n  async updated(changes) {\n    if (!this.map) {\n      await this.readyMap()\n    }\n\n    if (changes.has('locations')) {\n      // 디바운스: 연속된 업데이트를 하나로 묶음\n      if (this._buildMarkersTimer) {\n        clearTimeout(this._buildMarkersTimer)\n      }\n      this._buildMarkersTimer = setTimeout(() => {\n        this.buildMarkers(this.locations)\n        this._buildMarkersTimer = null\n      }, 500)\n    }\n\n    if (changes.has('focused')) {\n      this.changeFocus(this.focused, changes.get('focused'))\n    }\n\n    if (changes.has('center')) {\n      this.map.setCenter(this.center)\n    }\n\n    if (changes.has('controls')) {\n      // controls가 변경되면 기존 지도의 옵션만 업데이트\n      if (this.map && this.controls) {\n        // Google Maps API의 setOptions 메서드 사용\n        this.map.setOptions(this.controls)\n      }\n    }\n\n    if (changes.has('polygons')) {\n      ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))\n      ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))\n    }\n\n    if (changes.has('polylines')) {\n      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))\n      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))\n    }\n\n    if (changes.has('markers')) {\n      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))\n      ;(this.markers || []).forEach(marker => marker.setMap(this.map))\n    }\n\n    if (changes.has('boundCoords')) {\n      this.resetBounds()\n    }\n\n    // 클러스터링 설정 변경 시 마커 재구성\n    if (changes.has('clusterZoom')) {\n      this.buildMarkers(this.locations)\n    }\n  }\n\n  render() {\n    return html` <div map></div> `\n  }\n\n  resetBounds() {\n    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {\n      return\n    }\n\n    var bounds = new google.maps.LatLngBounds()\n    this.boundCoords.forEach(coord => bounds.extend(coord))\n    this.map.fitBounds(bounds)\n  }\n}\n"]}
+{"version":3,"file":"common-google-map.js","sourceRoot":"","sources":["../../client/google-map/common-google-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport GoogleMapLoader from './google-map-loader.js'\n\ndeclare global {\n  interface Window {\n    google: any\n    markerClusterer?: any\n  }\n}\n\ndeclare const google: any\n\ndeclare namespace google.maps {\n  interface MapsLibrary {\n    Map: any\n    InfoWindow: any\n  }\n\n  interface MarkerLibrary {\n    AdvancedMarkerElement: any\n    PinElement: any\n  }\n}\n\n@customElement('common-google-map')\nexport class CommonGoogleMap extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      [map] {\n        flex: 1;\n      }\n\n      .gm-style .gm-style-iw-c {\n        padding: 0;\n      }\n\n      .gm-style .gm-style-iw-d {\n        overflow: auto !important;\n      }\n      .gm-style .gm-style-iw-d + button {\n        top: 0 !important;\n        right: 0 !important;\n      }\n    `\n  ]\n\n  @property({ type: Object }) center\n  @property({ type: Number }) zoom\n  @property({ type: Array }) locations: any[] = []\n  @property({ type: Object }) focused\n  @property({ type: Array }) polygons\n  @property({ type: Array }) polylines\n  @property({ type: Array }) markers\n  @property({ type: Array }) boundCoords\n  @property({ type: Object }) controls\n  @property({ type: Number }) clusterZoom = 10\n\n  @state() map: any = null\n  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }\n  private _infoWindow: any = null\n  private _markerClusterer: any = null\n  private _buildMarkersTimer: any = null\n\n  get anchor() {\n    return this.renderRoot.querySelector('[map]')\n  }\n\n  async readyMap() {\n    await GoogleMapLoader.load()\n\n    // MarkerClusterer 라이브러리 로드\n    if (!window.markerClusterer) {\n      await GoogleMapLoader.loadMarkerClusterer()\n    }\n\n    if (this.map) {\n      return\n    }\n\n    // DOM이 준비될 때까지 기다림\n    await this.updateComplete\n\n    // anchor가 준비될 때까지 기다림\n    let attempts = 0\n    const maxAttempts = 20\n    while (attempts < maxAttempts) {\n      const anchor = this.anchor as HTMLElement\n      if (anchor && anchor.offsetWidth > 0) {\n        break\n      }\n      await new Promise(resolve => setTimeout(resolve, 50))\n      attempts++\n    }\n\n    if (!this.anchor) {\n      console.error('Map anchor element not found')\n      return\n    }\n\n    var show = async (center, zoom) => {\n      try {\n        // Google Maps 최신 API 사용\n        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary\n\n        const mapOptions = {\n          zoom,\n          center,\n          mapId: 'DEMO_MAP_ID'\n        }\n\n        // controls 속성이 있으면 지도 옵션에 추가\n        if (this.controls) {\n          Object.assign(mapOptions, this.controls)\n        }\n\n        const map = new Map(this.anchor, mapOptions)\n\n        this.markers && this.markers.forEach(marker => marker.setMap(map))\n\n        this.map = map\n\n        this.dispatchEvent(\n          new CustomEvent('map-change', {\n            detail: this.map\n          })\n        )\n\n        // 줌 변경 이벤트 전달\n        map.addListener('zoom_changed', () => {\n          this.dispatchEvent(\n            new CustomEvent('zoom-changed', {\n              detail: { zoom: map.getZoom() },\n              bubbles: true,\n              composed: true\n            })\n          )\n        })\n\n        this.resetBounds()\n      } catch (e) {\n        console.error(e)\n      }\n    }\n\n    var { center, zoom = 10 } = this\n\n    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */\n    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {\n      navigator.geolocation.getCurrentPosition(\n        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),\n        err => {\n          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)\n          show(this.defaultCenter, zoom)\n        },\n        {\n          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */\n          timeout: 500\n        }\n      )\n    } else {\n      show(center, zoom)\n    }\n  }\n\n  async buildMarkers(locations: any[] = []) {\n    if (!this.map) {\n      return\n    }\n\n    if (this.markers) {\n      this.markers.forEach(marker => marker.setMap(null))\n      this.markers = []\n    }\n\n    // 기존 클러스터 제거\n    if (this._markerClusterer) {\n      this._markerClusterer.clearMarkers()\n      this._markerClusterer = null\n    }\n\n    // Google Maps 최신 API 사용\n    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(\n      'marker'\n    )) as google.maps.MarkerLibrary\n\n    this.markers = locations\n      .map(location => {\n        // location 객체가 유효한지 확인\n        if (!location || typeof location !== 'object') {\n          console.warn('Invalid location object:', location)\n          return null\n        }\n\n        // lat, lng 값이 유효한지 확인\n        const lat = parseFloat(location.lat)\n        const lng = parseFloat(location.lng)\n\n        if (isNaN(lat) || isNaN(lng)) {\n          console.warn('Invalid lat/lng values:', location)\n          return null\n        }\n\n        // LatLng 객체 생성\n        const position = new google.maps.LatLng(lat, lng)\n\n        // 커스텀 마커 콘텐츠가 있으면 사용\n        let markerElement\n        if (location.markerContent) {\n          // HTML 문자열을 DOM 요소로 변환\n          const tempDiv = document.createElement('div')\n          tempDiv.innerHTML = location.markerContent\n          markerElement = tempDiv.firstElementChild\n        } else {\n          // 기본 핀 사용\n          markerElement = new PinElement({\n            background: '#1976d2',\n            borderColor: '#1565c0',\n            glyphColor: '#ffffff',\n            scale: 1.2\n          })\n        }\n\n        // AdvancedMarkerElement 사용\n        // collisionBehavior: 레이블(마커)이 서로 겹치면 우선순위 낮은 쪽을 자동 숨김 →\n        // 시도/시군구 레이블이 축척에 따라 겹쳐 보이는 문제 완화.\n        const marker = new AdvancedMarkerElement({\n          position: position,\n          map: this.map,\n          content: markerElement,\n          collisionBehavior: (google.maps as any).CollisionBehavior?.OPTIONAL_AND_HIDES_LOWER_PRIORITY\n        })\n\n        marker.addListener('click', () => {\n          // InfoWindow 대신 커스텀 이벤트 발생\n          if (location?.region) {\n            this.dispatchEvent(\n              new CustomEvent('region-click', {\n                detail: { region: location.region },\n                bubbles: true,\n                composed: true\n              })\n            )\n          }\n        })\n\n        return marker\n      })\n      .filter(marker => marker !== null) // null 마커 제거\n\n    // MarkerClusterer 미사용 — 마커 수가 적으므로 직접 지도에 표시\n  }\n\n  get infoWindow() {\n    if (!this._infoWindow && this.map) {\n      this._infoWindow = new google.maps.InfoWindow({\n        content: 'loading...'\n      })\n    }\n\n    return this._infoWindow\n  }\n\n  setFocus(focus, icon) {\n    focus.setZIndex(1)\n    focus.setIcon(icon)\n  }\n\n  resetFocus(focus, icon) {\n    focus.setZIndex(0)\n    focus.setIcon(icon)\n  }\n\n  async changeFocus(after, before) {\n    await this.readyMap()\n\n    // map이 준비되지 않았으면 포커스 변경하지 않음\n    if (!this.map) {\n      return\n    }\n\n    var locations = this.locations || []\n\n    if (before) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const beforePos = before?.position\n        const locationPos = location?.position\n\n        return (\n          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng\n        )\n      })\n      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)\n    }\n\n    if (after) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const afterPos = after?.position\n        const locationPos = location?.position\n\n        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng\n      })\n      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)\n    }\n  }\n\n  async updated(changes) {\n    if (!this.map) {\n      await this.readyMap()\n    }\n\n    if (changes.has('locations')) {\n      // 디바운스: 연속된 업데이트를 하나로 묶음\n      if (this._buildMarkersTimer) {\n        clearTimeout(this._buildMarkersTimer)\n      }\n      this._buildMarkersTimer = setTimeout(() => {\n        this.buildMarkers(this.locations)\n        this._buildMarkersTimer = null\n      }, 500)\n    }\n\n    if (changes.has('focused')) {\n      this.changeFocus(this.focused, changes.get('focused'))\n    }\n\n    if (changes.has('center')) {\n      this.map.setCenter(this.center)\n    }\n\n    if (changes.has('controls')) {\n      // controls가 변경되면 기존 지도의 옵션만 업데이트\n      if (this.map && this.controls) {\n        // Google Maps API의 setOptions 메서드 사용\n        this.map.setOptions(this.controls)\n      }\n    }\n\n    if (changes.has('polygons')) {\n      ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))\n      ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))\n    }\n\n    if (changes.has('polylines')) {\n      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))\n      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))\n    }\n\n    if (changes.has('markers')) {\n      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))\n      ;(this.markers || []).forEach(marker => marker.setMap(this.map))\n    }\n\n    if (changes.has('boundCoords')) {\n      this.resetBounds()\n    }\n\n    // 클러스터링 설정 변경 시 마커 재구성\n    if (changes.has('clusterZoom')) {\n      this.buildMarkers(this.locations)\n    }\n  }\n\n  render() {\n    return html` <div map></div> `\n  }\n\n  resetBounds() {\n    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {\n      return\n    }\n\n    var bounds = new google.maps.LatLngBounds()\n    this.boundCoords.forEach(coord => bounds.extend(coord))\n    this.map.fitBounds(bounds)\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/dssp-kpi-overview.d.ts

@@ -1,6 +1,7 @@
 import { KpiOverview } from '@things-factory/kpi/dist-client/pages/kpi/kpi-overview.js';
 import '../../components/kpi-lookup-chart';
 import '../../components/kpi-2d-lookup-chart';
+import '../../components/kpi-step-lookup-chart';
 /**
  * KPI scoreType 정의 — value → score 변환 방식
  *
@@ -14,7 +15,7 @@ import '../../components/kpi-2d-lookup-chart';
  *              예: X13(일정 이탈 수준) = 공정률 × 편차율 → 1~5점
  *              → 히트맵 차트로 표시
  * ASSESSMENT — 감리자 직접 평가, value(1~5) = score (grade table 불필요)
- *              예: X14(일정성과 수준 평가), X23(비용성과), X35(품질성과) 등
+ *              예: X14(일정성과 정성 평가), X23(비용성과), X35(품질성과) 등
  *              → 등급 기준 설명만 표시 (차트 없음)
  *
  * Note: DIRECT와 ASSESSMENT는 모두 value=score이지만,

package/dist-client/pages/kpi-admin/dssp-kpi-overview.js

@@ -6,6 +6,7 @@ import gql from 'graphql-tag';
 import { KpiOverview } from '@things-factory/kpi/dist-client/pages/kpi/kpi-overview.js';
 import '../../components/kpi-lookup-chart';
 import '../../components/kpi-2d-lookup-chart';
+import '../../components/kpi-step-lookup-chart';
 const GET_KPI_OVERVIEW_EXT = gql `
   query {
     kpiCategories: kpisLevel1 {
@@ -40,7 +41,7 @@ const GET_KPI_OVERVIEW_EXT = gql `
  *              예: X13(일정 이탈 수준) = 공정률 × 편차율 → 1~5점
  *              → 히트맵 차트로 표시
  * ASSESSMENT — 감리자 직접 평가, value(1~5) = score (grade table 불필요)
- *              예: X14(일정성과 수준 평가), X23(비용성과), X35(품질성과) 등
+ *              예: X14(일정성과 정성 평가), X23(비용성과), X35(품질성과) 등
  *              → 등급 기준 설명만 표시 (차트 없음)
  *
  * Note: DIRECT와 ASSESSMENT는 모두 value=score이지만,
@@ -83,8 +84,8 @@ let DsspKpiOverview = class DsspKpiOverview extends KpiOverview {
         <div class="overview-left">
           <div class="overview-title">KPI개요</div>
           <div class="overview-desc">
-            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요 지표를
-            통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+            건설프로젝트 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요 지표를 통해
+            프로젝트 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
           </div>
         </div>
       </div>
@@ -144,9 +145,7 @@ let DsspKpiOverview = class DsspKpiOverview extends KpiOverview {
             : ''}
           ${this._renderTypeInfo(kpi)}
         </div>
-        <div class="x-chart">
-          ${this._renderGradesContent(kpi)}
-        </div>
+        <div class="x-chart">${this._renderGradesContent(kpi)}</div>
       </div>
     `;
     }
@@ -164,11 +163,27 @@ let DsspKpiOverview = class DsspKpiOverview extends KpiOverview {
         const scoreType = kpi.scoreType;
         const valueType = kpi.valueType;
         const is2D = scoreType === 'CUSTOM' ||
-            (kpi.grades && typeof kpi.grades === 'object' && !Array.isArray(kpi.grades) && kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
+            (kpi.grades &&
+                typeof kpi.grades === 'object' &&
+                !Array.isArray(kpi.grades) &&
+                kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
         const isArray = Array.isArray(kpi.grades) && kpi.grades.length > 0;
         const isAssessment = valueType === 'ASSESSED' ||
-            (!scoreType && !valueType && isArray && kpi.grades.length <= 5 &&
+            (!scoreType &&
+                !valueType &&
+                isArray &&
+                kpi.grades.length <= 5 &&
                 kpi.grades.every((g) => g.score >= 1 && g.score <= 5 && g.score === Math.floor(g.score) && g.minValue === g.score));
+        // SL-PA 결과(X34 품질, X43 안전)만 계단형 등급 분포 차트 (overview 에서는 측정값 없이 구간 구조만)
+        const isSlpa = typeof (kpi === null || kpi === void 0 ? void 0 : kpi.name) === 'string' && (kpi.name.includes('X34') || kpi.name.includes('X43'));
+        if (isArray && isSlpa) {
+            return html `
+        <div class="grades-title">성과 분포</div>
+        <div class="grades-chart">
+          <kpi-step-lookup-chart .grades=${kpi.grades}></kpi-step-lookup-chart>
+        </div>
+      `;
+        }
         if (isAssessment) {
             return html `
         <div class="grades-title">등급 기준</div>
@@ -358,7 +373,7 @@ DsspKpiOverview.styles = [
         font-size: 0.85rem;
         font-weight: 600;
         color: #333;
-        background: rgba(255,255,255,0.7);
+        background: rgba(255, 255, 255, 0.7);
         padding: 8px 12px;
         border-radius: 4px;
         font-family: monospace;