import React from "react"; import { defineInfigure } from "@infigure/sdk"; const readText = (value: unknown, fallback = "") => typeof value === "string" && value.trim().length > 0 ? value : fallback; const readNumber = (value: unknown, fallback = 0) => { const numeric = Number(value); return Number.isFinite(numeric) ? numeric : fallback; }; const readColor = (value: unknown, fallback: string) => typeof value === "string" && value.trim().length > 0 ? value : fallback; function ChartPanel({ api, data, width, height, lineColor = "#2563EB", fillColor = "rgba(37,99,235,0.16)", gridColor = "#E2E8F0", axisColor = "#334155", surfaceColor = "#FFFFFF", padding = 16, }) { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const rows = (Array.isArray(data) ? data : []) .map((row, index) => ({ label: readText(row.label ?? row.x ?? row.period, `Point ${index + 1}`), value: readNumber(row.value ?? row.actual, NaN), })) .filter((row) => row.label.length > 0 && Number.isFinite(row.value)); const paddingValue = Math.max(8, readNumber(padding, 16)); const boxWidth = Math.max(280, width); const boxHeight = Math.max(180, height); if (rows.length === 0) { return (

Connect label and value rows.

); } const values = rows.map((row) => row.value); const max = Math.max(...values, 1); const min = Math.min(...values, 0); const span = Math.max(1, max - min); const innerWidth = Math.max(1, boxWidth - paddingValue * 2); const innerHeight = Math.max(1, boxHeight - paddingValue * 2); const chartHeight = innerHeight - 34; const points = rows.map((row, index) => { const x = rows.length === 1 ? 0 : (index / (rows.length - 1)) * innerWidth; const y = chartHeight - ((row.value - min) / span) * chartHeight; return { x, y }; }); const areaPath = points.length > 0 ? `M ${points[0].x} ${chartHeight} ${points.map((point) => `L ${point.x} ${point.y}`).join(" ")} L ${points[points.length - 1].x} ${chartHeight} Z` : ""; const linePath = points.length > 0 ? `M ${points.map((point) => `${point.x},${point.y}`).join(" L ")}` : ""; return (

); } export default defineInfigure(ChartPanel, { label: "Chart", bindings: [ { id: "label", label: "Label", path: "data.label", required: true, kind: "field", cardinality: "one", description: "X-axis label." }, { id: "value", label: "Value", path: "data.value", required: true, kind: "field", cardinality: "one", description: "Numeric series value." }, ], controls: [ { id: "lineColor", label: "Line Color", kind: "color", default: "#2563EB", group: "Colors" }, { id: "fillColor", label: "Fill Color", kind: "color", default: "rgba(37,99,235,0.16)", group: "Colors" }, { id: "gridColor", label: "Grid Color", kind: "color", default: "#E2E8F0", group: "Colors" }, { id: "axisColor", label: "Axis Color", kind: "color", default: "#334155", group: "Colors" }, { id: "surfaceColor", label: "Surface", kind: "color", default: "#FFFFFF", group: "Colors" }, { id: "padding", label: "Padding", kind: "number", default: 16, min: 8, max: 40, step: 1, group: "Layout" }, ], });

Headline Plus Chart