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; }; const readColor = (value: unknown, fallback: string) => typeof value === "string" && value.trim().length > 0 ? value : fallback; const readBoolean = (value: unknown, fallback: boolean) => typeof value === "boolean" ? value : fallback; function HorizontalBarChart({ api, data, width, height, barColor = "#2563EB", gridColor = "#E5E7EB", axisColor = "#475569", labelColor = "#475569", barRadius = 6, barGap = 0.24, fontFamily = "ui-sans-serif, system-ui, sans-serif", fontSize = 12, fontWeight = "500", showValueLabels = false, valuePrefix = "", valueSuffix = "", valueLabelGap = 8, tickCount = 4, xDomainPadding = 1.15, showGrid = true, showXAxis = true, showYAxis = true, xAxisTitle = "", yAxisTitle = "", marginTop = 12, marginRight = 20, marginBottom = 24, marginLeft = 110, }) { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const fontFamilyValue = readText(fontFamily, "ui-sans-serif, system-ui, sans-serif"); const fontSizeValue = Math.max(8, Math.min(24, readNumber(fontSize, 12))); const fontWeightValue = readText(fontWeight, "500"); const barColorValue = readColor(barColor, "#2563EB"); const gridColorValue = readColor(gridColor, "#E5E7EB"); const axisColorValue = readColor(axisColor, "#475569"); const labelColorValue = readColor(labelColor, axisColorValue); const radius = Math.max(0, readNumber(barRadius, 6)); const barGapValue = Math.max(0, Math.min(0.6, readNumber(barGap, 0.24))); const showValueLabelsValue = readBoolean(showValueLabels, false); const valuePrefixValue = readText(valuePrefix, ""); const valueSuffixValue = readText(valueSuffix, ""); const valueLabelGapValue = Math.max(0, Math.min(24, readNumber(valueLabelGap, 8))); const tickCountValue = Math.max(2, Math.min(10, Math.round(readNumber(tickCount, 4)))); const xDomainPaddingValue = Math.max(1, readNumber(xDomainPadding, 1.15)); const showGridValue = readBoolean(showGrid, true); const showXAxisValue = readBoolean(showXAxis, true); const showYAxisValue = readBoolean(showYAxis, true); const xAxisTitleValue = readText(xAxisTitle, "").trim(); const yAxisTitleValue = readText(yAxisTitle, "").trim(); const margin = { top: Math.max(0, readNumber(marginTop, 12)), right: Math.max(0, readNumber(marginRight, 20)), bottom: Math.max(0, readNumber(marginBottom, 24)), left: Math.max(0, readNumber(marginLeft, 110)), }; const boxWidth = Math.max(280, width); const boxHeight = Math.max(200, height); const rows = (Array.isArray(data) ? data : []) .map((row, index) => ({ category: readText(row.category ?? row.label ?? row.Category, `Item ${index + 1}`), value: readNumber(row.value ?? row.Value, NaN), })) .filter((row) => row.category.trim().length > 0 && Number.isFinite(row.value)); if (rows.length === 0) { return (

Connect category and value rows.

); } const innerWidth = Math.max(1, boxWidth - margin.left - margin.right); const innerHeight = Math.max(1, boxHeight - margin.top - margin.bottom); const maxValue = Math.max(...rows.map((row) => row.value), 1); const yScale = d3.scaleBand().domain(rows.map((row) => row.category)).range([0, innerHeight]).padding(barGapValue); const xScale = d3.scaleLinear().domain([0, maxValue * xDomainPaddingValue]).nice(tickCountValue).range([0, innerWidth]); const formatValue = (value: number) => { const formatted = new Intl.NumberFormat("en-US", { maximumFractionDigits: value % 1 === 0 ? 0 : 2, }).format(value); return `${valuePrefixValue}${formatted}${valueSuffixValue}`; }; return ( ); } export default defineInfigure(HorizontalBarChart, { label: "Horizontal Bar Chart", bindings: [ { id: "category", label: "Category", path: "data.category", required: true, kind: "field", cardinality: "one", description: "Category label field." }, { id: "value", label: "Value", path: "data.value", required: true, kind: "field", cardinality: "one", description: "Numeric value field." }, ], controls: [ { id: "barColor", label: "Bar Color", kind: "color", default: "#2563EB", group: "Colors" }, { id: "gridColor", label: "Grid Color", kind: "color", default: "#E5E7EB", group: "Colors" }, { id: "axisColor", label: "Axis Line Color", kind: "color", default: "#475569", group: "Colors" }, { id: "labelColor", label: "Label Color", kind: "color", default: "#475569", group: "Colors" }, { id: "barRadius", label: "Corner Radius", kind: "number", default: 6, min: 0, max: 24, step: 1, group: "Bars" }, { id: "barGap", label: "Bar Gap", kind: "number", default: 0.24, min: 0, max: 0.6, step: 0.02, group: "Bars" }, { id: "fontFamily", label: "Font Family", kind: "text", default: "ui-sans-serif, system-ui, sans-serif", group: "Typography" }, { id: "fontSize", label: "Font Size", kind: "number", default: 12, min: 8, max: 24, step: 1, group: "Typography" }, { id: "fontWeight", label: "Font Weight", kind: "select", default: "500", options: [{ value: "400", label: "Regular" }, { value: "500", label: "Medium" }, { value: "600", label: "Semibold" }, { value: "700", label: "Bold" }], group: "Typography" }, { id: "showValueLabels", label: "Show Value Labels", kind: "toggle", default: false, group: "Values" }, { id: "valuePrefix", label: "Value Prefix", kind: "text", default: "", group: "Values" }, { id: "valueSuffix", label: "Value Suffix", kind: "text", default: "", group: "Values" }, { id: "valueLabelGap", label: "Value Label Gap", kind: "number", default: 8, min: 0, max: 24, step: 1, group: "Values" }, { id: "tickCount", label: "Tick Count", kind: "number", default: 4, min: 2, max: 10, step: 1, group: "Axis" }, { id: "xDomainPadding", label: "Value Range Padding", kind: "number", default: 1.15, min: 1, max: 2, step: 0.05, group: "Axis" }, { id: "showGrid", label: "Show Grid", kind: "toggle", default: true, group: "Axis" }, { id: "showXAxis", label: "Show X Axis", kind: "toggle", default: true, group: "Axis" }, { id: "showYAxis", label: "Show Y Axis", kind: "toggle", default: true, group: "Axis" }, { id: "xAxisTitle", label: "X Axis Title", kind: "text", default: "", group: "Axis" }, { id: "yAxisTitle", label: "Y Axis Title", kind: "text", default: "", group: "Axis" }, { id: "marginTop", label: "Top Margin", kind: "number", default: 12, min: 0, max: 80, step: 1, group: "Layout" }, { id: "marginRight", label: "Right Margin", kind: "number", default: 20, min: 0, max: 120, step: 1, group: "Layout" }, { id: "marginBottom", label: "Bottom Margin", kind: "number", default: 24, min: 0, max: 120, step: 1, group: "Layout" }, { id: "marginLeft", label: "Left Margin", kind: "number", default: 110, min: 0, max: 200, step: 1, group: "Layout" }, ], });