@bagelink/vue 1.15.63 → 1.15.65

package/src/components/analytics/BarChart.vue

@@ -1,262 +0,0 @@
-<script setup lang="ts">
-import { formatDate, Icon, Loading } from '@bagelink/vue'
-import { computed, ref, onMounted, onUnmounted } from 'vue'
-
-interface SecondaryValue {
-	label: string
-	value: number
-	currency?: boolean
-	prefix?: string
-	suffix?: string
-}
-
-interface DataPoint {
-	date: string
-	value: number
-	secondaryValues?: SecondaryValue[]
-	label?: string
-}
-
-interface Props {
-	title: string
-	data: DataPoint[]
-	icon?: string
-	color?: string
-	percentageChange?: number
-	prefix?: string
-	suffix?: string
-	currency?: boolean
-	maxBars?: number
-	loading?: boolean
-	rtl?: boolean
-	animated?: boolean
-	animationDuration?: number
-	animationStartDelay?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	icon: 'trending_up',
-	color: 'var(--bgl-primary)',
-	percentageChange: 0,
-	prefix: '',
-	suffix: '',
-	currency: false,
-	maxBars: 30,
-	loading: false,
-	rtl: false,
-	animated: true,
-	animationDuration: 1500,
-	animationStartDelay: 0,
-})
-
-// Animation state
-const animatedProgress = ref(0)
-const isAnimating = ref(false)
-const isInView = ref(false)
-const observer = ref<IntersectionObserver | null>(null)
-const chartRef = ref<HTMLElement | null>(null)
-
-const chartData = computed(() => {
-	if (!props.data || props.data.length === 0) { return [] }
-
-	// Use all data without limiting to maxBars
-	const maxValue = Math.max(...props.data.map(d => d.value), 1)
-	return props.data.map(item => ({
-		...item,
-		height: Math.max((item.value / maxValue) * 100, 2), // Minimum height of 2%
-		displayLabel: formatDate(item.date, 'MMM')
-	}))
-})
-
-// Animation computed properties
-const getBarOpacity = computed(() => {
-	return (index: number) => {
-		if (!props.animated) { return 1 }
-		if (!isInView.value) { return 0 }
-
-		const totalBars = chartData.value.length
-
-		// Each bar appears with a delay based on its index
-		const barDelay = index / totalBars
-		const progress = Math.max(0, Math.min(1, (animatedProgress.value - barDelay) * totalBars))
-
-		return progress
-	}
-})
-
-// Animation functions
-function easeOutCubic(t: number): number {
-	return 1 - (1 - t) ** 3
-}
-
-function startAnimation() {
-	if (isAnimating.value || !props.animated) { return }
-
-	console.log(`🎯 TrendChart: Starting animation with ${props.animationDuration}ms duration`)
-	isAnimating.value = true
-	animatedProgress.value = 0
-
-	const startTime = performance.now()
-
-	function animate(currentTime: number) {
-		const elapsed = currentTime - startTime
-		const progress = Math.min(elapsed / props.animationDuration, 1)
-		const easedProgress = easeOutCubic(progress)
-
-		animatedProgress.value = easedProgress
-
-		if (progress < 1) {
-			requestAnimationFrame(animate)
-		} else {
-			isAnimating.value = false
-			console.log(`✅ TrendChart: Animation completed`)
-		}
-	}
-
-	requestAnimationFrame(animate)
-}
-
-function setupIntersectionObserver() {
-	if (!chartRef.value || observer.value) { return }
-
-	observer.value = new IntersectionObserver(
-		(entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting && !isInView.value) {
-					console.log(`👀 TrendChart: Entered viewport, starting animation in ${props.animationStartDelay}ms`)
-					isInView.value = true
-					setTimeout(() => {
-						startAnimation()
-					}, props.animationStartDelay)
-				}
-			})
-		},
-		{
-			threshold: 0.3,
-			rootMargin: '50px'
-		}
-	)
-
-	observer.value.observe(chartRef.value)
-}
-
-onMounted(() => {
-	if (props.animated) {
-		setupIntersectionObserver()
-	} else {
-		// If not animated, show all bars immediately
-		isInView.value = true
-		animatedProgress.value = 1
-	}
-})
-
-onUnmounted(() => {
-	if (observer.value) {
-		observer.value.disconnect()
-	}
-})
-
-function formatValue(value: number, isCurrency: boolean = false): string {
-	if (isCurrency) {
-		return new Intl.NumberFormat('he-IL', {
-			style: 'currency',
-			currency: 'ILS',
-			minimumFractionDigits: 0
-		}).format(value)
-	}
-	return value.toLocaleString()
-}
-
-function formatTooltip(item: any): string {
-	const primaryValue = formatValue(item.value, props.currency)
-	const primaryText = `${props.prefix}${primaryValue}${props.suffix}`
-	const tooltipLines = [`${item.displayLabel}`, `<b>${primaryText}</b>`]
-
-	if (item.secondaryValues && Array.isArray(item.secondaryValues)) {
-		item.secondaryValues.forEach((secondary: SecondaryValue) => {
-			const formattedSecondaryValue = formatValue(secondary.value, secondary.currency || false)
-			const secondaryText = `${secondary.prefix || ''}${formattedSecondaryValue}${secondary.suffix || ''}`
-			tooltipLines.push(`${secondary.label}: <b>${secondaryText}</b>`)
-		})
-	}
-
-	return `<div class="trendTooltip">${tooltipLines.join('<p>')}</div>`
-}
-</script>
-
-<template>
-	<div ref="chartRef" class="h-100p flex column flex-stretch">
-		<div class="flex space-between  pb-1">
-			<div class="flex align-center gap-05">
-				<Icon :name="icon" size="1.2" :color="color" class="line-height-0" />
-				<p class="white-space light m_txt14">
-					{{ title }}
-				</p>
-			</div>
-			<div v-if="percentageChange !== 0" class="flex align-center gap-025">
-				<Icon
-					:name="percentageChange > 0 ? 'trending_up' : 'trending_down'" size="1"
-					:class="percentageChange > 0 ? 'color-success' : 'color-danger'"
-				/>
-				<span class="txt12 bold" :class="percentageChange > 0 ? 'color-success' : 'color-danger'">
-					{{ Math.abs(percentageChange) }}%
-				</span>
-			</div>
-		</div>
-		<div
-			class="flex w-100p align-items-end mt-auto gap-075 overflow justify-content-start"
-			:class="[rtl ? 'rtl' : 'ltr']"
-		>
-			<div
-				v-for="(bar, index) in chartData" :key="index" v-tooltip="{ content: formatTooltip(bar), html: true }"
-				class="flex-grow txt-center hover transition-400 relative barWrap mb-1" :style="{
-					width: `max(2rem, ${100 / chartData.length}%)`,
-					opacity: getBarOpacity(index),
-					transition: animated ? 'opacity 0.3s ease-out' : 'none',
-				}"
-			>
-				<div
-					class="bar radius-05 transition-400 " :style="{
-						height: `${bar.height * 1.8}px`,
-						background: `linear-gradient(180deg, ${color}60, ${color}30)`,
-						minHeight: '4px',
-					}"
-				/>
-				<span
-					v-if="chartData.length <= 15 || index % Math.ceil(chartData.length / 8) === 0"
-					class="txt-9 block line-height-1 -bottom-075 white-space color-gray absolute"
-					:class="rtl ? 'rtl' : 'ltr'"
-				>
-					{{ bar.displayLabel }}
-				</span>
-			</div>
-		</div>
-		<div v-if="loading" class="absolute inset flex justify-content-center rounded">
-			<Loading v-if="loading" />
-		</div>
-	</div>
-</template>
-
-<style>
-
-.trendTooltip p {
-font-weight: 300 !important;
-font-size: 12px;
-}
-
-.trendTooltip {
-font-weight: 700 !important;
-}
-
-.v-popper--theme-tooltip .v-popper__inner:has(.trendTooltip) {
-background-color: var(--bgl-black) !important;
-color: var(--bgl-white) !important;
-border-radius: 0.5rem !important;
-padding: 0.25rem 0.5rem !important;
-}
-
-.bar {
-min-width: 2rem;
-}
-
-</style>

package/src/components/analytics/KpiCard.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { Card, Icon } from '@bagelink/vue'
-import { computed } from 'vue'
-
-interface Props {
-	title: string
-	value: number | string
-	icon?: string
-	color?: string
-	percentageChange?: number
-	prefix?: string
-	suffix?: string
-	currency?: Currency
-	loading?: boolean
-	subtitle?: string
-}
-
-type Currency = 'ILS' | 'USD' | 'EUR'
-
-const props = withDefaults(defineProps<Props>(), {
-	icon: 'trending_up',
-	color: 'var(--bgl-primary)',
-	percentageChange: 0,
-	prefix: '',
-	suffix: '',
-	loading: false,
-	subtitle: ''
-})
-
-const isIncreasing = computed(() => props.percentageChange >= 0)
-
-const formattedValue = computed(() => {
-	if (typeof props.value === 'string') { return props.value }
-
-	if (props.currency) {
-		return new Intl.NumberFormat('he-IL', {
-			style: 'currency',
-			currency: props.currency,
-			minimumFractionDigits: 0
-		}).format(props.value)
-	}
-
-	return props.value.toLocaleString()
-})
-
-const trendColor = computed(() => isIncreasing.value ? 'var(--bgl-green)' : 'var(--bgl-red)'
-)
-</script>
-
-<template>
-	<Card class=" flex column space-between align-items-start py-1 px-1-5 m_p-1 relative ">
-		<div class="mb-1 flex space-between align-items-start m_mb-05 w-100p">
-			<div class="flex gap-025">
-				<Icon :name="icon" size="1" :color="color" class="line-height-0" weight="300" />
-				<div>
-					<h3 class="txt14 m-0 line-height-12 light opacity-6">
-						{{ title }}
-					</h3>
-					<p v-if="subtitle" class="txt12 color-gray">
-						{{ subtitle }}
-					</p>
-				</div>
-			</div>
-			<div v-if="percentageChange !== 0" class="kpi-trend flex gap-025 txt12 bold ms-auto" :style="{ color: trendColor }">
-				<Icon :name="isIncreasing ? 'trending_up' : 'trending_down'" />
-				<span>{{ Math.abs(percentageChange).toFixed(1) }}%</span>
-			</div>
-		</div>
-
-		<div class="flex">
-			<div class="flex align-items-baseline gap-025 w100p" :class="{ loading }">
-				<span v-if="prefix" class="kpi-prefix txt16 semi color-gray">{{ prefix }}</span>
-				<span class="kpi-main-value bold txt28 m_txt24 line-height-1">{{ loading ? '...' : formattedValue }}</span>
-				<span v-if="suffix" class="kpi-suffix txt16 semi color-gray">{{ suffix }}</span>
-			</div>
-		</div>
-	</Card>
-</template>
-
-<style scoped>
-.loading .kpi-main-value {
-	color: var(--bgl-gray);
-}
-</style>

package/src/components/analytics/LineChart.vue

@@ -1,357 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@bagelink/vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-interface DataPoint {
-	date: string
-	value: number
-	label?: string
-}
-
-interface Props {
-	data: DataPoint[]
-	title?: string
-	icon?: string
-	color?: string
-	height?: number
-	showPoints?: boolean
-	currency?: boolean
-	animated?: boolean
-	animationDuration?: number
-	animationStartDelay?: number
-	percentageChange?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	title: 'Line Chart',
-	icon: 'trending_up',
-	color: 'var(--bgl-primary)',
-	height: 200,
-	showPoints: true,
-	currency: false,
-	animated: true,
-	animationDuration: 1500,
-	animationStartDelay: 0,
-	percentageChange: 0
-})
-
-const svgRef = ref<SVGElement>()
-const chartRef = ref<HTMLElement>()
-const width = ref(600)
-const height = ref(props.height)
-
-// Animation state
-const animatedProgress = ref(0)
-const isAnimating = ref(false)
-const isInView = ref(false)
-
-let observer: IntersectionObserver | null = null
-
-const padding = { top: 20, inline_end: 30, bottom: 25, inline_start: 60 }
-const chartWidth = computed(() => width.value - padding.inline_start - padding.inline_end)
-const chartHeight = computed(() => height.value - padding.top - padding.bottom)
-
-// RTL-aware padding calculations
-const paddingLeft = computed(() => {
-	const isRTL = document.documentElement.dir === 'rtl'
-		|| document.documentElement.getAttribute('lang') === 'he'
-	return isRTL ? padding.inline_end : padding.inline_start
-})
-
-// RTL-aware label positioning
-const labelXPosition = computed(() => {
-	const isRTL = document.documentElement.dir === 'rtl'
-		|| document.documentElement.getAttribute('lang') === 'he'
-	return isRTL ? paddingLeft.value + chartWidth.value + 10 : paddingLeft.value - 10
-})
-
-const labelTextAnchor = computed(() => {
-	const isRTL = document.documentElement.dir === 'rtl'
-		|| document.documentElement.getAttribute('lang') === 'he'
-	return isRTL ? 'start' : 'end'
-})
-
-const maxValue = computed(() => Math.max(...props.data.map(d => d.value), 0))
-const minValue = computed(() => Math.min(...props.data.map(d => d.value), 0))
-
-const xScale = computed(() => {
-	const isRTL = document.documentElement.dir === 'rtl'
-		|| document.documentElement.getAttribute('lang') === 'he'
-	const domain = props.data.length - 1
-
-	return (index: number) => {
-		const position = (index / domain) * chartWidth.value
-		// In RTL, reverse the x position so the chart flows from right to left
-		return isRTL ? chartWidth.value - position : position
-	}
-})
-
-const yScale = computed(() => {
-	const range = maxValue.value - minValue.value || 1
-	return (value: number) => chartHeight.value - ((value - minValue.value) / range) * chartHeight.value
-})
-
-const pathData = computed(() => {
-	if (props.data.length === 0) { return '' }
-
-	// Calculate how many points to show based on animation progress
-	const totalPoints = props.data.length
-	const visiblePoints = props.animated
-		? Math.ceil(totalPoints * animatedProgress.value)
-		: totalPoints
-
-	const dataToShow = props.data.slice(0, Math.max(1, visiblePoints))
-
-	const points = dataToShow.map((d, i) => `${i === 0 ? 'M' : 'L'} ${paddingLeft.value + xScale.value(i)} ${padding.top + yScale.value(d.value)}`
-	).join(' ')
-
-	return points
-})
-
-const visiblePoints = computed(() => {
-	if (!props.animated) { return props.data }
-
-	const totalPoints = props.data.length
-	const pointsToShow = Math.ceil(totalPoints * animatedProgress.value)
-	return props.data.slice(0, Math.max(1, pointsToShow))
-})
-
-const gridLines = computed(() => {
-	const lines = []
-	const step = chartHeight.value / 4
-	for (let i = 0; i <= 4; i++) {
-		const y = i * step
-		const value = maxValue.value - (i / 4) * (maxValue.value - minValue.value)
-		lines.push({ y, value })
-	}
-	return lines
-})
-
-function formatValue(value: number): string {
-	if (props.currency) {
-		return new Intl.NumberFormat('he-IL', {
-			style: 'currency',
-			currency: 'ILS',
-			minimumFractionDigits: 0
-		}).format(value)
-	}
-	return value.toLocaleString()
-}
-
-function formatDate(dateStr: string): string {
-	const date = new Date(dateStr)
-	return date.toLocaleDateString('he-IL', { month: 'short', day: 'numeric' })
-}
-
-function formatTooltip(point: any): string {
-	const tooltipLines = [
-		`${formatDate(point.date)}`,
-		`<b>${formatValue(point.value)}</b>`
-	]
-	if (point.label) {
-		tooltipLines.push(`<b>${point.label}</b>`)
-	}
-	return `<div class="lineTooltip">${tooltipLines.join('<p>')}</div>`
-}
-
-function setupIntersectionObserver() {
-	if (typeof window === 'undefined') { return }
-
-	observer = new IntersectionObserver(
-		(entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting && !isInView.value) {
-					isInView.value = true
-					setTimeout(() => {
-						startAnimation()
-					}, 100 + props.animationStartDelay)
-				}
-			})
-		},
-		{
-			threshold: 0.3,
-			rootMargin: '50px'
-		}
-	)
-
-	if (chartRef.value) {
-		observer.observe(chartRef.value)
-	} else {
-		setTimeout(() => {
-			if (chartRef.value && observer) {
-				observer.observe(chartRef.value)
-			}
-		}, 100)
-	}
-}
-
-function startAnimation() {
-	console.log(`Starting LineChart animation for "${props.title}" (duration: ${props.animationDuration}ms, start delay: ${props.animationStartDelay}ms)`)
-	isAnimating.value = true
-	animatedProgress.value = 0
-
-	const startTime = Date.now()
-
-	const animate = () => {
-		const elapsed = Date.now() - startTime
-		const progress = Math.min(elapsed / props.animationDuration, 1)
-
-		animatedProgress.value = easeOutCubic(progress)
-
-		if (progress < 1) {
-			requestAnimationFrame(animate)
-		} else {
-			isAnimating.value = false
-			console.log(`LineChart animation completed for "${props.title}"`)
-		}
-	}
-
-	requestAnimationFrame(animate)
-}
-
-function easeOutCubic(t: number): number {
-	return 1 - (1 - t) ** 3
-}
-
-onMounted(() => {
-	if (svgRef.value) {
-		width.value = svgRef.value.clientWidth || 600
-	}
-
-	if (props.animated) {
-		setupIntersectionObserver()
-	} else {
-		animatedProgress.value = 1
-	}
-})
-
-onUnmounted(() => {
-	if (observer) {
-		observer.disconnect()
-	}
-})
-</script>
-
-<template>
-	<div ref="chartRef" class="line-chart h-100p flex column flex-stretch">
-		<div class="flex space-between  pb-1">
-			<div class="flex align-center gap-05">
-				<Icon :name="icon" size="1.2" :color="color" class="line-height-0" />
-				<p class="white-space light m_txt14">
-					{{ title }}
-				</p>
-			</div>
-			<div v-if="percentageChange !== 0" class="flex align-center gap-025">
-				<Icon :name="percentageChange > 0 ? 'trending_up' : 'trending_down'" size="1" :class="percentageChange > 0 ? 'color-success' : 'color-danger'" />
-				<span class="txt12 bold" :class="percentageChange > 0 ? 'color-success' : 'color-danger'">
-					{{ Math.abs(percentageChange) }}%
-				</span>
-			</div>
-		</div>
-		<div class="chart-container flex-grow  w-100p relative">
-			<svg ref="svgRef" :width="width" :height="height" class="chart-svg h-100p w-100p">
-				<!-- Grid lines -->
-				<g class="grid">
-					<line v-for="line in gridLines" :key="line.y" :x1="paddingLeft" :y1="padding.top + line.y" :x2="paddingLeft + chartWidth" :y2="padding.top + line.y" stroke="#e0e0e0" stroke-width="1" />
-					<!-- Y-axis labels -->
-					<text v-for="line in gridLines" :key="`label-${line.y}`" :x="labelXPosition" :y="padding.top + line.y + 4" class="grid-label" :text-anchor="labelTextAnchor">
-						{{ formatValue(line.value) }}
-					</text>
-				</g>
-
-				<!-- X-axis -->
-				<line :x1="paddingLeft" :y1="padding.top + chartHeight" :x2="paddingLeft + chartWidth" :y2="padding.top + chartHeight" stroke="#ccc" stroke-width="2" />
-
-				<!-- Y-axis -->
-				<line :x1="paddingLeft" :y1="padding.top" :x2="paddingLeft" :y2="padding.top + chartHeight" stroke="#ccc" stroke-width="2" />
-
-				<!-- Line path -->
-				<path :d="pathData" :stroke="color" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
-
-				<!-- Data points -->
-				<g v-if="showPoints">
-					<circle
-						v-for="(point, index) in visiblePoints" :key="index" v-tooltip="{ content: formatTooltip(point), html: true }" :cx="paddingLeft + xScale(index)"
-						:cy="padding.top + yScale(point.value)" r="4" :fill="color" class="data-point"
-					/>
-				</g>
-
-				<!-- X-axis labels -->
-				<g class="x-labels">
-					<text
-						v-for="(point, index) in visiblePoints.filter((_, i) => i % Math.ceil(visiblePoints.length / 6) === 0)" :key="index"
-						:x="paddingLeft + xScale(visiblePoints.findIndex(d => d === point))" :y="padding.top + chartHeight + 15" class="axis-label" text-anchor="middle"
-					>
-						{{ formatDate(point.date) }}
-					</text>
-				</g>
-			</svg>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-
-.line-chart,
-.chart-container {
-direction: inherit;
-}
-
-.chart-svg {
-transform-origin: center;
-display: block;
-/* Remove any inline spacing */
-}
-
-.chart-container {
-overflow: hidden;
-/* Prevent any overflow spacing */
-}
-
-.grid-label,
-.axis-label {
-fill: var(--bgl-gray) !important;
-;
-font-family: system-ui, -apple-system, sans-serif;
-font-size: 12px;
-margin: 1rem;
-}
-
-.axis-label {
-text-anchor: middle;
-}
-
-.data-point {
-cursor: pointer;
-transition: r 0.2s ease;
-}
-
-.data-point:hover {
-r: 6;
-}
-
-[dir="rtl"] .line-chart {
-text-align: right;
-}
-
-</style>
-
-<style>
-
-.lineTooltip p {
-font-weight: 300 !important;
-font-size: 12px;
-}
-
-.lineTooltip {
-font-weight: 700 !important;
-}
-
-.v-popper--theme-tooltip .v-popper__inner:has(.lineTooltip) {
-background-color: var(--bgl-black) !important;
-color: var(--bgl-white) !important;
-border-radius: 0.5rem !important;
-padding: 0.25rem 0.5rem !important;
-}
-
-</style>