@dative-gpi/foundation-shared-components 1.0.65 → 1.0.67-map-edit

package/tools/alertsTools.ts

@@ -1,31 +1,59 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models"
+import { ColorEnum } from "../models";
+import { getTimeBestString } from "../utils";
 
 const { $tr } = useTranslationsProvider();
 
 export const AlertTools = {
   statusIcon(value: AlertStatus): string {
     switch (value) {
-      case AlertStatus.Pending: return "mdi-timer-outline";
-      case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-      case AlertStatus.Unresolved: return "mdi-alert-circle-outline";
-      case AlertStatus.Resolved: return "mdi-check-circle-outline";
-      case AlertStatus.Expired: return "mdi-clock-outline";
-      case AlertStatus.Triggered: return "mdi-alert-circle-outline";
+      case AlertStatus.Pending: return "mdi-timer-sand";
+      case AlertStatus.Untriggered: return "mdi-close-octagon";
+      case AlertStatus.Unresolved: return "mdi-cancel";
+      case AlertStatus.Resolved: return "mdi-check-circle";
+      case AlertStatus.Expired: return "mdi-timeline-clock-outline";
+      case AlertStatus.Triggered: return "mdi-timer-sand";
       case AlertStatus.Abandoned: return "mdi-cancel"
       default: return "";
     }
   },
   statusLabel(value: AlertStatus): string {
     switch (value) {
-      case AlertStatus.Pending: return $tr("ui.alert.pending", "Pending");
-      case AlertStatus.Untriggered: return $tr("ui.alert.untriggered", "Untriggered");
-      case AlertStatus.Unresolved: return $tr("ui.alert.unresolved", "Unresolved");
-      case AlertStatus.Resolved: return $tr("ui.alert.resolved", "Resolved");
-      case AlertStatus.Expired: return $tr("ui.alert.expired", "Expired");
-      case AlertStatus.Triggered: return $tr("ui.alert.triggered", "Triggered");
-      case AlertStatus.Abandoned: return $tr("ui.alert.abandoned", "Abandoned");
+      case AlertStatus.Pending:
+        return $tr('ui.alert-status.pending', 'Pending');
+      case AlertStatus.Untriggered:
+        return $tr('ui.alert-status.untriggered', 'Untriggered');
+      case AlertStatus.Unresolved:
+        return $tr('ui.alert-status.unresolved', 'Unresolved');
+      case AlertStatus.Resolved:
+        return $tr('ui.alert-status.resolved', 'Resolved');
+      case AlertStatus.Expired:
+        return $tr('ui.alert-status.expired', 'Expired');
+      case AlertStatus.Triggered:
+        return $tr('ui.alert-status.triggered', 'Triggered');
+      case AlertStatus.Abandoned:
+        return $tr('ui.alert-status.abandoned', 'Abandoned');
+      default: return "";
+    }
+  },
+  statusAlternativeColor(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending:
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered: return "#da2d2d";
+      default: return "#1e56e5";
+    }
+  },
+  statusAlternativeIcon(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return "timer";
+      case AlertStatus.Untriggered: return "timer_off";
+      case AlertStatus.Unresolved: return "error_outline";
+      case AlertStatus.Resolved: return "check_circle_outline";
+      case AlertStatus.Expired: return "schedule";
+      case AlertStatus.Triggered: return "error_outline";
+      case AlertStatus.Abandoned: return "block"
       default: return "";
     }
   },
@@ -46,9 +74,57 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
-      case Criticity.Warning: return $tr("ui.alert.warning", "Warning");
-      case Criticity.Error: return $tr("ui.alert.error", "Error");
-      default: return $tr("ui.alert.information", "Information");
+      case Criticity.Information: return $tr('ui.common.information', 'Information');
+      case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
+      case Criticity.Error: return $tr('ui.common.error', 'Error');
+      default: return $tr("ui.common.none", "None");
+    }
+  },
+  statusColor(status: AlertStatus): ColorEnum {
+    switch (status) {
+      case AlertStatus.Pending:
+        return ColorEnum.Warning;
+      case AlertStatus.Expired:
+      case AlertStatus.Abandoned:
+        return ColorEnum.Dark;
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered:
+        return ColorEnum.Error;
+      case AlertStatus.Resolved:
+      case AlertStatus.Untriggered:
+        return ColorEnum.Success;
+      default:
+        return ColorEnum.Warning;
+    }
+  },
+
+  formatValue(value: string) {
+    const n = parseFloat(value);
+
+    if (isNaN(n)) {
+      return value;
+    }
+
+    if (Number.isInteger(n)) {
+      return n;
+    }
+    else {
+      return n.toFixed(2);
     }
   }
-}
+
+}
+
+export const prettyDuration = (n: number | undefined) => {
+  if (n == null) { return "00m 00s"; }
+  const day = Math.floor(n / 24 / 60 / 60);
+  const hours = Math.floor((n - day * 24 * 60 * 60) / 3600);
+  const minutes = Math.floor((n - day * 24 * 60 * 60 - hours * 60 * 60) / 60);
+  const seconds = Math.floor(n - day * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60);
+
+  return day > 0 ?
+    `${getTimeBestString(day * 24 * 60 * 60)} ${hours > 0 ? getTimeBestString(hours * 60 * 60) : ''} ${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`
+    : hours > 0
+      ? `${getTimeBestString(hours * 60 * 60)} ${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`
+      : `${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`;
+};

package/tools/chartsTools.ts

@@ -1,31 +1,60 @@
-import { AxisType, ColorSets, SerieType, ChartType, TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
+import { AxisType, ColorSets, SerieType, ChartType, TimeUnit, ChartOrigin, AggregationType, DisplayAs, FilterType, HeatmapRule, OperationOn, PlanningType, PlotPer, ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
 
-import { serieTypeLabel, getEnumEntries } from "@dative-gpi/foundation-core-components/utils";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ColorEnum, type ColorBase } from "../models";
 
 const { $tr } = useTranslationsProvider();
 
+export const chartOriginLabel = (type: ChartOrigin): string => {
+  switch (type) {
+    case ChartOrigin.None: return $tr("ui.common.none", "None");
+    case ChartOrigin.Organisation: return $tr("ui.common.custom", "Custom");
+    case ChartOrigin.OrganisationType: return $tr("ui.common.shared", "Shared");
+  }
+};
+
+export const applicationScopeLabel = (type: ApplicationScope): string => {
+  switch (type) {
+    case ApplicationScope.None:
+      return $tr("ui.common.none", "None");
+    case ApplicationScope.Organisation:
+      return $tr("ui.common.custom", "Custom");
+    case ApplicationScope.OrganisationType:
+      return $tr("ui.common.shared", "Shared");
+  }
+};
+
+
+export const chartOriginColor = (type: ChartOrigin): ColorBase => {
+  switch (type) {
+    case ChartOrigin.None: return ColorEnum.Error;
+    case ChartOrigin.Organisation: return ColorEnum.Primary;
+    case ChartOrigin.OrganisationType: return ColorEnum.Warning;
+  }
+};
+
 export const chartTypeLabel = (value: ChartType): string => {
   switch (value) {
-    case ChartType.Gauge: return $tr("ui.common.gauge", "Gauge");
-    case ChartType.Heatmap: return $tr("ui.common.heatmap", "Heatmap");
-    case ChartType.Pie: return $tr("ui.common.pie", "Pie");
-    case ChartType.ScoreCard: return $tr("ui.common.scorecard", "Scorecard");
-    case ChartType.Slider: return $tr("ui.common.slider", "Slider");
-    case ChartType.Table: return $tr("ui.common.table", "Table");
-    case ChartType.XY: return $tr("ui.common.xy", "XY");
+    case ChartType.Gauge: return $tr("ui.chart-type.gauge", "Gauge");
+    case ChartType.Heatmap: return $tr("ui.chart-type.heatmap", "Heatmap");
+    case ChartType.Pie: return $tr("ui.chart-type.pie", "Pie");
+    case ChartType.ScoreCard: return $tr("ui.chart-type.score-card", "Score card");
+    case ChartType.Slider: return $tr("ui.chart-type.slider", "Slider");
+    case ChartType.Table: return $tr("ui.chart-type.table", "Table");
+    case ChartType.XY: return $tr("ui.chart-type.xy", "XY");
     default: return $tr("ui.common.none", "None");
   }
 }
 
 export const colorSetLabel = (value: ColorSets | number): string => {
   switch (value) {
-    case ColorSets.Default: return $tr("ui.common.am-charts", "Am Charts");
-    case ColorSets.Grafana: return $tr("ui.common.grafana", "Grafana");
-    case ColorSets.Armytage: return $tr("ui.common.armytage", "Armytage");
-    case ColorSets.Hash: return $tr("ui.common.hash", "Hash");
-    case ColorSets.Kelly: return $tr("ui.common.material", "Kelly");
-    case ColorSets.ZeileisHornikMurrell: return $tr("ui.common.material", "ZeileisHornikMurrell");
+    case ColorSets.Default: return $tr("ui.color-sets.am-charts", "Am Charts");
+    case ColorSets.Grafana: return $tr("ui.color-sets.grafana", "Grafana");
+    case ColorSets.Armytage: return $tr("ui.color-sets.armytage", "High contrast (26 colors)");
+    case ColorSets.Hash: return $tr("ui.color-sets.hash", "Hash");
+    case ColorSets.Kelly: return $tr("ui.color-sets.kelly", "High contrast (22 colors)");
+    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.zeileis", "Colorblind accessible");
     default: return $tr("ui.common.none", "None");
   }
 }
@@ -66,6 +95,115 @@ export const serieTypeIcon = (serieType: SerieType): string => {
   }
 }
 
+export const aggregationTypeLabel = (aggregationType: AggregationType): string => {
+  switch (aggregationType) {
+    case AggregationType.Sum: return $tr("ui.aggregation-type.sum", "Sum");
+    case AggregationType.Cardinal: return $tr("ui.aggregation-type.cardinal", "Cardinal");
+    case AggregationType.Mean: return $tr("ui.aggregation-type.mean", "Mean");
+    case AggregationType.Median: return $tr("ui.aggregation-type.median", "Median");
+    case AggregationType.First: return $tr("ui.aggregation-type.first", "First");
+    case AggregationType.Last: return $tr("ui.aggregation.last", "Last");
+    case AggregationType.Difference: return $tr("ui.aggregation-type.difference", "Difference");
+    case AggregationType.Minimum: return $tr("ui.common.minimum", "Minimum");
+    case AggregationType.Maximum: return $tr("ui.common.maximum", "Maximum");
+    case AggregationType.Range: return $tr("ui.aggregation-type.range", "Range");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const axisTypeLabel = (axisType: AxisType | number): string => {
+  switch (axisType) {
+    case AxisType.Date: return $tr("ui.common.date", "Date");
+    case AxisType.Value: return $tr("ui.common.value", "Value");
+    case AxisType.Category: return $tr("ui.common.category", "Category");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const displayAsLabel = (display: DisplayAs | number): string => {
+  switch (display) {
+    case DisplayAs.Bars: return $tr("ui.common.bars", "Bars");
+    case DisplayAs.Lines: return $tr("ui.common.lines", "Lines");
+    case DisplayAs.Points: return $tr("ui.common.points", "Points");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const filterTypeLabel = (filterType: FilterType | number): string => {
+  switch (filterType) {
+    case FilterType.Contains: return $tr("ui.common.contains", "contains");
+    case FilterType.Different: return "≠";
+    case FilterType.EndsWith: return $tr("ui.filter-type.ends-with", "ends with");
+    case FilterType.Equal: return "=";
+    case FilterType.Less: return "<";
+    case FilterType.LessOrEqual: return "≤";
+    case FilterType.More: return ">";
+    case FilterType.MoreOrEqual: return "≥";
+    case FilterType.StartsWith: return $tr("ui.filter-type.starts-with", "start with");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const heatmapRuleLabel = (heatMap: HeatmapRule | number): string => {
+  switch (heatMap) {
+    case HeatmapRule.Gradient: return $tr("ui.common.gradient", "Gradient");
+    case HeatmapRule.Ranges: return $tr("ui.common.ranges", "Ranges");
+    case HeatmapRule.Fixed: return $tr("ui.common.fixed", "Fixed");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const operationOnLabel = (operationOn: OperationOn | number): string => {
+  switch (operationOn) {
+    case OperationOn.SameEntity: return $tr("ui.operation-on.same-entity", "Same entity");
+    case OperationOn.SameGroup: return $tr("ui.operation-on.same-group", "Same group");
+    case OperationOn.SameGroupAndEntity: return $tr("ui.operation-on.same-group-entity", "Same group and entity");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const planningTypeLabel = (planningType: PlanningType | number): string => {
+  switch (planningType) {
+    case PlanningType.UntilNext: return $tr("ui.planning-type.until-next", "Until next");
+    case PlanningType.ElapsedTime: return $tr("ui.planning-type.elapsed-time", "Elapsed time");
+    case PlanningType.SinglePoint: return $tr("ui.planning-type.single-point", "Single point");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const plotPerLabel = (plotper: PlotPer | number): string => {
+  switch (plotper) {
+    case PlotPer.SinglePlot: return $tr("ui.plot-per.single-slot", "Single slot");
+    case PlotPer.Model: return $tr("ui.common.model", "Model");
+    case PlotPer.Group: return $tr("ui.common.group", "Group");
+    case PlotPer.Location: return $tr("ui.common.location", "Location");
+    case PlotPer.Device: return $tr("ui.common.device", "Device");
+    default: return $tr("ui.common.none", "None");
+  }
+};
+
+export const serieTypeLabel = (serieType: SerieType): string => {
+  switch (serieType) {
+    case SerieType.Lines: return $tr("ui.common.lines", "Lines");
+    case SerieType.Area: return $tr("ui.common.area", "Area");
+    case SerieType.Range: return $tr("ui.common.range", "Range");
+    case SerieType.Histogram: return $tr("ui.common.histogram", "Histogram");
+    case SerieType.Operation: return $tr("ui.common.operation", "Operation");
+    case SerieType.Planning: return $tr("ui.common.planning", "Planning");
+    case SerieType.ScatterPlot: return $tr("ui.common.scatter-plot", "Scatter plot");
+    case SerieType.Top: return $tr("ui.serie-type.top", "Top");
+    case SerieType.Bars: return $tr("ui.common.bars", "Bars");
+    case SerieType.StackedBars: return $tr("ui.common.stacked-bars", "Stacked bars");
+    case SerieType.Pie: return $tr("ui.common.pie", "Pie");
+    case SerieType.Heatmap: return $tr('ui.common.heatmap', 'Heatmap');
+    case SerieType.Slider: return $tr("ui.common.slider", "Slider");
+    case SerieType.Gauge: return $tr("ui.common.gauge", "Gauge");
+    case SerieType.ScoreCard: return $tr("ui.common.score-card", "Score card");
+    case SerieType.Table: return $tr("ui.serie-type.table", "Table");
+    default: return "";
+  }
+};
+
 export const showModifiers = (serieType: SerieType) => {
   switch (serieType) {
     case SerieType.Lines:
@@ -297,4 +435,5 @@ export const timeMillisecond = (value: number | null | undefined, unit: TimeUnit
     case TimeUnit.Year: return value * 31536000000;
     default: return 0;
   }
-}
+}
+

package/tools/index.ts

@@ -1,2 +1,4 @@
 export * from "./alertsTools";
-export * from "./chartsTools";
+export * from "./chartsTools";
+export * from "./reportsTools";
+export * from "./timeRangeTools";

package/tools/reportsTools.ts

@@ -0,0 +1,38 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ColorEnum } from "../models";
+import { JobState } from "@dative-gpi/foundation-shared-domain/enums";
+
+const { $tr } = useTranslationsProvider();
+
+export const getColorByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return ColorEnum.Success;
+    case JobState.Failed:
+      return ColorEnum.Error;
+    default:
+      return ColorEnum.Primary;
+  }
+};
+
+export const getIconByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return 'mdi-check-circle-outline';
+    case JobState.Failed:
+      return 'mdi-alert-circle-outline';
+    default:
+      return 'mdi-alert-circle-outline';
+  }
+};
+
+export const getLabelByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return $tr('ui.common.success', 'Success');
+    case JobState.Failed:
+      return $tr('ui.common.error', 'Error');
+    default:
+      return $tr('ui.common.executed', 'Executed');
+  }
+};

package/tools/timeRangeTools.ts

@@ -0,0 +1,125 @@
+import { DateType, Days } from "@dative-gpi/foundation-shared-domain/enums";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+const { $tr } = useTranslationsProvider();
+
+const { getUserOffset } = useAppTimeZone();
+
+
+export const applyOffset = (r: DateTimeRange, negative: boolean) => {
+  const range: DateTimeRange = {
+    startDay: r.startDay,
+    startHour: r.startHour,
+    startMinute: r.startMinute,
+    endDay: r.endDay,
+    endHour: r.endHour,
+    endMinute: r.endMinute,
+    variant: r.variant
+  };
+
+  if (r.variant == DateType.UTC) {
+    let innerStartHour = 0;
+    let innerEndHour = 0;
+
+    if (negative) {
+      innerStartHour = r.startHour - getUserOffset() / 1000 / 60 / 60;
+      innerEndHour = r.endHour - getUserOffset() / 1000 / 60 / 60;
+    }
+    else {
+      innerStartHour = r.startHour + getUserOffset() / 1000 / 60 / 60;
+      innerEndHour = r.endHour + getUserOffset() / 1000 / 60 / 60;
+    }
+
+    if (![Days.AllDays].includes(r.startDay)) {
+      if (innerStartHour > 23) {
+        range.startDay = (r.startDay + 1) % 7;
+        range.startHour = innerStartHour - 24;
+      }
+      else if (innerStartHour < 0) {
+        range.startDay = (r.startDay + 6) % 7;
+        range.startHour = innerStartHour + 24;
+      }
+      else {
+        range.startHour = innerStartHour;
+      }
+
+      if (innerEndHour > 23) {
+        range.endDay = (r.endDay + 1) % 7;
+        range.endHour = innerEndHour - 24;
+      }
+      else if (innerEndHour < 0) {
+        range.endDay = (r.endDay + 6) % 7;
+        range.endHour = innerEndHour + 24;
+      }
+      else {
+        range.endHour = innerEndHour;
+      }
+    }
+    else {
+      if (innerStartHour > 23) {
+        range.startHour = innerStartHour - 24;
+      }
+      else if (innerStartHour < 0) {
+        range.startHour = innerStartHour + 24;
+      }
+      else {
+        range.startHour = innerStartHour;
+      }
+
+      if (innerEndHour > 23) {
+        range.endHour = innerEndHour - 24;
+      }
+      else if (innerEndHour < 0) {
+        range.endHour = innerEndHour + 24;
+      }
+      else {
+        range.endHour = innerEndHour;
+      }
+    }
+    return {
+      startDay: range.startDay,
+      startHour: range.startHour,
+      startMinute: r.startMinute,
+      endDay: range.endDay,
+      endHour: range.endHour,
+      endMinute: range.endMinute,
+      variant: range.variant
+    };
+  }
+  else {
+    return r;
+  }
+}
+
+export interface DateTimeRange {
+  startDay: Days;
+  startHour: number;
+  startMinute: number;
+  endDay: Days;
+  endHour: number;
+  endMinute: number;
+  variant: DateType;
+}
+
+export const dayLabel = (day: Days | number): string => {
+  switch (day) {
+    case Days.Monday:
+      return $tr("ui.common.monday", "Monday");
+    case Days.Tuesday:
+      return $tr("ui.common.tuesday", "Tuesday");
+    case Days.Wednesday:
+      return $tr("ui.common.wednesday", "Wednesday");
+    case Days.Thursday:
+      return $tr("ui.common.thursday", "Thursday");
+    case Days.Friday:
+      return $tr("ui.common.friday", "Friday");
+    case Days.Saturday:
+      return $tr("ui.common.saturday", "Saturday");
+    case Days.Sunday:
+      return $tr("ui.common.sunday", "Sunday");
+    default:
+      return $tr("ui.common.all-days", "All days");
+  }
+}

package/utils/badge.ts

@@ -1,9 +1,13 @@
-export const getBadgeFromNumber = (value: number, parenthesis: boolean = false): string => {
+export const capNumberToString = (value: number, maximum: number = 99): string => {
+  if (value > maximum) {
+    return `${maximum}+`;
+  }
+  return `${value.toString()}`;
+}
+
+export const getBadgeFromNumber = (value: number, parenthesis: boolean = false, maximum: number = 99): string => {
   if (value < 1) {
     return "";
   }
-  if (value > 99) {
-    return `${parenthesis ? '(' : ''}99+${parenthesis ? ')' : ''}`;
-  }
-  return `${parenthesis ? '(' : ''}${value.toString()}${parenthesis ? ')' : ''}`;
+  return parenthesis ? `(${capNumberToString(value, maximum)})` : capNumberToString(value, maximum);
 }

package/utils/filter.ts

@@ -1,4 +1,7 @@
 export const containsSearchTerm = (obj: any, searchTerm: string): boolean => {
+  if (obj == null) {
+    return false;
+  }
   if (typeof obj === 'object') {
     return Object.values(obj).some(value => containsSearchTerm(value, searchTerm));
   }
@@ -12,4 +15,4 @@ export const filterItems = <T>(items: T[], filter: string): T[] => {
   const searchTerm = filter.toLowerCase();
 
   return items.filter(item => containsSearchTerm(item, searchTerm));
-};
+};

package/utils/index.ts

@@ -8,6 +8,8 @@ export * from "./icons";
 export * from "./leafletMarkers"
 export * from "./levenshtein";
 export * from "./lexical";
+export * from "./operations";
+export * from "./picker";
 export * from "./sort";
 export * from "./statuses";
 export * from "./time";

package/utils/leafletMarkers.ts

@@ -1,6 +1,6 @@
-export const locationMarkerHtml = (icon: string, color: string) => {
+export const locationMarkerHtml = (icon: string, color: string, label: string = '') => {
   const iconHtml = `
-  <div style="--fs-map-location-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
+  <div title="${label}" style="--fs-map-location-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
     <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
@@ -22,8 +22,8 @@ export const gpsMarkerHtml = () => {
   return iconHtml;
 }
 
-export const pinMarkerHtml = (color: string) => {
-  const iconHtml = `<div style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
+export const pinMarkerHtml = (color: string, label: string = "") => {
+  const iconHtml = `<div title="${label}" style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
 
   return iconHtml;
 }

package/utils/operations.ts

@@ -0,0 +1,108 @@
+const MinusOperator = "-";
+
+/**
+ * Splits an expression by operators while keeping unary minus signs.
+ */
+const splitByOperators = (expression: string): string[] => {
+  const tokens: string[] = [];
+  let current = '';
+  let expectOperand = true;
+
+  for (let i = 0; i < expression.length; i++) {
+    const char = expression[i];
+    if ('+-*/'.includes(char)) {
+      const isUnaryMinus = char === '-' && expectOperand;
+      if (isUnaryMinus) {
+        current += char;
+        expectOperand = true;
+      } else {
+        if (expectOperand) {
+          // 2 consecutive operators or operator at the start
+          return [];
+        }
+        if (current !== '') {
+          tokens.push(current);
+          current = '';
+        }
+        tokens.push(char);
+        expectOperand = true;
+      }
+    } else {
+      current += char;
+      expectOperand = false;
+    }
+  }
+  if (current !== '') {
+    tokens.push(current);
+  }
+  return tokens;
+};
+
+// Matches a nested block of parenthesis
+const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
+
+// Match a positive decimal number
+const decimalRegex = new RegExp(/^\d+(.\d+)?$/gm);
+
+const validateBlock = (block: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove parenthesis from the block
+  block = block.replaceAll("(", "").replaceAll(")", "");
+
+  // Split block on operators (Leave negative signs)
+  const tokens = splitByOperators(block);
+  if (tokens.length === 0) {
+    return false;
+  }
+  const components = tokens.filter(token => !'+-*/'.includes(token));
+
+  // Check if each bit is a valid operand
+  for (let i = 0; i < components.length; i++) {
+    // Remove negative sign
+    if (components[i].startsWith(MinusOperator)) {
+        components[i] = components[i].substring(1);
+    }
+    if (!operands.includes(components[i]) && !variables.includes(components[i]) && !components[i].match(decimalRegex)) {
+        return false;
+    }
+  }
+  return true;
+}
+
+export const validateOperation = (rawOperation: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove spaces
+  let operation = rawOperation.replaceAll(" ", "");
+
+  // Check parenthesis
+  const parenthesis: number[] = [];
+
+  for (let i = 0; i < operation.length; i++) {
+    if (operation[i] == '(') {
+      parenthesis.push(i);
+    }
+    else if (operation[i] == ')') {
+      if (parenthesis.length > 0) {
+        if (i == parenthesis.pop()! + 1) {
+          return false;
+        }
+      }
+      else {
+        return false;
+      }
+    }
+  }
+  if (parenthesis.length > 0) {
+    return false;
+  }
+
+  // Check each block between parenthesis
+  let match = operation.match(parenthesisRegex);
+
+  while (match?.[0]) {
+    if (!validateBlock(match[0], operands, variables)) {
+      return false;
+    }
+    operation = operation.replace(match[0], "1");
+    match = operation.match(parenthesisRegex);
+  }
+  return validateBlock(operation, operands, variables);
+}