External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 01:47:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

fixes some domain issues for x and y axis

Browse Source
This commit is contained in:
Alex Corey
2021-04-07 11:17:40 -04:00
parent 51257a2f62
commit b933155f07
2 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
awx/ui_next/src/screens/ObservabilityMetrics/LineChart.jsx
View File

@@ -1,11 +1,8 @@
import React, { useEffect, useCallback } from 'react'; import React, { useEffect, useCallback } from 'react';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { PageContextConsumer } from '@patternfly/react-core'; import { PageContextConsumer } from '@patternfly/react-core';
function LineChart({ data, i18n, helpText }) { function LineChart({ data, helpText }) {
console.log(data, 'data');
const count = data[0]?.values.length; const count = data[0]?.values.length;
const draw = useCallback(() => { const draw = useCallback(() => {
const margin = 80; const margin = 80;
@@ -31,6 +28,7 @@ function LineChart({ data, i18n, helpText }) {
/* Scale */ /* Scale */
let smallestY; let smallestY;
let largestY;
data.map(line => data.map(line =>
line.values.forEach(value => { line.values.forEach(value => {
if (smallestY === undefined) { if (smallestY === undefined) {
@@ -39,17 +37,27 @@ function LineChart({ data, i18n, helpText }) {
if (value.y < smallestY) { if (value.y < smallestY) {
smallestY = value.y; smallestY = value.y;
} }
if (largestY === undefined) {
largestY = smallestY + 10;
}
if (value.y > largestY) {
largestY = value.y;
}
}) })
); );
const xScale = d3 const xScale = d3
.scaleLinear() .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]); .range([0, width - margin]);
const yScale = d3 const yScale = d3
.scaleLinear() .scaleLinear()
.domain([smallestY, d3.max(data[0].values, d => d.y)]) .domain([smallestY, largestY])
.range([height - margin, 0]); .range([height - margin, 0]);
const color = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleOrdinal(d3.schemeCategory10);
@@ -221,24 +229,13 @@ function LineChart({ data, i18n, helpText }) {
.append('g') .append('g')
.attr('class', 'x axis') .attr('class', 'x axis')
.attr('transform', `translate(0, ${height - margin})`) .attr('transform', `translate(0, ${height - margin})`)
.call(xAxis) .call(xAxis);
.append('text')
.attr('x', 30)
.attr('y', 30)
.attr('fill', '#000')
.text(i18n._(t`Count`));
svg svg
.append('g') .append('g')
.attr('class', 'y axis') .attr('class', 'y axis')
.call(yAxis) .call(yAxis);
.append('text') }, [data, helpText]);
.attr('y', -30)
.attr('x', 0)
.attr('transform', 'rotate(-90)')
.attr('fill', '#000')
.text(i18n._(t`Values`));
}, [data, i18n, helpText]);
useEffect(() => { useEffect(() => {
draw(); draw();
@@ -269,4 +266,4 @@ const withPageContext = Component => {
}; };
}; };
export default withI18n()(withPageContext(LineChart)); export default withPageContext(LineChart);

4
awx/ui_next/src/screens/ObservabilityMetrics/ObservabilityMetrics.jsx
View File

@@ -185,7 +185,7 @@ function ObservabilityMetrics({ i18n }) {
setRenderedData([]); setRenderedData([]);
}} }}
selections={instance} selections={instance}
placeholderText={i18n._(t`Select an instance`)} placeholderText={i18n._(t`Select a instance`)}
> >
{instances.map(inst => ( {instances.map(inst => (
<SelectOption value={inst} key={inst} /> <SelectOption value={inst} key={inst} />
@@ -196,7 +196,7 @@ function ObservabilityMetrics({ i18n }) {
<ToolbarItem> <ToolbarItem>
<Select <Select
ouiaId="Metric-select" ouiaId="Metric-select"
placeholderText={i18n._(t`Select an metric`)} placeholderText={i18n._(t`Select a metric`)}
isOpen={metricIsOpen} isOpen={metricIsOpen}
onSelect={(e, value) => { onSelect={(e, value) => {
count = [0]; count = [0];