@dative-gpi/foundation-core-components 0.0.220 → 0.0.222

package/components/selects/FSAggregationSelector.vue

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

package/components/selects/FSAxisTypeSelector.vue

@@ -0,0 +1,47 @@
+<template>
+  <FSToggleSet
+    :hideHeader="true"
+    :values="axisTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import  {AxisType} from "@dative-gpi/foundation-core-domain/models";
+
+import {axisTypeLabel, getEnumEntries} from "../../utils";
+
+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/FSDataCategorySelector.vue

@@ -0,0 +1,61 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.data-category', 'Data category')"
+    :items="toggleDataCategories"
+    :modelValue="modelValue"
+    :toggleSet="toggleDataCategories.length < 5"
+    @update:modelValue="$emit('update:modelValue', $event);"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, watch } from "vue";
+
+import {useDataCategories} from "@dative-gpi/foundation-core-services/composables";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    modelValue: {
+      type: String,
+      required: false
+    },
+    modelId: {
+      type: String,
+      required: false,
+    },
+    label: {
+      type: String,
+      required: false
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props) {
+    const {getMany : fetchdataCategories, entities : dataCategories} = useDataCategories()
+
+    const toggleDataCategories = computed(()=>{
+      return dataCategories.value.map((d) => {
+        return {
+          id: d.id,
+          label: d.label
+        }
+      })
+    })
+
+    watch(() => props.modelId, () => {
+      fetchdataCategories({modelId: props.modelId})
+    }, {immediate: true})
+
+
+    return {
+      toggleDataCategories,
+      dataCategories
+    }
+  }
+})
+
+</script>

package/components/selects/FSDataDefinitionSelector.vue

@@ -0,0 +1,65 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.data-definition', 'Data')"
+    :items="toggleDataDefinitions"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, watch } from "vue";
+
+import {useDataDefinitions} from "@dative-gpi/foundation-core-services/composables";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    modelValue: {
+      type: String,
+      required: false
+    },
+    modelId: {
+      type: String,
+      required: false,
+    },
+    dataCategoryId: {
+      type: String,
+      required: false,
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    
+  },
+  emits: ['update:modelValue'],
+  setup(props) {
+
+    const {getMany : fetchDataDefinitions, entities : dataDefinitions} = useDataDefinitions()
+
+    const toggleDataDefinitions = computed(()=>{
+      return dataDefinitions.value.map((d) => {
+        return {
+          id: d.id,
+          label: d.label
+        }
+      })
+    })
+
+    watch(() => [props.modelId, props.dataCategoryId], async () => {
+      await fetchDataDefinitions({modelsIds: props.modelId ? [props.modelId] : undefined, dataCategoryId: props.dataCategoryId})
+    }, {immediate: true})
+
+    return {
+      toggleDataDefinitions,
+      dataDefinitions
+    }
+  }
+})
+
+</script>

package/components/selects/FSDisplayAsSelector.vue

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

package/components/selects/FSFilterTypeSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.filter-type','Filter type')"
+    :toggleSet="true"
+    :items="filterTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {FilterType} from "@dative-gpi/foundation-core-domain/models";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+import {filterTypeLabel, getEnumEntries} from "../../utils";
+
+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).map((f)=>{
+        return {
+          id: f.value,
+          label: filterTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      filterTypeItems
+    }
+  }
+})
+</script>

package/components/selects/FSHeatmapRuleSelector.vue

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

package/components/selects/FSModelSelector.vue

@@ -0,0 +1,55 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.model', 'Model')"
+    :items="modelItems"
+    :toggleSet="modelItems.length < 5"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted } from "vue";
+
+import {useModels} from "@dative-gpi/foundation-core-services/composables";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    modelValue: {
+      type: String,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(){
+    const {getMany : fetchModels, entities : models} = useModels()
+
+    const modelItems = computed(()=>{
+      return models.value.map((d) => {
+        return {
+          id: d.id,
+          label: d.label
+        }
+      })
+    })
+
+    onMounted(() => {
+      fetchModels()
+    })
+
+    return {
+      modelItems,
+    }
+  }
+})
+
+</script>

package/components/selects/FSOperationOnSelector.vue

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

package/components/selects/FSPlanningTypeSelector.vue

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

package/components/selects/FSPlotPerSelector.vue

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

package/components/selects/FSSerieTypeSelector.vue

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "0.0.220",
+  "version": "0.0.222",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "0.0.220",
-    "@dative-gpi/foundation-core-services": "0.0.220",
-    "@dative-gpi/foundation-shared-components": "0.0.220",
-    "@dative-gpi/foundation-shared-domain": "0.0.220",
-    "@dative-gpi/foundation-shared-services": "0.0.220"
+    "@dative-gpi/foundation-core-domain": "0.0.222",
+    "@dative-gpi/foundation-core-services": "0.0.222",
+    "@dative-gpi/foundation-shared-components": "0.0.222",
+    "@dative-gpi/foundation-shared-domain": "0.0.222",
+    "@dative-gpi/foundation-shared-services": "0.0.222"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -26,5 +26,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "5386c0eed28a035ac9da6a8a00ba7681bc86f942"
+  "gitHead": "84398c44d065b454974c48e07f494d6e2c73690a"
 }

package/utils/charts.ts

@@ -1,7 +1,6 @@
+import { AggregationType, AxisType, ChartOrigin, DisplayAs, FilterType, HeatmapRule, OperationOn, PlanningType, PlotPer, SerieType } from "@dative-gpi/foundation-core-domain/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { ChartOrigin } from "@dative-gpi/foundation-core-domain/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 const { $tr } = useTranslationsProvider();
 
@@ -19,4 +18,119 @@ export const chartOriginColor = (type: ChartOrigin): ColorBase => {
     case ChartOrigin.Organisation:     return ColorEnum.Primary;
     case ChartOrigin.OrganisationType: return ColorEnum.Warning;
   }
+};
+
+export const aggregationTypeLabel = (aggregationType : AggregationType): string => {
+  switch (aggregationType) {
+    case AggregationType.Sum:        return $tr("ui.common.sum", "Sum");
+    case AggregationType.Cardinal:   return $tr("ui.common.cardinal", "Cardinal");
+    case AggregationType.Mean:       return $tr("ui.common.cean", "Mean");
+    case AggregationType.Median:     return $tr("ui.common.median", "Median");
+    case AggregationType.First:      return $tr("ui.common.first", "First");
+    case AggregationType.Last:       return $tr("ui.common.last", "Last");
+    case AggregationType.Difference: return $tr("ui.common.difference", "Difference");
+    case AggregationType.Minimum:    return $tr("ui.common.minimum", "Minimum");
+    case AggregationType.Maximum:    return $tr("ui.common.maximum", "Maximum");
+    case AggregationType.Range:      return $tr("ui.common.range", "Range");
+    default :                        return $tr("ui.common.none", "None");
+  }
+};
+
+export const axisTypeLabel = (axisType: AxisType | number): string => {
+  switch (axisType) {
+    case AxisType.Date:     return $tr("ui.common.date", "Date");
+    case AxisType.Value:    return $tr("ui.common.value", "Value");
+    case AxisType.Category: return $tr("ui.common.category", "Category");
+    default:                return $tr("ui.common.none", "None");
+  }
+};
+
+export const displayAsLabel = (display: DisplayAs | number): string => {
+  switch (display) {
+    case DisplayAs.Bars:   return $tr("ui.common.bars", "Bars");
+    case DisplayAs.Lines:  return $tr("ui.common.lines", "Lines");
+    case DisplayAs.Points: return $tr("ui.common.point", "Points");
+    default:               return $tr("ui.common.none", "None");
+  }
+};
+
+export const filterTypeLabel = (filterType: FilterType | number): string => {
+  switch (filterType) {
+    case FilterType.Contains:    return $tr("ui.common.contains", "contains");
+    case FilterType.Different:   return "≠";
+    case FilterType.EndsWith:    return $tr("ui.common.end-width", "end 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.common.starts-with", "start with");
+    default:                     return $tr("ui.common.none", "None");
+  }
+};
+
+export const heatmapRuleLabel = (heatMap: HeatmapRule | number): string => {
+  switch (heatMap) {
+    case HeatmapRule.Gradient: return $tr("ui.common.gradient", "Gradient");
+    case HeatmapRule.Ranges:   return $tr("ui.common.ranges", "Ranges");
+    case HeatmapRule.Fixed :   return $tr("ui.common.fixed", "Fixed");
+    default:                   return $tr("ui.common.none", "None");
+  }
+};
+
+export const operationOnLabel = (operationOn: OperationOn | number): string => {
+  switch (operationOn) {
+    case OperationOn.SameEntity:         return $tr("ui.common.same-entity", "Same entity");
+    case OperationOn.SameGroup:          return $tr("ui.common.same-group", "Same group");
+    case OperationOn.SameGroupAndEntity: return $tr("ui.common.same-group-entity", "Same group and entity");
+    default:                             return $tr("ui.common.none", "None");
+  }
+};
+
+export const planningTypeLabel = (planningType : PlanningType | number): string => {
+  switch (planningType) {
+    case PlanningType.UntilNext:          return $tr("ui.common.until-next", "Until next");
+    case PlanningType.ElapsedTime:        return $tr("ui.common.elapsed-time", "Elapsed time");
+    case PlanningType.SinglePoint:        return $tr("ui.common.single-point", "Single point");
+    default:                              return $tr("ui.common.none", "None");
+  }
+};
+
+export const plotPerLabel = (plotper: PlotPer | number): string => {
+  switch (plotper) {
+    case PlotPer.SinglePlot: return $tr("ui.common.single-slot", "Single slot");
+    case PlotPer.Model:      return $tr("ui.common.model", "Model");
+    case PlotPer.Group:      return $tr("ui.common.group", "Group");
+    case PlotPer.Location:   return $tr("ui.common.location", "Location");
+    case PlotPer.Device:     return $tr("ui.common.device", "Device");
+    default:                 return $tr("ui.common.none", "None");
+  }
+};
+
+export const serieTypeLabel = (serieType : SerieType): string => {
+  switch (serieType) {
+    case SerieType.Lines:       return $tr("ui.common.lines", "Lines");
+    case SerieType.Area:        return $tr("ui.common.area", "Area");
+    case SerieType.Range:       return $tr("ui.common.range", "Range");
+    case SerieType.Histogram:   return $tr("ui.common.histogram", "Histogram");
+    case SerieType.Operation:   return $tr("ui.common.operation", "Operation");
+    case SerieType.Planning:    return $tr("ui.common.planning", "Planning");
+    case SerieType.ScatterPlot: return $tr("ui.common.scatter-plot", "Scatter plot");
+    case SerieType.Top:         return $tr("ui.common.top", "Top");
+    case SerieType.Bars:        return $tr("ui.common.bars", "Bars");
+    case SerieType.StackedBars: return $tr("ui.common.stacked-bars", "Stacked bars");
+    case SerieType.Pie:         return $tr("ui.common.pie", "Pie");
+    case SerieType.Heatmap:     return $tr('ui.common.heatmap', 'Heatmap');
+    case SerieType.Slider:      return $tr("ui.common.slider", "Slider");
+    case SerieType.Gauge:       return $tr("ui.common.gauge", "Gauge");
+    case SerieType.ScoreCard:   return $tr("ui.common.score-card", "Score card");
+    case SerieType.Table:       return $tr("ui.common.table", "Table");
+    default:                    return "";
+  }
+};
+
+export const getEnumEntries = (e: any) => {
+  return Object.keys(e)
+    .filter(key => isNaN(Number(key)))
+    .map(key => ({key : key, value : e[key]}));
 };