import * as d3 from "d3"; 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; }; type AreaChartRow = { series?: unknown; x?: unknown; y?: unknown }; type AreaChartProps = { api: any; data?: AreaChartRow[]; width?: number; height?: number; lineWidth?: number; lineColor?: string; areaColor?: string; secondaryColor?: string; secondaryAreaColor?: string; gridColor?: string; axisColor?: string; }; const AreaChart = ({ api, data, width, height, lineWidth = 2.5, lineColor = "#2563EB", areaColor = "rgba(37,99,235,0.18)", secondaryColor = "#0F766E", secondaryAreaColor = "rgba(15,118,110,0.18)", gridColor = "#E5E7EB", axisColor = "#475569", }: AreaChartProps) => { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const rows = (Array.isArray(data) ? data : []) .map((row, index) => ({ series: readText(row.series, "Series"), x: readText(row.x, `Point ${index + 1}`), y: readNumber(row.y, NaN), })) .filter((row) => row.x.length > 0 && Number.isFinite(row.y)); // width/height reflect the block's actual on-canvas size, sourced live — // dragging a resize handle on canvas re-renders this component with new // values. The floors below only guard the brief window before a first // real measurement arrives. const boxWidth = Math.max(280, readNumber(width, 640)); const boxHeight = Math.max(200, readNumber(height, 240)); if (rows.length === 0) { return (

Connect x and y rows.

); } const grouped = Array.from(d3.group(rows, (row) => row.series).entries()); const xDomain = Array.from(new Set(rows.map((row) => row.x))); const yMax = Math.max(1, ...rows.map((row) => row.y)); const margin = { top: 20, right: 20, bottom: 42, left: 44 }; const innerWidth = Math.max(1, boxWidth - margin.left - margin.right); const innerHeight = Math.max(1, boxHeight - margin.top - margin.bottom); const x = d3.scalePoint().domain(xDomain).range([0, innerWidth]).padding(0.5); const y = d3.scaleLinear().domain([0, yMax * 1.15]).nice(4).range([innerHeight, 0]); const seriesColors = d3.scaleOrdinal() .domain(grouped.map(([series]) => series)) .range([lineColor, secondaryColor, "#A855F7", "#F59E0B"]); const area = d3.area<{ x: string; y: number }>() .x((row) => x(row.x) ?? 0) .y0(innerHeight) .y1((row) => y(row.y)) .curve(d3.curveMonotoneX); const line = d3.line<{ x: string; y: number }>() .x((row) => x(row.x) ?? 0) .y((row) => y(row.y)) .curve(d3.curveMonotoneX); return ( ); }; AreaChart.infigureReactive = true; export default defineInfigure(AreaChart, { label: "Area Chart", resizable: true, resizeAxes: ["x", "y"], bindings: [ { id: "series", label: "Series", path: "data.series", required: false, kind: "field", cardinality: "one", description: "Series label used for grouping areas." }, { id: "x", label: "X Value", path: "data.x", required: true, kind: "field", cardinality: "one", description: "Discrete x-axis label." }, { id: "y", label: "Y Value", path: "data.y", required: true, kind: "field", cardinality: "one", description: "Numeric value plotted as an area." }, ], controls: [ { id: "lineColor", label: "Primary Stroke", kind: "color", default: "#2563EB", group: "Colors" }, { id: "areaColor", label: "Primary Fill", kind: "color", default: "rgba(37,99,235,0.18)", group: "Colors" }, { id: "secondaryColor", label: "Secondary Stroke", kind: "color", default: "#0F766E", group: "Colors" }, { id: "secondaryAreaColor", label: "Secondary Fill", kind: "color", default: "rgba(15,118,110,0.18)", group: "Colors" }, { id: "gridColor", label: "Grid Color", kind: "color", default: "#E5E7EB", group: "Colors" }, { id: "axisColor", label: "Axis Color", kind: "color", default: "#475569", group: "Colors" }, { id: "lineWidth", label: "Stroke Width", kind: "number", default: 2.5, min: 1, max: 8, step: 0.1, group: "Layout" }, ], });