Configurations

Interfaces

Here you can find the properties and/or methods used in the widget and the structures they conform to.

Widget Props

type WidgetProps = {
  key: string;
  parentElementSelector: string;

  hideSidePanel?: boolean; // optional
  hideSearch?: boolean; // optional
  hideZoomControls?: boolean; // optional

  functionMap_getGraphData?: string; // optional
  functionMap_getSelectedElements?: string; // optional
};

Widget Parameters

Using Handshakes' Data

type WidgetParametersEndpointData = {
  graphType: string;
  datasets: string[];
  entities: { id: string; dataset: string }[];
  degree: number;
};

Using Your own Data

type WidgetParametersCustomData = {
  graphType: string;
};

Widget Methods

interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;

  displayEmptyState: (props: typeof widgetProps, message?: string) => void;

  load: (message?: string) => void;
}

You can create a file to house all the widget types:

types.ts

export type WidgetProps = {
  key: string;
  parentElementSelector: string;

  hideSidePanel?: boolean; // optional
  hideSearch?: boolean; // optional
  hideZoomControls?: boolean; // optional

  functionMap_getGraphData?: string; // optional
  functionMap_getSelectedElements?: string; // optional
};

export type WidgetParametersEndpointData = {
  graphType: string;
  datasets: string[];
  entities: { id: string; dataset: string }[];
  degree: number;
};

export type WidgetParametersCustomData = {
  graphType: string;
};

export interface HandshakesWidget {
  drawGraphWithEndpointData(
    parameters: WidgetParametersEndpointData,
    data: GraphData
  ): void;

  drawGraphWithCustomData(
    parameters: WidgetParametersCustomData,
    data: GraphData
  ): void;

  displayEmptyState: (props: typeof widgetProps, message?: string) => void;

  load: (message?: string) => void;
}

Graph Data

To be able to have your data displayed in the Handshakes Graph Widget, it will have to be structured in a way that the widget can consume.
When using your own JSON data, it should be in this format below.

type GraphData = {
  originEntities: {
    dataset: string; // "CRSG" | "CRMY" | "CM"
    id: string; // or comapny UEN/Identification number
  };
  graph: {
    graphType: string; // "radial" | "interconnect" | "lbo" | "investee"
    nodes: {
      id: string;
      entities: EntityInfo[];
      distanceFromOrigin: number;
      effectiveEquity?: number;
    }[];
    edges: {
      id: string;
      source: string;
      target: string;
      relationships: RelationshipInfo[];
      directEquity?: number;
      directVotingInterest?: number;
    }[];
    stats: {
      datasets: string[];
      degree: number; // degree of separation
    };
  };
  generatedAt: string; // ISO Date Format
};

type EntityInfo = {
  id: string;
  type: string;
  subtype: string;
  lastUpdated: string;
  isActive: boolean;
  names: {
    name: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPrimary: boolean;
    isPast: boolean;
    language: string;
    isTranslation: boolean;
  }[];
  addresses: {
    addressType: string;
    addressLines: string[];
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPrimary: boolean;
    isPast: boolean;
  }[];
  identifications: {
    id: string;
    type: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
    country: string;
    issuer: string;
  }[];
  statuses: {
    status: string;
    isActive: boolean;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  person?: Person;
  firm?: Firm;
  event?: Event;
  remarks: string;
  dataset: string; // "CRSG" | "CRMY" | "CM"
  isRedListed?: boolean;
};

type RelationshipInfo = {
  id: string;
  sourceEntityId: string;
  targetEntityId: string;
  type: string;
  subtype: string;
  effectiveDates: {
    start: string;
    end: string;
    startUncertainty: string;
    endUncertainty: string;
  };
  isPast: boolean;
  ownerships: {
    ownershipType: string;
    percentage: number;
    amount: number;
    currency: string;
    sharesAllotted: number;
    levelOfControl: string;
    isJoint: boolean;
    jointShareholding: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  remarks: string;
  dataset: string; // "CRSG" | "CRMY" | "CM"
};

type Person = {
  placeOfBirth: string;
  dateOfBirth: string;
  dateOfBirthUncertainty: string;
  salutation: string;
  citizenships: {
    country: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
    isPast: boolean;
  }[];
  gender: string;
};

type Firm = {
  dateOfIncorporation: string;
  dateOfIncorporationUncertainty: string;
  placeOfIncorporation: string;
  businessActivities: {
    description: string;
    code: string;
    classificationStandard: string;
    isPrimary: boolean;
  }[];
  capitals: {
    isPast: boolean;
    shareType: string;
    currency: string;
    shareCategory: string;
    amount: number;
  }[];
  financials: {
    isPast: boolean;
    isConsolidated: boolean;
    companyType: string;
    periodStartDate: string;
    periodEndDate: string;
    financialYear: number;
    filingDate: string;
    filingType: string;
    audit: {
      isAudited: boolean;
    };
    statements: {
      currency: string;
      profitOrLoss: {
        income: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
        expenses: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
        profit: {
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
      };
      financialPosition: {
        assets: {
          current: {
            total: number;
          };
          nonCurrent: {
            total: number;
          };
          total: number;
        };
        liabilities: {
          current: {
            total: number;
          };
          nonCurrent: {
            total: number;
          };
          total: number;
        };
        equities: {
          total: number;
          items: {
            label: string;
            value: number;
            tags: string[];
          }[];
        };
      };
      cashFlows: {
        operatingActivities: {
          total: number;
        };
        investingActivities: {
          total: number;
        };
        financingActivities: {
          total: number;
        };
      };
    };
  }[];
  stockListings: {
    stockExchange: string;
    stockCode: string;
    effectiveDates: {
      start: string;
      end: string;
      startUncertainty: string;
      endUncertainty: string;
    };
  }[];
  employeeCount: {
    min: number;
    max: number;
  };
};

type Event = {
  grossProceeds: number;
  issuePrice: number;
  issuedShares: number;
  transactionCurrency: string;
  transactionDate: string;
  transactionDateUncertainty: string;
};

---

Toggle Hide/Show of Widget UI Elements

The widget can disable selected UI elements based on the following object keys.

Object Key	Values	Default Value	Description
hideSidePanel	true | false	false	Removes the Side Panel of the Graph Widget
hideSearch	true | false	false	Removes the Search Bar of the Graph Widget
hideZoomControls	true | false	false	Removes the zoom buttons of the Graph Widget

Add Hide to the Widget Props

widget-props.js

const widgetProps = {
  key: CLIENT_KEY,
  parentElementSelector: ELEMENT_SELECTOR,

  // Add these to your Widget Props
  hideSidePanel: true,
  hideSearch: true,
  hideZoomControls: true,
};