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 <[email protected]>
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']);
+ });
+ });
+
+});
