How to use @elastic/charts - 10 common examples

0 ? chartPoints : [{ time: timeRangeEarliest, value: 0 }]}
        />
      
    
  );
};

});
    },
    [setTimeRange]
  );

  return (
    <div style="{{">
      
        
         numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
        /&gt;
        
        {renderAnnotations(annotations, chartId, renderAnnotationTooltip)}</div>

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 function getScaleType(metadata: OperationMetadata | null, defaultScale: ScaleType) {
  if (!metadata) {
    return defaultScale;
  }

  // use scale information if available
  if (metadata.scale === 'ordinal') {
    return ScaleType.Ordinal;
  }
  if (metadata.scale === 'interval' || metadata.scale === 'ratio') {
    return metadata.dataType === 'date' ? ScaleType.Time : ScaleType.Linear;
  }

  // fall back to data type if necessary
  switch (metadata.dataType) {
    case 'boolean':
    case 'string':
      return ScaleType.Ordinal;
    case 'date':
      return ScaleType.Time;
    default:
      return ScaleType.Linear;
  }
}

// use scale information if available
  if (metadata.scale === 'ordinal') {
    return ScaleType.Ordinal;
  }
  if (metadata.scale === 'interval' || metadata.scale === 'ratio') {
    return metadata.dataType === 'date' ? ScaleType.Time : ScaleType.Linear;
  }

  // fall back to data type if necessary
  switch (metadata.dataType) {
    case 'boolean':
    case 'string':
      return ScaleType.Ordinal;
    case 'date':
      return ScaleType.Time;
    default:
      return ScaleType.Linear;
  }
}

/*
 * 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 React, { FC, Fragment } from 'react';
import { Axis, getAxisId, Position, timeFormatter, niceTimeFormatByDay } from '@elastic/charts';
import { getYRange } from './utils';
import { LineChartPoint } from '../../../../common/chart_loader';

const dateFormatter = timeFormatter(niceTimeFormatByDay(3));

interface Props {
  chartData?: LineChartPoint[];
}

// round to 2dp
function tickFormatter(d: number): string {
  return (Math.round(d * 100) / 100).toString();
}

export const Axes: FC = ({ chartData }) => {
  const yDomain = chartData !== undefined ? getYRange(chartData) : undefined;

  return (

return defaultScale;
  }

  // use scale information if available
  if (metadata.scale === 'ordinal') {
    return ScaleType.Ordinal;
  }
  if (metadata.scale === 'interval' || metadata.scale === 'ratio') {
    return metadata.dataType === 'date' ? ScaleType.Time : ScaleType.Linear;
  }

  // fall back to data type if necessary
  switch (metadata.dataType) {
    case 'boolean':
    case 'string':
      return ScaleType.Ordinal;
    case 'date':
      return ScaleType.Time;
    default:
      return ScaleType.Linear;
  }
}

export function getScaleType(metadata: OperationMetadata | null, defaultScale: ScaleType) {
  if (!metadata) {
    return defaultScale;
  }

  // use scale information if available
  if (metadata.scale === 'ordinal') {
    return ScaleType.Ordinal;
  }
  if (metadata.scale === 'interval' || metadata.scale === 'ratio') {
    return metadata.dataType === 'date' ? ScaleType.Time : ScaleType.Linear;
  }

  // fall back to data type if necessary
  switch (metadata.dataType) {
    case 'boolean':
    case 'string':
      return ScaleType.Ordinal;
    case 'date':
      return ScaleType.Time;
    default:
      return ScaleType.Linear;
  }
}

xValue: TableSuggestionColumn;
  splitBy: TableSuggestionColumn | undefined;
  layerId: string;
  changeType: TableChangeType;
}) {
  const newLayer = {
    ...(getExistingLayer(currentState, layerId) || {}),
    layerId,
    seriesType,
    xAccessor: xValue.columnId,
    splitAccessor: splitBy ? splitBy.columnId : generateId(),
    accessors: yValues.map(col => col.columnId),
  };

  const state: State = {
    legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right },
    preferredSeriesType: seriesType,
    layers: [
      ...(currentState ? currentState.layers.filter(layer => layer.layerId !== layerId) : []),
      newLayer,
    ],
  };

  return {
    title,
    score: getScore(yValues, splitBy, changeType),
    // don't advertise chart of same type but with less data
    hide: currentState && changeType === 'reduced',
    state,
    previewIcon: getIconForSeries(seriesType),
  };
}

export const Axes: FC = ({ chartData }) => {
  const yDomain = chartData !== undefined ? getYRange(chartData) : undefined;

  return (
    
      
      
    
  );
};