In addition to the three modes, the component offers full screen functionality **, with quadrant areas that cover the entire screen, ** ideal for meetings, presentations, work reports, etc. **.

Style exclusive customization:

By default, the component itself provides a “girl macaron” color scheme, which is refreshing and lively. By default, the scenario of “transaction priority arrangement” is used, and users can use it without setting extra content. Of course, if you are not satisfied with the default configuration provided by the component itself, the component also provides a high degree of freedom to customize the style, you can completely change the color and title of the quadrant area, coordinate system information, label display style, etc., the configuration is simple, free and flexible. The following figure shows the customized quadrant diagram:

Configuration is introduced

Basic usage

Since the quadrant diagram itself has a default base configuration, if you want to use it out of the box without customization, you can simply pass in labelData data and process labelData dynamically through dropEvent events, so that the content on the quadrant diagram shows real-time changes.

<d-quadrant-diagram   
  [labelData]="labelData"   
  (dropEvent)="dropEvent($event)"
></d-quadrant-diagram>
Copy the code

Here is a detailed introduction of each data configuration item in ‘labelData’ :

export interface ILabelDataConfigs { x: number; // y: number; // Title: string; // Name of the tag content? : string; // What is the progress? : number; [propName: string]: any; // Other data}Copy the code

Among them, it is worth noting that the coordinate value of the label is set according to the position of its center point, and the title is the title of the label. If the title is too long, it will be displayed in the label container in the way of the ellipsis beyond the part. Content is the details below the hover and will support passing a Template in the next version; Progress is the progress display at the bottom of the label. The incoming numbers are 0-100, indicating the progress of the current item. In addition, users can also pass in additional parameters for easy customization.

In addition, the ‘smallLabelTemplate’, ‘normalLabelTemplate’, and ‘largeLabelTemplate’ parameters are provided, allowing users to customize different label styles for the three modes.

Quadrant diagram configuration:

Want to configure a custom quadrant diagram? It takes two simple steps:

1. Set the area occupied by the quadrant diagram through the ‘view’ property. The value of ‘view’ can change dynamically, and the quadrant diagram will also change accordingly. ** If you need to adapt to the container, you need to calculate the actual width and height of the container in real time, and pass it in ** *view** ** ** ** ** ** *. The configuration items are as follows:

export interface IViewConfigs { height: number; // Quadrant height width: number; // Quadrant width}Copy the code

QuadrantConfigs is used to set the quadrants’ title, color, etc. This parameter is passed in an Array of length 4. Array[0], Array[1], Array[2], Array[3] respectively represent the first, second, third, and fourth quadrants. In addition, you can turn off the display of quadrants with the showQuadrants parameter if you only want to use the coordinates function. Each quadrant can be configured as follows:

export interface IQuadrantConfigs { backgroundColor? : any; // Background color? : any; // The font color title? : string; // Quadrant title top? : number; // The distance between the title and the top of the quadrant left? : number; // The distance between the title and the left of the quadrant area}Copy the code

Coordinate system setting:

The setting of coordinate system in the component is based on the corresponding matching of the setting and use of the mathematical coordinate system, which is more suitable for the user’s use habit. For example, set the origin of the coordinate system, the maximum and minimum values of the coordinate axis, the title of the coordinate axis and so on; For more Settings, see the following configuration:

export interface IAxisConfigs { tickWidth? : number; // The width (height) of the scale, default is 10 spaceBetweenLabelsAxis? : number; // The distance between the scale value and the axes, which defaults to 20 xAxisLabel? : string; // The name of the X axis. The default value is' emergency '. : string; // axisMargin? : number; // The blank area left on the right side xWeight? : number; // The default value is 1 yWeight? : number; // The Y-axis weight is 1 by default. : IRangeConfigs; {min:0, Max :100,step:10} yAxisRange? : IRangeConfigs; Default: {min:0, Max :100,step:10} originPosition? : { left: number; bottom: number; }; {left:30,bottom:30}}Copy the code

Where, the configuration of coordinate value range and spacing is:

export interface IRangeConfigs { min: number; // The starting value of the axes Max: number; Step: number; // The spacing of the scale values of the axes}Copy the code

Drag and drop configuration:

The quadrant diagram component supports linkage with the drag-and-drop component. By setting the dropScope property, the tag can be matched with the drag-and-drop location. As long as the dropscope value of the quadrant is the same as that of the other drag-and-drop regions, the two regions can be linked. This is usually used to “delete” the label on the quadrant. (For more information on drag-and-drop components, see: devui.design/ Components /…)

<section> <div class="row"> <div class="col-sm-3"> <div class="card" dDroppable [dropScope]="'devui-quadrant-diagram'" "> <div class="card-header"> <div class="card-header"> </div> </div> </div> </div> </section> <d-quadrant-diagram [labelData]="labelData" [quadrantConfigs]="quadrantConfigs" [axisConfigs]="axisConfigs" [view]="view" [dropScope]="'devui-quadrant-diagram'" (dropEvent)="dropEvent($event)" ></d-quadrant-diagram>Copy the code

In the code above, a div where drag-and-drop elements can be placed is consistent with the D-Quadrant – Diagram’s **dropScope**, so the two areas can interact with the tags.

If you are confused by the above configuration, you can check out: devui.design/ Components /… To view the configuration of custom quadrant diagram demo, or discuss in the official communication group.

conclusion

The derivative of the Quadrant map component is the addition of the DevUI component library to the missing content of the mainstream component library in the industry, and people can share and communicate if they find similar products or components. The component is still in an evolving state. If you have any questions or suggestions about how to use it, please post them on Github or join the official communication group above to discuss.

Join us

We are DevUI team, welcome to come here and build elegant and efficient man-machine design/R&D system with us. Recruitment email: [email protected].

The text/DevUI Lynn

Previous article recommended

Dark Patterns and Thematic Development for Web Interfaces

How to Build a Grayscale Publishing Environment

How to Develop Pagination Components using Vue/React/Angular