flyonui/dist/helper-apexcharts.js

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

!function(e,s){if("object"==typeof exports&&"object"==typeof module)module.exports=s();else if("function"==typeof define&&define.amd)define([],s);else{var t=s();for(var a in t)("object"==typeof exports?exports:e)[a]=t[a]}}(self,(()=>(()=>{"use strict";var e={};return(()=>{var s=e;
/*
 * @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.
 */Object.defineProperty(s,"__esModule",{value:!0}),s.buildChart=function(e,s){const t=document.querySelector(e);let a=null;if(!t)return!1;t&&(a=new ApexCharts(t,s()),a.render());return a},s.buildTooltip=function(e,s){const{title:t,valuePrefix:a="$",isValueDivided:l=!0,valuePostfix:n="",hasTextLabel:o=!1,invertGroup:i=!1,labelDivider:r="",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:f="!font-medium text-base-content/80 !ms-auto",valueExtClasses:m="",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,$=i?{left:`${o?c:""}${r}`,right:`${a}${p>=1e3&&l?p/1e3+"k":p}${n}`}:{left:`${a}${p>=1e3&&l?p/1e3+"k":p}${n}`,right:`${o?c:""}${r}`},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 ${f} ${m}">${$.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>`},s.buildTooltipCompareTwo=function(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:i="$",isValueDivided:r=!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:f="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg !px-2.5",titleExtClasses:m="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):""}`:"",z=j>P,I=j/P===1,V=I?0:j/P*100,F=z?'<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>`,f=$||`<span class="apexcharts-tooltip-text-y-value ${g} ${y}">${i}${o>=1e3&&r?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            ${f}\n          </div>\n        </div>\n      </span>\n      ${x?u:""}\n    </div>`})),`<div class="${$} ${u}">\n    <div class="apexcharts-tooltip-title ${f} ${m}">\n      <span>${o}</span>\n      <span class="flex items-center gap-x-1 ${I?"":z?"text-success":"text-error"} ms-2">\n        ${I?"":F}\n        <span class="inline-block text-sm"> ${V.toFixed(1)}% </span>\n      </span>\n    </div>\n    ${k}\n  </div>`},s.buildTooltipCompareTwoAlt=function(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:i="$",isValueDivided:r=!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:f="!text-sm !font-semibold !bg-base-100 !border-base-content/40 text-base-content rounded-t-lg flex !justify-between !px-2.5",titleExtClasses:m="",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):""}`:"",z=j>P,I=j/P===1,V=I?0:j/P*100,F=z?'<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}">${i}${o>=1e3&&r?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 ${f} ${m}">\n      <span>${o}</span>\n      <span class="flex items-center gap-x-1 ${I?"":z?"text-success":"text-error"} ms-2">\n        ${I?"":F}\n        <span class="inline-block text-sm"> ${V.toFixed(1)}% </span>\n      </span>\n    </div>\n    ${k}\n  </div>`},s.buildTooltipForDonut=function({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>`}})(),e})()));