feat: add trend colors legend

src/components/workflows/TrendLegend.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  showTextColors: boolean
+}>(), {
+  showTextColors: true
+})
+</script>
+
+<template>
+  <div class="flex space-x-3 text-sm text-gray-600" :class="{ 'text-colors': showTextColors }">
+    <div class="flex items-center positive"><i class="w-3 h-3 mr-1"></i><span>{{ $t('positive') }}</span></div>
+    <div class="flex items-center neutral"><i class="w-3 h-3 mr-1"></i><span>{{ $t('neutral') }}</span></div>
+    <div class="flex items-center negative"><i class="w-3 h-3 mr-1"></i><span>{{ $t('negative') }}</span></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.text-colors {
+  .positive {
+    i {
+      background: var(--color--positive-text);
+    }
+  }
+
+  .neutral {
+    i {
+      background: var(--color--neutral-text);
+    }
+  }
+
+  .negative {
+    i {
+      background: var(--color--negative-text);
+    }
+  }
+}
+
+.positive {
+  i {
+    background: var(--color--positive-background);
+  }
+}
+
+.neutral {
+  i {
+    background: var(--color--neutral-background);
+  }
+}
+
+.negative {
+  i {
+    background: var(--color--negative-background);
+  }
+}
+
+</style>

src/components/workflows/WorkflowsTable.vue

@@ -7,6 +7,7 @@ import Dropdown from 'primevue/dropdown'
 import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
 import filtersStore from "@/store/filters-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue"
 
 const { t } = useI18n()
 
@@ -118,11 +119,12 @@ const groupByDocuments = () => {
     Loading...
   </template>
   <template v-else>
-    <div class="flex mb-4" v-if="evals.length > 0">
-      <div class="flex items-center ml-auto">
+    <div class="flex flex-col" v-if="evals.length > 0">
+      <div class="flex items-center mb-4 ml-auto">
         <p class="mr-2">{{ $t('group_by') }}:</p>
         <Dropdown v-model="sortBy" :options="sortOptions" optionLabel="label" placeholder="Choose something.." class="" />
       </div>
+      <TrendLegend :show-text-colors="false" class="ml-auto mb-4"/>
     </div>
     <table v-if="evals.length > 0" class="w-full border border-collapse rounded text-sm">
       <thead>

src/components/workflows/WorkflowsTimeline.vue

@@ -9,6 +9,7 @@ import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
+import TrendLegend from "@/components/workflows/TrendLegend.vue";
 
 const { t } = useI18n()
 const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gt.findIndex(({ value }) => value === id) > -1))
@@ -44,6 +45,7 @@ watch(selectedMetric,
         unstyled
       />
     </div>
+    <TrendLegend class="ml-auto mb-4"/>
     <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
         <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />

src/locales/de.json

@@ -55,5 +55,8 @@
   "date": "Datum",
   "ground_truth": "Ground Truth",
   "average": "Durchschnitt",
-  "cer_standard_deviation": "CER Standardabweichung"
+  "cer_standard_deviation": "CER Standardabweichung",
+  "positive": "positiv",
+  "neutral": "neutral",
+  "negative": "negativ"
 }

src/locales/en.json

@@ -49,5 +49,8 @@
   "date": "Date",
   "ground_truth": "Ground Truth",
   "average": "Average",
-  "cer_standard_deviation": "CER Standard Deviation"
+  "cer_standard_deviation": "CER Standard Deviation",
+  "positive": "positive",
+  "neutral": "neutral",
+  "negative": "negative"
 }