diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx index 736a9a7482..c1235b88e8 100644 --- a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx +++ b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx @@ -155,7 +155,7 @@ function Dashboard({ i18n }) {
- + svg`).append('g'); - this.toolTipBase.attr('id', `svg-chart-Tooltip.base-${this.svg.slice(1)}`); + this.toolTipBase.attr('id', 'chart-tooltip'); this.toolTipBase.attr('overflow', 'visible'); this.toolTipBase.style('opacity', 0); this.toolTipBase.style('pointer-events', 'none'); @@ -54,14 +56,14 @@ class Tooltip { .attr('y', 4) .attr('font-size', 12) .attr('fill', 'white') - .text('Successful'); + .text(this.i18n._(t`Successful`)); this.failText = this.toolTipBase .append('text') .attr('x', 43) .attr('y', 28) .attr('font-size', 12) .attr('fill', 'white') - .text('Failed'); + .text(this.i18n._(t`Failed`)); this.icon = this.toolTipBase .append('text') .attr('fill', 'white') @@ -77,13 +79,14 @@ class Tooltip { .attr('y', -21) .attr('font-size', 12) .attr('text-anchor', 'end') - .text('No Jobs'); + .text(this.i18n._(t`No Jobs`)); this.successful = this.toolTipBase .append('text') .attr('fill', 'white') .attr('font-size', 12) .attr('x', 122) .attr('y', 4) + .attr('id', 'successful-count') .text('0'); this.failed = this.toolTipBase .append('text') @@ -91,6 +94,7 @@ class Tooltip { .attr('font-size', 12) .attr('x', 122) .attr('y', 28) + .attr('id', 'failed-count') .text('0'); this.date = this.toolTipBase .append('text') @@ -99,7 +103,7 @@ class Tooltip { .attr('x', 20) .attr('y', -21) .attr('font-size', 12) - .text('Never'); + .text(this.i18n._(t`Never`)); } handleMouseOver = d => { diff --git a/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx b/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx index f72856bd45..d44ee4383a 100644 --- a/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx +++ b/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx @@ -57,14 +57,17 @@ function LineChart({ id, data, height, i18n, pageContext }) { .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) + // .attr('id', 'foo') .attr('z', 100) .append('g') + .attr('id', 'chart-container') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Tooltip const tooltip = new ChartTooltip({ svg: `#${id}`, colors, label: i18n._(t`Jobs`), + i18n, }); const parseTime = d3.timeParse('%Y-%m-%d'); @@ -216,6 +219,10 @@ function LineChart({ id, data, height, i18n, pageContext }) { .attr('stroke-width', 2) .attr('d', failLine) .call(transition); + + const dateFormat = d3.timeFormat('%-m/%-d'); + + // create our successLine circles svg .selectAll('dot') .data(formattedData) @@ -226,6 +233,7 @@ function LineChart({ id, data, height, i18n, pageContext }) { .style('fill', () => colors(1)) .attr('cx', d => x(d.DATE)) .attr('cy', d => y(d.RAN)) + .attr('id', d => `success-dot-${dateFormat(d.DATE)}`) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut); @@ -240,6 +248,7 @@ function LineChart({ id, data, height, i18n, pageContext }) { .style('fill', () => colors(0)) .attr('cx', d => x(d.DATE)) .attr('cy', d => y(d.FAIL)) + .attr('id', d => `success-dot-${dateFormat(d.DATE)}`) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut);