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

9 months ago

11 months ago

8 months ago

7 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

9 months ago

11 months ago

10 months ago

11 months ago

7 months ago

9 months ago

6 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

10 months ago

8 months ago

7 months ago

12 months ago

6 months ago

12 months ago

10 months ago

7 months ago

8 months ago

8 months ago

8 months ago

6 months ago

10 months ago

9 months ago

9 months ago

11 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

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

10 months ago

9 months ago

9 months ago

7 months ago

9 months ago

10 months ago

7 months ago

11 months ago

9 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

7 months ago

10 months ago

9 months ago

7 months ago

7 months ago

8 months ago

10 months ago

6 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

10 months ago

7 months ago

7 months ago

8 months ago

11 months ago

11 months ago

7 months ago

7 months ago

9 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

8 months ago

8 months ago

10 months ago

10 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

9 months ago

7 months ago

10 months ago

10 months ago

10 months ago

8 months ago

10 months ago

7 months ago

7 months ago

10 months ago

8 months ago

11 months ago

11 months ago

11 months ago

8 months ago

8 months ago

7 months ago

11 months ago

9 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

8 months ago

11 months ago

10 months ago

9 months ago

7 months ago

8 months ago

11 months ago

9 months ago

8 months ago

7 months ago

10 months ago

9 months ago

8 months ago

10 months ago

7 months ago

7 months ago

9 months ago

9 months ago

10 months ago

12 months ago

7 months ago

9 months ago

11 months ago

10 months ago

7 months ago

9 months ago

7 months ago

10 months ago

10 months ago

9 months ago

7 months ago

11 months ago

10 months ago

7 months ago

7 months ago

8 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

11 months ago

7 months ago

10 months ago

9 months ago

8 months ago

9 months ago

12 months ago

9 months ago

9 months ago

10 months ago

12 months ago

7 months ago

7 months ago

9 months ago

10 months ago

11 months ago

9 months ago

10 months ago

9 months ago

10 months ago