How to use the @elastic/charts.getSpecId function in @elastic/charts

export const DurationChart = ({
  locationDurationLines,
  meanColor,
  rangeColor,
}: DurationChartProps) => {
  const { absoluteStartDate, absoluteEndDate } = useContext(UptimeSettingsContext);
  // this id is used for the line chart representing the average duration length
  const averageSpecId = getSpecId('average-');

  const lineSeries = locationDurationLines.map(line => {
    const locationSpecId = getSpecId('loc-avg' + line.name);
    return (
       [x || 0, microsToMillis(y)])}
        id={locationSpecId}
        key={`locline-${line.name}`}
        name={line.name}
        xAccessor={0}
        xScaleType={ScaleType.Time}
        yAccessors={[1]}
        yScaleToDataExtent={false}
        yScaleType={ScaleType.Linear}

export const Line: FC = ({ chartData }) => {
  return (
    
  );
};

export const ModelBounds: FC = ({ modelData }) => {
  const model = modelData === undefined ? [] : modelData;
  return (
    
  );
};

export const ChartView = ({ data, setTimeRange, timeRange }: Props) => {
  const { areaSeries, lineSeries, anomalySeries } = useLogEntryRateGraphData({ data });

  const dateFormatter = useMemo(
    () =>
      lineSeries.length > 0
        ? niceTimeFormatter([timeRange.startTime, timeRange.endTime])
        : (value: number) => `${value}`,
    [lineSeries, timeRange]
  );

  const areaSpecId = getSpecId('modelBounds');
  const lineSpecId = getSpecId('averageValues');
  const anomalySpecId = getSpecId('anomalies');

  const [dateFormat] = useKibanaUiSetting('dateFormat');

  const tooltipProps = useMemo(
    () => ({
      headerFormatter: (tooltipData: TooltipValue) =>
        moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
    }),
    [dateFormat]
  );

  const [isShowingModelBounds, setIsShowingModelBounds] = useState(true);

  const handleBrushEnd = useCallback(
    (startTime: number, endTime: number) => {

border: {
      visible: false,
      strokeWidth: 2,
      stroke: color,
    },
    point: {
      visible: false,
      radius: 0.2,
      stroke: color,
      strokeWidth: 2,
      opacity: 1,
    },
  };

  const yAccessor = `metric_${id}`;
  const specId = getSpecId(yAccessor);
  const colors: DataSeriesColorsValues = {
    colorValues: [],
    specId,
  };
  const customColors: CustomSeriesColorsMap = new Map();
  customColors.set(colors, color);

  return (

export const ChartView = ({ data, setTimeRange, timeRange }: Props) => {
  const { areaSeries, lineSeries, anomalySeries } = useLogEntryRateGraphData({ data });

  const dateFormatter = useMemo(
    () =>
      lineSeries.length > 0
        ? niceTimeFormatter([timeRange.startTime, timeRange.endTime])
        : (value: number) => `${value}`,
    [lineSeries, timeRange]
  );

  const areaSpecId = getSpecId('modelBounds');
  const lineSpecId = getSpecId('averageValues');
  const anomalySpecId = getSpecId('anomalies');

  const [dateFormat] = useKibanaUiSetting('dateFormat');

  const tooltipProps = useMemo(
    () => ({
      headerFormatter: (tooltipData: TooltipValue) =>
        moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
    }),
    [dateFormat]
  );

  const [isShowingModelBounds, setIsShowingModelBounds] = useState(true);

  const handleBrushEnd = useCallback(

.convert(props.totalDocuments)}
              {' '}
              {i18n.translate('xpack.lens.indexPattern.ofDocumentsLabel', {
                defaultMessage: 'documents',
              })}
            
          
        ) : (
          <>
        )}
      
    );
  }

  if (histogram && histogram.buckets.length) {
    const specId = getSpecId(
      i18n.translate('xpack.lens.indexPattern.fieldStatsCountLabel', {
        defaultMessage: 'Count',
      })
    );
    const colors: DataSeriesColorsValues = {
      colorValues: [],
      specId,
    };
    const expectedColor = getColorForDataType(field.type);

    const seriesColors = new Map([[colors, expectedColor]]);

    if (field.type === 'date') {
      return wrapInPopover(

export const getSeriesStyle = (
  seriesKey: string,
  color: string | undefined,
  seriesType?: SeriesType
) => {
  if (!color) return undefined;
  const customSeriesColors: CustomSeriesColorsMap = new Map();
  const dataSeriesColorValues: DataSeriesColorsValues = {
    colorValues: seriesType === SeriesType.BAR ? [seriesKey] : [],
    specId: getSpecId(seriesKey),
  };

  customSeriesColors.set(dataSeriesColorValues, color);

  return customSeriesColors;
};

visible: 'area' === type,
    },
    line: {
      strokeWidth: 'area' === type ? 1 : 2,
      visible: true,
    },
    point: {
      visible: true,
      radius: 1,
      strokeWidth: 2,
      opacity: 1,
    },
  };
  const colors: DataSeriesColorsValues = {
    colorValues: [],
    specId: getSpecId(id),
  };
  const customColors: CustomSeriesColorsMap = new Map();
  customColors.set(colors, color || '#999');
  return (

export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartProps) => {
  const upSeriesSpecId = getSpecId('Up');
  const downSeriesSpecId = getSpecId('Down');
  const [getUrlParams] = useUrlParams();
  const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();

  const upString = i18n.translate('xpack.uptime.monitorCharts.checkStatus.series.upCountLabel', {
    defaultMessage: 'Up count',
  });
  const downString = i18n.translate(
    'xpack.uptime.monitorCharts.checkStatus.series.downCountLabel',
    {
      defaultMessage: 'Down count',
    }
  );

  return (