@bagelink/vue 1.6.43 → 1.6.49

package/src/components/analytics/BarChart.vue

@@ -57,7 +57,7 @@ const observer = ref<IntersectionObserver | null>(null)
 const chartRef = ref<HTMLElement | null>(null)
 
 const chartData = computed(() => {
-	if (!props.data || 0 === props.data.length) {return []}
+	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)
@@ -71,8 +71,8 @@ const chartData = computed(() => {
 // Animation computed properties
 const getBarOpacity = computed(() => {
 	return (index: number) => {
-		if (!props.animated) {return 1}
-		if (!isInView.value) {return 0}
+		if (!props.animated) { return 1 }
+		if (!isInView.value) { return 0 }
 
 		const totalBars = chartData.value.length
 
@@ -90,7 +90,7 @@ function easeOutCubic(t: number): number {
 }
 
 function startAnimation() {
-	if (isAnimating.value || !props.animated) {return}
+	if (isAnimating.value || !props.animated) { return }
 
 	console.log(`🎯 TrendChart: Starting animation with ${props.animationDuration}ms duration`)
 	isAnimating.value = true
@@ -105,7 +105,7 @@ function startAnimation() {
 
 		animatedProgress.value = easedProgress
 
-		if (1 > progress) {
+		if (progress < 1) {
 			requestAnimationFrame(animate)
 		} else {
 			isAnimating.value = false
@@ -117,7 +117,7 @@ function startAnimation() {
 }
 
 function setupIntersectionObserver() {
-	if (!chartRef.value || observer.value) {return}
+	if (!chartRef.value || observer.value) { return }
 
 	observer.value = new IntersectionObserver(
 		(entries) => {

package/src/components/analytics/KpiCard.vue

@@ -27,10 +27,10 @@ const props = withDefaults(defineProps<Props>(), {
 	subtitle: ''
 })
 
-const isIncreasing = computed(() => 0 <= props.percentageChange)
+const isIncreasing = computed(() => props.percentageChange >= 0)
 
 const formattedValue = computed(() => {
-	if ('string' === typeof props.value) {return props.value}
+	if (typeof props.value === 'string') { return props.value }
 
 	if (props.currency) {
 		return new Intl.NumberFormat('he-IL', {

package/src/components/analytics/LineChart.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-
-import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { Icon } from '@bagelink/vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 interface DataPoint {
 	date: string
@@ -54,21 +53,21 @@ const chartHeight = computed(() => height.value - padding.top - padding.bottom)
 
 // RTL-aware padding calculations
 const paddingLeft = computed(() => {
-	const isRTL = 'rtl' === document.documentElement.dir ||
-		 'he' === document.documentElement.getAttribute('lang')
+	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 = 'rtl' === document.documentElement.dir ||
-		 'he' === document.documentElement.getAttribute('lang')
+	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 = 'rtl' === document.documentElement.dir ||
-		 'he' === document.documentElement.getAttribute('lang')
+	const isRTL = document.documentElement.dir === 'rtl'
+		|| document.documentElement.getAttribute('lang') === 'he'
 	return isRTL ? 'start' : 'end'
 })
 
@@ -76,8 +75,8 @@ 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 = 'rtl' === document.documentElement.dir ||
-		 'he' === document.documentElement.getAttribute('lang')
+	const isRTL = document.documentElement.dir === 'rtl'
+		|| document.documentElement.getAttribute('lang') === 'he'
 	const domain = props.data.length - 1
 
 	return (index: number) => {
@@ -93,25 +92,24 @@ const yScale = computed(() => {
 })
 
 const pathData = computed(() => {
-	if (0 === props.data.length) {return ''}
+	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 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) =>
-		`${ 0 === i ? 'M' : 'L'} ${paddingLeft.value + xScale.value(i)} ${padding.top + yScale.value(d.value)}`
+	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}
+	if (!props.animated) { return props.data }
 
 	const totalPoints = props.data.length
 	const pointsToShow = Math.ceil(totalPoints * animatedProgress.value)
@@ -121,7 +119,7 @@ const visiblePoints = computed(() => {
 const gridLines = computed(() => {
 	const lines = []
 	const step = chartHeight.value / 4
-	for (let i = 0; 4 >= i; i++) {
+	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 })
@@ -156,8 +154,8 @@ function formatTooltip(point: any): string {
 	return `<div class="lineTooltip">${tooltipLines.join('<p>')}</div>`
 }
 
-const setupIntersectionObserver = () => {
-	if ('undefined' === typeof window) {return}
+function setupIntersectionObserver() {
+	if (typeof window === 'undefined') { return }
 
 	observer = new IntersectionObserver(
 		(entries) => {
@@ -187,7 +185,7 @@ const setupIntersectionObserver = () => {
 	}
 }
 
-const startAnimation = () => {
+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
@@ -200,7 +198,7 @@ const startAnimation = () => {
 
 		animatedProgress.value = easeOutCubic(progress)
 
-		if (1 > progress) {
+		if (progress < 1) {
 			requestAnimationFrame(animate)
 		} else {
 			isAnimating.value = false
@@ -211,8 +209,8 @@ const startAnimation = () => {
 	requestAnimationFrame(animate)
 }
 
-const easeOutCubic = (t: number): number => {
-	return 1 - Math.pow(1 - t, 3)
+function easeOutCubic(t: number): number {
+	return 1 - (1 - t) ** 3
 }
 
 onMounted(() => {
@@ -249,43 +247,47 @@ onUnmounted(() => {
 					{{ 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>
+		</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>

package/src/components/analytics/PieChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { Icon } from '@bagelink/vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 
 interface PieData {
 	label: string
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
 // Generate colors with different opacity based on the main color OR use custom colors
 const colors = computed(() => {
 	// If custom colors array is provided, use it
-	if (props.colors && 0 < props.colors.length) {
+	if (props.colors && props.colors.length > 0) {
 		return props.colors
 	}
 
@@ -62,12 +62,12 @@ const colors = computed(() => {
 	const baseColor = props.color
 	const opacities = [1, 0.8, 0.6, 0.4, 0.85, 0.7, 0.5, 0.3, 0.9, 0.75]
 
-	return opacities.map(opacity => {
+	return opacities.map((opacity) => {
 		// Convert hex to rgba with opacity
 		const hex = baseColor.replace('#', '')
-		const r = parseInt(hex.substr(0, 2), 16)
-		const g = parseInt(hex.substr(2, 2), 16)
-		const b = parseInt(hex.substr(4, 2), 16)
+		const r = Number.parseInt(hex.substr(0, 2), 16)
+		const g = Number.parseInt(hex.substr(2, 2), 16)
+		const b = Number.parseInt(hex.substr(4, 2), 16)
 
 		return `rgba(${r}, ${g}, ${b}, ${opacity})`
 	})
@@ -87,16 +87,16 @@ onMounted(() => {
 	}
 })
 
+let observer: IntersectionObserver | null = null
+
 onUnmounted(() => {
 	if (observer) {
 		observer.disconnect()
 	}
 })
 
-let observer: IntersectionObserver | null = null
-
-const setupIntersectionObserver = () => {
-	if ('undefined' === typeof window) {return}
+function setupIntersectionObserver() {
+	if (typeof window === 'undefined') { return }
 
 	observer = new IntersectionObserver(
 		(entries) => {
@@ -129,8 +129,8 @@ const setupIntersectionObserver = () => {
 	}
 }
 
-const startAnimation = () => {
-	const delayType = 0 < props.animationDelay ? "staggered with delay" : "quick stagger"
+function startAnimation() {
+	const delayType = props.animationDelay > 0 ? 'staggered with delay' : 'quick stagger'
 	console.log(`Starting animation for "${props.title}" - ${delayType} mode (duration: ${props.animationDuration}ms, start delay: ${props.animationStartDelay}ms)`)
 	isAnimating.value = true
 	animatedProgress.value = 0
@@ -144,7 +144,7 @@ const startAnimation = () => {
 		// Easing function for smooth animation
 		animatedProgress.value = easeOutCubic(progress)
 
-		if (1 > progress) {
+		if (progress < 1) {
 			requestAnimationFrame(animate)
 		} else {
 			isAnimating.value = false
@@ -155,12 +155,12 @@ const startAnimation = () => {
 	requestAnimationFrame(animate)
 }
 
-const easeOutCubic = (t: number): number => {
-	return 1 - Math.pow(1 - t, 3)
+function easeOutCubic(t: number): number {
+	return 1 - (1 - t) ** 3
 }
 
 // Expose animation control methods
-const restartAnimation = () => {
+function restartAnimation() {
 	if (props.animated) {
 		startAnimation()
 	}
@@ -174,8 +174,8 @@ defineExpose({
 const svgSize = computed(() => {
 	if (props.showConnectorLines) {
 		return {
-			width: props.size + 200,  // Increased even more
-			height: props.size + 100  // Increased even more
+			width: props.size + 200, // Increased even more
+			height: props.size + 100 // Increased even more
 		}
 	}
 	return {
@@ -188,7 +188,7 @@ const svgSize = computed(() => {
 const centerOffset = computed(() => {
 	if (props.showConnectorLines) {
 		return {
-			x: svgSize.value.width / 2 - 10,  // Less offset
+			x: svgSize.value.width / 2 - 10, // Less offset
 			y: svgSize.value.height / 2
 		}
 	}
@@ -198,12 +198,11 @@ const centerOffset = computed(() => {
 	}
 })
 
-const totalValue = computed(() =>
-	props.data.reduce((sum, item) => sum + item.value, 0)
+const totalValue = computed(() => props.data.reduce((sum, item) => sum + item.value, 0)
 )
 
 // Calculate label positions for segments
-const getLabelPosition = (segment: any) => {
+function getLabelPosition(segment: any) {
 	const midAngle = (segment.startAngle + segment.endAngle) / 2
 	const midAngleRad = (midAngle * Math.PI) / 180
 	const radius = props.size / 2 - 10
@@ -216,12 +215,12 @@ const getLabelPosition = (segment: any) => {
 }
 
 // Calculate connector line positions
-const getConnectorLine = (segment: any) => {
+function getConnectorLine(segment: any) {
 	const midAngle = (segment.startAngle + segment.endAngle) / 2
 	const midAngleRad = (midAngle * Math.PI) / 180
 	const radius = props.size / 2 - 10
 	const innerRadius = props.donut ? radius * props.thickness : radius * 0.5
-	const outerRadius = radius + 15  // Reduced from 20 to 15
+	const outerRadius = radius + 15 // Reduced from 20 to 15
 
 	const innerX = Math.cos(midAngleRad) * innerRadius
 	const innerY = Math.sin(midAngleRad) * innerRadius
@@ -229,7 +228,7 @@ const getConnectorLine = (segment: any) => {
 	const outerY = Math.sin(midAngleRad) * outerRadius
 
 	// Extended line for label - reduced extension
-	const labelX = outerX + (0 < outerX ? 8 : -8)  // Reduced from 10 to 8
+	const labelX = outerX + (outerX > 0 ? 8 : -8) // Reduced from 10 to 8
 	const labelY = outerY
 
 	return {
@@ -239,7 +238,7 @@ const getConnectorLine = (segment: any) => {
 		outerY,
 		labelX,
 		labelY,
-		textAnchor: 0 < outerX ? 'start' : 'end'
+		textAnchor: outerX > 0 ? 'start' : 'end'
 	}
 }
 
@@ -263,19 +262,19 @@ const pieSegments = computed(() => {
 		// Calculate if this segment should be visible based on animation progress
 		// Add a small delay even for the first segment to avoid immediate appearance
 		const baseDelay = 100 // 100ms delay for the first segment
-		const segmentDelay = 0 < props.animationDelay ?
-			baseDelay + (index * props.animationDelay) :
-			baseDelay + (index * 50) // Small stagger even when animationDelay is 0
+		const segmentDelay = props.animationDelay > 0
+			? baseDelay + (index * props.animationDelay)
+			: baseDelay + (index * 50) // Small stagger even when animationDelay is 0
 		const totalElapsedTime = animatedProgress.value * props.animationDuration
 		const isVisible = !props.animated || totalElapsedTime >= segmentDelay
 
 		// Debug log for animation
-		if (props.animated && 0 === index) {
+		if (props.animated && index === 0) {
 			console.log(`Animation progress: ${(animatedProgress.value * 100).toFixed(1)}%, elapsed: ${totalElapsedTime.toFixed(0)}ms`)
 		}
 
 		if (!isVisible) {
-			if (3 > index) {
+			if (index < 3) {
 				console.log(`Segment ${index} waiting - needs ${segmentDelay}ms, current: ${totalElapsedTime.toFixed(0)}ms`)
 			}
 			return {
@@ -288,7 +287,7 @@ const pieSegments = computed(() => {
 				color: item.color || colors.value[index % colors.value.length],
 				visible: false
 			}
-		}if (index < 3) {
+		} if (index < 3) {
 			console.log(`Segment ${index} visible! - delay: ${segmentDelay}ms, elapsed: ${totalElapsedTime.toFixed(0)}ms`)
 		}
 
@@ -299,7 +298,7 @@ const pieSegments = computed(() => {
 		const innerRadius = props.donut ? radius * props.thickness : 0
 
 		const segmentAngle = endAngle - startAngle
-		const largeArcFlag = 180 < segmentAngle ? 1 : 0
+		const largeArcFlag = segmentAngle > 180 ? 1 : 0
 
 		const pathData = props.donut
 			? createDonutPath(startAngleRad, endAngleRad, radius, innerRadius, largeArcFlag)
@@ -375,78 +374,93 @@ function formatTooltip(segment: any): string {
 					{{ Math.abs(percentageChange) }}%
 				</span>
 			</div>
-			</div>
-			<div class="chart-container flex space-between gap-1 flex-wrap flex-grow" :class="{ 'with-legend': showLegend, 'with-connectors': showConnectorLines }">
-				<svg :width="svgSize.width" :height="svgSize.height" class="chart-svg mx-auto flex-shrink-0" :style="showConnectorLines ? 'overflow: visible;' : ''">
-					<g :transform="`translate(${centerOffset.x}, ${centerOffset.y})`">
-						<path v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="index" v-tooltip="{ content: formatTooltip(segment), html: true }" :d="segment.path" :fill="segment.color"
-							class="pie-segment" stroke="white" stroke-width="2" />
-			
-						<!-- Center text for donut chart -->
-						<g v-if="donut && (showCenterTotal || centerValue !== undefined)" class="center-text">
-							<text x="0" y="-8" text-anchor="middle" dominant-baseline="middle" class="center-label txt12 opacity-7">
-								{{ centerLabel }}
+		</div>
+		<div class="chart-container flex space-between gap-1 flex-wrap flex-grow" :class="{ 'with-legend': showLegend, 'with-connectors': showConnectorLines }">
+			<svg :width="svgSize.width" :height="svgSize.height" class="chart-svg mx-auto flex-shrink-0" :style="showConnectorLines ? 'overflow: visible;' : ''">
+				<g :transform="`translate(${centerOffset.x}, ${centerOffset.y})`">
+					<path
+						v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="index" v-tooltip="{ content: formatTooltip(segment), html: true }" :d="segment.path" :fill="segment.color"
+						class="pie-segment" stroke="white" stroke-width="2"
+					/>
+
+					<!-- Center text for donut chart -->
+					<g v-if="donut && (showCenterTotal || centerValue !== undefined)" class="center-text">
+						<text x="0" y="-8" text-anchor="middle" dominant-baseline="middle" class="center-label txt12 opacity-7">
+							{{ centerLabel }}
+						</text>
+						<text x="0" y="12" text-anchor="middle" dominant-baseline="middle" class="center-value txt20 bold">
+							{{ formatValue(centerDisplayValue) }}
+						</text>
+					</g>
+
+					<!-- Connector lines -->
+					<g v-if="showConnectorLines" class="connector-lines">
+						<g v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`line-${index}`">
+							<polyline
+								:points="`${getConnectorLine(segment).innerX},${getConnectorLine(segment).innerY} ${getConnectorLine(segment).outerX},${getConnectorLine(segment).outerY} ${getConnectorLine(segment).labelX},${getConnectorLine(segment).labelY}`"
+								stroke="#333" stroke-width="1.5" fill="none"
+							/>
+						</g>
+					</g>
+
+					<!-- Labels on chart -->
+					<g v-if="showLabelsOnChart" class="chart-labels">
+						<!-- Labels without connector lines -->
+						<g v-if="!showConnectorLines">
+							<text
+								v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`label-${index}`" :x="getLabelPosition(segment).x" :y="getLabelPosition(segment).y - 5"
+								text-anchor="middle" dominant-baseline="middle" class="chart-label txt12 pointer-events-none" :fill="labelColor"
+							>
+								{{ segment.label }}
 							</text>
-							<text x="0" y="12" text-anchor="middle" dominant-baseline="middle" class="center-value txt20 bold">
-								{{ formatValue(centerDisplayValue) }}
+							<text
+								v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`value-${index}`" :x="getLabelPosition(segment).x" :y="getLabelPosition(segment).y + 12"
+								text-anchor="middle" dominant-baseline="middle" class="chart-value txt16 mt-1 line-height-2 bold pointer-events-none" :fill="labelColor"
+							>
+								{{ formatValue(segment.value) }}
 							</text>
 						</g>
-			
-						<!-- Connector lines -->
-						<g v-if="showConnectorLines" class="connector-lines">
-							<g v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`line-${index}`">
-								<polyline
-									:points="`${getConnectorLine(segment).innerX},${getConnectorLine(segment).innerY} ${getConnectorLine(segment).outerX},${getConnectorLine(segment).outerY} ${getConnectorLine(segment).labelX},${getConnectorLine(segment).labelY}`"
-									stroke="#333" stroke-width="1.5" fill="none" />
-							</g>
-						</g>
-			
-						<!-- Labels on chart -->
-						<g v-if="showLabelsOnChart" class="chart-labels">
-							<!-- Labels without connector lines -->
-							<g v-if="!showConnectorLines">
-								<text v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`label-${index}`" :x="getLabelPosition(segment).x" :y="getLabelPosition(segment).y - 5"
-									text-anchor="middle" dominant-baseline="middle" class="chart-label txt12 pointer-events-none" :fill="labelColor">
-									{{ segment.label }}
-								</text>
-								<text v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`value-${index}`" :x="getLabelPosition(segment).x" :y="getLabelPosition(segment).y + 12"
-									text-anchor="middle" dominant-baseline="middle" class="chart-value txt16 mt-1 line-height-2 bold pointer-events-none" :fill="labelColor">
-									{{ formatValue(segment.value) }}
-								</text>
-							</g>
-			
-							<!-- Labels with connector lines -->
-							<text v-if="showConnectorLines" v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`label-line-${index}`" :x="getConnectorLine(segment).labelX"
-								:y="getConnectorLine(segment).labelY - 8" :text-anchor="getConnectorLine(segment).textAnchor" dominant-baseline="middle" class="chart-label txt12 bold" :fill="labelColor">
+
+						<!-- Labels with connector lines -->
+						<template v-if="showConnectorLines">
+							<text
+								v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`label-line-${index}`" :x="getConnectorLine(segment).labelX"
+								:y="getConnectorLine(segment).labelY - 8" :text-anchor="getConnectorLine(segment).textAnchor" dominant-baseline="middle" class="chart-label txt12 bold" :fill="labelColor"
+							>
 								{{ segment.label }}
 							</text>
-			
+
 							<!-- Value labels with connector lines -->
-							<text v-if="showConnectorLines" v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`value-line-${index}`" :x="getConnectorLine(segment).labelX"
-								:y="getConnectorLine(segment).labelY + 2" :text-anchor="getConnectorLine(segment).textAnchor" dominant-baseline="middle" class="chart-value txt11" fill="#666">
+							<text
+								v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`value-line-${index}`" :x="getConnectorLine(segment).labelX"
+								:y="getConnectorLine(segment).labelY + 2" :text-anchor="getConnectorLine(segment).textAnchor" dominant-baseline="middle" class="chart-value txt11" fill="#666"
+							>
 								{{ formatValue(segment.value) }}
 							</text>
-			
+
 							<!-- Percentage labels with connector lines -->
-							<text v-if="showConnectorLines" v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`percentage-${index}`" :x="getConnectorLine(segment).labelX"
+							<text
+								v-for="(segment, index) in pieSegments.filter(s => s.visible)" :key="`percentage-${index}`" :x="getConnectorLine(segment).labelX"
 								:y="getConnectorLine(segment).labelY + 15" :text-anchor="getConnectorLine(segment).textAnchor" dominant-baseline="middle" class="chart-percentage txt10 pointer-events-none"
-								fill="#999">
+								fill="#999"
+							>
 								({{ formatPercentage(segment.percentage) }})
 							</text>
-						</g>
+						</template>
 					</g>
-				</svg>
-			
-				<div v-if="showLegend" class="legend mx-auto display-flex column gap-05 min-w-100px">
-					<div v-for="(segment, index) in pieSegments" :key="index" class="gap-1 flex align-items-center txt14 justify-content-start">
-						<div class="legend-color flex-shrink-0 radius-05" :style="{ backgroundColor: segment.color }" />
-						<span v-if="segment.label" class="flex-shrink-1 flex-grow-1">{{ segment.label }}</span>
-						<span class="bold">{{ formatValue(segment.value) }}</span>
-						<span class="opacity-6 txt12">({{ formatPercentage(segment.percentage) }})</span>
-					</div>
+				</g>
+			</svg>
+
+			<div v-if="showLegend" class="legend mx-auto display-flex column gap-05 min-w-100px">
+				<div v-for="(segment, index) in pieSegments" :key="index" class="gap-1 flex align-items-center txt14 justify-content-start">
+					<div class="legend-color flex-shrink-0 radius-05" :style="{ backgroundColor: segment.color }" />
+					<span v-if="segment.label" class="flex-shrink-1 flex-grow-1">{{ segment.label }}</span>
+					<span class="bold">{{ formatValue(segment.value) }}</span>
+					<span class="opacity-6 txt12">({{ formatPercentage(segment.percentage) }})</span>
 				</div>
 			</div>
-			</div>
+		</div>
+	</div>
 </template>
 
 <style scoped>

package/src/components/analytics/index.ts

@@ -1,4 +1,4 @@
 export { default as BarChart } from './BarChart.vue'
-export { default as LineChart } from './LineChart.vue'
 export { default as KpiCard } from './KpiCard.vue'
-export { default as PieChart } from './PieChart.vue'
+export { default as LineChart } from './LineChart.vue'
+export { default as PieChart } from './PieChart.vue'

package/src/components/calendar/CalendarPopover.vue

@@ -31,7 +31,7 @@ const popoverPosition = computed(() => {
 		left = Math.max(scrollX.value + margin, Math.min(left, innerWidth.value + scrollX.value - popoverWidth - margin))
 
 		return { top, left, width: popoverWidth, height: 150 }
-	}if (props.targetElement && props.show) {
+	} if (props.targetElement && props.show) {
 		// Position relative to target element
 		const target = props.targetElement
 		const rect = target.getBoundingClientRect()

package/src/components/calendar/Index.vue

@@ -42,7 +42,7 @@ const views: Record<CalendarView, Component> = {
 const visibleDateRange = computed(() => {
 	const start = new Date(currentDate.value)
 	let end = new Date(currentDate.value)
-	const addSunday = 'Sunday' === props.weekStart ? 0 : 1
+	const addSunday = props.weekStart === 'Sunday' ? 0 : 1
 	switch (currentView.value) {
 		case 'Week':
 			start.setDate(start.getDate() - start.getDay() + addSunday)