@dative-gpi/foundation-shared-components 1.0.87 → 1.0.88

package/tools/chartsTools.ts

@@ -1,32 +1,49 @@
-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 } 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.chart-origin.none", "None");
+    case ChartOrigin.Organisation: return $tr("ui.chart-origin.organisation", "Custom");
+    case ChartOrigin.OrganisationType: return $tr("ui.chart-origin.organisation-type", "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.score-card", "Score card");
-    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");
-    default: return $tr("ui.common.none", "None");
+    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.chart-type.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");
-    default: return $tr("ui.common.none", "None");
+    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", "Armytage");
+    case ColorSets.Hash: return $tr("ui.color-sets.hash", "Hash");
+    case ColorSets.Kelly: return $tr("ui.color-sets.material", "Kelly");
+    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.material", "ZeileisHornikMurrell");
+    default: return $tr("ui.color-sets.none", "None");
   }
 }
 
@@ -66,6 +83,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-type.last", "Last");
+    case AggregationType.Difference: return $tr("ui.aggregation-type.difference", "Difference");
+    case AggregationType.Minimum: return $tr("ui.aggregation-type.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.aggregation-type.none", "None");
+  }
+};
+
+export const axisTypeLabel = (axisType: AxisType | number): string => {
+  switch (axisType) {
+    case AxisType.Date: return $tr("ui.axis-type.date", "Date");
+    case AxisType.Value: return $tr("ui.axis-type.value", "Value");
+    case AxisType.Category: return $tr("ui.axis-type.category", "Category");
+    default: return $tr("ui.axis-type.none", "None");
+  }
+};
+
+export const displayAsLabel = (display: DisplayAs | number): string => {
+  switch (display) {
+    case DisplayAs.Bars: return $tr("ui.display-as.bars", "Bars");
+    case DisplayAs.Lines: return $tr("ui.display-as.lines", "Lines");
+    case DisplayAs.Points: return $tr("ui.display-as.point", "Points");
+    default: return $tr("ui.display-as.none", "None");
+  }
+};
+
+export const filterTypeLabel = (filterType: FilterType | number): string => {
+  switch (filterType) {
+    case FilterType.Contains: return $tr("ui.filter-type.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.filter-type.none", "None");
+  }
+};
+
+export const heatmapRuleLabel = (heatMap: HeatmapRule | number): string => {
+  switch (heatMap) {
+    case HeatmapRule.Gradient: return $tr("ui.heatmap-rule.gradient", "Gradient");
+    case HeatmapRule.Ranges: return $tr("ui.heatmap-rule.ranges", "Ranges");
+    case HeatmapRule.Fixed: return $tr("ui.heatmap-rule.fixed", "Fixed");
+    default: return $tr("ui.heatmap-rule.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.operation-on.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.planning-type.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.plot-per.model", "Model");
+    case PlotPer.Group: return $tr("ui.plot-per.group", "Group");
+    case PlotPer.Location: return $tr("ui.plot-per.location", "Location");
+    case PlotPer.Device: return $tr("ui.plot-per.device", "Device");
+    default: return $tr("ui.plot-per.none", "None");
+  }
+};
+
+export const serieTypeLabel = (serieType: SerieType): string => {
+  switch (serieType) {
+    case SerieType.Lines: return $tr("ui.serie-type.lines", "Lines");
+    case SerieType.Area: return $tr("ui.serie-type.area", "Area");
+    case SerieType.Range: return $tr("ui.serie-type.range", "Range");
+    case SerieType.Histogram: return $tr("ui.serie-type.histogram", "Histogram");
+    case SerieType.Operation: return $tr("ui.serie-type.operation", "Operation");
+    case SerieType.Planning: return $tr("ui.serie-type.planning", "Planning");
+    case SerieType.ScatterPlot: return $tr("ui.serie-type.scatter-plot", "Scatter plot");
+    case SerieType.Top: return $tr("ui.serie-type.top", "Top");
+    case SerieType.Bars: return $tr("ui.serie-type.bars", "Bars");
+    case SerieType.StackedBars: return $tr("ui.serie-type.stacked-bars", "Stacked bars");
+    case SerieType.Pie: return $tr("ui.serie-type.pie", "Pie");
+    case SerieType.Heatmap: return $tr('ui.serie-type.heatmap', 'Heatmap');
+    case SerieType.Slider: return $tr("ui.serie-type.slider", "Slider");
+    case SerieType.Gauge: return $tr("ui.serie-type.gauge", "Gauge");
+    case SerieType.ScoreCard: return $tr("ui.serie-type.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 +423,5 @@ export const timeMillisecond = (value: number | null | undefined, unit: TimeUnit
     case TimeUnit.Year: return value * 31536000000;
     default: return 0;
   }
-}
+}
+

package/tools/timeRangeTools.ts

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

package/components/fields/FSTimeSlotField.vue

@@ -1,250 +0,0 @@
-<template>
-  <FSBaseField
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
-    :editable="$props.editable"
-    :label="$props.label"
-    :messages="messages"
-  >
-    <FSRow>
-      <FSRow
-        :wrap="false"
-      >
-        <FSSelectField
-          :validationValue="$props.modelValue"
-          :editable="$props.editable"
-          :validateOn="validateOn"
-          :rules="$props.rules"
-          :items="daysObject"
-          :hideHeader="true"
-          :clearable="false"
-          :style="style"
-          :modelValue="dayStart"
-          @update:modelValue="onChangeDayStart"
-        />
-        <FSClock
-          class="fs-time-slot-field-number"
-          :editable="$props.editable"
-          :color="ColorEnum.Light"
-          :slider="false"
-          :style="style"
-          :modelValue="$props.modelValue[0][1]"
-          @update:modelValue="onChangeHourStart"
-        />
-      </FSRow>
-      <FSRow
-        :wrap="false"
-      >
-        <FSSelectField
-          class="fs-time-slot-field-select"
-          :editable="$props.editable"
-          :items="daysObject"
-          :hideHeader="true"
-          :clearable="false"
-          :style="style"
-          :modelValue="dayEnd"
-          @update:modelValue="onChangeDayEnd"
-        />
-        <FSClock
-          class="fs-time-slot-field-number"
-          :editable="$props.editable"
-          :color="ColorEnum.Light"
-          :slider="false"
-          :style="style"
-          :modelValue="$props.modelValue[1][1]"
-          @update:modelValue="onChangeHourEnd"
-        />
-      </FSRow>
-    </FSRow>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { Days } from "@dative-gpi/foundation-shared-domain/enums";
-
-import FSSelectField from "./FSSelectField.vue";
-import FSBaseField from "./FSBaseField.vue";
-import FSClock from "../FSClock.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSTimeSlotField",
-  components: {
-    FSSelectField,
-    FSBaseField,
-    FSClock,
-    FSRow
-  },
-  props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: Array as PropType<number[][] | null>,
-      required: true,
-      default: null
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    rules: {
-      type: Array as PropType<any[]>,
-      required: false,
-      default: () => []
-    },
-    messages: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: null
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { validateOn, getMessages } = useRules();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-    
-    const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
-      if (isNaN(Number(key))) {
-        acc.push({
-          id: Days[key],
-          label: key
-        });
-      }
-      return acc;
-    }, [] as { id: number, label: string }[]);
-
-    const style = computed((): StyleValue => {
-      if (!props.editable) {
-        return {
-          "--fs-time-slot-field-cursor"             : "default",
-          "--fs-time-slot-field-border-color"       : lights.base,
-          "--fs-time-slot-field-color"              : lights.dark,
-          "--fs-time-slot-field-active-border-color": lights.base
-        };
-      }
-      return {
-        "--fs-time-slot-field-cursor"             : "text",
-        "--fs-time-slot-field-border-color"       : lights.dark,
-        "--fs-time-slot-field-color"              : darks.base,
-        "--fs-time-slot-field-active-border-color": darks.dark,
-        "--fs-time-slot-field-error-color"        : errors.base,
-        "--fs-time-slot-field-error-border-color" : errors.base
-      };
-    });
-
-    const dayStart = computed((): number => {
-      if (props.modelValue) {
-        return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
-      }
-      return 0;
-    });
-
-    const dayEnd = computed((): number => {
-      if (props.modelValue) {
-        return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
-      }
-      return 0;
-    });
-
-    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
-
-    const onChangeDayStart = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[7, 0], [7, 0]]);
-        return;
-      }
-      if (props.modelValue) {
-        if (props.modelValue[1][0] === 7) {
-          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
-        return;
-      }
-      emit("update:modelValue", [[value, 0], [value, 0]]);
-    };
-
-    const onChangeHourStart = (value: number) => {
-      if (props.modelValue) {
-        emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
-        return;
-      }
-      emit("update:modelValue", [[0, value], [0, 0]]);
-    };
-
-    const onChangeDayEnd = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[7, 0], [7, 0]]);
-        return;
-      }
-      if (props.modelValue) {
-        if (props.modelValue[0][0] === 7) {
-          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
-        return;
-      }
-      emit("update:modelValue", [[value, 0], [value, 0]]);
-    };
-
-    const onChangeHourEnd = (value: number) => {
-      if (props.modelValue) {
-        emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
-        return;
-      }
-      emit("update:modelValue", [[0, 0], [0, value]]);
-    };
-
-    return {
-      daysObject,
-      validateOn,
-      ColorEnum,
-      dayStart,
-      messages,
-      dayEnd,
-      style,
-      onChangeHourStart,
-      onChangeDayStart,
-      onChangeHourEnd,
-      onChangeDayEnd
-    };
-  }
-});
-</script>

package/styles/components/fs_timeslot_field.scss

@@ -1,12 +0,0 @@
-.fs-time-slot-field-label {
-    color: var(--fs-time-slot-field-color);
-}
-
-.fs-time-slot-field-messages {
-    align-self: stretch;
-    color: var(--fs-time-slot-field-error-color);
-}
-
-.fs-time-slot-field-description {
-    color: var(--fs-time-slot-field-color);
-}