From afbc63f27928f6564bdf803bcb35864b70246fac Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Mon, 6 Nov 2023 09:09:50 +0100
Subject: [PATCH 1/2] Add jsdoc and import type

---
 src/lib/charts/styles.ts            | 42 +++++++++++++++++++++++------
 src/lib/charts/types/ChartSeries.ts |  8 +++---
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/lib/charts/styles.ts b/src/lib/charts/styles.ts
index c8c9b062..0cdb7363 100644
--- a/src/lib/charts/styles.ts
+++ b/src/lib/charts/styles.ts
@@ -1,5 +1,5 @@
-import * as CSS from 'csstype'
-import { SymbolOptions } from '@deltares/fews-web-oc-charts'
+import type { SvgPropertiesHyphen } from 'csstype'
+import type { SymbolOptions } from '@deltares/fews-web-oc-charts'
 
 const SymbolType = {
   Circle: 0,
@@ -13,11 +13,16 @@ const SymbolType = {
 
 type SymbolType = (typeof SymbolType)[keyof typeof SymbolType]
 
+/**
+ * Converts FEWS line style and color to CSS style properties for SVG elements.
+ * @param item - An object containing lineStyle and color properties.
+ * @returns An object containing CSS style properties for SVG elements.
+ */
 export function cssStyleFromFewsLine(item: {
   lineStyle?: string
   color?: string
-}): CSS.SvgPropertiesHyphen {
-  const style: CSS.SvgPropertiesHyphen = {}
+}): SvgPropertiesHyphen {
+  const style: SvgPropertiesHyphen = {}
 
   style['fill'] = 'none'
 
@@ -42,22 +47,43 @@ export function cssStyleFromFewsLine(item: {
       style['stroke-linecap'] = 'round'
       break
   }
-  style.stroke = item.color === '#000000' ? 'currentColor' : item.color
+  style.stroke = colorFromFewsColor(item.color)
   return style
 }
 
+/**
+ * Returns the input color if it is not equal to '#000000', otherwise returns 'currentColor'.
+ * @param color - The input color to be checked.
+ * @returns css color.
+ */
+export function colorFromFewsColor<T = string | undefined>(color: T): T {
+  const currentColor = 'currentColor' as T
+  return color === '#000000' ? currentColor : color
+}
+
+/**
+ * Returns a CSS style object for a FEWS marker.
+ * @param item An object containing the marker style and color.
+ * @returns A CSS style object with stroke and fill properties set to the specified color.
+ */
 export function cssStyleFromFewsMarker(item: {
   markerStyle?: string
   color?: string
-}): CSS.SvgPropertiesHyphen {
-  const color = item.color === '#000000' ? 'currentColor' : item.color
-  const style: CSS.SvgPropertiesHyphen = {
+}): SvgPropertiesHyphen {
+  const color = colorFromFewsColor(item.color)
+  const style: SvgPropertiesHyphen = {
     stroke: color,
     fill: color,
   }
   return style
 }
 
+/**
+ * Returns a SymbolOptions object for a chart marker based on the given style and point size.
+ * @param style - The style of the chart marker.
+ * @param pointSize - The size of the chart marker.
+ * @returns A SymbolOptions object for the chart marker.
+ */
 export function chartMarkerFromFews(
   style: string,
   pointSize: number = 3,
diff --git a/src/lib/charts/types/ChartSeries.ts b/src/lib/charts/types/ChartSeries.ts
index 412b0518..66ec3fdb 100644
--- a/src/lib/charts/types/ChartSeries.ts
+++ b/src/lib/charts/types/ChartSeries.ts
@@ -1,6 +1,6 @@
-import * as CSS from 'csstype'
-import { SymbolOptions } from '@deltares/fews-web-oc-charts'
-import { ChartSeriesOptions } from './ChartSeriesOptions'
+import type { SvgPropertiesHyphen } from 'csstype'
+import type { SymbolOptions } from '@deltares/fews-web-oc-charts'
+import type { ChartSeriesOptions } from './ChartSeriesOptions'
 
 export interface ChartSeries {
   id: string
@@ -14,5 +14,5 @@ export interface ChartSeries {
   type: string
   options: ChartSeriesOptions
   unit: string
-  style: CSS.SvgPropertiesHyphen
+  style: SvgPropertiesHyphen
 }

From 079a50efc73a4b4443e5a53e3413acc2aa5647a4 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Mon, 6 Nov 2023 11:19:39 +0100
Subject: [PATCH 2/2] Use colorFromFewsColor

---
 src/lib/charts/timeSeriesDisplayToChartConfig.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/charts/timeSeriesDisplayToChartConfig.ts b/src/lib/charts/timeSeriesDisplayToChartConfig.ts
index ba0b666c..e4646b33 100644
--- a/src/lib/charts/timeSeriesDisplayToChartConfig.ts
+++ b/src/lib/charts/timeSeriesDisplayToChartConfig.ts
@@ -8,7 +8,8 @@ import {
   cssStyleFromFewsLine,
   cssStyleFromFewsMarker,
   chartMarkerFromFews,
-} from './styles'
+  colorFromFewsColor,
+} from './styles.js'
 import {
   AxisOptions,
   AxisPosition,
@@ -51,7 +52,9 @@ export function timeSeriesDisplayToChartConfig(
             config.yAxis?.findIndex((yAxis) => {
               return yAxis.position === item.yAxis?.axisPosition
             }) ?? 0,
-          color: threshold.color ?? item.color,
+          color:
+            colorFromFewsColor(threshold.color) ??
+            colorFromFewsColor(item.color),
         })
       }
     }