Skip to content
Snippets Groups Projects
Commit 4bed7152 authored by Masami  Suzuki's avatar Masami Suzuki Committed by Yas Naoi
Browse files

Issue #3254096 by Masami, yas: Add an option to switch a display in a block...

Issue #3254096 by Masami, yas: Add an option to switch a display in a block configuration for Realtime Horizon Chart (Namespace Costs Chart)
parent 25905ac9
No related branches found
No related tags found
No related merge requests found
......@@ -27,7 +27,8 @@ d3-horizon-chart:
url: http://www.apache.org/licenses/LICENSE-2.0
gpl-compatible: false
js:
https://cloud-orchestrator.s3.amazonaws.com/js/d3-horizon-chart.js: { type: external, minified: true }
https://unpkg.com/@docomoinnovations/horizon-chart@1.1.0/dist/d3-horizon-chart.js: { type: external, minified: true }
js/cloud_horizon_chart.js: {}
dependencies:
- cloud/d3
......
(function ($) {
'use strict';
Drupal.Cloud = {};
const colors = [
['#edf8e9', '#bae4b3', '#74c476', '#31a354', '#006d2c'],
['#e9f8f4', '#b3e4dc', '#74c1c4', '#317fa3', '#003f6d'],
];
const AXIS_HEIGHT = 10;
const AXIS_FONT_SIZE = '8';
const CHART_HEIGHT = 20;
const TITLE_FONT_SIZE = 10;
const TITLE_POSITION_X = 1;
const TITLE_POSITION_Y = 70;
// Draw Chart Function.
Drupal.Cloud.drawChart = function (datas, first) {
datas.forEach(function (data, idx) {
// Delete current chart.
d3.select(data.selector).select('svg').remove();
// Draw charts.
if (first && idx === 0) {
// Delete the axis.
d3.select('#x-axis').remove();
// Add <div> for the axis.
$(data.selector).before('<div id="x-axis"></div>');
// Draw charts.
const axis = new HorizonChart();
axis.setHeight(AXIS_HEIGHT);
axis.setDataSet(data.values);
axis.setSelector('#x-axis');
axis.draw();
const chartg = d3.selectAll('#x-axis g:first-child');
chartg.style('display', 'none');
const axisg = d3.selectAll('#x-axis .axis');
axisg.attr('font-size', AXIS_FONT_SIZE);
}
// Draw charts.
const horizonChart = new HorizonChart();
horizonChart.setTitle(data.id);
horizonChart.setTitleFontSize(TITLE_FONT_SIZE);
horizonChart.setTitlePosition(TITLE_POSITION_X, TITLE_POSITION_Y);
horizonChart.setHeight(CHART_HEIGHT);
horizonChart.setDataSet(data.values);
horizonChart.setSelector(data.selector);
horizonChart.setColors(colors[idx % 2]);
horizonChart. setShowXScale(false);
horizonChart.draw();
$(data.selector).css('margin-bottom', '0');
if (!first || idx > 0) {
$(data.selector).css('border-top', '1px solid #ddd');
}
});
};
})(jQuery);
(function ($) {
'use strict';
if (!drupalSettings.k8s || !drupalSettings.k8s.k8s_namespace_costs_chart_json_url) {
return;
}
let cost_type = null;
let chart_period = null;
if (drupalSettings.k8s.k8s_namespace_costs_chart_ec2_cost_type) {
cost_type = drupalSettings.k8s.k8s_namespace_costs_chart_ec2_cost_type;
}
chart_period = drupalSettings.k8s.k8s_namespace_costs_chart_period
? drupalSettings.k8s.k8s_namespace_costs_chart_period
: 1;
$('#k8s_namespace_costs_chart').append('<div id="chart_options">');
$('#chart_options').css('font-size', 'x-small');
$('#chart_options').css('text-align', 'right');
$('#chart_options').append('<span>');
$('#chart_options').append('<span>');
if (drupalSettings.k8s.k8s_namespace_costs_cost_types_json_url) {
let cost_types_json_url = drupalSettings.k8s.k8s_namespace_costs_cost_types_json_url;
$.get(cost_types_json_url, function (json) {
$('#chart_options > span:first-child').append('<label for="cost_type">' + Drupal.t('Cost Type') + '</label>');
$('#chart_options > span:first-child').append('<select id="cost_type">');
$.each(json, function (index, value) {
$('#cost_type').append('<option value="' + index + '">' + value + '</option>');
});
$('#cost_type option').css('font-size', 'x-small');
if (cost_type) {
$('#cost_type').val(cost_type);
}
$('#cost_type').change(function () {
updateChart();
});
});
}
if (drupalSettings.k8s.k8s_namespace_costs_chart_periods_json_url) {
let chart_periods_json_url = drupalSettings.k8s.k8s_namespace_costs_chart_periods_json_url;
$.get(chart_periods_json_url, function (json) {
$('#chart_options > span:last-child').append('<label for="chart_period">' + Drupal.t('Chart Period') + '</label>');
$('#chart_options > span:last-child label').css('margin-left', '10px');
$('#chart_options > span:last-child').append('<select id="chart_period">');
$.each(json, function (index, value) {
$('#chart_period').append('<option value="' + index + '">' + value + '</option>');
});
$('#chart_period option').css('font-size', 'x-small');
if (chart_period && $('select#chart_period option[value="' + chart_period + '"]').length > 0) {
$('#chart_period').val(chart_period);
}
else if ($('select#chart_period option[value="1"]').length > 0) {
$('#chart_period').val(1);
}
$('#chart_period').change(function () {
updateChart();
});
});
}
const json_url = drupalSettings.k8s.k8s_namespace_costs_chart_json_url;
const initChart = function () {
// Using chart data sent in Page build instead of JSON request upon
// page load.
const chartData = drupalSettings.k8s.k8s_namespace_costs_chart_initial_data;
let chart_datas = [];
$.each(chartData, function (idx) {
let namespace = this.namespace;
let selector = namespace.replace(':' , '--');
let cost_data = [];
$.each(this.costs, function () {
cost_data.push([
new Date(this.timestamp * 1000),
this.cost
]);
});
chart_datas.push({
id: namespace,
values: cost_data,
selector: '#' + selector,
});
$('#k8s_namespace_costs_chart').append('<div id="' + selector + '"></div>');
});
Drupal.Cloud.drawChart(chart_datas, true);
};
let updateChart = function () {
let update_json_url = json_url + '?' + 'cost_type=' + $('#cost_type').val() + '&period=' + $('#chart_period').val();
d3.json(update_json_url).then(function (json) {
let chart_datas = [];
$.each(json, function () {
let namespace = this.namespace;
let selector = namespace.replace(':' , '--');
let cost_data = [];
$.each(this.costs, function () {
cost_data.push([
new Date(this.timestamp * 1000),
this.cost
]);
});
chart_datas.push({
id: namespace,
values: cost_data,
selector: '#' + selector,
});
});
Drupal.Cloud.drawChart(chart_datas, true);
});
};
initChart();
let interval = drupalSettings.k8s.k8s_js_refresh_interval || 10;
setInterval(function () {
updateChart();
}, interval * 1000);
})(jQuery);
......@@ -43,6 +43,14 @@ k8s_namespace_costs_chart:
- k8s/moment
- cloud/chartjs
k8s_namespace_costs_horizon_chart:
version: 4.x
js:
js/k8s_namespace_costs_horizon_chart.js: {}
dependencies:
- core/jquery
- cloud/d3-horizon-chart
k8s_cost_block:
version: 4.x
js:
......
......@@ -29,6 +29,7 @@ class K8sNamespaceCostsChartBlock extends K8sBaseBlock {
return (parent::defaultConfiguration() ?: []) + [
'display_view_k8s_namespace_list_only' => 1,
'aws_cloud_chart_period' => 14,
'chart_type' => 1,
];
}
......@@ -52,6 +53,16 @@ class K8sNamespaceCostsChartBlock extends K8sBaseBlock {
'#default_value' => $this->configuration['aws_cloud_chart_period'],
];
$form['chart_type'] = [
'#type' => 'radios',
'#title' => $this->t('Chart Type'),
'#default_value' => $this->configuration['chart_type'] ?: 0,
'#options' => [
1 => $this->t('Horizon Chart'),
0 => $this->t('Line Chart'),
],
];
return $form;
}
......@@ -64,6 +75,8 @@ class K8sNamespaceCostsChartBlock extends K8sBaseBlock {
= $form_state->getValue('display_view_k8s_namespace_list_only');
$this->configuration['aws_cloud_chart_period']
= $form_state->getValue('aws_cloud_chart_period');
$this->configuration['chart_type']
= $form_state->getValue('chart_type');
}
/**
......@@ -237,12 +250,14 @@ class K8sNamespaceCostsChartBlock extends K8sBaseBlock {
: self::DEFAULT_COST_TYPE;
$build = [];
$library = empty($this->configuration['chart_type'])
? 'k8s/k8s_namespace_costs_chart'
: 'k8s/k8s_namespace_costs_horizon_chart';
$build['k8s_namespace_costs_chart'] = [
'#markup' => '<div id="k8s_namespace_costs_chart"></div>',
'#attached' => [
'library' => [
'k8s/k8s_namespace_costs_chart',
],
'library' => [$library] ,
'drupalSettings' => [
'k8s' => [
'k8s_js_refresh_interval' => $this->configFactory->get('k8s.settings')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment