@mixd-id/web-scaffold 0.1.240411124 → 0.1.240411126

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411124",
+  "version": "0.1.240411126",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -33,6 +33,7 @@
     "./listpage1": "./src/utils/listpage1.js",
     "./dashboard": "./src/utils/dashboard.js",
     "./ai-dashboard": "./src/utils/ai-dashboard.js",
+    "./ai-dashboard-query": "./src/utils/ai-dashboard-query.js",
     "./ai-dashboard-chat": "./src/utils/ai-dashboard-chat.mjs",
     "./ai-dashboard-views": {
       "import": "./src/utils/ai-dashboard-views.mjs"

package/src/components/AIDashboard.vue

@@ -11,7 +11,10 @@
           <!-- Host controls left of the title, e.g. a "show dashboards" toggle -->
           <slot name="before-title" />
           <div class="flex-1 min-w-0">
-            <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+            <div class="flex flex-row items-center gap-2 min-w-0">
+              <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+              <span v-if="readonly && activeItem" class="shrink-0 text-[11px] px-2 py-0.5 rounded-full bg-text-50 text-text-400">View only</span>
+            </div>
             <p v-if="activeItem?.props?.description" class="mt-1 text-sm text-text-300 line-clamp-2 max-w-[420px]">{{ activeItem.props.description }}</p>
           </div>
         </div>
@@ -81,14 +84,7 @@
 
       <div class="border-b-[1px] border-text-50 flex flex-row gap-4 items-start">
         <div class="flex-1 min-w-0 overflow-x-auto px-3 pt-3" :class="mobile ? 'px-6' : 'pt-6'">
-          <Tabs :items="[
-          { text: 'Views', value: 'views' },
-          { text: 'Filters', value: 'filters' },
-          { text: 'Datasource', value: 'datasource' },
-          { text: 'AI Assistant', value: 'chat' },
-          ...(connected ? [ { text: 'Sharing', value: 'sharing' } ] : []),
-          { text: 'Settings', value: 'settings' },
-        ]" v-model="config.params.rightTab" />
+          <Tabs :items="tabs" v-model="config.params.rightTab" />
         </div>
         <div v-if="mobile" class="shrink-0 flex flex-row items-center">
           <button type="button" class="py-5 px-2 text-text-300 hover:text-primary" :title="mobilePanelTall ? 'Shrink panel' : 'Expand panel'"
@@ -280,19 +276,19 @@
           <div v-else-if="sharing.error && !sharing.owner" class="text-red-600 text-sm text-center py-6">{{ sharing.error }}</div>
           <template v-else>
             <div v-if="sharing.canManage" class="flex flex-col gap-1">
-              <Textbox v-model="sharing.search" placeholder="Add people by name or email" />
+              <Textbox v-model="sharing.search" placeholder="Add people by name or code" />
               <div v-if="sharing.search.trim()" class="rounded-lg border-[1px] border-text-50 bg-base-400 p-1 flex flex-col">
+                <div v-if="sharing.search.trim().length < SEARCH_MIN_LENGTH" class="text-text-400 text-xs p-2">Type at least {{ SEARCH_MIN_LENGTH }} characters.</div>
+                <template v-else>
                 <button v-for="user in sharing.results.filter(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" :key="user.id"
-                        type="button" class="flex flex-row items-center gap-2 p-2 rounded-md text-left hover:bg-base-500"
+                        type="button" class="flex flex-row items-center gap-2 px-2 py-1.5 rounded-md text-left hover:bg-base-500"
                         @click="shareWith(user)">
-                  <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                  <div class="flex-1 min-w-0">
-                    <div class="text-sm truncate">{{ user.name }}</div>
-                    <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                  </div>
+                  <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                  <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                   <span class="text-xs text-primary shrink-0">Share</span>
                 </button>
                 <div v-if="!sharing.results.some(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" class="text-text-400 text-xs p-2">No one found.</div>
+                </template>
               </div>
               <div v-if="sharing.error" class="text-red-600 text-xs">{{ sharing.error }}</div>
             </div>
@@ -300,16 +296,21 @@
             <div class="flex flex-col gap-1">
               <label class="text-xs text-text-400">Who has access</label>
               <div v-for="user in [ ...(sharing.owner ? [ sharing.owner ] : []), ...sharing.users ]" :key="user.id"
-                   class="flex flex-row items-center gap-2 p-2 rounded-lg bg-base-400">
-                <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                <div class="flex-1 min-w-0">
-                  <div class="text-sm truncate">{{ user.name }}</div>
-                  <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                </div>
+                   class="flex flex-row items-center gap-2 px-2 py-1 rounded-lg bg-base-400">
+                <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                 <span v-if="user.id === sharing.owner?.id" class="text-[11px] text-text-400 shrink-0">Owner</span>
-                <button v-else-if="sharing.canManage" type="button" class="p-1 text-text-300 hover:text-red-600 shrink-0" title="Stop sharing" @click="unshareWith(user)">
-                  <svg width="11" height="11" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+                <!-- Access as an icon; the owner clicks it for a menu to change or remove it -->
+                <button v-else-if="sharing.canManage" type="button"
+                        class="shrink-0 flex flex-row items-center gap-0.5 p-1.5 rounded-md text-text-400 hover:bg-base-500 hover:text-text-600"
+                        v-tooltip.bottom="shareAccess(user.access).text"
+                        @click="accessMenu.open($event.currentTarget, { user })">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                  <svg width="8" height="8" class="fill-current opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
                 </button>
+                <span v-else class="shrink-0 p-1.5 text-text-400" v-tooltip.bottom="shareAccess(user.access).text">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                </span>
               </div>
               <div v-if="!sharing.users.length" class="text-text-400 text-xs px-1 pt-1">Not shared with anyone yet.</div>
             </div>
@@ -415,6 +416,22 @@
         </template>
       </LLMChat>
 
+      <ContextMenu ref="accessMenu" position="bottom-right">
+        <template #default="{ context }">
+          <div v-if="context?.user" class="flex flex-col min-w-[160px] p-1 py-2">
+            <button v-for="opt in SHARE_ACCESS" :key="opt.value" type="button"
+                    class="w-full p-2 rounded-md text-left px-3 menu-item flex flex-row items-center gap-2"
+                    @click="accessMenu.close(); opt.value !== shareAccess(context.user.access).value && shareWith(context.user, opt.value)">
+              <svg width="13" height="13" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" :viewBox="opt.box"><path :d="opt.path"/></svg>
+              <span class="flex-1">{{ opt.text }}</span>
+              <svg v-if="opt.value === shareAccess(context.user.access).value" width="11" height="11" class="fill-primary shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            </button>
+            <div class="my-1 border-t-[1px] border-text-50" />
+            <button type="button" class="w-full p-2 rounded-md text-left px-3 menu-item text-red-600" @click="accessMenu.close(); unshareWith(context.user)">Remove access</button>
+          </div>
+        </template>
+      </ContextMenu>
+
       <ContextMenu ref="viewMenu" position="bottom-right">
         <template #default="{ context }">
           <div class="flex flex-col min-w-[160px] p-1 py-2">
@@ -770,15 +787,20 @@ import AIDashboardFilterSetting from './AIDashboardFilterSetting.vue'
 //     `${controller}.load-dashboard` hydrates node.data from datasources and
 //     `${controller}.ai-chat` drives the assistant. `datasources` describes the
 //     query-builder options: { [key]: { label, fields: [{ key, label }] } }.
-const { controller, socket, config, datasources } = defineProps({
+const { controller, socket, config, datasources, readonly } = defineProps({
   controller: { type: String, default: '' },
   socket: { type: Object, default: null },
   config: { type: Object, required: true },
   datasources: { type: [ Object, Array ], default: () => ({}) },
+  // View-only: the dashboard can be looked at, filtered and reloaded, but its
+  // components, datasource, assistant and settings are hidden. The host is
+  // expected not to save the item while this is set.
+  readonly: { type: Boolean, default: false },
 })
 
 const addMenu = useTemplateRef('addMenu')
 const viewMenu = useTemplateRef('viewMenu')
+const accessMenu = useTemplateRef('accessMenu')
 const renameCard = useTemplateRef('renameCard')
 const dsCard = useTemplateRef('dsCard')
 const dashboardFilters = useTemplateRef('dashboardFilters')
@@ -900,6 +922,18 @@ const panelOpen = computed({
 if (config.params.inspectorHeight == null) config.params.inspectorHeight = 300
 if (config.params.rightTab === 'data') config.params.rightTab = 'datasource'
 if (![ 'views', 'filters', 'datasource', 'chat', 'sharing', 'settings' ].includes(config.params.rightTab)) config.params.rightTab = 'views'
+
+const tabs = computed(() => [
+  ...(readonly ? [] : [ { text: 'Views', value: 'views' } ]),
+  { text: 'Filters', value: 'filters' },
+  ...(readonly ? [] : [ { text: 'Datasource', value: 'datasource' }, { text: 'AI Assistant', value: 'chat' } ]),
+  ...(connected.value ? [ { text: 'Sharing', value: 'sharing' } ] : []),
+  ...(readonly ? [] : [ { text: 'Settings', value: 'settings' } ]),
+])
+// A view-only dashboard keeps the panel on a tab it still shows.
+watch(() => [ readonly, config.params.rightTab ], () => {
+  if (readonly && !tabs.value.some(tab => tab.value === config.params.rightTab)) config.params.rightTab = 'filters'
+}, { immediate: true })
 if (!Array.isArray(config.items)) config.items = []
 config.items.forEach(normalizeItem)
 
@@ -1746,7 +1780,7 @@ function getChatContext() {
 
 const chatFocus = computed(() => selectedNode.value)
 
-const focusable = computed(() => panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
+const focusable = computed(() => !readonly && panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
 
 function pickFocus(e, node) {
   if (!focusable.value || e.target.closest('button, canvas, [data-breakdown] td, [data-map] [data-point], [data-map][data-dragging]')) return
@@ -1756,7 +1790,7 @@ function pickFocus(e, node) {
 }
 
 function focusClass(node) {
-  if (!panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
+  if (readonly || !panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
   return selectedNode.value === node ? 'cursor-pointer ring-2 ring-primary' : 'cursor-pointer hover:ring-1 hover:ring-text-200'
 }
 
@@ -1917,12 +1951,12 @@ watch(() => [ activeItem.value?.uid, JSON.stringify((activeItem.value?.props?.fi
 })
 watch(activeUid, () => { selectedNode.value = null; updatedAt.value = null; if (connected.value) hydrateActive() })
 
-const sharing = ref({ uid: null, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] })
+const sharing = ref({ uid: null, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] })
 
 async function loadSharing() {
   const uid = activeItem.value?.uid
   if (!connected.value || !uid) return
-  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] }
+  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] }
   try {
     const res = await socket.send(`${controller}.load-sharing`, { uid })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, loaded: true, error: null }
@@ -1936,9 +1970,11 @@ watch(() => [ config.params.rightTab, activeItem.value?.uid ], () => {
 }, { immediate: true })
 
 let searchTimer = null
+// Matches the server's minimum; shorter input clears the results.
+const SEARCH_MIN_LENGTH = 3
 watch(() => sharing.value.search, (search) => {
   clearTimeout(searchTimer)
-  if (!search?.trim()) return
+  if ((search?.trim().length ?? 0) < SEARCH_MIN_LENGTH) { sharing.value.results = []; return }
   searchTimer = setTimeout(async () => {
     try {
       const res = await socket.send(`${controller}.search-users`, { search })
@@ -1949,10 +1985,19 @@ watch(() => sharing.value.search, (search) => {
   }, 250)
 })
 
-async function shareWith(user) {
+const SHARE_ACCESS = [
+  { value: 'view', text: 'Can view', box: '0 0 576 512', path: 'M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z' },
+  { value: 'edit', text: 'Can edit', box: '0 0 512 512', path: 'M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z' },
+]
+// Anything but 'edit' reads as view, as on the server.
+const shareAccess = (access) => SHARE_ACCESS.find(opt => opt.value === access) ?? SHARE_ACCESS[0]
+
+// Shares as view-only by default; sharing an existing person again with
+// another `access` changes theirs.
+async function shareWith(user, access = 'view') {
   const uid = sharing.value.uid
   try {
-    const res = await socket.send(`${controller}.share`, { uid, userId: user.id })
+    const res = await socket.send(`${controller}.share`, { uid, userId: user.id, access })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, error: null, search: '', results: [] }
   } catch (e) {
     sharing.value.error = e?.message ?? `${e}`

package/src/components/AIDashboardChart.vue

@@ -165,9 +165,13 @@ export default {
 
       const nested = (kind === 'pie' || kind === 'doughnut') && this.data.nested && typeof this.data.nested === 'object' ? this.data.nested : null
       let rows = this.rows.map(r => ({ label: `${r.label}`, value: Number(r.value) || 0, other: !!r.other }))
+      // Past eight slices the rest is folded into Other, or left out with `groupOther: false`.
+      if(round && query.groupOther === false) rows = rows.filter(r => !r.other)
       if(round && rows.length > 8){
-        const top = [ ...rows ].sort((a, b) => b.value - a.value).slice(0, 7)
-        rows = [ ...top, { label: 'Other', value: rows.reduce((sum, r) => sum + r.value, 0) - top.reduce((sum, r) => sum + r.value, 0), other: true } ]
+        const sorted = [ ...rows ].sort((a, b) => b.value - a.value)
+        const top = sorted.slice(0, query.groupOther === false ? 8 : 7)
+        rows = query.groupOther === false ? top
+          : [ ...top, { label: 'Other', value: rows.reduce((sum, r) => sum + r.value, 0) - top.reduce((sum, r) => sum + r.value, 0), other: true } ]
       }
       const stacks = round ? [] : this.stacks
       const stacked = stacks.length > 0

package/src/components/AIDashboardChartSetting.vue

@@ -24,7 +24,7 @@
     <div class="flex flex-row gap-2">
       <div class="flex-1 min-w-0">
         <label class="text-xs text-text-400">Chart</label>
-        <Dropdown :model-value="node.chart || 'bar'" @update:model-value="node.chart = $event; $emit('change')">
+        <Dropdown :model-value="node.chart || 'bar'" @update:model-value="setChart($event)">
           <option value="bar">Bar</option>
           <option value="line">Line</option>
           <option value="pie">Pie</option>
@@ -135,24 +135,24 @@
         </Checkbox>
       </div>
 
-      <div v-if="!measurable">
-        <label class="text-xs text-text-400">Aggregation</label>
-        <Dropdown v-model="query.aggregation" @change="$emit('change')">
-          <option v-for="a in aggregations" :key="a" :value="a">{{ aggLabel(a) }}</option>
-        </Dropdown>
-      </div>
-
-      <template v-if="!measurable && query.aggregation && query.aggregation !== 'count'">
-        <div>
-          <label class="text-xs text-text-400">Field</label>
-          <Dropdown v-model="query.field" @change="$emit('change')">
-            <option value="">— select —</option>
-            <option v-for="f in aggFields" :key="f.key" :value="f.key">{{ f.label }}</option>
+      <template v-if="node.chart === 'map'">
+        <div v-if="!measurable">
+          <label class="text-xs text-text-400">Aggregation</label>
+          <Dropdown v-model="query.aggregation" @change="$emit('change')">
+            <option v-for="a in aggregations" :key="a" :value="a">{{ aggLabel(a) }}</option>
           </Dropdown>
         </div>
-      </template>
 
-      <template v-if="node.chart === 'map'">
+        <template v-if="!measurable && query.aggregation && query.aggregation !== 'count'">
+          <div>
+            <label class="text-xs text-text-400">Field</label>
+            <Dropdown v-model="query.field" @change="$emit('change')">
+              <option value="">— select —</option>
+              <option v-for="f in aggFields" :key="f.key" :value="f.key">{{ f.label }}</option>
+            </Dropdown>
+          </div>
+        </template>
+
         <div>
           <label class="text-xs text-text-400">Location from</label>
           <Dropdown :model-value="'latField' in query ? 'coords' : 'name'" @update:model-value="setLocation">
@@ -197,6 +197,12 @@
           <div class="flex-1 min-w-0">
             <div class="flex flex-row items-center h-5">
               <label class="flex-1 min-w-0 truncate text-xs text-text-400">{{ axisLabels?.group ?? 'Group by' }}</label>
+              <label v-if="[ 'pie', 'doughnut', 'polarArea' ].includes(node.chart)" class="flex flex-row items-center gap-1 text-xs text-text-300 cursor-pointer"
+                     title="Past eight groups, fold the rest into one Other slice">
+                <input type="checkbox" class="w-3 h-3 accent-primary cursor-pointer" :checked="query.groupOther !== false"
+                       @change="$event.target.checked ? delete query.groupOther : query.groupOther = false; $emit('change')" />
+                Other
+              </label>
             </div>
             <Dropdown v-model="query.groupBy" @change="groupType !== 'date' && (query.dateModifier = '', delete query.weekOfMonth); groupType !== 'number' && delete query.bucketSize; $emit('change')">
               <option value="">— select —</option>
@@ -230,7 +236,7 @@
             </Dropdown>
           </div>
 
-          <div v-if="groupType === 'number'" class="flex-1 min-w-0">
+          <div v-if="groupType === 'number' && ![ 'pie', 'doughnut', 'polarArea' ].includes(node.chart)" class="w-[90px]">
             <div class="flex flex-row items-center h-5">
               <label class="flex-1 min-w-0 truncate text-xs text-text-400">Range size</label>
               <label v-if="query.bucketSize" class="flex flex-row items-center gap-1 text-xs text-text-300 cursor-pointer" title="Show empty buckets">
@@ -239,10 +245,27 @@
                 Empty
               </label>
             </div>
-            <Textbox v-model.number="query.bucketSize" type="tel" item-class="text-right" placeholder="Exact values" @change="$emit('change')" />
+            <Textbox v-model.number="query.bucketSize" type="tel" item-class="text-right" placeholder="" @change="$emit('change')" />
           </div>
         </div>
 
+        <div v-if="!measurable">
+          <label class="text-xs text-text-400">Aggregation</label>
+          <Dropdown v-model="query.aggregation" @change="$emit('change')">
+            <option v-for="a in aggregations" :key="a" :value="a">{{ aggLabel(a) }}</option>
+          </Dropdown>
+        </div>
+
+        <template v-if="!measurable && query.aggregation && query.aggregation !== 'count'">
+          <div>
+            <label class="text-xs text-text-400">Field</label>
+            <Dropdown v-model="query.field" @change="$emit('change')">
+              <option value="">— select —</option>
+              <option v-for="f in aggFields" :key="f.key" :value="f.key">{{ f.label }}</option>
+            </Dropdown>
+          </div>
+        </template>
+
         <div v-if="!(query.extraFields ?? []).length" class="flex flex-row gap-2">
           <div class="flex-1 min-w-0">
             <div class="flex flex-row items-center h-5">
@@ -470,6 +493,15 @@ export default {
       if (!allowed.includes(row.aggregation)) row.aggregation = allowed.includes('sum') ? 'sum' : allowed[0]
       this.writeFields(rows)
     },
+    // Round charts slice by exact value, so a number range size does not apply to them.
+    setChart(chart) {
+      this.node.chart = chart
+      if ([ 'pie', 'doughnut', 'polarArea' ].includes(chart) && this.query.bucketSize != null) {
+        delete this.query.bucketSize
+        if (!this.query.dateModifier) delete this.query.fillEmpty
+      }
+      this.$emit('change')
+    },
     // Two or more fields draw one line each, which a split cannot share.
     writeFields(rows) {
       const [ main, ...extras ] = rows

package/src/components/AIDashboardFilterSetting.vue

@@ -12,7 +12,7 @@
             <option value="" disabled>field</option>
             <option v-for="fl in fields" :key="fl.key" :value="fl.key">{{ fl.label }}</option>
           </Dropdown>
-          <Dropdown v-model="f.op" class="w-[64px]" @change="onOp(f)">
+          <Dropdown v-model="f.op" :class="opLabel(f.op).length > 3 ? 'w-[110px]' : 'w-[64px]'" @change="onOp(f)">
             <option v-for="o in opsFor(f.field, f.op)" :key="o" :value="o">{{ opLabel(o) }}</option>
           </Dropdown>
           <Dropdown v-if="f.op === 'period'" class="flex-1"
@@ -26,6 +26,7 @@
             <option value="lastMonth">Last month</option>
             <option value="custom">Custom date</option>
           </Dropdown>
+          <div v-else-if="[ 'between', 'exceptBetween', 'weekday', 'monthOfYear' ].includes(f.op)" class="flex-1"></div>
           <Dropdown v-else-if="typeOf(f.field) === 'date'" class="flex-1"
                     :model-value="isToken(f.value) ? f.value : 'custom'"
                     @update:model-value="setDate(f, $event)">
@@ -38,19 +39,27 @@
             <option value="" disabled>value</option>
             <option v-for="o in enumOptions(f.field)" :key="o.value" :value="`${o.value}`">{{ o.label }}</option>
           </Dropdown>
-          <Textbox v-else v-model="f.value" class="flex-1" placeholder="value" @change="$emit('change')" />
+          <Textbox v-else v-model="f.value" class="flex-1" :placeholder="[ 'in', 'notIn' ].includes(f.op) ? 'a, b, c' : 'value'" @change="$emit('change')" />
           <button type="button" class="px-1 text-text-300 hover:text-red-600" title="Remove filter" @click="filters.splice(fi, 1); $emit('change')">
             <svg width="11" height="11" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
           </button>
         </div>
-        <div v-if="f.op === 'period' && /\.\./.test(f.value)" class="flex flex-row items-center gap-1 ml-[16px] mr-[19px]">
+        <div v-if="(f.op === 'period' && /\.\./.test(f.value)) || [ 'between', 'exceptBetween' ].includes(f.op)" class="flex flex-row items-center gap-1 ml-[16px] mr-[19px]">
           <Datepicker mode="popup" class="flex-1" :model-value="f.value.split('..')[0]"
                       @update:model-value="f.value = `${$event}..${f.value.split('..')[1]}`; $emit('change')" />
           <span class=" text-text-400 mx-1">to</span>
           <Datepicker mode="popup" class="flex-1" :model-value="f.value.split('..')[1]"
                       @update:model-value="f.value = `${f.value.split('..')[0]}..${$event}`; $emit('change')" />
         </div>
-        <Datepicker v-if="f.op !== 'period' && typeOf(f.field) === 'date' && !isToken(f.value)" mode="popup"
+        <div v-if="[ 'weekday', 'monthOfYear' ].includes(f.op)" class="flex flex-row flex-wrap gap-x-3 gap-y-1 ml-[16px] mr-[19px]">
+          <label v-for="[ value, label ] in f.op === 'weekday' ? WEEKDAYS : MONTHS" :key="value"
+                 class="flex flex-row items-center gap-1 text-xs text-text-400 cursor-pointer">
+            <input type="checkbox" class="w-3 h-3 accent-primary cursor-pointer" :checked="listOf(f.value).includes(value)"
+                   @change="toggleList(f, value, $event.target.checked)" />
+            {{ label }}
+          </label>
+        </div>
+        <Datepicker v-if="!SPECIAL_DATE_OPS.includes(f.op) && typeOf(f.field) === 'date' && !isToken(f.value)" mode="popup"
                     :model-value="f.value" @update:model-value="f.value = $event; $emit('change')" />
       </div>
       </template>
@@ -82,6 +91,15 @@ export default {
 
   emits: [ 'change' ],
 
+  data() {
+    return {
+      SPECIAL_DATE_OPS: [ 'period', 'between', 'exceptBetween', 'weekday', 'monthOfYear' ],
+      // Stored as MySQL WEEKDAY() / MONTH() numbers: Monday = 0, January = 1.
+      WEEKDAYS: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ].map((label, i) => [ `${i}`, label ]),
+      MONTHS: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ].map((label, i) => [ `${i + 1}`, label ]),
+    }
+  },
+
   computed: {
     filters() {
       return Array.isArray(this.query.filters) ? this.query.filters : []
@@ -125,12 +143,27 @@ export default {
     },
     opsFor(key, current) {
       const type = this.typeOf(key)
-      if (type === 'date') return [ 'period', ...([ '=', '!=' ].includes(current) ? [ current ] : []), '>', '>=', '<', '<=' ]
-      if (type === 'number') return [ '=', '!=', '>', '>=', '<', '<=' ]
-      return [ '=', '!=', 'contains', 'in' ]
+      if (type === 'date') return [ 'period', ...([ '=', '!=' ].includes(current) ? [ current ] : []), '>', '>=', '<', '<=', 'between', 'except', 'exceptBetween', 'weekday', 'monthOfYear' ]
+      if (type === 'number') return [ '=', '!=', '>', '>=', '<', '<=', 'in', 'notIn' ]
+      return [ '=', '!=', 'contains', 'startsWith', 'endsWith', 'in', 'notIn' ]
     },
     opLabel(op) {
-      return { '=': '=', '!=': '≠', '>': '>', '>=': '≥', '<': '<', '<=': '≤', contains: 'has', in: 'in', period: 'is' }[op] ?? op
+      return {
+        '=': '=', '!=': '≠', '>': '>', '>=': '≥', '<': '<', '<=': '≤', contains: 'has', in: 'in', notIn: 'not in',
+        startsWith: 'starts with', endsWith: 'ends with', period: 'is', between: 'between', except: 'except',
+        exceptBetween: 'except between', weekday: 'weekday', monthOfYear: 'month',
+      }[op] ?? op
+    },
+    listOf(value) {
+      return `${value ?? ''}`.split(',').map(v => v.trim()).filter(Boolean)
+    },
+    toggleList(filter, value, checked) {
+      const order = (filter.op === 'weekday' ? this.WEEKDAYS : this.MONTHS).map(([ v ]) => v)
+      const next = new Set(this.listOf(filter.value))
+      if (checked) next.add(value)
+      else next.delete(value)
+      filter.value = order.filter(v => next.has(v)).join(',')
+      this.$emit('change')
     },
     addFilter() {
       if (!Array.isArray(this.query.filters)) this.query.filters = []
@@ -142,11 +175,30 @@ export default {
       if (!allowed.includes(filter.op)) filter.op = allowed[0]
       this.onOp(filter)
     },
+    // Keeps the value when it still fits the new op, otherwise starts it at a sensible default.
     onOp(filter) {
-      const isPeriod = /^(today|yesterday|thisWeek|lastWeek|thisMonth|lastMonth|\d{4}-\d{2}-\d{2}\.\.\d{4}-\d{2}-\d{2})$/.test(`${filter.value}`)
-      if (filter.op === 'period' && !isPeriod) filter.value = 'today'
-      if (filter.op !== 'period' && isPeriod) filter.value = ''
-      if (filter.op !== 'period' && this.typeOf(filter.field) === 'date' && !this.isToken(filter.value) && !/^\d{4}-\d{2}-\d{2}/.test(`${filter.value}`)) filter.value = '@today'
+      const value = `${filter.value ?? ''}`
+      const day = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, '0')}-${`${d.getDate()}`.padStart(2, '0')}`
+      const today = new Date()
+      const range = /^\d{4}-\d{2}-\d{2}\.\.\d{4}-\d{2}-\d{2}$/
+      const dateLike = this.isToken(value) || /^\d{4}-\d{2}-\d{2}( \d{2}:\d{2}(:\d{2})?)?$/.test(value)
+      const isPeriod = /^(today|yesterday|thisWeek|lastWeek|thisMonth|lastMonth)$/.test(value) || range.test(value)
+      if (filter.op === 'period') {
+        if (!isPeriod) filter.value = 'today'
+      }
+      else if ([ 'between', 'exceptBetween' ].includes(filter.op)) {
+        if (!range.test(value)) filter.value = `${day(new Date(today.getFullYear(), today.getMonth(), 1))}..${day(today)}`
+      }
+      else if (filter.op === 'weekday') {
+        if (!/^[0-6](,[0-6])*$/.test(value)) filter.value = '0,1,2,3,4'
+      }
+      else if (filter.op === 'monthOfYear') {
+        if (!/^([1-9]|1[0-2])(,([1-9]|1[0-2]))*$/.test(value)) filter.value = `${today.getMonth() + 1}`
+      }
+      else if (this.typeOf(filter.field) === 'date') {
+        if (!dateLike) filter.value = '@today'
+      }
+      else if (isPeriod || this.isToken(value)) filter.value = ''
       this.$emit('change')
     },
     setPeriod(filter, value) {

package/src/components/AIDashboardMetricSetting.vue

@@ -83,12 +83,31 @@
         </Card>
       </div>
 
-      <div>
-        <label class="text-xs text-text-400 mb-1">Breakdown by (first field)</label>
-        <Dropdown v-model="query.breakdownBy" @change="$emit('change')">
-          <option value="">— none —</option>
-          <option v-for="f in fields.filter(f => f.type !== 'date')" :key="f.key" :value="f.key">{{ f.label }}</option>
-        </Dropdown>
+      <div class="flex flex-row gap-2">
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-row items-center h-5">
+            <label class="flex-1 min-w-0 truncate text-xs text-text-400">Breakdown by (first field)</label>
+          </div>
+          <Dropdown v-model="query.breakdownBy" @change="setBreakdownBy">
+            <option value="">— none —</option>
+            <option v-for="f in fields.filter(f => f.type !== 'date')" :key="f.key" :value="f.key">{{ f.label }}</option>
+          </Dropdown>
+        </div>
+
+        <div v-if="query.breakdownBy" class="w-[100px] min-w-0">
+          <div class="flex flex-row items-center h-5">
+            <label class="flex-1 min-w-0 truncate text-xs text-text-400" title="Top values shown in the bar, plus Other">Limit</label>
+            <label class="flex flex-row items-center gap-1 text-xs text-text-300 cursor-pointer" title="Show Other">
+              <input type="checkbox" class="w-3 h-3 accent-primary cursor-pointer" :checked="query.breakdownOther !== false"
+                     @change="$event.target.checked ? delete query.breakdownOther : query.breakdownOther = false; $emit('change')" />
+              Other
+            </label>
+          </div>
+          <Dropdown :model-value="query.breakdownLimit || 4"
+                    @update:model-value="Number($event) === 4 ? delete query.breakdownLimit : query.breakdownLimit = Number($event); $emit('change')">
+            <option v-for="n in 20" :key="n" :value="n">{{ n }}</option>
+          </Dropdown>
+        </div>
       </div>
       <AIDashboardDetailSetting :owner="query" :fields="fields" :datasources="datasources" pick-field collapsible @change="$emit('change')" />
     </template>
@@ -206,6 +225,13 @@ export default {
       else delete this.query.extraFields
       this.$emit('change')
     },
+    setBreakdownBy() {
+      if (!this.query.breakdownBy) {
+        delete this.query.breakdownLimit
+        delete this.query.breakdownOther
+      }
+      this.$emit('change')
+    },
     extraLabel(extra) {
       const field = this.fields.find(f => f.key === extra.field)?.label
       if (extra.aggregation === 'count' || !field) return this.aggLabel(extra.aggregation)

package/src/components/AIDashboardViews.vue

@@ -21,7 +21,7 @@
           <input v-if="editing?.uid === view.uid" :ref="el => el && el.focus()" v-model="editing.name" maxlength="100"
                  :class="$style.renameInput" @click.stop @keydown.enter.prevent="commitRename" @keydown.esc.prevent="editing = null" @blur="commitRename" />
           <span v-else class="flex-1 truncate" :title="view.name" @dblclick.stop="!view.shared && startRename(view)">{{ view.name }}</span>
-          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>Shared with you</title><path :d="SHARED_PATH"/></svg>
+          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>{{ view.access === 'view' ? 'Shared with you · view only' : 'Shared with you' }}</title><path :d="SHARED_PATH"/></svg>
           <button type="button" :class="$style.rowMenu"
                   @click.stop="viewMenu.open($event.currentTarget, { view })">
             <svg width="14" height="14" class="fill-text-400 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path :d="ELLIPSIS_PATH"/></svg>