This is an automated email from the ASF dual-hosted git repository. ababiichuk pushed a commit to branch trunk in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push: new f45cfa1 AMBARI-24666 Implement data visualization color palette. (ababiichuk) f45cfa1 is described below commit f45cfa1d6afebd7cac75f1086adb218071999fe7 Author: ababiichuk <ababiic...@hortonworks.com> AuthorDate: Thu Sep 20 14:37:56 2018 +0300 AMBARI-24666 Implement data visualization color palette. (ababiichuk) --- ambari-web/app/assets/img/widget-gauge.png | Bin 6444 -> 3563 bytes ambari-web/app/assets/img/widget-graph.png | Bin 9778 -> 3844 bytes ambari-web/app/assets/img/widget-number.png | Bin 5297 -> 3209 bytes ambari-web/app/assets/img/widget-template.png | Bin 4834 -> 2574 bytes ambari-web/app/assets/test/tests.js | 2 +- ambari-web/app/config.js | 2 ++ ambari-web/app/utils/chart_utils.js | 29 ++++++++++++++++ ambari-web/app/views/common/chart/linear_time.js | 3 +- ambari-web/app/views/common/chart/pie.js | 7 ++-- .../app/views/common/widget/gauge_widget_view.js | 9 ++--- .../views/main/dashboard/cluster_metrics/cpu.js | 7 ---- .../main/dashboard/widgets/pie_chart_widget.js | 9 ++--- ambari-web/app/views/main/host/metrics/cpu.js | 7 ---- .../service/info/metrics/flume/channel_size_mma.js | 11 ------ .../info/metrics/flume/flume_incoming_mma.js | 12 ------- .../info/metrics/flume/flume_outgoing_mma.js | 12 ------- .../app/views/main/service/services/onefs.js | 3 +- ambari-web/test/utils/chart_utils_test.js | 38 +++++++++++++++++++++ 18 files changed, 89 insertions(+), 62 deletions(-) diff --git a/ambari-web/app/assets/img/widget-gauge.png b/ambari-web/app/assets/img/widget-gauge.png index a923247..4715115 100644 Binary files a/ambari-web/app/assets/img/widget-gauge.png and b/ambari-web/app/assets/img/widget-gauge.png differ diff --git a/ambari-web/app/assets/img/widget-graph.png b/ambari-web/app/assets/img/widget-graph.png index 97f5d8a..1da664e 100644 Binary files a/ambari-web/app/assets/img/widget-graph.png and b/ambari-web/app/assets/img/widget-graph.png differ diff --git a/ambari-web/app/assets/img/widget-number.png b/ambari-web/app/assets/img/widget-number.png index 84b7bb6..f2d6b0e 100644 Binary files a/ambari-web/app/assets/img/widget-number.png and b/ambari-web/app/assets/img/widget-number.png differ diff --git a/ambari-web/app/assets/img/widget-template.png b/ambari-web/app/assets/img/widget-template.png index 59fef8d..98b79f2 100644 Binary files a/ambari-web/app/assets/img/widget-template.png and b/ambari-web/app/assets/img/widget-template.png differ diff --git a/ambari-web/app/assets/test/tests.js b/ambari-web/app/assets/test/tests.js index 5cd18f7..58b0744 100644 --- a/ambari-web/app/assets/test/tests.js +++ b/ambari-web/app/assets/test/tests.js @@ -222,13 +222,13 @@ var files = [ 'test/utils/array_utils_test', 'test/utils/batch_scheduled_requests_test', 'test/utils/blueprint_test', + 'test/utils/chart_utils_test', 'test/utils/config_test', 'test/utils/configs_collection_test', 'test/utils/credentials_test', 'test/utils/date/date_test', 'test/utils/date/timezone_test', 'test/utils/data_manipulation_test', - 'test/utils/config_test', 'test/utils/db_test', 'test/utils/ember_computed_test', 'test/utils/ember_reopen_test', diff --git a/ambari-web/app/config.js b/ambari-web/app/config.js index c5bf5f0..807b841 100644 --- a/ambari-web/app/config.js +++ b/ambari-web/app/config.js @@ -57,6 +57,8 @@ App.healthStatusRed = '#EF6162'; App.healthStatusGreen = '#1EB475'; App.healthStatusOrange = '#E98A40'; App.widgetContentColor = '#666666'; +App.gaugeWidgetRemainingAreaColor = '#DDDDDD'; +App.dataVisualizationColorScheme = ['#41bfae', '#79e3d1', '#63c2e5', '#c4aeff', '#b991d9', '#ffb9bf', '#ffae65', '#f6d151', '#a7cf82', '#abdfd5', '#3aac9c', '#6dccbc', '#59aece', '#b09ce5', '#a682c3', '#e5a6ac', '#e59c5b', '#ddbc49', '#96ba75', '#9ac8bf', '#83d5ca', '#a8ede1', '#99d7ee', '#d9caff', '#d1b7e6', '#ffd1d5', '#ffca9b', '#f9e18e', '#c6e0ae', '#c8eae4']; App.inactivityRemainTime = 60; // in seconds App.enableLogger = true; App.stackVersionsAvailable = true; diff --git a/ambari-web/app/utils/chart_utils.js b/ambari-web/app/utils/chart_utils.js new file mode 100644 index 0000000..a8dcb79 --- /dev/null +++ b/ambari-web/app/utils/chart_utils.js @@ -0,0 +1,29 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); + +module.exports = { + getColorSchemeForChart: function (seriesCount) { + return App.dataVisualizationColorScheme.slice(0, seriesCount).reverse(); + }, + + getColorSchemeForGaugeWidget: function (color = App.dataVisualizationColorScheme[0]) { + return [color, App.gaugeWidgetRemainingAreaColor]; + } +}; diff --git a/ambari-web/app/views/common/chart/linear_time.js b/ambari-web/app/views/common/chart/linear_time.js index dfa1d90..2b3e777 100644 --- a/ambari-web/app/views/common/chart/linear_time.js +++ b/ambari-web/app/views/common/chart/linear_time.js @@ -18,6 +18,7 @@ var App = require('app'); var string_utils = require('utils/string_utils'); var dateUtils = require('utils/date/date'); +var chartUtils = require('utils/chart_utils'); /** * @class @@ -670,7 +671,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, { */ dataPreProcess: function (data) { var self = this; - var palette = new Rickshaw.Color.Palette({scheme: 'munin'}); + var palette = new Rickshaw.Color.Palette({scheme: chartUtils.getColorSchemeForChart(data.length)}); // Format series for display var series_min_length = 100000000; data.forEach(function (series) { diff --git a/ambari-web/app/views/common/chart/pie.js b/ambari-web/app/views/common/chart/pie.js index f4c402a..3942a8d 100644 --- a/ambari-web/app/views/common/chart/pie.js +++ b/ambari-web/app/views/common/chart/pie.js @@ -17,13 +17,16 @@ */ var App = require('app'); +var chartUtils = require('utils/chart_utils'); App.ChartPieView = Em.View.extend({ w:100, h:100, data:[300, 500], id:null, - palette: new Rickshaw.Color.Palette({ scheme: 'munin'}), + palette: function () { + return new Rickshaw.Color.Palette({scheme: chartUtils.getColorSchemeForChart(this.get('data.length'))}); + }.property('data.length'), stroke: 'black', strokeWidth: 1, donut:d3.layout.pie().sort(null), @@ -88,7 +91,7 @@ App.ChartPieView = Em.View.extend({ .append("svg:g").attr('class', 'arc') .append('svg:path') .attr("fill", function (d, i) { - return thisChart.palette.color(i); + return thisChart.get('palette').color(i); }) .attr("d", thisChart.get('arc')) ); diff --git a/ambari-web/app/views/common/widget/gauge_widget_view.js b/ambari-web/app/views/common/widget/gauge_widget_view.js index e359567..2cb061a 100644 --- a/ambari-web/app/views/common/widget/gauge_widget_view.js +++ b/ambari-web/app/views/common/widget/gauge_widget_view.js @@ -17,6 +17,7 @@ */ var App = require('app'); +var chartUtils = require('utils/chart_utils'); App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, { templateName: require('templates/common/widget/gauge_widget'), @@ -87,7 +88,7 @@ App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, { centerTextColor: Em.computed.alias('contentColor'), palette: new Rickshaw.Color.Palette({ - scheme: ['#FFFFFF', '#D6DDDF'].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget() }), data: function () { @@ -105,15 +106,15 @@ App.GaugeWidgetView = Em.View.extend(App.WidgetMixin, { var color_orange = App.healthStatusOrange; if ((isNaN(threshold1) && isNaN(threshold2)) || (isNaN(threshold1) && used <= threshold2) || (isNaN(threshold2) && used <= threshold1) || (!isNaN(threshold2) && (threshold1 > threshold2) && (used > threshold1)) || (!isNaN(threshold2) && (threshold1 < threshold2) && (used <= threshold1))) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', color_green].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(color_green) })); } else if ((!isNaN(threshold2) && used.isInRange(threshold1, threshold2)) || (isNaN(threshold2) && used > threshold1)) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', color_orange].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(color_orange) })); } else { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', color_red].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(color_red) })); } return App.widgetContentColor; diff --git a/ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js b/ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js index eea3040..adf809b 100644 --- a/ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js +++ b/ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js @@ -63,12 +63,5 @@ App.ChartClusterMetricsCPU = App.ChartLinearTimeView.extend({ } } return dataArray; - }, - - colorForSeries: function (series) { - if (series.name && series.name.contains(Em.I18n.t('dashboard.clusterMetrics.cpu.displayNames.idle'))) { - return '#CFECEC'; - } - return null; } }); \ No newline at end of file diff --git a/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js b/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js index efb8069..0667e53 100644 --- a/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js +++ b/ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js @@ -18,6 +18,7 @@ var App = require('app'); var numberUtils = require('utils/number_utils'); +var chartUtils = require('utils/chart_utils'); App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({ @@ -93,7 +94,7 @@ App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({ centerTextColor: Em.computed.alias('contentColor'), palette: new Rickshaw.Color.Palette({ - scheme: [ '#FFFFFF', '#D6DDDF'].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget() }), data: function() { @@ -111,17 +112,17 @@ App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({ var thresholdMax = parseFloat(this.get('thresholdMax')); if (used <= thresholdMin) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', App.healthStatusGreen].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(App.healthStatusGreen) })); } else if (used <= thresholdMax) { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', App.healthStatusOrange].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(App.healthStatusOrange) })); } else { this.set('palette', new Rickshaw.Color.Palette({ - scheme: ['#DDDDDD', App.healthStatusRed].reverse() + scheme: chartUtils.getColorSchemeForGaugeWidget(App.healthStatusRed) })); } return App.widgetContentColor; diff --git a/ambari-web/app/views/main/host/metrics/cpu.js b/ambari-web/app/views/main/host/metrics/cpu.js index ba77b96..5aa2ec3 100644 --- a/ambari-web/app/views/main/host/metrics/cpu.js +++ b/ambari-web/app/views/main/host/metrics/cpu.js @@ -77,12 +77,5 @@ App.ChartHostMetricsCPU = App.ChartLinearTimeView.extend({ dataArray.push(cpu_idle); } return dataArray; - }, - - colorForSeries: function (series) { - if (Em.I18n.t('hosts.host.metrics.cpu.displayNames.cpu_idle') == series.name) { - return '#CFECEC'; - } - return null; } }); \ No newline at end of file diff --git a/ambari-web/app/views/main/service/info/metrics/flume/channel_size_mma.js b/ambari-web/app/views/main/service/info/metrics/flume/channel_size_mma.js index 902d2f1..483caaa 100644 --- a/ambari-web/app/views/main/service/info/metrics/flume/channel_size_mma.js +++ b/ambari-web/app/views/main/service/info/metrics/flume/channel_size_mma.js @@ -38,16 +38,5 @@ App.ChartServiceMetricsFlume_ChannelSizeMMA = App.ChartLinearTimeView.extend({ displayName: function (name) { return Em.I18n.t('services.service.info.metrics.flume.channelType').format(name); } - }, - - colorForSeries: function (series) { - if (Em.I18n.t('services.service.info.metrics.flume.channelType').format("avg") == series.name){ - return '#0066b3'; - }else if (Em.I18n.t('services.service.info.metrics.flume.channelType').format("min") == series.name){ - return '#00CC00'; - }else if (Em.I18n.t('services.service.info.metrics.flume.channelType').format("max") == series.name){ - return '#FF8000'; - } - return null; } }); diff --git a/ambari-web/app/views/main/service/info/metrics/flume/flume_incoming_mma.js b/ambari-web/app/views/main/service/info/metrics/flume/flume_incoming_mma.js index 458dc46..1f57231 100644 --- a/ambari-web/app/views/main/service/info/metrics/flume/flume_incoming_mma.js +++ b/ambari-web/app/views/main/service/info/metrics/flume/flume_incoming_mma.js @@ -38,17 +38,5 @@ App.ChartServiceMetricsFlume_IncommingMMA = App.ChartLinearTimeView.extend({ displayName: function (name) { return Em.I18n.t('services.service.info.metrics.flume.incoming_mma').format(name); } - }, - - colorForSeries: function (series) { - var name = Em.I18n.t('services.service.info.metrics.flume.incoming_mma'); - if (name.format("avg") == series.name){ - return '#0066b3'; - }else if (name.format("min") == series.name){ - return '#00CC00'; - }else if (name.format("max") == series.name){ - return '#FF8000'; - } - return null; } }); diff --git a/ambari-web/app/views/main/service/info/metrics/flume/flume_outgoing_mma.js b/ambari-web/app/views/main/service/info/metrics/flume/flume_outgoing_mma.js index b0b12be..242c504 100644 --- a/ambari-web/app/views/main/service/info/metrics/flume/flume_outgoing_mma.js +++ b/ambari-web/app/views/main/service/info/metrics/flume/flume_outgoing_mma.js @@ -38,17 +38,5 @@ App.ChartServiceMetricsFlume_OutgoingMMA = App.ChartLinearTimeView.extend({ displayName: function (name) { return Em.I18n.t('services.service.info.metrics.flume.outgoing_mma').format(name); } - }, - - colorForSeries: function (series) { - var name = Em.I18n.t('services.service.info.metrics.flume.outgoing_mma'); - if (name.format("avg") == series.name){ - return '#0066b3'; - }else if (name.format("min") == series.name){ - return '#00CC00'; - }else if (name.format("max") == series.name){ - return '#FF8000'; - } - return null; } }); diff --git a/ambari-web/app/views/main/service/services/onefs.js b/ambari-web/app/views/main/service/services/onefs.js index 8f7bec4..50fa76a 100644 --- a/ambari-web/app/views/main/service/services/onefs.js +++ b/ambari-web/app/views/main/service/services/onefs.js @@ -18,6 +18,7 @@ var App = require('app'); var date = require('utils/date/date'); var numberUtils = require('utils/number_utils'); +var chartUtils = require('utils/chart_utils'); function diskPart(i18nKey, totalKey, usedKey) { return Em.computed(totalKey, usedKey, function () { @@ -53,7 +54,7 @@ App.MainDashboardServiceOnefsView = App.MainDashboardServiceView.extend({ color: '#0066B3', stroke: '#0066B3', palette: new Rickshaw.Color.Palette({ - scheme: ['rgba(0,102,179,1)', 'rgba(0,102,179,0)'] + scheme: chartUtils.getColorSchemeForGaugeWidget() }), data: function () { var remaining = Number(this.get('service.capacityRemaining')); diff --git a/ambari-web/test/utils/chart_utils_test.js b/ambari-web/test/utils/chart_utils_test.js new file mode 100644 index 0000000..68f9919 --- /dev/null +++ b/ambari-web/test/utils/chart_utils_test.js @@ -0,0 +1,38 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var chartUtils = require('utils/chart_utils'); + +describe('chart utils', function () { + + describe('#getColorSchemeForChart', function () { + it('should return the array of colors', function () { + expect(chartUtils.getColorSchemeForChart(3)).to.eql(['#63c2e5', '#79e3d1', '#41bfae']); + }); + }); + + describe('#getColorSchemeForGaugeWidget', function () { + it('default color', function () { + expect(chartUtils.getColorSchemeForGaugeWidget()).to.eql(['#41bfae', '#DDDDDD']); + }); + it('custom color', function () { + expect(chartUtils.getColorSchemeForGaugeWidget('#000000')).to.eql(['#000000', '#DDDDDD']); + }); + }); + +});