@dative-gpi/foundation-shared-components 1.1.20 → 1.1.21-fs-chart-2

package/components/FSProgressBar.vue

@@ -4,21 +4,62 @@
     :style="style"
   >
     <div
-      class="fs-progress-bar-gradient"
+      class="fs-progress-bar-wrapper"
     >
-      <div></div>
+      <div
+        class="fs-progress-bar-track"
+      >
+        <div
+          v-if="$props.cursor && isValueInRange"
+          class="fs-progress-bar-cursor"
+        >
+          <FSText
+            v-if="$props.showValue"
+            class="fs-progress-bar-cursor-label"
+            font="text-overline"
+            :ellipsis="false"
+          >
+            {{ displayValue }}
+          </FSText>
+        </div>
+        <div
+          v-if="!$props.cursor"
+          class="fs-progress-bar-fill"
+        ></div>
+      </div>
+      <div
+        v-if="positionedLabels.length"
+        class="fs-progress-bar-labels"
+      >
+        <div
+          v-for="label in positionedLabels"
+          :key="label.value"
+          class="fs-progress-bar-label"
+          :class="{
+            'fs-progress-bar-label--start': label.percent === 0,
+            'fs-progress-bar-label--end': label.percent === 100
+          }"
+          :style="{ left: `${label.percent}%` }"
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ label.display }}
+          </FSText>
+        </div>
+      </div>
     </div>
     <FSText
-      v-if="$props.showValue"
+      v-if="$props.showValue && !$props.cursor"
       font="text-button"
     >
-      {{ fixedRate }}%
+      {{ displayValue }}
     </FSText>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors } from '@dative-gpi/foundation-shared-components/composables';
 
@@ -50,6 +91,31 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    valueFormat: {
+      type: String as PropType<"percentage" | "raw">,
+      required: false,
+      default: "percentage"
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    labels: {
+      type: Array as PropType<Array<{ value: number; text?: string }>>,
+      required: false,
+      default: () => []
+    },
+    cursor: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   setup(props) {
@@ -58,37 +124,85 @@ export default defineComponent({
     const lightColors = getColors(ColorEnum.Light);
     const successColors = getColors(ColorEnum.Success);
     const errorColors = getColors(ColorEnum.Error);
- 
-    const fixedRate = computed(() => {
-      return (props.modelValue * 100).toFixed(0);
+
+    const isValid = computed(() => props.max > props.min);
+
+    const range = computed(() => props.max - props.min);
+
+    const clampedValue = computed(() => {
+      if (!isValid.value) { 
+        return props.min; 
+      }
+      return Math.min(Math.max(props.modelValue, props.min), props.max);
+    });
+
+    const valuePercent = computed(() => {
+      if (!isValid.value) { 
+        return 0; 
+      }
+      return ((clampedValue.value - props.min) / range.value) * 100;
+    });
+
+    const isValueInRange = computed(() => {
+      return props.modelValue >= props.min && props.modelValue <= props.max;
+    });
+
+    const zeroPercent = computed(() => {
+      if (!isValid.value) { return 0; }
+      const zero = Math.min(Math.max(0, props.min), props.max);
+      return ((zero - props.min) / range.value) * 100;
     });
 
-    const relativeWidth = computed(() => {
-      return props.modelValue ? 100 / props.modelValue : 0;
+    const fillLeft = computed(() => Math.min(zeroPercent.value, valuePercent.value));
+
+    const fillWidth = computed(() => Math.abs(valuePercent.value - zeroPercent.value));
+
+    const gradientStartStop = computed(() => {
+      if (fillWidth.value === 0) { return "0%"; }
+      return `${-(fillLeft.value / fillWidth.value) * 100}%`;
     });
-    
-    const startColor = computed(() => {
-      return props.startColor ?? errorColors.base;
+
+    const gradientEndStop = computed(() => {
+      if (fillWidth.value === 0) { return "100%"; }
+      return `${((100 - fillLeft.value) / fillWidth.value) * 100}%`;
     });
 
-    const endColor = computed(() => {
-      return props.endColor ?? successColors.base;
+    const positionedLabels = computed(() => {
+      return props.labels.map(label => {
+        const percent = isValid.value
+          ? ((label.value - props.min) / range.value) * 100
+          : 0;
+
+        return {
+          value: label.value,
+          display: label.text ?? label.value,
+          percent: Math.min(Math.max(percent, 0), 100)
+        };
+      });
     });
 
-    const style = computed((): StyleValue => {
-      return {
-        '--progress-bar-background-color': lightColors.dark,
-        '--progress-bar-gradient-start-color': startColor.value,
-        '--progress-bar-gradient-end-color': endColor.value,
-        '--progress-bar-gradient-width': `min(100%, ${fixedRate.value}%)`,
-        '--progress-bar-total-relative-width': `${relativeWidth.value}%`
-      };
+    const displayValue = computed(() => {
+      if (props.valueFormat === "raw") { return props.modelValue.toFixed(2); }
+      return `${Math.round(valuePercent.value)}%`;
     });
 
+    const style = computed((): StyleValue => ({
+      "--progress-bar-background": lightColors.dark,
+      "--progress-bar-gradient-start": props.startColor ?? errorColors.base,
+      "--progress-bar-gradient-start-stop": gradientStartStop.value,
+      "--progress-bar-gradient-end": props.endColor ?? successColors.base,
+      "--progress-bar-gradient-end-stop": gradientEndStop.value,
+      "--progress-bar-fill-left": `${fillLeft.value}%`,
+      "--progress-bar-fill-width": `${fillWidth.value}%`,
+      "--progress-bar-cursor-position": `${valuePercent.value}%`
+    }));
+
     return {
-      style,
-      fixedRate
-    }
-  },
+      positionedLabels,
+      isValueInRange,
+      displayValue,
+      style
+    };
+  }
 });
-</script>
+</script>

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.20",
+  "version": "1.1.21-fs-chart-2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,11 +13,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.20",
-    "@dative-gpi/foundation-shared-services": "1.1.20"
+    "@dative-gpi/foundation-shared-domain": "1.1.21-fs-chart-2",
+    "@dative-gpi/foundation-shared-services": "1.1.21-fs-chart-2"
   },
   "peerDependencies": {
-    "@dative-gpi/bones-ui": "^1.0.0",
+    "@dative-gpi/bones-ui": "^1.1.0",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "0.12.5",
     "@lexical/history": "0.12.5",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "539eadec4b1b99e06638b021a59ae11c20cff383"
+  "gitHead": "2433c646295815be1606ba105a295cd769d59693"
 }

package/styles/components/fs_progress_bar.scss

@@ -1,14 +1,70 @@
-.fs-progress-bar-gradient {
+.fs-progress-bar-wrapper {
     flex: 1;
-    background-color: var(--progress-bar-background-color);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.fs-progress-bar-track {
+    position: relative;
+    background-color: var(--progress-bar-background);
     height: 8px;
     border-radius: 4px;
 
-    div {
-        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    .fs-progress-bar-fill {
+        position: absolute;
         height: 100%;
-        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
-        width: var(--progress-bar-gradient-width);
+        left: var(--progress-bar-fill-left);
+        width: var(--progress-bar-fill-width);
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start) var(--progress-bar-gradient-start-stop),
+            var(--progress-bar-gradient-end)   var(--progress-bar-gradient-end-stop)
+        );
         border-radius: 4px;
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .fs-progress-bar-cursor {
+        position: absolute;
+        top: 50%;
+        left: var(--progress-bar-cursor-position);
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start),
+            var(--progress-bar-gradient-end)
+        );
+        transform: translate(-50%, -50%);
+        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .fs-progress-bar-cursor-label {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 50%;
+            transform: translateX(-50%);
+            white-space: nowrap;
+            pointer-events: none;
+        }
+    }
+}
+
+.fs-progress-bar-labels {
+    position: relative;
+    height: 16px;
+
+    .fs-progress-bar-label {
+        position: absolute;
+        transform: translateX(-50%);
+
+        &.fs-progress-bar-label--start {
+            transform: translateX(0);
+        }
+
+        &.fs-progress-bar-label--end {
+            transform: translateX(-100%);
+        }
     }
 }