${labelMarkup}

${hasTextLabel ? labelMarkup : ''}

`; } function buildChart( id: string, shared: Function, light: string | Function, dark: string | Function, ) { const $chart = document.querySelector(id); let chart: any = null; if (!$chart) return false; const tabpanel = $chart.closest('[role="tabpanel"]'); let modeFromBodyClass: string | null = null; Array.from(document.querySelector('html').classList).forEach((cl) => { if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl; }); const optionsFn = ( mode = modeFromBodyClass || localStorage.getItem('hs_theme'), ) => { if ( mode === 'dark' || (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) ) { return window._.merge( shared('dark'), typeof dark === 'function' ? dark() : dark, ); } else { return window._.merge( shared('light'), typeof light === 'function' ? light() : light, ); } }; if ($chart) { let isInitialLoad = true; chart = new ApexCharts($chart, optionsFn()); chart.render(); setTimeout(() => { isInitialLoad = false; }, 100); let hasInitProgressApplied = false; const handleThemeChange = (evt: EventWithProps) => { if (isInitialLoad) return; chart.updateOptions(optionsFn(evt.detail)); // If the chart is in an iframe, dispatch a resize event to the parent window if (window.self !== window.top) window.dispatchEvent(new Event('resize')); }; const applyOptionsChange = (detail: any) => { let modeFromBodyClass; const target = detail?.target ?? document.querySelector('html'); Array.from(target.classList).forEach((cl: string) => { if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl; }); handleThemeChange({ detail: modeFromBodyClass || localStorage.getItem('hs_theme'), } as EventWithProps); }; const handleOptionsChange = (evt: EventWithProps) => { const detail = evt.detail as any; if (detail && detail.isClipboardInit) return; applyOptionsChange(detail); }; const handleClipboardInitProgress = (evt: EventWithProps) => { if (hasInitProgressApplied) return; const detail = evt.detail as any; const target = detail?.target; if (!target || !$chart || !target.contains($chart)) return; hasInitProgressApplied = true; if (isInitialLoad) { setTimeout(() => applyOptionsChange(detail), 120); } else { applyOptionsChange(detail); } }; window.addEventListener('on-hs-appearance-change', handleThemeChange); window.addEventListener( 'on-hs-color-theme-change', (evt: EventWithProps) => { setTimeout(() => handleOptionsChange(evt), 50); }, ); window.addEventListener('on-hs-font-change', (evt: EventWithProps) => { setTimeout(() => handleOptionsChange(evt), 50); }); window.addEventListener('on-hs-brand-change', (evt: EventWithProps) => { setTimeout(() => handleOptionsChange(evt), 50); }); window.addEventListener( 'on-hs-clipboard-init-progress', handleClipboardInitProgress, ); if (tabpanel) { tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange); } } return chart; } function fullBarHoverEffect( chartCtx: ApexCharts & { el: HTMLElement; w: { config: { xaxis?: { categories?: any[] } } }; }, { shadowClasses = 'fill-gray-200' }: { shadowClasses?: string } = {}, ): void { const grid = chartCtx.el.querySelector('.apexcharts-grid'); const svg = chartCtx.el.querySelector('svg'); if (!grid || !svg) return; const categories: any[] = chartCtx.w.config.xaxis?.categories || []; if (categories.length === 0) return; let shadowRect: SVGRectElement | null = null; let isVisible = false; let isRemoving = false; function cleanup() { shadowRect?.remove(); shadowRect = null; isVisible = false; isRemoving = false; } function showForIndex(index: number) { const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series'); if (!seriesGroup) return; const bars = seriesGroup.querySelectorAll('path'); const bar = bars[index]; if (!bar) return; const bbox = bar.getBBox(); const x = bbox.x; const y = bbox.y; const width = bbox.width; if (y <= 0) return; if (!shadowRect) { shadowRect = document.createElementNS( 'http://www.w3.org/2000/svg', 'rect', ); shadowRect.setAttribute('y', '0'); shadowRect.setAttribute('class', shadowClasses); bar.parentNode?.insertBefore(shadowRect, bar); } shadowRect.setAttribute('x', x.toString()); shadowRect.setAttribute('width', width.toString()); shadowRect.setAttribute('height', y.toString()); requestAnimationFrame(() => { shadowRect?.classList.add('opacity-100'); }); isVisible = true; isRemoving = false; } function hide() { if (!shadowRect || !isVisible || isRemoving) return; isRemoving = true; shadowRect.classList.remove('opacity-100'); cleanup(); } svg.addEventListener('mousemove', (e: MouseEvent) => { const gridRect = grid.getBoundingClientRect(); if ( e.clientX < gridRect.left || e.clientX > gridRect.right || e.clientY < gridRect.top || e.clientY > gridRect.bottom ) { hide(); return; } const relativeX = e.clientX - gridRect.left; const ratio = relativeX / gridRect.width; const index = Math.floor(ratio * categories.length); if (index < 0 || index >= categories.length) { hide(); return; } showForIndex(index); }); svg.addEventListener('mouseleave', hide); } function cssVarToValue(name: string, context: HTMLElement = document.documentElement): string | null { const value = getComputedStyle(context).getPropertyValue(name); if (!value) return null; return value.trim(); } export { buildChart, buildHeatmapTooltip, buildTooltip, buildTooltipCompareTwo, buildTooltipCompareTwoAlt, buildTooltipForDonut, fullBarHoverEffect, cssVarToValue };