🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@commute/market-data-chartjs

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commute/market-data-chartjs - npm Package Compare versions

Comparing version
2.0.0
 to
2.1.0
+1
-1
dist/index.js

@@ -1,1 +0,1 @@

"use strict";(()=>{var d=document.documentElement.getAttribute("data-wf-locale")||document.documentElement.getAttribute("data-locale")||"es-AR";function f(n=6e3,e=50){let i=Date.now(),a=()=>{typeof Chart<"u"?(console.log("Chart.js is loaded. Initializing charts..."),g()):Date.now()-i<n?setTimeout(a,e):console.error("Chart.js library did not load within the timeout period.")};a(),h("data-number",d)}function g(){document.querySelectorAll(".chart-item").forEach(e=>{let i=`${e.id}-canvas`,a=document.getElementById(i),t=e.querySelector(".chart-data");if(a&&t&&t.textContent)try{let s=JSON.parse(t.textContent.replace(/&quot;/g,'"')||"{}").filter(c=>t.dataset.value&&Number(c[t.dataset.value])!==0),o=t.dataset.label?s.map(c=>c[t.dataset.label]):[],l=s.map(c=>parseFloat(c[t.dataset.value]))||[],{data:u,labels:m}=p(l,o,150);b(a,m,u,e.id),t.remove()}catch(r){console.error(`Error parsing JSON for chart ID: ${e.id}`,r)}})}function p(n,e,i=50){let a=n.length;if(a<=i)return{data:n,labels:e};let t=Math.ceil(a/i),r=n.filter((o,l)=>l%t===0),s=e.filter((o,l)=>l%t===0);return{data:r,labels:s}}function b(n,e,i,a){let t=n.getContext("2d");if(!t){console.error(`Canvas context not found for chart ID: ${a}`);return}let r=t.createLinearGradient(0,0,0,400);r.addColorStop(0,"rgba(0, 192, 0, 0.7)"),r.addColorStop(1,"rgba(0, 192, 0, 0.1)"),new Chart(t,{type:"line",data:{labels:e,datasets:[{label:"",data:i,borderColor:"rgba(0, 192, 0, 0.7)",backgroundColor:r,fill:!0,tension:.4,pointRadius:0}]},options:{responsive:!0,maintainAspectRatio:!1,scales:{x:{grid:{display:!1,drawTicks:!0,offset:!0},title:{display:!1,text:"Time"},ticks:{autoSkip:!0,autoSkipPadding:20,maxRotation:0,includeBounds:!0,padding:-30,callback:function(s,o){return o===0?"":e[o].split(":").slice(0,2).join(":")},offset:!0,clip:!1,display:!0}},y:{grid:{display:!1,drawTicks:!0,offset:!0},title:{display:!1,text:"Values"},ticks:{callback:function(s,o){return o===0?"":s.toLocaleString(d,{minimumFractionDigits:0,maximumFractionDigits:2})}},clip:!1}},plugins:{legend:{display:!1,position:"top"}},interaction:{intersect:!1,mode:"index"},layout:{padding:{bottom:-50}}}})}function h(n,e){document.querySelectorAll(`[${n}]`).forEach(a=>{let t=parseFloat(a.textContent||"0");isNaN(t)||(a.textContent=t.toLocaleString(e,{minimumFractionDigits:0,maximumFractionDigits:2}))})}document.addEventListener("DOMContentLoaded",()=>f());})();
"use strict";(()=>{var d=document.documentElement.getAttribute("data-wf-locale")||document.documentElement.getAttribute("data-locale")||"es-AR";function f(r=6e3,e=50){let n=Date.now(),a=()=>{typeof Chart<"u"?(console.log("Chart.js is loaded. Initializing charts..."),g()):Date.now()-n<r?setTimeout(a,e):console.error("Chart.js library did not load within the timeout period.")};a(),h("data-number",d)}function g(){document.querySelectorAll(".chart-item").forEach(e=>{let n=`${e.id}-canvas`,a=document.getElementById(n),t=e.querySelector(".chart-data");if(a&&t&&t.textContent)try{let s=JSON.parse(t.textContent.replace(/&quot;/g,'"')||"{}").filter(c=>t.dataset.value&&Number(c[t.dataset.value])!==0),o=t.dataset.label?s.map(c=>c[t.dataset.label]):[],l=s.map(c=>parseFloat(c[t.dataset.value]))||[],{data:u,labels:m}=p(l,o,150);b(a,m,u,e.id),t.remove()}catch(i){console.error(`Error parsing JSON for chart ID: ${e.id}`,i)}})}function p(r,e,n=50){let a=r.length;if(a<=n)return{data:r,labels:e};let t=Math.ceil(a/n),i=r.filter((o,l)=>l%t===0),s=e.filter((o,l)=>l%t===0);return{data:i,labels:s}}function b(r,e,n,a){let t=r.getContext("2d");if(!t){console.error(`Canvas context not found for chart ID: ${a}`);return}let i=t.createLinearGradient(0,0,0,400);i.addColorStop(0,"rgba(0, 192, 0, 0.7)"),i.addColorStop(1,"rgba(0, 192, 0, 0.1)"),new Chart(t,{type:"line",data:{labels:e,datasets:[{label:"",data:n,borderColor:"rgba(0, 192, 0, 0.7)",backgroundColor:i,fill:!0,tension:.4,pointRadius:0}]},options:{responsive:!0,maintainAspectRatio:!1,scales:{x:{grid:{display:!1,drawTicks:!0,offset:!0},title:{display:!1,text:"Time"},ticks:{autoSkip:!0,autoSkipPadding:20,maxRotation:0,includeBounds:!0,padding:-30,callback:function(s,o){return o===0?"":e[o].split(":").slice(0,2).join(":")},offset:!0,clip:!1,display:!0}},y:{grid:{display:!1,drawTicks:!0,offset:!0},title:{display:!1,text:"Values"},ticks:{callback:function(s,o){return o===0?"":s.toLocaleString(d,{minimumFractionDigits:0,maximumFractionDigits:2})}},clip:!1}},plugins:{legend:{display:!1,position:"top"}},interaction:{intersect:!1,mode:"index"},layout:{padding:{bottom:-50}}}})}function h(r,e){document.querySelectorAll(`[${r}]`).forEach(a=>{let t=parseFloat(a.textContent||"0");isNaN(t)||(a.textContent=t.toLocaleString(e,{minimumFractionDigits:0,maximumFractionDigits:2}))})}function v(){document.querySelectorAll("[data-tab-target]").forEach(e=>{let n=e.dataset.tabTarget,a=n?document.getElementById(n):null;a&&e.addEventListener("click",t=>{t.preventDefault(),!a.closest('[aria-selected="true"]')&&a.click()})})}function C(){f(),v()}document.addEventListener("DOMContentLoaded",C);})();
+2
-2
dist/index.js.map
{
"version": 3,
"sources": ["../bin/live-reload.js", "../src/index.ts"],
"sourcesContent": ["new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener('change', () => location.reload());\n", "// TypeScript example for Chart.js\n//import { Chart, registerables } from 'chart.js';\n\n// Register components\n//Chart.register(...registerables);\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ndeclare const Chart: any; // Declare Chart globally for TypeScript to avoid errors\n// Obtener el idioma desde Webflow o usar un valor por defecto\nconst locale =\n document.documentElement.getAttribute('data-wf-locale') ||\n document.documentElement.getAttribute('data-locale') ||\n 'es-AR';\n\n/**\n * Waits for the Chart.js library to load and initializes the charts.\n */\nfunction waitForChartJsAndInitialize(timeout = 6000, interval = 50): void {\n const startTime = Date.now();\n\n const checkChartJs = () => {\n if (typeof Chart !== 'undefined') {\n // eslint-disable-next-line no-console\n console.log('Chart.js is loaded. Initializing charts...');\n initializeCharts(); // Call the main chart initialization function\n } else if (Date.now() - startTime < timeout) {\n setTimeout(checkChartJs, interval); // Retry after the interval\n } else {\n console.error('Chart.js library did not load within the timeout period.');\n }\n };\n\n checkChartJs();\n\n // Format all elements with data-number attribute\n formatNumbersByAttribute('data-number', locale);\n}\n\n/**\n * Initializes all Chart.js charts on the page.\n */\nfunction initializeCharts(): void {\n // Select all chart items\n const chartItems = document.querySelectorAll<HTMLDivElement>('.chart-item');\n\n chartItems.forEach((chartItem) => {\n const canvasId = `${chartItem.id}-canvas`; // Unique canvas ID\n const canvas = document.getElementById(canvasId) as HTMLCanvasElement;\n const scriptTag = chartItem.querySelector<HTMLScriptElement>('.chart-data');\n\n if (canvas && scriptTag && scriptTag.textContent) {\n try {\n const chartData = JSON.parse(scriptTag.textContent.replace(/&quot;/g, '\"') || '{}');\n const filteredData = chartData.filter(\n (data: { [x: string]: string }) =>\n scriptTag.dataset.value && Number(data[scriptTag.dataset.value]) !== 0\n );\n // Extract data for the chart\n interface ChartData {\n [key: string]: string;\n }\n\n const labels: string[] = scriptTag.dataset.label\n ? filteredData.map((data: ChartData) => data[scriptTag.dataset.label as string])\n : [];\n const values: number[] =\n filteredData.map((data: ChartData) =>\n parseFloat(data[scriptTag.dataset.value as string])\n ) || [];\n\n const { data: downsampledData, labels: downsampledLabels } = adaptiveDownsampling(\n values,\n labels,\n 150\n );\n\n initializeChart(canvas, downsampledLabels, downsampledData, chartItem.id);\n scriptTag.remove(); // Remove the script tag after processing\n } catch (error) {\n console.error(`Error parsing JSON for chart ID: ${chartItem.id}`, error);\n }\n }\n });\n}\n\n/**\n * Reduces the number of data points and corresponding labels by downsampling them\n * to a specified maximum number of points using an adaptive approach.\n *\n * @param data - An array of numerical data points to be downsampled.\n * @param labels - An array of labels corresponding to the data points.\n * @param maxPoints - The maximum number of points to retain after downsampling. Default is 50.\n * @returns An object containing the downsampled data and labels.\n */\nfunction adaptiveDownsampling(data: number[], labels: string[], maxPoints = 50) {\n const totalPoints = data.length;\n\n // Si hay pocos datos, no hacer downsampling\n if (totalPoints <= maxPoints) {\n return { data, labels };\n }\n\n // Calcular factor de reducci\u00F3n din\u00E1mico\n const factor = Math.ceil(totalPoints / maxPoints);\n\n // Filtrar datos y etiquetas cada 'factor' puntos\n const downsampledData = data.filter((_: number, index: number) => index % factor === 0);\n const downsampledLabels = labels.filter((_: string, index: number) => index % factor === 0);\n\n return { data: downsampledData, labels: downsampledLabels };\n}\n\n/**\n * Initialize a Chart.js chart.\n * @param canvas - HTMLCanvasElement where the chart will render.\n * @param labels - Array of labels for the x-axis.\n * @param data - Array of data values for the chart.\n * @param chartId - Unique ID for the chart (for logging/debugging purposes).\n */\nfunction initializeChart(\n canvas: HTMLCanvasElement,\n labels: string[],\n data: number[],\n chartId: string\n): void {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n console.error(`Canvas context not found for chart ID: ${chartId}`);\n return;\n }\n\n // Create gradient for the chart background\n const gradient = ctx.createLinearGradient(0, 0, 0, 400);\n gradient.addColorStop(0, 'rgba(0, 192, 0, 0.7)'); // Top color\n gradient.addColorStop(1, 'rgba(0, 192, 0, 0.1)'); // Bottom transparent color\n\n // Initialize Chart.js chart\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n label: ``,\n data: data,\n borderColor: 'rgba(0, 192, 0, 0.7)',\n backgroundColor: gradient,\n fill: true,\n tension: 0.4,\n pointRadius: 0,\n //cubicInterpolationMode: 'monotone',\n //hoverRadius: 7,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n grid: { display: false, drawTicks: true, offset: true },\n title: { display: false, text: 'Time' },\n ticks: {\n autoSkip: true, // Salta etiquetas si son demasiadas\n autoSkipPadding: 20, // Asegura que haya espacio entre ticks\n maxRotation: 0, // Evita que las etiquetas se roten\n //align: 'right',\n includeBounds: true,\n //maxTicksLimit: 10,\n padding: -30,\n //z: 10,\n callback: function (value: number, index: number): string {\n return index === 0 ? '' : labels[index].split(':').slice(0, 2).join(':'); // Quita los segundos\n },\n offset: true, // \uD83D\uDD39 Evita que los ticks extremos queden pegados\n clip: false, // \uD83D\uDD39 Evita que se corten los valores en los bordes\n display: true,\n },\n },\n y: {\n grid: {\n display: false,\n drawTicks: true, // \uD83D\uDD39 Asegura que los ticks no queden fuera del \u00E1rea de dibujo\n offset: true,\n },\n title: { display: false, text: 'Values' },\n ticks: {\n callback: function (value: number, index: number): string {\n return index === 0\n ? ''\n : value.toLocaleString(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n });\n },\n },\n clip: false,\n },\n },\n plugins: {\n legend: { display: false, position: 'top' },\n },\n interaction: {\n intersect: false,\n mode: 'index',\n },\n layout: {\n padding: {\n bottom: -50, // \uD83D\uDD39 Ajusta este valor para m\u00E1s margen\n },\n },\n },\n });\n}\n\n/**\n * Formats all numbers with a specific data attribute according to the locale.\n * @param attribute - The data attribute to select elements.\n * @param locale - The locale to use for formatting numbers.\n */\nfunction formatNumbersByAttribute(attribute: string, locale: string): void {\n const elements = document.querySelectorAll<HTMLElement>(`[${attribute}]`);\n\n elements.forEach((element) => {\n const value = parseFloat(element.textContent || '0');\n if (!isNaN(value)) {\n element.textContent = value.toLocaleString(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n });\n }\n });\n}\n\n// Run the check for Chart.js after DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => waitForChartJsAndInitialize());\n"],
"mappings": "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",
"sourcesContent": ["new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener('change', () => location.reload());\n", "// TypeScript example for Chart.js\n//import { Chart, registerables } from 'chart.js';\n\n// Register components\n//Chart.register(...registerables);\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ndeclare const Chart: any; // Declare Chart globally for TypeScript to avoid errors\n// Obtener el idioma desde Webflow o usar un valor por defecto\nconst locale =\n document.documentElement.getAttribute('data-wf-locale') ||\n document.documentElement.getAttribute('data-locale') ||\n 'es-AR';\n\n/**\n * Waits for the Chart.js library to load and initializes the charts.\n */\nfunction waitForChartJsAndInitialize(timeout = 6000, interval = 50): void {\n const startTime = Date.now();\n\n const checkChartJs = () => {\n if (typeof Chart !== 'undefined') {\n // eslint-disable-next-line no-console\n console.log('Chart.js is loaded. Initializing charts...');\n initializeCharts(); // Call the main chart initialization function\n } else if (Date.now() - startTime < timeout) {\n setTimeout(checkChartJs, interval); // Retry after the interval\n } else {\n console.error('Chart.js library did not load within the timeout period.');\n }\n };\n\n checkChartJs();\n\n // Format all elements with data-number attribute\n formatNumbersByAttribute('data-number', locale);\n}\n\n/**\n * Initializes all Chart.js charts on the page.\n */\nfunction initializeCharts(): void {\n // Select all chart items\n const chartItems = document.querySelectorAll<HTMLDivElement>('.chart-item');\n\n chartItems.forEach((chartItem) => {\n const canvasId = `${chartItem.id}-canvas`; // Unique canvas ID\n const canvas = document.getElementById(canvasId) as HTMLCanvasElement;\n const scriptTag = chartItem.querySelector<HTMLScriptElement>('.chart-data');\n\n if (canvas && scriptTag && scriptTag.textContent) {\n try {\n const chartData = JSON.parse(scriptTag.textContent.replace(/&quot;/g, '\"') || '{}');\n const filteredData = chartData.filter(\n (data: { [x: string]: string }) =>\n scriptTag.dataset.value && Number(data[scriptTag.dataset.value]) !== 0\n );\n // Extract data for the chart\n interface ChartData {\n [key: string]: string;\n }\n\n const labels: string[] = scriptTag.dataset.label\n ? filteredData.map((data: ChartData) => data[scriptTag.dataset.label as string])\n : [];\n const values: number[] =\n filteredData.map((data: ChartData) =>\n parseFloat(data[scriptTag.dataset.value as string])\n ) || [];\n\n const { data: downsampledData, labels: downsampledLabels } = adaptiveDownsampling(\n values,\n labels,\n 150\n );\n\n initializeChart(canvas, downsampledLabels, downsampledData, chartItem.id);\n scriptTag.remove(); // Remove the script tag after processing\n } catch (error) {\n console.error(`Error parsing JSON for chart ID: ${chartItem.id}`, error);\n }\n }\n });\n}\n\n/**\n * Reduces the number of data points and corresponding labels by downsampling them\n * to a specified maximum number of points using an adaptive approach.\n *\n * @param data - An array of numerical data points to be downsampled.\n * @param labels - An array of labels corresponding to the data points.\n * @param maxPoints - The maximum number of points to retain after downsampling. Default is 50.\n * @returns An object containing the downsampled data and labels.\n */\nfunction adaptiveDownsampling(data: number[], labels: string[], maxPoints = 50) {\n const totalPoints = data.length;\n\n // Si hay pocos datos, no hacer downsampling\n if (totalPoints <= maxPoints) {\n return { data, labels };\n }\n\n // Calcular factor de reducci\u00F3n din\u00E1mico\n const factor = Math.ceil(totalPoints / maxPoints);\n\n // Filtrar datos y etiquetas cada 'factor' puntos\n const downsampledData = data.filter((_: number, index: number) => index % factor === 0);\n const downsampledLabels = labels.filter((_: string, index: number) => index % factor === 0);\n\n return { data: downsampledData, labels: downsampledLabels };\n}\n\n/**\n * Initialize a Chart.js chart.\n * @param canvas - HTMLCanvasElement where the chart will render.\n * @param labels - Array of labels for the x-axis.\n * @param data - Array of data values for the chart.\n * @param chartId - Unique ID for the chart (for logging/debugging purposes).\n */\nfunction initializeChart(\n canvas: HTMLCanvasElement,\n labels: string[],\n data: number[],\n chartId: string\n): void {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n console.error(`Canvas context not found for chart ID: ${chartId}`);\n return;\n }\n\n // Create gradient for the chart background\n const gradient = ctx.createLinearGradient(0, 0, 0, 400);\n gradient.addColorStop(0, 'rgba(0, 192, 0, 0.7)'); // Top color\n gradient.addColorStop(1, 'rgba(0, 192, 0, 0.1)'); // Bottom transparent color\n\n // Initialize Chart.js chart\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n label: ``,\n data: data,\n borderColor: 'rgba(0, 192, 0, 0.7)',\n backgroundColor: gradient,\n fill: true,\n tension: 0.4,\n pointRadius: 0,\n //cubicInterpolationMode: 'monotone',\n //hoverRadius: 7,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n grid: { display: false, drawTicks: true, offset: true },\n title: { display: false, text: 'Time' },\n ticks: {\n autoSkip: true, // Salta etiquetas si son demasiadas\n autoSkipPadding: 20, // Asegura que haya espacio entre ticks\n maxRotation: 0, // Evita que las etiquetas se roten\n //align: 'right',\n includeBounds: true,\n //maxTicksLimit: 10,\n padding: -30,\n //z: 10,\n callback: function (value: number, index: number): string {\n return index === 0 ? '' : labels[index].split(':').slice(0, 2).join(':'); // Quita los segundos\n },\n offset: true, // \uD83D\uDD39 Evita que los ticks extremos queden pegados\n clip: false, // \uD83D\uDD39 Evita que se corten los valores en los bordes\n display: true,\n },\n },\n y: {\n grid: {\n display: false,\n drawTicks: true, // \uD83D\uDD39 Asegura que los ticks no queden fuera del \u00E1rea de dibujo\n offset: true,\n },\n title: { display: false, text: 'Values' },\n ticks: {\n callback: function (value: number, index: number): string {\n return index === 0\n ? ''\n : value.toLocaleString(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n });\n },\n },\n clip: false,\n },\n },\n plugins: {\n legend: { display: false, position: 'top' },\n },\n interaction: {\n intersect: false,\n mode: 'index',\n },\n layout: {\n padding: {\n bottom: -50, // \uD83D\uDD39 Ajusta este valor para m\u00E1s margen\n },\n },\n },\n });\n}\n\n/**\n * Formats all numbers with a specific data attribute according to the locale.\n * @param attribute - The data attribute to select elements.\n * @param locale - The locale to use for formatting numbers.\n */\nfunction formatNumbersByAttribute(attribute: string, locale: string): void {\n const elements = document.querySelectorAll<HTMLElement>(`[${attribute}]`);\n\n elements.forEach((element) => {\n const value = parseFloat(element.textContent || '0');\n if (!isNaN(value)) {\n element.textContent = value.toLocaleString(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n });\n }\n });\n}\n\n/**\n * Handles the dropdown functionality for the charts index.\n */\nfunction chartsIndexDropdown() {\n const dropdownLinks = document.querySelectorAll<HTMLElement>('[data-tab-target]');\n\n dropdownLinks.forEach((link) => {\n const targetId: string | undefined = link.dataset.tabTarget;\n const target: HTMLElement | null = targetId ? document.getElementById(targetId) : null;\n\n if (!target) return;\n\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const isActive = target.closest('[aria-selected=\"true\"]') ? true : false;\n\n if (isActive) return;\n\n target.click();\n });\n });\n}\n\n// Initialize all functions\nfunction init() {\n waitForChartJsAndInitialize();\n chartsIndexDropdown();\n}\n\n// Run the init function after the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', init);\n"],
"mappings": "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",
"names": ["locale"]
}
+1
-1
package.json
{
"name": "@commute/market-data-chartjs",
"version": "2.0.0",
"version": "2.1.0",
"description": "A library to help you render market data using ChartJS.",

@@ -5,0 +5,0 @@ "homepage": "https://github.com/Commute-Agency/market-data-chartjs#readme",

+34
-5
src/index.ts

@@ -192,5 +192,5 @@ // TypeScript example for Chart.js

: value.toLocaleString(locale, {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
});
minimumFractionDigits: 0,
maximumFractionDigits: 2,
});
},

@@ -236,3 +236,32 @@ },

// Run the check for Chart.js after DOM is loaded
document.addEventListener('DOMContentLoaded', () => waitForChartJsAndInitialize());
/**
* Handles the dropdown functionality for the charts index.
*/
function chartsIndexDropdown() {
const dropdownLinks = document.querySelectorAll<HTMLElement>('[data-tab-target]');
dropdownLinks.forEach((link) => {
const targetId: string | undefined = link.dataset.tabTarget;
const target: HTMLElement | null = targetId ? document.getElementById(targetId) : null;
if (!target) return;
link.addEventListener('click', (e) => {
e.preventDefault();
const isActive = target.closest('[aria-selected="true"]') ? true : false;
if (isActive) return;
target.click();
});
});
}
// Initialize all functions
function init() {
waitForChartJsAndInitialize();
chartsIndexDropdown();
}
// Run the init function after the DOM is loaded
document.addEventListener('DOMContentLoaded', init);