fix: trend colors in detail chart

OCR-D · Dec 6, 2023 · 55a6d3b · 55a6d3b
1 parent 64b451a
commit 55a6d3b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/components/workflows/timeline/BaseTimelineDetailedChart.vue b/src/components/workflows/timeline/BaseTimelineDetailedChart.vue
@@ -15,7 +15,8 @@ interface Props {
   endDate: Date,
   height?: number,
   tooltipContent: (d: TimelineChartDataPoint) => string,
-  yAxisTitle?: string
+  yAxisTitle?: string,
+  higherIsPositive?: boolean
 }
 
 const props = defineProps<Props>()
@@ -26,18 +27,17 @@ const marginRight = 10
 const marginBottom = 30
 const marginLeft = 40
 const _width = computed(() => props.width ?? 300)
-const _maxY = computed(() => props.maxY ?? 2)
 
 const container = ref<HTMLDivElement>()
 
-function isUp(data: TimelineChartDataPoint[], higherIsUp = true) {
+function isUp(data: TimelineChartDataPoint[], higherIsPositive = true) {
 
   if (data.length === 0) return 0
 
   const last = data[data.length - 1].value
   const secondLast = data.length > 1 ? data[data.length - 2].value : last
 
-  const diff = higherIsUp ? last - secondLast : secondLast - last
+  const diff = higherIsPositive ? last - secondLast : secondLast - last
 
   if (diff === 0) return 0
   else if (diff > 0) return 1
@@ -99,13 +99,13 @@ function render([data, startDate, endDate, maxY]) {
   svg.selectAll('.y-axis-group .tick text').attr('fill', colors.gray['400'])
 
 
-  const trend = isUp(data, false)
+  const trend = isUp(data, props.higherIsPositive)
 
   const pathGroup = svg
       .append('g')
       .classed('path-group', true)
-      .classed('up', trend === 1)
-      .classed('down', trend === -1)
+      .classed('trend-positive', trend === 1)
+      .classed('trend-negative', trend === -1)
 
   pathGroup.append("path")
       .datum(data)
@@ -223,7 +223,7 @@ watch([() => props.data, () => props.startDate, () => props.endDate, () => props
       fill: var(--color--neutral-text);
     }
 
-    &.up {
+    &.trend-positive {
       path {
         stroke: var(--color--positive-text);
       }
@@ -233,7 +233,7 @@ watch([() => props.data, () => props.startDate, () => props.endDate, () => props
       }
     }
 
-    &.down {
+    &.trend-negative {
       path {
         stroke: var(--color--negative-text);
       }

diff --git a/src/components/workflows/timeline/MetricAverageChart.vue b/src/components/workflows/timeline/MetricAverageChart.vue
@@ -90,6 +90,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
       :tooltip-content="tooltipContent"
       :height="400"
       :width="660"
+      :higher-is-positive="isHigherPositive(metric)"
     />
   </OverlayPanel>
 </template>