Implementing a reusable Layer Cake style in your newsroom / org

[mhkeller]

Based on this comment, here's an idea for how to use Layer Cake as a source of shared chart resources in your organization in a way that preserves the ability to customize as needed.

Step 1

Create a repository of Layer Cake components, similar to what's on the website, but in your own house style and with whatever customizations / props you want

Step 2

Build chart-level components out of these so that your users don't need to import individual Line.svelte or AxisX.svelte components. Instead they can import LineChart.svelte or AreaChart.svelte and get up and running quickly.

<script>
  import { LayerCake, Svg } from 'layercake';
  import { AreaChart } from '@my-org/layer-charts';

  import data from 'data.csv'
</script>

<LayerCake
  x='myX'
  y='myY'
  {data}
>

  <Svg>
    <AreaChart/>
  </Svg>

</LayerCake>

But, and here's the key, allow these chart-level components to replace their internally referenced components with components provided by props like so:

<script>
  import AreaComponent from './Area.svelte';
  import AxisXComponent from 'AxisX.svelte';
  import AxisYComponent from 'AxisY.svelte';

  export let AxisX = AxisXComponent;
  export let AxisY = AxisYComponent;
  export let Area = AreaComponent;
</script>

<svelte:component this={AxisX}/>
<svelte:component this={AxisY}/>
<svelte:component this={Area}/>

That will let your users start off quickly preserving the ability to override the default component with something custom for this project.

Putting it all together

Let's say you want to replace the built-in AxisX component with your own, simply import that component from your local project and pass it into the <AreaChart> component:

<script>
  import { LayerCake, Svg } from 'layercake';
  import { AreaChart } from '@my-org/layer-charts';

  import CoolAxisX from './project-components/CoolAxisX.svelte';

  import data from 'data.csv'
</script>

<LayerCake
  x='myX'
  y='myY'
  {data}
>

  <Svg>
    <AreaChart
      AxisX={CoolAxisX}
    />
  </Svg>

</LayerCake>

[mhkeller]

One question this raises is how do you handle props to these components? Once you're adding a custom component, is there anything better than doing something like:

  <Svg>
    <AreaChart
      AxisX={CoolAxisX}
      AxisXProps={{ 
        gridlines: false, 
        ticks: [0, 1, 2, 3, 4] 
      }}
    />
  </Svg>

and then in the <AreaChart> component:

<svelte:component this={AxisX} ...AxisXProps/>

Disconnecting CoolAxisX and AxisXProps is very unsvelty to me. I think something with slots would be better than props.

[mhkeller]

I think this could be handled better with Svelte 5's snippets API so you could pass in the component itself.