add progress bar to afcl

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -493,7 +493,49 @@ If there is less then `pageSize` rows, pagination will not be shown.
 </div>
 
 
+## ProgressBar
 
+<div class="split-screen" >
+  <div>
+  ```html
+   <ProgressBar
+    :currentValue="2600"
+    :minValue="0"
+    :maxValue="5000"
+    />
+  ```
+  </div>
+  <div>
+  ![ProgressBar](image-56.png)
+  </div>
+</div>
+
+### Custom labels
+
+Custom labels in the ProgressBar component allow you to customize the text displayed on the left and right sides of the progress bar. You can also customize the format of the value and the progress text.
+
+<div class="split-screen" >
+  <div>
+  ```html
+  <ProgressBar
+    :currentValue="1070"
+    :minValue="0"
+    :maxValue="5000"
+    :leftLabel="'Level 2'"
+    :rightLabel="'Level 3'"
+    :formatter="(value: number) => `${value} points`"
+    :progressFormatter="(value: number, percentage: number) => `${value} done`"
+  />
+  ```
+  </div>
+  <div>
+  ![ProgressBar](image-55.png)
+  </div>
+</div>
+
+
+
+### Custom slots
 
 
 ## Bar Chart

adminforth/documentation/docs/tutorial/03-Customization/image-55.png

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative mt-4 lg:mt-10 w-full max-w-[700px] bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+    <span class="absolute -top-6 left-0 text-sm text-gray-500">{{ leftLabel }}</span>
+    <span class="absolute -top-6 right-0 text-sm text-gray-500">{{ rightLabel }}</span>
+    <div 
+      class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full" 
+      :style="{ width: `${percentage}%` }"
+    ></div>
+    <template v-if="showValues">
+      <span class="absolute top-4 left-0 text-sm text-gray-500">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="absolute top-4 right-1/2 translate-x-1/2 text-sm text-gray-500">{{ progressText }}</span>
+      <span class="absolute top-4 right-0 text-sm text-gray-500">{{ formatValue(maxValue) }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  currentValue: number
+  minValue?: number
+  maxValue?: number
+  leftLabel?: string
+  rightLabel?: string
+  formatter?: (value: number) => string
+  progressFormatter?: (value: number, percentage: number) => string
+  showLabels?: boolean
+  showValues: boolean
+  showProgress: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  minValue: 0,
+  maxValue: 100,
+  formatter: (value: number) => `${value}`,
+  progressFormatter: (value: number, percentage: number) => `${value}`,
+  showValues: true,
+  showProgress: true
+})
+
+const percentage = computed((): number => {
+  const min = props.minValue
+  const max = props.maxValue
+  return Math.round(((props.currentValue - min) / (max - min)) * 100)
+})
+
+const progressText = computed((): string => {
+  const formatter = props.progressFormatter
+  return formatter(props.currentValue, percentage.value)
+})
+
+const formatValue = (value: number): string => {
+  const formatter = props.formatter
+  return formatter(value)
+}
+</script>

adminforth/documentation/docs/tutorial/03-Customization/image-56.png

@@ -13,6 +13,6 @@ export { default as AreaChart } from './AreaChart.vue';
 export { default as BarChart } from './BarChart.vue';
 export { default as PieChart } from './PieChart.vue';
 export { default as Table } from './Table.vue';
-
+export { default as ProgressBar } from './ProgressBar.vue';