@bagelink/vue 1.15.202 → 1.15.207

package/src/components/charts/MapChart.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+/**
+ * MapChart — SVG choropleth of countries (ISO-3166-1 alpha-2). Pure SVG, no
+ * tiles. Same “plot only / wrap in Card” contract as BarChart / Donut.
+ *
+ *   <MapChart :data="[{ id: 'US', value: 4200 }, { id: 'IL', label: 'Israel', value: 900 }]" />
+ *   <MapChart :data="rows" color="green" :height="280" />
+ */
+import { computed, ref } from 'vue'
+import type { ThemeType } from '../../types'
+import ChartTooltip from './ChartTooltip.vue'
+import { formatValue, type ValueFormat } from './core/format'
+import { resolveColor } from './core/palette'
+import { useChartAnim } from './core/useChartAnim'
+import { tipFollowStyle, trackLocalPointer } from './core/useChartTip'
+import { WORLD_NAMES, WORLD_PATHS, WORLD_VIEWBOX } from './core/world-paths'
+import type { MapDatum } from './mapTypes'
+
+defineOptions({ name: 'BglMapChart' })
+
+export type { MapDatum }
+
+const props = withDefaults(defineProps<{
+	data: MapDatum[]
+	/** Base tone for the value ramp (low → high intensity). */
+	color?: ThemeType | string
+	height?: number
+	/** Show min→max legend strip under the map. */
+	legend?: boolean
+	currency?: string
+	prefix?: string
+	suffix?: string
+	animated?: boolean
+}>(), {
+	color: 'primary',
+	height: 280,
+	legend: true,
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
+
+const fmt = computed<ValueFormat>(() => ({
+	currency: props.currency,
+	prefix: props.prefix,
+	suffix: props.suffix,
+	compact: true,
+}))
+
+const byId = computed(() => {
+	const map = new Map<string, MapDatum>()
+	for (const d of props.data) {
+		const id = d.id?.toUpperCase?.() ?? ''
+		if (!id) continue
+		const prev = map.get(id)
+		map.set(id, prev
+			? { ...d, id, value: prev.value + d.value, label: d.label ?? prev.label }
+			: { ...d, id })
+	}
+	return map
+})
+
+const maxValue = computed(() => Math.max(0, ...[...byId.value.values()].map(d => d.value)))
+
+const baseColor = computed(() => resolveColor(props.color))
+const emptyFill = 'color-mix(in srgb, var(--bgl-gray) 12%, var(--bgl-box-bg))'
+const strokeColor = 'color-mix(in srgb, var(--bgl-gray) 28%, var(--bgl-box-bg))'
+
+/** Continuous ramp: empty → light tint → full base color by value share. */
+function fillFor(value: number | undefined): string {
+	if (value == null || value <= 0 || maxValue.value <= 0) return emptyFill
+	const t = Math.sqrt(value / maxValue.value) // sqrt so mid values stay visible
+	const pct = 28 + t * 72 * progress.value
+	return `color-mix(in srgb, ${baseColor.value} ${pct}%, var(--bgl-box-bg))`
+}
+
+interface CountryPath {
+	id: string
+	d: string
+	label: string
+	value: number | undefined
+	fill: string
+	hasData: boolean
+}
+
+const countries = computed<CountryPath[]>(() =>
+	Object.entries(WORLD_PATHS).map(([id, d]) => {
+		const row = byId.value.get(id)
+		const value = row?.value
+		return {
+			id,
+			d,
+			label: row?.label || WORLD_NAMES[id] || id,
+			value,
+			fill: fillFor(value),
+			hasData: value != null && value > 0,
+		}
+	}),
+)
+
+const hoverId = ref<string | null>(null)
+const tipX = ref(0)
+const tipY = ref(0)
+
+function onEnter(id: string) { hoverId.value = id }
+function onLeave() { hoverId.value = null }
+function onMove(e: MouseEvent) { trackLocalPointer(e, tipX, tipY) }
+
+const hover = computed(() => {
+	if (!hoverId.value) return null
+	const c = countries.value.find(x => x.id === hoverId.value)
+	return c?.hasData ? c : null
+})
+
+const hoverRows = computed(() => hover.value
+	? [{ name: hover.value.label, color: hover.value.fill, value: formatValue(hover.value.value!, fmt.value) }]
+	: [])
+
+const tooltipStyle = tipFollowStyle(tipX, tipY)
+
+const legendMin = computed(() => formatValue(0, fmt.value))
+const legendMax = computed(() => formatValue(maxValue.value, fmt.value))
+</script>
+
+<template>
+	<div ref="el" class="bgl-map w-100p flex column gap-075">
+		<div
+			class="bgl-map__plot relative w-100p"
+			:style="{ height: `${height}px` }"
+			@mousemove="onMove"
+			@mouseleave="onLeave"
+		>
+			<svg
+				class="bgl-map__svg"
+				dir="ltr"
+				:viewBox="`0 0 ${WORLD_VIEWBOX.width} ${WORLD_VIEWBOX.height}`"
+				preserveAspectRatio="xMidYMid meet"
+				width="100%"
+				height="100%"
+			>
+				<path
+					v-for="c in countries"
+					:key="c.id"
+					:d="c.d"
+					:fill="c.fill"
+					:stroke="strokeColor"
+					stroke-width="0.6"
+					vector-effect="non-scaling-stroke"
+					class="bgl-map__country"
+					:class="{
+						'opacity-5': hoverId != null && hoverId !== c.id,
+						'bgl-map__country--hot': hoverId === c.id && c.hasData,
+					}"
+					@mouseenter="onEnter(c.id)"
+				/>
+			</svg>
+
+			<ChartTooltip
+				v-if="hover"
+				prefer="above"
+				:style="tooltipStyle"
+				:label="hover.label"
+				:rows="hoverRows"
+			/>
+		</div>
+
+		<div
+			v-if="legend && maxValue > 0"
+			class="bgl-map__legend flex align-items-center gap-05 txt12 color-gray"
+		>
+			<span class="tabular-nums">{{ legendMin }}</span>
+			<div
+				class="bgl-map__ramp flex-1"
+				:style="{
+					background: `linear-gradient(to right, color-mix(in srgb, ${baseColor} 28%, var(--bgl-box-bg)), ${baseColor})`,
+				}"
+			/>
+			<span class="tabular-nums">{{ legendMax }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-map__plot { min-height: 0; }
+.bgl-map__svg { display: block; overflow: visible; }
+.bgl-map__country {
+	cursor: default;
+	transition: opacity 0.15s ease, fill 0.15s ease;
+	outline: none;
+}
+.bgl-map__country--hot { stroke: var(--bgl-gray); stroke-width: 1.2; }
+.bgl-map__ramp {
+	height: 0.5rem;
+	border-radius: 999px;
+	min-width: 4rem;
+}
+</style>

package/src/components/charts/RadialBars.vue

@@ -11,6 +11,8 @@ import { alpha, resolveColor } from './core/palette'
 import { useChartAnim } from './core/useChartAnim'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglRadialBars' })
+
 interface Ring { label: string; value: number; color?: ThemeType | string; max?: number }
 
 const props = withDefaults(defineProps<{
@@ -37,7 +39,7 @@ const props = withDefaults(defineProps<{
 })
 
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 900 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const cx = computed(() => props.size / 2)
 

package/src/components/charts/RankBars.vue

@@ -11,6 +11,8 @@ import { ramp, resolveColor } from './core/palette'
 import { formatValue, type ValueFormat } from './core/format'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglRankBars' })
+
 interface Row { label: string; value: number; color?: ThemeType | string }
 
 const props = withDefaults(defineProps<{

package/src/components/charts/Sparkline.vue

@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<{
 })
 
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 600 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const stroke = computed(() => resolveColor(props.color))
 const points = computed(() => normalizeSeries(props.data, undefined)[0]?.points ?? [])

package/src/components/charts/StatCard.vue

@@ -15,6 +15,8 @@ import { formatValue } from './core/format'
 import { resolveColor } from './core/palette'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglStatCard' })
+
 const props = withDefaults(defineProps<{
 	label: string
 	value: number | string

package/src/components/charts/core/arc.ts

@@ -0,0 +1,53 @@
+/**
+ * SVG arc helpers for pie / donut slices.
+ * Full 360° arcs must be split — a single SVG arc with coincident endpoints collapses.
+ */
+const TWO_PI = Math.PI * 2
+const EPS = 1e-6
+
+/**
+ * Build an SVG path for a pie wedge (`ri === 0`) or donut slice (`ri > 0`)
+ * spanning `sweep` radians clockwise from `a0` (0 = east, −π/2 = north).
+ */
+export function slicePath(
+	cx: number,
+	cy: number,
+	r: number,
+	ri: number,
+	a0: number,
+	sweep: number,
+): string {
+	if (sweep <= EPS || r <= 0) return ''
+
+	// Full circle / ring — two semicircle arcs (SVG can't draw 360° in one A).
+	if (sweep >= TWO_PI - EPS) {
+		if (ri <= 0) {
+			return `M ${cx + r} ${cy} A ${r} ${r} 0 1 1 ${cx - r} ${cy} A ${r} ${r} 0 1 1 ${cx + r} ${cy} Z`
+		}
+		return [
+			`M ${cx + r} ${cy}`,
+			`A ${r} ${r} 0 1 1 ${cx - r} ${cy}`,
+			`A ${r} ${r} 0 1 1 ${cx + r} ${cy}`,
+			`L ${cx + ri} ${cy}`,
+			`A ${ri} ${ri} 0 1 0 ${cx - ri} ${cy}`,
+			`A ${ri} ${ri} 0 1 0 ${cx + ri} ${cy}`,
+			'Z',
+		].join(' ')
+	}
+
+	const a1 = a0 + sweep
+	const large = sweep > Math.PI ? 1 : 0
+	const x0 = cx + r * Math.cos(a0)
+	const y0 = cy + r * Math.sin(a0)
+	const x1 = cx + r * Math.cos(a1)
+	const y1 = cy + r * Math.sin(a1)
+
+	if (ri > 0) {
+		const xi1 = cx + ri * Math.cos(a1)
+		const yi1 = cy + ri * Math.sin(a1)
+		const xi0 = cx + ri * Math.cos(a0)
+		const yi0 = cy + ri * Math.sin(a0)
+		return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi0} ${yi0} Z`
+	}
+	return `M ${cx} ${cy} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`
+}

package/src/components/charts/core/useChartTip.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared tooltip anchoring helpers for charts.
+ *
+ * Two placement modes (match ChartTooltip `prefer`):
+ * - **follow** (`prefer="above"`): cursor-anchored — Donut, Map, Funnel
+ * - **pinned** (`prefer="top"`): top of chart, x follows mouse — Line, Bar
+ */
+import { computed, type Ref } from 'vue'
+
+/** Update tip coords from a mouse event relative to `currentTarget`. */
+export function trackLocalPointer(
+	e: MouseEvent,
+	tipX: Ref<number>,
+	tipY?: Ref<number>,
+) {
+	const el = e.currentTarget as HTMLElement | null
+	if (!el) return
+	const rect = el.getBoundingClientRect()
+	tipX.value = e.clientX - rect.left
+	if (tipY) tipY.value = e.clientY - rect.top
+}
+
+/** Cursor-follow style: `{ left, top }` for `prefer="above"|"below"`. */
+export function tipFollowStyle(tipX: Ref<number>, tipY: Ref<number>) {
+	return computed(() => ({ left: `${tipX.value}px`, top: `${tipY.value}px` }))
+}
+
+/** Pinned-to-top style: `{ left }` clamped inside the chart for `prefer="top"`. */
+export function tipPinnedStyle(tipX: Ref<number>, width: Ref<number>, half = 70) {
+	return computed(() => {
+		const w = width.value
+		const x = Math.min(Math.max(tipX.value, half), Math.max(half, w - half))
+		return { left: `${x}px` }
+	})
+}