rich-harris / pancake Goto Github PK
View Code? Open in Web Editor NEWExperimental charting library for Svelte
License: MIT License
Experimental charting library for Svelte
License: MIT License
I could definitely be doing something wrong here, but I believe Pancake may not be interacting with Svelte's draw animation properly. The draw animation starts drawing from three distinct points along the SVG path. It looks like the number of segments changes based on the window size. Here is an example of what I'm experiencing in the Svelte REPL. Any insight would be greatly appreciated.
9:29:01 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.
@sveltejs/[email protected]
Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
The recommended fix is found here https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition
// package.json
"files": ["dist"],
"svelte": "dist/index.js",
+ "exports": {
+ ".": {
+ "svelte": "./dist/index.js"
+ }
}
Hey Rich!
I may just be totally overlooking it but is there currently a way to do something ala SvgRect
in the same vein as the other SVG utilities? My Svelte-foo is still pretty basic so perhaps there's a way to tap into Pancake's contexts I've overlooked.
Thanks for sharing the library! I've noticed it appearing all over the place on NYT and it's cool to see how it's being put to use.
I'd like to add a super simple bar chart example (REPL) to the website to engage more people, but there's no activity in this repo.
So I've created a community fork:
But it would be easier if you added me as a contributor (maybe also to npm and website). Would save a lot of confusion. I would probably add the other PR creators also.
import * as Pancake from '@sveltejs/pancake'
Can't get it to work with Sapper. The rollup-compiled server.js
contains var pancake = require('@sveltejs/pancake');
which will break as the package doesn't have a main
attribute in the package.json
.
Looking at the rollup plugin config options, it sounds like rollup should be able to take care of it, but I can't work out which options to set
internal/modules/cjs/loader.js:1033
throw err;
^
Error: Cannot find module '@sveltejs/pancake'
Require stack:
- /home/t/sapper-ts/__sapper__/dev/server/server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
at Function.Module._load (internal/modules/cjs/loader.js:899:27)
at Module.require (internal/modules/cjs/loader.js:1090:19)
at require (internal/modules/cjs/helpers.js:75:18)
at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/t/sapper-ts/__sapper__/dev/server/server.js' ]
}
Adding a main
attribute changes the error to this:
internal/modules/cjs/loader.js:1048
throw new ERR_REQUIRE_ESM(filename);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/t/sapper-ts/node_modules/@sveltejs/pancake/index.mjs
at Module.load (internal/modules/cjs/loader.js:1048:11)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Module.require (internal/modules/cjs/loader.js:1090:19)
at require (internal/modules/cjs/helpers.js:75:18)
at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'ERR_REQUIRE_ESM'
Check out this example for the Zoomable Treemap:
Initial render is fine but upon clicking, the whole chart whitens out.
It's exactly the same code as what's linked from the README -> Examples page, with only this line added:
<svelte:head>
<script src="//cdn.tailwindcss.com/"></script>
</svelte:head>
I suspect TailwindCSS is setting some global styles which Pancake is not isolating/defending against.
Right now this library doesn't have anything to say about accessibility. It's potentially in a good place to make sure that people do provide relevant information for screen readers and the like, though I need to spend a bit of time educating myself about the various best practices
Pancake is not compatible with 3.24.0 and shows the following error on the REPL:
I'm assuming due to:
Hello,
It seems like there is a bit of an issue whit Quadtree class trying to read width and height that it get from the Chart context. These values seems to be bound to clientWidth and clientHeight of the chart component, but for some reason are evaluating to 0.
Seems like this sample also have the same issue :
https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29?version=3.26.0
So when the mouse move, the cursor do not update.
It works on the main page, but not on the REPL
When I upgraded my own application with pancake from 0.0.15 to 0.0.16, the application stopped working and showed
InternalError: too much recursion
in the console. The page at https://pancake-charts.surge.sh/ does not show the same problem (is it running 0.0.16?), but if you click Edit on the "Life Expectancy" graph, the repl (which is using 0.0.16) shows the same problem:
Uncaught DOMException: The object could not be cloned. srcdoc:130
Uncaught DOMException: The object could not be cloned. srcdoc:134
Uncaught (in promise) InternalError: too much recursion
add about:srcdoc line 86 > eval:3630
add about:srcdoc line 86 > eval:3656
add about:srcdoc line 86 > eval:3649
add about:srcdoc line 86 > eval:3656
...
The above error is from firefox. Safari shows a similar Unhandled Promise Rejection: RangeError: Maximum call stack size exceeded.
Have you plans to support logarithmic scale grids?
Hi @Rich-Harris , good night!
First of all, thank you for all your work on Svelte. It's a fantastic outside-of-the-box approach to front-end development.
I'm trying to use pancake
as our main charts provider and I might have found a small issue with Quadtree. I'm trying to build a similar example to your Example 2 but I'm getting the error below whenever the chart is hovered:
Uncaught (in promise) RangeError: Maximum call stack size exceeded
I took a look at utils/Quadtree.mjs
to see if there were any recent changes that might have caused the issue but I couldn't tell.
Would you mind giving me a hint on what could be wrong? If it's a bug, I would love to help, just need a brief direction.
I created a reproduction, using the same code of the website. You just need to open the Console and hover on the cart.
Thanks again,
Marcelo
• http://skedasis.com/d3/slopegraph/
• https://observablehq.com/@d3/sankey-diagram
• https://observablehq.com/@d3/zoomable-area-chart
• https://observablehq.com/@d3/brushable-scatterplot-matrix
• https://observablehq.com/@d3/box-plot
• https://observablehq.com/@d3/stacked-to-grouped-bars
• https://github.com/d3/d3/wiki/Gallery
I get 10 errors in the Chrome developer console:
Error: attribute d: Unexpected end of attribute. Expected number, "M".
Saw the post online, very cool package! Is there a repo (if not this one) that potential users could start making documentation? (so that you don't have to do all of the heavy lifting)
Are there any documentation style choices that you would prefer?
Pancake works fine when used with a bundler, but svelte/register doesn't work when trying to run directly with node. This is because ES Modules need to be imported (as opposed to require()
) and because imports are asyncronous, so the .svelte
extension isn't registered in time.
Hey Rich,
Love this library. I'm trying to get SSR working with the following from the svelte docs:
index.js
require('svelte/register');
const App = require('./App.svelte').default;
const { head, html, css } = App.render();
console.log("TCL: head, html, css", head, html, css)
and App.svelte contains your Life Expectancy chart from https://pancake-charts.surge.sh/
import Pancake from '@sveltejs/pancake';
import { countries, years } from './data.js';
However, when I run node index.js
, I get:
Error: Cannot find module '@sveltejs/pancake'
I'm on Node v13.8.0
Am I missing a preprocessing step? The example makes it look like I can just require the .svelte file as i do in index.js above.
How do I render a chart on the server-side via node?
I just wanted to say thank you for your work, I love anything relating to SVG, and this looks like a really good use case for svelte, too. Looks awesome, keep it up!
Visit https://pancake-charts.surge.sh/ using Tor Browser, disable JS by setting Security Level to safest:
The Atmospheric and Life expectancy examples don't work (axes are there, but no lines). The Population pyramid and Treemap do work.
It seems to me that working in this setting (Tor Browser 'Safest') is a reasonable benchmark for this type of library. For reference, all the JS-less charts here https://ffoodd.github.io/chaarts/index.html work in this setting.
Here's a screenshot from the example site. The screenshot doesn't show my cursor, but I had it over the letter A in "Atmospheric". I'm not sure how the tooltip is being positioned, but it's always in a position I don't understand and seems like a bug. In this example the tooltip is aligned with neither the x nor y value of my cursor. I'd expect it to be aligned on the x-axis
I'm using Chrome 83 on Ubuntu
First of all, great package, I love it! :)
I am using this package to render a chart in a table, and it seems to be having performance issues starting with 0.0.16.
I have created a REPL so that you can test it out. Clicking on refresh should give you some number, which is a rough and inaccurate estimate of the time it took.
Now, run the same thing, but using 0.0.16
. You can see it's about 2-3 times slower in the best cases.
When observing performance in the profiler, it seems to be related to style and layout recalculation.
0.0.15:
0.0.16:
Also, I noticed that some purple appeared during mount (which is what is causing major issues in my website):
0.0.15:
0.0.16
This looks pretty much like layout thrashing caused by bind:clientWidth
and bind:clientHeight
, but I could be wrong here.
I'm guessing this is a Svelte issue, but I'm wondering if we could do a quick fix in Pancake to bring back the original performance here
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.