@bagelink/vue 1.4.109 → 1.4.115

package/src/components/analytics/KpiCard.vue

@@ -0,0 +1,84 @@
+<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 align-items-start">
+				<Icon :name="icon" size="1" :color="color" class="line-height-08" 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

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+
+import { computed, onMounted, ref } from 'vue'
+import { Icon } from '@bagelink/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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: 'Line Chart',
+	icon: 'trending_up',
+	color: 'var(--bgl-primary)',
+	height: 200,
+	showPoints: true,
+	currency: false
+})
+
+const svgRef = ref<SVGElement>()
+const width = ref(600)
+const height = ref(props.height)
+
+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 ''
+
+	const points = props.data.map((d, i) =>
+		`${i === 0 ? 'M' : 'L'} ${paddingLeft.value + xScale.value(i)} ${padding.top + yScale.value(d.value)}`
+	).join(' ')
+
+	return points
+})
+
+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' })
+}
+
+onMounted(() => {
+	if (svgRef.value) {
+		width.value = svgRef.value.clientWidth || 600
+	}
+})
+</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" />
+				<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>
+</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>

package/src/components/analytics/PieChart.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { Icon } from '@bagelink/vue'
+import { computed } from 'vue'
+
+interface PieData {
+	label: string
+	value: number
+	color?: string
+}
+
+interface Props {
+	data: PieData[]
+	title?: string
+	icon?: string
+	color?: string
+	size?: number
+	showLegend?: boolean
+	donut?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: 'Pie Chart',
+	icon: 'bx-pie-chart-alt',
+	color: '#3B82F6',
+	size: 200,
+	showLegend: true,
+	donut: false
+})
+
+// Generate colors with different opacity based on the main color
+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) => {
+		// Convert hex to rgba with opacity
+		const hex = baseColor.replace('#', '')
+		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})`
+	})
+})
+
+// // RTL detection
+// const isRtl = computed(() => {
+// 	if (typeof document !== 'undefined') {
+// 		return document.documentElement.dir === 'rtl' || document.body.dir === 'rtl'
+// 	}
+// 	return false
+// })
+
+const totalValue = computed(() => props.data.reduce((sum, item) => sum + item.value, 0)
+)
+
+const pieSegments = computed(() => {
+	let cumulativeAngle = 0
+	return props.data.map((item, index) => {
+		const percentage = item.value / totalValue.value
+		const angle = percentage * 360
+		const startAngle = cumulativeAngle
+		const endAngle = cumulativeAngle + angle
+		cumulativeAngle += angle
+
+		const startAngleRad = (startAngle * Math.PI) / 180
+		const endAngleRad = (endAngle * Math.PI) / 180
+
+		const radius = props.size / 2 - 10
+		const innerRadius = props.donut ? radius * 0.6 : 0
+
+		const largeArcFlag = angle > 180 ? 1 : 0
+
+		const pathData = props.donut
+			? createDonutPath(startAngleRad, endAngleRad, radius, innerRadius, largeArcFlag)
+			: createPiePath(startAngleRad, endAngleRad, radius, largeArcFlag)
+
+		return {
+			...item,
+			percentage,
+			angle,
+			startAngle,
+			endAngle,
+			pathData,
+			color: item.color || colors.value[index % colors.value.length]
+		}
+	})
+})
+
+function createPiePath(startAngle: number, endAngle: number, radius: number, largeArcFlag: number): string {
+	const x1 = Math.cos(startAngle) * radius
+	const y1 = Math.sin(startAngle) * radius
+	const x2 = Math.cos(endAngle) * radius
+	const y2 = Math.sin(endAngle) * radius
+
+	return `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`
+}
+
+function createDonutPath(startAngle: number, endAngle: number, outerRadius: number, innerRadius: number, largeArcFlag: number): string {
+	const x1Outer = Math.cos(startAngle) * outerRadius
+	const y1Outer = Math.sin(startAngle) * outerRadius
+	const x2Outer = Math.cos(endAngle) * outerRadius
+	const y2Outer = Math.sin(endAngle) * outerRadius
+
+	const x1Inner = Math.cos(startAngle) * innerRadius
+	const y1Inner = Math.sin(startAngle) * innerRadius
+	const x2Inner = Math.cos(endAngle) * innerRadius
+	const y2Inner = Math.sin(endAngle) * innerRadius
+
+	return `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2Outer} ${y2Outer} L ${x2Inner} ${y2Inner} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x1Inner} ${y1Inner} Z`
+}
+
+function formatValue(value: number): string {
+	return value.toLocaleString()
+}
+
+function formatPercentage(percentage: number): string {
+	return `${(percentage * 100).toFixed(1)}%`
+}
+</script>
+
+<template>
+	<div class="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" />
+				<p class="white-space light m_txt14">
+					{{ title }}
+				</p>
+			</div>
+		</div>
+		<div class="chart-container flex space-between gap-1 flex-wrap" :class="{ 'with-legend': showLegend }">
+			<svg :width="size" :height="size" class="chart-svg mx-auto flex-shrink-0">
+				<g :transform="`translate(${size / 2}, ${size / 2})`">
+					<path
+						v-for="(segment, index) in pieSegments" :key="index" :d="segment.pathData"
+						:fill="segment.color" class="pie-segment" stroke="white" stroke-width="2"
+					>
+						<title>{{ segment.label }}: {{ formatValue(segment.value) }} ({{
+							formatPercentage(segment.percentage) }})</title>
+					</path>
+				</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>
+</template>
+
+<style scoped>
+[dir="rtl"] .chart-container.with-legend {
+	flex-direction: row-reverse;
+}
+
+.pie-segment {
+	cursor: pointer;
+	transition: opacity 0.2s ease;
+}
+
+.pie-segment:hover {
+	opacity: 0.8;
+}
+
+/* RTL support for legend */
+[dir="rtl"] .legend-item {
+	flex-direction: row-reverse;
+}
+
+.legend-color {
+	width: 12px;
+	height: 12px;
+}
+</style>

package/src/components/analytics/index.ts

@@ -0,0 +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'

package/src/components/calendar/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { CalendarEvent, CalendarProps, CalendarView, CalendarViewState } from './CalendarTypes'
-import { timeDelta, Btn, ListItem, Dropdown, fmtDate } from '@bagelink/vue'
+import { timeDelta, Btn, ListItem, Dropdown, formatDate } from '@bagelink/vue'
 import { ref, computed, onMounted } from 'vue'
 import CalendarPopover from './CalendarPopover.vue'
 import AgendaView from './views/AgendaView.vue'
@@ -124,44 +124,28 @@ onMounted(() => { emit('ready', state.value) })
 	<div class="calendar">
 		<div class="flex m_block m_pb-1">
 			<h3 class="txt-light my-0">
-				<b>{{ fmtDate(currentDate, { fmt: 'MMMM' }) }}</b>
-				{{ fmtDate(currentDate, { fmt: 'YYYY' }) }}
+				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
+				{{ formatDate(currentDate, 'YYYY') }}
 			</h3>
 			<div class="ms-auto flex gap-025">
 				<Dropdown thin :value="currentView" iconEnd="keyboard_arrow_down" color="gray">
-					<ListItem
-						v-for="(_, key) in views"
-						:key="key"
-						:title="key"
-						@click="handleViewChange(key)"
-					/>
+					<ListItem v-for="(_, key) in views" :key="key" thin :title="key" @click="handleViewChange(key)" />
 				</Dropdown>
 				<Btn icon="calendar" thin color="gray" value="Today" @click="handleDateChange(new Date())" />
 				<Btn
-					icon="chevron_left"
-					color="gray"
-					thin
+					icon="chevron_left" color="gray" thin
 					@click="handleDateChange(timeDelta(currentDate, { [currentView]: -1 }))"
 				/>
 				<Btn
-					icon="chevron_right"
-					color="gray"
-					thin
+					icon="chevron_right" color="gray" thin
 					@click="handleDateChange(timeDelta(currentDate, { [currentView]: 1 }))"
 				/>
 			</div>
 		</div>
 		<component
-			:is="views[currentView]"
-			:events="events"
-			:start-date="currentDate"
-			:week-start="weekStart"
-			@event-click="handleEventClick"
-			@event-create="handleEventCreate"
-			@event-update="handleEventUpdate"
-			@event-delete="handleEventDelete"
-			@date-change="handleDateChange"
-			@open-popover="openPopover"
+			:is="views[currentView]" :events="events" :start-date="currentDate" :week-start="weekStart"
+			@event-click="handleEventClick" @event-create="handleEventCreate" @event-update="handleEventUpdate"
+			@event-delete="handleEventDelete" @date-change="handleDateChange" @open-popover="openPopover"
 		>
 			<template #eventContent="{ event }">
 				<slot name="eventContent" :event="event" />
@@ -170,12 +154,8 @@ onMounted(() => { emit('ready', state.value) })
 
 		<!-- Global Popover -->
 		<CalendarPopover
-			:event="activeEvent"
-			:position="popoverPosition"
-			:show="showPopover"
-			:has-event-content-slot="!!$slots.eventContent"
-			@close="closePopover"
-			@event-click="handleEventClick"
+			:event="activeEvent" :position="popoverPosition" :show="showPopover"
+			:has-event-content-slot="!!$slots.eventContent" @close="closePopover" @event-click="handleEventClick"
 		>
 			<template #eventContent="{ event }">
 				<slot name="eventContent" :event="event" />
@@ -186,9 +166,9 @@ onMounted(() => { emit('ready', state.value) })
 
 <style scoped>
 .calendar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
 }
 </style>