Today I created a proof of concept Leitner bar chart with Vue.js. It was a great exercise for learning Vue, and it made me realize just how useful this view / model approach can be. The underlying data with the number of cards in each box can be used as the model to represent the chart. The way Vue works, by changing the model, the bar chart updates automatically!

Try it in this codepen : add a column, remove a column, randomize the values. The bar chart immediately adapts to the new data. Pretty neat. Here is the full page as a gist if you'd like to experiment with it.

For as long as this bar graph existed on Koohii, it was implemented in SVG with the Raphaël library. SVG is actually pretty awesome and with an abstraction library like Raphaël to cover the browser quirks, it actually worked all the way down to Internet Explorer 6. Unfortunately SVG is a bit more tricky to make responsive. You can scale down the SVG container, but it doesn't look quite right.

Of course we don't actually need to change the bar chart after it has been loaded. What we could do... is to draw two charts: one for desktop, and a smaller one for mobile. Better yet, we can also include the "Review New Cards" and "Review Due Cards" buttons as part of the template. That way we can automatically count the total of cards and put it inside the button label. Easy to do in Vue, and less templating headache in php !

What I think I'll be doing is create two views of the same data, and use a media rule so that either one is shown depending on the size of the screen. The other solution is to update a single view, for example showing more or less bars but I feel like doing two views is just easier to maintain and allows to present the data in a more customized way. Performance wise it barely makes any difference.

There are of course already made, and quite powerful data chart solutions with Vue. The point here was to practice Vue and also to find a solution for the existing bar chart on Koohii. It's quite simple too, so there is no use in including a big library.

Hope you enjoyed this post. I am sad to see the isometric bars go though! I have to prioritize, so no fancy isometric bars or animations for now. That said, if you'd like to experiment with it, I'd love to get some ideas. If you can make the bar chart nicer, or if you have an idea to present the data on small screens ( < 480px ) I'd love to see what you come up with!