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

Issue #3401036 by Masami, yas: Refactor to native JavaScript from jQuery (cloud_horizon_chart.js)

parent 3f843d4d
No related branches found
No related tags found
No related merge requests found
(function ($) {
(function () {
'use strict';
Drupal.Cloud = {};
window.Drupal = {};
window.Drupal.Cloud = {};
const colors = [
['#edf8e9', '#bae4b3', '#74c476', '#31a354', '#006d2c'],
......@@ -17,18 +18,28 @@
const BACKGROUND_DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
// Draw Chart Function.
Drupal.Cloud.drawChart = function (data, first) {
window.Drupal.Cloud.drawChart = function (data, first) {
data.forEach(function (item, idx) {
// Delete current chart.
d3.select(item.selector).select('svg').remove();
if (document.querySelector(item.selector)) {
document.querySelector(item.selector).innerHTML = '';
}
// Draw charts.
if (first && idx === 0) {
// Delete the axis.
d3.select('#x-axis').remove();
const xAxis = document.querySelector('#x-axis');
if (xAxis && xAxis.parentNode) {
xAxis.parentNode.removeChild(xAxis);
}
// Add <div> for the axis.
$(item.selector).before('<div id="x-axis"></div>');
const xAxisDiv = document.createElement('div');
xAxisDiv.id = 'x-axis';
const chartContainer = document.querySelector(item.selector);
if (chartContainer && chartContainer.parentNode) {
chartContainer.parentNode.insertBefore(xAxisDiv, chartContainer);
}
// Draw charts.
const axis = new HorizonChart();
......@@ -37,25 +48,32 @@
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);
const chartg = document.querySelectorAll('#x-axis g:first-child');
if (chartg && chartg.style) {
chartg.style.display = 'none';
}
const axisg = document.querySelectorAll('#x-axis .axis');
if (axis && axisg.style) {
axisg.style.fontSize = AXIS_FONT_SIZE;
}
}
// Draw charts.
const horizonChart = new HorizonChart();
const fontColor = $(item.selector).css('color');
const fontColor = window.getComputedStyle(document.querySelector(item.selector)).color;
let bgColor = '';
$(item.selector).parents().each(function () {
console.log(getComputedStyle(this).backgroundColor);
let color = getComputedStyle(this).backgroundColor;
if (color && color !== BACKGROUND_DEFAULT_COLOR) {
bgColor = color;
return false;
let parents = document.querySelectorAll(item.selector).parents;
if (parents) {
for (let i = 0; i < parents.length; i++) {
console.log(window.getComputedStyle(parents[i]).backgroundColor);
let color = window.getComputedStyle(parents[i]).backgroundColor;
if (color && color !== BACKGROUND_DEFAULT_COLOR) {
bgColor = color;
break;
}
}
});
}
horizonChart.setTitle(item.id);
horizonChart.setTitleFontSize(TITLE_FONT_SIZE);
horizonChart.setTitlePosition(TITLE_POSITION_X, TITLE_POSITION_Y);
......@@ -67,23 +85,26 @@
horizonChart.setShowXScale(false);
horizonChart.draw();
const g = d3.selectAll(item.selector + ' svg g');
const title = d3.selectAll(item.selector + ' svg text');
const bbox = $(item.selector + ' svg text')[0].getBBox();
const g = document.querySelectorAll(item.selector + ' svg g');
const title = document.querySelectorAll(item.selector + ' svg text');
const bbox = document.querySelectorAll(item.selector + ' svg text')[0].getBBox();
g.insert('rect', item.selector + ' svg text')
.attr('x', bbox.x - 1)
.attr('y', bbox.y)
.attr('width', bbox.width + 2)
.attr('height', bbox.height)
.attr('fill', bgColor)
.style('opacity', '0.8');
const rect = document.createElement('rect');
rect.setAttribute('x', bbox.x - 1);
rect.setAttribute('y', bbox.y);
rect.setAttribute('width', bbox.width + 2);
rect.setAttribute('height', bbox.height);
rect.setAttribute('fill', bgColor);
rect.style.opacity = '0.8';
if (g) {
g.insertBefore(rect, item.selector + ' svg text');
}
$(item.selector).css('margin-bottom', '0');
document.querySelector(item.selector).style.marginBottom = '0';
if (!first || idx > 0) {
$(item.selector).css('border-top', '1px solid #ddd');
document.querySelector(item.selector).style.borderTop = '1px solid #ddd';
}
});
};
})(jQuery);
})();
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