swap rows and columns, update styling (#4061)

rilldata · Feb 23, 2024 · ac2319f · ac2319f
1 parent e842a52
commit ac2319f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/web-common/src/features/dashboards/pivot/DragList.svelte b/web-common/src/features/dashboards/pivot/DragList.svelte
@@ -29,14 +29,14 @@
 </script>
 
 <div
-  class="container"
+  class="flex flex-col gap-y-2 py-2 rounded-sm text-gray-500 w-full"
   class:horizontal
   use:dndzone={{ items, flipDurationMs }}
   on:consider={handleConsider}
   on:finalize={handleFinalize}
 >
   {#if !items.length && placeholder}
-    <p class="text-gray-500">{placeholder}</p>
+    {placeholder}
   {/if}
   {#each items as item (item.id)}
     <div class="item" animate:flip={{ duration: flipDurationMs }}>
@@ -60,10 +60,6 @@
     @apply text-center h-6;
   }
 
-  .container {
-    @apply flex flex-col gap-y-2 py-2 rounded-sm;
-  }
-
   .horizontal {
     @apply flex flex-row bg-slate-50 w-full p-2 gap-x-2 h-10;
     @apply items-center;

diff --git a/web-common/src/features/dashboards/pivot/PivotHeader.svelte b/web-common/src/features/dashboards/pivot/PivotHeader.svelte
@@ -29,21 +29,21 @@
 
 <div class="header">
   <div class="header-row">
-    <span class="row-label"> <Column size="16px" /> Columns</span>
+    <span class="row-label"> <Row size="16px" />Rows</span>
     <DragList
-      type="columns"
-      items={$columns.dimension.concat($columns.measure)}
+      type="rows"
       placeholder="Drag dimensions here"
-      on:update={updateColumn}
+      on:update={updateRows}
+      items={$rows.dimension}
     />
   </div>
   <div class="header-row">
-    <span class="row-label"> <Row size="16px" /> Rows</span>
+    <span class="row-label"> <Column size="16px" /> Columns</span>
     <DragList
-      type="rows"
+      type="columns"
+      items={$columns.dimension.concat($columns.measure)}
       placeholder="Drag dimensions or measures here"
-      on:update={updateRows}
-      items={$rows.dimension}
+      on:update={updateColumn}
     />
   </div>
 </div>
@@ -58,6 +58,6 @@
     @apply flex items-center gap-x-2 px-2;
   }
   .row-label {
-    @apply flex items-center gap-x-1 w-20;
+    @apply flex items-center gap-x-1 w-20 flex-shrink-0;
   }
 </style>