@things-factory/kpi 10.1.248 → 10.1.249

package/dist-client/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import '@operato/app/filter-renderer.js';
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,7 @@
+import '@operato/app/filter-renderer.js'; /* register resource-object filter renderer */
+import { registerEditor as registerGristEditor } from '@operato/data-grist';
+import { OxGristEditorFormula } from '@operato/grist-editor/ox-grist-editor-formula.js';
+export default function bootstrap() {
+    registerGristEditor('formula', OxGristEditorFormula);
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA,CAAC,8CAA8C;AAEvF,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AAEvF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;AACtD,CAAC","sourcesContent":["import '@operato/app/filter-renderer.js' /* register resource-object filter renderer */\n\nimport { registerEditor as registerGristEditor } from '@operato/data-grist'\nimport { OxGristEditorFormula } from '@operato/grist-editor/ox-grist-editor-formula.js'\n\nexport default function bootstrap() {\n  registerGristEditor('formula', OxGristEditorFormula)\n}\n"]}

package/dist-client/charts/kpi-boxplot-chart.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class KpiBoxplotChart extends LitElement {
+    data: any[];
+    groups: string[];
+    minKey: string;
+    maxKey: string;
+    meanKey: string;
+    medianKey: string;
+    q1Key: string;
+    q3Key: string;
+    valueKey: string;
+    currentGroup: string;
+    independentScale: boolean;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private getOrgValue;
+    drawBoxplot(): void;
+}

package/dist-client/charts/kpi-boxplot-chart.js

@@ -0,0 +1,324 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.groups = []; // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)
+        this.minKey = 'min';
+        this.maxKey = 'max';
+        this.meanKey = 'mean';
+        this.medianKey = 'median';
+        this.q1Key = 'q1';
+        this.q3Key = 'q3';
+        this.valueKey = 'value';
+        this.currentGroup = '';
+        this.independentScale = false;
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+        this.getOrgValue = (d) => d.org || d.group;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `; }
+    render() {
+        return html `<svg
+      id="boxplot"
+      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() {
+        this.resizeObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.drawBoxplot();
+    }
+    drawBoxplot() {
+        const svg = d3.select(this.renderRoot.querySelector('#boxplot'));
+        svg.selectAll('*').remove();
+        // 데이터 검증
+        if (!this.data || this.data.length === 0) {
+            return;
+        }
+        const w = this.chartWidth || 300;
+        const h = this.chartHeight || 300;
+        const margin = {
+            top: 20,
+            right: 20,
+            bottom: 40,
+            left: this.independentScale ? 20 : 40
+        };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        // x축: 조직 단위 (그룹) - org 또는 group 필드 지원
+        const groups = this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))];
+        if (groups.length === 0) {
+            console.warn('No valid groups found in data:', this.data);
+            return; // 유효한 그룹이 없으면 차트를 그리지 않음
+        }
+        console.log('Boxplot groups:', groups);
+        console.log('Data org values:', this.data.map(d => this.getOrgValue(d)));
+        console.log('Full data:', this.data);
+        console.log('Chart dimensions:', { w, h, plotW, plotH });
+        const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4);
+        // y축 스케일 설정
+        let y;
+        if (this.independentScale) {
+            // 독립 스케일: 각 시리즈별로 개별 스케일 생성
+            const yScales = this.data.map(d => {
+                const values = [
+                    d[this.minKey],
+                    d[this.maxKey],
+                    d[this.q1Key],
+                    d[this.q3Key],
+                    d[this.medianKey],
+                    d[this.meanKey],
+                    d[this.valueKey]
+                ];
+                const min = d3.min(values) ?? 0;
+                const max = d3.max(values) ?? 1;
+                return {
+                    org: d.org,
+                    scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+                };
+            });
+            // 기본 y축은 첫 번째 스케일 사용
+            y = yScales[0]?.scale || d3.scaleLinear().domain([0, 1]).range([plotH, 0]);
+        }
+        else {
+            // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤
+            const allValues = this.data.flatMap(d => [
+                d[this.minKey],
+                d[this.maxKey],
+                d[this.q1Key],
+                d[this.q3Key],
+                d[this.medianKey],
+                d[this.meanKey],
+                d[this.valueKey]
+            ]);
+            y = d3
+                .scaleLinear()
+                .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])
+                .nice()
+                .range([plotH, 0]);
+        }
+        const g = svg
+            .attr('width', w)
+            .attr('height', h)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        // 축
+        if (!this.independentScale) {
+            g.append('g').call(d3.axisLeft(y));
+        }
+        g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x));
+        // 박스플롯 - 각 그룹별로 박스 생성
+        groups.forEach(groupName => {
+            // 해당 그룹의 데이터 찾기
+            const groupData = this.data.find(d => this.getOrgValue(d) === groupName);
+            console.log(`Searching for group: ${groupName}, found:`, groupData);
+            if (!groupData) {
+                console.warn(`No data found for group: ${groupName}. Available data:`, this.data.map(d => ({ org: d.org, keys: Object.keys(d) })));
+                return;
+            }
+            // 필수 필드 검증
+            const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey];
+            const missingFields = requiredFields.filter(field => groupData[field] == null);
+            if (missingFields.length > 0) {
+                console.warn(`Missing required fields for group ${groupName}:`, missingFields);
+                console.log('Group data:', groupData);
+                return;
+            }
+            const gx = x(groupName) ?? 0;
+            console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`);
+            // 독립 스케일 사용 시 해당 그룹의 스케일 찾기
+            let currentY = y;
+            if (this.independentScale) {
+                const values = [
+                    groupData[this.minKey],
+                    groupData[this.maxKey],
+                    groupData[this.q1Key],
+                    groupData[this.q3Key],
+                    groupData[this.medianKey],
+                    groupData[this.meanKey],
+                    groupData[this.valueKey]
+                ];
+                const min = d3.min(values) ?? 0;
+                const max = d3.max(values) ?? 1;
+                currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0]);
+            }
+            // Outlier 계산 (1.5 * IQR 규칙)
+            const iqr = groupData[this.q3Key] - groupData[this.q1Key];
+            const lowerFence = groupData[this.q1Key] - 1.5 * iqr;
+            const upperFence = groupData[this.q3Key] + 1.5 * iqr;
+            // 실제 min/max 값 (fence 내부)
+            const actualMin = Math.max(groupData[this.minKey], lowerFence);
+            const actualMax = Math.min(groupData[this.maxKey], upperFence);
+            // 박스
+            g.append('rect')
+                .attr('x', gx)
+                .attr('y', currentY(groupData[this.q3Key]))
+                .attr('width', x.bandwidth())
+                .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))
+                .attr('fill', this.getOrgValue(groupData) === this.currentGroup ? '#2196f3' : '#bbb')
+                .attr('opacity', 0.5);
+            // 중앙선(중앙값)
+            g.append('line')
+                .attr('x1', gx)
+                .attr('x2', gx + x.bandwidth())
+                .attr('y1', currentY(groupData[this.medianKey]))
+                .attr('y2', currentY(groupData[this.medianKey]))
+                .attr('stroke', '#333')
+                .attr('stroke-width', 2);
+            // 수염 (fence 내부의 min-max)
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 2)
+                .attr('x2', gx + x.bandwidth() / 2)
+                .attr('y1', currentY(actualMin))
+                .attr('y2', currentY(actualMax))
+                .attr('stroke', '#333');
+            // min/max 선 (fence 내부)
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 4)
+                .attr('x2', gx + (x.bandwidth() * 3) / 4)
+                .attr('y1', currentY(actualMin))
+                .attr('y2', currentY(actualMin))
+                .attr('stroke', '#333');
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 4)
+                .attr('x2', gx + (x.bandwidth() * 3) / 4)
+                .attr('y1', currentY(actualMax))
+                .attr('y2', currentY(actualMax))
+                .attr('stroke', '#333');
+            // Outlier 표시 (fence 외부의 값들)
+            if (groupData[this.minKey] < lowerFence) {
+                g.append('circle')
+                    .attr('cx', gx + x.bandwidth() / 2)
+                    .attr('cy', currentY(groupData[this.minKey]))
+                    .attr('r', 3)
+                    .attr('fill', '#ff4444')
+                    .attr('stroke', '#333')
+                    .attr('stroke-width', 1);
+            }
+            if (groupData[this.maxKey] > upperFence) {
+                g.append('circle')
+                    .attr('cx', gx + x.bandwidth() / 2)
+                    .attr('cy', currentY(groupData[this.maxKey]))
+                    .attr('r', 3)
+                    .attr('fill', '#ff4444')
+                    .attr('stroke', '#333')
+                    .attr('stroke-width', 1);
+            }
+            // 평균값
+            g.append('circle')
+                .attr('cx', gx + x.bandwidth() / 2)
+                .attr('cy', currentY(groupData[this.meanKey]))
+                .attr('r', 4)
+                .attr('fill', 'orange');
+        });
+        // 현재 그룹 값 강조
+        if (this.currentGroup && groups.includes(this.currentGroup)) {
+            const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup);
+            if (currentGroupData) {
+                let currentY = y;
+                if (this.independentScale) {
+                    const values = [
+                        currentGroupData[this.minKey],
+                        currentGroupData[this.maxKey],
+                        currentGroupData[this.q1Key],
+                        currentGroupData[this.q3Key],
+                        currentGroupData[this.medianKey],
+                        currentGroupData[this.meanKey],
+                        currentGroupData[this.valueKey]
+                    ];
+                    const min = d3.min(values) ?? 0;
+                    const max = d3.max(values) ?? 1;
+                    currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0]);
+                }
+                g.append('circle')
+                    .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)
+                    .attr('cy', currentY(currentGroupData[this.valueKey]))
+                    .attr('r', 6)
+                    .attr('fill', '#e91e63')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 2);
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiBoxplotChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiBoxplotChart.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "minKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "maxKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "meanKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "medianKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "q1Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "q3Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "currentGroup", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], KpiBoxplotChart.prototype, "independentScale", void 0);
+KpiBoxplotChart = __decorate([
+    customElement('kpi-boxplot-chart')
+], KpiBoxplotChart);
+export { KpiBoxplotChart };
+//# sourceMappingURL=kpi-boxplot-chart.js.map

package/dist-client/charts/kpi-boxplot-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/charts/kpi-boxplot-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('kpi-boxplot-chart')\nexport class KpiBoxplotChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) groups: string[] = [] // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)\n  @property({ type: String }) minKey: string = 'min'\n  @property({ type: String }) maxKey: string = 'max'\n  @property({ type: String }) meanKey: string = 'mean'\n  @property({ type: String }) medianKey: string = 'median'\n  @property({ type: String }) q1Key: string = 'q1'\n  @property({ type: String }) q3Key: string = 'q3'\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\n  @property({ type: Boolean }) independentScale: boolean = false\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\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`<svg\n      id=\"boxplot\"\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  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.drawBoxplot()\n  }\n\n  private getOrgValue = (d: any) => d.org || d.group\n\n  drawBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n    svg.selectAll('*').remove()\n    \n    // 데이터 검증\n    if (!this.data || this.data.length === 0) {\n      return\n    }\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n    const margin = {\n      top: 20,\n      right: 20,\n      bottom: 40,\n      left: this.independentScale ? 20 : 40\n    }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n\n    // x축: 조직 단위 (그룹) - org 또는 group 필드 지원\n    const groups = this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))]\n    if (groups.length === 0) {\n      console.warn('No valid groups found in data:', this.data)\n      return // 유효한 그룹이 없으면 차트를 그리지 않음\n    }\n    \n    console.log('Boxplot groups:', groups)\n    console.log('Data org values:', this.data.map(d => this.getOrgValue(d)))\n    console.log('Full data:', this.data)\n    console.log('Chart dimensions:', { w, h, plotW, plotH })\n    \n    const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4)\n\n    // y축 스케일 설정\n    let y: d3.ScaleLinear<number, number>\n\n    if (this.independentScale) {\n      // 독립 스케일: 각 시리즈별로 개별 스케일 생성\n      const yScales = this.data.map(d => {\n        const values = [\n          d[this.minKey],\n          d[this.maxKey],\n          d[this.q1Key],\n          d[this.q3Key],\n          d[this.medianKey],\n          d[this.meanKey],\n          d[this.valueKey]\n        ]\n        const min = d3.min(values) ?? 0\n        const max = d3.max(values) ?? 1\n        return {\n          org: d.org,\n          scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n        }\n      })\n\n      // 기본 y축은 첫 번째 스케일 사용\n      y = yScales[0]?.scale || d3.scaleLinear().domain([0, 1]).range([plotH, 0])\n    } else {\n      // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤\n      const allValues = this.data.flatMap(d => [\n        d[this.minKey],\n        d[this.maxKey],\n        d[this.q1Key],\n        d[this.q3Key],\n        d[this.medianKey],\n        d[this.meanKey],\n        d[this.valueKey]\n      ])\n      y = d3\n        .scaleLinear()\n        .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])\n        .nice()\n        .range([plotH, 0])\n    }\n\n    const g = svg\n      .attr('width', w)\n      .attr('height', h)\n      .append('g')\n      .attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 축\n    if (!this.independentScale) {\n      g.append('g').call(d3.axisLeft(y))\n    }\n    g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))\n\n    // 박스플롯 - 각 그룹별로 박스 생성\n    groups.forEach(groupName => {\n      // 해당 그룹의 데이터 찾기\n      const groupData = this.data.find(d => this.getOrgValue(d) === groupName)\n      console.log(`Searching for group: ${groupName}, found:`, groupData)\n      if (!groupData) {\n        console.warn(`No data found for group: ${groupName}. Available data:`, this.data.map(d => ({ org: d.org, keys: Object.keys(d) })))\n        return\n      }\n      \n      // 필수 필드 검증\n      const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n      const missingFields = requiredFields.filter(field => groupData[field] == null)\n      if (missingFields.length > 0) {\n        console.warn(`Missing required fields for group ${groupName}:`, missingFields)\n        console.log('Group data:', groupData)\n        return\n      }\n      \n      const gx = x(groupName) ?? 0\n      console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`)\n\n      // 독립 스케일 사용 시 해당 그룹의 스케일 찾기\n      let currentY = y\n      if (this.independentScale) {\n        const values = [\n          groupData[this.minKey],\n          groupData[this.maxKey],\n          groupData[this.q1Key],\n          groupData[this.q3Key],\n          groupData[this.medianKey],\n          groupData[this.meanKey],\n          groupData[this.valueKey]\n        ]\n        const min = d3.min(values) ?? 0\n        const max = d3.max(values) ?? 1\n        currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n      }\n\n      // Outlier 계산 (1.5 * IQR 규칙)\n      const iqr = groupData[this.q3Key] - groupData[this.q1Key]\n      const lowerFence = groupData[this.q1Key] - 1.5 * iqr\n      const upperFence = groupData[this.q3Key] + 1.5 * iqr\n\n      // 실제 min/max 값 (fence 내부)\n      const actualMin = Math.max(groupData[this.minKey], lowerFence)\n      const actualMax = Math.min(groupData[this.maxKey], upperFence)\n\n      // 박스\n      g.append('rect')\n        .attr('x', gx)\n        .attr('y', currentY(groupData[this.q3Key]))\n        .attr('width', x.bandwidth())\n        .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))\n        .attr('fill', this.getOrgValue(groupData) === this.currentGroup ? '#2196f3' : '#bbb')\n        .attr('opacity', 0.5)\n\n      // 중앙선(중앙값)\n      g.append('line')\n        .attr('x1', gx)\n        .attr('x2', gx + x.bandwidth())\n        .attr('y1', currentY(groupData[this.medianKey]))\n        .attr('y2', currentY(groupData[this.medianKey]))\n        .attr('stroke', '#333')\n        .attr('stroke-width', 2)\n\n      // 수염 (fence 내부의 min-max)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 2)\n        .attr('x2', gx + x.bandwidth() / 2)\n        .attr('y1', currentY(actualMin))\n        .attr('y2', currentY(actualMax))\n        .attr('stroke', '#333')\n\n      // min/max 선 (fence 내부)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', currentY(actualMin))\n        .attr('y2', currentY(actualMin))\n        .attr('stroke', '#333')\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', currentY(actualMax))\n        .attr('y2', currentY(actualMax))\n        .attr('stroke', '#333')\n\n      // Outlier 표시 (fence 외부의 값들)\n      if (groupData[this.minKey] < lowerFence) {\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(groupData[this.minKey]))\n          .attr('r', 3)\n          .attr('fill', '#ff4444')\n          .attr('stroke', '#333')\n          .attr('stroke-width', 1)\n      }\n      if (groupData[this.maxKey] > upperFence) {\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(groupData[this.maxKey]))\n          .attr('r', 3)\n          .attr('fill', '#ff4444')\n          .attr('stroke', '#333')\n          .attr('stroke-width', 1)\n      }\n\n      // 평균값\n      g.append('circle')\n        .attr('cx', gx + x.bandwidth() / 2)\n        .attr('cy', currentY(groupData[this.meanKey]))\n        .attr('r', 4)\n        .attr('fill', 'orange')\n    })\n    // 현재 그룹 값 강조\n    if (this.currentGroup && groups.includes(this.currentGroup)) {\n      const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup)\n      if (currentGroupData) {\n        let currentY = y\n        if (this.independentScale) {\n          const values = [\n            currentGroupData[this.minKey],\n            currentGroupData[this.maxKey],\n            currentGroupData[this.q1Key],\n            currentGroupData[this.q3Key],\n            currentGroupData[this.medianKey],\n            currentGroupData[this.meanKey],\n            currentGroupData[this.valueKey]\n          ]\n          const min = d3.min(values) ?? 0\n          const max = d3.max(values) ?? 1\n          currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n        }\n\n        g.append('circle')\n          .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)\n          .attr('cy', currentY(currentGroupData[this.valueKey]))\n          .attr('r', 6)\n          .attr('fill', '#e91e63')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 2)\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class KpiMiniTrendChart extends LitElement {
+    data: number[];
+    width: number;
+    height: number;
+    lineColor: string;
+    strokeWidth: number;
+    showPoints: boolean;
+    pointRadius: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+    drawMiniTrend(): void;
+}

package/dist-client/charts/kpi-mini-trend-chart.js

@@ -0,0 +1,148 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiMiniTrendChart = class KpiMiniTrendChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.width = 60;
+        this.height = 30;
+        this.lineColor = '#2196f3';
+        this.strokeWidth = 1.5;
+        this.showPoints = true;
+        this.pointRadius = 1.5;
+    }
+    static { this.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()
+            .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)
+            .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');
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiMiniTrendChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], KpiMiniTrendChart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], KpiMiniTrendChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiMiniTrendChart.prototype, "lineColor", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], KpiMiniTrendChart.prototype, "strokeWidth", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], KpiMiniTrendChart.prototype, "showPoints", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], KpiMiniTrendChart.prototype, "pointRadius", void 0);
+KpiMiniTrendChart = __decorate([
+    customElement('kpi-mini-trend-chart')
+], KpiMiniTrendChart);
+export { KpiMiniTrendChart };
+//# sourceMappingURL=kpi-mini-trend-chart.js.map

package/dist-client/charts/kpi-mini-trend-chart.js.map

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

package/dist-client/charts/kpi-radar-chart.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class KpiRadarChart extends LitElement {
+    data: any[];
+    categories: string[];
+    valueKey: string;
+    currentGroup: string;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    drawRadar(): void;
+}