Range Filter with Charts

Payment Transactions Price Range 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">
                </head>
                <body class="w-full srfya mx-auto pc4wy nlr7x dark:bg-neutral-900">
              <div class="relative">
                <div id="hs-pro-pytfrrch-bg"></div>
                <div class="absolute gjs78 y3c38 nw84h overflow-hidden">
                  <div id="hs-pro-pytfrrch-fg"></div>
                </div>
              </div>

<div id="hs-pro-pytfrrch" class="z2cv0 --prevent-on-load-init" data-hs-range-slider='{
                  "start": [0, 1000],
                  "range": {
                    "min": 0,
                    "max": 1000
                  },
                  "connect": true,
                  "formatter": "integer",
                  "cssClasses": {
                    "target": "relative kc2ms x66be lu76b",
                    "base": "nw84h relative cv65g",
                    "origin": "absolute gjs78 cxpuq nw84h origin-[0_0] x66be",
                    "handle": "absolute u00sc cxpuq cqwfk xlv2m kqamx t8tjb o67vx x66be u3xci cursor-pointer pmavb -translate-y-2/4",
                    "connects": "relative iu1w6 nw84h x66be overflow-hidden",
                    "connect": "absolute gjs78 cxpuq cv65g nw84h tc9ah origin-[0_0]",
                    "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
                  }
                }'>
              </div>

<div class="hhg1i flex tah6m jggmm">
                
                <div class="jr0cl">
                  <label for="hs-pro-pytfrrch-vtit-min" class="block batu8 zao2n q95gx">
                    Min
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-min" type="number" class="pz76f itsx6 wcr5b block r3ern jr0cl kqamx o67vx hua1b l92i4 bdh8h ozs68 l2bgt wj88j t14am eop5o pfdsd zf04z [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="250" style="-moz-appearance: textfield;">
                </div>

<div class="jr0cl">
                  <label for="hs-pro-pytfrrch-vtit-max" class="block batu8 zao2n q95gx">
                    Max
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-max" type="number" class="pz76f itsx6 wcr5b block r3ern jr0cl kqamx o67vx hua1b l92i4 bdh8h ozs68 l2bgt wj88j t14am eop5o pfdsd zf04z [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="750" style="-moz-appearance: textfield;">
                </div>
                
              </div>
              
                  <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                </body>
              </html>

<!--<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', () => {
                  (function () {
                    const updateForegroundChart = (foregroundParent, foreground, values) => {
                      const from = (100 * values[0]) / 1000;
                      const to = (100 * values[1]) / 1000;
                      const width = (100 - (from + (100 - to)));

foregroundParent.style.left = `${from}%`;
                      foregroundParent.style.width = `${width}%`;
                      foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                      foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                    };

const range = document.querySelector('#hs-pro-pytfrrch');
                    const rangeInstance = new HSRangeSlider(range);
                    const min = document.querySelector('#hs-pro-pytfrrch-vtit-min');
                    const max = document.querySelector('#hs-pro-pytfrrch-vtit-max');
                    const background = document.querySelector('#hs-pro-pytfrrch-bg');
                    const foreground = document.querySelector('#hs-pro-pytfrrch-fg');
                    const foregroundParent = foreground.parentElement;

buildChart('#hs-pro-pytfrrch-bg', (mode) => ({
                      series: [{
                        name: 'Transactions',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                      }],
                      chart: {
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      xaxis: {
                        type: 'category',
                        crosshairs: {
                          show: false
                        }
                      },
                      states: {
                        hover: {
                          filter: {
                            type: 'none'
                          }
                        },
                        active: {
                          allowMultipleDataPointsSelection: false,
                          filter: {
                            type: 'none'
                          }
                        }
                      },
                      tooltip: {
                        enabled: false
                      },
                    }), () => ({
                      colors: [varToColor('--chart-colors-chart-8')],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: varToColor('--chart-colors-chart-1')
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border')
                      }
                    }), () => ({
                      colors: [varToColor('--chart-colors-chart-8-inverse')],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: varToColor('--chart-colors-chart-1-inverse')
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border-inverse')
                      }
                    }));
                    buildChart('#hs-pro-pytfrrch-fg', (mode) => ({
                      series: [{
                        name: 'Transactions',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                      }],
                      chart: {
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      xaxis: {
                        type: 'category',
                        crosshairs: {
                          show: false
                        }
                      },
                      states: {
                        hover: {
                          filter: {
                            type: 'none'
                          }
                        },
                        active: {
                          allowMultipleDataPointsSelection: false,
                          filter: {
                            type: 'none'
                          }
                        }
                      },
                      tooltip: {
                        enabled: false
                      },
                    }), () => ({
                      colors: [varToColor('--chart-colors-primary')],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: varToColor('--chart-colors-chart-1')
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border')
                      }
                    }), () => ({
                      colors: [varToColor('--chart-colors-primary-inverse')],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: varToColor('--chart-colors-chart-1-inverse')
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: varToColor('--chart-colors-grid-border-inverse')
                      }
                    }));

range.noUiSlider.on('update', (values) => {
                      min.value = rangeInstance.formattedValue[0];
                      max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                    });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                    max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("sbj43", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));

// Please add it for the popup to work correctly.
                    const popup = HSOverlay.getInstance('#hs-pro-pytfm', true);

if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                  })();
                });
              </script>

<div id="hs-pro-pytfrrch" class="z2cv0 --prevent-on-load-init" data-hs-range-slider='{
                  "start": [0, 1000],
                  "range": {
                    "min": 0,
                    "max": 1000
                  },
                  "connect": true,
                  "formatter": "integer",
                  "cssClasses": {
                    "target": "relative kc2ms x66be lu76b",
                    "base": "nw84h relative cv65g",
                    "origin": "absolute gjs78 cxpuq nw84h origin-[0_0] x66be",
                    "handle": "absolute u00sc cxpuq cqwfk xlv2m kqamx t8tjb o67vx x66be u3xci cursor-pointer pmavb -translate-y-2/4",
                    "connects": "relative iu1w6 nw84h x66be overflow-hidden",
                    "connect": "absolute gjs78 cxpuq cv65g nw84h tc9ah origin-[0_0]",
                    "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
                  }
                }'>
              </div>

<div class="hhg1i flex tah6m jggmm">
                
                <div class="jr0cl">
                  <label for="hs-pro-pytfrrch-vtit-min" class="block batu8 zao2n q95gx">
                    Min
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-min" type="number" class="pz76f itsx6 wcr5b block r3ern jr0cl kqamx o67vx hua1b l92i4 bdh8h ozs68 l2bgt wj88j t14am eop5o pfdsd zf04z [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="250" style="-moz-appearance: textfield;">
                </div>

<div class="jr0cl">
                  <label for="hs-pro-pytfrrch-vtit-max" class="block batu8 zao2n q95gx">
                    Max
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-max" type="number" class="pz76f itsx6 wcr5b block r3ern jr0cl kqamx o67vx hua1b l92i4 bdh8h ozs68 l2bgt wj88j t14am eop5o pfdsd zf04z [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="750" style="-moz-appearance: textfield;">
                </div>
                
              </div>