@dative-gpi/foundation-shared-components 1.0.107 → 1.0.109

package/components/FSButton.vue

@@ -129,7 +129,7 @@
     <template
       v-else-if="$props.to"
     >
-      <router-link
+      <FSRouterLink
         :to="$props.to"
       >
         <FSIcon
@@ -143,7 +143,7 @@
         >
           {{ $props.label }}
         </FSSpan>
-      </router-link>
+      </FSRouterLink>
     </template>
     <template
       v-else
@@ -170,6 +170,7 @@ import { type RouteLocation } from "vue-router";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -185,6 +186,7 @@ const DEFAULT_PADDING = PADDING_ICON_LABEL;
 export default defineComponent({
   name: "FSButton",
   components: {
+    FSRouterLink,
     FSClickable,
     FSSpan,
     FSIcon,
@@ -198,7 +200,7 @@ export default defineComponent({
       default: DEFAULT_PADDING
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/components/FSClickable.vue

@@ -40,7 +40,7 @@
       />
     </template>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
@@ -80,7 +80,7 @@
         :color="loadColor"
       />
     </template>
-  </router-link>
+  </FSRouterLink>
   <button
     v-else
     :type="$props.type"
@@ -134,11 +134,13 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
+    FSRouterLink,
     FSCard
   },
   props: {
@@ -163,7 +165,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/components/FSLink.vue

@@ -2,13 +2,16 @@
   <a
     v-if="$props.href"
     :href="$props.href"
+    :class="classes"
     :style="style"
   >
     <slot>
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :to="$props.to"
     :class="classes"
@@ -19,9 +22,11 @@
     <slot
       v-bind="props"
     >
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
-  </router-link>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
@@ -31,8 +36,15 @@ import { type RouteLocation } from "vue-router";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSRouterLink from "./FSRouterLink.vue";
+import FSSpan from "./FSSpan.vue";
+
 export default defineComponent({
   name: "FSLink",
+  components: {
+    FSRouterLink,
+    FSSpan
+  },
   props: {
     label: {
       type: String as PropType<string | null>,
@@ -40,7 +52,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/components/FSRouterLink.vue

@@ -0,0 +1,42 @@
+<template>
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
+      />
+    </template>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
+
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
+
+export default defineComponent({
+  name: "FSRouterLink",
+  props: {
+    to: {
+      type: Object as PropType<RouteLocation>,
+      required: true
+    }
+  },
+  setup() {
+    const { handleRoutingEvent } = useRouting();
+
+    return {
+      handleRoutingEvent
+    };
+  }
+});
+</script>

package/components/agenda/FSAgendaHeader.vue

@@ -23,7 +23,7 @@
         >
           <FSSpan
             class="fs-agenda-header-text"
-            font="text-h3"
+            font="text-button"
           >
             {{ epochToMonthYearOnlyFormat($props.start) }}
           </FSSpan>

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -134,7 +134,7 @@ export default defineComponent({
     const width = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if(props.variant === 'current') {
+      if(props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
       } else if (props.end > dayEnd.value) {
         end = dayEnd.value - dayDurationOffset.value;

package/components/agenda/FSAgendaHoursRow.vue

@@ -3,11 +3,11 @@
     gap="0"
   >
     <FSRow
+      :padding="`0 ${paddingRightHours} 0 ${paddingLeftHours}`"
       class="fs-agenda-hours-row"
       :wrap="false"
       gap="0"
       align="center-center"
-      :style="style"
     >
       <FSRow
         v-for="hour in hours"
@@ -37,6 +37,7 @@
       </FSRow>
     </FSRow>
     <FSRow
+      :padding="`0 ${paddingRightMarkers} 0 ${paddingLeftMarkers}`"
       class="fs-agenda-hours-row-markers"
       :wrap="false"
       gap="0"
@@ -88,8 +89,12 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    firstColumnWidth: {
+      type: String,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const { getColors } = useColors();
     const { isMobileSized } = useBreakpoints();
 
@@ -108,12 +113,27 @@ export default defineComponent({
       return Array.from({ length: hoursToShow.value }, (_, i) => i * (24 / hoursToShow.value));
     });
 
-    const style = computed((): StyleValue => {
-      return {
-        '--fs-agenda-hours-row-transform': `translateX(calc(-${2.4 * 24 / hoursToShow.value}%))`,
-      }
+    const paddingLeftHours = computed(() => {
+      // ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is the width of each hour slot (2 hour if 12 hours are shown, 1 hour if 24 hours are shown)
+      // 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is half of the width of each hour slot
+      // So we have : ${props.firstColumnWidth} - Half of the width of each hour slot
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
+    });
+
+    const paddingRightHours = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
     });
 
+    const paddingLeftMarkers = computed(() => {
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+    const paddingRightMarkers = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+
+
     const getMarkerStyle = (isNowHour: boolean): StyleValue => {
       if(isNowHour) {
         return {
@@ -129,8 +149,12 @@ export default defineComponent({
 
     return {
       hours,
-      style,
       fontColor,
+      hoursToShow,
+      paddingLeftHours,
+      paddingRightHours,
+      paddingLeftMarkers,
+      paddingRightMarkers,
       getMarkerStyle,
       to2Digits
     };

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -131,7 +131,7 @@ export default defineComponent({
     const height = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if (props.variant === 'current') {
+      if (props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
       } else if (props.end > dayEnd.value) {
         end = dayEnd.value - dayDurationOffset.value;

package/components/agenda/FSDayAgenda.vue

@@ -2,7 +2,6 @@
   <FSRow
     class="fs-day-agenda"
     height="100%"
-    padding="8px 0 0 0"
     :wrap="false"
     gap="0px"
     :style="style"

package/components/agenda/FSMonthAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />

package/components/agenda/FSWeekAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />

package/components/fields/FSMagicConfigField.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules } from "../../models";
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
 
@@ -104,6 +104,8 @@ export default defineComponent({
           return [TimeRules.required()];
         case MagicFieldType.TimeStepField:
           return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
       }
       return [];
     });

package/components/fields/periodicField/FSPeriodicField.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+import { ref, defineComponent, type PropType, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
@@ -71,7 +71,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      type: String as PropType<string>,
       required: true
     },
     editable: {
@@ -118,9 +118,9 @@ export default defineComponent({
       emit('update:modelValue', period.item.default);
     });
 
-    onMounted(() => {
+    watch(() => props.modelValue, () => {
       selectedPeriod.value = getPeriod(props.modelValue);
-    });
+    }, { immediate: true });
 
     return {
       availablePeriod,

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -100,7 +100,7 @@ export default defineComponent({
       if (isNaN(parseInt(props.modelValue[3]))) {
         return 0;
       }
-      return parseInt(props.modelValue[3]) - 1;
+      return parseInt(props.modelValue[3]);
     });
 
     const time = computed((): number => {
@@ -113,19 +113,19 @@ export default defineComponent({
     const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value}`, "*"]);
     };
 
     return {

package/components/lists/FSDataTableUI.vue

@@ -696,6 +696,7 @@ import { useRouter } from "vue-router";
 import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
 import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
@@ -888,6 +889,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:headers", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
+    const { handleRoutingEvent } = useRouting();
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
@@ -1107,12 +1109,7 @@ export default defineComponent({
           clickable: true,
           row: (event: PointerEvent, row: any) => {
             if (props.itemTo && router) {
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-              }
-              else {
-                router.push(props.itemTo(row.item));
-              }
+              handleRoutingEvent(event, props.itemTo(row.item), true);
             }
             else {
               emit("click:row", row.item);

package/components/selects/FSSelectDashboardVariableType.vue

@@ -36,7 +36,8 @@ export default defineComponent({
     const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
       { id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
       { id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
-      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
+      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step")},
+      { id: DashboardVariableType.PlotPer, label: $tr("ui.dashboard-variable-type.plot-per", "Plot per")}
     ]));
 
     return {

package/components/selects/chartSelectors/FSAggregationSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.aggregation-type','Aggregation')"
+    :items="aggregationTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { AggregationType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { aggregationTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue : {
+      type: Number as PropType<AggregationType>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const aggregationTypeItems = computed(()=>{
+      return getEnumEntries(AggregationType).filter(f=>f.value != AggregationType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: aggregationTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      aggregationTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSAxisTypeSelector.vue

@@ -0,0 +1,49 @@
+<template>
+  <FSToggleSet
+    :hideHeader="true"
+    :values="axisTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import  {AxisType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { axisTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSToggleSet from "@dative-gpi/foundation-shared-components/components/FSToggleSet.vue";
+
+
+export default defineComponent({
+  components: {
+    FSToggleSet
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<AxisType>,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const axisTypeItems = computed(()=>{
+      return getEnumEntries(AxisType).map((f)=>{
+        return {
+          id: f.value,
+          label: axisTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      axisTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSDisplayAsSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.display-as','Display as')"
+    :items="displayAsItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {DisplayAs} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { displayAsLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<DisplayAs>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const displayAsItems = computed(()=>{
+      return getEnumEntries(DisplayAs).filter(f=>f.value != DisplayAs.None).map((f)=>{
+        return {
+          id: f.value,
+          label: displayAsLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      displayAsItems,
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSFilterTypeSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.filter-type','Filter type')"
+    :toggleSet="true"
+    :items="filterTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {FilterType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { filterTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<FilterType>,
+      required: false,
+      default : FilterType.None
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const filterTypeItems = computed(()=>{
+      return getEnumEntries(FilterType).filter(f=>f.value != FilterType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: filterTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      filterTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSHeatmapRuleSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.heat-rule','Heat rule')"
+    :items="heatmapRuleItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {HeatmapRule} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { heatmapRuleLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<HeatmapRule>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const heatmapRuleItems = computed(()=>{
+      return getEnumEntries(HeatmapRule).filter(f=>f.value != HeatmapRule.None).map((f)=>{
+        return {
+          id: f.value,
+          label: heatmapRuleLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      heatmapRuleItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSOperationOnSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.operation-on','Operation on')"
+    :items="operationOnItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {OperationOn} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { operationOnLabel} from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<OperationOn>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const operationOnItems = computed(()=>{
+      return getEnumEntries(OperationOn).filter(f=>f.value != OperationOn.None).map((f)=>{
+        return {
+          id: f.value,
+          label: operationOnLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      operationOnItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSPlanningTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.planning-type','Planning type')"
+    :items="planningTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlanningType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { planningTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlanningType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const planningTypeItems = computed(()=>{
+      return getEnumEntries(PlanningType).filter(f=>f.value != PlanningType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: planningTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      planningTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSPlotPerSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.plot-per','Plot per')"
+    :items="plotPerItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlotPer} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlotPer>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const plotPerItems = computed(()=>{
+      return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
+        return {
+          id: f.value,
+          label: plotPerLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      plotPerItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSSelectEntityType.vue

@@ -0,0 +1,59 @@
+<template>
+  <FSSelectField
+    :items="entityTypes"
+    :clearable="false"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectEntityType",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<EntityType>,
+      required: false,
+      default: EntityType.Device
+    },
+    useNone: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const entityTypes = computed((): { id: EntityType; label: string }[] => {
+      const items = [
+        { id: EntityType.Model, label: $tr("ui.entity-type.models", "Models") },
+        { id: EntityType.Device, label: $tr("ui.entity-type.devices", "Devices") },
+        { id: EntityType.Group, label: $tr("ui.entity-type.groups", "Groups") },
+        { id: EntityType.Location, label: $tr("ui.entity-type.locations", "Locations") }
+      ];
+      if (props.useNone) {
+        items.unshift({ id: EntityType.None, label: $tr("ui.entity-type.none", "None") });
+      }
+      return items;
+    });
+
+    return {
+      entityTypes
+    };
+  }
+});
+</script>

package/components/selects/chartSelectors/FSSerieTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.serie-type','Serie type')"
+    :items="serieTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {SerieType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { serieTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<SerieType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const serieTypeItems = computed(()=>{
+      return getEnumEntries(SerieType).filter(f=>f.value != SerieType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: serieTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      serieTypeItems
+    }
+  }
+})
+</script>

package/composables/useMagicFieldProvider.ts

@@ -10,6 +10,7 @@ const FIELDS = {
   [MagicFieldType.IconField]      : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
   [MagicFieldType.TimeField]      : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
   [MagicFieldType.TimeStepField]  : defineAsyncComponent(() => import("../components/fields/FSTimeStepField.vue")),
+  [MagicFieldType.PlotPerField]   : defineAsyncComponent(() => import("../components/selects/chartSelectors/FSPlotPerSelector.vue")),
 };
 
 export const useMagicFieldProvider = () => {

package/models/magicFields.ts

@@ -7,4 +7,5 @@ export enum MagicFieldType {
   IconField     = 5,
   TimeField     = 6,
   TimeStepField = 7,
+  PlotPerField  = 8,
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.107",
+  "version": "1.0.109",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.107",
-    "@dative-gpi/foundation-shared-services": "1.0.107"
+    "@dative-gpi/foundation-shared-domain": "1.0.109",
+    "@dative-gpi/foundation-shared-services": "1.0.109"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "eb566a0c7b51ca46c2d469196aa8e6e83b70bae3"
+  "gitHead": "4c6fede4689135f15a5af1ed120a816c1aed111c"
 }

package/styles/components/fs_agenda_hours_row.scss

@@ -1,11 +1,3 @@
-.fs-agenda-hours-row {
-  transform: var(--fs-agenda-hours-row-transform);
-}
-
-.fs-agenda-hours-row-markers {
-  transform: translateX(calc(-2.4% + 1px)); // 1px is the border width
-}
-
 .fs-agenda-hours-row-marker {
   height: 4px;
   border-right: solid 1px var(--fs-agenda-hours-row-marker-color);

package/styles/components/fs_dialog.scss

@@ -1,9 +1,8 @@
 .fs-dialog-mobile > .v-overlay__content {
-  flex-direction: column-reverse !important;
-
   max-height: 100vh !important;
   max-width: 100vw !important;
-  height: 100% !important;
   width: 100% !important;
   margin: 0 !important;
+  position: absolute;
+  bottom: 0;
 }