From b933155f0793ce4b9fffec4c79eed1d28e077c56 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 7 Apr 2021 11:17:40 -0400
Subject: [PATCH] fixes some domain issues for x and y axis

---
 .../ObservabilityMetrics/LineChart.jsx        | 39 +++++++++----------
 .../ObservabilityMetrics.jsx                  |  4 +-
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/awx/ui_next/src/screens/ObservabilityMetrics/LineChart.jsx b/awx/ui_next/src/screens/ObservabilityMetrics/LineChart.jsx
index 2f02b8a5aa..48872214b3 100644
--- a/awx/ui_next/src/screens/ObservabilityMetrics/LineChart.jsx
+++ b/awx/ui_next/src/screens/ObservabilityMetrics/LineChart.jsx
@@ -1,11 +1,8 @@
 import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
-import { t } from '@lingui/macro';
-import { withI18n } from '@lingui/react';
 import { PageContextConsumer } from '@patternfly/react-core';
 
-function LineChart({ data, i18n, helpText }) {
-  console.log(data, 'data');
+function LineChart({ data, helpText }) {
   const count = data[0]?.values.length;
   const draw = useCallback(() => {
     const margin = 80;
@@ -31,6 +28,7 @@ function LineChart({ data, i18n, helpText }) {
 
     /* Scale */
     let smallestY;
+    let largestY;
     data.map(line =>
       line.values.forEach(value => {
         if (smallestY === undefined) {
@@ -39,17 +37,27 @@ function LineChart({ data, i18n, helpText }) {
         if (value.y < smallestY) {
           smallestY = value.y;
         }
+        if (largestY === undefined) {
+          largestY = smallestY + 10;
+        }
+        if (value.y > largestY) {
+          largestY = value.y;
+        }
       })
     );
 
     const xScale = d3
       .scaleLinear()
-      .domain(d3.extent(data[0].values, d => d.x))
+      .domain(
+        d3.max(data[0].values, d => d.x) > 49
+          ? d3.extent(data[0].values, d => d.x)
+          : [0, 50]
+      )
       .range([0, width - margin]);
 
     const yScale = d3
       .scaleLinear()
-      .domain([smallestY, d3.max(data[0].values, d => d.y)])
+      .domain([smallestY, largestY])
       .range([height - margin, 0]);
 
     const color = d3.scaleOrdinal(d3.schemeCategory10);
@@ -221,24 +229,13 @@ function LineChart({ data, i18n, helpText }) {
       .append('g')
       .attr('class', 'x axis')
       .attr('transform', `translate(0, ${height - margin})`)
-      .call(xAxis)
-      .append('text')
-      .attr('x', 30)
-      .attr('y', 30)
-      .attr('fill', '#000')
-      .text(i18n._(t`Count`));
+      .call(xAxis);
 
     svg
       .append('g')
       .attr('class', 'y axis')
-      .call(yAxis)
-      .append('text')
-      .attr('y', -30)
-      .attr('x', 0)
-      .attr('transform', 'rotate(-90)')
-      .attr('fill', '#000')
-      .text(i18n._(t`Values`));
-  }, [data, i18n, helpText]);
+      .call(yAxis);
+  }, [data, helpText]);
 
   useEffect(() => {
     draw();
@@ -269,4 +266,4 @@ const withPageContext = Component => {
   };
 };
 
-export default withI18n()(withPageContext(LineChart));
+export default withPageContext(LineChart);
diff --git a/awx/ui_next/src/screens/ObservabilityMetrics/ObservabilityMetrics.jsx b/awx/ui_next/src/screens/ObservabilityMetrics/ObservabilityMetrics.jsx
index 24dae3168d..0b08f00036 100644
--- a/awx/ui_next/src/screens/ObservabilityMetrics/ObservabilityMetrics.jsx
+++ b/awx/ui_next/src/screens/ObservabilityMetrics/ObservabilityMetrics.jsx
@@ -185,7 +185,7 @@ function ObservabilityMetrics({ i18n }) {
                       setRenderedData([]);
                     }}
                     selections={instance}
-                    placeholderText={i18n._(t`Select an instance`)}
+                    placeholderText={i18n._(t`Select a instance`)}
                   >
                     {instances.map(inst => (
                       <SelectOption value={inst} key={inst} />
@@ -196,7 +196,7 @@ function ObservabilityMetrics({ i18n }) {
                 <ToolbarItem>
                   <Select
                     ouiaId="Metric-select"
-                    placeholderText={i18n._(t`Select an metric`)}
+                    placeholderText={i18n._(t`Select a metric`)}
                     isOpen={metricIsOpen}
                     onSelect={(e, value) => {
                       count = [0];