#49 feat: desplegable en seccion de provenance con leyenda de colores y titulo sin historia

src/components/provenance/ProvenanceGraph.vue

@@ -18,9 +18,18 @@
           :key="option.value"
           v-model="selectedKinds"
           density="compact"
-          :label="option.label"
           :value="option.value"
-        />
+        >
+          <template #label>
+            <span class="d-flex align-center">
+              <span
+                class="legend-dot"
+                :style="{ backgroundColor: option.color }"
+              />
+              {{ option.label }}
+            </span>
+          </template>
+        </v-checkbox>
       </div>
 
       <v-alert
@@ -57,7 +66,7 @@
   import VisChart from '@/components/graph/VisChart.vue'
   import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
   import { buildProvenanceGraph, hasAnySupplier } from './provenance-graph'
-  import { chartOptions, toVisEdges, toVisNodes } from './provenance-vis'
+  import { chartOptions, KIND_COLORS, toVisEdges, toVisNodes } from './provenance-vis'
 
   const props = defineProps({
     provenance: {
@@ -67,12 +76,12 @@
   })
 
   const options = [
-    { value: 'product', label: 'Productos' },
-    { value: 'supplier', label: 'Proveedores' },
-    { value: 'organization', label: 'Organizaciones' },
-    { value: 'municipality', label: 'Municipios' },
-    { value: 'department', label: 'Departamentos' },
-    { value: 'country', label: 'País' },
+    { value: 'product', label: 'Productos', color: KIND_COLORS.product },
+    { value: 'supplier', label: 'Proveedores', color: KIND_COLORS.supplier },
+    { value: 'organization', label: 'Organizaciones', color: KIND_COLORS.organization },
+    { value: 'municipality', label: 'Municipios', color: KIND_COLORS.municipality },
+    { value: 'department', label: 'Departamentos', color: KIND_COLORS.department },
+    { value: 'country', label: 'País', color: KIND_COLORS.country },
   ]
 
   const selectedKinds = ref(['product', 'supplier'])
@@ -93,3 +102,13 @@
     modalVisible.value = true
   }
 </script>
+
+<style scoped>
+.legend-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  margin-right: 6px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+}
+</style>

src/components/provenance/ProvenanceSection.vue

@@ -1,16 +1,38 @@
 <template>
   <div v-if="provenance && provenance.length > 0">
     <v-divider class="my-4" />
-    <h3 class="text-h6 font-weight-bold mb-1">Origen e historia de los productos</h3>
-    <p class="text-body-2 text-medium-emphasis mb-4">
-      Conoce quiénes producen los productos que compras y de qué territorios provienen.
-    </p>
+    <div
+      class="d-flex align-center justify-space-between cursor-pointer"
+      data-test="provenance-toggle"
+      role="button"
+      @click="expanded = !expanded"
+    >
+      <h3 class="text-h6 font-weight-bold">
+        Origen de los productos
+      </h3>
+      <v-btn
+        data-test="provenance-toggle-button"
+        density="comfortable"
+        :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        variant="text"
+        @click.stop="expanded = !expanded"
+      />
+    </div>
 
-    <ProvenanceGraph :provenance="provenance" />
+    <v-expand-transition>
+      <div v-if="expanded">
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          Conoce quiénes producen los productos que compras y de qué territorios provienen.
+        </p>
+
+        <ProvenanceGraph :provenance="provenance" />
+      </div>
+    </v-expand-transition>
   </div>
 </template>
 
 <script setup>
+  import { ref } from 'vue'
   import ProvenanceGraph from './ProvenanceGraph.vue'
 
   defineProps({
@@ -19,4 +41,6 @@
       default: null,
     },
   })
+
+  const expanded = ref(false)
 </script>

src/components/provenance/provenance-vis.js

@@ -25,6 +25,8 @@ const COLUMN_X = {
   country: 560,
 }
 
+export const KIND_COLORS = COLORS
+
 export function toVisNodes (nodes) {
   const products = nodes.filter(node => node.kind === 'product')
   const productY = new Map()