@kong-ui-public/analytics-chart NPM

@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 a dependency in the host application.

Install

Install the component in your host application

yarn add @kong-ui-public/analytics-chart

AnalyticsChart

type: boolean
required: false

type: AnalyticsExploreResult
required: true

type: AnalyticsChartOptions
required: true
stacked option applies to timeseries charts as well as vertical/horizontal bar charts.
fill only applies to time series line chart
chartTypes defined here
chartDatasetColors 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',
  }
```
chartLegendSortFn
- Exposed sorting fn for datasets as they appear in the legend
- Sorts in descending order of raw value by default.
chartTooltipSortFn
- Exposed sorting fn for datasets as they appear in the tooltip
- Sorts in descending order of raw value by default.

type: string
required: true

type: string
required: false

type: string
required: false

type: string
required: true

type: 'ChartLegendPosition'
required: false
default: right

type: boolean
required: false
default: true
Show the sum of each dataset in the legend

type: boolean
required: false
default: false
Enable zooming on timeseries charts

@zoom-time-range - event emitted representing a new time range on zoom selection see AbsoluteTimeRangeV4

Usage Example AnalyticsChart

<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 { ExploreResultV4 } 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<ExploreResultV4>({
      data: [
        {
          timestamp: '2023-04-24T10:27:22.798Z',
          event: {
            Service: 'service-a-id',
            TotalRequests: 849,
          },
        },
        {
          timestamp: '2023-04-24T10:27:22.798Z',
          event: {
            Service: 'service-b-id',
            TotalRequests: 5434,
          },
        },
        // more data...
      ],
      meta: {
        start_ms: 1682332042798,
        end_ms: 1682353642798,
        granularity_ms: 3600000,
        query_id: '12345',
        display: {
          Service: {
            'service-a-id': { name: 'Service A' },
            'service-b-id': { name: 'Service B' },
        },
        metric_names: ['TotalRequests'],
        metric_units: {
          TotalRequests: 'requests',
        },
        truncated: false,
        limit: 1000,
      },
    })

    const chartOptions = ref<AnalyticsChartOptions>({
      type: 'timeseries_line',
      stacked: true,
      fill: false
    })

    const legendPosition = ref(ChartLegendPosition.Right)


    return {
      chartData,
      chartOptions,
      legendPosition
    }
  },
})
</script>

SimpleChart

type: ExploreResultV4
required: true

type: SimpleChartOptions
required: true

type: string
required: false

Optional value which can be any one of the following:

Hidden: will only show the outer doughnut chart
SingleMetric: displays only the large metric value
Full: displays both the large metric and subtext

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

Optional. Array index which specifies the dataset value to be shown in the center of the Gauge.

type: number
required: false

<template>
  <SimpleChart
    :chart-data="chartData"
    :chart-options="simpleChartOptions"
  />
</template>

<script>
import { SimpleChart } from '@kong-ui-public/analytics-chart'
import type { ExploreResultV4 } 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<ExploreResultV4>({
      data: [
        {
          timestamp: '2023-04-24T10:27:22.798Z',
          event: {
            Service: 'service-a-id',
            TotalRequests: 849,
          },
        },
        {
          timestamp: '2023-04-24T10:27:22.798Z',
          event: {
            Service: 'service-b-id',
            TotalRequests: 5434,
          },
        },
      ],
      meta: {
        start_ms: 1682332042798,
        end_ms: 1682353642798,
        granularity_ms: 21600000,
        query_id: '12345',
        display: {
          Service: {
            'service-a-id': { name: 'Service A' },
            'service-b-id': { name: 'Service B' },
        },
        metric_names: ['TotalRequests'],
        metric_units: {
          TotalRequests: 'requests',
        },
      },
    })

    const chartOptions = ref<SimpleChartOptions>({
      type: 'gauge',
      metricDisplay: ChartMetricDisplay.Full
    })

    return {
      chartData,
      chartOptions,
    }
  },
})
</script>

CsvExportButton

Chart data to be exported

type: ExploreResultV4
required: true

Text to appear in the button

type: string
required: false
default: 'Export'

Text to appear in the button

type: 'primary' | 'secondary' | 'tertiary' | 'danger'
required: false
default: 'tertiary'

Resulting csv filename

type: string
required: false
default: 'Chart Export'

<template>
  <CsvExportButton
    :data="(chartData as ExploreResultV4)"
    :filename-prefix="filenamePrefix"
  />
</template>

<script setup lang="ts">

import type { ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
import { CsvExportButton } from '@kong-ui-public/analytics-chart'

const chartData = ref<ExploreResultV4>({
  data: [
    {
      timestamp: '2023-04-24T10:27:22.798Z',
      event: {
        Service: 'service-a-id',
        TotalRequests: 849,
      },
    },
    {
      timestamp: '2023-04-24T10:27:22.798Z',
      event: {
        Service: 'service-b-id',
        TotalRequests: 5434,
      },
    },
  ],
  meta: {
    start_ms: 1682332042798,
    end_ms: 1682353642798,
    granularity_ms: 3600000,
    query_id: '12345',
    display: {
      Service: {
        'service-a-id': { name: 'Service A' },
        'service-b-id': { name: 'Service B' },
    },
    metric_names: ['TotalRequests'],
    metric_units: {
      TotalRequests: 'requests',
    },
  },
})

const fileName = ref('exportFilename')

</script>

CsvExportModal

Chart data to be exported

type: ExploreResultV4
required: true

Resulting csv filename

type: string
required: true

Desctiption text that appears in the modal

type: string
required: false
default: 'Exports a CSV of the data represented in the chart.'

@toggle-modal event is emitted when the modal is toggled (dismissed)

<template>
  <button @click.prevent="exportCsv">
    Export to CSV
  </button>

  <CsvExportModal
    v-if="exportModalVisible"
    :chart-data="chartData"
    filename="exportCsvFilename"
    @toggle-modal="setModalVisibility"
  />
</template>

<script setup lang="ts">

import type { ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
import { CsvExportModal } from '@kong-ui-public/analytics-chart'

const exportModalVisible = ref(false)

const setModalVisibility = (val: boolean) => {
  exportModalVisible.value = val
}
const exportCsv = () => {
  setModalVisibility(true)
}

const chartData = ref<ExploreResultV4>({
  data: [
    {
      timestamp: '2023-04-24T10:27:22.798Z',
      event: {
        Service: 'service-a-id',
        TotalRequests: 849,
      },
    },
    {
      timestamp: '2023-04-24T10:27:22.798Z',
      event: {
        Service: 'service-b-id',
        TotalRequests: 5434,
      },
    },
  ],
  meta: {
    start_ms: 1682332042798,
    end_ms: 1682353642798,
    granularity_ms: 3600000,
    query_id: '12345',
    display: {
      Service: {
        'service-a-id': { name: 'Service A' },
        'service-b-id': { name: 'Service B' }
      },
    },
    metric_names: ['TotalRequests'],
    metric_units: {
      TotalRequests: 'requests',
    },
  },
})

const fileName = ref('exportFilename')

</script>

7 months ago

7 months ago

7 months ago

7 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

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

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

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

8 months ago

9 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

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

8 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

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

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

12 months ago

10 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

10 months ago

11 months ago

12 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

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 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

12 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

10 months ago

11 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

11 months ago

10 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago