@things-factory/kpi 9.0.21 → 9.0.23

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

@@ -0,0 +1,22 @@
+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;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    drawBoxplot(): void;
+}

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

@@ -0,0 +1,198 @@
+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.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    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();
+        const w = this.chartWidth || 300;
+        const h = this.chartHeight || 300;
+        const margin = { top: 20, right: 20, bottom: 40, left: 40 };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        // x축: 그룹
+        const x = d3.scaleBand().domain(this.groups).range([0, plotW]).padding(0.4);
+        // y축: 값
+        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]
+        ]);
+        const 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})`);
+        // 축
+        g.append('g').call(d3.axisLeft(y));
+        g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x));
+        // 박스플롯
+        this.data.forEach(d => {
+            const gx = x(d.group) ?? 0;
+            // 박스
+            g.append('rect')
+                .attr('x', gx)
+                .attr('y', y(d[this.q3Key]))
+                .attr('width', x.bandwidth())
+                .attr('height', y(d[this.q1Key]) - y(d[this.q3Key]))
+                .attr('fill', d.group === this.currentGroup ? '#2196f3' : '#bbb')
+                .attr('opacity', 0.5);
+            // 중앙선(중앙값)
+            g.append('line')
+                .attr('x1', gx)
+                .attr('x2', gx + x.bandwidth())
+                .attr('y1', y(d[this.medianKey]))
+                .attr('y2', y(d[this.medianKey]))
+                .attr('stroke', '#333')
+                .attr('stroke-width', 2);
+            // 수염(min-max)
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 2)
+                .attr('x2', gx + x.bandwidth() / 2)
+                .attr('y1', y(d[this.minKey]))
+                .attr('y2', y(d[this.maxKey]))
+                .attr('stroke', '#333');
+            // min/max
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 4)
+                .attr('x2', gx + (x.bandwidth() * 3) / 4)
+                .attr('y1', y(d[this.minKey]))
+                .attr('y2', y(d[this.minKey]))
+                .attr('stroke', '#333');
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 4)
+                .attr('x2', gx + (x.bandwidth() * 3) / 4)
+                .attr('y1', y(d[this.maxKey]))
+                .attr('y2', y(d[this.maxKey]))
+                .attr('stroke', '#333');
+            // 평균값
+            g.append('circle')
+                .attr('cx', gx + x.bandwidth() / 2)
+                .attr('cy', y(d[this.meanKey]))
+                .attr('r', 4)
+                .attr('fill', 'orange');
+        });
+        // 현재 그룹 값 강조
+        this.data.forEach(d => {
+            if (d.group === this.currentGroup) {
+                g.append('circle')
+                    .attr('cx', x(d.group) + x.bandwidth() / 2)
+                    .attr('cy', y(d[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);
+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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AAGjB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACsB,SAAI,GAAU,EAAE,CAAA;QAChB,WAAM,GAAa,EAAE,CAAA;QACpB,WAAM,GAAW,KAAK,CAAA;QACtB,WAAM,GAAW,KAAK,CAAA;QACtB,YAAO,GAAW,MAAM,CAAA;QACxB,cAAS,GAAW,QAAQ,CAAA;QAC5B,UAAK,GAAW,IAAI,CAAA;QACpB,UAAK,GAAW,IAAI,CAAA;QACpB,aAAQ,GAAW,OAAO,CAAA;QAC1B,iBAAY,GAAW,EAAE,CAAA;QAe7C,eAAU,GAAG,CAAC,CAAA;QACd,gBAAW,GAAG,CAAC,CAAA;IAmIzB,CAAC;aAjJQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,UAAU;eACd,IAAI,CAAC,WAAW;qBACV,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;;YAE5C,CAAA;IACV,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACjD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;gBAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAA;gBAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAA;QACjC,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,WAAW;QACT,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;QAChE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAC3B,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,GAAG,CAAA;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAA;QACjC,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA;QAC3D,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;QAE5C,SAAS;QACT,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QAC3E,QAAQ;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACvC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;YACd,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;YACd,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;YACf,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;SACjB,CAAC,CAAA;QACF,MAAM,CAAC,GAAG,EAAE;aACT,WAAW,EAAE;aACb,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;aACxD,IAAI,EAAE;aACN,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QAEpB,MAAM,CAAC,GAAG,GAAG;aACV,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;aAChB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;aACjB,MAAM,CAAC,GAAG,CAAC;aACX,IAAI,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAE/D,IAAI;QACJ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QAClC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QAE/E,OAAO;QACP,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACpB,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC1B,KAAK;YACL,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC3B,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;iBAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;iBACnD,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;iBAChE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YACvB,WAAW;YACX,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;iBACd,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC;iBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;iBAChC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;iBAChC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;iBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC1B,cAAc;YACd,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;YACzB,UAAU;YACV,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBACxC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;YACzB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;iBACxC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC7B,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;YACzB,MAAM;YACN,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACf,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;iBAC9B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;iBACZ,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAC3B,CAAC,CAAC,CAAA;QACF,aAAa;QACb,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACpB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;qBAC1C,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;qBAC/B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;;AA3J0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAiB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;+CAAsB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAA0B;AAV1C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6J3B","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\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  drawBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n    svg.selectAll('*').remove()\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n    const margin = { top: 20, right: 20, bottom: 40, left: 40 }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n\n    // x축: 그룹\n    const x = d3.scaleBand().domain(this.groups).range([0, plotW]).padding(0.4)\n    // y축: 값\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    const y = d3\n      .scaleLinear()\n      .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])\n      .nice()\n      .range([plotH, 0])\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    g.append('g').call(d3.axisLeft(y))\n    g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))\n\n    // 박스플롯\n    this.data.forEach(d => {\n      const gx = x(d.group) ?? 0\n      // 박스\n      g.append('rect')\n        .attr('x', gx)\n        .attr('y', y(d[this.q3Key]))\n        .attr('width', x.bandwidth())\n        .attr('height', y(d[this.q1Key]) - y(d[this.q3Key]))\n        .attr('fill', d.group === this.currentGroup ? '#2196f3' : '#bbb')\n        .attr('opacity', 0.5)\n      // 중앙선(중앙값)\n      g.append('line')\n        .attr('x1', gx)\n        .attr('x2', gx + x.bandwidth())\n        .attr('y1', y(d[this.medianKey]))\n        .attr('y2', y(d[this.medianKey]))\n        .attr('stroke', '#333')\n        .attr('stroke-width', 2)\n      // 수염(min-max)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 2)\n        .attr('x2', gx + x.bandwidth() / 2)\n        .attr('y1', y(d[this.minKey]))\n        .attr('y2', y(d[this.maxKey]))\n        .attr('stroke', '#333')\n      // min/max\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', y(d[this.minKey]))\n        .attr('y2', y(d[this.minKey]))\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', y(d[this.maxKey]))\n        .attr('y2', y(d[this.maxKey]))\n        .attr('stroke', '#333')\n      // 평균값\n      g.append('circle')\n        .attr('cx', gx + x.bandwidth() / 2)\n        .attr('cy', y(d[this.meanKey]))\n        .attr('r', 4)\n        .attr('fill', 'orange')\n    })\n    // 현재 그룹 값 강조\n    this.data.forEach(d => {\n      if (d.group === this.currentGroup) {\n        g.append('circle')\n          .attr('cx', x(d.group) + x.bandwidth() / 2)\n          .attr('cy', y(d[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-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;
+}

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

@@ -0,0 +1,138 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiRadarChart = class KpiRadarChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.categories = [];
+        this.valueKey = 'value';
+        this.currentGroup = '';
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `; }
+    render() {
+        return html `<svg
+      id="radar"
+      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.drawRadar();
+    }
+    drawRadar() {
+        const svg = d3.select(this.renderRoot.querySelector('#radar'));
+        svg.selectAll('*').remove();
+        const w = this.chartWidth || 300;
+        const h = this.chartHeight || 300;
+        const r = Math.min(w, h) / 2 - 40;
+        const angleSlice = (2 * Math.PI) / (this.categories.length || 1);
+        // 데이터 변환: { group, values: [ {category, value} ... ] }
+        const groupData = d3
+            .groups(this.data, d => d.group)
+            .map(([group, values]) => ({
+            group,
+            values: this.categories.map((cat, i) => {
+                const found = values.find(v => v.category === cat);
+                return { category: cat, value: found ? found[this.valueKey] : 0 };
+            })
+        }));
+        // 스케일
+        const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1;
+        const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r]);
+        // SVG 기본
+        svg.attr('width', w).attr('height', h);
+        const g = svg.append('g').attr('transform', `translate(${w / 2},${h / 2})`);
+        // 그리드/축
+        for (let i = 1; i <= 5; i++) {
+            g.append('circle')
+                .attr('r', (r / 5) * i)
+                .attr('fill', 'none')
+                .attr('stroke', '#ccc');
+        }
+        this.categories.forEach((cat, i) => {
+            const angle = i * angleSlice - Math.PI / 2;
+            g.append('line')
+                .attr('x1', 0)
+                .attr('y1', 0)
+                .attr('x2', radius(maxValue) * Math.cos(angle))
+                .attr('y2', radius(maxValue) * Math.sin(angle))
+                .attr('stroke', '#ccc');
+            g.append('text')
+                .attr('x', (radius(maxValue) + 10) * Math.cos(angle))
+                .attr('y', (radius(maxValue) + 10) * Math.sin(angle))
+                .attr('text-anchor', 'middle')
+                .attr('alignment-baseline', 'middle')
+                .attr('font-size', 12)
+                .text(cat);
+        });
+        // 그룹별 폴리곤
+        groupData.forEach(gd => {
+            // 마지막에 첫 점을 한 번 더 추가
+            const closedValues = [...gd.values, gd.values[0]];
+            const line = d3
+                .lineRadial()
+                .radius((d) => radius(d.value))
+                .angle((d, i) => i * angleSlice);
+            g.append('path')
+                .datum(closedValues)
+                .attr('d', line)
+                .attr('fill', gd.group === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')
+                .attr('stroke', gd.group === this.currentGroup ? '#2196f3' : '#aaa')
+                .attr('stroke-width', gd.group === this.currentGroup ? 3 : 1);
+        });
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiRadarChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiRadarChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiRadarChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiRadarChart.prototype, "currentGroup", void 0);
+KpiRadarChart = __decorate([
+    customElement('kpi-radar-chart')
+], KpiRadarChart);
+export { KpiRadarChart };
+//# sourceMappingURL=kpi-radar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/charts/kpi-radar-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-radar-chart')\nexport class KpiRadarChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) categories: string[] = []\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\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=\"radar\"\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.drawRadar()\n  }\n\n  drawRadar() {\n    const svg = d3.select(this.renderRoot.querySelector('#radar'))\n    svg.selectAll('*').remove()\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n    const r = Math.min(w, h) / 2 - 40\n    const angleSlice = (2 * Math.PI) / (this.categories.length || 1)\n\n    // 데이터 변환: { group, values: [ {category, value} ... ] }\n    const groupData = d3\n      .groups(this.data, d => d.group)\n      .map(([group, values]) => ({\n        group,\n        values: this.categories.map((cat, i) => {\n          const found = values.find(v => v.category === cat)\n          return { category: cat, value: found ? found[this.valueKey] : 0 }\n        })\n      }))\n\n    // 스케일\n    const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1\n    const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])\n\n    // SVG 기본\n    svg.attr('width', w).attr('height', h)\n    const g = svg.append('g').attr('transform', `translate(${w / 2},${h / 2})`)\n\n    // 그리드/축\n    for (let i = 1; i <= 5; i++) {\n      g.append('circle')\n        .attr('r', (r / 5) * i)\n        .attr('fill', 'none')\n        .attr('stroke', '#ccc')\n    }\n    this.categories.forEach((cat, i) => {\n      const angle = i * angleSlice - Math.PI / 2\n      g.append('line')\n        .attr('x1', 0)\n        .attr('y1', 0)\n        .attr('x2', radius(maxValue) * Math.cos(angle))\n        .attr('y2', radius(maxValue) * Math.sin(angle))\n        .attr('stroke', '#ccc')\n      g.append('text')\n        .attr('x', (radius(maxValue) + 10) * Math.cos(angle))\n        .attr('y', (radius(maxValue) + 10) * Math.sin(angle))\n        .attr('text-anchor', 'middle')\n        .attr('alignment-baseline', 'middle')\n        .attr('font-size', 12)\n        .text(cat)\n    })\n\n    // 그룹별 폴리곤\n    groupData.forEach(gd => {\n      // 마지막에 첫 점을 한 번 더 추가\n      const closedValues = [...gd.values, gd.values[0]]\n      const line = d3\n        .lineRadial()\n        .radius((d: any) => radius(d.value))\n        .angle((d, i) => i * angleSlice)\n      g.append('path')\n        .datum(closedValues)\n        .attr('d', line as any)\n        .attr('fill', gd.group === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')\n        .attr('stroke', gd.group === this.currentGroup ? '#2196f3' : '#aaa')\n        .attr('stroke-width', gd.group === this.currentGroup ? 3 : 1)\n    })\n  }\n}\n"]}

package/dist-client/pages/kpi/kpi-list-page.d.ts

@@ -29,7 +29,7 @@ export declare class KpiListPage extends KpiListPage_base {
     private grist;
     availableVariables: any[];
     availableVariablesLoaded: boolean;
-    getAvailableVariables(): Promise<any[]>;
+    getAvailableKpiMetricVariables(): Promise<any[]>;
     get context(): {
         title: string;
         search: {
@@ -76,5 +76,6 @@ export declare class KpiListPage extends KpiListPage_base {
     _editGrades(kpi: any): Promise<void>;
     _editViz(kpi: any): Promise<void>;
     _onVizUpdated(kpiId: string, vizType: string, vizMeta: any): Promise<void>;
+    _calculateKpiValue(kpi: any): Promise<void>;
 }
 export {};