Kid Ant Financial · Data Experience Technology team
This article describes how to draw a business diagram from scratch and some thoughts on commonality. The code is also given at the end.
Results demonstrate
Let’s take a look at the final effect of the component
To draw, of course, is to look first can be directly used to use. What I need to draw is a Gantt-like chart. The main purpose is to manage the task time based on the time baseline, and to be able to compare with the past time. It’s a little different from the traditional gantt chart definition. It looks like a Gantt chart.
AntV, Echarts, and D3. Neither AntV nor Echarts have a direct Gantt chart. There are some Gantt charts on D3, but they are quite different from what I wanted. Based on their revision costs should be higher than their own painting costs. So which technique to draw? Canvas, SVG and div. My business scene doesn’t draw many points, and the Canvas is pretty hard to handle for events. SVG after all has DOM elements, some hover effects I can directly borrow antD to do. SVG was chosen. (Actually, I haven’t drawn pictures before, so I have to learn everything.)
Feature list
diagramming
Scroll up and down
The wanderer controls left-right scrolling and scaling
The hover node displays the details
The overall design
Component structure
The components are designed as shown in the figure above. Align the chart with the Y-axis area and scroll the chart up and down. Since scrolling left and right is not easy to use on Windows, the horizontal scrolling is not done, but the roamer is set to scroll and zoom.
The data flow
The data flow of the component is simple, with the user passing in the initial configuration as well as real data. Most of the components are purely renderers, only the wanderer will change the chart position and scale. The chart and X-axis will then display the corresponding areas.
Structure and data flow design, coding development is actually very simple, not in detail, their own look at github code. Then there is the polishing of some details.
Details of the grinding
The advantage of writing from scratch is that small details can be polished comfortably
Name slide suction left
The node name is displayed left while sliding.
X-axis can’t be hidden
Beyond a certain proportion, press odd or even to hide part of the X axis display. In fact, you can choose to hide, you can also rotate a certain Angle, do their own, arbitrary ~
Wanderer anti-shake
Antv and EcHART rovers are jitter, and the draggable area is only inside the rovers. Although Echarts has been optimized for animation, it’s still not comfortable. I’ll cut off an ANTV.
I made the wanderer percentage, so it slides smoothly, and as it slides, events are added to the document, and the draggable area becomes the entire page.
The coding is done, the details are almost polished. The usability of the product can already be crossed. Also get SVG drawing skills, but, precipitation under what…. Will someone else need to draw the exact same graph? It doesn’t feel very likely. Think carefully, what oneself do is too poor reuse. Then the question comes, what is the difference between poor reusability and doing nothing..
I appreciate a sentence in “Hackers and Painters”, “Programming is like painting, you just stop painting when it is never finished.”
reusability
In engineering, perhaps reusability has always been neglected. But thinking about reusability is not only a test of the quality of your design and code, but also a way to improve efficiency. It also helps you develop intuition about problems, and thinking about reusability is really thinking about the commonality of problems. This one by one commonality is a point, a point more, your knowledge structure can be connected in series, forming a network.
Define the scenario
How do you improve reusability? First, clearly define the business usage scenario: this diagram is to manage the task time on a time baseline and to be able to compare it with past time. At least make it possible for others to reuse it for the same needs, but the likelihood of reuse is too small, no.
Secondary development
How about I lower the threshold for secondary development? If someone else just wants to change the rendering of the chart a little bit, should I support custom rendering? Think about it. Because the graphics are changed, it is no different from redrawing a map, after all, the technical difficulty is also quite high. To add this bit of flexibility, you add too much complexity to the component, and you can’t do a good job of deciding where to open the drawing. After all, flexibility is proportional to complexity. The price of getting some flexibility is a big trade-off. Secondary development is better done by antV.
Abstract universal capability
So what? Let’s see if we can abstract out some reusable parts that have some complexity. Looking back at the whole design, the more usable component is the Wanderer component. That’s where the red dotted box is in the picture below:
There is also a good case for sharing, after all it is true that drag and drop is not easy on Windows, roaming is a normal capability for charts, and neither Echarts nor ANTV provides roaming separately.
Think clearly, it is not difficult to do. Take the time to clean up the business logic of your wanderer. All dependencies are injected as parameters. Then define the interface to the outside world and figure out how to lower the barriers for users. This process can actually improve the quality of your code. You’ll complain why you didn’t decouple them when you first wrote them. Maybe it’s better not to abstract after you’ve done it, but to be able to realize that this is a common capability at the design level and decouple it at the design level.
I also selected a component for the specific wanderer. How to use it can refer to the demo I wrote on Github. I have drawn several decorators and one component, and I feel I can’t draw any more. If you have a good idea to put them together, please let me know.
conclusion
This article mainly shares how to draw a custom diagram by hand and how to improve component reuse to accumulate common capabilities in the process. More is to share the business component should think about the Angle, suggested everyone to develop such a habit. After all, habits can be scary. You can develop some habits and wait for them to push you. Finally put the code address, the chart address and the rover address.
If you are interested in our team, you can follow our column, follow Github or send your resume to ‘tao.qit####alibaba-inc.com’.replace(‘####’, ‘@’)
