feat(web-core): circle progress bar component #8402

S3bastianCZ · 2025-03-04T12:50:40Z

Description

Create a circle progress bar component.
4 sizes (extra small, small, medium, large)
4 accents (info, success, warning, medium)

Screenshot

Checklist

Commit
- Title follows commit conventions
- Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
- If bug fix, add Introduced by
Changelog
- If visible by XOA users, add changelog entry
- Update "Packages to release" in CHANGELOG.unreleased.md
PR
- If UI changes, add screenshots
- If not finished or not tested, open as Draft

Review process

This 2-passes review process aims to:

develop skills of junior reviewers

limit the workload for senior reviewers

limit the number of unnecessary changes by the author

The author creates a PR.
Review process:
1. The author assigns the junior reviewer.
2. The junior reviewer conducts their review:
  - Resolves their comments if they are addressed.
  - Adds comments if necessary or approves the PR.
3. The junior reviewer assigns the senior reviewer.
4. The senior reviewer conducts their review:
  - If there are no unresolved comments on the PR → merge.
  - Otherwise, we continue with 3.
The author responds to comments and/or makes corrections, and we go back to 2.

Notes:

The author can request a review at any time, even if the PR is still a Draft.
In theory, there should not be more than one reviewer at a time.
The author should not make any changes:
- When a reviewer is assigned.
- Between the junior and senior reviews.

OlivierFL · 2025-03-05T13:31:33Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+<style lang="postcss" scoped>
+.progress-circle-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-circle-background {
+  stroke: v-bind(backgroundStrokeColor);
+  stroke-width: v-bind(strokeWidth);
+}
+
+.progress-circle-foreground {
+  stroke-width: v-bind(strokeWidth);
+  stroke-linecap: butt;
+  transition: stroke-dashoffset 0.3s ease;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.progress-circle-fill {
+  stroke: v-bind(strokeColor);
+  stroke-dasharray: v-bind(circumference);
+  stroke-dashoffset: v-bind(dashOffset);
+}
+
+.progress-circle-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.progress-circle-text {
+  color: v-bind(strokeColor);
+}
+
+.progress-circle-icon {
+  font-size: v-bind(iconSize);
+}
+</style>


Remember to use our guidelines for CSS

OlivierFL · 2025-03-05T13:32:13Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -0,0 +1,152 @@
+<!-- v3 -->
+<template>
+  <div class="progress-circle-container">


The CSS class should match the component's name and the guidelines

OlivierFL · 2025-03-05T13:43:09Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+}
+
+const iconSizeMap = {
+  'extra-small': '',


Maybe we can use undefined here? The same applies on line 70.

OlivierFL · 2025-03-05T13:53:08Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+  large: 16,
+}
+
+const fontClasses = {


To keep consistency?

Suggested change

const fontClasses = {

const fontClassesMap = {

OlivierFL · 2025-03-05T14:11:05Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+  accent: ProgressCircleAccent
+  size: ProgressCircleSize
+  value: number
+  maxValue: number


I wonder if maxValue could be optional, and in this case, compute the completion percentage based on a default value?
I mean, in most cases, we would want to display the completion based on 100%, so maybe this could be the default value?

OlivierFL · 2025-03-05T14:41:01Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+  return circumference.value * (1 - valuePercent.value / 100)
+})
+
+const percentValue = computed(() => `${valuePercent.value}%`)


You can use n from useI18n(), it will handle space between the value and %, which may differ based on the locale:

Suggested change

const percentValue = computed(() => `${valuePercent.value}%`)

const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))

OlivierFL · 2025-03-05T15:02:07Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+const backgroundStrokeColor = computed(() => `var(--color-${accent}-background-selected)`)
+
+const iconAccent = computed(() =>
+  isComplete.value && (accent === 'info' || accent === 'success') ? 'success' : accent


Since the condition isComplete.value && (accent === 'info' || accent === 'success') is used twice, maybe it could be refactored into a computed property:

const isCompleteWithSuccess = computed(() => isComplete.value && ['info', 'success'].includes(accent))

OlivierFL · 2025-03-05T15:04:12Z

@xen-orchestra/web-core/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

+      />
+    </svg>
+    <div v-if="size !== 'extra-small'" class="progress-circle-overlay">
+      <VtsIcon v-if="isComplete" :icon="icon" class="progress-circle-icon" :accent="iconAccent" />


Suggested change

<VtsIcon v-if="isComplete" :icon="icon" class="progress-circle-icon" :accent="iconAccent" />

<VtsIcon v-if="isComplete" :icon class="progress-circle-icon" :accent="iconAccent" />

OlivierFL · 2025-03-05T15:06:54Z

...-orchestra/lite/src/stories/web-core/ui/circle-progress-bar/ui-circle-progress-bar.story.vue

+    v-slot="{ properties }"
+    :params="[
+      prop('value').num().preset(75).required().widget(),
+      prop('max-value').num().default(100).preset(100).widget(),


The prop is required, plus there is no default value (only preset is enough):

Suggested change

prop('max-value').num().default(100).preset(100).widget(),

prop('max-value').num().required().preset(100).widget(),

OlivierFL · 2025-03-05T15:08:15Z

...-orchestra/lite/src/stories/web-core/ui/circle-progress-bar/ui-circle-progress-bar.story.vue

+const presets = {
+  'Half of 500': {
+    props: {
+      'max-value': 500,
+      value: 250,
+    },
+  },
+  '75% of 300': {
+    props: {
+      'max-value': 300,
+      value: 225,
+    },
+  },
+}


Be careful to use all the required props (accent and size are missing)

S3bastianCZ added the XO Web Core label Mar 4, 2025

S3bastianCZ self-assigned this Mar 4, 2025

S3bastianCZ force-pushed the circle-progress-bar-component branch from 2f71351 to 05503e3 Compare March 4, 2025 12:52

S3bastianCZ added 8 commits March 5, 2025 08:59

feat(web-core): circle progress bar component

20a5726

update

a761fa2

centrer text

483ea4f

update layout

56af897

add story and some reactivity fix

9ea3d34

update typo

f64c459

update sizes

a3ecf09

add version

0f0982d

S3bastianCZ force-pushed the circle-progress-bar-component branch from bb7e54b to 0f0982d Compare March 5, 2025 07:59

S3bastianCZ requested review from J0ris-K and OlivierFL and removed request for J0ris-K March 5, 2025 07:59

S3bastianCZ marked this pull request as ready for review March 5, 2025 08:17

OlivierFL requested changes Mar 5, 2025

View reviewed changes

OlivierFL requested a review from ByScripts March 5, 2025 15:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web-core): circle progress bar component #8402

feat(web-core): circle progress bar component #8402

S3bastianCZ commented Mar 4, 2025 •

edited

Loading

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

OlivierFL Mar 5, 2025

	const percentValue = computed(() => `${valuePercent.value}%`)
	const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))

	<VtsIcon v-if="isComplete" :icon="icon" class="progress-circle-icon" :accent="iconAccent" />
	<VtsIcon v-if="isComplete" :icon class="progress-circle-icon" :accent="iconAccent" />

	prop('max-value').num().default(100).preset(100).widget(),
	prop('max-value').num().required().preset(100).widget(),

feat(web-core): circle progress bar component #8402

Are you sure you want to change the base?

feat(web-core): circle progress bar component #8402

Conversation

S3bastianCZ commented Mar 4, 2025 • edited Loading

Description

Screenshot

Checklist

Review process

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

S3bastianCZ commented Mar 4, 2025 •

edited

Loading