chartletv0.23.0

← All examples

Checkout dependencies: the payment chain

A network of services with one dot ringed in the accent and the chain from checkout through payments and the ledger to the event bus drawn heavy. A ring stands for the emphasized dot, since a dot is too small for an outline; the legend names it with the line patterns.

Checkout dependencies: the payment chain

examples/dependencies-focus.json
{
  "schemaVersion": 1,
  "type": "network",
  "title": "Checkout dependencies: the payment chain",
  "source": "Service catalogue",
  "width": 900,
  "height": 560,
  "network": {
    "layout": "rings",
    "center": "checkout",
    "directed": true,
    "nodes": [
      {
        "id": "checkout",
        "label": "Checkout",
        "group": "Shop"
      },
      {
        "id": "cart",
        "label": "Cart",
        "group": "Shop"
      },
      {
        "id": "pricing",
        "label": "Pricing",
        "group": "Shop"
      },
      {
        "id": "payments",
        "label": "Payments",
        "group": "Finance"
      },
      {
        "id": "auth",
        "label": "Sign-in",
        "group": "Platform"
      },
      {
        "id": "fraud",
        "label": "Fraud check",
        "group": "Finance"
      },
      {
        "id": "ledger",
        "label": "Ledger",
        "group": "Finance"
      },
      {
        "id": "events",
        "label": "Event bus",
        "group": "Platform"
      }
    ],
    "edges": [
      {
        "from": "checkout",
        "to": "cart"
      },
      {
        "from": "checkout",
        "to": "pricing"
      },
      {
        "from": "checkout",
        "to": "payments"
      },
      {
        "from": "checkout",
        "to": "auth"
      },
      {
        "from": "payments",
        "to": "fraud"
      },
      {
        "from": "payments",
        "to": "ledger"
      },
      {
        "from": "ledger",
        "to": "events"
      },
      {
        "from": "fraud",
        "to": "events",
        "dash": "dashed"
      }
    ]
  },
  "emphasis": {
    "nodes": [
      "payments"
    ],
    "path": [
      "checkout",
      "payments",
      "ledger",
      "events"
    ]
  },
  "legend": "auto",
  "mobile": {
    "width": 540,
    "height": 640
  }
}
Focus
Checkout dependencies: the payment chain
Checkout dependencies: the payment chainNetwork with 8 nodes and 8 connections in 3 groups: Shop, Finance and Platform. In rings around Checkout: 1 step away: Cart, Pricing, Payments and Sign-in; 2 steps away: Fraud check and Ledger; 3 steps away: Event bus. Most connected: Checkout (4 connections). Nothing leads into Checkout. Bottleneck: Payments; without it the diagram falls apart. Checkout (group Shop): leads to Cart, Pricing, Payments and Sign-in. Cart (group Shop): no outgoing connection. Pricing (group Shop): no outgoing connection. Payments (group Finance): leads to Fraud check and Ledger. Sign-in (group Platform): no outgoing connection. Fraud check (group Finance): leads to Event bus. Ledger (group Finance): leads to Event bus. Event bus (group Platform): no outgoing connection. Emphasized: Payments. Emphasized path: Checkout → Payments → Ledger → Event bus. Legend: emphasized, solid line, dashed line, emphasized path.Checkout → CartCheckout → PricingCheckout → PaymentsCheckout → Sign-inPayments → Fraud checkPayments → LedgerLedger → Event busFraud check → Event busCheckout (Shop)CheckoutCart (Shop)CartPricing (Shop)PricingPayments (Finance)PaymentsSign-in (Platform)Sign-inFraud check (Finance)Fraud checkLedger (Finance)LedgerEvent bus (Platform)Event busShopFinancePlatformEmphasizedSolid lineDashed lineEmphasized path
Checkout dependencies: the payment chainNetwork with 8 nodes and 8 connections in 3 groups: Shop, Finance and Platform. In rings around Checkout: 1 step away: Cart, Pricing, Payments and Sign-in; 2 steps away: Fraud check and Ledger; 3 steps away: Event bus. Most connected: Checkout (4 connections). Nothing leads into Checkout. Bottleneck: Payments; without it the diagram falls apart. Checkout (group Shop): leads to Cart, Pricing, Payments and Sign-in. Cart (group Shop): no outgoing connection. Pricing (group Shop): no outgoing connection. Payments (group Finance): leads to Fraud check and Ledger. Sign-in (group Platform): no outgoing connection. Fraud check (group Finance): leads to Event bus. Ledger (group Finance): leads to Event bus. Event bus (group Platform): no outgoing connection. Emphasized: Payments. Emphasized path: Checkout → Payments → Ledger → Event bus. Legend: emphasized, solid line, dashed line, emphasized path.Checkout → CartCheckout → PricingCheckout → PaymentsCheckout → Sign-inPayments → Fraud checkPayments → LedgerLedger → Event busFraud check → Event busCheckout (Shop)CheckoutCart (Shop)CartPricing (Shop)PricingPayments (Finance)PaymentsSign-in (Platform)Sign-inFraud check (Finance)Fraud checkLedger (Finance)LedgerEvent bus (Platform)Event busShopFinancePlatformEmphasizedSolid lineDashed lineEmphasized path

Source: Service catalogue

Show chart data
Data for Checkout dependencies: the payment chain
NodeGroupRingLeads toEmphasis
CheckoutShopCenterCart, Pricing, Payments, Sign-inon emphasized path
CartShop1
PricingShop1
PaymentsFinance1Fraud check, Ledgeremphasized, on emphasized path
Sign-inPlatform1
Fraud checkFinance2Event bus
LedgerFinance2Event buson emphasized path
Event busPlatform3on emphasized path
  • Network with emphasis, a legend and a phone variant
  • Follow the payment chain through a network