fixing charts

elastic · Nov 24, 2020 · c069d57 · c069d57
1 parent 423888c
commit c069d57
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 54 deletions.
diff --git a/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
@@ -5,26 +5,33 @@
  */
 
 import {
+  AnnotationDomainTypes,
   AreaSeries,
   Axis,
   Chart,
   CurveType,
+  LineAnnotation,
   niceTimeFormatter,
   Placement,
   Position,
   ScaleType,
   Settings,
 } from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { asPercent } from '../../../../../common/utils/formatters';
+import {
+  asAbsoluteDateTime,
+  asPercent,
+} from '../../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
+import { useTheme } from '../../../../hooks/useTheme';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { useChartsSync as useChartsSync2 } from '../../../../hooks/use_charts_sync';
+import { useChartsSync } from '../../../../hooks/use_charts_sync';
 import { unit } from '../../../../style/variables';
-import { Annotations } from '../../charts/annotations';
 import { ChartContainer } from '../../charts/chart_container';
 import { onBrushEnd } from '../../charts/helper/helper';
 
@@ -38,8 +45,9 @@ interface Props {
 export function TransactionBreakdownGraph({ fetchStatus, timeseries }: Props) {
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
-  const { event, setEvent } = useChartsSync2();
+  const { event, setEvent, annotations } = useChartsSync();
   const { urlParams } = useUrlParams();
+  const theme = useTheme();
   const { start, end } = urlParams;
 
   useEffect(() => {
@@ -53,6 +61,8 @@ export function TransactionBreakdownGraph({ fetchStatus, timeseries }: Props) {
 
   const xFormatter = niceTimeFormatter([min, max]);
 
+  const annotationColor = theme.eui.euiColorSecondary;
+
   return (
     <ChartContainer
       height={XY_HEIGHT}
@@ -87,7 +97,22 @@ export function TransactionBreakdownGraph({ fetchStatus, timeseries }: Props) {
           tickFormat={(y: number) => asPercent(y ?? 0, 1)}
         />
 
-        <Annotations />
+        <LineAnnotation
+          id="annotations"
+          domainType={AnnotationDomainTypes.XDomain}
+          dataValues={annotations.map((annotation) => ({
+            dataValue: annotation['@timestamp'],
+            header: asAbsoluteDateTime(annotation['@timestamp']),
+            details: `${i18n.translate('xpack.apm.chart.annotation.version', {
+              defaultMessage: 'Version',
+            })} ${annotation.text}`,
+          }))}
+          style={{
+            line: { strokeWidth: 1, stroke: annotationColor, opacity: 1 },
+          }}
+          marker={<EuiIcon type="dot" color={annotationColor} />}
+          markerPosition={Position.Top}
+        />
 
         {timeseries?.length ? (
           timeseries.map((serie) => {

diff --git a/x-pack/plugins/apm/public/components/shared/charts/annotations/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/annotations/index.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
@@ -5,28 +5,34 @@
  */
 
 import {
+  AnnotationDomainTypes,
   AreaSeries,
   Axis,
   Chart,
   CurveType,
   LegendItemListener,
+  LineAnnotation,
   LineSeries,
   niceTimeFormatter,
   Placement,
   Position,
   ScaleType,
   Settings,
   SettingsSpec,
+  YDomainRange,
 } from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
+import { asAbsoluteDateTime } from '../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
+import { useTheme } from '../../../hooks/useTheme';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useChartsSync } from '../../../hooks/use_charts_sync';
 import { unit } from '../../../style/variables';
-import { Annotations } from './annotations';
 import { ChartContainer } from './chart_container';
 import { onBrushEnd } from './helper/helper';
 
@@ -45,6 +51,7 @@ interface Props {
    */
   yTickFormat?: (y: number) => string;
   showAnnotations?: boolean;
+  yDomain?: YDomainRange;
 }
 
 export function TimeseriesChart({
@@ -56,11 +63,14 @@ export function TimeseriesChart({
   yLabelFormat,
   yTickFormat,
   showAnnotations = true,
+  yDomain,
 }: Props) {
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
-  const { event, setEvent } = useChartsSync();
+  const { event, setEvent, annotations } = useChartsSync();
   const { urlParams } = useUrlParams();
+  const theme = useTheme();
+
   const { start, end } = urlParams;
 
   useEffect(() => {
@@ -89,6 +99,8 @@ export function TimeseriesChart({
         y === null || y === undefined
     );
 
+  const annotationColor = theme.eui.euiColorSecondary;
+
   return (
     <ChartContainer hasData={!isEmpty} height={height} status={fetchStatus}>
       <Chart ref={chartRef} id={id}>
@@ -118,6 +130,7 @@ export function TimeseriesChart({
           tickFormat={xFormatter}
         />
         <Axis
+          domain={yDomain}
           id="y-axis"
           ticks={3}
           position={Position.Left}
@@ -126,7 +139,24 @@ export function TimeseriesChart({
           showGridLines
         />
 
-        {showAnnotations && <Annotations />}
+        {showAnnotations && (
+          <LineAnnotation
+            id="annotations"
+            domainType={AnnotationDomainTypes.XDomain}
+            dataValues={annotations.map((annotation) => ({
+              dataValue: annotation['@timestamp'],
+              header: asAbsoluteDateTime(annotation['@timestamp']),
+              details: `${i18n.translate('xpack.apm.chart.annotation.version', {
+                defaultMessage: 'Version',
+              })} ${annotation.text}`,
+            }))}
+            style={{
+              line: { strokeWidth: 1, stroke: annotationColor, opacity: 1 },
+            }}
+            marker={<EuiIcon type="dot" color={annotationColor} />}
+            markerPosition={Position.Top}
+          />
+        )}
 
         {timeseries.map((serie) => {
           const Series = serie.type === 'area' ? AreaSeries : LineSeries;

diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx
@@ -91,6 +91,7 @@ export function TransactionErrorRateChart({
         ]}
         yLabelFormat={yLabelFormat}
         yTickFormat={yTickFormat}
+        yDomain={{ min: 0, max: 1 }}
       />
     </EuiPanel>
   );

diff --git a/x-pack/plugins/apm/public/context/charts_sync_context.tsx b/x-pack/plugins/apm/public/context/charts_sync_context.tsx
@@ -11,10 +11,13 @@ import React, {
   SetStateAction,
   useState,
 } from 'react';
+import { Annotation } from '../../common/annotations';
+import { useAnnotations } from '../hooks/use_annotations';
 
 export const ChartsSyncContext = createContext<{
   event: any;
   setEvent: Dispatch<SetStateAction<{}>>;
+  annotations: Annotation[];
 } | null>(null);
 
 export function ChartsSyncContextProvider({
@@ -23,10 +26,11 @@ export function ChartsSyncContextProvider({
   children: ReactNode;
 }) {
   const [event, setEvent] = useState({});
+  const { annotations } = useAnnotations();
 
   return (
     <ChartsSyncContext.Provider
-      value={{ event, setEvent }}
+      value={{ event, setEvent, annotations }}
       children={children}
     />
   );