@dative-gpi/foundation-shared-components 1.0.126 → 1.0.128-fix-various

package/components/FSFadeOut.vue

@@ -69,7 +69,7 @@ export default defineComponent({
   },
   emits: ["scroll"],
   setup(props) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
@@ -84,14 +84,16 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
+
     const style = computed((): StyleValue => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
-      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
-      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,

package/components/FSWindow.vue

@@ -1,9 +1,10 @@
 <template>
   <template 
-    v-if="noMatch"
+    v-if="showError"
   >
     <slot 
-      name="error" 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
     >
       <FSRow
         padding="16px"
@@ -144,14 +145,18 @@ export default defineComponent({
       }, 560);
     });
 
-    const noMatch = computed(() => {
+    const showError = computed((): boolean => {
       if (!windowRef.value) {
-        return;
+        return false;
       }
 
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
       const group = windowRef.value.group;
+
+      if (!group.items.value.length) {
+        return false;
+      }
       return !group.items.value.find((item: any) => item.value === props.modelValue);
     });
 
@@ -172,7 +177,7 @@ export default defineComponent({
     return {
       ColorEnum,
       windowRef,
-      noMatch,
+      showError,
       slots,
       style,
       getChildren,

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -44,7 +44,7 @@
       name="default"
       :label="label"
       :icon="icon"
-      :iconBis="iconBis"
+      :iconBis="endToday ? iconBis : null"
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
@@ -120,12 +120,20 @@ export default defineComponent({
       return dayEnd.value - props.dayStart;
     });
 
+    const startToday = computed(() => {
+      return props.start >= props.dayStart;
+    });
+
+    const endToday = computed(() => {
+      return props.end <= dayEnd.value;
+    });
+
     const dayDurationOffset = computed(() => {
       return dayDuration.value - dayToMillisecond(1);
     });
 
     const leftPosition = computed(() => {
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         return 0;
       }
       return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
@@ -136,10 +144,10 @@ export default defineComponent({
       let end = props.end - dayDurationOffset.value;
       if(props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
-      } else if (props.end > dayEnd.value) {
+      } else if (!endToday.value) {
         end = dayEnd.value - dayDurationOffset.value;
       }
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         start = props.dayStart;
       }
       
@@ -150,12 +158,14 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       return {
         '--fs-agenda-event-left': `${leftPosition.value}%`,
+        '--fs-agenda-event-border-width': startToday.value ? '3px' : '0px',
       };
     });
 
     return {
       style,
       width,
+      endToday,
       epochToShortTimeOnlyFormat
     };
   }

package/components/calendar/FSSimpleCalendar.vue

@@ -73,7 +73,7 @@ export default defineComponent({
 
     const firstDayOfMonth = computed(() => {
       const date = new Date(props.year, props.month - 1, 1);
-      const offset = getMachineOffset();
+      const offset = getMachineOffset(date.getTime());
 
       date.setTime(date.getTime() + offset);
 
@@ -84,8 +84,7 @@ export default defineComponent({
       const day = new Date(firstDayOfMonth.value);
       
       const date = startOfWeek(day, { weekStartsOn: 1 });
-
-      const offset = getMachineOffset();
+      const offset = getMachineOffset(date.getTime());
 
       date.setTime(date.getTime() + offset);
 
@@ -94,10 +93,9 @@ export default defineComponent({
 
     const endDayOfMonth = computed(() => {
       const day = new Date(firstDayOfMonth.value);
-      
-      const date = endOfMonth(day);
 
-      const offset = getMachineOffset();
+      const date = endOfMonth(day);
+      const offset = getMachineOffset(date.getTime());
 
       date.setTime(date.getTime() + offset);
 
@@ -106,10 +104,9 @@ export default defineComponent({
 
     const lastSunday = computed(() => {
       const day = new Date(endDayOfMonth.value);
-      
-      const date = endOfWeek(day, { weekStartsOn: 1 });
 
-      const offset = getMachineOffset();
+      const date = endOfWeek(day, { weekStartsOn: 1 });
+      const offset = getMachineOffset(date.getTime());
 
       date.setTime(date.getTime() + offset);
 
@@ -143,7 +140,6 @@ export default defineComponent({
       dayLabel,
       days
     };
-    
   }
 });
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.126",
+  "version": "1.0.128-fix-various",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.126",
-    "@dative-gpi/foundation-shared-services": "1.0.126"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-various",
+    "@dative-gpi/foundation-shared-services": "1.0.128-fix-various"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "fa74ceb5e1e68ec7e0cf75fd43bdaf014f0ab552"
+  "gitHead": "90ff20655fc6c49d1c6d8b14435795b4c886b86f"
 }

package/styles/components/fs_agenda_event.scss

@@ -8,7 +8,7 @@
   }
 
   >.fs-card {
-    border-left: solid 3px var(--fs-clickable-border-color) !important;
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
   }
 }
 

package/styles/components/fs_breadcrumbs.scss

@@ -7,8 +7,10 @@
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
-    &:hover {
-        text-decoration: underline;
+    @include clickscreen {
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     &:active {

package/styles/components/fs_button.scss

@@ -2,11 +2,6 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
-    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-        color: var(--fs-button-hover-color) !important;
-        cursor: pointer !important;
-    }
-
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
@@ -16,4 +11,11 @@
         color: inherit;
         text-decoration: none;
     }
+
+    @include clickscreen {
+        &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
+            color: var(--fs-button-hover-color) !important;
+            cursor: pointer !important;
+        }
+    }
 }

package/styles/components/fs_chip.scss

@@ -12,15 +12,17 @@
 .fs-chip-editable {
     cursor: pointer !important;
 
-    &:hover {
-        background-color: var(--fs-chip-hover-background-color) !important;
-        border-color: var(--fs-chip-hover-border-color) !important;
-        color: var(--fs-chip-hover-color) !important;
-    }
-
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
+
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-chip-hover-background-color) !important;
+            border-color: var(--fs-chip-hover-border-color) !important;
+            color: var(--fs-chip-hover-color) !important;
+        }
+    }
 }

package/styles/components/fs_clickable.scss

@@ -11,18 +11,7 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-
-    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-        background-color: var(--fs-clickable-hover-background-color) !important;
-        border-color: var(--fs-clickable-hover-border-color) !important;
-        color: var(--fs-clickable-hover-color) !important;
-
-        & .fs-card-clickable {
-            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            background-color: var(--fs-clickable-hover-background-color);
-        }
-    }
-
+    
     &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
@@ -33,6 +22,19 @@
             background-color: var(--fs-clickable-active-background-color);
         }
     }
+
+    @include clickscreen {
+        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
+            background-color: var(--fs-clickable-hover-background-color) !important;
+            border-color: var(--fs-clickable-hover-border-color) !important;
+            color: var(--fs-clickable-hover-color) !important;
+    
+            & .fs-card-clickable {
+                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: var(--fs-clickable-hover-background-color);
+            }
+        }
+    }
 }
 
 a:has(.fs-clickable) {

package/styles/components/fs_col.scss

@@ -65,6 +65,7 @@
 :not(.fs-col) > .fs-col-width {
     &-fill {
         flex: 1 0 0;
+        min-width: 0;
     }
 
     &-fixed {
@@ -74,7 +75,7 @@
 
 .fs-col > .fs-col-height {
     &-fill {
-        flex: 1 0 0;
+        flex: 1 1 fit-content;
     }
 
     &-fixed {

package/styles/components/fs_data_iterator_item.scss

@@ -8,16 +8,18 @@
         padding-right: 32px;
     }
 
-    &:hover::after {
-        content: "";
-        background-color: black;
-        pointer-events: none;
-        position: absolute;
-        opacity: 0.04;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
+    @include clickscreen {
+        &:hover::after {
+            content: "";
+            background-color: black;
+            pointer-events: none;
+            position: absolute;
+            opacity: 0.04;
+            height: 100%;
+            width: 100%;
+            left: 0;
+            top: 0;
+        }
     }
 }
 

package/styles/components/fs_fade_out.scss

@@ -4,7 +4,6 @@
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     overflow-x: var(--fs-fade-out-x-overflow);
     max-height: var(--fs-fade-out-max-height);
-    min-height: var(--fs-fade-out-height);
     height: var(--fs-fade-out-height);
     padding: var(--fs-fade-out-padding);
 
@@ -12,11 +11,6 @@
     padding-right: calc(var(--fs-fade-out-padding) + var(--fs-fade-out-padding-offset));
     width: calc(var(--fs-fade-out-width) + var(--fs-fade-out-width-offset));
     margin-right: var(--fs-fade-out-margin-right);
-
-
-    flex-direction: column;
-    position: relative;
-    display: flex;
     
     mask:
         linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color)) 0 (0 / calc(100% - 8px)) var(--fs-fade-out-top-mask-height), 

package/styles/components/fs_image_card.scss

@@ -11,8 +11,10 @@
   }
 }
 
-.fs-image-card:hover {
-  > .fs-card {
-    background-size: 105%;
+@include clickscreen {
+  .fs-image-card:hover {
+    > .fs-card {
+      background-size: 105%;
+    }
   }
 }

package/styles/components/fs_map.scss

@@ -92,11 +92,13 @@
     align-items: center;
     justify-content: center;
 
-    &:hover {
-      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-
-      > * {
-        transform: scale(1.15);
+    @include clickscreen {
+      &:hover {
+        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+  
+        > * {
+          transform: scale(1.15);
+        }
       }
     }
   }
@@ -128,8 +130,10 @@
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-      opacity: 1;
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }

package/styles/components/fs_password_field.scss

@@ -4,7 +4,9 @@
     color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-        color: var(--fs-password-field-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            color: var(--fs-password-field-hover-color) !important;
+        }
     }
 }

package/styles/components/fs_row.scss

@@ -55,6 +55,7 @@
 :not(.fs-col) > .fs-row-width {
     &-fill {
         flex: 1 0 0;
+        min-width: 0;
     }
 
     &-fixed {
@@ -85,7 +86,7 @@
 
 .fs-col > .fs-row-height {
     &-fill {
-        flex: 1 0 0;
+        flex: 1 1 fit-content;
     }
 
     &-fixed {

package/styles/components/fs_span.scss

@@ -1,6 +1,7 @@
 .fs-span {
     max-width: 100%;
     text-align: left;
+    min-height: fit-content;
 }
 
 .fs-span-line-clamp {

package/styles/components/fs_tabs.scss

@@ -23,9 +23,11 @@
         @extend .text-button;
     }
 
-    &:hover {
-        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-        color: var(--fs-group-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+            color: var(--fs-group-hover-color) !important;
+        }
     }
 }
 
@@ -34,8 +36,10 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    &:hover {
-        border-bottom: 0 !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 0 !important;
+        }
     }
 }
 

package/styles/components/fs_tag.scss

@@ -13,17 +13,19 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    &:hover {
-        background-color: var(--fs-tag-hover-background-color) !important;
-        color: var(--fs-tag-hover-color) !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    min-width: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-tag-hover-background-color) !important;
+            color: var(--fs-tag-hover-color) !important;
+        }
+    }
 }

package/styles/globals/overrides.scss

@@ -137,11 +137,16 @@
     }
 }
 
-// Ellipsis on input of all fields
 input {
+    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
+input, select, textarea {
+    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
+    touch-action: none;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -187,9 +192,11 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-.v-slide-group__prev:hover,
-.v-slide-group__next:hover {
-    color: var(--fs-group-hover-color);
+@include clickscreen {
+    .v-slide-group__prev:hover,
+    .v-slide-group__next:hover {
+        color: var(--fs-group-hover-color);
+    }
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,9 +47,19 @@
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 }

package/tools/chartsTools.ts

@@ -39,10 +39,10 @@ export const colorSetLabel = (value: ColorSets | number): string => {
   switch (value) {
     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.Armytage: return $tr("ui.color-sets.armytage", "High contrast (26 colors)");
     case ColorSets.Hash: return $tr("ui.color-sets.hash", "Hash");
-    case ColorSets.Kelly: return $tr("ui.color-sets.material", "Kelly");
-    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.material", "ZeileisHornikMurrell");
+    case ColorSets.Kelly: return $tr("ui.color-sets.kelly", "High contrast (22 colors)");
+    case ColorSets.ZeileisHornikMurrell: return $tr("ui.color-sets.zeileis", "Colorblind accessible");
     default: return $tr("ui.common.none", "None");
   }
 }

package/utils/time.ts

@@ -5,13 +5,13 @@ import { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums"
 const { $tr } = useTranslationsProvider();
 
 export const timeSteps = [
-  { id: TimeUnit.Second,      label: $tr("ui.common.second", "Second"), plural: $tr("ui.common.seconds", "Seconds") },
-  { id: TimeUnit.Minute,      label: $tr("ui.common.minute", "Minute"), plural: $tr("ui.common.minutes", "Minutes") },
-  { id: TimeUnit.Hour,        label: $tr("ui.common.hour", "Hour"),     plural: $tr("ui.common.hours", "Hours") },
-  { id: TimeUnit.Day,         label: $tr("ui.common.day", "Day"),       plural: $tr("ui.common.days", "Days") },
-  { id: TimeUnit.Week,        label: $tr("ui.common.week", "Week"),     plural: $tr("ui.common.weeks", "Weeks") },
-  { id: TimeUnit.Month,       label: $tr("ui.common.month", "Month"),   plural: $tr("ui.common.months", "Months") },
-  { id: TimeUnit.Year,        label: $tr("ui.common.year", "Year"),     plural: $tr("ui.common.years", "Years") },
+  { id: TimeUnit.Second, get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: TimeUnit.Minute, get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: TimeUnit.Hour,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: TimeUnit.Day,    get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: TimeUnit.Week,   get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
+  { id: TimeUnit.Month,  get label() { return $tr("ui.common.month", "Month") },   get plural() { return $tr("ui.common.months", "Months") } },
+  { id: TimeUnit.Year,   get label() { return $tr("ui.common.year", "Year") },     get plural() { return $tr("ui.common.years", "Years") } },
 ];
 
 export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
@@ -28,12 +28,12 @@ export const timeStepToString = (value: { value: number, unit: TimeUnit } | null
 };
 
 // TODO : remove everything below this line
-export const timeScale: any[] = [
-  { id: 1,      label: $tr("ui.common.second", "Second"), plural: $tr("ui.common.seconds", "Seconds") },
-  { id: 60,     label: $tr("ui.common.minute", "Minute"), plural: $tr("ui.common.minutes", "Minutes") },
-  { id: 3600,   label: $tr("ui.common.hour", "Hour"),     plural: $tr("ui.common.hours", "Hours") },
-  { id: 86400,  label: $tr("ui.common.day", "Day"),       plural: $tr("ui.common.days", "Days") },
-  { id: 604800, label: $tr("ui.common.week", "Week"),     plural: $tr("ui.common.weeks", "Weeks") },
+export const timeScale = [
+  { id: 1,      get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: 60,     get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: 3600,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: 86400,  get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: 604800, get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
 ];
 
 export const getTimeScaleIndex = (value: number): number => {

package/components/tiles/FSChartTile.vue

@@ -1,73 +0,0 @@
-<template>
-  <FSChartTileUI
-    v-if="chart"
-    :label="chart.label"
-    :icon="chart.icon"
-    :type="chart.chartType"
-    :imageId="chart.imageId"
-    v-bind="$attrs"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, computed } from "vue";
-import type { PropType } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
-
-import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
-
-import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
-import FSChartTileUI from "./FSChartTileUI.vue";
-
-export default defineComponent({
-  name: "FSChartTile",
-  components: {
-    FSChartTileUI
-  },
-  props: {
-    chartId: {
-      type: String,
-      required: true
-    },
-    scope: {
-      type: Object as PropType<ApplicationScope | number>,
-      required : true
-    }
-  },
-  setup(props) {
-
-    const {get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
-    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
-
-    const chart = computed(() =>{
-      if(props.scope == ApplicationScope.Organisation){
-        return chartOrganisation.value;
-      }
-      else if(props.scope == ApplicationScope.OrganisationType){
-        return chartOrganisationType.value;
-      }
-      else{
-        return null
-      }
-    })
-
-    watch(() => [props.chartId, props.scope], () =>{
-      if(props.scope == ApplicationScope.Organisation){
-        fetchChartOrganisation(props.chartId);
-      }
-      else if(props.scope == ApplicationScope.OrganisationType)
-      {
-        fetchChartOrganisationType(props.chartId)
-      }
-    }, {immediate : true})
-
-    return {
-      ColorEnum,
-      chart,
-      chartIcon
-    };
-  }
-});
-</script>