@bagelink/vue 1.4.141 → 1.4.145

package/src/components/analytics/LineChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { Icon } from '@bagelink/vue'
 
 interface DataPoint {
@@ -17,6 +17,10 @@ interface Props {
 	height?: number
 	showPoints?: boolean
 	currency?: boolean
+	animated?: boolean
+	animationDuration?: number
+	animationStartDelay?: number
+	percentageChange?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,13 +29,25 @@ const props = withDefaults(defineProps<Props>(), {
 	color: 'var(--bgl-primary)',
 	height: 200,
 	showPoints: true,
-	currency: false
+	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)
@@ -79,13 +95,29 @@ const yScale = computed(() => {
 const pathData = computed(() => {
 	if (props.data.length === 0) return ''
 
-	const points = props.data.map((d, i) =>
+	// 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
@@ -113,135 +145,170 @@ function formatDate(dateStr: string): string {
 	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>`
+}
+
+const 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)
+	}
+}
+
+const 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)
+}
+
+const easeOutCubic = (t: number): number => {
+	return 1 - Math.pow(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 class="line-chart h-100p flex column flex-stretch">
-		<div class="flex space-between">
-			<div class="flex align-center gap-05 pb-1">
-				<Icon :name="icon" size="1.2" :color="color" class="line-height-08" />
+	<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>
-		<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 data"
-						:key="index"
-						:cx="paddingLeft + xScale(index)"
-						:cy="padding.top + yScale(point.value)"
-						r="4"
-						:fill="color"
-						class="data-point"
-					>
-						<title>{{ formatDate(point.date) }}: {{ formatValue(point.value) }}</title>
-					</circle>
-				</g>
-
-				<!-- X-axis labels -->
-				<g class="x-labels">
-					<text
-						v-for="(point, index) in data.filter((_, i) => i % Math.ceil(data.length / 6) === 0)"
-						:key="index"
-						:x="paddingLeft + xScale(data.findIndex(d => d === point))"
-						:y="padding.top + chartHeight + 15"
-						class="axis-label"
-						text-anchor="middle"
-					>
-						{{ formatDate(point.date) }}
-					</text>
-				</g>
-			</svg>
-		</div>
-	</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 {
+.line-chart,
+.chart-container {
 	direction: inherit;
 }
 
 .chart-svg {
 	transform-origin: center;
-	display: block; /* Remove any inline spacing */
+	display: block;
+	/* Remove any inline spacing */
 }
 
 .chart-container {
-	overflow: hidden; /* Prevent any overflow spacing */
+	overflow: hidden;
+	/* Prevent any overflow spacing */
 }
 
 .grid-label,
 .axis-label {
-	fill: var(--bgl-gray) !important;;
+	fill: var(--bgl-gray) !important;
+	;
 	font-family: system-ui, -apple-system, sans-serif;
 	font-size: 12px;
 	margin: 1rem;
@@ -263,5 +330,22 @@ onMounted(() => {
 [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>