Repository: ignite Updated Branches: refs/heads/master c73894873 -> 023e2deee
IGNITE-9510 Web Console: Added vertical cursor to ignite-chart component, fix tooltip positioning. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/023e2dee Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/023e2dee Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/023e2dee Branch: refs/heads/master Commit: 023e2deeefa196a9a08ead404711136460830620 Parents: c738948 Author: Alexander Kalinin <[email protected]> Authored: Wed Sep 12 15:30:51 2018 +0700 Committer: Alexey Kuznetsov <[email protected]> Committed: Wed Sep 12 15:30:51 2018 +0700 ---------------------------------------------------------------------- .../ignite-chart-series-selector/controller.js | 11 ++-- .../app/components/ignite-chart/controller.js | 61 ++++++++++++++++---- .../app/components/ignite-chart/index.js | 1 + .../app/components/ignite-chart/template.pug | 1 + 4 files changed, 57 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/023e2dee/modules/web-console/frontend/app/components/ignite-chart-series-selector/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-chart-series-selector/controller.js b/modules/web-console/frontend/app/components/ignite-chart-series-selector/controller.js index 00f57ca..f46d8da 100644 --- a/modules/web-console/frontend/app/components/ignite-chart-series-selector/controller.js +++ b/modules/web-console/frontend/app/components/ignite-chart-series-selector/controller.js @@ -16,21 +16,21 @@ */ export default class IgniteChartSeriesSelectorController { - static $inject = []; - constructor() { this.charts = []; this.selectedCharts = []; } $onChanges(changes) { - if (changes && 'chartApi' in changes && changes.chartApi.currentValue) + if (changes && 'chartApi' in changes && changes.chartApi.currentValue) { this.applyValues(); + this.setSelectedCharts(); + } } applyValues() { this.charts = this._makeMenu(); - this.selectedCharts = this.charts.map(({ key }) => key); + this.selectedCharts = this.charts.filter((chart) => !chart.hidden).map(({ key }) => key); } setSelectedCharts() { @@ -55,7 +55,8 @@ export default class IgniteChartSeriesSelectorController { return Object.keys(this.chartApi.config.datasetLegendMapping).map((key) => { return { key, - label: labels[key] + label: labels[key].name || labels[key], + hidden: labels[key].hidden }; }); } http://git-wip-us.apache.org/repos/asf/ignite/blob/023e2dee/modules/web-console/frontend/app/components/ignite-chart/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-chart/controller.js b/modules/web-console/frontend/app/components/ignite-chart/controller.js index df11050..62c2076 100644 --- a/modules/web-console/frontend/app/components/ignite-chart/controller.js +++ b/modules/web-console/frontend/app/components/ignite-chart/controller.js @@ -82,7 +82,7 @@ export class IgniteChartController { /** * @param {{chartOptions: ng.IChangesObject<import('chart.js').ChartConfiguration>, chartTitle: ng.IChangesObject<string>, chartDataPoint: ng.IChangesObject<IgniteChartDataPoint>, chartHistory: ng.IChangesObject<Array<IgniteChartDataPoint>>}} changes */ - $onChanges(changes) { + async $onChanges(changes) { if (this.chart && _.get(changes, 'refreshRate.currentValue')) this.onRefreshRateChanged(_.get(changes, 'refreshRate.currentValue')); @@ -94,7 +94,7 @@ export class IgniteChartController { if (changes.chartHistory && changes.chartHistory.currentValue && changes.chartHistory.currentValue.length !== changes.chartHistory.previousValue.length) { if (!this.chart) - this.initChart(); + await this.initChart(); this.clearDatasets(); this.localHistory = [...changes.chartHistory.currentValue]; @@ -118,7 +118,7 @@ export class IgniteChartController { async initChart() { /** @type {import('chart.js').ChartConfiguration} */ this.config = { - type: 'line', + type: 'LineWithVerticalCursor', data: { datasets: [] }, @@ -187,8 +187,9 @@ export class IgniteChartController { }, tooltips: { mode: 'index', - position: 'nearest', + position: 'yCenter', intersect: false, + yAlign: 'center', xPadding: 20, yPadding: 20, bodyFontSize: 13, @@ -229,6 +230,40 @@ export class IgniteChartController { const chartModule = await import('chart.js'); const Chart = chartModule.default; + Chart.Tooltip.positioners.yCenter = (elements) => { + const chartHeight = elements[0]._chart.height; + const tooltipHeight = 60; + + return {x: elements[0].getCenterPoint().x, y: Math.floor(chartHeight / 2) - Math.floor(tooltipHeight / 2) }; + }; + + + // Drawing vertical cursor + Chart.defaults.LineWithVerticalCursor = Chart.defaults.line; + Chart.controllers.LineWithVerticalCursor = Chart.controllers.line.extend({ + draw(ease) { + Chart.controllers.line.prototype.draw.call(this, ease); + + if (this.chart.tooltip._active && this.chart.tooltip._active.length) { + const activePoint = this.chart.tooltip._active[0]; + const ctx = this.chart.ctx; + const x = activePoint.tooltipPosition().x; + const topY = this.chart.scales['y-axis-0'].top; + const bottomY = this.chart.scales['y-axis-0'].bottom; + + // draw line + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x, topY); + ctx.lineTo(x, bottomY); + ctx.lineWidth = 0.5; + ctx.strokeStyle = '#0080ff'; + ctx.stroke(); + ctx.restore(); + } + } + }); + await import('chartjs-plugin-streaming'); this.chart = new Chart(this.ctx, this.config); @@ -261,7 +296,7 @@ export class IgniteChartController { this.config.data.datasets[datasetIndex].data.splice(0, this.config.data.datasets[datasetIndex].length - this.maxPointsNumber); this.config.data.datasets[datasetIndex].data.push({x: dataPoint.x, y: dataPoint.y[key]}); - this.config.data.datasets[datasetIndex].borderColor = this.chartOptions.chartColors[datasetIndex]; + this.config.data.datasets[datasetIndex].borderColor = this.chartColors[datasetIndex]; this.config.data.datasets[datasetIndex].borderWidth = 2; this.config.data.datasets[datasetIndex].fill = false; } @@ -290,7 +325,7 @@ export class IgniteChartController { if (this.findDatasetIndex(datasetName) >= 0) throw new Error(`Dataset with name ${datasetName} is already in chart`); else - this.config.data.datasets.push({ label: datasetName, data: [] }); + this.config.data.datasets.push({ label: datasetName, data: [], hidden: true }); } findDatasetIndex(searchedDatasetLabel) { @@ -298,14 +333,16 @@ export class IgniteChartController { } changeXRange(range) { - const deltaInMilliSeconds = range.value * 60 * 1000; - this.chart.config.options.plugins.streaming.duration = deltaInMilliSeconds; + if (this.chart) { + const deltaInMilliSeconds = range.value * 60 * 1000; + this.chart.config.options.plugins.streaming.duration = deltaInMilliSeconds; - this.clearDatasets(); - this.newPoints.splice(0, this.newPoints.length, ...this.localHistory); + this.clearDatasets(); + this.newPoints.splice(0, this.newPoints.length, ...this.localHistory); - this.onRefresh(); - this.rerenderChart(); + this.onRefresh(); + this.rerenderChart(); + } } onRefreshRateChanged(refreshRate) { http://git-wip-us.apache.org/repos/asf/ignite/blob/023e2dee/modules/web-console/frontend/app/components/ignite-chart/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-chart/index.js b/modules/web-console/frontend/app/components/ignite-chart/index.js index 337ba36..ea951cd 100644 --- a/modules/web-console/frontend/app/components/ignite-chart/index.js +++ b/modules/web-console/frontend/app/components/ignite-chart/index.js @@ -32,6 +32,7 @@ export default angular chartHistory: '<', chartTitle: '<', chartColors: '<', + chartHeaderText: '<', maxPointsNumber: '<', refreshRate: '<' } http://git-wip-us.apache.org/repos/asf/ignite/blob/023e2dee/modules/web-console/frontend/app/components/ignite-chart/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-chart/template.pug b/modules/web-console/frontend/app/components/ignite-chart/template.pug index 076d8d4..5108853 100644 --- a/modules/web-console/frontend/app/components/ignite-chart/template.pug +++ b/modules/web-console/frontend/app/components/ignite-chart/template.pug @@ -18,6 +18,7 @@ header div h5 {{ $ctrl.chartTitle }} ignite-chart-series-selector(chart-api='$ctrl.chart') + .chart-text(ng-if='$ctrl.chartHeaderText') {{$ctrl.chartHeaderText}} div span Range:
