feat(xo-web): add donut chart with legends component

[P4l0m4]

[ByScripts]

DonutSegmentColor would probably be a more suitable name.

Suggested change

	export type DonutColor = 'success' | 'warning' | 'error' | 'unknown'
	export type DonutSegment = {
	value: number
	color: DonutColor
	}
	export type DonutSegmentColor = 'success' | 'warning' | 'error' | 'unknown'
	export type DonutSegment = {
	value: number
	color: DonutSegmentColor
	}

[ByScripts]

You can name the file legend.type.ts

[ByScripts]

DonutSegmentColor being more restrictive than LegendColor, it would therefore make more sense to use it.

Suggested change

	color: LegendColor
	color: DonutSegmentColor

[ByScripts]

1. props always exists, the ? is useless.
2. No need to check for segments.length. If props.segments is empty, then .filter.map will return an empty array anyway.
3. It makes no sense to accept dark-blue as segment color if these segments are then completely excluded from the result.

Suggested change

	const donutSegments = computed(() => {
	if (props?.segments.length === 0) {
	return []
	}
	return props.segments
	.filter(segment => segment.color !== 'dark-blue')
	.map(segment => {
	let color
	if (segment.color === 'disabled' || segment.color === 'default') {
	color = 'unknown'
	} else {
	color = segment.color
	}
	return {
	value: segment.value,
	color,
	}
	}) as DonutSegment[]
	})
	const donutSegments = computed(() =>
	props.segments.map(segment => ({
	value: segment.value,
	color: segment.color === 'unknown' ? 'disabled' : segment.color,
	} as DonutSegment))
	)

[ByScripts]

I think nothing prevents this component from being moved to Web Core.

[ByScripts]

Superseded with #7829