Interactive Data Cards

Line Charts with Datepicker 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="w-full mqmov mx-auto">
              <div class="nw84h flex flex-col u64n3 t8tjb u0h0i y9wzu hua1b">
                
                <div class="hpidb gtp8j flex tah6m items-center">
                  <h2 class="inline-block eitz2 urai8 l2bgt">
                    Total sales
                  </h2>

<div class="hs-dropdown [--auto-close:inside] inline-flex">
                    <button id="hs-pro-dnic" type="button" class="ztqk3 inline-flex items-center uhey0 jet6l 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">
                      <svg class="f832y wbr1m 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="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                      Today
                      <svg class="f832y jpdl0 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="m6 9 6 6 6-6"/></svg>
                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 g12ye transition-[opacity,margin] duration opacity-0 hidden h3g4a j5627 t8tjb wj0s8 hua1b f9ny1" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic">
                      
                          
                          <div class="rnorz space-y-0.5">
                            
                            <div class="gs9zt t15os items-center ary0k y481t gtp8j">
                              
                              <div class="ht3uz">
                                <button type="button" class="c4aky flex gaa3v items-center l2bgt ouzu8 x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden c96wz" aria-label="Previous">
                                  <svg class="f832y krmzt" 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="m15 18-6-6 6-6"/></svg>
                                </button>
                              </div>
                              
          
                              
                              <div class="uh77a flex gaa3v items-center n68jf">
                                <div class="relative">
                                  <select data-hs-select='{
                                      "placeholder": "Select month",
                                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex wblp7 w-full cursor-pointer fb2rt jet6l l2bgt p864q focus:outline-hidden srgj1 before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "r7fmq h3g4a d0nhm tiep7 shpns space-y-0.5 overflow-hidden overflow-y-auto eqcl3 t8tjb o67vx hua1b f9ny1 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                      "optionClasses": "ztqk3 w-full zao2n ds24c cursor-pointer zoob6 mobw6 focus:outline-hidden pdd91",
                                      "optionTemplate": "<div class=\"flex tah6m items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"f832y t6dfr l2bgt \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                                    }' class="hidden">
                                    <option value="0">January</option>
                                    <option value="1">February</option>
                                    <option value="2">March</option>
                                    <option value="3">April</option>
                                    <option value="4">May</option>
                                    <option value="5">June</option>
                                    <option value="6" selected>July</option>
                                    <option value="7">August</option>
                                    <option value="8">September</option>
                                    <option value="9">October</option>
                                    <option value="10">November</option>
                                    <option value="11">December</option>
                                  </select>
                                </div>

<div class="relative">
                                  <select data-hs-select='{
                                      "placeholder": "Select year",
                                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex wblp7 w-full cursor-pointer fb2rt jet6l l2bgt p864q focus:outline-hidden srgj1 before:absolute before:inset-0 before:z-1",
                                      "dropdownClasses": "r7fmq h3g4a o3b15 tiep7 shpns space-y-0.5 overflow-hidden overflow-y-auto eqcl3 t8tjb o67vx hua1b f9ny1 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                      "optionClasses": "ztqk3 w-full zao2n ds24c cursor-pointer zoob6 mobw6 focus:outline-hidden pdd91",
                                      "optionTemplate": "<div class=\"flex tah6m items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"f832y t6dfr l2bgt \" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                                    }' class="hidden">
                                    <option selected>2023</option>
                                    <option>2024</option>
                                    <option>2025</option>
                                    <option>2026</option>
                                    <option>2027</option>
                                  </select>
                                </div>
                              </div>

<div class="ht3uz flex wzdcx">
                                <button type="button" class=" c4aky flex gaa3v items-center l2bgt ouzu8 x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden c96wz" aria-label="Next">
                                  <svg class="f832y krmzt" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </button>
                              </div>
                              
                            </div>

<div class="flex uaxxl">
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Mo
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Tu
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                We
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Th
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Fr
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Sa
                              </span>
                              <span class="yme7p ca51f block jr0cl zao2n q95gx">
                                Su
                              </span>
                            </div>

<div class="flex">
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1" disabled>
                                  26
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1" disabled>
                                  27
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1" disabled>
                                  28
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1" disabled>
                                  29
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1" disabled>
                                  30
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  1
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  2
                                </button>
                              </div>
                            </div>

<div class="flex">
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  3
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  4
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  5
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  6
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  7
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  8
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  9
                                </button>
                              </div>
                            </div>

<div class="flex">
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  10
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  11
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  12
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  13
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  14
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  15
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  16
                                </button>
                              </div>
                            </div>
                            
      
                            
                            <div class="flex">
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  17
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  18
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  19
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center tc9ah border-[1.5px] whmvu zao2n jet6l rzxzt t14am x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4">
                                  20
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  21
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  22
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  23
                                </button>
                              </div>
                            </div>
                            
      
                            
                            <div class="flex">
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  24
                                </button>
                              </div>
                              <div >
                                  <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  25
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  26
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  27
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  28
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  29
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  30
                                </button>
                              </div>
                            </div>
                            
      
                            
                            <div class="flex">
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt x66be t14am p864q disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zr7p6 srgj1">
                                  31
                                </button>
                              </div>
                              <div >
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  1
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  2
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  3
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  4
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  5
                                </button>
                              </div>
                              <div>
                                <button type="button" class="yme7p toggy flex gaa3v items-center border-[1.5px] whmvu zao2n l2bgt t14am p864q x66be disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden ka9j4" disabled>
                                  6
                                </button>
                              </div>
                            </div>
                            
                          </div>
                      
                    </div>
                  </div>
                  
                </div>

<div class="vaohh rwomv x2v9d space-y-8">
                  <h4 class="wbmfx jet6l l2bgt">
                    <span class="-me-1.5 zao2n komn0 q95gx">$</span>
                     43,350
                  </h4>

<ul class="space-y-3">
                    
                    <li class="flex flex-wrap tah6m items-center c3em3">
                      <div>
                        <div class="flex items-center c3em3">
                          <div class="inline-block o8wc8 tc9ah wcr2t"></div>
                          <h2 class="inline-block gx41e q95gx">
                            Store sales
                          </h2>
                        </div>
                      </div>
                      <div>
                        <span class="l2bgt">
                           $51,392
                        </span>
                        <span class="lqheg s1vpd inline-block q95gx">
                          <svg class="inline-block gx41e krmzt mgrry" 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>
                          38.2%
                        </span>
                      </div>
                    </li>

<li class="flex flex-wrap tah6m items-center c3em3">
                      <div>
                        <div class="flex items-center c3em3">
                          <div class="inline-block o8wc8 ljluy wcr2t"></div>
                          <h2 class="inline-block gx41e q95gx">
                            Online sales
                          </h2>
                        </div>
                      </div>
                      <div>
                        <span class="l2bgt">
                           $46,420
                        </span>
                        <span class="lqheg s1vpd inline-block q95gx">
                          <svg class="inline-block gx41e krmzt mgrry" 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>
                          5.9%
                        </span>
                      </div>
                    </li>
                    
      
                    
                    <li class="flex flex-wrap tah6m items-center c3em3">
                      <div>
                        <div class="flex items-center c3em3">
                          <div class="inline-block o8wc8 uu37r wcr2t"></div>
                          <h2 class="inline-block gx41e q95gx">
                            Others
                          </h2>
                        </div>
                      </div>
                      <div>
                        <span class="l2bgt">
                           $39,539
                        </span>
                        <span class="lqheg s1vpd inline-block q95gx">
                          <svg class="inline-block gx41e krmzt ga58s" 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>
                          3.1%
                        </span>
                      </div>
                    </li>
                    
                  </ul>
                  
                </div>
                
  
                
                <div class="hpidb zqig8 space-y-8">
                  <div class="w-full">
                    
                    <div id="hs-total-sales-lines-chart" class="min-h-[115px] "></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 Lines Chart
                  	  (function () {
                  	    buildChart(
                  	      "#hs-total-sales-lines-chart",
                  	      (mode) => ({
                  	        series: [
                  	          {
                  	            name: "Store sales",
                  	            data: [0, 27000, 5000, 27000, 40000, 30000, 48000],
                  	          },
                  	          {
                  	            name: "Online sales",
                  	            data: [19500, 10000, 1000, 17500, 6000, 20500, 24000],
                  	          },
                  	          {
                  	            name: "Others",
                  	            data: [12500, 7000, 4000, 8000, 10000, 12800, 8500],
                  	          },
                  	        ],
                  	        chart: {
                  	          height: 100,
                  	          type: "line",
                  	          sparkline: {
                  	            enabled: true,
                  	          },
                  	        },
                  	        stroke: {
                  	          curve: "straight",
                  	          width: 2,
                  	        },
                  	        xaxis: {
                  	          type: "category",
                  	          categories: [
                  	            "25 January 2023",
                  	            "1 February 2023",
                  	            "5 February 2023",
                  	            "10 February 2023",
                  	            "15 February 2023",
                  	            "20 February 2023",
                  	            "25 February 2023",
                  	          ],
                  	          crosshairs: {
                  	            show: false,
                  	          },
                  	        },
                  	        markers: {
                  	          hover: {
                  	            size: 0,
                  	          },
                  	        },
                  	        tooltip: {
                  	          custom: function (props) {
                  	            const { categories } = props.ctx.opts.xaxis;
                  	            const { dataPointIndex } = props;
                  	            const title = categories[dataPointIndex];

return buildTooltip(props, {
                  	              title: title,
                  	              mode,
                  	              hasTextLabel: true,
                  	              wrapperExtClasses: "qt9ew",
                  	              labelDivider: ":",
                  	              labelExtClasses: "a5dlz",
                  	            });
                  	          },
                  	        },
                  	      }),
                  	      () => ({
                  	        colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-5'), varToColor('--chart-colors-chart-9')],
                  	        grid: {
                  	          borderColor: varToColor('--chart-colors-grid-border'),
                  	        },
                  	        fill: {
                  	          type: "gradient",
                  	          gradient: {
                  	            gradientToColors: [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background')],
                  	          },
                  	        },
                  	      }),
                  	      () => ({
                  	        colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-5-inverse'), varToColor('--chart-colors-chart-9-inverse')],
                  	        grid: {
                  	          borderColor: varToColor('--chart-colors-grid-border-inverse'),
                  	        },
                  	        fill: {
                  	          type: "gradient",
                  	          gradient: {
                  	            gradientToColors: [varToColor('--chart-colors-background-inverse'), varToColor('--chart-colors-background-inverse'), varToColor('--chart-colors-background-inverse')],
                  	          },
                  	        },
                  	      })
                  	    );
                  	  })();
                  	});
                  </script>
                </body>
              </html>

<div class="nw84h flex flex-col u64n3 t8tjb u0h0i y9wzu hua1b">
                
                <div class="hpidb gtp8j flex tah6m items-center">
                  <h2 class="inline-block eitz2 urai8 l2bgt">
                    Total sales
                  </h2>