@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>

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

11 months ago

10 months ago

10 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago