#49 feat: gráficos de provenance (proveedores-organizaciones y territorios) en el resumen público

src/components/PublicOrderSummary.vue

@@ -40,6 +40,10 @@
         <OrderLines :lines="purchase.lines" />
         <v-divider class="my-3" />
         <OrderTotal :total="calculateTotal(purchase.lines)" />
+        <ProvenanceSection
+          v-if="purchase.product_provenance?.length"
+          :provenance="purchase.product_provenance"
+        />
       </v-card-text>
     </v-card>
   </div>
@@ -51,6 +55,7 @@
   import OrderLines from '@/components/order/OrderLines.vue'
   import OrderPayment from '@/components/order/OrderPayment.vue'
   import OrderTotal from '@/components/order/OrderTotal.vue'
+  import ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
 
   defineProps({
     purchase: {

src/components/provenance/ProductSupplierOrganizationChart.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <v-alert
+      v-if="!hasRelations"
+      class="my-4"
+      type="info"
+      variant="tonal"
+    >
+      La información de proveedores y organizaciones de este pedido estará
+      disponible próximamente.
+    </v-alert>
+
+    <CytoscapeChart
+      v-else
+      data-test="supplier-org-chart"
+      :elements="elements"
+      :height="height"
+      :layout="layout"
+      :styles="styles"
+      @select="onSelect"
+    />
+
+    <ProvenanceDetailModal
+      :selected="selected"
+      :visible="modalVisible"
+      @update:visible="modalVisible = $event"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+  import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
+  import { toCytoscapeElements } from '@/services/graph/graph-layout'
+  import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
+  import { buildSupplierOrganizationGraph, hasAnySupplier } from './provenance-graph'
+
+  const props = defineProps({
+    provenance: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  const graph = computed(() => buildSupplierOrganizationGraph(props.provenance))
+  const hasRelations = computed(() => hasAnySupplier(props.provenance))
+  const elements = computed(() => toCytoscapeElements(graph.value))
+  const height = computed(() => graph.value.height + 60)
+
+  const selected = ref(null)
+  const modalVisible = ref(false)
+
+  const styles = [
+    {
+      selector: 'node',
+      style: {
+        'background-color': '#cfd8dc',
+        'border-color': '#90a4ae',
+        'border-width': 1,
+        color: '#263238',
+        'font-size': 12,
+        'font-family': 'sans-serif',
+        'text-valign': 'bottom',
+        'text-halign': 'center',
+        'text-wrap': 'wrap',
+        'text-max-width': 110,
+        shape: 'round-rectangle',
+        width: 120,
+        height: 40,
+        padding: 6,
+      },
+    },
+    { selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
+    { selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
+    { selector: 'node.organization', style: { 'background-color': '#ffb74d', 'border-color': '#e65100' } },
+    { selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none' } },
+    {
+      selector: 'edge',
+      style: {
+        'curve-style': 'bezier',
+        'target-arrow-shape': 'triangle',
+        'target-arrow-color': '#90a4ae',
+        'line-color': '#90a4ae',
+        width: 2,
+      },
+    },
+  ]
+
+  const layout = { name: 'preset' }
+
+  function onSelect (nodeData) {
+    selected.value = nodeData
+    modalVisible.value = true
+  }
+</script>

src/components/provenance/ProductTerritoryChart.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <v-alert
+      v-if="!hasRelations"
+      class="my-4"
+      type="info"
+      variant="tonal"
+    >
+      La información de municipio, departamento y país de este pedido estará
+      disponible próximamente.
+    </v-alert>
+
+    <CytoscapeChart
+      v-else
+      data-test="territory-chart"
+      :elements="elements"
+      :height="height"
+      :layout="layout"
+      :styles="styles"
+      @select="onSelect"
+    />
+
+    <ProvenanceDetailModal
+      :selected="selected"
+      :visible="modalVisible"
+      @update:visible="modalVisible = $event"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+  import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
+  import { toCytoscapeElements } from '@/services/graph/graph-layout'
+  import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
+  import { buildTerritoryGraph, hasAnyTerritory } from './provenance-graph'
+
+  const props = defineProps({
+    provenance: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  const graph = computed(() => buildTerritoryGraph(props.provenance))
+  const hasRelations = computed(() => hasAnyTerritory(props.provenance))
+  const elements = computed(() => toCytoscapeElements(graph.value))
+  const height = computed(() => graph.value.height + 60)
+
+  const selected = ref(null)
+  const modalVisible = ref(false)
+
+  const styles = [
+    {
+      selector: 'node',
+      style: {
+        'background-color': '#cfd8dc',
+        'border-color': '#90a4ae',
+        'border-width': 1,
+        color: '#263238',
+        'font-size': 12,
+        'font-family': 'sans-serif',
+        'text-valign': 'bottom',
+        'text-halign': 'center',
+        'text-wrap': 'wrap',
+        'text-max-width': 110,
+        shape: 'round-rectangle',
+        width: 120,
+        height: 40,
+        padding: 6,
+      },
+    },
+    { selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
+    { selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
+    { selector: 'node.municipality', style: { 'background-color': '#66bb6a', 'border-color': '#2e7d32' } },
+    { selector: 'node.department', style: { 'background-color': '#5c6bc0', 'border-color': '#283593' } },
+    { selector: 'node.country', style: { 'background-color': '#ab47bc', 'border-color': '#6a1b9a' } },
+    { selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none' } },
+    {
+      selector: 'edge',
+      style: {
+        'curve-style': 'bezier',
+        'target-arrow-shape': 'triangle',
+        'target-arrow-color': '#90a4ae',
+        'line-color': '#90a4ae',
+        width: 2,
+      },
+    },
+  ]
+
+  const layout = { name: 'preset' }
+
+  function onSelect (nodeData) {
+    selected.value = nodeData
+    modalVisible.value = true
+  }
+</script>

src/components/provenance/ProvenanceDetailModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-dialog
+    max-width="520"
+    :model-value="visible"
+    @update:model-value="onUpdateVisible"
+  >
+    <v-card v-if="selected">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" :color="kindColor" :icon="kindIcon" />
+        <span class="font-weight-bold">{{ kindLabel }}</span>
+      </v-card-title>
+      <v-divider />
+      <v-card-text>
+        <img
+          v-if="selected.image"
+          alt="Imagen del producto"
+          class="provenance-image rounded-lg border mb-3"
+          :src="selected.image"
+        >
+        <div class="text-h6 mb-2">{{ selected.label }}</div>
+        <v-list v-if="hasDetails" density="compact">
+          <v-list-item v-if="description">
+            <v-list-item-title>Descripción</v-list-item-title>
+            <v-list-item-subtitle>{{ description }}</v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="website">
+            <v-list-item-title>Sitio web</v-list-item-title>
+            <v-list-item-subtitle>
+              <a :href="website" rel="noopener" target="_blank">{{ website }}</a>
+            </v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="contactEmail">
+            <v-list-item-title>Correo de contacto</v-list-item-title>
+            <v-list-item-subtitle>{{ contactEmail }}</v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="contactPhone">
+            <v-list-item-title>Teléfono de contacto</v-list-item-title>
+            <v-list-item-subtitle>{{ contactPhone }}</v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="close">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    selected: {
+      type: Object,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const KIND_INFO = {
+    product: { label: 'Producto', icon: 'mdi-package-variant', color: 'teal' },
+    supplier: { label: 'Proveedor', icon: 'mdi-truck', color: 'blue' },
+    organization: { label: 'Organización', icon: 'mdi-domain', color: 'orange' },
+    municipality: { label: 'Municipio', icon: 'mdi-map-marker', color: 'green' },
+    department: { label: 'Departamento', icon: 'mdi-map', color: 'indigo' },
+    country: { label: 'País', icon: 'mdi-earth', color: 'purple' },
+  }
+
+  const kindInfo = computed(() => {
+    return KIND_INFO[props.selected?.kind] || KIND_INFO.product
+  })
+  const kindLabel = computed(() => kindInfo.value.label)
+  const kindIcon = computed(() => kindInfo.value.icon)
+  const kindColor = computed(() => kindInfo.value.color)
+
+  const entity = computed(() => props.selected?.entity || {})
+  const description = computed(() => entity.value.description || '')
+  const website = computed(() => entity.value.website || '')
+  const contactEmail = computed(() => entity.value.contact_email || '')
+  const contactPhone = computed(() => entity.value.contact_phone || '')
+
+  const hasDetails = computed(() => {
+    return description.value || website.value || contactEmail.value || contactPhone.value
+  })
+
+  function onUpdateVisible (value) {
+    emit('update:visible', value)
+  }
+
+  function close () {
+    emit('update:visible', false)
+  }
+</script>
+
+<style scoped>
+.provenance-image {
+  display: block;
+  max-height: 220px;
+  max-width: 100%;
+  object-fit: contain;
+}
+</style>

src/components/provenance/ProvenanceSection.vue

@@ -0,0 +1,29 @@
+<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>
+
+    <h4 class="text-subtitle-1 font-weight-medium mb-2">Proveedores y organizaciones</h4>
+    <ProductSupplierOrganizationChart :provenance="provenance" />
+
+    <v-divider class="my-4" />
+
+    <h4 class="text-subtitle-1 font-weight-medium mb-2">Departamento y municipio</h4>
+    <ProductTerritoryChart :provenance="provenance" />
+  </div>
+</template>
+
+<script setup>
+  import ProductSupplierOrganizationChart from './ProductSupplierOrganizationChart.vue'
+  import ProductTerritoryChart from './ProductTerritoryChart.vue'
+
+  defineProps({
+    provenance: {
+      type: Array,
+      default: null,
+    },
+  })
+</script>

src/services/graph/graph-layout.js

@@ -51,17 +51,20 @@ export function computeColumnLayout (nodes, edges, options = {}) {
 
 export function toCytoscapeElements ({ nodes, edges }) {
   return [
-    ...nodes.map(node => ({
-      data: {
-        id: node.id,
-        kind: node.kind,
-        label: node.label,
-        image: node.image || null,
-        entity: node.entity || null,
-      },
-      classes: [node.kind],
-      position: { x: node.x, y: node.y },
-    })),
+    ...nodes.map(node => {
+      const classes = node.image ? [node.kind, 'has-image'] : [node.kind]
+      return {
+        data: {
+          id: node.id,
+          kind: node.kind,
+          label: node.label,
+          image: node.image || null,
+          entity: node.entity || null,
+        },
+        classes,
+        position: { x: node.x, y: node.y },
+      }
+    }),
     ...edges.map(edge => ({
       data: {
         id: `edge:${edge.from}:${edge.to}`,