Add empty bar and rating number

client/src/components/ui/RatingScale.vue

@@ -49,46 +49,63 @@ const getRGBString = ([r, g, b]: RGB) => {
   return `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`;
 };
 
-const getRGBStyle = (c1: RGB, c2: RGB, weight: number) => {
-  return getRGBString(blendColors(c1, c2, weight));
-};
+// const getRGBStyle = (c1: RGB, c2: RGB, weight: number) => {
+//   return getRGBString(blendColors(c1, c2, weight));
+// };
 
-const getLeftPosition = (rating:number, weight: number) => {
-  const percent = (rating - 1) * 33 + weight * 25;
-  return `${Math.floor(percent)}%`;
-};
+const percent = computed(() => {
+  return (scale.value - 1) * 33.33 + weight.value * 25;
+});
+
+const leftPosition = computed(() => {
+  return `${Math.round(percent.value)}%`;
+});
+
+const rightClip = computed(() => {
+  return `${Math.round(100 - percent.value)}%`;
+});
+
+const blendedColor = computed(() => {
+  return blendColors(colors.value[0], colors.value[1], weight.value);
+});
+
+const backgroundColor = getRGBString(blendedColor.value);
 
 const style = {
-  backgroundColor: getRGBStyle(colors.value[0], colors.value[1], weight.value),
-  left: getLeftPosition(scale.value, weight.value),
+  backgroundColor,
+  left: leftPosition.value,
+};
+
+const gradientStyle = {
+  clipPath: `inset(0 ${rightClip.value} 0 0)`,
+};
+
+const ratingValueStyle = {
+  backgroundColor,
 };
 
 console.log(props);
 </script>
 
 <template>
-    <h3>{{ props.rating }} - {{ weight }} =  {{style}}</h3>
+  <h3>
+    <span class="text-xl mr-2">Durchschnitt:</span>
+    <span
+      class="w-11 h-9 inline-flex justify-center rounded items-center text-xl"
+      :style="ratingValueStyle"
+    >
+      {{ props.rating }}
+    </span>
+  </h3>
+  <h3>{{ props.rating }} - {{ weight }} = {{ style }}</h3>
   <div class="gradient-with-circle pt-3 relative">
-    <!-- <div -->
-    <!--   class="circle" -->
-    <!--   :style="{ -->
-    <!--     backgroundColor: getRGBStyle(yellow, red, 0.5), -->
-    <!--     left: getLeftPosition(0.5), -->
-    <!--   }" -->
-    <!-- ></div> -->
-    <!-- <div -->
-    <!--   class="circle" -->
-    <!--   :style="{ -->
-    <!--     backgroundColor: getRGBStyle(yellow, red, 0.25), -->
-    <!--     left: getLeftPosition(0.25), -->
-    <!--   }" -->
-    <!-- ></div> -->
-    <div class="circle" :style="style"></div>
-  <div class="h-2 gradient"></div>
+    <div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
+    <div class="h-2 bg-gray-300 absolute empty-bar -mt-2 w-full"></div>
+    <div class="circle z-20" :style="style"></div>
   </div>
 </template>
 
-<style>
+<style lang="postcss">
 .circle {
   width: 32px;
   height: 32px;

client/src/pages/StyleGuidePage.vue

@@ -426,8 +426,8 @@ function log(data: any) {
       :items="satisfactionValues"
     />
     <div>
-      <RatingScale :rating="1" />
-      <RatingScale :rating="1.3" />
+      <RatingScale :rating="1.1" />
+      <RatingScale :rating="2" />
       <RatingScale :rating="2.5" />
       <RatingScale :rating="3.9" />
       <RatingScale :rating="4" />