Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Beyond Unicode, it should be possible to define a Web Component that generates SVG on-the-fly from a datasource.

Imagine:

    <sparkline src="an image or csv"\>
One cool thing about SVG is it can inherit styles from your application, so you can produce e.g. dark-mode aware graphics rather easily, also one of the perks of this Unicode approach.


People have done something like this. No standard web component so far unfortunately. https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines...


This would be 5 minutes work. A whole 10 if we want to respond to attribute changes in a cleanish way: https://jsbin.com/rumakulido/1/edit?html,css,js,output


Although of course, we don't even need a custom element here, this already has a pure-CSS solution: https://jsbin.com/xuwicoquwo/edit?html,css,js,output


Nice. A real SVG sparkline would use polyline or path, though. Not much point in using Unicode glyphs.


Eh, you'd probably use <rect> rather than a single <path>, because then you can trivially slice your sparkline and tag every tick with metadata. So for simple sparklines you don't really need a custom element. Page elements already follow a box model, just CSS them boxes =)

But for an annotated data set that renders as a sparkline, a custom element with an SVG shadow DOM probably makes sense. Definitely more work than the "this'll do for most folks" solution though =D




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: