@kong-ui-public/metric-cards NPM

@kong-ui-public/metric-cards

A Kong UI component for display Traffic, Error Rate, and P99 Latency insights in a card-like format

Features

Displays a summary panel containing various metrics
Supports custom color themes via CSS variables

Requirements

vue must be initialized in the host application
@kong/kongponents must be available as a dependency in the host application, along with the package's style imports. See here for instructions on installing Kongponents. Specifically, the following Kongponents must be available:
- KIcon
- KSkeletonBox
- KTooltip

Variable	Description	Default
`--kong-ui-metric-card-background`	The background of the `.kong-ui-public-metric-card-container` main container	`transparent`
`--kong-ui-metric-card-title`	Metric card title font color	`#`
`--kong-ui-metric-card-value`	Metric value and description font color	`#`
`--kong-ui-metric-card-trend-negative`	Negative trend font color	`#AD000E`
`--kong-ui-metric-card-trend-positive`	Positive trend font color	`#07a88d`
`--kong-ui-metric-card-trend-neutral`	Neutral trend font color	`#52596E`
`--kong-ui-metric-card-trend-bg-negative`	Negative trend background color	`#FFE5E5`
`--kong-ui-metric-card-trend-bg-positive`	Positive trend background color	`#ECFFFB`
`--kong-ui-metric-card-trend-bg-neutral`	Neutral trend background color	`#E0E4EA`

yarn add @kong-ui-public/metric-cards

One of the three golden signals (Traffic, Error Rate, Latency) or a Generic count

type: MetricCardType
required: false

Title to be displayed in the metric card header

type: String
required: false

HTML element you want title to be rendered as.

type: String
required: false
default: h2

type: String
required: false

Change from current to previous time frame

type: String
required: false

Determines if the metricChange is bad or good

type: Number
required: true

Whether trend is up, down, or neutral (no change)

type: typeof GenericIcon
required: false

A description of the time period involved in the calculation, determined internally by the MetricsProvider

type: string
required: false

Will display a warning icon instead of metric value if true

type: Boolean
required: false

Message to be displayed if the API request fails

type: String
required: false

Included Components

The MetricCardContainer is a parent component which contains one or more instances of MetricCard.

Only MetricCardContainer is exported for use.

Exports

MetricCardDef
MetricCardDisplayValue
MetricCardContainerOptions

MetricCardSize
MetricCardType

Usage

<template>
  <MetricCardContainer
    v-bind="metricCardOptions"
  />
</template>
<script setup lang="ts">
import { MetricCardType, MetricCardSize, MetricCardContainer } from '@kong-ui-public/metric-cards'
import '@kong-ui-public/metric-cards/dist/style.css'

const metricCardOptions = {
  cards: [
    {
      cardType: MetricCardType.TRAFFIC,
      currentValue: 192895156,
      previousValue: 236609609,
      title: 'Number of Requests',
      titleTag: 'h3',
      description: 'Requests sent throgh all data plane nodes'
      increaseIsBad: false,
      cardSize: MetricCardSize.Large,
      trendRange: 'vs previous 7 days'
    },
  ],
  loading: false,
  hasTrendAccess: true,
  fallbackDisplayText: 'Not available',
}
</script>

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago