Represent Knit component in Browser with SVG.
Hi, How are you guys doing ?
TL; DR; — I just developed a component in Javascript that render a single “timeline” that draws a custom amount of dots and published at the npm.
I just want to share a single component that i made. We at the company are developing a specific dashboard that monitors a workflow but we wanted to represent phases of the business as a railroad system.
Our client uses that manages and automates the batchs workflows, but the workload automation link between a plenty of batch programs and the output are not a business related.
Almost like a cockpit of the railroads with the train information (image below) we wanted to represent each “track” as a business flow and each dot as a important phase of the business with data that it’s more relevant to the user.
We tried to find a component that could represent this kind of “chart” and use it on our system but the sad part was that we don’t actually found any component that suit all our needs.
The component that we were looking should have:
- A chart that draws with a customized number of dots.
- Represent a alert on a single dot that acts as a warning system to the user.
- Stop alerting this specific dot.
- Shows a custom text below the dots to represent each dot.
- Fires a event on the click of a dot.
We tried at the first customizing timelines that were already were made but i find a couple of issues like:
- It’s silly but all timelines actually requires a date.
- Because of the date not all the dots were painted.
- There were not click event’s at the dots.
- We couldn’t create a text below each dot.
With that in mind i began to develop my first (published) component to resolve this issues. In our research i actually found a component that will draw a SVG (thank you RaphaelLib)in the browser and the methods look like when i programmed games (like a line its a function with x1,x2,y1,y2).
After choosing my drawing library i just started to calculate in the paper how to represent the dots and the lines, with a little bit of math we got in this component.
Finally but not the least i had to choose a name and to be honest i was just tired of picking greek name for my component and i just tried a Russian this time so i picked Triglav that it’s actually a god that represent past, present and future.
The component “demo” has two knit represent each a different business flow, with different data, i just tried to show that you could represent different knit in the same page with two “different instance of the component”. As i just said before the component should draw different number of dots, alert a single dot when a click is made or a event or an API.
And if you click in the dot the component will call a callback that you could pass in the instance of the component so the component will know which function to call.
The component is a OSS project so feel free to component, find bugs and of course help me keep this project alive.
Forgot to write the github and npm link below.
