VisActor VBI
  • Français

      • HierarchySankey

      Sankey hiérarchique des ventes régionales

      Affiche un diagramme sankey hiérarchique où les ventes circulent de la région vers le pays, puis vers la ville.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Asia",
      "country": "China",
      "city": "Beijing",
      "sales": 30
    },
    {
      "region": "Asia",
      "country": "China",
      "city": "Shanghai",
      "sales": 20
    },
    {
      "region": "Asia",
      "country": "Japan",
      "city": "Tokyo",
      "sales": 10
    },
    {
      "region": "Europe",
      "country": "Germany",
      "city": "Berlin",
      "sales": 18
    },
    {
      "region": "Europe",
      "country": "Germany",
      "city": "Munich",
      "sales": 12
    },
    {
      "region": "Europe",
      "country": "France",
      "city": "Paris",
      "sales": 16
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Region"
    },
    {
      "id": "country",
      "alias": "Country"
    },
    {
      "id": "city",
      "alias": "City"
    }
  ],
  "measures": [
    {
      "id": "sales",
      "alias": "Sales"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Dimensions hiérarchiques multiniveaux + un indicateur

      Affiche le flux hiérarchique de la grande région vers le pays puis vers le canal, avec un seul indicateur qui contrôle la taille du flux.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Chine du Nord",
      "country": "Chine",
      "channel": "Direct",
      "revenue": 42
    },
    {
      "region": "Chine du Nord",
      "country": "Chine",
      "channel": "Partenaire",
      "revenue": 18
    },
    {
      "region": "Chine de l’Est",
      "country": "Chine",
      "channel": "Direct",
      "revenue": 36
    },
    {
      "region": "Chine de l’Est",
      "country": "Chine",
      "channel": "E-commerce",
      "revenue": 22
    },
    {
      "region": "Asie du Sud-Est",
      "country": "Singapour",
      "channel": "Direct",
      "revenue": 15
    },
    {
      "region": "Asie du Sud-Est",
      "country": "Malaisie",
      "channel": "Partenaire",
      "revenue": 12
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Grande région"
    },
    {
      "id": "country",
      "alias": "Pays"
    },
    {
      "id": "channel",
      "alias": "Canal"
    }
  ],
  "measures": [
    {
      "id": "revenue",
      "alias": "Revenus"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Sankey hiérarchique pivoté

      Un diagramme de Sankey hiérarchique pivoté par région et par année. La région est mappée sur les lignes, l’année sur les colonnes, et chaque cellule de pivot affiche un arbre de flux hiérarchique indépendant.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "East",
      "year": "2023",
      "country": "China",
      "city": "Shanghai",
      "channel": "Direct",
      "sales": 35
    },
    {
      "region": "East",
      "year": "2023",
      "country": "China",
      "city": "Hangzhou",
      "channel": "Partner",
      "sales": 20
    },
    {
      "region": "East",
      "year": "2023",
      "country": "Japan",
      "city": "Tokyo",
      "channel": "Direct",
      "sales": 18
    },
    {
      "region": "East",
      "year": "2024",
      "country": "China",
      "city": "Shanghai",
      "channel": "Direct",
      "sales": 42
    },
    {
      "region": "East",
      "year": "2024",
      "country": "China",
      "city": "Nanjing",
      "channel": "E-commerce",
      "sales": 16
    },
    {
      "region": "East",
      "year": "2024",
      "country": "Japan",
      "city": "Osaka",
      "channel": "Partner",
      "sales": 14
    },
    {
      "region": "West",
      "year": "2023",
      "country": "Germany",
      "city": "Berlin",
      "channel": "Direct",
      "sales": 22
    },
    {
      "region": "West",
      "year": "2023",
      "country": "France",
      "city": "Paris",
      "channel": "Partner",
      "sales": 19
    },
    {
      "region": "West",
      "year": "2023",
      "country": "France",
      "city": "Lyon",
      "channel": "Direct",
      "sales": 11
    },
    {
      "region": "West",
      "year": "2024",
      "country": "Germany",
      "city": "Munich",
      "channel": "Direct",
      "sales": 26
    },
    {
      "region": "West",
      "year": "2024",
      "country": "France",
      "city": "Paris",
      "channel": "E-commerce",
      "sales": 17
    },
    {
      "region": "West",
      "year": "2024",
      "country": "Spain",
      "city": "Madrid",
      "channel": "Partner",
      "sales": 13
    }
  ],
  "dimensions": [
    {
      "id": "country",
      "alias": "Country",
      "encoding": "hierarchy"
    },
    {
      "id": "city",
      "alias": "City",
      "encoding": "hierarchy"
    },
    {
      "id": "channel",
      "alias": "Channel",
      "encoding": "hierarchy"
    },
    {
      "id": "region",
      "alias": "Region",
      "encoding": "row"
    },
    {
      "id": "year",
      "alias": "Year",
      "encoding": "column"
    }
  ],
  "measures": [
    {
      "id": "sales",
      "alias": "Sales"
    }
  ],
  "color": {
    "colorScheme": [
      "#0B6CFF",
      "#3B8BFF",
      "#00A6A6",
      "#4DC3B2",
      "#FF8A00",
      "#FFB347",
      "#7B61FF",
      "#B39DFF"
    ]
  },
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      Nom de l’indicateur comme dimension hiérarchique + un indicateur

      Place le « nom de l’indicateur » lui-même dans le chemin hiérarchique pour afficher le flux des différents indicateurs métier sous chaque grande région, avec un seul indicateur numérique qui contrôle la taille.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "Chine du Nord",
      "metricName": "Ventes",
      "value": 42
    },
    {
      "region": "Chine du Nord",
      "metricName": "Bénéfice",
      "value": 12
    },
    {
      "region": "Chine de l’Est",
      "metricName": "Ventes",
      "value": 36
    },
    {
      "region": "Chine de l’Est",
      "metricName": "Bénéfice",
      "value": 10
    },
    {
      "region": "Chine du Sud",
      "metricName": "Ventes",
      "value": 28
    },
    {
      "region": "Chine du Sud",
      "metricName": "Bénéfice",
      "value": 8
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "Grande région"
    },
    {
      "id": "metricName",
      "alias": "Nom de l’indicateur"
    }
  ],
  "measures": [
    {
      "id": "value",
      "alias": "Valeur de l’indicateur"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}