@kong-ui-public/analytics-chart v4.0.3
@kong-ui-public/analytics-chart
Dynamic chart component for kong analytics.
Features
- Display kong analytics in a graph.
Requirements
vue
must be initialized in the host application@kong-ui-public/i18n
must be available as adependency
in the host application.
Usage
Install
Install the component in your host application
yarn add @kong-ui-public/analytics-chart
Props - AnalyticsChart
chartData
- type: AnalyticsExploreResult
- required:
true
chartOptions
- type: AnalyticsChartOptions
- required:
true
stacked
option applies to timeseries charts as well as vertical/horizontal bar charts.fill
only applies to time series line chartchartTypes
defined herechartDatasetColors
are optional- If no colors are provided, the default color palette will be used
- If custom colors are needed you may provide a custom color palette in the form of:
- Array of hex color codes which will be cycled through for each dataset:
const colors = [ '#a86cd5', '#6a86d2', '#00bbf9', '#00c4b0', '#ffdf15', ]
- A mapping of dataset labels to hex color code:
const statusCodeColors = { '200': '#a86cd5', '300': '#6a86d2', '400': '#00bbf9', }
- Array of hex color codes which will be cycled through for each dataset:
chartTitle
- type:
string
- required:
true
emptyStateTitle
- type:
string
- required:
false
emptyStateDescription
- type:
string
- required:
false
tooltipTitle
- type:
string
- required:
true
legendPosition
- type: 'ChartLegendPosition'
- required:
false
- default:
right
height
- type:
string
- required:
false
- default:
'500px'
- set the chart height using css height values (px, %, etc...)
width
- type:
string
- required:
false
- default:
'100%'
- set the chart width using css width values (px, %, etc...)
showLegendValues
- type:
boolean
- required:
false
- default:
true
- Show the sum of each dataset in the legend
Usage Example
<template>
<AnalyticsChart
:chart-data="chartData"
:chart-options="chartOptions"
tooltip-title="Total Requests"
chart-title="Requests by Service"
:legend-position="legendPosition"
/>
</template>
<script>
import { AnalyticsChart } from '@kong-ui-public/analytics-chart'
import type { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
import type { AnalyticsChartOptions } from '@kong-ui-public/analytics-chart'
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {
AnalyticsChart,
},
setup() {
const chartData = ref<AnalyticsExploreResult>({
records: [
{
version: '1.0',
timestamp: '2023-04-24T10:27:22.798Z',
event: {
Service: 'Service A',
TotalRequests: 849,
},
},
{
version: '1.0',
timestamp: '2023-04-24T10:27:22.798Z',
event: {
Service: 'Service B',
TotalRequests: 5434,
},
},
// more data...
],
meta: {
start: 1682332042798,
end: 1682353642798,
queryId: '12345',
dimensions: {
Service: ['Service A', 'Service B'],
},
metricNames: ['TotalRequests'],
metricUnits: {
TotalRequests: 'requests',
},
granularity: 3600000,
truncated: false,
limit: 1000,
},
})
const chartOptions = ref<AnalyticsChartOptions>({
type: 'TimeSeriesLine',
stacked: true,
fill: false
})
const legendPosition = ref(ChartLegendPosition.Right)
return {
chartData,
chartOptions,
legendPosition
}
},
})
</script>
Props - SimpleChart
chartData
- type: AnalyticsExploreResult
- required:
true
chartOptions
- type: SimpleChartOptions
- required:
true
emptyStateTitle
- type:
string
- required:
false
metricDisplay
Optional value which can be any one of the following:
Hidden
: will only show the outer doughnut chartSingleMetric
: displays only the large metric valueFull
: displays both the large metric and subtext
reverseDataset
Optional. Determines the order of the datasets. In the case of a Gauge Chart, it reverses the display order of the two color fills.
- type:
boolean
- required:
false
numerator
Optional. Array index which specifies the dataset value to be shown in the center of the Gauge.
- type:
number
- required:
false
SimpleChart
Contains the same chart-data
<template>
<SimpleChart
:chart-data="exploreResult"
:chart-options="simpleChartOptions"
/>
</template>
<script>
import { SimpleChart } from '@kong-ui-public/analytics-chart'
import type { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
import type { SimpleChartOptions } from '@kong-ui-public/analytics-chart'
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {
SimpleChart,
},
setup() {
const chartData = ref<AnalyticsExploreResult>({
records: [
{
version: '1.0',
timestamp: '2023-04-24T10:27:22.798Z',
event: {
Service: 'Service A',
TotalRequests: 849,
},
},
{
version: '1.0',
timestamp: '2023-04-24T10:27:22.798Z',
event: {
Service: 'Service B',
TotalRequests: 5434,
},
},
],
meta: {
start: 1682332042798,
end: 1682353642798,
queryId: '12345',
dimensions: {
Service: ['Service A', 'Service B'],
},
metricNames: ['TotalRequests'],
metricUnits: {
TotalRequests: 'requests',
},
},
})
const chartOptions = ref<SimpleChartOptions>({
type: ChartTypes.GAUGE,
metricDisplay: ChartMetricDisplay.Full
})
return {
chartData,
chartOptions,
}
},
})
</script>
7 days ago
7 days ago
7 days ago
8 days ago
15 days ago
14 days ago
15 days ago
14 days ago
15 days ago
15 days ago
14 days ago
15 days ago
15 days ago
15 days ago
16 days ago
15 days ago
16 days ago
16 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
17 days ago
23 days ago
22 days ago
24 days ago
24 days ago
25 days ago
24 days ago
27 days ago
27 days ago
27 days ago
29 days ago
29 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
9 months ago
7 months ago
10 months ago
6 months ago
8 months ago
7 months ago
8 months ago
10 months ago
9 months ago
5 months ago
5 months ago
5 months ago
8 months ago
9 months ago
8 months ago
10 months ago
6 months ago
10 months ago
5 months ago
9 months ago
8 months ago
10 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
5 months ago
5 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
5 months ago
8 months ago
7 months ago
7 months ago
9 months ago
6 months ago
8 months ago
8 months ago
5 months ago
8 months ago
6 months ago
10 months ago
10 months ago
8 months ago
7 months ago
6 months ago
5 months ago
5 months ago
9 months ago
5 months ago
9 months ago
9 months ago
10 months ago
9 months ago
6 months ago
7 months ago
10 months ago
10 months ago
5 months ago
5 months ago
10 months ago
5 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
5 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
10 months ago
9 months ago
6 months ago
10 months ago
8 months ago
10 months ago
5 months ago
8 months ago
5 months ago
6 months ago
8 months ago
5 months ago
5 months ago
5 months ago
8 months ago
10 months ago
5 months ago
6 months ago
5 months ago
7 months ago
10 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
5 months ago
5 months ago
8 months ago
10 months ago
5 months ago
5 months ago
9 months ago
5 months ago
5 months ago
10 months ago
8 months ago
8 months ago
10 months ago
6 months ago
6 months ago
8 months ago
10 months ago
10 months ago
6 months ago
5 months ago
5 months ago
9 months ago
5 months ago
7 months ago
10 months ago
6 months ago
10 months ago
6 months ago
6 months ago
10 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
10 months ago
8 months ago
7 months ago
8 months ago
6 months ago
8 months ago
9 months ago
10 months ago
10 months ago
6 months ago
8 months ago
5 months ago
6 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
5 months ago
6 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
5 months ago
7 months ago
5 months ago
5 months ago
9 months ago
5 months ago
5 months ago
6 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
5 months ago
9 months ago
5 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
7 months ago
10 months ago
9 months ago
6 months ago
6 months ago
6 months ago
9 months ago
8 months ago
6 months ago
6 months ago
7 months ago
8 months ago
10 months ago
5 months ago
8 months ago
8 months ago
9 months ago
7 months ago
5 months ago
6 months ago
5 months ago
9 months ago
10 months ago
10 months ago
6 months ago
8 months ago
8 months ago
10 months ago
8 months ago
8 months ago
9 months ago
10 months ago
8 months ago
8 months ago
10 months ago
5 months ago
5 months ago
8 months ago
5 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
10 months ago
8 months ago
7 months ago
7 months ago
9 months ago
10 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
5 months ago
9 months ago
10 months ago
9 months ago
6 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
5 months ago
6 months ago
7 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
10 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 months ago
8 months ago
9 months ago
6 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
6 months ago
9 months ago
9 months ago
10 months ago
5 months ago
10 months ago
7 months ago
8 months ago
10 months ago
6 months ago
5 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
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago