File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
export const common = {
viewermenuFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-viewer-menu, .btn-viewer-menu-toggle, .viewer-menu-dim', function (e) {
$('.tabs-normal').tabsNormalFunc();
toggleCommonFunc({
obj: '.viewer',
className: 'is-active',
hasClass: function (obj) {
// var btnWidth, width;
// btnWidth = $('.btn-viewer-menu-toggle').outerWidth();
// width = $('.viewer-menu-area').outerWidth() + 0;
// TweenMax.fromTo('.viewer-menu-area', .5, {left: -(width)}, {left: 0});
},
noneClass: function (obj) {
// var btnWidth, width;
// btnWidth = $('.btn-viewer-menu-toggle').outerWidth();
// width = $('.viewer-menu-area').outerWidth() + 0;
// TweenMax.fromTo('.viewer-menu-area', .5, {left: "0"}, {left: -(width)});
}
});
});
};
init(this);
return $(this);
},
classViewermenuFunc: function () {
const init = function () {
$(document).on('click', '.btn-class-viewer-menu', function () {
$('.tabs-normal').tabsNormalFunc();
toggleCommonFunc({
obj: '.class-viewer',
className: 'is-active',
hasClass: function () {
},
noneClass: function () {
}
});
});
};
init();
return $(this);
},
qGroupFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-q-group-toggle', function (e) {
var $btn, $area, $cont;
$btn = $(this);
$area = $(this).closest('.q-group-area');
$cont = $area.find('.q-group-cont');
if ($area.hasClass('is-close')) {
setTimeout(function () {
$area.removeClass('is-close');
$btn.find('span').html('닫기');
}, 290);
} else {
$area.addClass('is-close');
$btn.find('span').html('열기');
}
});
};
init(this);
return $(this);
},
//swiper
thumbSwiper: function () {
var init = function (obj) {
const swiper = new Swiper('.thumb-swiper', {
preloadImages: false,
lazy: {
loadPrevNext: true
},
slideToClickedSlide: false,
slidesPerView: 5,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 15,
loop: false,
freeMode: true,
//observer: true,
//observeParents: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
breakpoints: {
// mo
0: {
slidesPerView: 2.05,
spaceBetween: 8
},
// tablet
767: {
slidesPerView: 3.1,
spaceBetween: 20
},
// pc
1279: {
slidesPerView: 4,
spaceBetween: 20,
freeMode: false
}
}
});
}
$(this).each(function () {
init(this);
});
return $(this);
},
thumbSwiperSm: function () {
var init = function (obj) {
if ($(obj).hasClass('thumb3')) {
const swiper = new Swiper('.thumb-swiper', {
preloadImages: false,
lazy: {
loadPrevNext: true
},
slideToClickedSlide: false,
slidesPerView: 5,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 8,
loop: false,
freeMode: true,
//observer: true,
//observeParents: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
breakpoints: {
// mo
0: {
slidesPerView: 2.05,
},
// tablet
767: {
slidesPerView: 3.1,
},
// pc
1279: {
slidesPerView: 3,
freeMode: false
}
}
});
}
else {
const swiper = new Swiper('.thumb-swiper', {
preloadImages: false,
lazy: {
loadPrevNext: true
},
slideToClickedSlide: false,
slidesPerView: 5,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 8,
loop: false,
freeMode: true,
//observer: true,
//observeParents: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
breakpoints: {
// mo
0: {
slidesPerView: 2.05,
},
// tablet
767: {
slidesPerView: 3.1,
},
// pc
1279: {
slidesPerView: 4,
freeMode: false
}
}
});
}
}
$(this).each(function () {
init(this);
});
return $(this);
},
// student
studentMnBannerSwiper: function (obj) {
var init = function (obj) {
var $el = $(obj).find('.swiper');
var $btnPrev = $(obj).find('.swiper-button-prev')[0];
var $btnNext = $(obj).find('.swiper-button-next')[0];
var $btnPlayStop = $(obj).find('.swiper-btn-playstop-toggle')[0];
var isPaused = false; // 재생 상태를 추적하는 변수
var swiper = new Swiper($el[0], {
effect:'fade',
fadeEffect: {
crossFade: true
},
preloadImages: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 0,
speed: 1000,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
on: {
}
});
// 중지 버튼 클릭 이벤트
$($btnPlayStop).on('click', function() {
if (isPaused) {
// 슬라이드 재생
swiper.autoplay.start();
$(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
isPaused = false;
} else {
// 슬라이드 정지
swiper.autoplay.stop();
$(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
isPaused = true;
}
});
}
init(this);
return $(this);
},
};
$.extend($.fn, common);
const emotionSwiper = () => {
const swiper = new Swiper('.emotion-swiper', {
preloadImages: false,
lazy: {
loadPrevNext: true
},
slideToClickedSlide: false,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 8,
loop: false,
freeMode: true,
//observer: true,
//observeParents: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
});
}
window.emotionSwiper = emotionSwiper;
//헤더 체크
const checkIsSticky = () => {
const header = document.querySelector('.site-header');
if (!header) return;
if (window.scrollY > 10) {
header.classList.add('is-sticky');
} else {
header.classList.remove('is-sticky');
}
}
/* chart */
// 공통
const defaltBg = '#F0F0F5';
const gradientColorPrimary = ['#88B7EC', '#1359A9'];
const gradientColorSecondary = ['#C2EFC2', '#42BE42'];
const gradientColorAccent = ['#FFC5D7', '#FF8291'];
const gradientColorPositive = ['#C2EFC2', '#42BE42'];
const gradientColorNegative = ['#FF8F66', '#FF6A33'];
const gradientColorYellow = ['#FFD47C', '#FFC550'] ;
const gradientColorGreen = ['#C2EFC2', '#42BE42'] ;
const gradientColorBlue = ['#88B7EC', '#1359A9'] ;
const gradientColorPink = ['#FFC5D7', '#FF8291'] ;
const gradientColorViolet = ['#BDA2E3', '#7A45C6'] ;
// const gradientColorOrange = ['#FF8F66', '#FF6A33'];
//const gradientColorRed = ['#F89999', '#F23B3B'];
const hexToRGBA = (hex, opacity) => {
// HEX 값에서 R, G, B 값을 추출
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const createGradient = (ctx, colors, opacity = 1) => {
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
// HEX 값을 RGBA로 변환 후 투명도 적용
const rgbaColor1 = hexToRGBA(colors[0], opacity);
const rgbaColor2 = hexToRGBA(colors[1], opacity);
gradient.addColorStop(0, rgbaColor1);
gradient.addColorStop(1, rgbaColor2);
return gradient;
};
window.createGradient = createGradient;
window.gradientColorPrimary = gradientColorPrimary;
window.gradientColorSecondary = gradientColorSecondary;
window.gradientColorAccent = gradientColorAccent;
window.gradientColorPositive = gradientColorPositive;
window.gradientColorNegative = gradientColorNegative;
window.gradientColorYellow = gradientColorYellow;
window.gradientColorGreen = gradientColorGreen;
window.gradientColorBlue = gradientColorBlue;
window.gradientColorPink = gradientColorPink;
window.gradientColorViolet = gradientColorViolet;
// window.gradientColorOrange =gradientColorOrange;
// window.gradientColorRed = gradientColorRed;
// window.gradientColorWarning = gradientColorWarning;
window.defaltBg = defaltBg;
const isMobile = window.innerWidth <= 768;
const chartStyleLabelFont = {
font: {
size: isMobile ? 10 : 12,
weight: 500,
family: "Pretendard"
},
}
const chartStyleLabel = {
backgroundColor: '#fff',
color: '#5A585E',
borderRadius: 4,
borderWidth: 1,
font: {
size: isMobile ? 10 : 11,
weight: 700,
family: "Pretendard"
},
borderColor: '#dddae3',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 15,
shadowOffsetX: 4,
shadowOffsetY: 4,
padding: {
left: isMobile ? 4 : 8,
right: isMobile ? 4 : 8
}
}
const chartStyleAvgLine = {
type: 'line',
borderColor: '#FF8291',
borderWidth: 1,
borderDash: [5, 5],
}
const chartDoughnutOption = {
// responsive: true,
cutout: '50%',
animation: false,
interaction: {
mode: null, // hover 모드 비활성화
intersect: false, // 데이터와의 교차점에서만 활성화되지 않도록 설정
},
plugins: {
tooltip: { enabled: false },
legend: { display: false },
}
}
function createChartDoughnut(elementId, value, gradientColors) {
document.getElementById(elementId).classList.add('chart-doughnut');
const ctx = document.getElementById(elementId).getContext('2d');
const backgroundColors = gradientColors.map(colors => {
if (Array.isArray(colors) && colors.length === 2) {
return createGradient(ctx, colors);
}
return defaltBg;
});
const dataValues = Array.isArray(value) && value.length > 1 ? value : [value, 100 - value];
const dataBackgroundColor = Array.isArray(value) && value.length > 1 ? backgroundColors : [createGradient(ctx, gradientColors), defaltBg];
return new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
data: dataValues,
backgroundColor: dataBackgroundColor,
borderWidth: 0,
}
]
},
options: {
...chartDoughnutOption,
}
});
}
function createChartBar(elementId, labels, data, onClick = null, avg = null) {
document.getElementById(elementId).classList.add('chart-bar');
const ctx = document.getElementById(elementId).getContext('2d');
const charBarStyle = {
datalabels: {
display: true,
anchor: 'end',
align: function (context) {
const dataValue = context.dataset.data[context.dataIndex];
var totalMinus = 95;
return dataValue === 0 || dataValue < totalMinus ? 'end' : 'center';
},
padding: {
left: isMobile ? 4 : 8,
right: isMobile ? 4 : 8
},
formatter: function(value) {
return value + '%';
},
...chartStyleLabel
},
backgroundColor: function(context) {
return context.dataIndex % 2 === 0
? createGradient(context.chart.ctx, gradientColorPrimary)
: createGradient(context.chart.ctx, gradientColorSecondary);
},
borderWidth: 0,
borderRadius: isMobile ? 16 : 24,
maxBarThickness: isMobile ? 16 : 24,
custom: function(context) {
const label = labels[context.dataIndex]; // labels 배열에서 해당 데이터 참조
return label.id ? { id: label.id } : {};
}
};
const charBarOptions = {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
annotation: avg ? {
annotations: {
avgLine: {
...chartStyleAvgLine,
yMin: avg,
yMax: avg,
}
}
} : false,
},
maintainAspectRatio: false,
animation: false,
scales: {
x: {
ticks: {
...chartStyleLabelFont
},
grid: { display: false },
},
y: {
beginAtZero: true,
border: { dash: [2,4] },
ticks: {
padding: isMobile ? 0 : 8,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) {
return value + '%';
}
},
max: 100,
min: 0,
},
},
onClick: onClick ? (event, elements) => {
onClick(event, elements, labels, data);
} : null,
// onHover: function(event, chartElement) {
// if (chartElement.length && onClick) {
// // 클릭 이벤트가 있을 때만 pointer 커서
// event.target.style.cursor = 'pointer';
// } else {
// // 클릭 이벤트가 없거나 바 위에 마우스가 없을 때는 기본 커서
// event.target.style.cursor = 'default';
// }
// }
};
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
data: data,
...charBarStyle,
},
],
},
plugins: [ChartDataLabels],
options: charBarOptions,
});
}
function createChartBarWidthauto(elementId, labels, data, onClick = null, avg = false) {
document.getElementById(elementId).classList.add('chart-bar-widthauto');
const ctx = document.getElementById(elementId).getContext('2d');
const canvas = document.getElementById(elementId);
const chartParent = canvas.parentElement; // chart1 div 요소
const canvasWidth = labels.length * 36; // 바의 개수에 따른 너비 계산
// 캔버스의 너비와 높이 설정
canvas.width = canvasWidth;
chartParent.style.minWidth = `${canvasWidth}px`;
const charBarStyle = {
datalabels: {
display: false,
},
backgroundColor: function(context) {
return context.dataIndex % 2 === 0
? createGradient(context.chart.ctx, gradientColorPrimary)
: createGradient(context.chart.ctx, gradientColorSecondary);
},
borderWidth: 0,
borderRadius: isMobile ? 16 : 24,
maxBarThickness: isMobile ? 16 : 24,
custom: function(context) {
const label = labels[context.dataIndex]; // labels 배열에서 해당 데이터 참조
return label.id ? { id: label.id } : {};
}
};
const charBarOptions = {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
annotation: {
annotations: {
avgLine: {
...chartStyleAvgLine,
yMin: avg,
yMax: avg,
}
}
}
},
maintainAspectRatio: false,
animation: false,
scales: {
x: {
ticks: {
...chartStyleLabelFont
},
grid: { display: false },
},
y: {
beginAtZero: true,
border: { dash: [2,4] },
ticks: {
padding: isMobile ? 0 : 8,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) {
return value + '%';
}
},
max: 100,
min: 0,
},
},
onClick: onClick ? (event, elements) => {
onClick(event, elements, labels, data);
} : null,
};
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
data: data,
...charBarStyle,
},
],
},
plugins: [ChartDataLabels],
options: charBarOptions,
});
}
function createChartLine(elementId, labels, dataSets, legends, colors, animation) {
document.getElementById(elementId).classList.add('chart-line');
const ctx = document.getElementById(elementId).getContext('2d');
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .1));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth:2,
lineTension:0.3,
pointRadius:4,
pointBackgroundColor:'#fff',
pointBorderWidth: 2,
fill: false,
}));
new Chart(ctx, {
type: "line",
data: { labels, datasets },
options: {
plugins: { tooltip: { enabled: false }, legend: { display: false } },
animation: false,
//responsive: true, // 반응형 설정
//maintainAspectRatio: false, // 부모 요소 크기에 맞게 차트 크기 조정
scales: {
x: {
beginAtZero: true,
grid: {
display: false,
},
ticks: {
...chartStyleLabelFont
}
},
y: {
suggestedMin: 0,
suggestedMax: 100,
border: {
dash: [2,4],
},
ticks: {
padding: isMobile ? 0 : 0,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) {
return value + '%';
}
},
},
},
},
});
}
function createChartRadar(elementId, labels, dataSets, legends, colors, animation) {
document.getElementById(elementId).classList.add('chart-radar');
const ctx = document.getElementById(elementId).getContext('2d');
const allDataValues = dataSets.flat();
const rawMax = Math.max(...allDataValues);
const safeMax = rawMax <= 4 ? 4 : rawMax;
const maxValue = Math.ceil(safeMax / 10) * 10 || 4;
const stepSize = maxValue / 4;
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .1));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth: 2,
lineTension: 0,
pointRadius: 4,
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
fill: true,
}));
new Chart(ctx, {
type: "radar",
data: { labels, datasets },
options: {
plugins: { tooltip: { enabled: false }, legend: { display: false } },
maintainAspectRatio: false,
animation: false,
// responsive: true,
// maintainAspectRatio: false,
scales: {
r: {
max: maxValue,
ticks: {
display: false, // 눈금 값 숨김
stepSize: stepSize,
},
pointLabels: {
...chartStyleLabelFont,
padding: isMobile ? 4 : 16,
},
}
}
},
});
}
//오늘의 학습 시간
function createChartTodayStudyTime(elementId, labels, dataSets, legends, colors, dataLabelClickHandler) {
const ctx = document.getElementById(elementId).getContext('2d');
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .2));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth: index === 0 ? 3 : 1,
lineTension: 0.3,
pointRadius: index === 0 ? 4 : 0,
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
fill: index === 0 ? false : true, // 첫 번째 데이터셋만 fill: false
datalabels: {
display: index === 0, // 첫 번째 데이터셋만 데이터 라벨 표시
...chartStyleLabelFont,
anchor: 'end',
align: 'end',
formatter: function(value) {
return value + '분';
},
},
}));
const maxDataValue = Math.max(...datasets.flatMap(dataset => dataset.data));
const stepSize = maxDataValue;
new Chart(ctx, {
type: "line",
data: {
labels,
datasets,
},
plugins: [ChartDataLabels],
options: {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
datalabels: {
listeners: {
click: dataLabelClickHandler
}
}
},
animation: false,
// responsive: true,
// maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
},
ticks: {
...chartStyleLabelFont
}
},
y: {
suggestedMin: 0,
suggestedMax: stepSize,
border: {
dash: [2,4],
},
ticks: {
padding: isMobile ? 0 : 8,
stepSize: stepSize,
...chartStyleLabelFont,
callback: function(value) {
return value + '분';
}
},
},
},
},
});
}
//콘텐츠 나의보관함 - 나의 콘텐츠 활동
function createChartContActivity(elementId, labels, datasetInfo) {
const ctx = document.getElementById(elementId).getContext('2d');
const datasets = datasetInfo.map(([label, data, color]) => ({
label: label,
data: data,
backgroundColor: createGradient(ctx, color),
borderWidth: 0,
borderRadius: 24,
maxBarThickness: 24,
barThickness: 32
}));
const maxDataValue = Math.max(...datasets.flatMap(dataset => dataset.data));
const stepSize = maxDataValue / 2;
return new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
plugins: {
tooltip: { enabled: false },
legend: { display: false },
},
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: stepSize,
...chartStyleLabelFont
},
border: {
dash: [2,4],
}
},
x: {
grid: {
display: false,
},
}
}
}
});
}
//요일별 히트맵
function createChartHeatmap(id, data, times, days, captionText) {
// 테이블 요소 가져오기
const table = document.getElementById(id);
// 기존 내용 초기화
table.innerHTML = '';
// 0. CAPTION 생성
const caption = document.createElement('caption');
caption.textContent = captionText;
table.appendChild(caption);
// 1. THEAD 생성
const tableHead = document.createElement('thead');
const headerRow = document.createElement('tr');
const emptyHeader = document.createElement('th');
headerRow.appendChild(emptyHeader); // 왼쪽 상단 빈 칸
days.forEach(day => {
const dayHeader = document.createElement('th');
dayHeader.textContent = day;
headerRow.appendChild(dayHeader);
});
tableHead.appendChild(headerRow);
table.appendChild(tableHead);
// 2. TBODY 생성 및 행 추가
const tableBody = document.createElement('tbody');
data.forEach((rowData, rowIndex) => {
const row = document.createElement('tr');
const timeCell = document.createElement('th');
timeCell.textContent = times[rowIndex];
row.appendChild(timeCell);
// 각 셀에 값과 색상 추가
rowData.forEach(value => {
const cell = document.createElement('td');
cell.textContent = value;
// 색상 수준 계산 및 클래스 추가
if (value == 0) cell.classList.add('level0');
else if (value < 6) cell.classList.add('level1');
else if (value < 11) cell.classList.add('level2');
else if (value < 16) cell.classList.add('level3');
else if (value >= 16) cell.classList.add('level4');
// else cell.classList.add('level5');
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
// 3. TFOOT 생성 및 요일별 총합 추가
const tableFoot = document.createElement('tfoot');
const footerRow = document.createElement('tr');
const emptyCell = document.createElement('td');
footerRow.appendChild(emptyCell);
days.forEach((_, colIndex) => {
const sum = data.reduce((total, row) => total + row[colIndex], 0);
const footerCell = document.createElement('td');
footerCell.textContent = `${sum}명`;
footerRow.appendChild(footerCell);
});
tableFoot.appendChild(footerRow);
table.appendChild(tableFoot);
}
window.createChartDoughnut = createChartDoughnut;
window.createChartBar = createChartBar;
window.createChartBarWidthauto = createChartBarWidthauto;
window.createChartLine = createChartLine;
window.createChartRadar = createChartRadar;
window.createChartHeatmap = createChartHeatmap;
window.createChartTodayStudyTime = createChartTodayStudyTime; //오늘의 학습 시간
window.createChartContActivity = createChartContActivity;//클래스 홈 - 클래스 활동 분석
export const initCusCommon= () => {
$(document).ready(function () {
$('.viewer .viewer-menu-area').viewermenuFunc();
$('.class-viewer .viewer-menu-area').classViewermenuFunc();
$('.q-group-area').qGroupFunc();
$(document).on('change', '.item-type-checkradio input[type="radio"]', function () {
var newType = $(this).attr('id');
$('.item-type-list').removeClass('item-type-feed item-type-thumb item-type-table').addClass(newType);
});
$(document).on('click', '.btn-chasi-toggle', function (e) {
var $area;
$area = $(this).closest('li');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
},
noneClass: function (obj) {
}
});
});
//swiper
if ($('.thumb-swiper').length) {
$('.thumb-swiper').thumbSwiper();
}
if ($('.student-mn-cont-banner').length) {
$('.student-mn-cont-banner').studentMnBannerSwiper();
}
if ($('.emotion-swiper').length) {
}
checkIsSticky();
window.onscroll = () => {
checkIsSticky();
}
document.querySelectorAll('.chart-bar-stack').forEach(container => {
const bars = Array.from(container.querySelectorAll('.bar'));
const visibleBars = bars.filter(bar => parseFloat(bar.style.width) > 0);
bars.forEach(bar => {
bar.classList.remove('is-active', 'is-active-first', 'is-active-last');
});
visibleBars.forEach((bar, index, arr) => {
bar.classList.add('is-active');
if (index === 0) bar.classList.add('is-active-first');
if (index === arr.length - 1) bar.classList.add('is-active-last');
});
});
// document.querySelectorAll('.chart-bar-stack').forEach(container => {
// container.querySelectorAll('.bar').forEach(bar => {
// const width = parseFloat(bar.style.width);
// if (width > 0) {
// bar.classList.add('is-active');
// } else {
// bar.classList.remove('is-active');
// }
// });
// });
});
};