@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/tools/chartsTools.ts

@@ -0,0 +1,300 @@
+import { AxisType, ColorSets, SerieType, ChartType, TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { serieTypeLabel, getEnumEntries } from "@dative-gpi/foundation-core-components/utils";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+const { $tr } = useTranslationsProvider();
+
+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");
+    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");
+    default: return $tr("ui.common.none", "None");
+  }
+}
+
+
+export const chartIcon = (value: ChartType): string => {
+  switch (value) {
+    case ChartType.Gauge: return "mdi-gauge";
+    case ChartType.Heatmap: return "mdi-blur-linear";
+    case ChartType.Pie: return "mdi-chart-pie";
+    case ChartType.ScoreCard: return "mdi-counter";
+    case ChartType.Slider: return "mdi-ruler";
+    case ChartType.Table: return "mdi-table";
+    case ChartType.XY: return "mdi-chart-line";
+    default: return $tr("ui.common.none", "None");
+  }
+}
+
+export const serieTypeIcon = (serieType: SerieType): string => {
+  switch (serieType) {
+    case SerieType.Lines: return "mdi-chart-line";
+    case SerieType.Area: return "mdi-chart-areaspline";
+    case SerieType.Range: return "mdi-chart-line-stacked";
+    case SerieType.Histogram: return "mdi-chart-histogram";
+    case SerieType.Operation: return "mdi-division";
+    case SerieType.Planning: return "mdi-chart-timeline";
+    case SerieType.ScatterPlot: return "mdi-chart-scatter-plot";
+    case SerieType.Top: return "mdi-podium-gold";
+    case SerieType.Bars: return "mdi-chart-bar";
+    case SerieType.StackedBars: return "mdi-chart-bar-stacked";
+    case SerieType.Pie: return "mdi-chart-pie";
+    case SerieType.Heatmap: return "mdi-blur-linear";
+    case SerieType.Slider: return "mdi-blur-linear";
+    case SerieType.Gauge: return "mdi-gauge";
+    case SerieType.ScoreCard: return "mdi-counter";
+    case SerieType.Table: return "mdi-table";
+    default: return "";
+  }
+}
+
+export const showModifiers = (serieType: SerieType) => {
+  switch (serieType) {
+    case SerieType.Lines:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Area:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Range:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Histogram:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Operation:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Planning:
+      return {
+        showData: true, showY: true, showFirst: true, showSecond: true,
+        ylabel: $tr('ui.common.y-axis-categories', 'Y Axis categories'),
+        firstLabel: $tr('ui.common.group-by', 'Group by'),
+        secondLabel: $tr('ui.common.elapsed-time-by', 'Elapsed time by'),
+      };
+    case SerieType.ScatterPlot:
+      return {
+        showX: true, showY: true, showFirst: true, showSecond: true,
+        xlabel: $tr('ui.common.x-axis-data', 'X axis data'),
+        ylabel: $tr('ui.common.y-axis-data', 'Y axis data'),
+        firstLabel: $tr('ui.common.group-by', 'Group by'),
+        secondLabel: $tr('ui.common.size-by', 'Size by')
+      };
+    case SerieType.Top:
+      return {
+        showData: true, showY: true, showFirst: true,
+        ylabel: $tr('ui.common.y-axis-categories', 'Y Axis categories'),
+        firstLabel: $tr('ui.common.group-by', 'Group by')
+      };
+    case SerieType.Bars:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.StackedBars:
+      return {
+        showData: true, showFirst: true, showSecond: true,
+        firstLabel: $tr('ui.common.group-by', 'Group by'),
+        secondLabel: $tr('ui.common.stack-by', 'Stack by')
+      };
+    case SerieType.Pie:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Heatmap:
+      return {
+        showData: true, showX: true, showY: true,
+        xlabel: $tr('ui.common.x-axis-categories', 'X Axis categories'),
+        ylabel: $tr('ui.common.y-axis-categories', 'Y Axis categories')
+      };
+    case SerieType.Slider:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Gauge:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.ScoreCard:
+      return { showData: true, showFirst: true, firstLabel: $tr('ui.common.group-by', 'Group by') };
+    case SerieType.Table:
+      return { showData: true };
+    default:
+      return {};
+  }
+}
+
+export const chartTypeFromSerieType = (serieType: SerieType): ChartType => {
+
+  switch (serieType) {
+    case SerieType.Lines:
+    case SerieType.Area:
+    case SerieType.Range:
+    case SerieType.Histogram:
+    case SerieType.Operation:
+    case SerieType.Planning:
+    case SerieType.ScatterPlot:
+    case SerieType.Top:
+    case SerieType.Bars:
+    case SerieType.StackedBars:
+      return ChartType.XY;
+    case SerieType.Pie:
+      return ChartType.Pie;
+    case SerieType.Heatmap:
+      return ChartType.Heatmap;
+    case SerieType.Slider:
+      return ChartType.Slider;
+    case SerieType.Gauge:
+      return ChartType.Gauge;
+    case SerieType.ScoreCard:
+      return ChartType.ScoreCard;
+    case SerieType.Table:
+      return ChartType.Table;
+    default:
+      return ChartType.None;
+  }
+}
+
+export const xAxisTypeFromSerieType = (serieType: SerieType): AxisType[] => {
+
+  switch (serieType) {
+    case SerieType.Lines:
+    case SerieType.Area:
+    case SerieType.Range:
+    case SerieType.Histogram:
+    case SerieType.Operation:
+    case SerieType.Planning:
+      return [AxisType.Date];
+
+    case SerieType.ScatterPlot:
+      return [AxisType.Category, AxisType.Value];
+
+    case SerieType.Top:
+      return [AxisType.Value];
+
+    case SerieType.Bars:
+    case SerieType.StackedBars:
+      return [AxisType.Category];
+
+    case SerieType.Heatmap:
+      return [AxisType.Date, AxisType.Category];
+
+    case SerieType.Slider:
+      return [AxisType.Value];
+
+    case SerieType.Gauge:
+    case SerieType.ScoreCard:
+    case SerieType.Table:
+    case SerieType.Pie:
+      return [];
+    default:
+      return [];
+  }
+}
+
+export const yAxisTypeFromSerieType = (serieType: SerieType): AxisType[] => {
+
+  switch (serieType) {
+    case SerieType.Lines:
+    case SerieType.Area:
+    case SerieType.Range:
+    case SerieType.Histogram:
+    case SerieType.Operation:
+      return [AxisType.Value];
+
+    case SerieType.ScatterPlot:
+      return [AxisType.Category, AxisType.Value];
+
+    case SerieType.Bars:
+    case SerieType.StackedBars:
+      return [AxisType.Value];
+
+    case SerieType.Top:
+      return [AxisType.Category];
+
+    case SerieType.Planning:
+      return [AxisType.Category];
+
+    case SerieType.Heatmap:
+      return [AxisType.Category];
+
+    case SerieType.Slider:
+      return [AxisType.Value];
+
+    case SerieType.Gauge:
+    case SerieType.ScoreCard:
+    case SerieType.Table:
+    case SerieType.Pie:
+      return [];
+    default:
+      return [];
+  }
+}
+
+export const hasAxis = (chartType: ChartType) => {
+  switch (chartType) {
+    case ChartType.XY:
+    case ChartType.Heatmap:
+      return true;
+    default:
+      return false;
+  }
+}
+
+
+export const getAllowedSeries = (chartType: ChartType, xAxisType: AxisType, yAxisType: AxisType) => {
+
+  const items = getEnumEntries(SerieType).map(e => {
+    return {
+      value: e.value as SerieType,
+      text: serieTypeLabel(e.value),
+      icon: serieTypeIcon(e.value),
+      chartType: chartTypeFromSerieType(e.value),
+      xAxis: xAxisTypeFromSerieType(e.value),
+      yAxis: yAxisTypeFromSerieType(e.value)
+    }
+  });
+
+  const filteredItems = () => {
+    switch (chartType) {
+      case ChartType.XY: {
+        return items.filter(i => i.chartType === ChartType.XY && i.xAxis.includes(xAxisType) && i.yAxis.includes(yAxisType));
+      }
+      case ChartType.Pie:
+      case ChartType.Heatmap:
+      case ChartType.Gauge:
+      case ChartType.Slider:
+      case ChartType.ScoreCard:
+      case ChartType.Table: {
+        return items.filter(i => i.chartType === chartType);
+      }
+      default: {
+        return [];
+      }
+    }
+  }
+
+  return filteredItems();
+}
+
+export const timeMillisecond = (value: number | null | undefined, unit: TimeUnit | undefined): number => {
+  if (value === null || value === undefined || unit === undefined) {
+    return 0;
+  }
+  switch (unit) {
+    case TimeUnit.None: return 0;
+    case TimeUnit.Millisecond: return value;
+    case TimeUnit.Second: return value * 1000;
+    case TimeUnit.Minute: return value * 60000;
+    case TimeUnit.Hour: return value * 3600000;
+    case TimeUnit.Day: return value * 86400000;
+    case TimeUnit.Week: return value * 604800000;
+    case TimeUnit.Month: return value * 2628000000;
+    case TimeUnit.Year: return value * 31536000000;
+    default: return 0;
+  }
+}

package/tools/index.ts

@@ -0,0 +1,2 @@
+export * from "./alertsTools";
+export * from "./chartsTools";

package/utils/badge.ts

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

package/utils/filter.ts

@@ -0,0 +1,18 @@
+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));
+  }
+  if (Array.isArray(obj)) {
+    return obj.some(element => containsSearchTerm(element, searchTerm));
+  }
+  return String(obj).toLowerCase().includes(searchTerm);
+};
+
+export const filterItems = <T>(items: T[], filter: string): T[] => {
+  const searchTerm = filter.toLowerCase();
+
+  return items.filter(item => containsSearchTerm(item, searchTerm));
+};

package/utils/index.ts

@@ -1,6 +1,8 @@
+export * from "./badge";
 export * from "./color";
 export * from "./css";
 export * from "./error";
+export * from "./filter";
 export * from "./gradient";
 export * from "./icons";
 export * from "./leafletMarkers"

package/utils/leafletMarkers.ts

@@ -1,6 +1,6 @@
 export const locationMarkerHtml = (icon: string, color: string) => {
   const iconHtml = `
-  <div style="--fs-map-mylocation-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
+  <div 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>`;
 
@@ -16,8 +16,14 @@ export const clusterMarkerHtml = (label: string) => {
   return iconHtml;
 }
 
-export const myLocationMarkerHtml = () => {
+export const gpsMarkerHtml = () => {
   const iconHtml = `<div class="fs-map-mylocation-pin" />`;
 
+  return iconHtml;
+}
+
+export const pinMarkerHtml = (color: string) => {
+  const iconHtml = `<div style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
+
   return iconHtml;
 }

package/utils/statuses.ts

@@ -1,5 +1,5 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 const { $tr } = useTranslationsProvider();
 

package/utils/time.ts

@@ -1,7 +1,33 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
+import { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums"
+
 const { $tr } = useTranslationsProvider();
 
+export const timeSteps = [
+  { id: TimeUnit.Second,      label: $tr("ui.time-step.second.singular", "Second"), plural: $tr("ui.time-step.second.plural", "Seconds") },
+  { id: TimeUnit.Minute,      label: $tr("ui.time-step.minute.singular", "Minute"), plural: $tr("ui.time-step.minute.plural", "Minutes") },
+  { id: TimeUnit.Hour,        label: $tr("ui.time-step.hour.singular", "Hour"),     plural: $tr("ui.time-step.hour.plural", "Hours") },
+  { id: TimeUnit.Day,         label: $tr("ui.time-step.day.singular", "Day"),       plural: $tr("ui.time-step.day.plural", "Days") },
+  { id: TimeUnit.Week,        label: $tr("ui.time-step.week.singular", "Week"),     plural: $tr("ui.time-step.week.plural", "Weeks") },
+  { id: TimeUnit.Month,       label: $tr("ui.time-step.month.singular", "Month"),   plural: $tr("ui.time-step.month.plural", "Months") },
+  { id: TimeUnit.Year,        label: $tr("ui.time-step.year.singular", "Year"),     plural: $tr("ui.time-step.year.plural", "Years") },
+];
+
+export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
+  if (!value) {
+    return "";
+  }
+
+  const unit = timeSteps.find(step => step.id === value.unit);
+  if (!unit) {
+    return "";
+  }
+  
+  return `${value.value} ${value.value === 1 ? unit.label.toLowerCase() : unit.plural.toLowerCase()}`;
+};
+
+// TODO : remove everything below this line
 export const timeScale: any[] = [
   { id: 1,      label: $tr("ui.time-field.second.singular", "Second"), plural: $tr("ui.time-field.second.plural", "Seconds") },
   { id: 60,     label: $tr("ui.time-field.minute.singular", "Minute"), plural: $tr("ui.time-field.minute.plural", "Minutes") },
@@ -26,4 +52,4 @@ export const getTimeBestString = (value: number): string => {
   const unit = getTimeScaleIndex(value);
   const figure = value / timeScale[unit].id;
   return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCase()}`;
-}
+};

package/components/autocompletes/FSAutocompleteTag.vue

@@ -1,138 +0,0 @@
-<template>
-  <FSCol>
-    <FSAutocompleteField
-      v-if="variant=='standard'"
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField>
-    <FSAutocompleteField
-      v-else
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      :showSearch="true"
-      @update:modelValue="onUpdateModelValue"
-      @add:item="onAddItem"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField> 
-    <FSTagGroup
-      v-if="modelValue != null"
-      :tags="modelValue?.map((v) => v.label) ?? []"
-      @remove="onRemoveValue($event)"
-    />
-  </FSCol>
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
-
-import { uuidv4 } from '@dative-gpi/bones-ui';
-
-import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSTagGroup from "../FSTagGroup.vue";
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField,
-    FSTagGroup,
-  },
-  props:{
-    modelValue: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[] | null>,
-      required: false,
-      default: () => []
-    },
-    items: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[]>,
-      required: false,
-      default: () => []
-    },
-    label : {
-      type: String,
-      required: false
-    },
-    variant: {
-      type: String as PropType<'standard' | 'tagged'>,
-      required: false,
-      default : 'standard'
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, {emit}) {
-
-    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
-
-    const innerItems = computed(()=>{
-
-      if(props.variant === 'standard'){
-        return props.items
-      }
-      else{
-        return props.items.concat(tagValues.value);
-      }
-    });
-
-    const onUpdateModelValue = (value: string[] | null) => {
-      emit('update:modelValue', value?.map((v) => innerItems.value.find((i) => i.id === v)));
-    }
-
-    const onRemoveValue = (value: string) => {
-      const idValue = innerItems.value.find((v) => v.label === value)?.id;
-      if (idValue) {
-        if(tagValues.value.map((v) => v.label).includes(value)){
-          tagValues.value = tagValues.value.filter((v) => v.label !== value);
-        }
-        emit('update:modelValue', [...props.modelValue?.filter((v) => v.id !== idValue) ?? []]);
-      }
-    }
-
-    const onAddItem = (value: string) => {
-      if (innerItems.value.map((v) => v.label).includes(value)) {
-        return;
-      }
-      let item = {id: uuidv4(), label: value, isCustom: true};
-      tagValues.value.push(item);
-      emit('update:modelValue', [...props.modelValue?? [],item]);
-    }
-
-    const onKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Backspace') {
-        emit('update:modelValue', [...props.modelValue ?? []]);
-      }
-    };
-
-    watch(() => props.modelValue, (newValue) => {
-      if (newValue) {
-        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
-      }
-    }, {immediate: true});
-
-
-    return {
-      innerItems,
-      onUpdateModelValue,
-      onAddItem,
-      onRemoveValue,
-      onKeydown
-    }
-  }
-})
-</script>