Mastering Quadrant Diagrams in Angular: A Flexible DevUI Component Guide

Quadrant diagrams are commonly used for priority planning and analyzing data deviation, yet major Angular UI libraries lack such a component. DevUI fills this gap with a highly configurable quadrant diagram component designed for DevCloud business needs.

Key Features

Data control: Drag‑linked labels allow easy movement and real‑time data updates.

Detail display: Hovering a label shows its coordinates and customizable detail information.

Non‑intrusive: The component returns data without modifying the original label objects, letting users decide what to display.

Three Display Modes

Minimize: Shows an overview of label distribution for management and coordination.

Intermediate: Focuses on the exact position of a label for quick dragging.

Maximize: Adds a progress bar under each label to visualize task progress.

The component also offers a fullscreen mode that expands the quadrant area to the entire screen, ideal for presentations.

Style Customization

By default, the component uses a "pastel" color scheme and a "task‑priority" layout, ready out‑of‑the‑box. Users can fully customize quadrant colors, titles, axis information, and label styles through provided templates (smallLabelTemplate, normalLabelTemplate, largeLabelTemplate).

Basic Usage

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

The component works with a simple labelData array. Each item follows the ILabelDataConfigs interface:

export interface ILabelDataConfigs {
  x: number; // X‑axis coordinate
  y: number; // Y‑axis coordinate
  title: string; // Label name
  content?: string; // Hover tooltip
  progress?: number; // 0‑100 progress value
  [propName: string]: any; // Additional fields
}

Coordinates are based on the label’s center point. Long titles are truncated with an ellipsis. The content field provides hover details (template support planned for a future version). The progress field renders a progress bar under the label.

Quadrant Configuration

Two main configuration objects control size and appearance.

export interface IViewConfigs {
  height: number; // Diagram height in px
  width: number;  // Diagram width in px
}

Quadrant titles, colors, and positions are set via an array of four IQuadrantConfigs objects (one per quadrant):

export interface IQuadrantConfigs {
  backgroundColor?: any;
  color?: any;
  title?: string;
  top?: number;  // Distance from top edge
  left?: number; // Distance from left edge
}

Axis Settings

The axis system mirrors mathematical conventions, allowing customization of origin, ranges, labels, and spacing.

export interface IAxisConfigs {
  tickWidth?: number;
  spaceBetweenLabelsAxis?: number;
  xAxisLabel?: string; // Default: 'Urgency'
  yAxisLabel?: string; // Default: 'Importance'
  axisMargin?: number;
  xWeight?: number;
  yWeight?: number;
  xAxisRange?: IRangeConfigs;
  yAxisRange?: IRangeConfigs;
  originPosition?: { left: number; bottom: number; };
}

Range definitions use the IRangeConfigs interface:

export interface IRangeConfigs {
  min: number;
  max: number;
  step: number;
}

Drag‑and‑Drop Integration

By setting the dropScope property, the quadrant diagram can interact with other draggable areas. Matching dropScope values enable label transfer or deletion.

<section>
  <div class="row">
    <div class="col-sm-3">
      <div class="card" dDroppable [dropScope]="'devui-quadrant-diagram'" (dropEvent)="onDrop($event, list)">
        <div class="card-header">Draggable Items</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>

Conclusion

The DevUI quadrant diagram component addresses a missing feature in mainstream Angular UI libraries, offering extensive configurability, visual flexibility, and drag‑and‑drop capabilities. Users are encouraged to share feedback and suggestions through the official DevUI community channels.