Delivery-flow-chart NPM

delivery-flow-chart

A flow chart like delivery overview

Install

npm install --save delivery-flow-chart

Usage

Pass the orderData prop to generate a chart like so:

import React, { Component } from 'react'

import FlowChart from 'delivery-flow-chart'

class Example extends Component {
  render () {
    return (
      <FlowChart
        orderData={this.props.orderData}
        loading={this.props.loading}

        locationComponent={this.props.customLocationComponent} //optional
        deliveryComponent={this.props.customDeliveryComponent} //optional
        deliveryWrapperComponent={this.props.customDeliveryWrapperComponent} //optional
        locationClassName='location-class' //optional
        deliveryClassName='delivery-class' //optional
        tableProps={{
          title: () => 'My flow chart!',
          showHeader: true,
          style={
            margin: '20px'
          }
        }} //optional
      />
    )
  }
}

Property description

orderData

orderData have to follow a certain structure. Locations are connected via deliveries. Every delivery must have a "departure" and a "destination" id that matches an elements id in the locations array. "type" defines what column a location belongs in. Allowed values are 0-3, where 0 is the starting point and 3 is the final destination.

Here's an example:

{
  "deliveries": [
    {
      "id": 1,
      "departure": "ck1hhh0vy008e0711kg254emj",
      "destination": "ck1hhh08q00200711pw7h010a",
      "shipments": [
        {
          consignmentData {
            carrier: {
              name: 'FedEx'
            }
          }
        }
        //More delivery props
      ]
    },
    {
      "id": 2,
      "departure": "ck1hhh1oa00ib0711fw2p9mzk",
      "destination": "ck1hhh08q00200711pw7h010a",
    },
    {
      "id": 3,
      "departure": "ck1hhh08q00200711pw7h010a",
      "destination": "ck1hhh762033t0711gj7rnjh6",
      "shipments": [
        {
          consignmentData {
            carrier: {
              name: 'Post Nord'
            }
          }
        }
        //More delivery props
      ]
    }
  ],
  "locations": [
    {
      "id": "ck1hhh1oa00ib0711fw2p9mzk",
      "displayName": "Amazon",
      "type": 0,
      "party": {
        "name": "Amazon",
        "address": {
          "name": "Amazon",
          //...more props about the location
        }
      }
    },
    {
      "id": "ck1hhh0vy008e0711kg254emj",
      "displayName": "tools.com",
      "type": 0,
      "party": {
        "name": "tools.com",
        "address": {
          "name": "tools.com",
          //...more props about the location
        }
      }
    },
    {
      "id": "ck1hhh08q00200711pw7h010a",
      "displayName": "FedEx terminal Colorado",
      "type": 2,
      "party": {
        "name": "FedEx terminal Colorado"
        //...more props about the location
      }
    },
    {
      "id": "ck1hhh762033t0711gj7rnjh6",
      "displayName": "Anders Andersson",
      "type": 3,
      "party": {
        "name": "Anders Andersson"
        //...more props about the location
      }
    }
  ]
}

loading

Could be a boolean or an object with Ant Design Spin properties. For example:

loading={{
  spinning: loading,
  size: 'small',
  wrapperClassName: 'my-spinner',
  indicator: <loadingComponent />
}}

locationComponent, deliveryComponent and DeliveryWrapperComponent

Optional components used in the flow chart for locations and deliveries. DeliveryWrapperComponent is a wrapper for a single delivery cell (with arrow included).

locationStyle and deliveryStyle

Optional JSX formatted styling objects for custom styling of location and delivery component

tableProps

Delivery flow chart uses Ant Design Table component under the hood. Use tableProps when you need to specify table props. Read more about table props here: https://ant.design/components/table/