4.0.3 • Published 7 days ago

@kong-ui-public/analytics-chart v4.0.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
7 days ago

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

Usage

Install

Install the component in your host application

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

Props - AnalyticsChart

chartData

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 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',
          }

chartTitle

  • type: string
  • required: true

emptyStateTitle

  • type: string
  • required: false

emptyStateDescription

  • type: string
  • required: false

tooltipTitle

  • type: string
  • required: true

legendPosition

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

chartOptions

emptyStateTitle

  • type: string
  • required: false

metricDisplay

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

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

7 days ago

3.0.13

15 days ago

4.0.1

14 days ago

4.0.0

15 days ago

4.0.2

14 days ago

3.0.12

15 days ago

3.0.11

16 days ago

3.0.10

17 days ago

3.0.9

22 days ago

3.0.8

27 days ago

3.0.7

27 days ago

3.0.6

29 days ago

3.0.5

29 days ago

3.0.4

1 month ago

3.0.3

1 month ago

3.0.2

1 month ago

3.0.1

1 month ago

2.5.5

1 month ago

3.0.0

1 month ago

2.5.4

1 month ago

2.5.3

1 month ago

2.5.2

1 month ago

2.5.1

1 month ago

2.5.0

2 months ago

2.4.3

2 months ago

2.4.5

2 months ago

2.4.4

2 months ago

2.4.7

2 months ago

2.4.6

2 months ago

2.4.8

2 months ago

2.4.2

2 months ago

2.4.1

2 months ago

2.4.0

2 months ago

2.3.4

2 months ago

2.3.3

2 months ago

2.3.2

2 months ago

2.3.1

2 months ago

2.3.0

2 months ago

2.2.3

2 months ago

2.2.2

2 months ago

2.2.5

2 months ago

2.2.4

2 months ago

2.2.1

2 months ago

2.2.0

2 months ago

2.1.2

2 months ago

2.1.1

2 months ago

2.1.4

2 months ago

2.1.3

2 months ago

2.1.0

2 months ago

2.0.6

2 months ago

2.0.5

3 months ago

2.0.3

3 months ago

2.0.2

3 months ago

2.0.4

3 months ago

2.0.1

3 months ago

2.0.0

3 months ago

1.3.6

3 months ago

1.3.5

3 months ago

1.3.4

3 months ago

1.3.3

3 months ago

1.3.2

3 months ago

1.3.1

3 months ago

1.3.0

3 months ago

1.1.16

3 months ago

1.1.15

3 months ago

1.1.17

3 months ago

1.2.0

3 months ago

1.1.12

3 months ago

1.1.11

3 months ago

1.1.10

3 months ago

1.1.14

3 months ago

1.1.13

3 months ago

1.1.9

3 months ago

1.1.8

3 months ago

1.1.7

3 months ago

1.1.6

3 months ago

1.1.5

3 months ago

1.1.4

3 months ago

1.1.3

4 months ago

1.1.2

4 months ago

1.1.1

4 months ago

1.1.0

4 months ago

0.25.0

4 months ago

0.24.10

4 months ago

0.24.9

4 months ago

0.24.8

4 months ago

0.24.7

4 months ago

0.24.6

4 months ago

0.24.5

4 months ago

0.24.4

4 months ago

0.24.3

4 months ago

0.24.2

4 months ago

0.24.1

4 months ago

0.24.0

4 months ago

0.23.3

5 months ago

0.23.2

5 months ago

0.23.1

5 months ago

0.23.0

5 months ago

0.22.1

5 months ago

0.22.0

5 months ago

0.20.0

5 months ago

0.21.0

5 months ago

0.18.1

5 months ago

0.19.0

5 months ago

0.17.5

5 months ago

0.18.0

5 months ago

0.17.4

5 months ago

0.17.3

5 months ago

0.17.2

5 months ago

0.17.1

5 months ago

0.8.9

9 months ago

0.8.8

9 months ago

0.8.5

9 months ago

0.8.4

9 months ago

0.8.7

9 months ago

0.8.6

9 months ago

0.17.0

5 months ago

0.7.2

9 months ago

0.7.1

9 months ago

0.7.3

9 months ago

0.7.0

10 months ago

0.9.8

8 months ago

0.9.7

8 months ago

0.9.9

8 months ago

0.9.4

8 months ago

0.9.3

8 months ago

0.9.6

8 months ago

0.9.5

8 months ago

0.10.1

8 months ago

0.10.2

8 months ago

0.10.3

8 months ago

0.10.4

8 months ago

0.10.5

8 months ago

0.10.6

8 months ago

0.10.7

7 months ago

0.10.8

7 months ago

0.9.20

8 months ago

0.10.0

8 months ago

0.8.1

9 months ago

0.8.0

9 months ago

0.8.3

9 months ago

0.8.2

9 months ago

0.15.4

6 months ago

0.15.5

6 months ago

0.15.0

6 months ago

0.15.1

6 months ago

0.15.2

6 months ago

0.15.3

6 months ago

0.5.0

10 months ago

0.16.10

5 months ago

0.16.11

5 months ago

0.16.12

5 months ago

0.16.13

5 months ago

0.16.3

5 months ago

0.16.4

5 months ago

0.16.5

5 months ago

0.16.6

5 months ago

0.16.7

5 months ago

0.16.8

5 months ago

0.16.9

5 months ago

0.16.0

5 months ago

0.16.1

5 months ago

0.16.2

5 months ago

0.6.0

10 months ago

0.13.6

6 months ago

0.13.0

6 months ago

0.13.1

6 months ago

0.13.2

6 months ago

0.13.3

6 months ago

0.13.4

6 months ago

0.13.5

6 months ago

0.3.0

10 months ago

0.3.1

10 months ago

0.14.0

6 months ago

0.14.1

6 months ago

0.14.2

6 months ago

0.4.1

10 months ago

0.4.0

10 months ago

0.9.12

8 months ago

0.9.13

8 months ago

0.9.14

8 months ago

0.9.15

8 months ago

0.9.10

8 months ago

0.9.11

8 months ago

0.9.16

8 months ago

0.9.17

8 months ago

0.9.18

8 months ago

0.9.19

8 months ago

0.11.0

7 months ago

0.11.1

7 months ago

0.11.2

7 months ago

0.11.3

7 months ago

0.11.4

7 months ago

0.11.5

7 months ago

0.11.6

7 months ago

0.11.7

7 months ago

0.8.30

8 months ago

0.8.31

8 months ago

0.9.0

8 months ago

0.9.2

8 months ago

0.9.1

8 months ago

0.8.23

9 months ago

0.8.22

9 months ago

0.8.25

9 months ago

0.8.24

9 months ago

0.8.21

9 months ago

0.8.20

9 months ago

0.8.27

9 months ago

0.8.26

9 months ago

0.8.29

9 months ago

0.8.28

9 months ago

0.12.0

7 months ago

0.12.1

6 months ago

0.12.2

6 months ago

0.12.3

6 months ago

0.8.12

9 months ago

0.8.11

9 months ago

0.8.14

9 months ago

0.8.13

9 months ago

0.8.10

9 months ago

0.8.19

9 months ago

0.8.16

9 months ago

0.8.15

9 months ago

0.8.18

9 months ago

0.8.17

9 months ago

0.2.1

10 months ago

0.2.3

10 months ago

0.2.2

10 months ago

0.1.2

10 months ago

0.2.0

10 months ago

0.1.1

10 months ago

0.1.8

10 months ago

0.1.7

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.6

10 months ago

0.1.5

10 months ago

0.1.0

11 months ago