Chart showing up blank

[kdumontnu]

I'm trying to use Layercake to make a simple resource monitor with Tauri + Svelte (4.2.7). I followed the basic example in the docs, but I'm getting an empty chart. It looks like it's not an issue with CSS (at least not that I'm seeing).

Any advice for further debugging?

I'm also running WSL2 with vgpu just to throw another wrench in things. Is GPU required?

I tried debug={true} and it returns:

[Log] /********* LayerCake Debug ************/ (layercake.js, line 3367)
[Log] Bounding box: (layercake.js, line 3368)
[Log]     top: – 0 (layercake.js, line 3378)
[Log]     right: – 1314 (layercake.js, line 3378)
[Log]     bottom: – 300 (layercake.js, line 3378)
[Log]     left: – 0 (layercake.js, line 3378)
[Log]     width: – 1314 (layercake.js, line 3378)
[Log]     height: – 300 (layercake.js, line 3378)
[Log] Scales: (layercake.js, line 3370)

[Log]     x: (layercake.js, line 3383)
[Log]         Accessor: "x" (layercake.js, line 3384)
[Log]         Type: scaleLinear (layercake.js, line 3385)
[Log]         Domain: – [0, 20] (2) (layercake.js, line 3395)
[Log]         Range:  – [0, 1314] (2) (layercake.js, line 3395)
[Log]     y: (layercake.js, line 3383)
[Log]         Accessor: "y" (layercake.js, line 3384)
[Log]         Type: scaleLinear (layercake.js, line 3385)
[Log]         Domain: – [0, 40] (2) (layercake.js, line 3395)
[Log]         Range:  – [300, 0] (2) (layercake.js, line 3395)
[Log] /************ End LayerCake Debug ***************/ (layercake.js, line 3374)

[mhkeller]

When you look at the DOM tree, what’s there? Is there an svg with a path attribute?

In your screenshot, there’s a mismatch between the dimensions shown in the browser window versus what’s computed. Maybe try getting rid of the negative margin top, if that’s hiding elements in your layout.

I would also try creating a hardcoded svg element to see if that draws given your current setup.

[kdumontnu]

When you look at the DOM tree, what’s there? Is there an svg with a path attribute?

The screenshot above shows the expanded DOM tree. I don't see anything except an empty HTML document.

[mhkeller]

I'd first try to see if any SVGs can render. The iframe in the screenshot is a svelte thing for capturing resizes. Just to be sure, scroll down some more and see what else is in there. Can you make a minimal reproduction? Without that, it's going to be hard to debug remotely.

[kdumontnu]

Replacing with an SVG seems to work fine.

<style>
  .chart-container {
    width: 100%;
    height: 300px;
  }
</style>

<div class="chart-container">
  <svg width="400" height="180">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    Sorry, your browser does not support inline SVG.
  </svg>
</div>

vs.

<!-- { filename: 'js/App.svelte' } -->
<script>
  import { LayerCake } from 'layercake';

  // Define some data
  const points = [
    {x: 0, y: 0},
    {x: 5, y: 10},
    {x: 10, y: 20},
    {x: 15, y: 30},
    {x: 20, y: 40}
  ];
</script>

<style>
  .chart-container {
    width: 100%;
    height: 300px;
  }
</style>

<div class="chart-container">
  <LayerCake
    debug={true}
    data={ points }
    x='x'
    y='y'
  >
    <!-- Components go here -->
  </LayerCake>
</div>

Weird. Well, I'll keep poking around. I was curious if anyone had tried this with Tauri.

[mhkeller]

That's the expected behavior based on the Svelte code you've posted.

You have to include components where it has the comment <!-- Components go here -->. The LayerCake component is measuring the extents of your data and creating scales. It will only render when you've passed in components that create SVG, HTML or Canvas elements.

[mhkeller]

For example, import the Svg layout component and copy the ScatterSvg component into your project from here: https://layercake.graphics/example/Scatter.

[kdumontnu]

For example, import the Svg layout component and copy the ScatterSvg component into your project from here: https://layercake.graphics/example/Scatter.

Ah, I guess I missed that initially. I can't test it for a few days, but this is almost certainly my issue.

[mhkeller]

Sounds good. If you do have the time to post a minimal reproduction, I've wanted to play around with SvelteKit + Tauri so it would be informative to see what your setup is.

[kdumontnu]

Sounds good. If you do have the time to post a minimal reproduction, I've wanted to play around with SvelteKit + Tauri so it would be informative to see what your setup is.

Just published my (very much WIP!) application: https://github.com/kdumontnu/clouseau

Thanks for your help!

[mhkeller]

Ah great! I’m glad it worked out!