Securio Playground

A fake security company delivering all your security needs!

Live Demo

What's the goal for this?

• ✔️ A playground to visualize sets of data
• ✔️ Experiment with a popular data visualization library (VictoryCharts) with a standard set of charts and enough customization to make a dent.
• ✔️ Another excuse to keep playing with Tailwind, twin.macro (CSS-in-JS wrapper for Tailwind), and Vite -- three of my favorite web technologies that make client-side development a total delight

What's next?

• Additional charts to represent aggregates of incident categories
• Use of a popular data-grid library (AG Grid) to represent the same data in table format, tied to filters as well
• Filtering of incidents (by category, longer date ranges) that update the chart and table, respectively
• Mock more data
• Move mock data to a Netlify function as an API to tie loading states to the UI and handle filtered requests

How long did this take you to make?

So far, about 7-8 hours of focused development time, including scaffolding and lots and lots of design tweaks to get things just right.

Stack

• Vite
• React-TS
• twin-macro (Tailwind CSS) + Emotion
• VictoryCharts (based on D3.js)