metonym/carbon-charts-svelte-examples

Collection of example set-ups using @carbon/charts-svelte

carbon-charts-svelte-examples's Issues

[Question] Best practices for loading data into charts

Thanks for the examples. They are insightful. I have a question specifically about sveltekit and carbon charts best practices.

In my current working environment I fetch data in the load function in a +page.server.ts. The issue I have is that when I load my page my chart appears later than all the other elements on the page. This probably has to do with the limitations of SSR.

I was wondering what you would recommend? A skeleton like chart would be helpful but then again the issue stays, because this is also loaded later. Or would I completely reconsider data fetching?

Sveltekit typescript example does not work

To reproduce, clone this repo and then:

cd sveltekit-typescript
npm i
npm run dev

When I go to http://localhost:3000/ the console shows the following error a few times:

10:52:28 AM [vite] Error when evaluating SSR module /src/routes/Basic.svelte:
/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/@carbon/charts/interfaces/index.js:1
export * from './a11y';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at nodeRequire (/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/vite/dist/node/chunks/dep-55830a1a.js:66473:17)
    at ssrImport (/home/weasel/projects/carbon-charts-svelte-examples/sveltekit-typescript/node_modules/vite/dist/node/chunks/dep-55830a1a.js:66415:20)
    at eval (/src/routes/Basic.svelte:9:37)

The browser also shows this error.
If I refresh the browser, the error goes away and the charts are showed correctly in the browser.
If I remove the Basic and Events imports and components from index.svelte and leave only the DynamicImport, there are no errors.

The sveltekit example (without typescript) works fine, there are no errors.

If this not related to this repo but more of a problem with the main library https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte then I'm sorry for posting here and I can create the issue in that repo if you wish.