new selfhosted version

dashboard/components/complex/line-data/selectors/SelectCountry.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Lock } from 'lucide-vue-next'
+
+// Props e emits
+const props = defineProps<{ modelValue?: string }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+// Stato locale del valore selezionato
+const selectedCountryOption = ref(props.modelValue || '')
+
+// Sync locale ↔ parent
+watch(() => props.modelValue, (val) => {
+  if (val !== selectedCountryOption.value) {
+    selectedCountryOption.value = val || ''
+  }
+})
+
+watch(selectedCountryOption, (val) => {
+  emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <Select v-model="selectedCountryOption">
+    <SelectTrigger class="bg-gray-100 dark:bg-black">
+      <SelectValue placeholder="Select a Source" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectItem value="continents">
+          Continents
+        </SelectItem>
+        <SelectItem value="countries">
+          Country
+        </SelectItem>
+        <SelectItem value="regions">
+          Regions
+        </SelectItem>
+        <SelectItem value="cities">
+           City
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

dashboard/components/complex/line-data/selectors/SelectDevice.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// Props e emits
+const props = defineProps<{ modelValue?: string }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+// Stato locale del valore selezionato
+const selectedDeviceOption = ref(props.modelValue || '')
+
+// Sync locale ↔ parent
+watch(() => props.modelValue, (val) => {
+  if (val !== selectedDeviceOption.value) {
+    selectedDeviceOption.value = val || ''
+  }
+})
+
+watch(selectedDeviceOption, (val) => {
+  emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <Select v-model="selectedDeviceOption">
+    <SelectTrigger  class="bg-gray-100 dark:bg-black">
+      <SelectValue placeholder="Select a Source" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectItem value="devices">
+          Devices
+        </SelectItem>
+        <SelectItem value="oss">
+          OS
+        </SelectItem>
+        <SelectItem value="browsers">
+          Browsers
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+

dashboard/components/complex/line-data/selectors/SelectPage.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Lock } from 'lucide-vue-next'
+
+// Props e emits
+const props = defineProps<{ modelValue?: string }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+// Stato locale del valore selezionato
+const selectPageOption = ref(props.modelValue || '')
+
+// Sync locale ↔ parent
+watch(() => props.modelValue, (val) => {
+  if (val !== selectPageOption.value) {
+    selectPageOption.value = val || ''
+  }
+})
+
+watch(selectPageOption, (val) => {
+  emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <Select v-model="selectPageOption">
+    <SelectTrigger  class="bg-gray-100 dark:bg-black">
+      <SelectValue placeholder="Select a Source" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectItem value="pages">
+          Top Pages
+        </SelectItem>
+
+
+        <SelectItem value="pages_entries">
+          Entry Pages
+        </SelectItem>
+       <SelectItem value="pages_exits">
+           Exit Pages
+        </SelectItem> 
+
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

dashboard/components/complex/line-data/selectors/SelectRefer.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Lock } from 'lucide-vue-next'
+
+// Props e emits
+const props = defineProps<{ modelValue?: string }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+// Stato locale del valore selezionato
+const selectedTrafficOption = ref(props.modelValue || '')
+
+export type UtmKey = keyof typeof utmKeysMap;
+
+const utmKeysMap = {
+  'utm_campaign': 'Campaign',
+  'utm_source': 'Source',
+  'utm_medium': 'Medium',
+  'utm_term': 'Term',
+  'utm_content': 'Content'
+}
+
+// Sync locale ↔ parent
+watch(() => props.modelValue, (val) => {
+  if (val !== selectedTrafficOption.value) {
+    selectedTrafficOption.value = val || ''
+  }
+})
+
+watch(selectedTrafficOption, (val) => {
+  emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <Select v-model="selectedTrafficOption">
+    <SelectTrigger class="bg-gray-100 dark:bg-black">
+      <SelectValue placeholder="Select a Source" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Sources</SelectLabel>
+        <SelectItem value="referrers">
+          Referrer
+        </SelectItem>
+        <SelectSeparator />
+        <SelectLabel>UTM</SelectLabel>
+        <SelectItem v-for="(value, key) in utmKeysMap" :value="key">
+          {{ value }}
+        </SelectItem>
+        <!-- <SelectSeparator />
+        <SelectLabel>Custom</SelectLabel>
+        <SelectItem v-if="utm_keys" v-for="key of utm_keys" :value="key._id">
+          {{ key._id.split('_').slice(1).join(' ') }}
+        </SelectItem> -->
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>