flyonui/dist/helper-apexcharts.mjs

The easiest, free and open-source Tailwind CSS component library with semantic classes.

var e={d:(s,t)=>{for(var a in t)e.o(t,a)&&!e.o(s,a)&&Object.defineProperty(s,a,{enumerable:!0,get:t[a]})},o:(e,s)=>Object.prototype.hasOwnProperty.call(e,s)},s={};
/*
 * @version: 3.0.1
 * @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 t(e,s){const{title:t,valuePrefix:a="$",isValueDivided:l=!0,valuePostfix:n="",hasTextLabel:o=!1,invertGroup:r=!1,labelDivider:i="",wrapperClasses:p="bg-base-100 min-w-28 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:c="",seriesClasses:x="text-xs items-center",seriesExtClasses:d="",titleClasses:$="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg !px-2.5",titleExtClasses:u="",markerClasses:b="!w-2.5 !h-2.5 !me-1.5 rtl:!mr-0 !rounded-full",markerExtClasses:v="",valueClasses:m="!font-medium text-base-content/80 !ms-auto",valueExtClasses:f="",labelClasses:h="text-base-content",labelExtClasses:C=""}=s,{dataPointIndex:g}=e,{colors:y}=e.ctx.opts,w=e.ctx.opts.series;let E="";return w.forEach(((s,t)=>{const p=e.series[t][g]||("object"!=typeof w[t].data[g]?w[t].data[g]:e.series[t][g]),c=w[t].name,$=r?{left:`${o?c:""}${i}`,right:`${a}${p>=1e3&&l?p/1e3+"k":p}${n}`}:{left:`${a}${p>=1e3&&l?p/1e3+"k":p}${n}`,right:`${o?c:""}${i}`},u=`<span class="apexcharts-tooltip-text-y-label ${h} ${C}">${$.left}</span>`;E+=`<div class="apexcharts-tooltip-series-group !flex ${o?"!justify-between":""} order-${t+1} ${x} ${d}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${b} ${v}" style="background: ${y[t]}"></span>\n        <div class="apexcharts-tooltip-text">\n          <div class="apexcharts-tooltip-y-group">\n            <span class="apexcharts-tooltip-text-y-value ${m} ${f}">${$.right}</span>\n          </div>\n        </div>\n      </span>\n      ${u}\n    </div>`})),`<div class="${p} ${c}">\n    <div class="apexcharts-tooltip-title ${$} ${u}">${t}</div>\n    ${E}\n  </div>`}function a(e,s){const{dataPointIndex:t}=e,{categories:a}=e.ctx.opts.xaxis,{colors:l}=e.ctx.opts,n=e.ctx.opts.series,{title:o,valuePrefix:r="$",isValueDivided:i=!0,valuePostfix:p="",hasCategory:c=!0,hasTextLabel:x=!1,labelDivider:d="",wrapperClasses:$="bg-base-100 min-w-48 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:u="",seriesClasses:b="text-xs items-center !justify-between",seriesExtClasses:v="",titleClasses:m="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg !px-2.5",titleExtClasses:f="flex justify-between",markerClasses:h="!w-2.5 !h-2.5 !me-1.5 !rounded-full",markerExtClasses:C="",valueClasses:g="!font-medium text-base-content/80 !ms-auto",valueExtClasses:y="",labelClasses:w="text-base-content !fw-medium",labelExtClasses:E=""}=s;let k="";const j=n[0].data[t],P=n[1].data[t],T=a[t].split(" "),D=c?`${T[0]}${T[1]?" ":""}${T[1]?T[1].slice(0,3):""}`:"",q=j>P,z=j/P===1,I=z?0:j/P*100,V=q?'<span class="icon-[tabler--trending-up] size-5"></span>':'<span class="icon-[tabler--trending-down] size-5"></span>';return n.forEach(((s,a)=>{const o=e.series[a][t]||("object"!=typeof n[a].data[t]?n[a].data[t]:e.series[a][t]),c=n[a].name,$=n[a].altValue||null,u=`<span class="apexcharts-tooltip-text-y-label ${w} ${E}">${D} ${c||""}</span>`,m=$||`<span class="apexcharts-tooltip-text-y-value ${g} ${y}">${r}${o>=1e3&&i?o/1e3+"k":o}${p}${d}</span>`;k+=`<div class="apexcharts-tooltip-series-group ${b} !flex order-${a+1} ${v}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${h} ${C}" style="background: ${l[a]}"></span>\n        <div class="apexcharts-tooltip-text">\n          <div class="apexcharts-tooltip-y-group">\n            ${m}\n          </div>\n        </div>\n      </span>\n      ${x?u:""}\n    </div>`})),`<div class="${$} ${u}">\n    <div class="apexcharts-tooltip-title ${m} ${f}">\n      <span>${o}</span>\n      <span class="flex items-center gap-x-1 ${z?"":q?"text-success":"text-error"} ms-2">\n        ${z?"":V}\n        <span class="inline-block text-sm"> ${I.toFixed(1)}% </span>\n      </span>\n    </div>\n    ${k}\n  </div>`}function l(e,s){const{dataPointIndex:t}=e,{categories:a}=e.ctx.opts.xaxis,{colors:l}=e.ctx.opts,n=e.ctx.opts.series,{title:o,valuePrefix:r="$",isValueDivided:i=!0,valuePostfix:p="",hasCategory:c=!0,hasTextLabel:x=!1,labelDivider:d="",wrapperClasses:$="bg-base-100 min-w-48 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:u="",seriesClasses:b="text-xs items-center !justify-between",seriesExtClasses:v="",titleClasses:m="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg flex !justify-between !px-2.5",titleExtClasses:f="",markerClasses:h="!w-2.5 !h-2.5 !me-1.5 !rounded-full",markerExtClasses:C="",valueClasses:g="!font-medium text-base-content/80 !ms-auto",valueExtClasses:y="",labelClasses:w="text-base-content !fw-medium",labelExtClasses:E=""}=s;let k="";const j=n[0].data[t],P=n[1].data[t],T=a[t].split(" "),D=c?`${T[0]}${T[1]?" ":""}${T[1]?T[1].slice(0,3):""}`:"",q=j>P,z=j/P===1,I=z?0:j/P*100,V=q?'<span class="icon-[tabler--trending-up] size-5"></span>':'<span class="icon-[tabler--trending-down] size-5"></span>';return n.forEach(((s,a)=>{const o=e.series[a][t]||("object"!=typeof n[a].data[t]?n[a].data[t]:e.series[a][t]),c=n[a].name,$=`<span class="apexcharts-tooltip-text-y-label ${w} ${E}">${r}${o>=1e3&&i?o/1e3+"k":o}${p}</span>`;k+=`<div class="apexcharts-tooltip-series-group !flex ${b} order-${a+1} ${v}">\n      <span class="flex items-center">\n        <span class="apexcharts-tooltip-marker ${h} ${C}" style="background: ${l[a]}"></span>\n        <div class="apexcharts-tooltip-text text-xs">\n          <div class="apexcharts-tooltip-y-group">\n            <span class="apexcharts-tooltip-text-y-value ${g} ${y}">${D} ${c||""}${d}</span>\n          </div>\n        </div>\n      </span>\n      ${x?$:""}\n    </div>`})),`<div class="${$} ${u}">\n    <div class="apexcharts-tooltip-title ${m} ${f}">\n      <span>${o}</span>\n      <span class="flex items-center gap-x-1 ${z?"":q?"text-success":"text-error"} ms-2">\n        ${z?"":V}\n        <span class="inline-block text-sm"> ${I.toFixed(1)}% </span>\n      </span>\n    </div>\n    ${k}\n  </div>`}function n({series:e,seriesIndex:s,w:t},a){const{globals:l}=t,{colors:n}=l;return`<div class="apexcharts-tooltip-series-group" style="background-color: ${n[s]}; display: block;">\n    <div class="apexcharts-tooltip-text" style="font-size: 12px;">\n      <div class="apexcharts-tooltip-y-group" style="color: ${a[s]}">\n        <span class="apexcharts-tooltip-text-y-label">${l.labels[s]}: </span>\n        <span class="apexcharts-tooltip-text-y-value">${e[s]}</span>\n      </div>\n    </div>\n  </div>`}function o(e,s){const t=document.querySelector(e);let a=null;if(!t)return!1;return t&&(a=new ApexCharts(t,s()),a.render()),a}e.d(s,{Jw:()=>o,TE:()=>n,jD:()=>a,qH:()=>t,qc:()=>l});const r=s.Jw,i=s.qH,p=s.jD,c=s.qc,x=s.TE;export{r as buildChart,i as buildTooltip,p as buildTooltipCompareTwo,c as buildTooltipCompareTwoAlt,x as buildTooltipForDonut};