UNPKG

flyonui

Version:

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

flyonui.com

themeselection/flyonui

8 lines • 9.39 kB
1
2
3
4
5
6
7
8
import{default as e}from"ApexCharts"; /* * @version: 3.2.2 * @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,s){const{title:t,valuePrefix:a="$",isValueDivided:n=!0,valuePostfix:l="",hasTextLabel:r=!1,invertGroup:o=!1,labelDivider:i="",wrapperClasses:c="bg-base-100 min-w-28 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:p="",seriesClasses:x="text-xs items-center",seriesExtClasses:d="",titleClasses:u="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg !px-2.5",titleExtClasses:$="",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:g="",thousandsShortName:C="k"}=s,{dataPointIndex:y}=e,{colors:w}=e.ctx.opts,E=e.ctx.opts.series;let k="";return E.forEach((s,t)=>{const c=e.series[t][y]||("object"!=typeof E[t].data[y]?E[t].data[y]:e.series[t][y]),p=E[t].name,u=o?{left:`${r?p:""}${i}`,right:`${a}${c>=1e3&&n?`${c/1e3}${C}`:c}${l}`}:{left:`${a}${c>=1e3&&n?`${c/1e3}${C}`:c}${l}`,right:`${r?p:""}${i}`},$=`<span class="apexcharts-tooltip-text-y-label ${h} ${g}">${u.left}</span>`;k+=`<div class="apexcharts-tooltip-series-group !flex ${r?"!justify-between":""} order-${t+1} ${x} ${d}">\n <span class="flex items-center">\n <span class="apexcharts-tooltip-marker ${b} ${v}" style="background: ${w[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}">${u.right}</span>\n </div>\n </div>\n </span>\n ${$}\n </div>`}),`<div class="${c} ${p}">\n <div class="apexcharts-tooltip-title ${u} ${$}">${t}</div>\n ${k}\n </div>`}function t(e,s){const{valuePrefix:t="$",valuePostfix:a="",divider:n="",wrapperClasses:l="ms-0.5 mb-2 bg-base-100 border border-base-content/20 text-base-content rounded-box shadow-md",wrapperExtClasses:r="",markerClasses:o="!w-2.5 !h-2.5 !me-1.5",markerStyles:i="",markerExtClasses:c="!rounded-xs",valueClasses:p="!font-medium text-base-content !ms-auto",valueExtClasses:x=""}=s,{dataPointIndex:d,seriesIndex:u,series:$}=e,{name:b}=e.ctx.opts.series[u];return`<div class="${l} ${r}">\n <div class="apexcharts-tooltip-series-group !flex">\n <span class="apexcharts-tooltip-marker ${o} ${c}" style="${i}"></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} ${x}">${b}${n}</span>\n </div>\n </div>\n </span>\n <span class="apexcharts-tooltip-text-y-value ${p} ${x}">${`${t}${$[u][d]}${a}`}</span>\n </div>\n </div>`}function a(e,s){const{title:t,valuePrefix:a="$",isValueDivided:n=!0,valuePostfix:l="",hasCategory:r=!0,hasTextLabel:o=!1,labelDivider:i="",wrapperClasses:c="bg-base-100 min-w-48 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:p="",seriesClasses:x="text-xs items-center !justify-between",seriesExtClasses:d="",titleClasses:u="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg !px-2.5",titleExtClasses:$="flex justify-between",markerClasses:b="!w-2.5 !h-2.5 !me-1.5 !rounded-full",markerExtClasses:v="",valueClasses:m="!font-medium text-base-content/80 !ms-auto",valueExtClasses:f="",labelClasses:h="text-base-content !font-medium",labelExtClasses:g="",thousandsShortName:C="k"}=s,{dataPointIndex:y}=e,{categories:w}=e.ctx.opts.xaxis,{colors:E}=e.ctx.opts,k=e.ctx.opts.series;let S="";const P=k[0].data[y],A=k[1].data[y],j=w[y].split(" "),L=r?`${j[0]}${j[1]?" ":""}${j[1]?j[1].slice(0,3):""}`:"",q=0===A?0:(P-A)/Math.abs(A)*100,D=0===q,I=q>0,z=I?'<span class="icon-[tabler--trending-up] size-5"></span>':'<span class="icon-[tabler--trending-down] size-5"></span>';return k.forEach((s,t)=>{const r=e.series[t][y]||("object"!=typeof k[t].data[y]?k[t].data[y]:e.series[t][y]),c=k[t].name,p=k[t].altValue||null,u=`<span class="apexcharts-tooltip-text-y-label ${h} ${g}">${L} ${c||""}</span>`,$=p||`<span class="apexcharts-tooltip-text-y-value ${m} ${f}">${a}${r>=1e3&&n?`${r/1e3}${C}`:r}${l}${i}</span>`;S+=`<div class="apexcharts-tooltip-series-group ${x} !flex order-${t+1} ${d}">\n <span class="flex items-center">\n <span class="apexcharts-tooltip-marker ${b} ${v}" style="background: ${E[t]}"></span>\n <div class="apexcharts-tooltip-text">\n <div class="apexcharts-tooltip-y-group">\n ${$}\n </div>\n </div>\n </span>\n ${o?u:""}\n </div>`}),`<div class="${c} ${p}">\n <div class="apexcharts-tooltip-title ${u} ${$}">\n <span>${t}</span>\n <span class="flex items-center gap-x-1 ${D?"":I?"text-success":"text-error"} ms-2">\n ${D?"":z}\n <span class="inline-block text-sm"> ${q.toFixed(1)}% </span>\n </span>\n </div>\n ${S}\n </div>`}function n(e,s){const{title:t,valuePrefix:a="$",isValueDivided:n=!0,valuePostfix:l="",hasCategory:r=!0,hasTextLabel:o=!1,labelDivider:i="",wrapperClasses:c="bg-base-100 min-w-48 text-base-content/80 rounded-lg !border-none",wrapperExtClasses:p="",seriesClasses:x="text-xs items-center !justify-between",seriesExtClasses:d="",titleClasses:u="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg flex !justify-between !px-2.5",titleExtClasses:$="",markerClasses:b="!w-2.5 !h-2.5 !me-1.5 !rounded-full",markerExtClasses:v="",valueClasses:m="!font-medium text-base-content/80 !ms-auto",valueExtClasses:f="",labelClasses:h="text-base-content !font-medium",labelExtClasses:g="",thousandsShortName:C="k"}=s,{dataPointIndex:y}=e,{categories:w}=e.ctx.opts.xaxis,{colors:E}=e.ctx.opts,k=e.ctx.opts.series;let S="";const P=k[0].data[y],A=k[1].data[y],j=w[y].split(" "),L=r?`${j[0]}${j[1]?" ":""}${j[1]?j[1].slice(0,3):""}`:"",q=0===A?0:(P-A)/Math.abs(A)*100,D=0===q,I=q>0,z=I?'<span class="icon-[tabler--trending-up] size-5"></span>':'<span class="icon-[tabler--trending-down] size-5"></span>';return k.forEach((s,t)=>{const r=e.series[t][y]||("object"!=typeof k[t].data[y]?k[t].data[y]:e.series[t][y]),c=k[t].name,p=`<span class="apexcharts-tooltip-text-y-label ${h} ${g}">${a}${r>=1e3&&n?`${r/1e3}${C}`:r}${l}</span>`;S+=`<div class="apexcharts-tooltip-series-group !flex ${x} order-${t+1} ${d}">\n <span class="flex items-center">\n <span class="apexcharts-tooltip-marker ${b} ${v}" style="background: ${E[t]}"></span>\n <div class="apexcharts-tooltip-text text-xs">\n <div class="apexcharts-tooltip-y-group">\n <span class="apexcharts-tooltip-text-y-value ${m} ${f}">${L} ${c||""}${i}</span>\n </div>\n </div>\n </span>\n ${o?p:""}\n </div>`}),`<div class="${c} ${p}">\n <div class="apexcharts-tooltip-title ${u} ${$}">\n <span>${t}</span>\n <span class="flex items-center gap-x-1 ${D?"":I?"text-success":"text-error"} ms-2">\n ${D?"":z}\n <span class="inline-block text-sm"> ${q.toFixed(1)}% </span>\n </span>\n </div>\n ${S}\n </div>`}function l({series:e,seriesIndex:s,w:t},a){const{globals:n}=t,{colors:l}=n;return`<div class="apexcharts-tooltip-series-group" style="background-color: ${l[s]}; 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[s]}">\n <span class="apexcharts-tooltip-text-y-label">${n.labels[s]}: </span>\n <span class="apexcharts-tooltip-text-y-value">${e[s]}</span>\n </div>\n </div>\n </div>`}function r(s,t){const a=document.querySelector(s);let n=null;if(!a)return!1;return a&&(n=new e(a,t()),n.render()),n}function o(e,{shadowClasses:s="fill-gray-200"}={}){var t;const a=e.el.querySelector(".apexcharts-grid"),n=e.el.querySelector("svg");if(!a||!n)return;const l=(null===(t=e.w.config.xaxis)||void 0===t?void 0:t.categories)||[];if(0===l.length)return;let r=null,o=!1,i=!1;function c(){r&&o&&!i&&(i=!0,r.classList.remove("opacity-100"),null==r||r.remove(),r=null,o=!1,i=!1)}n.addEventListener("mousemove",t=>{const n=a.getBoundingClientRect();if(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)return void c();const p=(t.clientX-n.left)/n.width,x=Math.floor(p*l.length);x<0||x>=l.length?c():function(t){var a;const n=e.el.querySelector(".apexcharts-bar-series");if(!n)return;const l=n.querySelectorAll("path")[t];if(!l)return;const c=l.getBBox(),p=c.x,x=c.y,d=c.width;x<=0||(r||(r=document.createElementNS("http://www.w3.org/2000/svg","rect"),r.setAttribute("y","0"),r.setAttribute("class",s),null===(a=l.parentNode)||void 0===a||a.insertBefore(r,l)),r.setAttribute("x",p.toString()),r.setAttribute("width",d.toString()),r.setAttribute("height",x.toString()),requestAnimationFrame(()=>{null==r||r.classList.add("opacity-100")}),o=!0,i=!1)}(x)}),n.addEventListener("mouseleave",c)}export{r as buildChart,t as buildHeatmapTooltip,s as buildTooltip,a as buildTooltipCompareTwo,n as buildTooltipCompareTwoAlt,l as buildTooltipForDonut,o as fullBarHoverEffect};