From 8dc4c23a89a803061b48ef4e40bb545843ea2f71 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 5 Jan 2022 11:08:13 +0000 Subject: [PATCH] Update dependency jquery to v3.6.0 (#43348) * Update dependency jquery to v3.6.0 * Handle type changes Co-authored-by: Renovate Bot Co-authored-by: Ashley Harrison --- package.json | 4 +- packages/grafana-data/package.json | 2 +- packages/grafana-ui/package.json | 4 +- .../app/plugins/panel/heatmap/color_legend.ts | 221 ++++++++++-------- yarn.lock | 25 +- 5 files changed, 139 insertions(+), 117 deletions(-) diff --git a/package.json b/package.json index aa3c8d22061..ebebcdb541a 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "@types/history": "^4.7.8", "@types/hoist-non-react-statics": "3.3.1", "@types/jest": "27.4.0", - "@types/jquery": "3.3.38", + "@types/jquery": "3.5.11", "@types/jsurl": "^1.2.28", "@types/lingui__macro": "^3", "@types/lodash": "4.14.149", @@ -296,7 +296,7 @@ "hoist-non-react-statics": "3.3.2", "immer": "9.0.6", "immutable": "4.0.0", - "jquery": "3.5.1", + "jquery": "3.6.0", "json-source-map": "0.6.1", "jsurl": "^0.1.5", "lezer": "0.13.5", diff --git a/packages/grafana-data/package.json b/packages/grafana-data/package.json index f9d0915ed39..e01b88fdc3d 100644 --- a/packages/grafana-data/package.json +++ b/packages/grafana-data/package.json @@ -54,7 +54,7 @@ "@testing-library/user-event": "13.5.0", "@types/braintree__sanitize-url": "4.1.0", "@types/jest": "27.4.0", - "@types/jquery": "3.3.38", + "@types/jquery": "3.5.11", "@types/lodash": "4.14.123", "@types/marked": "4.0.0", "@types/node": "16.11.6", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 6b488ce40a7..50893e750de 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -55,7 +55,7 @@ "hoist-non-react-statics": "3.3.2", "immutable": "4.0.0", "is-hotkey": "0.2.0", - "jquery": "3.5.1", + "jquery": "3.6.0", "lodash": "4.17.21", "memoize-one": "6.0.0", "moment": "2.29.1", @@ -128,7 +128,7 @@ "@types/hoist-non-react-statics": "3.3.1", "@types/is-hotkey": "0.1.1", "@types/jest": "27.4.0", - "@types/jquery": "3.3.38", + "@types/jquery": "3.5.11", "@types/lodash": "4.14.123", "@types/mock-raf": "1.0.2", "@types/node": "16.11.6", diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts index e331a742a0f..bb8c3fa99d1 100644 --- a/public/app/plugins/panel/heatmap/color_legend.ts +++ b/public/app/plugins/panel/heatmap/color_legend.ts @@ -100,33 +100,36 @@ function drawColorLegend( minValue: number ) { const legendElem = $(elem).find('svg'); - const legend = d3.select(legendElem.get(0)); - clearLegend(elem); + const legendDomElement = legendElem.get(0); + if (legendDomElement) { + const legend = d3.select(legendDomElement); + clearLegend(elem); - const legendWidth = Math.floor(legendElem.outerWidth() ?? 10) - 30; - const legendHeight = legendElem.attr('height') as any; + const legendWidth = Math.floor(legendElem.outerWidth() ?? 10) - 30; + const legendHeight = legendElem.attr('height') as any; - const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH; - const widthFactor = legendWidth / (rangeTo - rangeFrom); - const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); + const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH; + const widthFactor = legendWidth / (rangeTo - rangeFrom); + const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); - const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, rangeTo, rangeFrom); - legend - .append('g') - .attr('class', 'legend-color-bar') - .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)') - .selectAll('.heatmap-color-legend-rect') - .data(valuesRange) - .enter() - .append('rect') - .attr('x', (d) => Math.round((d - rangeFrom) * widthFactor)) - .attr('y', 0) - .attr('width', Math.round(rangeStep * widthFactor + 1)) // Overlap rectangles to prevent gaps - .attr('height', legendHeight) - .attr('stroke-width', 0) - .attr('fill', (d) => colorScale(d)); + const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, rangeTo, rangeFrom); + legend + .append('g') + .attr('class', 'legend-color-bar') + .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)') + .selectAll('.heatmap-color-legend-rect') + .data(valuesRange) + .enter() + .append('rect') + .attr('x', (d) => Math.round((d - rangeFrom) * widthFactor)) + .attr('y', 0) + .attr('width', Math.round(rangeStep * widthFactor + 1)) // Overlap rectangles to prevent gaps + .attr('height', legendHeight) + .attr('stroke-width', 0) + .attr('fill', (d) => colorScale(d)); - drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange); + drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange); + } } function drawOpacityLegend( @@ -138,34 +141,37 @@ function drawOpacityLegend( minValue: number ) { const legendElem = $(elem).find('svg'); - const legend = d3.select(legendElem.get(0)); - clearLegend(elem); + const legendDomElement = legendElem.get(0); + if (legendDomElement) { + const legend = d3.select(legendDomElement); + clearLegend(elem); - const legendWidth = Math.floor(legendElem.outerWidth() ?? 30) - 30; - const legendHeight = legendElem.attr('height') as any; + const legendWidth = Math.floor(legendElem.outerWidth() ?? 30) - 30; + const legendHeight = legendElem.attr('height') as any; - const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH; - const widthFactor = legendWidth / (rangeTo - rangeFrom); - const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); + const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH; + const widthFactor = legendWidth / (rangeTo - rangeFrom); + const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep); - const opacityScale = getOpacityScale(options, rangeTo, rangeFrom); - legend - .append('g') - .attr('class', 'legend-color-bar') - .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)') - .selectAll('.heatmap-opacity-legend-rect') - .data(valuesRange) - .enter() - .append('rect') - .attr('x', (d) => Math.round((d - rangeFrom) * widthFactor)) - .attr('y', 0) - .attr('width', Math.round(rangeStep * widthFactor)) - .attr('height', legendHeight) - .attr('stroke-width', 0) - .attr('fill', options.cardColor) - .style('opacity', (d) => opacityScale(d)); + const opacityScale = getOpacityScale(options, rangeTo, rangeFrom); + legend + .append('g') + .attr('class', 'legend-color-bar') + .attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)') + .selectAll('.heatmap-opacity-legend-rect') + .data(valuesRange) + .enter() + .append('rect') + .attr('x', (d) => Math.round((d - rangeFrom) * widthFactor)) + .attr('y', 0) + .attr('width', Math.round(rangeStep * widthFactor)) + .attr('height', legendHeight) + .attr('stroke-width', 0) + .attr('fill', options.cardColor) + .style('opacity', (d) => opacityScale(d)); - drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange); + drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange); + } } function drawLegendValues( @@ -178,28 +184,31 @@ function drawLegendValues( valuesRange: number[] ) { const legendElem = $(elem).find('svg'); - const legend = d3.select(legendElem.get(0)); + const legendDomElement = legendElem.get(0); + if (legendDomElement) { + const legend = d3.select(legendDomElement); - if (legendWidth <= 0 || legendElem.get(0).childNodes.length === 0) { - return; + if (legendWidth <= 0 || legendDomElement.childNodes.length === 0) { + return; + } + + const legendValueScale = d3.scaleLinear().domain([rangeFrom, rangeTo]).range([0, legendWidth]); + + const ticks = buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue); + const xAxis = d3.axisBottom(legendValueScale).tickValues(ticks).tickSize(LEGEND_TICK_SIZE); + + const colorRect = legendElem.find(':first-child'); + const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN; + const posX = getSvgElemX(colorRect) + LEGEND_PADDING_LEFT; + + d3.select(legendDomElement) + .append('g') + .attr('class', 'axis') + .attr('transform', 'translate(' + posX + ',' + posY + ')') + .call(xAxis); + + legend.select('.axis').select('.domain').remove(); } - - const legendValueScale = d3.scaleLinear().domain([rangeFrom, rangeTo]).range([0, legendWidth]); - - const ticks = buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue); - const xAxis = d3.axisBottom(legendValueScale).tickValues(ticks).tickSize(LEGEND_TICK_SIZE); - - const colorRect = legendElem.find(':first-child'); - const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN; - const posX = getSvgElemX(colorRect) + LEGEND_PADDING_LEFT; - - d3.select(legendElem.get(0)) - .append('g') - .attr('class', 'axis') - .attr('transform', 'translate(' + posX + ',' + posY + ')') - .call(xAxis); - - legend.select('.axis').select('.domain').remove(); } function drawSimpleColorLegend(elem: JQuery, colorScale: any) { @@ -214,51 +223,57 @@ function drawSimpleColorLegend(elem: JQuery, colorScale: any) { const rangeStep = Math.floor(legendWidth / valuesNumber); const valuesRange = d3.range(0, legendWidth, rangeStep); - const legend = d3.select(legendElem.get(0)); - const legendRects = legend.selectAll('.heatmap-color-legend-rect').data(valuesRange); + const legendDomElement = legendElem.get(0); + if (legendDomElement) { + const legend = d3.select(legendDomElement); + const legendRects = legend.selectAll('.heatmap-color-legend-rect').data(valuesRange); - legendRects - .enter() - .append('rect') - .attr('x', (d) => d) - .attr('y', 0) - .attr('width', rangeStep + 1) // Overlap rectangles to prevent gaps - .attr('height', legendHeight) - .attr('stroke-width', 0) - .attr('fill', (d) => colorScale(d)); + legendRects + .enter() + .append('rect') + .attr('x', (d) => d) + .attr('y', 0) + .attr('width', rangeStep + 1) // Overlap rectangles to prevent gaps + .attr('height', legendHeight) + .attr('stroke-width', 0) + .attr('fill', (d) => colorScale(d)); + } } } function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; exponent: number; cardColor: string }) { const legendElem = $(elem).find('svg'); - clearLegend(elem); + const legendDomElement = legendElem.get(0); + if (legendDomElement) { + clearLegend(elem); - const legend = d3.select(legendElem.get(0)); - const legendWidth = Math.floor(legendElem.outerWidth() ?? 30); - const legendHeight = legendElem.attr('height') as any; + const legend = d3.select(legendDomElement); + const legendWidth = Math.floor(legendElem.outerWidth() ?? 30); + const legendHeight = legendElem.attr('height') as any; - if (legendWidth) { - let legendOpacityScale: any; - if (options.colorScale === 'linear') { - legendOpacityScale = d3.scaleLinear().domain([0, legendWidth]).range([0, 1]); - } else if (options.colorScale === 'sqrt') { - legendOpacityScale = d3.scalePow().exponent(options.exponent).domain([0, legendWidth]).range([0, 1]); + if (legendWidth) { + let legendOpacityScale: any; + if (options.colorScale === 'linear') { + legendOpacityScale = d3.scaleLinear().domain([0, legendWidth]).range([0, 1]); + } else if (options.colorScale === 'sqrt') { + legendOpacityScale = d3.scalePow().exponent(options.exponent).domain([0, legendWidth]).range([0, 1]); + } + + const rangeStep = 10; + const valuesRange = d3.range(0, legendWidth, rangeStep); + const legendRects = legend.selectAll('.heatmap-opacity-legend-rect').data(valuesRange); + + legendRects + .enter() + .append('rect') + .attr('x', (d) => d) + .attr('y', 0) + .attr('width', rangeStep) + .attr('height', legendHeight) + .attr('stroke-width', 0) + .attr('fill', getColorForTheme(options.cardColor, config.theme)) + .style('opacity', (d) => legendOpacityScale(d)); } - - const rangeStep = 10; - const valuesRange = d3.range(0, legendWidth, rangeStep); - const legendRects = legend.selectAll('.heatmap-opacity-legend-rect').data(valuesRange); - - legendRects - .enter() - .append('rect') - .attr('x', (d) => d) - .attr('y', 0) - .attr('width', rangeStep) - .attr('height', legendHeight) - .attr('stroke-width', 0) - .attr('fill', getColorForTheme(options.cardColor, config.theme)) - .style('opacity', (d) => legendOpacityScale(d)); } } diff --git a/yarn.lock b/yarn.lock index ed5efebe663..1e1bc3922f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3441,7 +3441,7 @@ __metadata: "@types/braintree__sanitize-url": 4.1.0 "@types/d3-interpolate": ^1.4.0 "@types/jest": 27.4.0 - "@types/jquery": 3.3.38 + "@types/jquery": 3.5.11 "@types/lodash": 4.14.123 "@types/marked": 4.0.0 "@types/node": 16.11.6 @@ -3797,7 +3797,7 @@ __metadata: "@types/hoist-non-react-statics": 3.3.1 "@types/is-hotkey": 0.1.1 "@types/jest": 27.4.0 - "@types/jquery": 3.3.38 + "@types/jquery": 3.5.11 "@types/lodash": 4.14.123 "@types/mock-raf": 1.0.2 "@types/node": 16.11.6 @@ -3837,7 +3837,7 @@ __metadata: hoist-non-react-statics: 3.3.2 immutable: 4.0.0 is-hotkey: 0.2.0 - jquery: 3.5.1 + jquery: 3.6.0 lodash: 4.17.21 memoize-one: 6.0.0 mock-raf: 1.0.1 @@ -9368,12 +9368,12 @@ __metadata: languageName: node linkType: hard -"@types/jquery@npm:3.3.38": - version: 3.3.38 - resolution: "@types/jquery@npm:3.3.38" +"@types/jquery@npm:3.5.11": + version: 3.5.11 + resolution: "@types/jquery@npm:3.5.11" dependencies: "@types/sizzle": "*" - checksum: 1d15653cf0f9a06587ddddc46a55bcc439f3fbba3d39c91255694f05f551d857c31e9008c791f23f87abddce22fbd9d59901ad99ed0bef5dd70d99858f14ddd4 + checksum: bad7c4495ade39e712462af534169790115d07874bb1a8c43a597676bd4e4d62caaf961353836f1e9f67309cac3a224b8743da07bad4cb2ff853b93f1856014b languageName: node linkType: hard @@ -19504,7 +19504,7 @@ __metadata: "@types/history": ^4.7.8 "@types/hoist-non-react-statics": 3.3.1 "@types/jest": 27.4.0 - "@types/jquery": 3.3.38 + "@types/jquery": 3.5.11 "@types/jsurl": ^1.2.28 "@types/lingui__macro": ^3 "@types/lodash": 4.14.149 @@ -19614,7 +19614,7 @@ __metadata: jest-date-mock: 1.0.8 jest-junit: 13.0.0 jest-matcher-utils: 27.4.2 - jquery: 3.5.1 + jquery: 3.6.0 json-source-map: 0.6.1 jsurl: ^0.1.5 lerna: ^4.0.0 @@ -23090,6 +23090,13 @@ __metadata: languageName: node linkType: hard +"jquery@npm:3.6.0": + version: 3.6.0 + resolution: "jquery@npm:3.6.0" + checksum: 8fd5fef4aa48fd374ec716dd1c1df1af407814a228e15c1260ca140de3a697c2a77c30c54ff1d238b6a3ab4ddc445ddeef9adce6c6d28e4869d85eb9d3951c0e + languageName: node + linkType: hard + "js-cookie@npm:^2.2.1": version: 2.2.1 resolution: "js-cookie@npm:2.2.1"