From b028d1257772aa8c1d73b316a9bddfd7e9c6c00b Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Tue, 20 Jun 2023 18:03:56 -0700 Subject: [PATCH] Upgrading chartjs to 4.3 and removing ng2-charts from modelview (#23398) * Upgrading chartjs * Upgrading charjs in exthost and removing ng2-charts * Updating lock file * Fixing paths in workbench for new chartjs * Removing more any * Removing more any * Fixing colors * Fixing more stuff * Updating distro hash --- package.json | 8 +- remote/package.json | 5 +- remote/web/package.json | 5 +- remote/web/yarn.lock | 50 +++----- remote/yarn.lock | 50 +++----- .../dashboard/browser/insightRegistry.ts | 4 +- .../contrib/charts/browser/graphInsight.ts | 99 ++++++++------- .../contrib/charts/common/interfaces.ts | 21 ++++ .../dashboard/browser/dashboard.module.ts | 2 - .../views/charts/chartInsight.component.html | 4 + .../views/charts/chartInsight.component.ts | 113 ++++++++++-------- .../views/charts/types/barChart.component.ts | 89 +++++++------- .../types/horizontalBarChart.component.ts | 15 ++- .../views/charts/types/lineChart.component.ts | 31 +++-- .../charts/types/timeSeriesChart.component.ts | 27 ++--- .../code/browser/workbench/workbench-dev.html | 5 +- src/vs/code/browser/workbench/workbench.html | 3 +- yarn.lock | 48 +++----- 18 files changed, 288 insertions(+), 291 deletions(-) create mode 100644 src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.html diff --git a/package.json b/package.json index c679512944..da357c30c9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "azuredatastudio", "version": "1.45.0", - "distro": "0b0260ce742552bb22069e74d4bfc54e6b4bd29f", + "distro": "90d90d3d534cc89532292bc23b38cdbc5c3f7a5c", "author": { "name": "Microsoft Corporation" }, @@ -81,7 +81,8 @@ "ansi_up": "^5.1.0", "applicationinsights": "1.4.2", "azdataGraph": "github:Microsoft/azdataGraph#0.0.58", - "chart.js": "^2.9.4", + "chart.js": "^4.3.0", + "chartjs-adapter-moment": "^1.0.1", "chokidar": "3.5.1", "graceful-fs": "4.2.8", "gridstack": "^3.1.3", @@ -93,10 +94,10 @@ "keytar": "7.9.0", "mark.js": "^8.11.1", "minimist": "^1.2.6", + "moment": "^2.29.4", "native-is-elevated": "0.4.3", "native-keymap": "3.3.0", "native-watchdog": "1.4.0", - "ng2-charts": "^1.6.0", "node-pty": "0.11.0-beta11", "plotly.js-dist-min": "^1.53.0", "reflect-metadata": "^0.1.8", @@ -128,7 +129,6 @@ "7zip": "0.0.6", "@playwright/test": "1.26.0", "@types/applicationinsights": "0.20.0", - "@types/chart.js": "2.9.4", "@types/cookie": "^0.3.3", "@types/copy-webpack-plugin": "^6.0.3", "@types/cssnano": "^4.0.0", diff --git a/remote/package.json b/remote/package.json index 51d4337d86..2ed548d74d 100755 --- a/remote/package.json +++ b/remote/package.json @@ -21,7 +21,8 @@ "angular2-grid": "2.0.6", "ansi_up": "^5.1.0", "azdataGraph": "github:Microsoft/azdataGraph#0.0.58", - "chart.js": "^2.9.4", + "chart.js": "^4.3.0", + "chartjs-adapter-moment": "^1.0.1", "cookie": "^0.4.0", "graceful-fs": "4.2.8", "gridstack": "^3.1.3", @@ -33,8 +34,8 @@ "keytar": "7.9.0", "mark.js": "^8.11.1", "minimist": "^1.2.6", + "moment": "^2.29.4", "native-watchdog": "1.4.0", - "ng2-charts": "^1.6.0", "node-pty": "0.11.0-beta11", "plotly.js-dist-min": "^1.53.0", "reflect-metadata": "^0.1.8", diff --git a/remote/web/package.json b/remote/web/package.json index f1b07fbf72..d20d897b96 100755 --- a/remote/web/package.json +++ b/remote/web/package.json @@ -18,13 +18,14 @@ "angular2-grid": "2.0.6", "ansi_up": "^5.1.0", "azdataGraph": "github:Microsoft/azdataGraph#0.0.58", - "chart.js": "^2.9.4", + "chart.js": "^4.3.0", + "chartjs-adapter-moment": "^1.0.1", "gridstack": "^3.1.3", "html-to-image": "^1.6.2", "jquery": "3.5.0", "jschardet": "3.0.0", "mark.js": "^8.11.1", - "ng2-charts": "^1.6.0", + "moment": "^2.29.4", "plotly.js-dist-min": "^1.53.0", "reflect-metadata": "^0.1.8", "rxjs": "5.4.0", diff --git a/remote/web/yarn.lock b/remote/web/yarn.lock index 804792c54d..cbe4f90b65 100644 --- a/remote/web/yarn.lock +++ b/remote/web/yarn.lock @@ -42,6 +42,11 @@ resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.1.3.tgz#ddafd46ae7ccc8b1f74904ffb45f394e44625216" integrity sha512-i+1GMIvfM3OC6XX2kZf+tL36Nc4jhcMNOY6bOrmwlN8APl59I9KqdvywC5HnutkDctb8expiWTIuSKZQAc4AIA== +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2": version "3.2.9" resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e" @@ -123,30 +128,19 @@ chalk@^2.3.0, chalk@^2.4.1: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chart.js@^2.6.0, chart.js@^2.9.4: - version "2.9.4" - resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" - integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== +chart.js@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1" + integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g== dependencies: - chartjs-color "^2.1.0" - moment "^2.10.2" + "@kurkle/color" "^0.3.0" -chartjs-color-string@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" - integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== - dependencies: - color-name "^1.0.0" +chartjs-adapter-moment@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102" + integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA== -chartjs-color@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" - integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== - dependencies: - chartjs-color-string "^0.6.0" - color-convert "^1.9.3" - -color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -158,11 +152,6 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@^1.0.0: - version "1.1.4" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" - integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== - dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -288,18 +277,11 @@ mark.js@^8.11.1: resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5" integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ== -moment@^2.10.2: +moment@^2.29.4: version "2.29.4" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== -ng2-charts@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d" - integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg== - dependencies: - chart.js "^2.6.0" - number-is-nan@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" diff --git a/remote/yarn.lock b/remote/yarn.lock index ab7aed8c7a..584c7c3c63 100644 --- a/remote/yarn.lock +++ b/remote/yarn.lock @@ -42,6 +42,11 @@ resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.1.3.tgz#ddafd46ae7ccc8b1f74904ffb45f394e44625216" integrity sha512-i+1GMIvfM3OC6XX2kZf+tL36Nc4jhcMNOY6bOrmwlN8APl59I9KqdvywC5HnutkDctb8expiWTIuSKZQAc4AIA== +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2": version "3.2.9" resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e" @@ -220,28 +225,17 @@ chalk@^2.3.0, chalk@^2.4.1: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chart.js@^2.6.0, chart.js@^2.9.4: - version "2.9.4" - resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" - integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== +chart.js@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1" + integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g== dependencies: - chartjs-color "^2.1.0" - moment "^2.10.2" + "@kurkle/color" "^0.3.0" -chartjs-color-string@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" - integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== - dependencies: - color-name "^1.0.0" - -chartjs-color@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" - integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== - dependencies: - chartjs-color-string "^0.6.0" - color-convert "^1.9.3" +chartjs-adapter-moment@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102" + integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA== chownr@^1.1.1: version "1.1.4" @@ -257,7 +251,7 @@ cls-hooked@^4.2.2: emitter-listener "^1.0.1" semver "^5.4.1" -color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -269,11 +263,6 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@^1.0.0: - version "1.1.4" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" - integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== - continuation-local-storage@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/continuation-local-storage/-/continuation-local-storage-3.2.1.tgz#11f613f74e914fe9b34c92ad2d28fe6ae1db7ffb" @@ -572,7 +561,7 @@ mkdirp@^0.5.5: dependencies: minimist "^1.2.6" -moment@^2.10.2: +moment@^2.29.4: version "2.29.4" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== @@ -597,13 +586,6 @@ native-watchdog@1.4.0: resolved "https://registry.yarnpkg.com/native-watchdog/-/native-watchdog-1.4.0.tgz#547a1f9f88754c38089c622d405ed1e324c7a545" integrity sha512-4FynAeGtTpoQ2+5AxVJXGEGsOzPsNYDh8Xmawjgs7YWJe+bbbgt7CYlA/Qx6X+kwtN5Ey1aNSm9MqZa0iNKkGw== -ng2-charts@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d" - integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg== - dependencies: - chart.js "^2.6.0" - node-abi@^3.3.0: version "3.33.0" resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.33.0.tgz#8b23a0cec84e1c5f5411836de6a9b84bccf26e7f" diff --git a/src/sql/platform/dashboard/browser/insightRegistry.ts b/src/sql/platform/dashboard/browser/insightRegistry.ts index 1183c90e4e..c3ea257adb 100644 --- a/src/sql/platform/dashboard/browser/insightRegistry.ts +++ b/src/sql/platform/dashboard/browser/insightRegistry.ts @@ -16,8 +16,8 @@ export const Extensions = { }; export interface IInsightData { - columns: Array; - rows: Array>; + columns: string[]; + rows: string[][]; } export interface IInsightsView { diff --git a/src/sql/workbench/contrib/charts/browser/graphInsight.ts b/src/sql/workbench/contrib/charts/browser/graphInsight.ts index 1b582f07b7..dd91036838 100644 --- a/src/sql/workbench/contrib/charts/browser/graphInsight.ts +++ b/src/sql/workbench/contrib/charts/browser/graphInsight.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as chartjs from 'chart.js'; +import 'chartjs-adapter-moment'; // Importing this library as datetime adapters are not included in the main chart.js bundle. import { mixin } from 'sql/base/common/objects'; import { localize } from 'vs/nls'; @@ -11,8 +12,8 @@ import * as colors from 'vs/platform/theme/common/colorRegistry'; import { editorLineNumbers } from 'vs/editor/common/core/editorColorRegistry'; import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService'; -import { IInsight, IPointDataSet, customMixin } from './interfaces'; -import { IInsightOptions, DataDirection, ChartType, LegendPosition, DataType } from 'sql/workbench/contrib/charts/common/interfaces'; +import { IInsight, customMixin } from './interfaces'; +import { IInsightOptions, DataDirection, ChartType, LegendPosition, DataType, ChartTypeToChartJsType, LegendPositionToChartJsPosition } from 'sql/workbench/contrib/charts/common/interfaces'; import { values } from 'vs/base/common/collections'; import { IInsightData } from 'sql/platform/dashboard/browser/insightRegistry'; @@ -20,7 +21,7 @@ const noneLineGraphs = [ChartType.Doughnut, ChartType.Pie]; const timeSeriesScales: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { type: 'time', display: true, ticks: { @@ -28,11 +29,10 @@ const timeSeriesScales: chartjs.ChartOptions = { maxRotation: 45, minRotation: 45 } - }], - - yAxes: [{ + }, + y: { display: true, - }] + } } }; @@ -44,7 +44,7 @@ const defaultOptions: IInsightOptions = { export class Graph implements IInsight { private _options: IInsightOptions = { type: ChartType.Bar }; private canvas: HTMLCanvasElement; - private chartjs?: chartjs; + private chartjs?: chartjs.Chart; private _data?: IInsightData; private originalType?: ChartType; @@ -58,6 +58,10 @@ export class Graph implements IInsight { container: HTMLElement, options: IInsightOptions = defaultOptions, @IThemeService themeService: IThemeService ) { + + chartjs.Chart.register( + ...chartjs.registerables, + ); this._theme = themeService.getColorTheme(); themeService.onDidColorThemeChange(e => { this._theme = e; @@ -94,8 +98,8 @@ export class Graph implements IInsight { return; } this._data = data; - let labels: Array; - let chartData: Array; + let labels: string[]; + let chartData: chartjs.ChartDataset[]; if (this.options.dataDirection === DataDirection.Horizontal) { if (this.options.labelFirstColumn) { @@ -108,14 +112,16 @@ export class Graph implements IInsight { } if (this.originalType === ChartType.TimeSeries) { - let dataSetMap: { [label: string]: IPointDataSet } = {}; + let dataSetMap: { [label: string]: chartjs.ChartDataset<'line', any[]> } = {}; this._data.rows.map(row => { if (row && row.length >= 3) { let legend = row[0]; + const dataPoint = { x: row[1], y: Number(row[2]) }; if (!dataSetMap[legend]) { - dataSetMap[legend] = { label: legend, data: [], fill: false }; + dataSetMap[legend] = { label: legend, data: [dataPoint] }; + } else { + dataSetMap[legend].data.push((dataPoint)); } - dataSetMap[legend].data.push({ x: row[1], y: Number(row[2]) }); } }); chartData = values(dataSetMap); @@ -159,13 +165,18 @@ export class Graph implements IInsight { return mixin(c, getColors(this.options.type, i, c.data!.length), false); }); + if (this.options.type === 'horizontalBar') { + this.options.type = ChartType.Bar; + this.options.indexAxis = 'y'; + } if (this.chartjs) { this.chartjs.data.datasets = chartData; - this.chartjs.config.type = this.options.type; + (this.chartjs.config).type = ChartTypeToChartJsType[this.options.type] // we don't want to include lables for timeSeries this.chartjs.data.labels = this.originalType === 'timeSeries' ? [] : labels; this.chartjs.options = this.transformOptions(this.options); - this.chartjs.update({ duration: 0 }); + + this.chartjs.update(); } else { this.chartjs = new chartjs.Chart(this.canvas.getContext('2d')!, { data: { @@ -173,14 +184,14 @@ export class Graph implements IInsight { labels: this.originalType === 'timeSeries' ? [] : labels, datasets: chartData }, - type: this.options.type, + type: ChartTypeToChartJsType[this.options.type], options: this.transformOptions(this.options) }); } } - private transformOptions(options: IInsightOptions): Chart.ChartOptions { - let retval: Chart.ChartOptions = {}; + private transformOptions(options: IInsightOptions): chartjs.ChartOptions { + let retval: chartjs.ChartOptions = {}; retval.maintainAspectRatio = false; let foregroundColor = this._theme.getColor(colors.editorForeground); @@ -194,19 +205,19 @@ export class Graph implements IInsight { retval.scales = {}; // we only want to include axis if it is a axis based graph type if (!noneLineGraphs.find(x => x === options.type as ChartType)) { - retval.scales.xAxes = [{ - scaleLabel: { - fontColor: foreground, - labelString: options.xAxisLabel, - display: options.xAxisLabel ? true : false - }, + retval.scales.x = { ticks: { - fontColor: foreground + color: foreground, }, - gridLines: { + grid: { color: gridLines + }, + title: { + color: foreground, + text: options.xAxisLabel, + display: options.xAxisLabel ? true : false } - }]; + }; if (options.xAxisMax !== undefined) { retval.scales = mixin(retval.scales, { xAxes: [{ ticks: { max: options.xAxisMax } }] }, true, customMixin); @@ -216,19 +227,19 @@ export class Graph implements IInsight { retval.scales = mixin(retval.scales, { xAxes: [{ ticks: { min: options.xAxisMin } }] }, true, customMixin); } - retval.scales!.yAxes = [{ - scaleLabel: { - fontColor: foreground, - labelString: options.yAxisLabel, - display: options.yAxisLabel ? true : false - }, + retval.scales.y = { ticks: { - fontColor: foreground + color: foreground }, - gridLines: { + grid: { color: gridLines + }, + title: { + color: foreground, + text: options.yAxisLabel, + display: options.yAxisLabel ? true : false } - }]; + }; if (options.yAxisMax !== undefined) { retval.scales = mixin(retval.scales, { yAxes: [{ ticks: { max: options.yAxisMax } }] }, true, customMixin); @@ -266,13 +277,19 @@ export class Graph implements IInsight { } } - retval.legend = { - position: options.legendPosition as Chart.PositionType, - display: options.legendPosition !== LegendPosition.None, - labels: { - fontColor: foreground + retval.plugins = { + legend: { + position: LegendPositionToChartJsPosition[options.legendPosition], + display: options.legendPosition !== LegendPosition.None, + labels: { + color: foreground + } } }; + + if (options.indexAxis === 'y') { + retval.indexAxis = 'y'; + } } // these are custom options that will throw compile errors diff --git a/src/sql/workbench/contrib/charts/common/interfaces.ts b/src/sql/workbench/contrib/charts/common/interfaces.ts index c25eba8312..da4d4de1c7 100644 --- a/src/sql/workbench/contrib/charts/common/interfaces.ts +++ b/src/sql/workbench/contrib/charts/common/interfaces.ts @@ -3,6 +3,8 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import * as chartjs from 'chart.js'; + export interface IInsightOptions { type: InsightType | ChartType; dataDirection?: DataDirection; @@ -18,6 +20,7 @@ export interface IInsightOptions { xAxisMax?: number; encoding?: string; imageFormat?: string; + indexAxis?: string; } export enum InsightType { @@ -36,6 +39,16 @@ export enum ChartType { Scatter = 'scatter' } +export const ChartTypeToChartJsType: { [key in ChartType]: chartjs.ChartType } = { + 'bar': 'bar', + 'doughnut': 'doughnut', + 'horizontalBar': 'bar', + 'line': 'line', + 'pie': 'pie', + 'timeSeries': 'line', + 'scatter': 'scatter' +} + export enum LegendPosition { Top = 'top', Bottom = 'bottom', @@ -44,6 +57,14 @@ export enum LegendPosition { None = 'none' } +export const LegendPositionToChartJsPosition: { [key in LegendPosition]: chartjs.LayoutPosition } = { + 'top': 'top', + 'bottom': 'bottom', + 'left': 'left', + 'right': 'right', + 'none': 'left' // chart.js doesn't have a 'none' option, so we use 'left' and then hide the legend +} + export enum DataType { Number = 'number', Point = 'point' diff --git a/src/sql/workbench/contrib/dashboard/browser/dashboard.module.ts b/src/sql/workbench/contrib/dashboard/browser/dashboard.module.ts index 5290fd0ba3..79f1ca0bd1 100644 --- a/src/sql/workbench/contrib/dashboard/browser/dashboard.module.ts +++ b/src/sql/workbench/contrib/dashboard/browser/dashboard.module.ts @@ -9,7 +9,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes, UrlSerializer, Router, NavigationEnd } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { NgGridModule } from 'angular2-grid'; -import { ChartsModule } from 'ng2-charts'; import CustomUrlSerializer from 'sql/base/browser/urlSerializer'; import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/browser/insightRegistry'; @@ -140,7 +139,6 @@ export const DashboardModule = (params, selector: string, instantiationService: BrowserModule, FormsModule, NgGridModule, - ChartsModule, RouterModule.forRoot(appRoutes), PanelModule, ScrollableModule, diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.html b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.html new file mode 100644 index 0000000000..4f514ceadd --- /dev/null +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.html @@ -0,0 +1,4 @@ +
+
+
{{CHART_ERROR_MESSAGE}}
+
diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.ts index ffb72a90da..500f29e5ba 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component.ts @@ -3,43 +3,35 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ViewChild } from '@angular/core'; -import { BaseChartDirective } from 'ng2-charts'; + +import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ViewChild, ElementRef } from '@angular/core'; import * as chartjs from 'chart.js'; import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys'; import { mixin } from 'sql/base/common/objects'; -import { defaultChartConfig, IChartConfig, IDataSet } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; +import { defaultChartConfig, IChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; import * as colors from 'vs/platform/theme/common/colorRegistry'; import * as types from 'vs/base/common/types'; import { Disposable } from 'vs/base/common/lifecycle'; import * as nls from 'vs/nls'; import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService'; -import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces'; import { IInsightsView, IInsightData } from 'sql/platform/dashboard/browser/insightRegistry'; -import { ChartType, LegendPosition } from 'sql/workbench/contrib/charts/common/interfaces'; +import { ChartType, ChartTypeToChartJsType, LegendPosition } from 'sql/workbench/contrib/charts/common/interfaces'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; @Component({ - template: `
- -
{{CHART_ERROR_MESSAGE}}
-
` + templateUrl: decodeURI(require.toUrl('./chartInsight.component.html')) }) export abstract class ChartInsight extends Disposable implements IInsightsView { private _isDataAvailable: boolean = false; protected _hasInit: boolean = false; protected _hasError: boolean = false; - private _options: any = {}; + private _options: chartjs.ChartOptions = {}; + private _chart: chartjs.Chart; + private _chartCanvas: HTMLCanvasElement; - @ViewChild(BaseChartDirective) private _chart: BaseChartDirective; + @ViewChild('chartContainer') private _chartContainer: ElementRef; protected _defaultConfig = defaultChartConfig; protected _config: IChartConfig; @@ -55,6 +47,10 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { @Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService ) { super(); + chartjs.Chart.register( + ...chartjs.registerables, + ); + chartjs.Chart.register(chartjs.Colors); } init() { @@ -73,6 +69,20 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { this._hasError = true; this._changeRef.detectChanges(); } + this._chartCanvas = document.createElement('canvas'); + this._chartContainer.nativeElement.appendChild(this._chartCanvas); + this._chartCanvas.style.width = '100%'; + this._chartCanvas.style.height = '100%'; + this._chart = new chartjs.Chart(this._chartCanvas, { + type: ChartTypeToChartJsType[this.chartType], + data: { + labels: this.labels, + datasets: this.chartData, + }, + options: this.options + }); + this.refresh(); + this._telemetryService.createActionEvent(TelemetryKeys.TelemetryView.Shell, TelemetryKeys.TelemetryAction.ChartCreated) .withAdditionalProperties({ type: this.chartType }) .send(); @@ -81,7 +91,7 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { /** * Sets the options for the chart; handles rerendering the chart if needed */ - public set options(options: any) { + public set options(options: chartjs.ChartOptions) { this._options = options; if (this._isDataAvailable) { this._options = mixin({}, mixin(this._options, { animation: { duration: 0 } })); @@ -89,24 +99,20 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { } } - public get options(): any { + public get options(): chartjs.ChartOptions { return this._options; } protected updateTheme(e: IColorTheme): void { const foregroundColor = e.getColor(colors.editorForeground); const foreground = foregroundColor ? foregroundColor.toString() : null; - const backgroundColor = e.getColor(colors.editorBackground); - const background = backgroundColor ? backgroundColor.toString() : null; - - const options = { - legend: { - labels: { - fontColor: foreground + const options: chartjs.ChartOptions = { + plugins: { + legend: { + labels: { + color: foreground + } } - }, - viewArea: { - backgroundColor: background } }; this.options = mixin({}, mixin(this.options, options)); @@ -115,13 +121,24 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { public refresh() { // cheaper refresh but causes problems when change data for rerender if (this._chart) { - this._chart.ngOnChanges({}); + this._chart.options = this.options; + this._chart.data.datasets = this.chartData; + this._chart.data.labels = this.labels; + this._chart.config['type'] = ChartTypeToChartJsType[this.chartType]; + this._chart.update(); } } - public getCanvasData(): string { - if (this._chart && this._chart.chart) { - return this._chart.chart.toBase64Image(); + public refreshChartOptions() { + if (this._chart) { + this._chart.options = this.options; + this._chart.update(); + } + } + + public getCanvasData(): string | undefined { + if (this._chart) { + return this._chart.toBase64Image(); } else { return undefined; } @@ -184,8 +201,8 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { /* Typescript does not allow you to access getters/setters for super classes. his is a workaround that allows us to still call base getter */ - private _cachedChartData: Array; - protected getChartData(): Array { + private _cachedChartData: chartjs.ChartDataset[]; + protected getChartData(): chartjs.ChartDataset[] { if (!this._cachedChartData) { if (this._config.dataDirection === 'horizontal') { if (this._config.labelFirstColumn) { @@ -224,7 +241,7 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { return this._cachedChartData; } - public get chartData(): Array { + public get chartData(): chartjs.ChartDataset[] { return this.getChartData(); } @@ -265,16 +282,18 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { } public set legendPosition(input: LegendPosition) { - const options = { - legend: { - display: true, - position: 'top' + const options: chartjs.ChartOptions = { + plugins: { + legend: { + position: 'top', + display: true + } } }; if (input === 'none') { - options.legend.display = false; + options.plugins.legend.display = false; } else { - options.legend.position = input; + options.plugins.legend.position = input; } this.options = mixin(this.options, options); } @@ -295,13 +314,3 @@ function isValidData(data: IInsightData): boolean { return true; } - -chartjs.Chart.pluginService.register({ - beforeDraw: function (chart) { - if ((chart.config.options as any).viewArea && (chart.config.options as any).viewArea.backgroundColor) { - let ctx = (chart as any).chart.ctx; - ctx.fillStyle = (chart.config.options as any).viewArea.backgroundColor; - ctx.fillRect(0, 0, (chart as any).chart.width, (chart as any).chart.height); - } - } -}); diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/barChart.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/barChart.component.ts index 15d7205f28..573e6c2bbf 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/barChart.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/barChart.component.ts @@ -6,6 +6,7 @@ import { ChartInsight } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/chartInsight.component'; import { mixin } from 'sql/base/common/objects'; import { IChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; +import * as chartjs from 'chart.js'; import * as colors from 'vs/platform/theme/common/colorRegistry'; import { editorLineNumbers } from 'vs/editor/common/core/editorColorRegistry'; @@ -36,88 +37,80 @@ export default class BarChart extends ChartInsight { } public override setConfig(config: IBarChartConfig): void { - let options = {}; + let options: chartjs.ChartOptions = {}; if (config.xAxisMax) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { display: true, - ticks: { - max: config.xAxisMax - } - }] + max: config.xAxisMax + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); } if (config.xAxisMin) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { display: true, - ticks: { - min: config.xAxisMin - } - }] + min: config.xAxisMin + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); } if (config.xAxisLabel) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { display: true, - scaleLabel: { + title: { display: true, - labelString: config.xAxisLabel + text: config.xAxisLabel } - }] + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); } if (config.yAxisMax) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - yAxes: [{ + y: { display: true, - ticks: { - max: config.yAxisMax - } - }] + max: config.yAxisMax + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); } if (config.yAxisMin) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - yAxes: [{ + y: { display: true, - ticks: { - min: config.yAxisMin - } - }] + min: config.yAxisMin + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); } if (config.yAxisLabel) { - const opts = { + const opts: chartjs.ChartOptions = { scales: { - yAxes: [{ + y: { display: true, - scaleLabel: { + title: { display: true, - labelString: config.yAxisLabel + text: config.yAxisLabel } - }] + } } }; options = mixin({}, mixin(options, opts, true, customMixin)); @@ -133,30 +126,30 @@ export default class BarChart extends ChartInsight { const foreground = foregroundColor ? foregroundColor.toString() : null; const gridLinesColor = e.getColor(editorLineNumbers); const gridLines = gridLinesColor ? gridLinesColor.toString() : null; - const options = { + const options: chartjs.ChartOptions = { scales: { - xAxes: [{ - scaleLabel: { - fontColor: foreground + x: { + title: { + color: foreground }, ticks: { - fontColor: foreground + color: foreground }, - gridLines: { + grid: { color: gridLines } - }], - yAxes: [{ - scaleLabel: { - fontColor: foreground + }, + y: { + title: { + color: foreground }, ticks: { - fontColor: foreground + color: foreground }, - gridLines: { + grid: { color: gridLines } - }] + } } }; diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/horizontalBarChart.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/horizontalBarChart.component.ts index 53baa05346..8f52a9abd8 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/horizontalBarChart.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/horizontalBarChart.component.ts @@ -3,14 +3,17 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import BarChart from './barChart.component'; +import BarChart, { IBarChartConfig } from './barChart.component'; import { forwardRef, Inject, ChangeDetectorRef } from '@angular/core'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; import { ChartType } from 'sql/workbench/contrib/charts/common/interfaces'; +import * as chartjs from 'chart.js'; +import { mixin } from 'sql/base/common/objects'; +import { customMixin } from 'sql/workbench/contrib/charts/browser/interfaces'; export default class HorizontalBarChart extends BarChart { - protected override readonly chartType: ChartType = ChartType.HorizontalBar; + protected override readonly chartType: ChartType = ChartType.Bar; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) _changeRef: ChangeDetectorRef, @@ -19,4 +22,12 @@ export default class HorizontalBarChart extends BarChart { ) { super(_changeRef, themeService, telemetryService); } + + public override setConfig(config: IBarChartConfig): void { + let options: chartjs.ChartOptions = { + indexAxis: 'y' + }; + this.options = mixin({}, mixin(this.options, options, true, customMixin)); + super.setConfig(config); + } } diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/lineChart.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/lineChart.component.ts index 75468e65d5..f811e5dc57 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/lineChart.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/lineChart.component.ts @@ -4,12 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import { mixin, deepClone } from 'vs/base/common/objects'; +import * as chartjs from 'chart.js'; import BarChart, { IBarChartConfig } from './barChart.component'; -import { defaultChartConfig, IDataSet } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; +import { defaultChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; import { ChangeDetectorRef, Inject, forwardRef } from '@angular/core'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces'; import { DataType, ChartType } from 'sql/workbench/contrib/charts/common/interfaces'; import { values } from 'vs/base/common/collections'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; @@ -40,7 +40,7 @@ export default class LineChart extends BarChart { super.init(); } - public override get chartData(): Array { + public override get chartData(): chartjs.ChartDataset[] { if (this._config.dataType === DataType.Number) { return super.getChartData(); } else { @@ -53,10 +53,10 @@ export default class LineChart extends BarChart { this._cachedPointData = undefined; } - private _cachedPointData: Array; - protected getDataAsPoint(): Array { + private _cachedPointData: chartjs.ChartDataset[]; + protected getDataAsPoint(): chartjs.ChartDataset[] { if (!this._cachedPointData) { - const dataSetMap: { [label: string]: IPointDataSet } = {}; + const dataSetMap: { [label: string]: chartjs.ChartDataset } = {}; this._data.rows.map(row => { if (row && row.length >= 3) { const legend = row[0]; @@ -82,25 +82,24 @@ export default class LineChart extends BarChart { protected addAxisLabels(): void { const xLabel = this._config.xAxisLabel || this._data.columns[1] || 'x'; const yLabel = this._config.yAxisLabel || this._data.columns[2] || 'y'; - const options = { + const options: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { type: 'linear', position: 'bottom', display: true, - scaleLabel: { + title: { display: true, - labelString: xLabel + text: xLabel } - }], - - yAxes: [{ + }, + y: { display: true, - scaleLabel: { + title: { display: true, - labelString: yLabel, + text: yLabel } - }] + } } }; diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/timeSeriesChart.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/timeSeriesChart.component.ts index a23d57988d..535a7cce67 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/timeSeriesChart.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/types/timeSeriesChart.component.ts @@ -5,12 +5,12 @@ import LineChart, { ILineConfig } from './lineChart.component'; import { defaultChartConfig } from 'sql/workbench/contrib/dashboard/browser/widgets/insights/views/charts/interfaces'; +import * as chartjs from 'chart.js'; import { mixin, deepClone } from 'vs/base/common/objects'; import { Color } from 'vs/base/common/color'; import { ChangeDetectorRef, Inject, forwardRef } from '@angular/core'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { IPointDataSet } from 'sql/workbench/contrib/charts/browser/interfaces'; import { ChartType } from 'sql/workbench/contrib/charts/common/interfaces'; import { values } from 'vs/base/common/collections'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; @@ -32,42 +32,41 @@ export default class TimeSeriesChart extends LineChart { const xLabel = this._config.xAxisLabel || this.getLabels()[1] || 'x'; const yLabel = this._config.yAxisLabel || this.getLabels()[2] || 'y'; - const options = { + const options: chartjs.ChartOptions = { scales: { - xAxes: [{ + x: { type: 'time', display: true, - scaleLabel: { + title: { display: true, - labelString: xLabel + text: xLabel }, ticks: { autoSkip: false, maxRotation: 45, minRotation: 45 } - }], - - yAxes: [{ + }, + y: { display: true, - scaleLabel: { + title: { display: true, - labelString: yLabel + text: yLabel } - }] + } } }; this.options = Object.assign({}, mixin(this.options, options)); } - protected override getDataAsPoint(): Array { - const dataSetMap: { [label: string]: IPointDataSet } = {}; + protected override getDataAsPoint(): chartjs.ChartDataset[] { + const dataSetMap: { [label: string]: chartjs.ChartDataset<'line', any[]> } = {}; this._data.rows.map(row => { if (row && row.length >= 3) { const legend = row[0]; if (!dataSetMap[legend]) { - dataSetMap[legend] = { label: legend, data: [], fill: false }; + dataSetMap[legend] = { label: legend, data: [] }; } dataSetMap[legend].data.push({ x: row[1], y: Number(row[2]) }); diff --git a/src/vs/code/browser/workbench/workbench-dev.html b/src/vs/code/browser/workbench/workbench-dev.html index fede3e48e0..47c143b503 100644 --- a/src/vs/code/browser/workbench/workbench-dev.html +++ b/src/vs/code/browser/workbench/workbench-dev.html @@ -70,9 +70,8 @@ '@angular/animations': `${window.location.origin}/static/remote/web/node_modules/@angular/animations/bundles/animations.umd.n.js`, 'angular2-grid': `${window.location.origin}/static/remote/web/node_modules/angular2-grid/bundles/NgGrid.umd.js`, 'angular2-slickgrid': `${window.location.origin}/static/remote/web/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`, - 'chart.js': `${window.location.origin}/static/remote/web/node_modules/chart.js/dist/Chart.bundle.min.js`, + 'chart.js': `${window.location.origin}/static/remote/web/node_modules/chart.js/dist/chart.umd.js`, 'html-to-image': `${window.location.origin}/static/remote/web/node_modules/html-to-image/dist/html-to-image.js`, - 'ng2-charts': `${window.location.origin}/static/remote/web/node_modules/ng2-charts/bundles/ng2-charts.umd.js`, 'rxjs/Observable': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?0`, 'rxjs/observable/merge': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?1`, 'rxjs/operator/share': `${window.location.origin}/static/remote/web/node_modules/rxjs/bundles/Rx.min.js?2`, @@ -106,7 +105,7 @@ 'plotly.js-dist-min': `${window.location.origin}/static/node_modules/plotly.js-dist-min/plotly.min.js`, 'azdataGraph': `${window.location.origin}/static/node_modules/azdataGraph/dist/build.js` } - }; + }); diff --git a/src/vs/code/browser/workbench/workbench.html b/src/vs/code/browser/workbench/workbench.html index ca282de3be..4de605e71f 100644 --- a/src/vs/code/browser/workbench/workbench.html +++ b/src/vs/code/browser/workbench/workbench.html @@ -95,9 +95,8 @@ '@angular/animations': `${window.location.origin}/static/node_modules/@angular/animations/bundles/animations.umd.n.js`, 'angular2-grid': `${window.location.origin}/static/node_modules/angular2-grid/bundles/NgGrid.umd.js`, 'angular2-slickgrid': `${window.location.origin}/static/node_modules/angular2-slickgrid/out/bundles/angular2-slickgrid.umd.js`, - 'chart.js': `${window.location.origin}/static/node_modules/chart.js/dist/Chart.bundle.min.js`, + 'chart.js': `${window.location.origin}/static/node_modules/chart.js/dist/chart.umd.js`, 'html-to-image': `${window.location.origin}/static/node_modules/html-to-image/dist/html-to-image.js`, - 'ng2-charts': `${window.location.origin}/static/node_modules/ng2-charts/bundles/ng2-charts.umd.js`, 'rxjs/Observable': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?0`, 'rxjs/observable/merge': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?1`, 'rxjs/operator/share': `${window.location.origin}/static/node_modules/rxjs/bundles/Rx.min.js?2`, diff --git a/yarn.lock b/yarn.lock index 3cf62ce0e9..0c51fb45de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -501,6 +501,11 @@ methods "^1.1.2" path-to-regexp "^6.1.0" +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@microsoft/1ds-core-js@3.2.9", "@microsoft/1ds-core-js@^3.2.2": version "3.2.9" resolved "https://registry.yarnpkg.com/@microsoft/1ds-core-js/-/1ds-core-js-3.2.9.tgz#8a26935966e4871d1f1e40d992828bdd52bba84e" @@ -816,11 +821,6 @@ dependencies: applicationinsights "*" -"@types/chart.js@2.9.4": - version "2.9.4" - resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.4.tgz#19d12fae10536e7a2a6ea768c7a3811c626ca455" - integrity sha512-uKF7vOdTTAfrsKREKG4oojDqE/dQ5GkwdMRQGfk19aKmeC4wIF6eTWdN98PA8d+F4TPI8hy7oOTB6/JoWepEJw== - "@types/cookie@^0.3.3": version "0.3.3" resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803" @@ -2584,28 +2584,17 @@ charenc@0.0.2: resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667" integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA== -chart.js@^2.6.0, chart.js@^2.9.4: - version "2.9.4" - resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" - integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== +chart.js@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1" + integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g== dependencies: - chartjs-color "^2.1.0" - moment "^2.10.2" + "@kurkle/color" "^0.3.0" -chartjs-color-string@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" - integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== - dependencies: - color-name "^1.0.0" - -chartjs-color@^2.1.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" - integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== - dependencies: - chartjs-color-string "^0.6.0" - color-convert "^1.9.3" +chartjs-adapter-moment@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102" + integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA== chokidar@3.5.1: version "3.5.1" @@ -7296,7 +7285,7 @@ mocha@^9.2.2: yargs-parser "20.2.4" yargs-unparser "2.0.0" -moment@^2.10.2: +moment@^2.29.4: version "2.29.4" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== @@ -7431,13 +7420,6 @@ next-tick@1, next-tick@^1.1.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== -ng2-charts@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/ng2-charts/-/ng2-charts-1.6.0.tgz#108a2133ff62a8623895240fadbddbea2951f29d" - integrity sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg== - dependencies: - chart.js "^2.6.0" - nice-try@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"