MetricGraph

A beautiful MetricGraph that can make your life easier and also looks good.

Import

import { MetricGraph } from "@schukai/monster/source/components/data/metric-graph.mjs";

Source

View source code

Package

@schukai/monster

Since

4.11.0

Introduction

The monster-metric-graph component is a visual web element used to present dynamic data trends through various types of inline graphs. It extends the traditional metric display by offering a visual representation of values, making it easier to identify patterns, changes, and anomalies at a glance. Whether integrated into a simple dashboard or a complex analytics interface, this component enhances clarity and user engagement.

Key Features

Dynamic interaction: Automatically updates and displays live or static data points in a variety of graph styles, supporting real-time insight and user responsiveness.
Customizable appearance: Choose from different graph types such as line, area, bar, dot, or bubble, and apply custom styling using CSS part attributes to align with your application's visual identity.
Accessibility: Provides semantic structure and ARIA labels to ensure assistive technologies can interpret and announce the graph content clearly.
Visual feedback effect: Offers intuitive data visualization with automatic scaling, color theming, and responsive behavior to guide the user’s attention to meaningful trends.
Programmatic Control: Supports declarative configuration via data-monster-options and programmatic rendering through transformer methods for full integration flexibility.

Improving the user experience

The monster-metric-graph component enhances traditional data display by merging key figures with intuitive micro-visualizations. This approach improves comprehension, particularly in data-heavy environments where quick insights are essential. Users benefit from an immediate understanding of data changes without reading detailed tables or descriptions.

By offering responsive, visually guided data feedback and maintaining accessibility, this component significantly improves user interaction, usability, and overall satisfaction.

Efficiency in the development process

Integrating the monster-metric-graph into your project is straightforward. The component is built using standard HTML5, CSS, and JavaScript and requires no external libraries. Its flexible configuration and declarative options allow developers to integrate it quickly into both new and existing projects, enhancing productivity and ensuring consistent design patterns across the application.

Metric Graph Simple

This is a monster-metric-graph control configured to visualize sales performance over the last 10 weeks using a bar graph. The main value “1,280 Units” represents the current total sales, while the secondary value “1,050 Units” serves as a comparison, such as from the previous period.

The bar graph is generated from the point series 85::88::92::99::130::115::140::110::120::101, showing weekly sales data. Each bar reflects one week’s value, allowing users to quickly identify trends, spikes, or drops in performance.

The title “Sales Last 10 Weeks” appears in the header, with “Product A” as subtext, helping users understand the context of the graph at a glance.

This visualization enhances metric readability by combining numeric data with clear visual cues, ideal for dashboards and performance monitoring interfaces.

Javascript

import '@schukai/monster/source/components/data/metric-graph.mjs';

HTML

<monster-metric-graph
        data-monster-option-labels-title="Sales Last 10 Weeks"
        data-monster-option-labels-subtext="Product A"
        data-monster-option-values-main="1,280 Units"
        data-monster-option-values-secondary="1,050 Units"
        data-monster-option-values-points="85::88::92::99::130::115::140::110::120::101"
        data-monster-option-graphtype="bar">
</monster-metric-graph>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The monster-metric-graph component is built using the Shadow DOM, which encapsulates its internal structure and styling. By attaching a shadow root, the component’s inner elements are isolated from the global document context. This ensures that external styles or scripts cannot unintentionally affect its layout or behavior, maintaining consistent rendering across different environments.

Shadow DOM and Accessibility

Since the component is rendered within a shadow root, its internal structure is protected from external access. This encapsulation prevents direct manipulation or styling from outside the component, which helps maintain visual and functional integrity. Despite this isolation, the component is designed with full accessibility in mind, using proper ARIA roles and labels to expose meaningful information to assistive technologies.

Customizing Through Exported Parts

Although the Shadow DOM protects the component's internal structure, it allows for customization through exported parts. These parts expose specific internal elements that can be styled externally using the CSS part selector. This allows developers to customize the appearance without compromising encapsulation or structural integrity.

Available Part Attributes

control: Represents the root container of the entire metric graph control.
card: Styles the outer card structure that holds the header, value, and graph.
header: Targets the top section that displays the icon and title.
metric-value: Styles the primary numeric value shown in the graph.
metric-subtext: Applies styles to the subtext and optional secondary value.
metric-graph: Controls the styling of the inline SVG graph representation.

Below is an example of how to use CSS part attributes to customize different parts of the MetricGraph component.


monster-metric-graph::part(card) {
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

monster-metric-graph::part(metric-graph) {
    stroke: #3366cc;
    fill: rgba(51, 102, 204, 0.1);
}

Explanation of the Example

monster-metric-graph::part(card): Adds a white background, soft corners, and a light shadow to the graph card.
monster-metric-graph::part(metric-graph): Changes the stroke and fill of the SVG graph for a customized appearance.

Accessibility

Accessibility is a core feature of the monster-metric-graph component. It uses aria-labelledby and aria-describedby to make key information readable to screen readers. Additional descriptive text for the graph is included through visually hidden elements, ensuring all users can understand the graphical data regardless of their browsing context. The component also adheres to semantic structure and keyboard-friendly design.

HTML Structure

<monster-metric-graph></monster-metric-graph>

JavaScript Initialization

const element = document.createElement('monster-metric-graph');
document.body.appendChild(element);

Exported

MetricGraph

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

curve

string

undefined

The curve of the graph (step, smooth, bubble, bar, area, dot, lollipop, line)

values

object

Value definitions

values.value

number

undefined

The value of the metric

values.change

number

The change of the metric

values.secondary

number

The secondary value of the metric

values.points

array

2, 2, 2, 30, 5, 4, 4, 3, 3, 2, 2, 1, 1, 1, 1

The points of the metric

labels

object

Label definitions

labels.title

string

Title of the metric

labels.subtext

string

Subtext of the metric

classes

object

CSS classes

classes.dot

string

monster-theme-primary-1

CSS class for the dot

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Data.Metric

Other methods

[updaterTransformerMethodsSymbol]()

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.