Stats Charts

Stats with Line Charts Preview

Theme:

<div class="overflow-hidden">
                <div class="hhg1i">
                  <!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="gs9zt nus97 sin7y g2np1 s2mks">
                    
                    <div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                      <div class="space-y-4">
                        <h2 class="uhey0 b63od q95gx">
                          Open deals
                        </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                      <div class="space-y-4">
                        <h2 class="uhey0 b63od q95gx">
                          Untouched deals
                        </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                      <div class="space-y-4">
                        <h2 class="uhey0 b63od q95gx">
                          Calls today
                        </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                      <div class="space-y-4">
                        <h2 class="uhey0 b63od q95gx">
                          Leads
                        </h2>

<!--<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 Line Charts
                      	  (function () {
                      	    const lineCharts = [
                      	      {
                      	        id: '#hs-open-deals-line-chart',
                      	        data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
                      	        name: 'Open deals',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-untouched-deals-line-chart',
                      	        data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
                      	        name: 'Untouched deals',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-calls-today-line-chart',
                      	        data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
                      	        name: 'Calls today',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-leads-line-chart',
                      	        data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
                      	        name: 'Leads',
                      	        valuePostfix: 'min'
                      	      }
                      	    ];
	    
                      	    lineCharts.forEach(({ id, data, name, valuePostfix }) => {
                      	      buildChart(id, (mode) => ({
                      	        series: [{
                      	          name,
                      	          data
                      	        }],
                      	        chart: {
                      	          height: 30,
                      	          type: 'line',
                      	          sparkline: {
                      	            enabled: true
                      	          }
                      	        },
                      	        stroke: {
                      	          curve: 'straight',
                      	          width: 2
                      	        },
                      	        xaxis: {
                      	          type: 'category',
                      	          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',
                      	            '5 February 2023',
                      	            '6 February 2023',
                      	            '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',
                      	            '5 February 2023',
                      	            '6 February 2023',
                      	            '25 January 2023',
                      	            '26 January 2023',
                      	            '27 January 2023',
                      	            '28 January 2023',
                      	            '29 January 2023'
                      	          ],
                      	          crosshairs: {
                      	            show: false
                      	          }
                      	        },
                      	        markers: {
                      	          hover: {
                      	            size: 0
                      	          }
                      	        },
                      	        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',
                      	              valuePrefix: '',
                      	              labelDivider: ':',
                      	              labelExtClasses: 'a5dlz',
                      	              valuePostfix
                      	            });
                      	          }
                      	        }
                      	      }), () => ({
                      	        colors: [varToColor('--chart-colors-primary')],
                      	      }), () => ({
                      	        colors: [varToColor('--chart-colors-primary-inverse')],
                      	      }));
                      	    });
                      	  })();
                      	});
                      </script>
                    </body>
                  </html>
                </div>
              </div>

<div class="gs9zt nus97 sin7y g2np1 s2mks">
                
                <div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                  <div class="space-y-4">
                    <h2 class="uhey0 b63od q95gx">
                      Open deals
                    </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                  <div class="space-y-4">
                    <h2 class="uhey0 b63od q95gx">
                      Untouched deals
                    </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                  <div class="space-y-4">
                    <h2 class="uhey0 b63od q95gx">
                      Calls today
                    </h2>

<div class="flex flex-col hpidb u64n3 t8tjb u0h0i dao1f vf5zt">
                  <div class="space-y-4">
                    <h2 class="uhey0 b63od q95gx">
                      Leads
                    </h2>

<!--<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 Line Charts
              	  (function () {
              	    const lineCharts = [
              	      {
              	        id: '#hs-open-deals-line-chart',
              	        data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
              	        name: 'Open deals',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-untouched-deals-line-chart',
              	        data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
              	        name: 'Untouched deals',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-calls-today-line-chart',
              	        data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
              	        name: 'Calls today',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-leads-line-chart',
              	        data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
              	        name: 'Leads',
              	        valuePostfix: 'min'
              	      }
              	    ];
	    
              	    lineCharts.forEach(({ id, data, name, valuePostfix }) => {
              	      buildChart(id, (mode) => ({
              	        series: [{
              	          name,
              	          data
              	        }],
              	        chart: {
              	          height: 30,
              	          type: 'line',
              	          sparkline: {
              	            enabled: true
              	          }
              	        },
              	        stroke: {
              	          curve: 'straight',
              	          width: 2
              	        },
              	        xaxis: {
              	          type: 'category',
              	          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',
              	            '5 February 2023',
              	            '6 February 2023',
              	            '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',
              	            '5 February 2023',
              	            '6 February 2023',
              	            '25 January 2023',
              	            '26 January 2023',
              	            '27 January 2023',
              	            '28 January 2023',
              	            '29 January 2023'
              	          ],
              	          crosshairs: {
              	            show: false
              	          }
              	        },
              	        markers: {
              	          hover: {
              	            size: 0
              	          }
              	        },
              	        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',
              	              valuePrefix: '',
              	              labelDivider: ':',
              	              labelExtClasses: 'a5dlz',
              	              valuePostfix
              	            });
              	          }
              	        }
              	      }), () => ({
              	        colors: [varToColor('--chart-colors-primary')],
              	      }), () => ({
              	        colors: [varToColor('--chart-colors-primary-inverse')],
              	      }));
              	    });
              	  })();
              	});
              </script>

Stacked Line Chart Card Group new 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 class="w-full bs2d2 mx-auto pc4wy nlr7x dark:bg-neutral-900">
<div>
  
  <div class="fj10a az05h">
    <div class="gjfoy flex flex-wrap tah6m items-center g2np1 jvyn5 xx8yd y87u5">
      <h2 class="jet6l zao2n l2bgt">
        Analytics
      </h2>

<a class="inline-flex items-center rey4o text-[13px] d8utf vzubd sjf6e dig6r focus:outline-hidden z4f5i disabled:opacity-50 disabled:pointer-events-none" href="#">
        Reports
        <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="m9 18 6-6-6-6"/></svg>
      </a>
    </div>
  </div>

<div class="gs9zt td3jh qildr iryni md:divide-x lg:divide-x-0 divide-line-2">
    
    <div class="fj10a jvyn5 y87u5">
      <div class="flex flex-col">
        
        <div class="relative">
          <div class="os36w">
            <h3 class="zao2n q95gx">
              Total posts
            </h3>
        
            <div class="flex items-center g2np1">
              <p class="ax8xf l2bgt">
                459
              </p>
              <span class="flex gaa3v items-center n68jf zao2n tj1si dark:text-green-500">
                <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                7.8%
              </span>
            </div>
          </div>

<div class="absolute u00sc cxpuq -translate-y-1/2">
            <button type="button" class="group xlv2m lg:size-auto m2tj2 bzohh flex items-center gaa3v t8tjb o67vx a8swc uhey0 x66be ue9hi o3e0q xfy48 u1nja nf0ic jepgh ptec4 b5ia9 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
              <span class="lg:block hidden owxpx overflow-hidden tfcfu opacity-0 ducw2 xo35j group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                View all
              </span>
              <svg class="f832y pacrc" 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 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
            </button>
          </div>
          
        </div>

<div id="hs-pro-abchsm" class="thw0o"></div>
      </div>
    </div>

<div class="fj10a jvyn5 y87u5">
      <div class="flex flex-col">
        
        <div class="relative">
          <div class="os36w">
            <h3 class="zao2n q95gx">
              Repeated visitors
            </h3>
        
            <div class="flex items-center g2np1">
              <p class="ax8xf l2bgt">
                427
              </p>
              <span class="flex gaa3v items-center n68jf zao2n ga58s">
                <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                0.2%
              </span>
            </div>
          </div>

<div class="absolute u00sc cxpuq -translate-y-1/2">
            <button type="button" class="group xlv2m lg:size-auto m2tj2 bzohh flex items-center gaa3v t8tjb o67vx a8swc uhey0 x66be ue9hi o3e0q xfy48 u1nja nf0ic jepgh ptec4 b5ia9 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
              <span class="lg:block hidden owxpx overflow-hidden tfcfu opacity-0 ducw2 xo35j group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                View all
              </span>
              <svg class="f832y pacrc" 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 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
            </button>
          </div>
          
        </div>

<div id="hs-pro-abchs1" class="xwwqc"></div>
      </div>
    </div>

<div class="fj10a jvyn5 y87u5">
      <div class="flex flex-col">
        
        <div class="relative">
          <div class="os36w">
            <h3 class="zao2n q95gx">
              New visitors
            </h3>
        
            <div class="flex items-center g2np1">
              <p class="ax8xf l2bgt">
                103
              </p>
              <span class="flex gaa3v items-center n68jf zao2n tj1si dark:text-green-500">
                <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                9%
              </span>
            </div>
          </div>

<div class="absolute u00sc cxpuq -translate-y-1/2">
            <button type="button" class="group xlv2m lg:size-auto m2tj2 bzohh flex items-center gaa3v t8tjb o67vx a8swc uhey0 x66be ue9hi o3e0q xfy48 u1nja nf0ic jepgh ptec4 b5ia9 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
              <span class="lg:block hidden owxpx overflow-hidden tfcfu opacity-0 ducw2 xo35j group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                View all
              </span>
              <svg class="f832y pacrc" 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 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
            </button>
          </div>
          
        </div>

<div id="hs-pro-abchs2" class="xwwqc"></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 Charts
    		(function () {
    		  const barCharts = [
    		    {
    		      id: '#hs-pro-abchs1',
    		      data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
    		      name: 'Repeated visitors',
    		      valuePostfix: ''
    		    }, {
    		      id: '#hs-pro-abchs2',
    		      data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
    		      name: 'New visitors',
    		      valuePostfix: ''
    		    }
    		  ];

barCharts.forEach(({ id, data, name, valuePostfix }) => {
    		    buildChart(id, (mode) => ({
    		      series: [{
    		        name,
    		        data
    		      }],
    		      chart: {
    		        height: 50,
    		        type: 'area',
    		        sparkline: {
    		          enabled: true
    		        }
    		      },
    					stroke: {
    						curve: 'straight',
    						width: 2
    					},
    		      fill: {
    						type: 'gradient',
    						gradient: {
    							type: 'vertical',
    							shadeIntensity: 1,
    							opacityFrom: 0.2,
    							opacityTo: 0.8
    						}
    					},
    		      xaxis: {
    		        type: 'category',
    		        categories: [
    		          '1 Jun 2025',
    		          '2 Jun 2025',
    		          '3 Jun 2025',
    		          '4 Jun 2025',
    		          '5 Jun 2025',
    		          '6 Jun 2025',
    		          '7 Jun 2025',
    		          '8 Jun 2025',
    		          '9 Jun 2025',
    		          '10 Jun 2025',
    		          '11 Jun 2025',
    		          '12 Jun 2025',
    		          '13 Jun 2025',
    		          '14 Jun 2025',
    		          '15 Jun 2025',
    		          '16 Jun 2025',
    		          '17 Jun 2025',
    		          '18 Jun 2025',
    		          '19 Jun 2025',
    		          '20 Jun 2025',
    		          '21 Jun 2025',
    		          '22 Jun 2025',
    		          '23 Jun 2025',
    		          '24 Jun 2025',
    		          '25 Jun 2025',
    		          '26 Jun 2025',
    		          '27 Jun 2025',
    		          '28 Jun 2025',
    		          '29 Jun 2025',
    		          '30 Jun 2025',
    		          '31 Jun 2025',
    		        ],
    		        crosshairs: {
    		          show: false
    		        }
    		      },
              states: {
                hover: {
                  filter: {
                    type: 'darken',
                    value: 0.9
                  }
                }
              },
    		      tooltip: {
    		        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',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'a5dlz',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex')],
    					fill: {
    						gradient: {
    							stops: [0, 90, 100]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex-inverse')],
    					fill: {
    						gradient: {
    							stops: [100, 90, 0]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }));
    	    });
    	  })();
    	});
    </script>
    <script>
    	window.addEventListener('load', () => {
    	  (function () {
    	    buildChart('#hs-pro-abchsm', (mode) => ({
    	      chart: {
    	        height: 170,
    	        type: 'area',
    	        toolbar: {
    	          show: false
    	        },
    	        sparkline: {
    	          enabled: true
    	        },
    	        zoom: {
    	          enabled: false
    	        }
    	      },
    	      series: [
              {
                name: 'Total posts',
                data: [250, 260, 270, 220, 255, 265, 375, 360, 350, 330, 355, 360, 370, 355, 440, 465, 470, 460, 455, 445, 460, 470, 450, 455, 465, 460, 470, 450, 455, 465, 459],
                valuePostfix: ''
              },
              {
                name: 'Total views',
                data: [780, 770, 760, 790, 775, 765, 755, 870, 880, 890, 875, 870, 860, 975, 990, 965, 960, 970, 975, 1085, 1070, 1060, 1080, 1075, 1065, 1070, 1060, 1080, 1075, 1065, 1071],
                valuePostfix: ''
              }
            ],
    	      legend: {
    	        show: false
    	      },
    	      dataLabels: {
    	        enabled: false
    	      },
    	      stroke: {
    	        curve: 'straight',
    	        width: 2
    	      },
    	      fill: {
    	        type: 'gradient',
    	        gradient: {
    	          type: 'vertical',
    	          shadeIntensity: 1,
    	          opacityFrom: 0.2,
    	          opacityTo: 0.8
    	        }
    	      },
    	      xaxis: {
              type: 'category',
              categories: [
                '1 Jun 2025',
                '2 Jun 2025',
                '3 Jun 2025',
                '4 Jun 2025',
                '5 Jun 2025',
                '6 Jun 2025',
                '7 Jun 2025',
                '8 Jun 2025',
                '9 Jun 2025',
                '10 Jun 2025',
                '11 Jun 2025',
                '12 Jun 2025',
                '13 Jun 2025',
                '14 Jun 2025',
                '15 Jun 2025',
                '16 Jun 2025',
                '17 Jun 2025',
                '18 Jun 2025',
                '19 Jun 2025',
                '20 Jun 2025',
                '21 Jun 2025',
                '22 Jun 2025',
                '23 Jun 2025',
                '24 Jun 2025',
                '25 Jun 2025',
                '26 Jun 2025',
                '27 Jun 2025',
                '28 Jun 2025',
                '29 Jun 2025',
                '30 Jun 2025',
                '31 Jun 2025',
              ],
              crosshairs: {
                show: false
              }
            },
    	      tooltip: {
    	        x: {
    	          format: 'MMMM yyyy'
    	        },
    	        y: {
    	          formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
    	        },
    	        custom: function (props) {
    	          return buildTooltipCompareTwoAlt(props, {
    	            title: 'Members',
    	            mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'xs2kw',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'a5dlz'
    	          });
    	        }
    	      },
    	      responsive: [{
    	        breakpoint: 568,
    	        options: {
    	          chart: {
    	            height: 300
    	          },
    	          labels: {
    	            style: {
    	              colors: varToColor('--chart-colors-labels'),
    	              fontSize: '11px',
    	              fontFamily: cssVarToValue('--font-sans'),
    	              fontWeight: 400
    	            },
    	            offsetX: -2,
    	            formatter: (title) => title.slice(0, 3)
    	          },
    	          yaxis: {
    	            labels: {
    	              align: 'left',
    	              minWidth: 0,
    	              maxWidth: 140,
    	              style: {
    	                colors: varToColor('--chart-colors-yaxis-labels'),
    	                fontSize: '11px',
    	                fontFamily: cssVarToValue('--font-sans'),
    	                fontWeight: 400
    	              },
    	              formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
    	            }
    	          },
    	        },
    	      }]
    	    }), () => ({
    	      colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
    	      fill: {
    	        gradient: {
    	          stops: [0, 90, 100]
    	        }
    	      },
    	      grid: {
    	        strokeDashArray: 2,
    	        borderColor: varToColor('--chart-colors-grid-border'),
    					padding: {
    						bottom: 4
    					},
    	      }
    	    }), () => ({
    	      colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
    	      fill: {
    	        gradient: {
    	          stops: [100, 90, 0]
    	        },
    	      },
    	      grid: {
    	        strokeDashArray: 2,
    	        borderColor: varToColor('--chart-colors-grid-border-inverse'),
    					padding: {
    						bottom: 4
    					}
    	      }
    	    }));
    	  })();
    	});
    </script>
  </body>
</html>

<div>
  
  <div class="fj10a az05h">
    <div class="gjfoy flex flex-wrap tah6m items-center g2np1 jvyn5 xx8yd y87u5">
      <h2 class="jet6l zao2n l2bgt">
        Analytics
      </h2>