UNPKG

flyonui

Version:

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

flyonui.com

themeselection/flyonui

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