Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Replaces jQuery's $el.width() with element.clientWidth. #180523

Merged
merged 13 commits into from
Apr 23, 2024
Merged

[ML] Replaces jQuery's $el.width() with element.clientWidth. #180523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bb9943e
get rid of jquery
walterra Apr 10, 2024
23829d9
Merge branch 'main' into ml-remove-jquery
walterra Apr 11, 2024
c78f2d2
fix jest test
walterra Apr 11, 2024
10e967e
fix jest test
walterra Apr 11, 2024
b571284
fix jest test
walterra Apr 11, 2024
28a0e17
Merge branch 'main' into ml-remove-jquery
walterra Apr 22, 2024
c17b9eb
tweaks
walterra Apr 22, 2024
b4ce602
some console logs to track vars
walterra Apr 22, 2024
c5d8b9f
enable console logs just for debugging
walterra Apr 22, 2024
6eed44a
enable console logs just for debugging
walterra Apr 22, 2024
13af7d4
align chart test code
walterra Apr 22, 2024
874ff0f
fix assertions
walterra Apr 22, 2024
64a8ed7
remove console.logs
walterra Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .../plugins/ml/public/application/explorer/explorer_charts/__mocks__/mock_chart_data_rare.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@

export const chartData = [
{
date: 1487899800000,
date: 1709262000000,
entity: '200',
value: 1741.5652200000002,
},
{
date: 1487899800000,
date: 1709262000000,
entity: '404',
value: 494.30564000000004,
},
{
date: 1487899800000,
date: 1709262000000,
entity: '304',
value: 160.93672,
},
{
date: 1487899800000,
date: 1709262000000,
entity: '301',
value: 57.4774,
},
{
date: 1487837700000,
date: 1708668000000,
value: 42,
entity: '303',
anomalyScore: 84.08759,
Expand Down
8 changes: 4 additions & 4 deletions ...ins/ml/public/application/explorer/explorer_charts/__mocks__/mock_series_config_rare.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@
]
},
"loading": false,
"plotEarliest": 1487774250000,
"plotLatest": 1487900250000,
"selectedEarliest": 1487836800000,
"selectedLatest": 1487837699999,
"plotEarliest": 1708171200000,
"plotLatest": 1709294400000,
"selectedEarliest": 1708646400000,
"selectedLatest": 1708819200000,
"chartLimits": {
"max": 9294.095580000001,
"min": 5.74774
Expand Down
5 changes: 1 addition & 4 deletions x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
import React from 'react';

import d3 from 'd3';
import $ from 'jquery';
import moment from 'moment';

import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -117,14 +116,12 @@ export class ExplorerChartDistribution extends React.Component {
drawRareChart(filteredChartData);

function init({ chartData, functionDescription }) {
const $el = $('.ml-explorer-chart');

// Clear any existing elements from the visualization,
// then build the svg elements for the chart.
const chartElement = d3.select(element).select('.content-wrapper');
chartElement.select('svg').remove();

const svgWidth = $el.width();
const svgWidth = element.clientWidth;
const svgHeight = chartHeight + margin.top + margin.bottom;

const svg = chartElement
Expand Down
20 changes: 8 additions & 12 deletions ...lugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,6 @@ const utilityProps = {
},
};

const servicesMock = {
mlServices: {
mlFieldFormatService: {
getFieldFormat: jest.fn(),
},
},
};

describe('ExplorerChart', () => {
const mlSelectSeverityServiceMock = {
state: {
Expand All @@ -54,10 +46,11 @@ describe('ExplorerChart', () => {
};

const wrapper = mountWithIntl(
<KibanaContextProvider services={servicesMock}>
<KibanaContextProvider services={kibanaContextMock.services}>
<ExplorerChartDistribution
mlSelectSeverityService={mlSelectSeverityServiceMock}
tooltipService={mockTooltipService}
severity={0}
{...utilityProps}
/>
</KibanaContextProvider>
Expand All @@ -81,11 +74,12 @@ describe('ExplorerChart', () => {
};

const wrapper = mountWithIntl(
<KibanaContextProvider services={servicesMock}>
<KibanaContextProvider services={kibanaContextMock.services}>
<ExplorerChartDistribution
seriesConfig={config}
mlSelectSeverityService={mlSelectSeverityServiceMock}
tooltipService={mockTooltipService}
severity={0}
{...utilityProps}
/>
</KibanaContextProvider>
Expand All @@ -106,6 +100,7 @@ describe('ExplorerChart', () => {
const config = {
...seriesConfig,
chartData,
chartLimits: { min: 201039318, max: 625736376 },
};

const mockTooltipService = {
Expand All @@ -115,12 +110,13 @@ describe('ExplorerChart', () => {

// We create the element including a wrapper which sets the width:
return mountWithIntl(
<KibanaContextProvider services={servicesMock}>
<KibanaContextProvider services={kibanaContextMock.services}>
<div style={{ width: '500px' }}>
<ExplorerChartDistribution
seriesConfig={config}
mlSelectSeverityService={mlSelectSeverityServiceMock}
tooltipService={mockTooltipService}
severity={0}
{...utilityProps}
/>
</div>
Expand Down Expand Up @@ -156,7 +152,7 @@ describe('ExplorerChart', () => {
expect(+selectedInterval.getAttribute('height')).toBe(166);

const xAxisTicks = wrapper.getDOMNode().querySelector('.x').querySelectorAll('.tick');
expect([...xAxisTicks]).toHaveLength(1);
expect([...xAxisTicks]).toHaveLength(6);
const yAxisTicks = wrapper.getDOMNode().querySelector('.y').querySelectorAll('.tick');
expect([...yAxisTicks]).toHaveLength(5);
const emphasizedAxisLabel = wrapper
Expand Down
5 changes: 1 addition & 4 deletions ...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
import React from 'react';

import d3 from 'd3';
import $ from 'jquery';
import moment from 'moment';

import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -107,14 +106,12 @@ export class ExplorerChartSingleMetric extends React.Component {
drawLineChart(config.chartData);

function init(chartLimits) {
const $el = $('.ml-explorer-chart');

// Clear any existing elements from the visualization,
// then build the svg elements for the chart.
const chartElement = d3.select(element).select(`.${CONTENT_WRAPPER_CLASS}`);
chartElement.select('svg').remove();

const svgWidth = $el.width();
const svgWidth = element.clientWidth;
const svgHeight = chartHeight + margin.top + margin.bottom;

const svg = chartElement
Expand Down
4 changes: 2 additions & 2 deletions ...ugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ describe('ExplorerChart', () => {
expect(+selectedInterval.getAttribute('height')).toBe(166);

const xAxisTicks = wrapper.getDOMNode().querySelector('.x').querySelectorAll('.tick');
expect([...xAxisTicks]).toHaveLength(1);
expect([...xAxisTicks]).toHaveLength(8);
const yAxisTicks = wrapper.getDOMNode().querySelector('.y').querySelectorAll('.tick');
expect([...yAxisTicks]).toHaveLength(10);

Expand All @@ -161,7 +161,7 @@ describe('ExplorerChart', () => {
expect(paths[1].getAttribute('class')).toBe('domain');
expect(paths[2].getAttribute('class')).toBe('values-line');
expect(paths[2].getAttribute('d')).toBe(
'MNaN,159.33024504444444ZMNaN,9.166257955555556LNaN,169.60736875555557'
'M-19.090909090909093,159.33024504444444ZM-20,9.166257955555556L-20.22727272727273,169.60736875555557'
);

const dots = wrapper.getDOMNode().querySelector('.values-dots').querySelectorAll('circle');
Expand Down