Examples

import { Report, type ReportConfig } from "ibcs-react";
import { sampleMonthlyTrend, sampleRevenueStructure } from "./sample-data";

// Sparkline series from the actual periods of the trend.
const acTrend = sampleMonthlyTrend.filter((d) => d.AC != null).map((d) => d.AC as number);

const executiveConfig: ReportConfig = {
  title: {
    who: "Contoso Group",
    what: "Performance summary - € thousands",
    when: "FY 2026 · Actual vs Previous year",
  },
  message: "Revenue +17.5% on PY; margin expansion lifts net income to €8.9M.",
  columns: 12,
  blocks: [
    {
      id: "k-rev",
      type: "kpi",
      span: 3,
      config: {
        label: "Revenue",
        values: { AC: 30_100_000, PY: 25_600_000, PL: 28_500_000 },
        comparisons: ["PY", "PL"],
        format: { compact: true, decimals: 1 },
        sparkline: acTrend,
      },
    },
    // …three more KPI blocks: gross margin, operating income, net income
    {
      id: "ex-bridge",
      type: "chart",
      span: 7,
      title: { who: "Contoso Group", what: "Operating income bridge", when: "FY 2026" },
      config: {
        type: "waterfall",
        data: [
          { category: "Revenue", value: 30_100_000, flow: "add" },
          { category: "COGS", value: 9_700_000, flow: "subtract", higherIsBetter: false },
          { category: "Gross margin", value: 20_400_000, flow: "result" },
          { category: "Opex", value: 10_000_000, flow: "subtract", higherIsBetter: false },
          { category: "Op. income", value: 10_400_000, flow: "result" },
        ],
        width: 460,
        height: 280,
        format: { compact: true, decimals: 1 },
      },
    },
    {
      id: "ex-structure",
      type: "chart",
      span: 5,
      config: { type: "structure", data: sampleRevenueStructure, width: 360, height: 280 },
    },
    {
      id: "ex-trend",
      type: "chart",
      span: 12,
      config: { type: "trend", data: sampleMonthlyTrend, width: 820, height: 260 },
    },
  ],
};

<Report config={executiveConfig} />;

import { StructureChart, MiniVarianceMultiples, DataTable } from "ibcs-react";
import { sampleRevenueStructure } from "./sample-data";

const regionMultiples = [
  {
    label: "North America",
    data: [
      { category: "Q1", AC: 2.9e6, PY: 2.6e6 },
      { category: "Q2", AC: 3.1e6, PY: 2.7e6 },
      { category: "Q3", AC: 3.2e6, PY: 2.9e6 },
      { category: "Q4", AC: 3.2e6, PY: 2.9e6 },
    ],
  },
  // …Europe, Asia Pacific, Rest of world
];

const salesColumns = [
  { key: "rev", label: "Revenue AC", kind: "value" as const },
  {
    key: "rev_dpy",
    label: "ΔPY",
    kind: "variance" as const,
    measure: "rev",
    base: "PY" as const,
    mode: "abs" as const,
    mark: "bar" as const,
  },
  {
    key: "rev_dpy_pct",
    label: "ΔPY %",
    kind: "variance" as const,
    measure: "rev",
    base: "PY" as const,
    mode: "pct" as const,
    mark: "pin" as const,
  },
  {
    key: "trend",
    label: "Trend",
    kind: "sparkline" as const,
    measure: "rev",
    sparkType: "line" as const,
  },
];

const salesRows = [
  {
    id: "na",
    label: "North America",
    values: { rev: { AC: 12_400_000, PY: 11_100_000 } },
    spark: { rev: [2.6e6, 2.7e6, 2.9e6, 3.1e6, 3.2e6, 3.2e6] },
  },
  // …one row per region
];

// Panel chrome omitted for brevity.
<div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
  <StructureChart data={sampleRevenueStructure} comparison="PY" width={380} height={280} />
  <MiniVarianceMultiples groups={regionMultiples} comparison="PY" columns={2} />
  <DataTable
    columns={salesColumns}
    rows={salesRows}
    format={{ compact: true, decimals: 1 }}
    showTotals
    totalsLabel="Total"
    defaultSort={{ key: "rev", dir: "desc" }}
  />
</div>;

import { StatementTable, DataTable } from "ibcs-react";
import { sampleStatementFlat, sampleBalanceSheet, sampleQuarterlyStatement } from "./sample-data";

const budgetColumns = [
  { key: "rev", label: "Actual", kind: "value" as const },
  { key: "rev_pl", label: "Plan", kind: "value" as const, measure: "rev", scenario: "PL" as const },
  {
    key: "rev_dpl",
    label: "ΔPL",
    kind: "variance" as const,
    measure: "rev",
    base: "PL" as const,
    mode: "abs" as const,
    mark: "bar" as const,
  },
  {
    key: "rev_dpl_pct",
    label: "ΔPL %",
    kind: "variance" as const,
    measure: "rev",
    base: "PL" as const,
    mode: "pct" as const,
    mark: "pin" as const,
  },
];

const budgetRows = sampleQuarterlyStatement
  .filter((l) => l.flow !== "result")
  .map((l) => ({
    id: l.id,
    label: l.label,
    values: { rev: { AC: l.values.AC, PL: l.values.PL } },
  }));

// Panel chrome omitted for brevity.
<div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
  <StatementTable lines={sampleStatementFlat} waterfallWidth={170} maxHeight={300} />
  <StatementTable lines={sampleBalanceSheet} mode="stock" waterfallWidth={150} maxHeight={300} />
  <DataTable
    columns={budgetColumns}
    rows={budgetRows}
    format={{ compact: true, decimals: 1 }}
    showTotals
    totalsLabel="Full year"
  />
</div>;