[Chart] Support explicit width/height to improve some SSR use cases

[techniq]

Currently the container width/height is set to 100 until the Chart is client-side mounted and <div bind:clientWidth bind:clientHeight> can be determined. 100 is used due to how LayerCake supports percentage-based layouts which is is responsive, javascript-free approach (also demonstrated by pancake library).

For some use cases, passing in an explicit width/height would be sufficient, especially if determined by a layout such as dagre or d3-tree.

Supporting

<Chart {containerWidth} {containerHeight}>

would allow for this use case (also should this be called width/height but not to confuse with the context.height which accounts for padding).

Currently something like this can be used for client-side setting a chart height based on a dagre layout.

<script lang="ts">
  let graph = $state<dagre.graphlib.Graph>();
  $effect(() => {
    graphHeight = graph?.graph().height;
  });
</script>

<div style:height={graphHeight ? graphHeight + 'px' : undefined}>
  <Chart data={selectedGraph}>
    <Dagre {data} bind:graph>
      ...
    </Dagre>
  </Chart>
</div>

but something like this should be supported

<script lang="ts">
  import { dagreGraph } from 'layerchart';

  let { data } = $props();
  let graph = $state(dagreGraph(data, options));
  $effect(() => {
    graphHeight = graph?.graph().height;
  });
</script>

<Chart data={selectedGraph} width="{graph.graph().width}px" height="{graph.graph().height}px">
  <!-- Support `{graph}` as well as `{data} ...` -->
  <Dagre {graph}>
    ...
  </Dagre>
</Chart>

See related discussion