Project Details

Discover Project Details UI blocks featuring timelines, team info, status updates, and summaries—ideal for dashboards and collaboration pages.

CRM Demo: Default Option Preview

Theme:

<!DOCTYPE html>
            <html lang="en" dir="" class="relative z469n vaohh">
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                <title>Preline UI</title>
                <link rel="shortcut icon" href="../../favicon.ico">
                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                
                <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
                <style type="text/css">
                  .apexcharts-tooltip.apexcharts-theme-light {
                    background-color: transparent !important;
                    border: none !important;
                    box-shadow: none !important;
                  }

.apexcharts-xaxistooltip {    
                    background: var(--color-primary-600) !important; 
                    border-color: var(--color-primary-600) !important; 
                  }

.apexcharts-xaxistooltip:after,
                  .apexcharts-xaxistooltip:before {
                    border-bottom-color: var(--color-primary-600) !important;
                  }
                </style>
              </head>
              <body>
                <div class="ebmio w-full aijsh mx-auto">
            <div class="fj10a flex flex-col chnys u64n3 t8tjb u0h0i hua1b y9wzu">
              
              <div class="flex oszr5">
                
                <div class="xkklm lsler">
                  <div class="batu8 flex items-center wtg7y">
                    <svg class="f832y ih023" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>
                    <div class="xkklm">
                      <span class="block zao2n q95gx">
                        BlueVista Innovations
                      </span>
                    </div>
                  </div>

<span class="block jet6l l2bgt">
                    Redesign of E-commerce Dashboard Mobile App for iOS and Android Devices
                  </span>
                </div>
                
    
                
                <div>
                  <div class="flex flex-wrap wzdcx g2np1">
                    
                    <div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
                      
                      <button id="hs-pro-pdmd1" type="button" class="y7z5y inline-flex gaa3v items-center c3em3 zao2n tp74o kqamx t8tjb o67vx a8swc y9wzu aj6di disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden a6ijy" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <span class="n2eu3">Customers</span>
                        <svg class="f832y t6dfr" 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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 d0nhm ixcl1 transition-[opacity,margin] duration opacity-0 hidden j5627 t8tjb wj0s8 hua1b u3xci" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pdmd1">
                        <div class="shpns space-y-0.5">
                          <a class="relative group pz76f wcr5b flex items-center hzc6g text-[13px] mr4k5 ylpnb tp74o focus:outline-hidden de5l5" href="#">
                            <svg class="f832y t6dfr" 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"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                            Edit
                          </a>
                          <a class="relative group pz76f wcr5b flex items-center hzc6g text-[13px] mr4k5 ylpnb tp74o focus:outline-hidden de5l5" href="#">
                            <svg class="f832y t6dfr" 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"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            Duplicate
                          </a>
                          <a class="relative group pz76f wcr5b flex items-center hzc6g text-[13px] mr4k5 ylpnb tp74o focus:outline-hidden de5l5" href="#">
                            <svg class="f832y t6dfr" 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"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
                            Archive
                          </a>
                          <a class="relative group pz76f wcr5b flex items-center hzc6g text-[13px] mr4k5 ylpnb tp74o focus:outline-hidden de5l5" href="#">
                            <svg class="f832y t6dfr" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                            Delete
                          </a>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>
                </div>
                
              </div>

<div class="gs9zt td3jh wu01n rzwf1 zmml5">
                
                <div>
                  <span class="block npu6o text-[13px] q95gx">
                    Overall progress: <span class="jet6l tj1si">Good</span>
                  </span>
      
                  <div class="flex items-center wtg7y">
                    
                    <svg class="f832y toggy" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                      <g transform="translate(32,32)">
                        <g>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(0)" class="tj1si"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(30)" class="tj1si"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(60)" class="tj1si"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(90)" class="tj1si"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(120)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(150)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(180)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(210)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(240)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(270)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(300)" class="dpy7g"/>
                          <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(330)" class="dpy7g"/>
                        </g>
                      </g>
                    </svg>

<span class="flex items-center n68jf text-[13px] tj1si">
                    <svg class="f832y t6dfr" 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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                    aligning with timeline
                  </span>
                </div>

<div>
                  <span class="block npu6o text-[13px] q95gx">
                    Tasks: <span class="jet6l tj1si">On track</span>
                  </span>

<p class="text-[13px]/4">
                      <span class="eitz2 tj1si">59%</span> <span class="q95gx">of</span> <span class="eitz2 l2bgt">100</span> <span class="q95gx">completed</span>
                  </p>

<div class="r7fmq flex items-center g2np1">
                    <div class="flex items-center ldlxq">
                      <span class="f832y dmjzm kc2ms inline-block j2psj x66be"></span>
                      <span class="f832y dmjzm kc2ms inline-block j2psj x66be"></span>
                      <span class="f832y dmjzm kc2ms inline-block j2psj x66be"></span>
                      <span class="f832y dmjzm kc2ms inline-block brglv x66be"></span>
                      <span class="f832y dmjzm kc2ms inline-block brglv x66be"></span>
                    </div>
                  </div>
                  
                </div>

<div>
                  <span class="block npu6o text-[13px] q95gx">
                    Project cost: <span class="jet6l tj1si">Within budget</span>
                  </span>

<div>
                  <span class="block npu6o text-[13px] q95gx">
                    Time spent: <span class="jet6l ar50x">Slightly behind</span>
                  </span>

<div class="fc0km flex flex-col fvbva">
                    
                    <div class="flex items-center n68jf">
                      <span class="flex items-center wtg7y uhey0 i6gk1">
                        <svg class="f832y t6dfr q95gx" 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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        Total hours:
                      </span>
                      <span class="zao2n l2bgt">
                        56h 1m
                      </span>
                    </div>

<div class="flex items-center n68jf">
                      <span class="flex items-center wtg7y uhey0 i6gk1">
                        <svg class="f832y t6dfr q95gx" 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"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                        Days:
                      </span>
                      <span class="zao2n l2bgt">
                        18
                      </span>
                    </div>
                    
                  </div>
                  
                </div>
                
              </div>
              
            </div>
            </div>
                <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                
                <script src="https://cdn.jsdelivr.net/npm/culori@4.0.2/bundled/culori.umd.min.js"></script>

<!--<script>
                  function varToColor(
                    name,
                    forceHex = false,
                    scope = document.documentElement,
                  ) {
                    if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
                    probe.style.position = "fixed";
                    probe.style.left = "-9999px";
                    probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
                    probe.remove();

if (!computed) return null;
                    if (computed.startsWith("rgba(")) return computed;
                    if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                      return varToColor(name, forceHex, scope);
                    });

window.addEventListener("on-hs-brand-change", () => {
                      return varToColor(name, forceHex, scope);
                    });

return null;
                  }
                </script>-->
                <script>
                  function buildTooltip(props, options) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasTextLabel = false,
                  		invertGroup = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
                  	let seriesGroups = '';
  
                  	series.forEach((_, i) => {
                  		const val =
                  			props.series[i][dataPointIndex] ||
                  			(typeof series[i].data[dataPointIndex] !== 'object'
                  				? series[i].data[dataPointIndex]
                  				: props.series[i][dataPointIndex]);
                  		const label = series[i].name;
                  		const groupData = invertGroup
                  			? {
                  					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
                  					right: `${valuePrefix}${
                  						val >= 1000 && isValueDivided
                  							? `${val / 1000}${thousandsShortName}`
                  							: val
                  					}${valuePostfix}`,
                  				}
                  			: {
                  					left: `${valuePrefix}${
                  						val >= 1000 && isValueDivided
                  							? `${val / 1000}${thousandsShortName}`
                  							: val
                  					}${valuePostfix}`,
                  					right: `${hasTextLabel ? label : ''}${labelDivider}`,
                  				};
                  		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;
  
                  		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${
                  			hasTextLabel ? 'unru1' : ''
                  		} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                  					colors[i]
                  				}"></span>
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                            </div>
                          </div>
                        </span>
                        ${labelMarkup}
                      </div>`;
                  	});
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                      ${seriesGroups}
                    </div>`;
                  }
  
                  function buildHeatmapTooltip(
                  	props,
                  	options,
                  ) {
                  	const {
                  		mode,
                  		valuePrefix = '$',
                  		valuePostfix = '',
                  		divider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerStyles = '',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  	} = options;
                  	const { dataPointIndex, seriesIndex, series } = props;
                  	const { name } = props.ctx.opts.series[seriesIndex];
                  	const val = `${valuePrefix}${
                  		series[seriesIndex][dataPointIndex]
                  	}${valuePostfix}`;
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-series-group !flex">
                  			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                        <span class="flex items-center">
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                            </div>
                          </div>
                        </span>
                  			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                      </div>
                    </div>`;
                  }
  
                  function buildTooltipCompareTwo(
                  	props,
                  	options,
                  ) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasCategory = true,
                  		hasTextLabel = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'unru1 w-full uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	const { categories } = props.ctx.opts.xaxis;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
  
                  	let seriesGroups = '';
                  	const s0 = series[0].data[dataPointIndex];
                  	const s1 = series[1].data[dataPointIndex];
                  	const category = categories[dataPointIndex].split(' ');
                  	const newCategory = hasCategory
                  		? `${category[0]}${category[1] ? ' ' : ''}${
                  				category[1] ? category[1].slice(0, 3) : ''
                  			}`
                  		: '';
                  	// const isGrowing = s0 > s1;
                  	// const isDifferenceIsNull = s0 / s1 === 1;
                  	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                  	// TODO: test this before deleting the code above
                  	const isPrevZero = s1 === 0;
                  	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                  	const isDifferenceIsNull = difference === 0;
                  	const isGrowing = difference > 0;
                  	const icon = isGrowing
                  		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
                  	series.forEach((_, i) => {
                  		const val =
                  			props.series[i][dataPointIndex] ||
                  			(typeof series[i].data[dataPointIndex] !== 'object'
                  				? series[i].data[dataPointIndex]
                  				: props.series[i][dataPointIndex]);
                  		const label = series[i].name;
                  		const altValue = series[i].altValue || null;
                  		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${
                  			label || ''
                  		}</span>`;
                  		const valueMarkup =
                  			altValue ||
                  			`<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${
                  				val >= 1000 && isValueDivided
                  					? `${val / 1000}${thousandsShortName}`
                  					: val
                  			}${valuePostfix}${labelDivider}</span>`;
  
                  		seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} !flex order-${
                  			i + 1
                  		} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                  					colors[i]
                  				}"></span>
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              ${valueMarkup}
                            </div>
                          </div>
                        </span>
                        ${hasTextLabel ? labelMarkup : ''}
                      </div>`;
                  	});
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                        <span>${title}</span>
                        <span class="flex items-center n68jf ${
                  				!isDifferenceIsNull
                  					? isGrowing
                  						? 'tj1si'
                  						: 'rvs8c'
                  					: ''
                  			} a5dlz">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="inline-block zao2n">
                            ${difference.toFixed(1)}%
                          </span>
                        </span>
                      </div>
                      ${seriesGroups}
                    </div>`;
                  }
  
                  function buildTooltipCompareTwoAlt(
                  	props,
                  	options,
                  ) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasCategory = true,
                  		hasTextLabel = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'unru1 w-full uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	const { categories } = props.ctx.opts.xaxis;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
  
                  	let seriesGroups = '';
                  	const s0 = series[0].data[dataPointIndex];
                  	const s1 = series[1].data[dataPointIndex];
                  	const category = categories[dataPointIndex].split(' ');
                  	const newCategory = hasCategory
                  		? `${category[0]}${category[1] ? ' ' : ''}${
                  				category[1] ? category[1].slice(0, 3) : ''
                  			}`
                  		: '';
                  	// const isGrowing = s0 > s1;
                  	// const isDifferenceIsNull = s0 / s1 === 1;
                  	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                  	// TODO: test this before deleting the code above
                  	const isPrevZero = s1 === 0;
                  	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                  	const isDifferenceIsNull = difference === 0;
                  	const isGrowing = difference > 0;
                  	const icon = isGrowing
                  		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
                  	series.forEach((_, i) => {
                  		const val =
                  			props.series[i][dataPointIndex] ||
                  			(typeof series[i].data[dataPointIndex] !== 'object'
                  				? series[i].data[dataPointIndex]
                  				: props.series[i][dataPointIndex]);
                  		const label = series[i].name;
                  		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
                  			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : val
                  		}${valuePostfix}</span>`;
  
                  		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${seriesClasses} order-${
                  			i + 1
                  		} ${seriesExtClasses}">
                        <span class="flex items-center">
                          <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                  					colors[i]
                  				}"></span>
                          <div class="apexcharts-tooltip-text uhey0">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${
                  							label || ''
                  						}${labelDivider}</span>
                            </div>
                          </div>
                        </span>
                        ${hasTextLabel ? labelMarkup : ''}
                      </div>`;
                  	});
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                        <span>${title}</span>
                        <span class="flex items-center n68jf ${
                  				!isDifferenceIsNull
                  					? isGrowing
                  						? 'tj1si'
                  						: 'rvs8c'
                  					: ''
                  			} a5dlz">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="inline-block zao2n">
                            ${difference.toFixed(1)}%
                          </span>
                        </span>
                      </div>
                      ${seriesGroups}
                    </div>`;
                  }
  
                  function buildTooltipForDonut(
                  	{ series, seriesIndex, w },
                  	textColor,
                  ) {
                  	const { globals } = w;
                  	const { colors } = globals;
  
                  	return `<div class="apexcharts-tooltip-series-group" style="background-color: ${
                  		colors[seriesIndex]
                  	}; display: block;">
                      <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                        <div class="apexcharts-tooltip-y-group" style="color: ${
                  				textColor[seriesIndex]
                  			}">
                          <span class="apexcharts-tooltip-text-y-label">${
                  					globals.labels[seriesIndex]
                  				}: </span>
                          <span class="apexcharts-tooltip-text-y-value">${
                  					series[seriesIndex]
                  				}</span>
                        <div class="apexcharts-tooltip-y-group" style="color: ${
                  				textColor[seriesIndex]
                  			}">
                          <span class="apexcharts-tooltip-text-y-label">${
                  					globals.labels[seriesIndex]
                  				}: </span>
                          <span class="apexcharts-tooltip-text-y-value">${
                  					series[seriesIndex]
                  				}</span>
                        </div>
                      </div>
                    </div>`;
                  }
  
                  function buildChart(
                  	id,
                  	shared,
                  	light,
                  	dark,
                  ) {
                  	const $chart = document.querySelector(id);
                  	let chart = null;
  
                  	if (!$chart) return false;
  
                  	const tabpanel = $chart.closest('[role="tabpanel"]');
                  	let modeFromBodyClass = null;
  
                  	Array.from(document.querySelector('html').classList).forEach((cl) => {
                  		if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  	});
  
                  	const optionsFn = (
                  		mode = modeFromBodyClass || localStorage.getItem('hs_theme'),
                  	) => {
                  		if (
                  			mode === 'dark' ||
                  			(mode === 'auto' &&
                  				window.matchMedia('(prefers-color-scheme: dark)').matches)
                  		) {
                  			return window._.merge(
                  				shared('dark'),
                  				typeof dark === 'function' ? dark() : dark,
                  			);
                  		} else {
                  			return window._.merge(
                  				shared('light'),
                  				typeof light === 'function' ? light() : light,
                  			);
                  		}
                  	};
  
                  	if ($chart) {
                  		let isInitialLoad = true;
                  		chart = new ApexCharts($chart, optionsFn());
                  		chart.render();
  
                  		setTimeout(() => {
                  			isInitialLoad = false;
                  		}, 100);
  
                  		let hasInitProgressApplied = false;
  
                  		const handleThemeChange = (evt) => {
                  			if (isInitialLoad) return;
  
                  			chart.updateOptions(optionsFn(evt.detail));
                  		};
                  		const applyOptionsChange = (detail) => {
                  			let modeFromBodyClass;
                  			const target = detail?.target ?? document.querySelector('html');
  
                  			Array.from(target.classList).forEach((cl) => {
                  				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  			});
  
                  			handleThemeChange({
                  				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
                  			});
                  		};
                  		const handleOptionsChange = (evt) => {
                  			const detail = evt.detail;
                  			if (detail && detail.isClipboardInit) return;
                  			applyOptionsChange(detail);
                  		};
                  		const handleClipboardInitProgress = (evt) => {
                  			if (hasInitProgressApplied) return;
  
                  			const detail = evt.detail;
                  			const target = detail?.target;
  
                  			if (!target || !$chart || !target.contains($chart)) return;
  
                  			hasInitProgressApplied = true;
  
                  			if (isInitialLoad) {
                  				setTimeout(() => applyOptionsChange(detail), 120);
                  			} else {
                  				applyOptionsChange(detail);
                  			}
                  		};
  
                  		window.addEventListener('on-hs-appearance-change', handleThemeChange);
                  		window.addEventListener(
                  			'on-hs-color-theme-change',
                  			(evt) => {
                  				setTimeout(() => handleOptionsChange(evt), 50);
                  			},
                  		);
                  		window.addEventListener('on-hs-font-change', (evt) => {
                  			setTimeout(() => handleOptionsChange(evt), 50);
                  		});
                  		window.addEventListener('on-hs-brand-change', (evt) => {
                  			setTimeout(() => handleOptionsChange(evt), 50);
                  		});
                  		window.addEventListener(
                  			'on-hs-clipboard-init-progress',
                  			handleClipboardInitProgress,
                  		);
  
                  		if (tabpanel) {
                  			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
                  		}
                  	}
  
                  	return chart;
                  }
  
                  function fullBarHoverEffect(
                  	chartCtx,
                  	{ shadowClasses = 'ck3kr' } = {},
                  ) {
                  	const gs9zt = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
                  	const svg = chartCtx.el.querySelector('svg');
                  	if (!grid || !svg) return;
  
                  	const categories = chartCtx.w.config.xaxis?.categories || [];
                  	if (categories.length === 0) return;
  
                  	let shadowRect = null;
                  	let isVisible = false;
                  	let isRemoving = false;
  
                  	function cleanup() {
                  		shadowRect?.remove();
                  		shadowRect = null;
                  		isVisible = false;
                  		isRemoving = false;
                  	}
  
                  	function showForIndex(index) {
                  		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
                  		if (!seriesGroup) return;
  
                  		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
                  		const bar = bars[index];
                  		if (!bar) return;
  
                  		const bbox = bar.getBBox();
                  		const x = bbox.x;
                  		const y = bbox.y;
                  		const width = bbox.width;
                  		if (y <= 0) return;
  
                  		if (!shadowRect) {
                  			shadowRect = document.createElementNS(
                  				'http://www.w3.org/2000/svg',
                  				'rect',
                  			);
                  			shadowRect.setAttribute('y', '0');
                  			shadowRect.setAttribute('class', shadowClasses);
                  			bar.parentNode?.insertBefore(shadowRect, bar);
                  		}
  
                  		shadowRect.setAttribute('x', x.toString());
                  		shadowRect.setAttribute('width', width.toString());
                  		shadowRect.setAttribute('height', y.toString());
  
                  		requestAnimationFrame(() => {
                  			shadowRect?.classList.add('qqzdp');
                  		});
  
                  		isVisible = true;
                  		isRemoving = false;
                  	}
  
                  	function hide() {
                  		if (!shadowRect || !isVisible || isRemoving) return;
                  		isRemoving = true;
                  		shadowRect.classList.remove('qqzdp');
                  		cleanup();
                  	}
  
                  	svg.addEventListener('mousemove', (e) => {
                  		const gridRect = grid.getBoundingClientRect();
                  		if (
                  			e.clientX < gridRect.left ||
                  			e.clientX > gridRect.right ||
                  			e.clientY < gridRect.top ||
                  			e.clientY > gridRect.bottom
                  		) {
                  			hide();
                  			return;
                  		}
  
                  		const relativeX = e.clientX - gridRect.left;
                  		const ratio = relativeX / gridRect.width;
                  		const index = Math.floor(ratio * categories.length);
  
                  		if (index < 0 || index >= categories.length) {
                  			hide();
                  			return;
                  		}
  
                  		showForIndex(index);
                  	});
  
                  	svg.addEventListener('mouseleave', hide);
                  }
  
                  function cssVarToValue(name, context = document.documentElement) {
                    const value = getComputedStyle(context).getPropertyValue(name);
  	
                    if (!value) return null;
  	
                  	return value.trim();
                  }
                </script>

if (!data.type) return false;
                  if (data.type === "hs:color-theme-change") {
                    window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                      detail: {
                        target: document.documentElement,
                        value: data.value
                      }
                    }));
                  }
                });
                </script>
                <script>
                  window.addEventListener('load', () => {
                    // Apex Bar Sparkline Charts
                    (function () {
                      const barCharts = [
                        {
                          id: '#hs-pro-cplisbch1',
                          data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                          name: 'Project cost',
                          color: varToColor('--chart-colors-chart-5')
                        },
                        {
                          id: '#hs-pro-cplisbch2',
                          data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                          name: 'Project cost',
                          color: varToColor('--chart-colors-chart-6')
                        },
                        {
                          id: '#hs-pro-cplisbch3',
                          data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                          name: 'Project cost',
                          color: varToColor('--chart-colors-chart-9')
                        }
                      ];

const categories = [
                        '25 January 2023',
                        '26 January 2023',
                        '27 January 2023',
                        '28 January 2023',
                        '29 January 2023',
                        '30 January 2023',
                        '31 January 2023',
                        '1 February 2023',
                        '2 February 2023',
                        '3 February 2023',
                        '4 February 2023'
                      ];

barCharts.forEach(({ id, data, name, color }) => {
                        buildChart(id, (mode) => ({
                          series: [{
                            name,
                            data
                          }],
                          chart: {
                            width: 100,
                            height: 50,
                            type: 'bar',
                            sparkline: {
                              enabled: true
                            }
                          },
                          yaxis: {
                            labels: {
                              show: false,
                            },
                            axisTicks: {
                              show: false,
                            },
                            axisBorder: {
                              show: false,
                            },
                          },
                          xaxis: {
                            type: 'category',
                            categories,
                            crosshairs: {
                              show: false
                            }
                          },
                          tooltip: {
                            marker: {
                              show: false
                            },
                            fixed: {
                              enabled: true,
                              position: 'bottomLeft',
                              offsetX: 10,
                              offsetY: -15
                            },
                            custom: function (props) {
                              const { categories } = props.ctx.opts.xaxis;
                              const { dataPointIndex } = props;
                              const title = categories[dataPointIndex].split(' ');
                              const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                                title: newTitle,
                                mode,
                                hasTextLabel: true,
                                wrapperExtClasses: 'r2dqb',
                                titleExtClasses: 'dv904',
                                labelDivider: ':',
                                labelExtClasses: 'a5dlz'
                              });
                            }
                          }
                        }), () => ({
                          colors: [color],
                          plotOptions: {
                            bar: {
                              colors: {
                                ranges: [{
                                  from: -5000,
                                  to: 0,
                                  color: varToColor('--chart-colors-bar-ranges')
                                }]
                              }
                            }
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-xaxis-labels')
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-yaxis-labels')
                              }
                            }
                          },
                          grid: {
                            borderColor: varToColor('--chart-colors-grid-border')
                          }
                        }), () => ({
                          colors: [color],
                          plotOptions: {
                            bar: {
                              colors: {
                                ranges: [{
                                  from: -5000,
                                  to: 0,
                                  color: varToColor('--chart-colors-bar-ranges-inverse')
                                }]
                              }
                            }
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-xaxis-labels-inverse')
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-yaxis-labels-inverse')
                              }
                            }
                          },
                          grid: {
                            borderColor: varToColor('--chart-colors-grid-border-inverse')
                          }
                        }));
                      });
                    })();
                  });
                </script>

</body>
            </html>

<div class="fj10a flex flex-col chnys u64n3 t8tjb u0h0i hua1b y9wzu">
              
              <div class="flex oszr5">
                
                <div class="xkklm lsler">
                  <div class="batu8 flex items-center wtg7y">
                    <svg class="f832y ih023" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>
                    <div class="xkklm">
                      <span class="block zao2n q95gx">
                        BlueVista Innovations
                      </span>
                    </div>
                  </div>

<div>
                  <span class="block npu6o text-[13px] q95gx">
                    Tasks: <span class="jet6l tj1si">On track</span>
                  </span>

<!--<script>
              function varToColor(
                name,
                forceHex = false,
                scope = document.documentElement,
              ) {
                if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
                probe.style.position = "fixed";
                probe.style.left = "-9999px";
                probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
                probe.remove();

if (!computed) return null;
                if (computed.startsWith("rgba(")) return computed;
                if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                  return varToColor(name, forceHex, scope);
                });

window.addEventListener("on-hs-brand-change", () => {
                  return varToColor(name, forceHex, scope);
                });

return null;
              }
            </script>-->
            <script>
              function buildTooltip(props, options) {
              	const {
              		title,
              		mode,
              		valuePrefix = '$',
              		isValueDivided = true,
              		valuePostfix = '',
              		hasTextLabel = false,
              		invertGroup = false,
              		labelDivider = '',
              		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
              		wrapperExtClasses = '',
              		seriesClasses = 'uhey0',
              		seriesExtClasses = '',
              		titleClasses = 'eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
              		titleExtClasses = '',
              		markerClasses = 'vys1g wbmur nzmav',
              		markerExtClasses = 'fquu1',
              		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
              		valueExtClasses = '',
              		labelClasses = 'l6pjp dark:text-neutral-400',
              		labelExtClasses = '',
              		thousandsShortName = 'k',
              	} = options;
              	const { dataPointIndex } = props;
              	// const { colors } = props.ctx.opts;
              	const { colors } = props.w.globals;
              	const series = props.ctx.opts.series;
              	let seriesGroups = '';
  
              	series.forEach((_, i) => {
              		const val =
              			props.series[i][dataPointIndex] ||
              			(typeof series[i].data[dataPointIndex] !== 'object'
              				? series[i].data[dataPointIndex]
              				: props.series[i][dataPointIndex]);
              		const label = series[i].name;
              		const groupData = invertGroup
              			? {
              					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
              					right: `${valuePrefix}${
              						val >= 1000 && isValueDivided
              							? `${val / 1000}${thousandsShortName}`
              							: val
              					}${valuePostfix}`,
              				}
              			: {
              					left: `${valuePrefix}${
              						val >= 1000 && isValueDivided
              							? `${val / 1000}${thousandsShortName}`
              							: val
              					}${valuePostfix}`,
              					right: `${hasTextLabel ? label : ''}${labelDivider}`,
              				};
              		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;
  
              		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${
              			hasTextLabel ? 'unru1' : ''
              		} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
              					colors[i]
              				}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group eqzhk">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                        </div>
                      </div>
                    </span>
                    ${labelMarkup}
                  </div>`;
              	});
  
              	return `<div class="${
              		mode === 'dark' ? 'dark ' : ''
              	}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                  ${seriesGroups}
                </div>`;
              }
  
              function buildHeatmapTooltip(
              	props,
              	options,
              ) {
              	const {
              		mode,
              		valuePrefix = '$',
              		valuePostfix = '',
              		divider = '',
              		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
              		wrapperExtClasses = '',
              		markerClasses = 'vys1g wbmur nzmav',
              		markerStyles = '',
              		markerExtClasses = 'fquu1',
              		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
              		valueExtClasses = '',
              	} = options;
              	const { dataPointIndex, seriesIndex, series } = props;
              	const { name } = props.ctx.opts.series[seriesIndex];
              	const val = `${valuePrefix}${
              		series[seriesIndex][dataPointIndex]
              	}${valuePostfix}`;
  
              	return `<div class="${
              		mode === 'dark' ? 'dark ' : ''
              	}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-series-group !flex">
              			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                    <span class="flex items-center">
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group eqzhk">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                        </div>
                      </div>
                    </span>
              			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                  </div>
                </div>`;
              }
  
              function buildTooltipCompareTwo(
              	props,
              	options,
              ) {
              	const {
              		title,
              		mode,
              		valuePrefix = '$',
              		isValueDivided = true,
              		valuePostfix = '',
              		hasCategory = true,
              		hasTextLabel = false,
              		labelDivider = '',
              		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
              		wrapperExtClasses = '',
              		seriesClasses = 'unru1 w-full uhey0',
              		seriesExtClasses = '',
              		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
              		titleExtClasses = '',
              		markerClasses = 'vys1g wbmur nzmav',
              		markerExtClasses = 'fquu1',
              		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
              		valueExtClasses = '',
              		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
              		labelExtClasses = '',
              		thousandsShortName = 'k',
              	} = options;
              	const { dataPointIndex } = props;
              	const { categories } = props.ctx.opts.xaxis;
              	// const { colors } = props.ctx.opts;
              	const { colors } = props.w.globals;
              	const series = props.ctx.opts.series;
  
              	let seriesGroups = '';
              	const s0 = series[0].data[dataPointIndex];
              	const s1 = series[1].data[dataPointIndex];
              	const category = categories[dataPointIndex].split(' ');
              	const newCategory = hasCategory
              		? `${category[0]}${category[1] ? ' ' : ''}${
              				category[1] ? category[1].slice(0, 3) : ''
              			}`
              		: '';
              	// const isGrowing = s0 > s1;
              	// const isDifferenceIsNull = s0 / s1 === 1;
              	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
              	// TODO: test this before deleting the code above
              	const isPrevZero = s1 === 0;
              	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
              	const isDifferenceIsNull = difference === 0;
              	const isGrowing = difference > 0;
              	const icon = isGrowing
              		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
              	series.forEach((_, i) => {
              		const val =
              			props.series[i][dataPointIndex] ||
              			(typeof series[i].data[dataPointIndex] !== 'object'
              				? series[i].data[dataPointIndex]
              				: props.series[i][dataPointIndex]);
              		const label = series[i].name;
              		const altValue = series[i].altValue || null;
              		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${
              			label || ''
              		}</span>`;
              		const valueMarkup =
              			altValue ||
              			`<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${
              				val >= 1000 && isValueDivided
              					? `${val / 1000}${thousandsShortName}`
              					: val
              			}${valuePostfix}${labelDivider}</span>`;
  
              		seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} !flex order-${
              			i + 1
              		} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
              					colors[i]
              				}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group eqzhk">
                          ${valueMarkup}
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`;
              	});
  
              	return `<div class="${
              		mode === 'dark' ? 'dark ' : ''
              	}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center n68jf ${
              				!isDifferenceIsNull
              					? isGrowing
              						? 'tj1si'
              						: 'rvs8c'
              					: ''
              			} a5dlz">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="inline-block zao2n">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
              }
  
              function buildTooltipCompareTwoAlt(
              	props,
              	options,
              ) {
              	const {
              		title,
              		mode,
              		valuePrefix = '$',
              		isValueDivided = true,
              		valuePostfix = '',
              		hasCategory = true,
              		hasTextLabel = false,
              		labelDivider = '',
              		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
              		wrapperExtClasses = '',
              		seriesClasses = 'unru1 w-full uhey0',
              		seriesExtClasses = '',
              		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
              		titleExtClasses = '',
              		markerClasses = 'vys1g wbmur nzmav',
              		markerExtClasses = 'fquu1',
              		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
              		valueExtClasses = '',
              		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
              		labelExtClasses = '',
              		thousandsShortName = 'k',
              	} = options;
              	const { dataPointIndex } = props;
              	const { categories } = props.ctx.opts.xaxis;
              	// const { colors } = props.ctx.opts;
              	const { colors } = props.w.globals;
              	const series = props.ctx.opts.series;
  
              	let seriesGroups = '';
              	const s0 = series[0].data[dataPointIndex];
              	const s1 = series[1].data[dataPointIndex];
              	const category = categories[dataPointIndex].split(' ');
              	const newCategory = hasCategory
              		? `${category[0]}${category[1] ? ' ' : ''}${
              				category[1] ? category[1].slice(0, 3) : ''
              			}`
              		: '';
              	// const isGrowing = s0 > s1;
              	// const isDifferenceIsNull = s0 / s1 === 1;
              	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
              	// TODO: test this before deleting the code above
              	const isPrevZero = s1 === 0;
              	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
              	const isDifferenceIsNull = difference === 0;
              	const isGrowing = difference > 0;
              	const icon = isGrowing
              		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
              	series.forEach((_, i) => {
              		const val =
              			props.series[i][dataPointIndex] ||
              			(typeof series[i].data[dataPointIndex] !== 'object'
              				? series[i].data[dataPointIndex]
              				: props.series[i][dataPointIndex]);
              		const label = series[i].name;
              		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
              			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : val
              		}${valuePostfix}</span>`;
  
              		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${seriesClasses} order-${
              			i + 1
              		} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
              					colors[i]
              				}"></span>
                      <div class="apexcharts-tooltip-text uhey0">
                        <div class="apexcharts-tooltip-y-group eqzhk">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${
              							label || ''
              						}${labelDivider}</span>
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`;
              	});
  
              	return `<div class="${
              		mode === 'dark' ? 'dark ' : ''
              	}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center n68jf ${
              				!isDifferenceIsNull
              					? isGrowing
              						? 'tj1si'
              						: 'rvs8c'
              					: ''
              			} a5dlz">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="inline-block zao2n">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
              }
  
              function buildTooltipForDonut(
              	{ series, seriesIndex, w },
              	textColor,
              ) {
              	const { globals } = w;
              	const { colors } = globals;
  
              	return `<div class="apexcharts-tooltip-series-group" style="background-color: ${
              		colors[seriesIndex]
              	}; display: block;">
                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                    <div class="apexcharts-tooltip-y-group" style="color: ${
              				textColor[seriesIndex]
              			}">
                      <span class="apexcharts-tooltip-text-y-label">${
              					globals.labels[seriesIndex]
              				}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${
              					series[seriesIndex]
              				}</span>
                    <div class="apexcharts-tooltip-y-group" style="color: ${
              				textColor[seriesIndex]
              			}">
                      <span class="apexcharts-tooltip-text-y-label">${
              					globals.labels[seriesIndex]
              				}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${
              					series[seriesIndex]
              				}</span>
                    </div>
                  </div>
                </div>`;
              }
  
              function buildChart(
              	id,
              	shared,
              	light,
              	dark,
              ) {
              	const $chart = document.querySelector(id);
              	let chart = null;
  
              	if (!$chart) return false;
  
              	const tabpanel = $chart.closest('[role="tabpanel"]');
              	let modeFromBodyClass = null;
  
              	Array.from(document.querySelector('html').classList).forEach((cl) => {
              		if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
              	});
  
              	const optionsFn = (
              		mode = modeFromBodyClass || localStorage.getItem('hs_theme'),
              	) => {
              		if (
              			mode === 'dark' ||
              			(mode === 'auto' &&
              				window.matchMedia('(prefers-color-scheme: dark)').matches)
              		) {
              			return window._.merge(
              				shared('dark'),
              				typeof dark === 'function' ? dark() : dark,
              			);
              		} else {
              			return window._.merge(
              				shared('light'),
              				typeof light === 'function' ? light() : light,
              			);
              		}
              	};
  
              	if ($chart) {
              		let isInitialLoad = true;
              		chart = new ApexCharts($chart, optionsFn());
              		chart.render();
  
              		setTimeout(() => {
              			isInitialLoad = false;
              		}, 100);
  
              		let hasInitProgressApplied = false;
  
              		const handleThemeChange = (evt) => {
              			if (isInitialLoad) return;
  
              			chart.updateOptions(optionsFn(evt.detail));
              		};
              		const applyOptionsChange = (detail) => {
              			let modeFromBodyClass;
              			const target = detail?.target ?? document.querySelector('html');
  
              			Array.from(target.classList).forEach((cl) => {
              				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
              			});
  
              			handleThemeChange({
              				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
              			});
              		};
              		const handleOptionsChange = (evt) => {
              			const detail = evt.detail;
              			if (detail && detail.isClipboardInit) return;
              			applyOptionsChange(detail);
              		};
              		const handleClipboardInitProgress = (evt) => {
              			if (hasInitProgressApplied) return;
  
              			const detail = evt.detail;
              			const target = detail?.target;
  
              			if (!target || !$chart || !target.contains($chart)) return;
  
              			hasInitProgressApplied = true;
  
              			if (isInitialLoad) {
              				setTimeout(() => applyOptionsChange(detail), 120);
              			} else {
              				applyOptionsChange(detail);
              			}
              		};
  
              		window.addEventListener('on-hs-appearance-change', handleThemeChange);
              		window.addEventListener(
              			'on-hs-color-theme-change',
              			(evt) => {
              				setTimeout(() => handleOptionsChange(evt), 50);
              			},
              		);
              		window.addEventListener('on-hs-font-change', (evt) => {
              			setTimeout(() => handleOptionsChange(evt), 50);
              		});
              		window.addEventListener('on-hs-brand-change', (evt) => {
              			setTimeout(() => handleOptionsChange(evt), 50);
              		});
              		window.addEventListener(
              			'on-hs-clipboard-init-progress',
              			handleClipboardInitProgress,
              		);
  
              		if (tabpanel) {
              			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
              		}
              	}
  
              	return chart;
              }
  
              function fullBarHoverEffect(
              	chartCtx,
              	{ shadowClasses = 'ck3kr' } = {},
              ) {
              	const gs9zt = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
              	const svg = chartCtx.el.querySelector('svg');
              	if (!grid || !svg) return;
  
              	const categories = chartCtx.w.config.xaxis?.categories || [];
              	if (categories.length === 0) return;
  
              	let shadowRect = null;
              	let isVisible = false;
              	let isRemoving = false;
  
              	function cleanup() {
              		shadowRect?.remove();
              		shadowRect = null;
              		isVisible = false;
              		isRemoving = false;
              	}
  
              	function showForIndex(index) {
              		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
              		if (!seriesGroup) return;
  
              		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
              		const bar = bars[index];
              		if (!bar) return;
  
              		const bbox = bar.getBBox();
              		const x = bbox.x;
              		const y = bbox.y;
              		const width = bbox.width;
              		if (y <= 0) return;
  
              		if (!shadowRect) {
              			shadowRect = document.createElementNS(
              				'http://www.w3.org/2000/svg',
              				'rect',
              			);
              			shadowRect.setAttribute('y', '0');
              			shadowRect.setAttribute('class', shadowClasses);
              			bar.parentNode?.insertBefore(shadowRect, bar);
              		}
  
              		shadowRect.setAttribute('x', x.toString());
              		shadowRect.setAttribute('width', width.toString());
              		shadowRect.setAttribute('height', y.toString());
  
              		requestAnimationFrame(() => {
              			shadowRect?.classList.add('qqzdp');
              		});
  
              		isVisible = true;
              		isRemoving = false;
              	}
  
              	function hide() {
              		if (!shadowRect || !isVisible || isRemoving) return;
              		isRemoving = true;
              		shadowRect.classList.remove('qqzdp');
              		cleanup();
              	}
  
              	svg.addEventListener('mousemove', (e) => {
              		const gridRect = grid.getBoundingClientRect();
              		if (
              			e.clientX < gridRect.left ||
              			e.clientX > gridRect.right ||
              			e.clientY < gridRect.top ||
              			e.clientY > gridRect.bottom
              		) {
              			hide();
              			return;
              		}
  
              		const relativeX = e.clientX - gridRect.left;
              		const ratio = relativeX / gridRect.width;
              		const index = Math.floor(ratio * categories.length);
  
              		if (index < 0 || index >= categories.length) {
              			hide();
              			return;
              		}
  
              		showForIndex(index);
              	});
  
              	svg.addEventListener('mouseleave', hide);
              }
  
              function cssVarToValue(name, context = document.documentElement) {
                const value = getComputedStyle(context).getPropertyValue(name);
  	
                if (!value) return null;
  	
              	return value.trim();
              }
            </script>

if (!data.type) return false;
              if (data.type === "hs:color-theme-change") {
                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                  detail: {
                    target: document.documentElement,
                    value: data.value
                  }
                }));
              }
            });
            </script>
            <script>
              window.addEventListener('load', () => {
                // Apex Bar Sparkline Charts
                (function () {
                  const barCharts = [
                    {
                      id: '#hs-pro-cplisbch1',
                      data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                      name: 'Project cost',
                      color: varToColor('--chart-colors-chart-5')
                    },
                    {
                      id: '#hs-pro-cplisbch2',
                      data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                      name: 'Project cost',
                      color: varToColor('--chart-colors-chart-6')
                    },
                    {
                      id: '#hs-pro-cplisbch3',
                      data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                      name: 'Project cost',
                      color: varToColor('--chart-colors-chart-9')
                    }
                  ];

const categories = [
                    '25 January 2023',
                    '26 January 2023',
                    '27 January 2023',
                    '28 January 2023',
                    '29 January 2023',
                    '30 January 2023',
                    '31 January 2023',
                    '1 February 2023',
                    '2 February 2023',
                    '3 February 2023',
                    '4 February 2023'
                  ];

barCharts.forEach(({ id, data, name, color }) => {
                    buildChart(id, (mode) => ({
                      series: [{
                        name,
                        data
                      }],
                      chart: {
                        width: 100,
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      yaxis: {
                        labels: {
                          show: false,
                        },
                        axisTicks: {
                          show: false,
                        },
                        axisBorder: {
                          show: false,
                        },
                      },
                      xaxis: {
                        type: 'category',
                        categories,
                        crosshairs: {
                          show: false
                        }
                      },
                      tooltip: {
                        marker: {
                          show: false
                        },
                        fixed: {
                          enabled: true,
                          position: 'bottomLeft',
                          offsetX: 10,
                          offsetY: -15
                        },
                        custom: function (props) {
                          const { categories } = props.ctx.opts.xaxis;
                          const { dataPointIndex } = props;
                          const title = categories[dataPointIndex].split(' ');
                          const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                            title: newTitle,
                            mode,
                            hasTextLabel: true,
                            wrapperExtClasses: 'r2dqb',
                            titleExtClasses: 'dv904',
                            labelDivider: ':',
                            labelExtClasses: 'a5dlz'
                          });
                        }
                      }
                    }), () => ({
                      colors: [color],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -5000,
                              to: 0,
                              color: varToColor('--chart-colors-bar-ranges')
                            }]
                          }
                        }
                      },
                      xaxis: {
                        labels: {
                          style: {
                            colors: varToColor('--chart-colors-xaxis-labels')
                          }
                        }
                      },
                      yaxis: {
                        labels: {
                          style: {
                            colors: varToColor('--chart-colors-yaxis-labels')
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border')
                      }
                    }), () => ({
                      colors: [color],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -5000,
                              to: 0,
                              color: varToColor('--chart-colors-bar-ranges-inverse')
                            }]
                          }
                        }
                      },
                      xaxis: {
                        labels: {
                          style: {
                            colors: varToColor('--chart-colors-xaxis-labels-inverse')
                          }
                        }
                      },
                      yaxis: {
                        labels: {
                          style: {
                            colors: varToColor('--chart-colors-yaxis-labels-inverse')
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border-inverse')
                      }
                    }));
                  });
                })();
              });
            </script>

CRM Demo: Alternative Listing Option Preview

Theme:

<!DOCTYPE html>
          <html lang="en" dir="" class="relative z469n vaohh">
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <title>Preline UI</title>
              <link rel="shortcut icon" href="../../favicon.ico">
              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
              <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
              
              <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
              <style type="text/css">
                .apexcharts-tooltip.apexcharts-theme-light {
                  background-color: transparent !important;
                  border: none !important;
                  box-shadow: none !important;
                }

.apexcharts-xaxistooltip {    
                  background: var(--color-primary-600) !important; 
                  border-color: var(--color-primary-600) !important; 
                }

<span class="block jet6l l2bgt">
                  AI-Powered Customer Service Platform Development
                </span>
              </div>
              
            </div>

<div class="gs9zt td3jh bxq34 zmml5">
              
              <div>
                <span class="block npu6o text-[13px] q95gx">
                  Overall progress: <span class="jet6l ar50x">Medium</span>
                </span>
      
                <div class="flex items-center wtg7y">
                  
                  <svg class="f832y toggy" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(32,32)">
                      <g>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(0)" class="ar50x"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(30)" class="ar50x"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(60)" class="ar50x"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(90)" class="ar50x"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(120)" class="ar50x"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(150)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(180)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(210)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(240)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(270)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(300)" class="dpy7g"/>
                        <rect x="-3" y="-28" width="6" height="12" rx="3" fill="currentColor" transform="rotate(330)" class="dpy7g"/>
                      </g>
                    </g>
                  </svg>

<span class="flex items-center n68jf text-[13px] ar50x">
                  <svg class="f832y t6dfr" 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"><path d="M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"/><circle cx="10" cy="13" r="8"/><path d="M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"/><path d="M18 3 19.1 5.2"/><path d="M22 3 20.9 5.2"/></svg>
                  slightly progressing
                </span>
              </div>

<div>
                <span class="block npu6o text-[13px] q95gx">
                  Tasks: <span class="jet6l jc8vb dark:text-blue-500">In progress</span>
                </span>

<p class="text-[13px]/4">
                   <span class="eitz2 jc8vb dark:text-blue-500">22%</span>  <span class="q95gx">of</span> <span class="eitz2 l2bgt">100</span> <span class="q95gx">completed</span>
                </p>

<div class="r7fmq flex items-center g2np1">
                  <div class="flex items-center ldlxq">
                    <span class="f832y dmjzm kc2ms inline-block b5fal x66be dark:text-blue-500"></span>
                    <span class="f832y dmjzm kc2ms inline-block b5fal x66be dark:text-blue-500"></span>
                    <span class="f832y dmjzm kc2ms inline-block brglv x66be"></span>
                    <span class="f832y dmjzm kc2ms inline-block brglv x66be"></span>
                    <span class="f832y dmjzm kc2ms inline-block brglv x66be"></span>
                  </div>
                </div>
                
              </div>

<div>
                <span class="block npu6o text-[13px] q95gx">
                  Project cost: <span class="jet6l ar50x">Approaching Limit</span>
                </span>

<!--<script>
                function varToColor(
                  name,
                  forceHex = false,
                  scope = document.documentElement,
                ) {
                  if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
                  probe.style.position = "fixed";
                  probe.style.left = "-9999px";
                  probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
                  probe.remove();

if (!computed) return null;
                  if (computed.startsWith("rgba(")) return computed;
                  if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                    return varToColor(name, forceHex, scope);
                  });

window.addEventListener("on-hs-brand-change", () => {
                    return varToColor(name, forceHex, scope);
                  });

return null;
                }
              </script>-->
              <script>
                function buildTooltip(props, options) {
                	const {
                		title,
                		mode,
                		valuePrefix = '$',
                		isValueDivided = true,
                		valuePostfix = '',
                		hasTextLabel = false,
                		invertGroup = false,
                		labelDivider = '',
                		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                		wrapperExtClasses = '',
                		seriesClasses = 'uhey0',
                		seriesExtClasses = '',
                		titleClasses = 'eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                		titleExtClasses = '',
                		markerClasses = 'vys1g wbmur nzmav',
                		markerExtClasses = 'fquu1',
                		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                		valueExtClasses = '',
                		labelClasses = 'l6pjp dark:text-neutral-400',
                		labelExtClasses = '',
                		thousandsShortName = 'k',
                	} = options;
                	const { dataPointIndex } = props;
                	// const { colors } = props.ctx.opts;
                	const { colors } = props.w.globals;
                	const series = props.ctx.opts.series;
                	let seriesGroups = '';
  
                	series.forEach((_, i) => {
                		const val =
                			props.series[i][dataPointIndex] ||
                			(typeof series[i].data[dataPointIndex] !== 'object'
                				? series[i].data[dataPointIndex]
                				: props.series[i][dataPointIndex]);
                		const label = series[i].name;
                		const groupData = invertGroup
                			? {
                					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
                					right: `${valuePrefix}${
                						val >= 1000 && isValueDivided
                							? `${val / 1000}${thousandsShortName}`
                							: val
                					}${valuePostfix}`,
                				}
                			: {
                					left: `${valuePrefix}${
                						val >= 1000 && isValueDivided
                							? `${val / 1000}${thousandsShortName}`
                							: val
                					}${valuePostfix}`,
                					right: `${hasTextLabel ? label : ''}${labelDivider}`,
                				};
                		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;
  
                		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${
                			hasTextLabel ? 'unru1' : ''
                		} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                					colors[i]
                				}"></span>
                        <div class="apexcharts-tooltip-text">
                          <div class="apexcharts-tooltip-y-group eqzhk">
                            <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                          </div>
                        </div>
                      </span>
                      ${labelMarkup}
                    </div>`;
                	});
  
                	return `<div class="${
                		mode === 'dark' ? 'dark ' : ''
                	}${wrapperClasses} ${wrapperExtClasses}">
                    <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                    ${seriesGroups}
                  </div>`;
                }
  
                function buildHeatmapTooltip(
                	props,
                	options,
                ) {
                	const {
                		mode,
                		valuePrefix = '$',
                		valuePostfix = '',
                		divider = '',
                		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                		wrapperExtClasses = '',
                		markerClasses = 'vys1g wbmur nzmav',
                		markerStyles = '',
                		markerExtClasses = 'fquu1',
                		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                		valueExtClasses = '',
                	} = options;
                	const { dataPointIndex, seriesIndex, series } = props;
                	const { name } = props.ctx.opts.series[seriesIndex];
                	const val = `${valuePrefix}${
                		series[seriesIndex][dataPointIndex]
                	}${valuePostfix}`;
  
                	return `<div class="${
                		mode === 'dark' ? 'dark ' : ''
                	}${wrapperClasses} ${wrapperExtClasses}">
                    <div class="apexcharts-tooltip-series-group !flex">
                			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                      <span class="flex items-center">
                        <div class="apexcharts-tooltip-text">
                          <div class="apexcharts-tooltip-y-group eqzhk">
                            <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                          </div>
                        </div>
                      </span>
                			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                    </div>
                  </div>`;
                }
  
                function buildTooltipCompareTwo(
                	props,
                	options,
                ) {
                	const {
                		title,
                		mode,
                		valuePrefix = '$',
                		isValueDivided = true,
                		valuePostfix = '',
                		hasCategory = true,
                		hasTextLabel = false,
                		labelDivider = '',
                		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                		wrapperExtClasses = '',
                		seriesClasses = 'unru1 w-full uhey0',
                		seriesExtClasses = '',
                		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                		titleExtClasses = '',
                		markerClasses = 'vys1g wbmur nzmav',
                		markerExtClasses = 'fquu1',
                		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                		valueExtClasses = '',
                		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                		labelExtClasses = '',
                		thousandsShortName = 'k',
                	} = options;
                	const { dataPointIndex } = props;
                	const { categories } = props.ctx.opts.xaxis;
                	// const { colors } = props.ctx.opts;
                	const { colors } = props.w.globals;
                	const series = props.ctx.opts.series;
  
                	let seriesGroups = '';
                	const s0 = series[0].data[dataPointIndex];
                	const s1 = series[1].data[dataPointIndex];
                	const category = categories[dataPointIndex].split(' ');
                	const newCategory = hasCategory
                		? `${category[0]}${category[1] ? ' ' : ''}${
                				category[1] ? category[1].slice(0, 3) : ''
                			}`
                		: '';
                	// const isGrowing = s0 > s1;
                	// const isDifferenceIsNull = s0 / s1 === 1;
                	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                	// TODO: test this before deleting the code above
                	const isPrevZero = s1 === 0;
                	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                	const isDifferenceIsNull = difference === 0;
                	const isGrowing = difference > 0;
                	const icon = isGrowing
                		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
                	series.forEach((_, i) => {
                		const val =
                			props.series[i][dataPointIndex] ||
                			(typeof series[i].data[dataPointIndex] !== 'object'
                				? series[i].data[dataPointIndex]
                				: props.series[i][dataPointIndex]);
                		const label = series[i].name;
                		const altValue = series[i].altValue || null;
                		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${
                			label || ''
                		}</span>`;
                		const valueMarkup =
                			altValue ||
                			`<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${
                				val >= 1000 && isValueDivided
                					? `${val / 1000}${thousandsShortName}`
                					: val
                			}${valuePostfix}${labelDivider}</span>`;
  
                		seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} !flex order-${
                			i + 1
                		} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                					colors[i]
                				}"></span>
                        <div class="apexcharts-tooltip-text">
                          <div class="apexcharts-tooltip-y-group eqzhk">
                            ${valueMarkup}
                          </div>
                        </div>
                      </span>
                      ${hasTextLabel ? labelMarkup : ''}
                    </div>`;
                	});
  
                	return `<div class="${
                		mode === 'dark' ? 'dark ' : ''
                	}${wrapperClasses} ${wrapperExtClasses}">
                    <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                      <span>${title}</span>
                      <span class="flex items-center n68jf ${
                				!isDifferenceIsNull
                					? isGrowing
                						? 'tj1si'
                						: 'rvs8c'
                					: ''
                			} a5dlz">
                        ${!isDifferenceIsNull ? icon : ''}
                        <span class="inline-block zao2n">
                          ${difference.toFixed(1)}%
                        </span>
                      </span>
                    </div>
                    ${seriesGroups}
                  </div>`;
                }
  
                function buildTooltipCompareTwoAlt(
                	props,
                	options,
                ) {
                	const {
                		title,
                		mode,
                		valuePrefix = '$',
                		isValueDivided = true,
                		valuePostfix = '',
                		hasCategory = true,
                		hasTextLabel = false,
                		labelDivider = '',
                		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                		wrapperExtClasses = '',
                		seriesClasses = 'unru1 w-full uhey0',
                		seriesExtClasses = '',
                		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                		titleExtClasses = '',
                		markerClasses = 'vys1g wbmur nzmav',
                		markerExtClasses = 'fquu1',
                		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                		valueExtClasses = '',
                		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                		labelExtClasses = '',
                		thousandsShortName = 'k',
                	} = options;
                	const { dataPointIndex } = props;
                	const { categories } = props.ctx.opts.xaxis;
                	// const { colors } = props.ctx.opts;
                	const { colors } = props.w.globals;
                	const series = props.ctx.opts.series;
  
                	let seriesGroups = '';
                	const s0 = series[0].data[dataPointIndex];
                	const s1 = series[1].data[dataPointIndex];
                	const category = categories[dataPointIndex].split(' ');
                	const newCategory = hasCategory
                		? `${category[0]}${category[1] ? ' ' : ''}${
                				category[1] ? category[1].slice(0, 3) : ''
                			}`
                		: '';
                	// const isGrowing = s0 > s1;
                	// const isDifferenceIsNull = s0 / s1 === 1;
                	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                	// TODO: test this before deleting the code above
                	const isPrevZero = s1 === 0;
                	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                	const isDifferenceIsNull = difference === 0;
                	const isGrowing = difference > 0;
                	const icon = isGrowing
                		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
                	series.forEach((_, i) => {
                		const val =
                			props.series[i][dataPointIndex] ||
                			(typeof series[i].data[dataPointIndex] !== 'object'
                				? series[i].data[dataPointIndex]
                				: props.series[i][dataPointIndex]);
                		const label = series[i].name;
                		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
                			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : val
                		}${valuePostfix}</span>`;
  
                		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${seriesClasses} order-${
                			i + 1
                		} ${seriesExtClasses}">
                      <span class="flex items-center">
                        <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
                					colors[i]
                				}"></span>
                        <div class="apexcharts-tooltip-text uhey0">
                          <div class="apexcharts-tooltip-y-group eqzhk">
                            <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${
                							label || ''
                						}${labelDivider}</span>
                          </div>
                        </div>
                      </span>
                      ${hasTextLabel ? labelMarkup : ''}
                    </div>`;
                	});
  
                	return `<div class="${
                		mode === 'dark' ? 'dark ' : ''
                	}${wrapperClasses} ${wrapperExtClasses}">
                    <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                      <span>${title}</span>
                      <span class="flex items-center n68jf ${
                				!isDifferenceIsNull
                					? isGrowing
                						? 'tj1si'
                						: 'rvs8c'
                					: ''
                			} a5dlz">
                        ${!isDifferenceIsNull ? icon : ''}
                        <span class="inline-block zao2n">
                          ${difference.toFixed(1)}%
                        </span>
                      </span>
                    </div>
                    ${seriesGroups}
                  </div>`;
                }
  
                function buildTooltipForDonut(
                	{ series, seriesIndex, w },
                	textColor,
                ) {
                	const { globals } = w;
                	const { colors } = globals;
  
                	return `<div class="apexcharts-tooltip-series-group" style="background-color: ${
                		colors[seriesIndex]
                	}; display: block;">
                    <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                      <div class="apexcharts-tooltip-y-group" style="color: ${
                				textColor[seriesIndex]
                			}">
                        <span class="apexcharts-tooltip-text-y-label">${
                					globals.labels[seriesIndex]
                				}: </span>
                        <span class="apexcharts-tooltip-text-y-value">${
                					series[seriesIndex]
                				}</span>
                      <div class="apexcharts-tooltip-y-group" style="color: ${
                				textColor[seriesIndex]
                			}">
                        <span class="apexcharts-tooltip-text-y-label">${
                					globals.labels[seriesIndex]
                				}: </span>
                        <span class="apexcharts-tooltip-text-y-value">${
                					series[seriesIndex]
                				}</span>
                      </div>
                    </div>
                  </div>`;
                }
  
                function buildChart(
                	id,
                	shared,
                	light,
                	dark,
                ) {
                	const $chart = document.querySelector(id);
                	let chart = null;
  
                	if (!$chart) return false;
  
                	const tabpanel = $chart.closest('[role="tabpanel"]');
                	let modeFromBodyClass = null;
  
                	Array.from(document.querySelector('html').classList).forEach((cl) => {
                		if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                	});
  
                	const optionsFn = (
                		mode = modeFromBodyClass || localStorage.getItem('hs_theme'),
                	) => {
                		if (
                			mode === 'dark' ||
                			(mode === 'auto' &&
                				window.matchMedia('(prefers-color-scheme: dark)').matches)
                		) {
                			return window._.merge(
                				shared('dark'),
                				typeof dark === 'function' ? dark() : dark,
                			);
                		} else {
                			return window._.merge(
                				shared('light'),
                				typeof light === 'function' ? light() : light,
                			);
                		}
                	};
  
                	if ($chart) {
                		let isInitialLoad = true;
                		chart = new ApexCharts($chart, optionsFn());
                		chart.render();
  
                		setTimeout(() => {
                			isInitialLoad = false;
                		}, 100);
  
                		let hasInitProgressApplied = false;
  
                		const handleThemeChange = (evt) => {
                			if (isInitialLoad) return;
  
                			chart.updateOptions(optionsFn(evt.detail));
                		};
                		const applyOptionsChange = (detail) => {
                			let modeFromBodyClass;
                			const target = detail?.target ?? document.querySelector('html');
  
                			Array.from(target.classList).forEach((cl) => {
                				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                			});
  
                			handleThemeChange({
                				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
                			});
                		};
                		const handleOptionsChange = (evt) => {
                			const detail = evt.detail;
                			if (detail && detail.isClipboardInit) return;
                			applyOptionsChange(detail);
                		};
                		const handleClipboardInitProgress = (evt) => {
                			if (hasInitProgressApplied) return;
  
                			const detail = evt.detail;
                			const target = detail?.target;
  
                			if (!target || !$chart || !target.contains($chart)) return;
  
                			hasInitProgressApplied = true;
  
                			if (isInitialLoad) {
                				setTimeout(() => applyOptionsChange(detail), 120);
                			} else {
                				applyOptionsChange(detail);
                			}
                		};
  
                		window.addEventListener('on-hs-appearance-change', handleThemeChange);
                		window.addEventListener(
                			'on-hs-color-theme-change',
                			(evt) => {
                				setTimeout(() => handleOptionsChange(evt), 50);
                			},
                		);
                		window.addEventListener('on-hs-font-change', (evt) => {
                			setTimeout(() => handleOptionsChange(evt), 50);
                		});
                		window.addEventListener('on-hs-brand-change', (evt) => {
                			setTimeout(() => handleOptionsChange(evt), 50);
                		});
                		window.addEventListener(
                			'on-hs-clipboard-init-progress',
                			handleClipboardInitProgress,
                		);
  
                		if (tabpanel) {
                			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
                		}
                	}
  
                	return chart;
                }
  
                function fullBarHoverEffect(
                	chartCtx,
                	{ shadowClasses = 'ck3kr' } = {},
                ) {
                	const gs9zt = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
                	const svg = chartCtx.el.querySelector('svg');
                	if (!grid || !svg) return;
  
                	const categories = chartCtx.w.config.xaxis?.categories || [];
                	if (categories.length === 0) return;
  
                	let shadowRect = null;
                	let isVisible = false;
                	let isRemoving = false;
  
                	function cleanup() {
                		shadowRect?.remove();
                		shadowRect = null;
                		isVisible = false;
                		isRemoving = false;
                	}
  
                	function showForIndex(index) {
                		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
                		if (!seriesGroup) return;
  
                		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
                		const bar = bars[index];
                		if (!bar) return;
  
                		const bbox = bar.getBBox();
                		const x = bbox.x;
                		const y = bbox.y;
                		const width = bbox.width;
                		if (y <= 0) return;
  
                		if (!shadowRect) {
                			shadowRect = document.createElementNS(
                				'http://www.w3.org/2000/svg',
                				'rect',
                			);
                			shadowRect.setAttribute('y', '0');
                			shadowRect.setAttribute('class', shadowClasses);
                			bar.parentNode?.insertBefore(shadowRect, bar);
                		}
  
                		shadowRect.setAttribute('x', x.toString());
                		shadowRect.setAttribute('width', width.toString());
                		shadowRect.setAttribute('height', y.toString());
  
                		requestAnimationFrame(() => {
                			shadowRect?.classList.add('qqzdp');
                		});
  
                		isVisible = true;
                		isRemoving = false;
                	}
  
                	function hide() {
                		if (!shadowRect || !isVisible || isRemoving) return;
                		isRemoving = true;
                		shadowRect.classList.remove('qqzdp');
                		cleanup();
                	}
  
                	svg.addEventListener('mousemove', (e) => {
                		const gridRect = grid.getBoundingClientRect();
                		if (
                			e.clientX < gridRect.left ||
                			e.clientX > gridRect.right ||
                			e.clientY < gridRect.top ||
                			e.clientY > gridRect.bottom
                		) {
                			hide();
                			return;
                		}
  
                		const relativeX = e.clientX - gridRect.left;
                		const ratio = relativeX / gridRect.width;
                		const index = Math.floor(ratio * categories.length);
  
                		if (index < 0 || index >= categories.length) {
                			hide();
                			return;
                		}
  
                		showForIndex(index);
                	});
  
                	svg.addEventListener('mouseleave', hide);
                }
  
                function cssVarToValue(name, context = document.documentElement) {
                  const value = getComputedStyle(context).getPropertyValue(name);
  	
                  if (!value) return null;
  	
                	return value.trim();
                }
              </script>

if (!data.type) return false;
                if (data.type === "hs:color-theme-change") {
                  window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                    detail: {
                      target: document.documentElement,
                      value: data.value
                    }
                  }));
                }
              });
              </script>
              <script>
                window.addEventListener('load', () => {
                  // Apex Bar Sparkline Charts
                  (function () {
                    const barCharts = [
                      {
                        id: '#hs-pro-cplisbch1',
                        data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                        name: 'Project cost',
                        color: varToColor('--chart-colors-chart-5')
                      },
                      {
                        id: '#hs-pro-cplisbch2',
                        data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                        name: 'Project cost',
                        color: varToColor('--chart-colors-chart-6')
                      },
                      {
                        id: '#hs-pro-cplisbch3',
                        data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                        name: 'Project cost',
                        color: varToColor('--chart-colors-chart-9')
                      }
                    ];

const categories = [
                      '25 January 2023',
                      '26 January 2023',
                      '27 January 2023',
                      '28 January 2023',
                      '29 January 2023',
                      '30 January 2023',
                      '31 January 2023',
                      '1 February 2023',
                      '2 February 2023',
                      '3 February 2023',
                      '4 February 2023'
                    ];

barCharts.forEach(({ id, data, name, color }) => {
                      buildChart(id, (mode) => ({
                        series: [{
                          name,
                          data
                        }],
                        chart: {
                          width: 100,
                          height: 50,
                          type: 'bar',
                          sparkline: {
                            enabled: true
                          }
                        },
                        yaxis: {
                          labels: {
                            show: false,
                          },
                          axisTicks: {
                            show: false,
                          },
                          axisBorder: {
                            show: false,
                          },
                        },
                        xaxis: {
                          type: 'category',
                          categories,
                          crosshairs: {
                            show: false
                          }
                        },
                        tooltip: {
                          marker: {
                            show: false
                          },
                          fixed: {
                            enabled: true,
                            position: 'bottomLeft',
                            offsetX: 10,
                            offsetY: -15
                          },
                          custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;
                            const title = categories[dataPointIndex].split(' ');
                            const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                              title: newTitle,
                              mode,
                              hasTextLabel: true,
                              wrapperExtClasses: 'r2dqb',
                              titleExtClasses: 'dv904',
                              labelDivider: ':',
                              labelExtClasses: 'a5dlz'
                            });
                          }
                        }
                      }), () => ({
                        colors: [color],
                        plotOptions: {
                          bar: {
                            colors: {
                              ranges: [{
                                from: -5000,
                                to: 0,
                                color: varToColor('--chart-colors-bar-ranges')
                              }]
                            }
                          }
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-xaxis-labels')
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-yaxis-labels')
                            }
                          }
                        },
                        grid: {
                          borderColor: varToColor('--chart-colors-grid-border')
                        }
                      }), () => ({
                        colors: [color],
                        plotOptions: {
                          bar: {
                            colors: {
                              ranges: [{
                                from: -5000,
                                to: 0,
                                color: varToColor('--chart-colors-bar-ranges-inverse')
                              }]
                            }
                          }
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-xaxis-labels-inverse')
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-yaxis-labels-inverse')
                            }
                          }
                        },
                        grid: {
                          borderColor: varToColor('--chart-colors-grid-border-inverse')
                        }
                      }));
                    });
                  })();
                });
              </script>

</body>
          </html>

<div class="fj10a flex flex-col lg:flex-row zmml5 u64n3 t8tjb u0h0i hua1b y9wzu">
            
            <div class="flex oszr5">
              
              <div class="w-full bs2d2">
                <div class="batu8 flex items-center wtg7y">
                  <svg class="f832y ih023" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.34318 0.00012207H24.6569C28.725 0.00012207 32 3.27516 32 7.34327V24.657C32 28.7251 28.725 32.0001 24.6569 32.0001H7.34318C3.27507 32.0001 2.52724e-05 28.7251 2.52724e-05 24.657V7.34327C2.52724e-05 3.27516 3.27507 0.00012207 7.34318 0.00012207Z" fill="url(#paint0_linear_5465123)"/><path d="M7.01113 9.1001C6.84252 9.1001 6.68368 9.12919 6.53335 9.18899L9.54446 12.289L12.5889 15.4446L12.6445 15.5112L12.8222 15.689L13 15.8779L15.6111 18.5557C15.6546 18.5827 15.7806 18.6994 15.879 18.7486C16.0058 18.812 16.1432 18.8704 16.2849 18.8754C16.4377 18.8809 16.594 18.8371 16.7315 18.7702C16.8345 18.7201 16.8803 18.6483 17 18.5557L20.0222 15.4334L26.0222 9.25566C25.8332 9.15324 25.6239 9.1001 25.4 9.1001H7.01113ZM6.08891 9.47788C5.7678 9.78214 5.56668 10.2395 5.56668 10.7557V20.9334C5.56668 21.3513 5.7009 21.731 5.92224 22.0223L6.34446 21.6223L9.48891 18.5668L12.2778 15.8668L12.2222 15.8001L9.16668 12.6557L6.11113 9.5001L6.08891 9.47788ZM26.4222 9.57788L20.4 15.8001L20.3445 15.8557L23.2445 18.6668L26.3889 21.7223L26.5778 21.9001C26.7471 21.6285 26.8445 21.2938 26.8445 20.9334V10.7557C26.8445 10.2955 26.685 9.87817 26.4222 9.57788ZM12.6333 16.2334L9.85557 18.9334L6.70002 21.989L6.30002 22.3779C6.5109 22.5137 6.75088 22.6001 7.01113 22.6001H25.4C25.7129 22.6001 25.9967 22.4797 26.2334 22.289L26.0334 22.089L22.8778 19.0334L19.9778 16.2334L17.3667 18.9223C17.2254 19.016 17.1309 19.1199 16.9929 19.1837C16.7709 19.2864 16.5275 19.3733 16.2828 19.3696C16.0375 19.3658 15.797 19.2698 15.5768 19.1615C15.4663 19.1072 15.4074 19.0531 15.2778 18.9446L12.6333 16.2334Z" fill="white"/><defs><linearGradient id="paint0_linear_5465123" x1="16.2241" y1="31.8717" x2="16.2552" y2="0.386437" gradientUnits="userSpaceOnUse"><stop stop-color="#70EFFF"/><stop offset="1" stop-color="#5770FF"/></linearGradient></defs></svg>
                  <div class="xkklm">
                    <span class="block zao2n q95gx">
                      Lumen Systems
                    </span>
                  </div>
                </div>

<!--<script>
            function varToColor(
              name,
              forceHex = false,
              scope = document.documentElement,
            ) {
              if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
              probe.style.position = "fixed";
              probe.style.left = "-9999px";
              probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
              probe.remove();

if (!computed) return null;
              if (computed.startsWith("rgba(")) return computed;
              if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                return varToColor(name, forceHex, scope);
              });

window.addEventListener("on-hs-brand-change", () => {
                return varToColor(name, forceHex, scope);
              });

return null;
            }
          </script>-->
          <script>
            function buildTooltip(props, options) {
            	const {
            		title,
            		mode,
            		valuePrefix = '$',
            		isValueDivided = true,
            		valuePostfix = '',
            		hasTextLabel = false,
            		invertGroup = false,
            		labelDivider = '',
            		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
            		wrapperExtClasses = '',
            		seriesClasses = 'uhey0',
            		seriesExtClasses = '',
            		titleClasses = 'eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
            		titleExtClasses = '',
            		markerClasses = 'vys1g wbmur nzmav',
            		markerExtClasses = 'fquu1',
            		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
            		valueExtClasses = '',
            		labelClasses = 'l6pjp dark:text-neutral-400',
            		labelExtClasses = '',
            		thousandsShortName = 'k',
            	} = options;
            	const { dataPointIndex } = props;
            	// const { colors } = props.ctx.opts;
            	const { colors } = props.w.globals;
            	const series = props.ctx.opts.series;
            	let seriesGroups = '';
  
            	series.forEach((_, i) => {
            		const val =
            			props.series[i][dataPointIndex] ||
            			(typeof series[i].data[dataPointIndex] !== 'object'
            				? series[i].data[dataPointIndex]
            				: props.series[i][dataPointIndex]);
            		const label = series[i].name;
            		const groupData = invertGroup
            			? {
            					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
            					right: `${valuePrefix}${
            						val >= 1000 && isValueDivided
            							? `${val / 1000}${thousandsShortName}`
            							: val
            					}${valuePostfix}`,
            				}
            			: {
            					left: `${valuePrefix}${
            						val >= 1000 && isValueDivided
            							? `${val / 1000}${thousandsShortName}`
            							: val
            					}${valuePostfix}`,
            					right: `${hasTextLabel ? label : ''}${labelDivider}`,
            				};
            		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;
  
            		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${
            			hasTextLabel ? 'unru1' : ''
            		} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
            					colors[i]
            				}"></span>
                    <div class="apexcharts-tooltip-text">
                      <div class="apexcharts-tooltip-y-group eqzhk">
                        <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                      </div>
                    </div>
                  </span>
                  ${labelMarkup}
                </div>`;
            	});
  
            	return `<div class="${
            		mode === 'dark' ? 'dark ' : ''
            	}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                ${seriesGroups}
              </div>`;
            }
  
            function buildHeatmapTooltip(
            	props,
            	options,
            ) {
            	const {
            		mode,
            		valuePrefix = '$',
            		valuePostfix = '',
            		divider = '',
            		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
            		wrapperExtClasses = '',
            		markerClasses = 'vys1g wbmur nzmav',
            		markerStyles = '',
            		markerExtClasses = 'fquu1',
            		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
            		valueExtClasses = '',
            	} = options;
            	const { dataPointIndex, seriesIndex, series } = props;
            	const { name } = props.ctx.opts.series[seriesIndex];
            	const val = `${valuePrefix}${
            		series[seriesIndex][dataPointIndex]
            	}${valuePostfix}`;
  
            	return `<div class="${
            		mode === 'dark' ? 'dark ' : ''
            	}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-series-group !flex">
            			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                  <span class="flex items-center">
                    <div class="apexcharts-tooltip-text">
                      <div class="apexcharts-tooltip-y-group eqzhk">
                        <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                      </div>
                    </div>
                  </span>
            			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                </div>
              </div>`;
            }
  
            function buildTooltipCompareTwo(
            	props,
            	options,
            ) {
            	const {
            		title,
            		mode,
            		valuePrefix = '$',
            		isValueDivided = true,
            		valuePostfix = '',
            		hasCategory = true,
            		hasTextLabel = false,
            		labelDivider = '',
            		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
            		wrapperExtClasses = '',
            		seriesClasses = 'unru1 w-full uhey0',
            		seriesExtClasses = '',
            		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
            		titleExtClasses = '',
            		markerClasses = 'vys1g wbmur nzmav',
            		markerExtClasses = 'fquu1',
            		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
            		valueExtClasses = '',
            		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
            		labelExtClasses = '',
            		thousandsShortName = 'k',
            	} = options;
            	const { dataPointIndex } = props;
            	const { categories } = props.ctx.opts.xaxis;
            	// const { colors } = props.ctx.opts;
            	const { colors } = props.w.globals;
            	const series = props.ctx.opts.series;
  
            	let seriesGroups = '';
            	const s0 = series[0].data[dataPointIndex];
            	const s1 = series[1].data[dataPointIndex];
            	const category = categories[dataPointIndex].split(' ');
            	const newCategory = hasCategory
            		? `${category[0]}${category[1] ? ' ' : ''}${
            				category[1] ? category[1].slice(0, 3) : ''
            			}`
            		: '';
            	// const isGrowing = s0 > s1;
            	// const isDifferenceIsNull = s0 / s1 === 1;
            	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
            	// TODO: test this before deleting the code above
            	const isPrevZero = s1 === 0;
            	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
            	const isDifferenceIsNull = difference === 0;
            	const isGrowing = difference > 0;
            	const icon = isGrowing
            		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
            	series.forEach((_, i) => {
            		const val =
            			props.series[i][dataPointIndex] ||
            			(typeof series[i].data[dataPointIndex] !== 'object'
            				? series[i].data[dataPointIndex]
            				: props.series[i][dataPointIndex]);
            		const label = series[i].name;
            		const altValue = series[i].altValue || null;
            		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${
            			label || ''
            		}</span>`;
            		const valueMarkup =
            			altValue ||
            			`<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${
            				val >= 1000 && isValueDivided
            					? `${val / 1000}${thousandsShortName}`
            					: val
            			}${valuePostfix}${labelDivider}</span>`;
  
            		seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} !flex order-${
            			i + 1
            		} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
            					colors[i]
            				}"></span>
                    <div class="apexcharts-tooltip-text">
                      <div class="apexcharts-tooltip-y-group eqzhk">
                        ${valueMarkup}
                      </div>
                    </div>
                  </span>
                  ${hasTextLabel ? labelMarkup : ''}
                </div>`;
            	});
  
            	return `<div class="${
            		mode === 'dark' ? 'dark ' : ''
            	}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                  <span>${title}</span>
                  <span class="flex items-center n68jf ${
            				!isDifferenceIsNull
            					? isGrowing
            						? 'tj1si'
            						: 'rvs8c'
            					: ''
            			} a5dlz">
                    ${!isDifferenceIsNull ? icon : ''}
                    <span class="inline-block zao2n">
                      ${difference.toFixed(1)}%
                    </span>
                  </span>
                </div>
                ${seriesGroups}
              </div>`;
            }
  
            function buildTooltipCompareTwoAlt(
            	props,
            	options,
            ) {
            	const {
            		title,
            		mode,
            		valuePrefix = '$',
            		isValueDivided = true,
            		valuePostfix = '',
            		hasCategory = true,
            		hasTextLabel = false,
            		labelDivider = '',
            		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
            		wrapperExtClasses = '',
            		seriesClasses = 'unru1 w-full uhey0',
            		seriesExtClasses = '',
            		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
            		titleExtClasses = '',
            		markerClasses = 'vys1g wbmur nzmav',
            		markerExtClasses = 'fquu1',
            		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
            		valueExtClasses = '',
            		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
            		labelExtClasses = '',
            		thousandsShortName = 'k',
            	} = options;
            	const { dataPointIndex } = props;
            	const { categories } = props.ctx.opts.xaxis;
            	// const { colors } = props.ctx.opts;
            	const { colors } = props.w.globals;
            	const series = props.ctx.opts.series;
  
            	let seriesGroups = '';
            	const s0 = series[0].data[dataPointIndex];
            	const s1 = series[1].data[dataPointIndex];
            	const category = categories[dataPointIndex].split(' ');
            	const newCategory = hasCategory
            		? `${category[0]}${category[1] ? ' ' : ''}${
            				category[1] ? category[1].slice(0, 3) : ''
            			}`
            		: '';
            	// const isGrowing = s0 > s1;
            	// const isDifferenceIsNull = s0 / s1 === 1;
            	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
            	// TODO: test this before deleting the code above
            	const isPrevZero = s1 === 0;
            	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
            	const isDifferenceIsNull = difference === 0;
            	const isGrowing = difference > 0;
            	const icon = isGrowing
            		? `<svg class="inline-block krmzt gghqq" 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 krmzt gghqq" 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>`;
  
            	series.forEach((_, i) => {
            		const val =
            			props.series[i][dataPointIndex] ||
            			(typeof series[i].data[dataPointIndex] !== 'object'
            				? series[i].data[dataPointIndex]
            				: props.series[i][dataPointIndex]);
            		const label = series[i].name;
            		const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
            			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : val
            		}${valuePostfix}</span>`;
  
            		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${seriesClasses} order-${
            			i + 1
            		} ${seriesExtClasses}">
                  <span class="flex items-center">
                    <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${
            					colors[i]
            				}"></span>
                    <div class="apexcharts-tooltip-text uhey0">
                      <div class="apexcharts-tooltip-y-group eqzhk">
                        <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${
            							label || ''
            						}${labelDivider}</span>
                      </div>
                    </div>
                  </span>
                  ${hasTextLabel ? labelMarkup : ''}
                </div>`;
            	});
  
            	return `<div class="${
            		mode === 'dark' ? 'dark ' : ''
            	}${wrapperClasses} ${wrapperExtClasses}">
                <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                  <span>${title}</span>
                  <span class="flex items-center n68jf ${
            				!isDifferenceIsNull
            					? isGrowing
            						? 'tj1si'
            						: 'rvs8c'
            					: ''
            			} a5dlz">
                    ${!isDifferenceIsNull ? icon : ''}
                    <span class="inline-block zao2n">
                      ${difference.toFixed(1)}%
                    </span>
                  </span>
                </div>
                ${seriesGroups}
              </div>`;
            }
  
            function buildTooltipForDonut(
            	{ series, seriesIndex, w },
            	textColor,
            ) {
            	const { globals } = w;
            	const { colors } = globals;
  
            	return `<div class="apexcharts-tooltip-series-group" style="background-color: ${
            		colors[seriesIndex]
            	}; display: block;">
                <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                  <div class="apexcharts-tooltip-y-group" style="color: ${
            				textColor[seriesIndex]
            			}">
                    <span class="apexcharts-tooltip-text-y-label">${
            					globals.labels[seriesIndex]
            				}: </span>
                    <span class="apexcharts-tooltip-text-y-value">${
            					series[seriesIndex]
            				}</span>
                  <div class="apexcharts-tooltip-y-group" style="color: ${
            				textColor[seriesIndex]
            			}">
                    <span class="apexcharts-tooltip-text-y-label">${
            					globals.labels[seriesIndex]
            				}: </span>
                    <span class="apexcharts-tooltip-text-y-value">${
            					series[seriesIndex]
            				}</span>
                  </div>
                </div>
              </div>`;
            }
  
            function buildChart(
            	id,
            	shared,
            	light,
            	dark,
            ) {
            	const $chart = document.querySelector(id);
            	let chart = null;
  
            	if (!$chart) return false;
  
            	const tabpanel = $chart.closest('[role="tabpanel"]');
            	let modeFromBodyClass = null;
  
            	Array.from(document.querySelector('html').classList).forEach((cl) => {
            		if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
            	});
  
            	const optionsFn = (
            		mode = modeFromBodyClass || localStorage.getItem('hs_theme'),
            	) => {
            		if (
            			mode === 'dark' ||
            			(mode === 'auto' &&
            				window.matchMedia('(prefers-color-scheme: dark)').matches)
            		) {
            			return window._.merge(
            				shared('dark'),
            				typeof dark === 'function' ? dark() : dark,
            			);
            		} else {
            			return window._.merge(
            				shared('light'),
            				typeof light === 'function' ? light() : light,
            			);
            		}
            	};
  
            	if ($chart) {
            		let isInitialLoad = true;
            		chart = new ApexCharts($chart, optionsFn());
            		chart.render();
  
            		setTimeout(() => {
            			isInitialLoad = false;
            		}, 100);
  
            		let hasInitProgressApplied = false;
  
            		const handleThemeChange = (evt) => {
            			if (isInitialLoad) return;
  
            			chart.updateOptions(optionsFn(evt.detail));
            		};
            		const applyOptionsChange = (detail) => {
            			let modeFromBodyClass;
            			const target = detail?.target ?? document.querySelector('html');
  
            			Array.from(target.classList).forEach((cl) => {
            				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
            			});
  
            			handleThemeChange({
            				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
            			});
            		};
            		const handleOptionsChange = (evt) => {
            			const detail = evt.detail;
            			if (detail && detail.isClipboardInit) return;
            			applyOptionsChange(detail);
            		};
            		const handleClipboardInitProgress = (evt) => {
            			if (hasInitProgressApplied) return;
  
            			const detail = evt.detail;
            			const target = detail?.target;
  
            			if (!target || !$chart || !target.contains($chart)) return;
  
            			hasInitProgressApplied = true;
  
            			if (isInitialLoad) {
            				setTimeout(() => applyOptionsChange(detail), 120);
            			} else {
            				applyOptionsChange(detail);
            			}
            		};
  
            		window.addEventListener('on-hs-appearance-change', handleThemeChange);
            		window.addEventListener(
            			'on-hs-color-theme-change',
            			(evt) => {
            				setTimeout(() => handleOptionsChange(evt), 50);
            			},
            		);
            		window.addEventListener('on-hs-font-change', (evt) => {
            			setTimeout(() => handleOptionsChange(evt), 50);
            		});
            		window.addEventListener('on-hs-brand-change', (evt) => {
            			setTimeout(() => handleOptionsChange(evt), 50);
            		});
            		window.addEventListener(
            			'on-hs-clipboard-init-progress',
            			handleClipboardInitProgress,
            		);
  
            		if (tabpanel) {
            			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
            		}
            	}
  
            	return chart;
            }
  
            function fullBarHoverEffect(
            	chartCtx,
            	{ shadowClasses = 'ck3kr' } = {},
            ) {
            	const gs9zt = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
            	const svg = chartCtx.el.querySelector('svg');
            	if (!grid || !svg) return;
  
            	const categories = chartCtx.w.config.xaxis?.categories || [];
            	if (categories.length === 0) return;
  
            	let shadowRect = null;
            	let isVisible = false;
            	let isRemoving = false;
  
            	function cleanup() {
            		shadowRect?.remove();
            		shadowRect = null;
            		isVisible = false;
            		isRemoving = false;
            	}
  
            	function showForIndex(index) {
            		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
            		if (!seriesGroup) return;
  
            		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
            		const bar = bars[index];
            		if (!bar) return;
  
            		const bbox = bar.getBBox();
            		const x = bbox.x;
            		const y = bbox.y;
            		const width = bbox.width;
            		if (y <= 0) return;
  
            		if (!shadowRect) {
            			shadowRect = document.createElementNS(
            				'http://www.w3.org/2000/svg',
            				'rect',
            			);
            			shadowRect.setAttribute('y', '0');
            			shadowRect.setAttribute('class', shadowClasses);
            			bar.parentNode?.insertBefore(shadowRect, bar);
            		}
  
            		shadowRect.setAttribute('x', x.toString());
            		shadowRect.setAttribute('width', width.toString());
            		shadowRect.setAttribute('height', y.toString());
  
            		requestAnimationFrame(() => {
            			shadowRect?.classList.add('qqzdp');
            		});
  
            		isVisible = true;
            		isRemoving = false;
            	}
  
            	function hide() {
            		if (!shadowRect || !isVisible || isRemoving) return;
            		isRemoving = true;
            		shadowRect.classList.remove('qqzdp');
            		cleanup();
            	}
  
            	svg.addEventListener('mousemove', (e) => {
            		const gridRect = grid.getBoundingClientRect();
            		if (
            			e.clientX < gridRect.left ||
            			e.clientX > gridRect.right ||
            			e.clientY < gridRect.top ||
            			e.clientY > gridRect.bottom
            		) {
            			hide();
            			return;
            		}
  
            		const relativeX = e.clientX - gridRect.left;
            		const ratio = relativeX / gridRect.width;
            		const index = Math.floor(ratio * categories.length);
  
            		if (index < 0 || index >= categories.length) {
            			hide();
            			return;
            		}
  
            		showForIndex(index);
            	});
  
            	svg.addEventListener('mouseleave', hide);
            }
  
            function cssVarToValue(name, context = document.documentElement) {
              const value = getComputedStyle(context).getPropertyValue(name);
  	
              if (!value) return null;
  	
            	return value.trim();
            }
          </script>

if (!data.type) return false;
            if (data.type === "hs:color-theme-change") {
              window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                detail: {
                  target: document.documentElement,
                  value: data.value
                }
              }));
            }
          });
          </script>
          <script>
            window.addEventListener('load', () => {
              // Apex Bar Sparkline Charts
              (function () {
                const barCharts = [
                  {
                    id: '#hs-pro-cplisbch1',
                    data: [2100, 2000, 2400, 4500, 4700, 3000, 3000, -3500, -4500, 3500, 4000],
                    name: 'Project cost',
                    color: varToColor('--chart-colors-chart-5')
                  },
                  {
                    id: '#hs-pro-cplisbch2',
                    data: [1500, 2500, 3000, 4000, -2000, -1000, 1000, 2500, 3000, -500, 0],
                    name: 'Project cost',
                    color: varToColor('--chart-colors-chart-6')
                  },
                  {
                    id: '#hs-pro-cplisbch3',
                    data: [-500, -1000, -1500, 1000, 1500, 2000, 2500, 2000, 1700, 1100, 0],
                    name: 'Project cost',
                    color: varToColor('--chart-colors-chart-9')
                  }
                ];

const categories = [
                  '25 January 2023',
                  '26 January 2023',
                  '27 January 2023',
                  '28 January 2023',
                  '29 January 2023',
                  '30 January 2023',
                  '31 January 2023',
                  '1 February 2023',
                  '2 February 2023',
                  '3 February 2023',
                  '4 February 2023'
                ];

barCharts.forEach(({ id, data, name, color }) => {
                  buildChart(id, (mode) => ({
                    series: [{
                      name,
                      data
                    }],
                    chart: {
                      width: 100,
                      height: 50,
                      type: 'bar',
                      sparkline: {
                        enabled: true
                      }
                    },
                    yaxis: {
                      labels: {
                        show: false,
                      },
                      axisTicks: {
                        show: false,
                      },
                      axisBorder: {
                        show: false,
                      },
                    },
                    xaxis: {
                      type: 'category',
                      categories,
                      crosshairs: {
                        show: false
                      }
                    },
                    tooltip: {
                      marker: {
                        show: false
                      },
                      fixed: {
                        enabled: true,
                        position: 'bottomLeft',
                        offsetX: 10,
                        offsetY: -15
                      },
                      custom: function (props) {
                        const { categories } = props.ctx.opts.xaxis;
                        const { dataPointIndex } = props;
                        const title = categories[dataPointIndex].split(' ');
                        const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                          title: newTitle,
                          mode,
                          hasTextLabel: true,
                          wrapperExtClasses: 'r2dqb',
                          titleExtClasses: 'dv904',
                          labelDivider: ':',
                          labelExtClasses: 'a5dlz'
                        });
                      }
                    }
                  }), () => ({
                    colors: [color],
                    plotOptions: {
                      bar: {
                        colors: {
                          ranges: [{
                            from: -5000,
                            to: 0,
                            color: varToColor('--chart-colors-bar-ranges')
                          }]
                        }
                      }
                    },
                    xaxis: {
                      labels: {
                        style: {
                          colors: varToColor('--chart-colors-xaxis-labels')
                        }
                      }
                    },
                    yaxis: {
                      labels: {
                        style: {
                          colors: varToColor('--chart-colors-yaxis-labels')
                        }
                      }
                    },
                    grid: {
                      borderColor: varToColor('--chart-colors-grid-border')
                    }
                  }), () => ({
                    colors: [color],
                    plotOptions: {
                      bar: {
                        colors: {
                          ranges: [{
                            from: -5000,
                            to: 0,
                            color: varToColor('--chart-colors-bar-ranges-inverse')
                          }]
                        }
                      }
                    },
                    xaxis: {
                      labels: {
                        style: {
                          colors: varToColor('--chart-colors-xaxis-labels-inverse')
                        }
                      }
                    },
                    yaxis: {
                      labels: {
                        style: {
                          colors: varToColor('--chart-colors-yaxis-labels-inverse')
                        }
                      }
                    },
                    grid: {
                      borderColor: varToColor('--chart-colors-grid-border-inverse')
                    }
                  }));
                });
              })();
            });
          </script>

Get all the latest Preline updates and news.

Project Details

CRM Demo: Default Option Preview

CRM Demo: Alternative Listing Option Preview

Subscribe

All examples