How to use the @elastic/eui/dist/eui_theme_light.json.euiColorVis1 function in @elastic/eui

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { AggregationSearchResponse, AggregatedValue } from 'elasticsearch';
import { idx } from '@kbn/elastic-idx';
import { ChartBase } from './types';

const colors = [
  theme.euiColorVis0,
  theme.euiColorVis1,
  theme.euiColorVis2,
  theme.euiColorVis3,
  theme.euiColorVis4,
  theme.euiColorVis5,
  theme.euiColorVis6
];

export type GenericMetricsChart = ReturnType<
  typeof transformDataToMetricsChart
>;

interface AggregatedParams {
  body: {
    aggs: {
      timeseriesData: {
        date_histogram: any;

function getServiceColors(services: string[]) {
  const assignedColors = [
    theme.euiColorVis1,
    theme.euiColorVis0,
    theme.euiColorVis3,
    theme.euiColorVis2,
    theme.euiColorVis6,
    theme.euiColorVis7,
    theme.euiColorVis5
  ];

  return zipObject(services, assignedColors) as IServiceColors;
}

function getAnomalyBoundariesSeries(data: Coordinate[]) {
  return {
    title: i18n.translate(
      'xpack.apm.transactions.chart.anomalyBoundariesLabel',
      {
        defaultMessage: 'Anomaly Boundaries'
      }
    ),
    hideLegend: true,
    hideTooltipValue: true,
    data,
    type: 'area',
    color: 'none',
    areaColor: rgba(theme.euiColorVis1, 0.1)
  };
}

function getColorByKey(keys: string[]) {
  const assignedColors: StringMap = {
    'HTTP 2xx': theme.euiColorVis0,
    'HTTP 3xx': theme.euiColorVis5,
    'HTTP 4xx': theme.euiColorVis7,
    'HTTP 5xx': theme.euiColorVis2
  };

  const unknownKeys = difference(keys, Object.keys(assignedColors));
  const unassignedColors: StringMap = zipObject(unknownKeys, [
    theme.euiColorVis1,
    theme.euiColorVis3,
    theme.euiColorVis4,
    theme.euiColorVis6,
    theme.euiColorVis2,
    theme.euiColorVis8
  ]);

  return (key: string) => assignedColors[key] || unassignedColors[key];
}

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
import theme from '@elastic/eui/dist/eui_theme_light.json';

export const MAX_KPIS = 20;

export const COLORS = [
  theme.euiColorVis0,
  theme.euiColorVis1,
  theme.euiColorVis2,
  theme.euiColorVis3,
  theme.euiColorVis4,
  theme.euiColorVis5,
  theme.euiColorVis6,
  theme.euiColorVis7,
  theme.euiColorVis8,
  theme.euiColorVis9
];

export function getResponseTimeSeries({
  apmTimeseries,
  anomalyTimeseries
}: TimeSeriesAPIResponse) {
  const { overallAvgDuration } = apmTimeseries;
  const { avg, p95, p99 } = apmTimeseries.responseTimes;

  const series: TimeSeries[] = [
    {
      title: i18n.translate('xpack.apm.transactions.chart.averageLabel', {
        defaultMessage: 'Avg.'
      }),
      data: avg,
      legendValue: asMillis(overallAvgDuration),
      type: 'linemark',
      color: theme.euiColorVis1
    },
    {
      title: i18n.translate(
        'xpack.apm.transactions.chart.95thPercentileLabel',
        {
          defaultMessage: '95th percentile'
        }
      ),
      titleShort: '95th',
      data: p95,
      type: 'linemark',
      color: theme.euiColorVis5
    },
    {
      title: i18n.translate(
        'xpack.apm.transactions.chart.99thPercentileLabel',

render() {
    const {
      onClick,
      text,
      color = theme.euiColorVis1,
      fontSize = fontSizes.small,
      radius = units.minus - 1,
      disabled = false,
      clickable = false,
      indicator,
      ...rest
    } = this.props;
    return (
      
        {indicator ? indicator() : }

const series = {
  heapMemoryUsed: {
    title: i18n.translate('xpack.apm.agentMetrics.java.heapMemorySeriesUsed', {
      defaultMessage: 'Avg. used'
    }),
    color: theme.euiColorVis0
  },
  heapMemoryCommitted: {
    title: i18n.translate(
      'xpack.apm.agentMetrics.java.heapMemorySeriesCommitted',
      {
        defaultMessage: 'Avg. committed'
      }
    ),
    color: theme.euiColorVis1
  },
  heapMemoryMax: {
    title: i18n.translate('xpack.apm.agentMetrics.java.heapMemorySeriesMax', {
      defaultMessage: 'Avg. limit'
    }),
    color: theme.euiColorVis2
  }
};

const chartBase: ChartBase = {
  title: i18n.translate('xpack.apm.agentMetrics.java.heapMemoryChartTitle', {
    defaultMessage: 'Heap Memory'
  }),
  key: 'heap_memory_area_chart',
  type: 'area',
  yUnit: 'bytes',

function getColorByKey(keys: string[]) {
  const assignedColors: StringMap = {
    'HTTP 2xx': theme.euiColorVis0,
    'HTTP 3xx': theme.euiColorVis5,
    'HTTP 4xx': theme.euiColorVis7,
    'HTTP 5xx': theme.euiColorVis2
  };

  const unknownKeys = difference(keys, Object.keys(assignedColors));
  const unassignedColors: StringMap = zipObject(unknownKeys, [
    theme.euiColorVis1,
    theme.euiColorVis3,
    theme.euiColorVis4,
    theme.euiColorVis6,
    theme.euiColorVis2,
    theme.euiColorVis8
  ]);

  return (key: string) => assignedColors[key] || unassignedColors[key];
}