preline/dist/helper-apexcharts.mjs

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

import{default as e}from"ApexCharts";var t={};
/*
 * @version: 4.2.0
 * @author: Preline Labs Ltd.
 * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
 * Copyright 2024 Preline Labs Ltd.
 */
function s(e,t){const{title:s,mode:a,valuePrefix:r="$",isValueDivided:l=!0,valuePostfix:n="",hasTextLabel:o=!1,invertGroup:i=!1,labelDivider:d="",wrapperClasses:c="ms-0.5 mb-2 bg-white border border-gray-200 text-gray-800 rounded-lg shadow-md dark:bg-neutral-800 dark:border-neutral-700",wrapperExtClasses:p="",seriesClasses:u="text-xs",seriesExtClasses:x="",titleClasses:h="font-semibold text-sm! bg-white! border-gray-200! text-gray-800 rounded-t-lg dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200",titleExtClasses:g="",markerClasses:$="w-2.5! h-2.5! me-1.5!",markerExtClasses:v="rounded-xs!",valueClasses:m="font-medium! text-gray-500 ms-auto! dark:text-neutral-400",valueExtClasses:b="",labelClasses:f="text-gray-500 dark:text-neutral-400",labelExtClasses:y="",thousandsShortName:w="k"}=t,{dataPointIndex:k}=e,{colors:C}=e.w.globals,E=e.ctx.opts.series;let S="";return E.forEach((t,s)=>{const a=e.series[s][k]||("object"!=typeof E[s].data[k]?E[s].data[k]:e.series[s][k]),c=E[s].name,p=i?{left:`${o?c:""}${d}`,right:`${r}${a>=1e3&&l?`${a/1e3}${w}`:a}${n}`}:{left:`${r}${a>=1e3&&l?`${a/1e3}${w}`:a}${n}`,right:`${o?c:""}${d}`},h=`<span class="apexcharts-tooltip-text-y-label ${f} ${y}">${p.left}</span>`;S+=`<div class="apexcharts-tooltip-series-group !flex ${o?"justify-between!":""} order-${s+1} ${u} ${x}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${$} ${v}" style="background: ${C[s]}"></span>\n        <div class="apexcharts-tooltip-text">\n          <div class="apexcharts-tooltip-y-group py-0.5!">\n            <span class="apexcharts-tooltip-text-y-value ${m} ${b}">${p.right}</span>\n          </div>\n        </div>\n      </span>\n      ${h}\n    </div>`}),`<div class="${"dark"===a?"dark ":""}${c} ${p}">\n    <div class="apexcharts-tooltip-title ${h} ${g}">${s}</div>\n    ${S}\n  </div>`}function a(e,t){const{mode:s,valuePrefix:a="$",valuePostfix:r="",divider:l="",wrapperClasses:n="ms-0.5 mb-2 bg-white border border-gray-200 text-gray-800 rounded-lg shadow-md dark:bg-neutral-800 dark:border-neutral-700",wrapperExtClasses:o="",markerClasses:i="w-2.5! h-2.5! me-1.5!",markerStyles:d="",markerExtClasses:c="rounded-xs!",valueClasses:p="font-medium! text-gray-500 ms-auto! dark:text-neutral-400",valueExtClasses:u=""}=t,{dataPointIndex:x,seriesIndex:h,series:g}=e,{name:$}=e.ctx.opts.series[h];return`<div class="${"dark"===s?"dark ":""}${n} ${o}">\n    <div class="apexcharts-tooltip-series-group flex!">\n\t\t\t<span class="apexcharts-tooltip-marker ${i} ${c}" style="${d}"></span>\n      <span class="flex items-center">\n        <div class="apexcharts-tooltip-text">\n          <div class="apexcharts-tooltip-y-group py-0.5!">\n            <span class="apexcharts-tooltip-text-y-value ${p} ${u}">${$}${l}</span>\n          </div>\n        </div>\n      </span>\n\t\t\t<span class="apexcharts-tooltip-text-y-value ${p} ${u}">${`${a}${g[h][x]}${r}`}</span>\n    </div>\n  </div>`}function r(e,t){const{title:s,mode:a,valuePrefix:r="$",isValueDivided:l=!0,valuePostfix:n="",hasCategory:o=!0,hasTextLabel:i=!1,labelDivider:d="",wrapperClasses:c="ms-0.5 mb-2 bg-white border border-gray-200 text-gray-800 rounded-lg shadow-md dark:bg-neutral-800 dark:border-neutral-700",wrapperExtClasses:p="",seriesClasses:u="justify-between! w-full text-xs",seriesExtClasses:x="",titleClasses:h="flex justify-between font-semibold text-sm! bg-white! border-gray-200! text-gray-800 rounded-t-lg dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200",titleExtClasses:g="",markerClasses:$="w-2.5! h-2.5! me-1.5!",markerExtClasses:v="rounded-xs!",valueClasses:m="font-medium! text-gray-500 ms-auto! dark:text-neutral-400",valueExtClasses:b="",labelClasses:f="text-gray-500 dark:text-neutral-400 ms-2",labelExtClasses:y="",thousandsShortName:w="k"}=t,{dataPointIndex:k}=e,{categories:C}=e.ctx.opts.xaxis,{colors:E}=e.w.globals,S=e.ctx.opts.series;let L="";const P=S[0].data[k],j=S[1].data[k],A=C[k].split(" "),I=o?`${A[0]}${A[1]?" ":""}${A[1]?A[1].slice(0,3):""}`:"",q=0===j?0:(P-j)/Math.abs(j)*100,B=0===q,T=q>0,z=T?'<svg class="inline-block size-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>':'<svg class="inline-block size-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>';return S.forEach((t,s)=>{const a=e.series[s][k]||("object"!=typeof S[s].data[k]?S[s].data[k]:e.series[s][k]),o=S[s].name,c=S[s].altValue||null,p=`<span class="apexcharts-tooltip-text-y-label ${f} ${y}">${I} ${o||""}</span>`,h=c||`<span class="apexcharts-tooltip-text-y-value ${m} ${b}">${r}${a>=1e3&&l?`${a/1e3}${w}`:a}${n}${d}</span>`;L+=`<div class="apexcharts-tooltip-series-group ${u} !flex order-${s+1} ${x}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${$} ${v}" style="background: ${E[s]}"></span>\n        <div class="apexcharts-tooltip-text">\n          <div class="apexcharts-tooltip-y-group py-0.5!">\n            ${h}\n          </div>\n        </div>\n      </span>\n      ${i?p:""}\n    </div>`}),`<div class="${"dark"===a?"dark ":""}${c} ${p}">\n    <div class="apexcharts-tooltip-title ${h} ${g}">\n      <span>${s}</span>\n      <span class="flex items-center gap-x-1 ${B?"":T?"text-green-600":"text-red-600"} ms-2">\n        ${B?"":z}\n        <span class="inline-block text-sm">\n          ${q.toFixed(1)}%\n        </span>\n      </span>\n    </div>\n    ${L}\n  </div>`}function l(e,t){const{title:s,mode:a,valuePrefix:r="$",isValueDivided:l=!0,valuePostfix:n="",hasCategory:o=!0,hasTextLabel:i=!1,labelDivider:d="",wrapperClasses:c="ms-0.5 mb-2 bg-white border border-gray-200 text-gray-800 rounded-lg shadow-md dark:bg-neutral-800 dark:border-neutral-700",wrapperExtClasses:p="",seriesClasses:u="justify-between! w-full text-xs",seriesExtClasses:x="",titleClasses:h="flex justify-between font-semibold text-sm! bg-white! border-gray-200! text-gray-800 rounded-t-lg dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200",titleExtClasses:g="",markerClasses:$="w-2.5! h-2.5! me-1.5!",markerExtClasses:v="rounded-xs!",valueClasses:m="font-medium! text-gray-500 ms-auto! dark:text-neutral-400",valueExtClasses:b="",labelClasses:f="text-gray-500 dark:text-neutral-400 ms-2",labelExtClasses:y="",thousandsShortName:w="k"}=t,{dataPointIndex:k}=e,{categories:C}=e.ctx.opts.xaxis,{colors:E}=e.w.globals,S=e.ctx.opts.series;let L="";const P=S[0].data[k],j=S[1].data[k],A=C[k].split(" "),I=o?`${A[0]}${A[1]?" ":""}${A[1]?A[1].slice(0,3):""}`:"",q=0===j?0:(P-j)/Math.abs(j)*100,B=0===q,T=q>0,z=T?'<svg class="inline-block size-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>':'<svg class="inline-block size-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>';return S.forEach((t,s)=>{const a=e.series[s][k]||("object"!=typeof S[s].data[k]?S[s].data[k]:e.series[s][k]),o=S[s].name,c=`<span class="apexcharts-tooltip-text-y-label ${f} ${y}">${r}${a>=1e3&&l?`${a/1e3}${w}`:a}${n}</span>`;L+=`<div class="apexcharts-tooltip-series-group !flex ${u} order-${s+1} ${x}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${$} ${v}" style="background: ${E[s]}"></span>\n        <div class="apexcharts-tooltip-text text-xs">\n          <div class="apexcharts-tooltip-y-group py-0.5!">\n            <span class="apexcharts-tooltip-text-y-value ${m} ${b}">${I} ${o||""}${d}</span>\n          </div>\n        </div>\n      </span>\n      ${i?c:""}\n    </div>`}),`<div class="${"dark"===a?"dark ":""}${c} ${p}">\n    <div class="apexcharts-tooltip-title ${h} ${g}">\n      <span>${s}</span>\n      <span class="flex items-center gap-x-1 ${B?"":T?"text-green-600":"text-red-600"} ms-2">\n        ${B?"":z}\n        <span class="inline-block text-sm">\n          ${q.toFixed(1)}%\n        </span>\n      </span>\n    </div>\n    ${L}\n  </div>`}function n({series:e,seriesIndex:t,w:s},a){const{globals:r}=s,{colors:l}=r;return`<div class="apexcharts-tooltip-series-group" style="background-color: ${l[t]}; display: block;">\n    <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">\n      <div class="apexcharts-tooltip-y-group" style="color: ${a[t]}">\n        <span class="apexcharts-tooltip-text-y-label">${r.labels[t]}: </span>\n        <span class="apexcharts-tooltip-text-y-value">${e[t]}</span>\n      <div class="apexcharts-tooltip-y-group" style="color: ${a[t]}">\n        <span class="apexcharts-tooltip-text-y-label">${r.labels[t]}: </span>\n        <span class="apexcharts-tooltip-text-y-value">${e[t]}</span>\n      </div>\n    </div>\n  </div>`}function o(t,s,a,r){const l=document.querySelector(t);let n=null;if(!l)return!1;const o=l.closest('[role="tabpanel"]');let i=null;Array.from(document.querySelector("html").classList).forEach(e=>{["dark","light","default"].includes(e)&&(i=e)});const d=(e=i||localStorage.getItem("hs_theme"))=>"dark"===e||"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?window._.merge(s("dark"),"function"==typeof r?r():r):window._.merge(s("light"),"function"==typeof a?a():a);if(l){let t=!0;n=new e(l,d()),n.render(),setTimeout(()=>{t=!1},100);let s=!1;const a=e=>{t||(n.updateOptions(d(e.detail)),window.dispatchEvent(new Event("resize")))},r=e=>{var t;let s;const r=null!==(t=null==e?void 0:e.target)&&void 0!==t?t:document.querySelector("html");Array.from(r.classList).forEach(e=>{["dark","light","default"].includes(e)&&(s=e)}),a({detail:s||localStorage.getItem("hs_theme")})},i=e=>{const t=e.detail;t&&t.isClipboardInit||r(t)},c=e=>{if(s)return;const a=e.detail,n=null==a?void 0:a.target;n&&l&&n.contains(l)&&(s=!0,t?setTimeout(()=>r(a),120):r(a))};window.addEventListener("on-hs-appearance-change",a),window.addEventListener("on-hs-color-theme-change",e=>{setTimeout(()=>i(e),50)}),window.addEventListener("on-hs-font-change",e=>{setTimeout(()=>i(e),50)}),window.addEventListener("on-hs-brand-change",e=>{setTimeout(()=>i(e),50)}),window.addEventListener("on-hs-clipboard-init-progress",c),o&&o.addEventListener("on-hs-appearance-change",a)}return n}function i(e,{shadowClasses:t="fill-gray-200"}={}){var s;const a=e.el.querySelector(".apexcharts-grid"),r=e.el.querySelector("svg");if(!a||!r)return;const l=(null===(s=e.w.config.xaxis)||void 0===s?void 0:s.categories)||[];if(0===l.length)return;let n=null,o=!1,i=!1;function d(){n&&o&&!i&&(i=!0,n.classList.remove("opacity-100"),null==n||n.remove(),n=null,o=!1,i=!1)}r.addEventListener("mousemove",s=>{const r=a.getBoundingClientRect();if(s.clientX<r.left||s.clientX>r.right||s.clientY<r.top||s.clientY>r.bottom)return void d();const c=(s.clientX-r.left)/r.width,p=Math.floor(c*l.length);p<0||p>=l.length?d():function(s){var a;const r=e.el.querySelector(".apexcharts-bar-series");if(!r)return;const l=r.querySelectorAll("path")[s];if(!l)return;const d=l.getBBox(),c=d.x,p=d.y,u=d.width;p<=0||(n||(n=document.createElementNS("http://www.w3.org/2000/svg","rect"),n.setAttribute("y","0"),n.setAttribute("class",t),null===(a=l.parentNode)||void 0===a||a.insertBefore(n,l)),n.setAttribute("x",c.toString()),n.setAttribute("width",u.toString()),n.setAttribute("height",p.toString()),requestAnimationFrame(()=>{null==n||n.classList.add("opacity-100")}),o=!0,i=!1)}(p)}),r.addEventListener("mouseleave",d)}function d(e,t=document.documentElement){const s=getComputedStyle(t).getPropertyValue(e);return s?s.trim():null}t.d=(e,s)=>{for(var a in s)t.o(s,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:s[a]})},t.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);export{o as buildChart,a as buildHeatmapTooltip,s as buildTooltip,r as buildTooltipCompareTwo,l as buildTooltipCompareTwoAlt,n as buildTooltipForDonut,d as cssVarToValue,i as fullBarHoverEffect};