Can't call small multiple unless you go through the chart component.

[ONSSamBennett]

Because of the way props are passed through the components, you currently can't call a small multiple version of a chart directly through a chart type component (e.g. BarChart.svelte), this is because Chart.svelte does some data manipulation to pass grouped small multiple data to the SmalMultiple component, which then passes to the relevant chart component. The workflow needs amending so that you can call SmallMultiple either through the Chart.svelte or individual chart components.

[ONSSamBennett]

This is Claude's suggestion on fixing the problem:

The core problem is that SmallMultiple currently receives a pre-built props object (assembled by Chart.svelte's makeProps function) plus a separately computed smData object. If you go directly to BarChart, neither of those things happen.

The cleanest solution is to extract the shared logic into a reusable wrapper — a withSmallMultiple pattern — rather than duplicating code in every chart component. Here's what I'd suggest:

---

1. Create a SmallMultipleWrapper.svelte

This is the key addition. It's a thin component that handles the smKey detection and grouping, then delegates to SmallMultiple or the chart itself. Each chart component would use this internally:

svelte

<!-- SmallMultipleWrapper.svelte -->
<script>
  import SmallMultiple from "./SmallMultiple.svelte";
  import { groupData, getScreenSize } from '../js/utils';

  let {
    component,   // the chart component to render (e.g. BarChart)
    type,        // the type string SmallMultiple needs (e.g. "bar")
    smKey,
    data,
    width,
    chartEvery,
    ...rest      // everything else gets forwarded to the chart
  } = $props();

  let smData = $derived(smKey ? groupData(data, smKey) : null);
</script>

{#if smKey && smData}
  <SmallMultiple
    props={{ smKey, data, chartEvery, ...rest }}
    data={smData}
    {width}
    {type}
    {chartEvery}
  />
{:else}
  <component this={component} {data} {width} {smKey} {...rest} />
{/if}

Note: Svelte 5 supports <component this={...} /> for dynamic component rendering — this is what allows the wrapper to be generic.

---

2. Wrap BarChart.svelte to use it

Rather than modifying BarChart's internals (which would entangle chart rendering logic with layout logic), keep BarChart as a pure chart and create a thin public-facing entry point:

svelte

<!-- BarChartEntry.svelte  (or rename BarChart and make this the new BarChart) -->
<script>
  import SmallMultipleWrapper from "./SmallMultipleWrapper.svelte";
  import BarChartInner from "./BarChart.svelte";
  import { getScreenSize } from '../js/utils';

  let { smKey, width, ...rest } = $props();
  let size = $derived(getScreenSize(width));
</script>

<div class="chart-container" bind:clientWidth={width}>
  <SmallMultipleWrapper
    component={BarChartInner}
    type="bar"
    {smKey}
    {width}
    {size}
    {...rest}
  />
</div>

Users would then import BarChart (this file) and smKey just works directly.

---

3. Minor fix needed in SmallMultiple.svelte

Currently SmallMultiple receives props as a single bundled object, which is what Chart.svelte passes. You'd want it to also accept spread props for the direct usage case. The cleanest way is to keep the existing props object interface — SmallMultipleWrapper simply re-bundles the spread props back into a props object before passing to SmallMultiple, so SmallMultiple itself doesn't need to change.

---

Why this approach over alternatives?

• Avoid duplicating smKey logic in every chart: If you put the smKey check inside BarChart directly, you'd have to repeat it in LineChart, DotChart, etc. The wrapper keeps it DRY.
• Chart.svelte stays as-is: It already works; you're just making the same capability available without it.
• BarChart stays as a pure renderer: It doesn't need to know about small multiples — that's a layout concern, not a charting concern. The separation is clean.
• Extensible: Adding smKey support to LineChart or DotChart in future just means wrapping them the same way with type="line" etc.

---

Summary of files to change

File | Change -- | -- SmallMultipleWrapper.svelte | Create new — generic wrapper handling smKey detection BarChart.svelte (rename to BarChartInner.svelte) | No changes to logic BarChart.svelte (new file) | Create new — thin entry point using SmallMultipleWrapper SmallMultiple.svelte | No changes needed Chart.svelte | Update import of BarChart if you rename the inner component