41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { NodeProps } from "reactflow";
|
|
import { BarChart3 } from "lucide-react";
|
|
import { CompactNodeShell } from "./CompactNodeShell";
|
|
import type { AggregateNodeData } from "@/types/node-editor";
|
|
|
|
export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeData>) => {
|
|
const opCount = data.operations?.length || 0;
|
|
const groupCount = data.groupByFields?.length || 0;
|
|
const summary = opCount > 0
|
|
? `${opCount}개 연산${groupCount > 0 ? `, ${groupCount}개 그룹` : ""}`
|
|
: "집계 연산을 설정해 주세요";
|
|
|
|
return (
|
|
<CompactNodeShell
|
|
color="#A855F7"
|
|
label={data.displayName || "집계"}
|
|
summary={summary}
|
|
icon={<BarChart3 className="h-3.5 w-3.5" />}
|
|
selected={selected}
|
|
>
|
|
{opCount > 0 && (
|
|
<div className="space-y-0.5">
|
|
{data.operations!.slice(0, 3).map((op: any, i: number) => (
|
|
<div key={i} className="flex items-center gap-1.5">
|
|
<span className="rounded bg-violet-500/20 px-1 py-0.5 font-mono text-[9px] font-semibold text-violet-400">
|
|
{op.function || op.operation}
|
|
</span>
|
|
<span>{op.field || op.sourceField}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CompactNodeShell>
|
|
);
|
|
});
|
|
|
|
AggregateNode.displayName = "AggregateNode";
|