The sprint was already in QA phase and not long before coming to an end. Out of the blue, our lead sent a message that the CEO had just requested us to do a feature now and we would be focusing on building it instead. Not only this is a dang shock to everyone, but also, I was going to be the one building the UI for this.
One hour later, we gathered in the conference room for the pivot. It turns out that the UI for this is slightly complicated and just different enough that highchart doesn't support it.
It was a simple plotting of (x,y) data points. However, the (x,y) doesn't linearly scale with the data that we get from backend, so we first needed a transformation. Then each data point will have tooltip on click and on hover. So far so simple. The visualization will be a big square composed 25 little squares that are colored based on its positions. Some small texts also needed for each corner square. Finally we needed customized labels for the x and y axis.
All fo these shouldn't sound too crazy. So I started coding this out throughout the week. Since we were crunched on time, I tried to move as fast as possible. Small squares inside a big square, checked. Next, the algorithm that plot the data point in a possibly confusing manner, done. Adding a small div for the tooltip at top of each data, finished. Finally the axis labels came in from the designer, just slapped them on and positioned perfectly.
By the end of the week, I have the basic prototype out. With some time to sip my tea, I kicked back and watched some Youtube on well-earned company time. All hell broke loose when the CEO played with it.
He gave positive feedback overall, but he wanted two small "requests" for this. One is that he wanted the data point to be highlighted and tooltip shown, depending on interaction with a different component. This interactivity isn't too crazy, but it throws off some of the state management inside of the component. Especially since the tooltip showing is already responsive to onHover and onClick, now that we have a onHightlightClick and onHightlightHover to sort out too.
Still, it wasn't too bad. What is hard is when he said he wanted the tooltip to be draggable and be placed anywhere in the available space. Also, a line should extend from the original to the new position so that it would be clear who the tooltip belongs to.
Thankfully, there are a lot of libraries out there that take care of element drag function. The drawing a simple line from the origin is, however, a real killer. Because not only you need to track the distance travelled, but also the degree departed from origin. A normal html element positioning and changing width is possible, but very difficult to do.
I thought about it for a while and went over to talk to my lead. I said that the interactivity with another existing component is doable. Starting out with a concession is always a good sign for the listener. However, the drag and line extension is a lot to ask for given the time frame. Instinctively he wanted to squeeze more out of me. On the other hand, he knows that the line is not a simple task to do as well. After much consideration, we agreed that the line is really asking too much. So he went to talk to the CEO.
The CEO did not budge much, he wanted it to be draggable still. This was a giant relief since I could just jam in a library; not having to do the line is more than good enough for me. With these new features added and more bugs squashed than expected, We pushed this sprint out along with other features that started collecting dust.
I turned out having to do the line and the draggable tooltip in svg elements, a part of web api that I had previously zero exposure to. Took me an extra week and half to figure out the ins and outs for the svg tooltip. Luckily that time spent is for the next sprint, so I could do this in full composure.
Top comments (0)