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 5 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
5 changes: 5 additions & 0 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 @@ -46,6 +46,11 @@ describe('ExplorerChart', () => {
const originalGetBBox = SVGElement.prototype.getBBox;
beforeEach(() => (SVGElement.prototype.getBBox = () => mockedGetBBox));
afterEach(() => (SVGElement.prototype.getBBox = originalGetBBox));
// Returning undefined here just for the sake of consistent test results.
// jsdom doesn't have a layout engine so this is hard to test.
// If we pass some real px value here for yet unknown reasons we get different
// results on different environments.
jest.spyOn(Element.prototype, 'clientWidth', 'get').mockImplementation(() => undefined);

test('Initialize', () => {
const mockTooltipService = {
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