@dative-gpi/foundation-shared-components 1.0.50 → 1.0.52

package/components/tiles/FSModelTileUI.vue

@@ -0,0 +1,59 @@
+<template>
+  <FSClickable
+    padding="16px"
+    height="196px"
+    width="148px"
+    :border="false"
+    v-bind="$attrs"
+  >
+    <template
+      #default
+    >
+      <FSCol
+        align="center-center"
+      >
+        <FSImage
+          :imageId="imageId"
+          width="116px"
+          height="116px"
+        />
+        <FSSpan
+          :lineClamp="2"
+        >
+          {{ label }}
+        </FSSpan>
+      </FSCol>
+    </template>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSCol from "../FSCol.vue";
+import FSSpan from "../FSSpan.vue";
+import FSImage from "../FSImage.vue";
+import FSClickable from "../FSClickable.vue";
+
+export default defineComponent({
+  name: "FSModelTileUI",
+  components: {
+    FSCol,
+    FSSpan,
+    FSImage,
+    FSClickable,
+  },
+  props:{
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    }
+  }
+});
+</script>

package/models/agenda.ts

@@ -0,0 +1,9 @@
+export interface FSAgendaEvent {
+  id: string;
+  label: string;
+  icon?: string;
+  iconBis?: string;
+  color: string;
+  start: number;
+  end: number;
+}

package/models/index.ts

@@ -1,3 +1,4 @@
+export * from "./agenda";
 export * from "./breadcrumbs";
 export * from "./colors";
 export * from "./deviceAlerts";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.50",
-    "@dative-gpi/foundation-shared-services": "1.0.50"
+    "@dative-gpi/foundation-shared-domain": "1.0.52",
+    "@dative-gpi/foundation-shared-services": "1.0.52"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "cd6dbbece150ed1737360817a9cf563e7dcf55df"
+  "gitHead": "3f7d88cfca5c1c30336482b58d65c559e4bdd386"
 }

package/styles/components/fs_agenda.scss

@@ -0,0 +1,32 @@
+.fs-agenda-view {
+  min-height: 0;
+}
+
+.fs-agenda-label-day-container {
+  flex-shrink: 0;
+}
+
+.fs-agenda-label-day {
+  border-bottom: 1px solid var(--fs-agenda-label-day-border-bottom-color);
+  border-right: 1px solid var(--fs-agenda-label-day-border-right-color);
+  min-height: 0px;
+}
+
+.fs-agenda-label-day-now {
+  border-bottom: 4px solid var(--fs-clickable-border-color);
+}
+
+.fs-agenda-body {
+  position: relative;
+}
+
+.fs-agenda-row-day {
+  position: relative;
+  border-bottom: 1px solid var(--fs-agenda-row-day-border-bottom-color);
+}
+
+.fs-day-agenda-hour-line {
+  border-top: solid 1px var(--fs-day-agenda-hour-line-color);
+  width: 100%;
+  height: 100%;
+}

package/styles/components/fs_agenda_event.scss

@@ -0,0 +1,41 @@
+.fs-agenda-event {
+  position: absolute !important;
+  left: var(--fs-agenda-event-left);
+  top: var(--fs-agenda-event-top);
+
+  &.fs-agenda-event-past {
+    opacity: 0.5;
+  }
+
+  >.fs-card {
+    border-left: solid 3px var(--fs-clickable-border-color) !important;
+  }
+}
+
+.fs-agenda-event .fs-col,
+.fs-agenda-event .fs-row {
+  overflow: hidden;
+}
+
+.fs-day-agenda .fs-agenda-event {
+  .fs-agenda-event-day-label-container {
+    overflow: visible !important;
+  }
+}
+
+.fs-week-agenda .fs-agenda-event{
+  margin-top: 3px;
+  margin-bottom: 3px;
+  height: calc(100% - 6px) !important;
+}
+
+.fs-month-agenda .fs-agenda-event {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: calc(100% - 4px) !important;
+}
+
+.fs-agenda-event-current span {
+  text-overflow: unset;
+  flex-shrink: 0;
+}

package/styles/components/fs_agenda_hours_col.scss

@@ -0,0 +1,4 @@
+.fs-agenda-hours-col {
+  transform: translateY(calc(-2.4% + 4px));
+  overflow: visible;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -0,0 +1,13 @@
+.fs-agenda-hours-row {
+  transform: translateX(calc(-2.4% + 2px));
+}
+
+.fs-agenda-hours-row-text {
+  padding: 0 2px;
+}
+
+.fs-agenda-hours-row-marker {
+  height: 4px;
+  border-right: solid 1px var(--fs-agenda-hours-row-marker-color);
+  transform: translateY(-4px);
+}

package/styles/components/fs_agenda_time_line_marker.scss

@@ -0,0 +1,19 @@
+.fs-agenda-horizontal-time-line-marker {
+  position: absolute;
+  top: 0;
+  left: var(--fs-agenda-horizontal-time-line-marker-left);
+  width: 2px;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--fs-agenda-horizontal-time-line-marker-color);
+}
+
+.fs-agenda-vertical-time-line-marker {
+  position: absolute;
+  top: var(--fs-agenda-vertical-time-line-marker-top);
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1;
+  background-color: var(--fs-agenda-vertical-time-line-marker-color);
+}

package/styles/components/fs_clickable.scss

@@ -17,7 +17,8 @@
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-hover-background-color);
         }
     }
@@ -27,7 +28,8 @@
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-active-background-color);
         }
     }

package/styles/components/fs_dialog.scss

@@ -1,18 +1,14 @@
-.fs-dialog-mobile {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    align-self: flex-end;
-  }
+.fs-dialog-mobile > .v-overlay__content {
+  max-height: calc(100% - 40px) !important;
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  align-self: flex-end;
 }
 
-.fs-dialog {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: calc(100% - 40px) !important;
-    min-width: 35vw !important;
-    width: fit-content !important;
-  }
+.fs-dialog > .v-overlay__content {
+  max-height: calc(100vh - 40px) !important;
+  max-width: calc(100vw - 40px) !important;
+  width: fit-content !important;
+  margin: 20px !important;
 }

package/styles/components/index.scss

@@ -1,4 +1,9 @@
 @import "fs_accordion_panel.scss";
+@import "fs_agenda.scss";
+@import "fs_agenda_event.scss";
+@import "fs_agenda_hours_col.scss";
+@import "fs_agenda_hours_row.scss";
+@import "fs_agenda_time_line_marker.scss";
 @import "fs_autocomplete_field.scss";
 @import "fs_base_field.scss";
 @import "fs_breadcrumbs.scss";

package/tools/alertsTools.ts

@@ -0,0 +1,54 @@
+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"
+
+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.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");
+      default: return "";
+    }
+  },
+  criticityColor(value: Criticity): ColorEnum {
+    switch (value) {
+      case Criticity.Warning: return ColorEnum.Warning;
+      case Criticity.Error: return ColorEnum.Error;
+      case Criticity.Information: return ColorEnum.Primary;
+      default: return ColorEnum.Light;
+    }
+  },
+  criticityIcon(value: Criticity): string {
+    switch (value) {
+      case Criticity.Warning: return "mdi-alert-outline";
+      case Criticity.Error: return "mdi-alert-circle-outline";
+      default: return "mdi-information-outline";
+    }
+  },
+  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");
+    }
+  }
+}

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";