Teach you how to use the quadrant graph component

Posted May 27, 20207 min read

DevUI is a team with both a design perspective and an engineering perspective, serving the Huawei Cloud DevCloud platform and several internal and back-end systems within Huawei, serving designers And front-end engineers.
Official website: devui.design
Ng component library: ng-devui (Welcome Star)
Official communication group:add DevUI assistant(micro signal:devui \ _official) to the group


Quadrant charts are often used to plan the priority of events, to analyze the degree of deviation of processed data from expectations, and so on. At present, there is no component similar to the quadrant graph in the mainstream Angular component library, and the DevUI component library is based on the DevCloud business requirements, design and develop a flexible configuration, fully functional quadrant graph component.

You can view the demo and use of this component here: https://devui.design/components/quadrant-diagram/demo


Data control at will:

  1. Through the linkage with drag and drop, the positioning of the coordinates to follow the line, you can easy to move the label, which is convenient for users to change data and control the development of matters;
  2. The component provides detail display function, hover to the corresponding label to get the coordinate information of the label and the detailed information of the label. Of course, the detailed data of the hovering display can be customized by the user to fully meet the various display scenarios;
  3. The component itself does not invade and modify the data of the label. By returning the information required by the user, the user himself decides what content and location should be displayed, so that the user can control the data.

Three modes, switch at will:

The component has a built-in function area, which provides the function of zooming in and out of the label and full screen of the quadrant image.

  1. Minimized:Can intuitively view the distribution of tags, which is convenient for the management and coordination of doing things;
  2. Intermediate state:Conveniently view the location of specific tags to achieve fast drag and move functions;
  3. Maximization:Add a progress bar display under the label to clearly and intuitively understand the progress of each label item.

In addition, the style templates of the three modes are exposed to users, and you can freely customize the style you want to display.

In addition to the three modes, the component also provides full screen function, the quadrant map area will cover the entire screen, very suitable for conference presentations and work reports and other scenarios.

Exclusive style customization:

The component itself provides the "Girly Macaron" color matching by default, which is refreshing and lively. By default, the "transaction priority arrangement" scene is used. Users can use it out of the box without setting up extra content. Of course, if the default configuration provided by the component itself is not satisfactory, the component also provides a style customization method with a high degree of freedom, which can completely modify the color and title of the quadrant area, the coordinate system information, the display style of the label, etc. The configuration is simple, free and flexible. The following picture shows the customized quadrant diagram display:

Configuration introduction

Basic usage

Since the quadrant graph itself has the default basic configuration, if you want to use it out of the box without custom processing, you only need to pass in the labelData data and dynamically process the labelData through the dropEvent event to make the quadrant graph on the The content display changes in real time.

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

Here we introduce the configuration items of each data in labelData in detail:

export interface ILabelDataConfigs {
  x:number; //X axis coordinate value
  y:number; //Y axis coordinate value
  title:string; //The name of the label
  content ?:string; //Prompt content when the mouse is hovering over the label
  progress ?:number; //The progress of the item corresponding to the label
  [propName:string]:any; //Other data

Among them, it is worth noting that the coordinate value of the tag is set according to the position of its center point, title is the title of the tag, when title is too long, it will be displayed in the label container in a way that the ellipsis is displayed in the excess Displayed in the content; content is the detailed information below when hovering, and will be passed into the template in the next version; progress is the progress display under the label, and the incoming number is 0-100, indicating the current event Progress; In addition, users can also pass in other parameters to facilitate custom processing.

In addition, it also provides smallLabelTemplate, normalLabelTemplate, and largeLabelTemplate parameters, so that users can customize the different label styles of the three modes.

Quadrant graph configuration:

Want to configure a custom quadrant graph? Only two simple steps are required:

  1. Set the area occupied by the quadrant graph through the view property. The view value can be changed dynamically, and the quadrant graph will also change accordingly. It is worth noting that currently only number is supported and the unit is px. When you need to adapt to the container, you need to calculate the actual width and height of the container in real time and pass in **view** Medium. The specific configuration items are as follows:

    export interface IViewConfigs {
    height:number; //Height of quadrant image
    width:number; //width of quadrant image

  2. Set the title, color, etc. of the four quadrants through the quadrantConfigs parameter, which is passed into an array of length 4, Array \ [0 ], Array \ [1 ], Array \ [2 ], Array \ [3 ]represents the first, second, third, and fourth quadrants, respectively. In addition, if you only want to use the coordinate function, you can also turn off the quadrant display through the showQuadrants parameter. The configurable content of each quadrant is as follows:

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

Coordinate system settings:

The coordinate system setting in the component is matched according to the setting and use of the coordinate system mathematically, which is more suitable for the user's usage habits. For example, set the origin of the coordinate system, the maximum and minimum values ​​of the coordinate axis, the title of the coordinate axis, etc .; for more settings, please refer to the configuration below:

export interface IAxisConfigs {
  tickWidth ?:number; //The width(height) of the tick, the default is 10
  spaceBetweenLabelsAxis ?:number; //The distance between the scale value and the coordinate axis, the default is 20
  xAxisLabel ?:string; //X axis name, the default value is 'urgency'
  yAxisLabel ?:string; //Y axis name, the default value is 'importance'
  axisMargin ?:number; //blank area left on the right
  xWeight ?:number; //X axis weight, the default value is 1
  yWeight ?:number; //Y axis weight, the default value is 1
  xAxisRange ?:IRangeConfigs; //The coordinate value range and spacing settings of the X axis, the default value is {min:0, max:100, step:10}
  yAxisRange ?:IRangeConfigs; //Y-axis coordinate value range and spacing settings, the default value is {min:0, max:100, step:10}
  originPosition ?:{left:number; bottom:number;}; //Set the origin position, the default value is {left:30, bottom:30}

Among them, the configuration of coordinate value range and spacing is:

export interface IRangeConfigs {
  min:number; //The starting value of the coordinate axis
  max:number; //End value of coordinate axis
  step:number; //The interval of the scale value of the coordinate axis

Drag and drop configuration:

The quadrant graph component supports linkage with the drag and drop component. By setting the dropScope property, the draggable position of the label can be matched; as long as the value of the dropscope of the quadrant graph and other draggable areas are consistent, the two regions can be realized. Linkage is generally used to "delete" the label on the quadrant.(For more information about dragging components, please check: https://devui.design/components/dragdrop/demo )

  <div class = "row">
    <div class = "col-sm-3">
        class = "card" dDroppable
        [dropScope]= "'devui-quadrant-diagram'"
       (dropEvent) = "onDrop($event, list)"
        <div class = "card-header"> Dragable items </div>
  [labelData]= "labelData"
  [quadrantConfigs]= "quadrantConfigs"
  [axisConfigs]= "axisConfigs"
  [view]= "view"
  [dropScope]= "'devui-quadrant-diagram'"
 (dropEvent) = "dropEvent($event)"
> </d-quadrant-diagram>

In the above code, a div where draggable elements can be placed is the same as**dropScope**of d-quadrant-diagram, then the two areas can realize the interaction of tags.

If you are confused about the above configuration, you can check the configuration of the custom quadrant in https://devui.design/components/quadrant-diagram/demo Figure `demo, or discuss in the official communication group.

to sum up

The derivative of the quadrant diagram component is a supplement to the missing contents of the mainstream component library of the DevUI component library. If you find similar products or components, you can also share and communicate. At present, the component is still in the evolution state. If you have questions or optimization suggestions, please issue an issue on github, or you can join the official communication group above to discuss.

join us

We are DevUI team , welcome to join us here to create an elegant and efficient human-machine design/development system. Recruitment email: muyang2@huawei.com .

Text/DevUI Lynn

Previous article recommendation

"Dark Mode and Theme Development of Web Interface"

"Teach you how to build a grayscale release environment"

"Teach you how to develop Pagination pagination components using the three major frameworks of Vue/React/Angular"