datastake-daf 0.6.746 → 0.6.747

package/src/@daf/pages/Summary/Operator/components/Governance/index.js

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getGovernanceData } from './helper.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import StakeholderMappings from '../../../../../core/components/Graphs/StakeholderMappings/index.jsx';
+
+const Governance = ({
+    selectedPartners = {},
+    operatorData = {},
+    t = () => {},
+    id,
+    options = {},
+    goTo = () => {},
+
+}) => {
+    const defaultFetchConfig = useMemo(() => {
+		return {
+			basepath: "analytics",
+			url: "/widgets/information-map-graph",
+			filters: {
+				datastakeId: id,
+				sources: selectedPartners?.partners || [],
+                coreSubject: "stakeholder"
+			},
+			defaultData: {},
+			stop: selectedPartners?.loading,
+		};
+	}, [selectedPartners]);
+
+    const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+    const graphData = useMemo(() => {
+		return getGovernanceData({data, operatorData, id, options, t, goTo, selectedPartners});
+	}, [data, operatorData, options, t]);
+
+    return (
+        <Widget
+            loading={loading}
+            title={t("Governance")}
+            className={"with-border-header no-p-body"}
+        >
+            <div style={{ height: 600 }}>
+                <StakeholderMappings
+                    data={graphData}
+                    maxZoom={1.1}
+                    t={t}
+                    isSelectable={true}
+                    isAllOpenDefault={true}
+                />
+            </div>
+        </Widget>
+    )
+}
+
+export default Governance

package/src/@daf/pages/Summary/Operator/components/KeyInformation/config.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { Tag, Tooltip } from "antd";
+import CountryFlag from "../../../../../core/components/UI/CountryFlag/index.jsx";
+import {findOptions } from "../../../../../../helpers/StringHelper.js";
+
+export const getKeyIndicatorConfig = ({ t, data = {}, options = {} }) => [
+	{
+		label: t("Country"),
+		render: () => {
+			if (!data?.country) {
+				return "-";
+			}
+
+            const country = findOptions(data?.country, options?.countries);
+            const code = data?.country;
+
+			return (
+                <Tooltip title={country}>
+                    <img
+                        alt={code}
+                        style={{ width: 24, borderRadius: 100, height: 24 }}
+                        src={`https://flagcdn.com/w80/${code.toLowerCase()}.png`}
+                    />
+                </Tooltip>
+			);
+		},
+	},
+	{
+		label: t("Supply Chain Position"),
+		render: () => {
+            const position = findOptions(data?.positionSupplyChain, options?.positionSupplyChainOptions);
+			return <div>{position|| "-"}</div>;
+		},
+	},
+	{
+		label: t("Legal Form"),
+		render: () => {
+            const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions);
+			return <div>{subCategory || "-"}</div>;
+		},
+	},
+	{
+		label: t("Products"),
+		render: () => {
+			if ((data?.products || []).length === 0) {
+				return "-";
+			}
+
+			return (
+				<div style={{ display: "flex", flexWrap: "wrap" }}>
+					{data?.products?.map((product) => {
+						return (
+							<Tag
+								color="processing"
+								style={{ color: "#1677FF", marginBottom: 8 }}
+								key={product}
+							>
+								{t(product)}
+							</Tag>
+						);
+					})}
+				</div>
+			);
+		},
+	},
+	{
+		label: t("Associated Mine Sites"),
+		render: () => {
+			return <div>{data?.associatedMineSites || 0}</div>;
+		},
+	},
+	{
+		label: t("Identified Suppliers"),
+		render: () => {
+			return <div>{data?.identifiedSuppliers || 0}</div>;
+		},
+	},
+	{
+		label: t("Identified Customers"),
+		render: () => {
+			return <div>{data?.identifiedCustomers || 0}</div>;
+		},
+	},
+];

package/src/@daf/pages/Summary/Operator/components/KeyInformation/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import KeyIndicatorsWidget from '../../../../../core/components/Dashboard/Widget/KeyIndicators/index.jsx';
+import { useMemo } from 'react';
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import { getKeyIndicatorConfig } from './config.js';
+
+
+const KeyInformation = ({options = {}, selectedPartners = {}, t = () => {}, id = {}, data = {}, loading = false}) => {
+    // const defaultFetchConfig = useMemo(() => {
+	// 	return {
+    //         basepath: "analytics",
+    //         url: '/widgets/key-informations',
+	// 		defaultData: [],
+	// 		stop: selectedPartners?.loading,
+	// 		filters: {
+	// 			datastakeId: id,
+	// 			sources: selectedPartners?.partners || [],
+	// 		},
+	// 	};
+	// }, [selectedPartners, id]);
+
+    // const { data, loading } = useWidgetFetch({config: defaultFetchConfig});
+
+    const config = useMemo(
+		() =>
+			getKeyIndicatorConfig({
+				t,
+				data,
+                options,
+			}),
+		[t, data, options],
+	);
+
+    return (
+        <KeyIndicatorsWidget
+            t={t}
+            config={config}
+            className="small-content"
+            loading={loading}
+            withTooltip
+            noMinWidth
+        />
+    )
+}
+
+export default KeyInformation

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/config.js

@@ -0,0 +1,40 @@
+import React from "react";
+import CustomIcon from "../../../../../core/components/Icon/CustomIcon.jsx";
+
+export const topIconColor = "#6C737F";
+export const iconColorStakeholder = "#08979C";
+export const leftBackgroundColorStakeholder = "#B5F5EC";
+export const iconColorLocation = "#C41D7F";
+export const leftBackgroundColorLocation = "#FFD6E7";
+
+export const topIcons = {
+	building: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	factory: <CustomIcon name="Factory" color={topIconColor} width={16} height={16} />,
+	smelter: <CustomIcon name="Smelter" color={topIconColor} width={16} height={16} />,
+	internationalTrader: <CustomIcon name="Globe04" color={topIconColor} width={16} height={16} />,
+	exporter: <CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />,
+	miningOperator: <CustomIcon name="MineOperators" color={topIconColor} width={16} height={16} />,
+	mineSite: <CustomIcon name="MineSite" color={topIconColor} width={16} height={16} />,
+	location: <CustomIcon name="PMESmallLogo" color={topIconColor} width={16} height={16} />,
+	inCountryTrader: <CustomIcon name="Handshake" color={topIconColor} width={16} height={16} />,
+	localTradingHouse: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	mineralProcessor: <CustomIcon name="Building" color={topIconColor} width={16} height={16} />,
+	inCountryTransporter: <CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />,
+	internationalTransporter: (
+		<CustomIcon name="Truck01" color={topIconColor} width={16} height={16} />
+	),
+};
+
+export const leftIcons = {
+	stakeholder: (
+		<CustomIcon
+			name="DashboardStakeholder"
+			color={iconColorStakeholder}
+			width={16}
+			height={16}
+		/>
+	),
+	location: (
+		<CustomIcon name="DashboardLocations" color={iconColorLocation} width={16} height={16} />
+	),
+};

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/helper.js

@@ -0,0 +1,98 @@
+import { leftIcons, leftBackgroundColorLocation, leftBackgroundColorStakeholder, topIcons } from './config.js';
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
+
+export const getFilterConfig = ({operatorData = {}, options = {}, filters = {}, t = () => {}}) => {
+    const productSet = new Set();
+    const allTradeMineralOptions = [
+        ...(operatorData?.suppliers || []),
+        ...(operatorData?.clients || []),
+        ...(operatorData?.locationSuppliers || []),
+    ].flatMap((trade) =>
+        (trade?.products || [])
+            .filter(
+                (product) => !!product?.typeOfProduct && !productSet.has(product.typeOfProduct),
+            )
+            .map((product) => {
+                productSet.add(product.typeOfProduct);
+
+                const label = options?.minerals?.find(
+                    (mineral) => mineral.value === product.typeOfProduct,
+                )?.label;
+
+                return {
+                    value: product.typeOfProduct,
+                    label: label ?? product.typeOfProduct,
+                };
+            }),
+    );
+
+    const combinedMineralOptions = [...allTradeMineralOptions].filter((option, index, self) => {
+        return option && index === self.findIndex((o) => o.value === option.value);
+    });
+
+    const value = filters.products ? { value: filters.products } : {};
+    return [
+        {
+            label: t("Products"),
+            placeholder: t("Select"),
+            key: "products",
+            type: "select",
+            ...value,
+            options: combinedMineralOptions,
+        },
+    ];
+}
+
+export const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {
+    if (data?.suppliers?.length > 0) {
+        return mapChildren(data.suppliers, data.datastakeId, "left").filter(
+            (d) => !!d,
+        );
+    }
+
+    const storeLocation = supplierLocations;
+    supplierLocations = [];
+
+    return storeLocation
+        .map((location) => {
+            return mapChildren([location], location.connect, "left");
+        })
+        .flat()
+        .filter((d) => !!d);
+}
+
+export const mapItem = (data, options, goTo, getRedirectLink) => {
+    const { positionSupplyChainOptions, locationCategories } = options || {};
+    return {
+        id: data.datastakeId || "-",
+        datastakeId: data.datastakeId || "-",
+        leftIcon: leftIcons[data.type === "mineSite" ? "location" : "stakeholder"],
+        name: data.name || "-",
+        subTitle: findOptions(data.type, [
+            ...(positionSupplyChainOptions || []),
+            ...(locationCategories || []),
+        ]),
+        leftBackground:
+            data.type === "mineSite"
+                ? leftBackgroundColorLocation
+                : leftBackgroundColorStakeholder,
+        topIcon: topIcons[data.type],
+        country: {
+            label: findOptions(data.country, options?.countries || []),
+            value: data.country,
+        },
+        totalSources: data.sources ?? 0,
+        volume: data?.volume || "",
+        onClick: function () {
+            if (data.type === "mineSite") {
+                return goTo(
+                    getRedirectLink(`/app/summary/scl/${data.datastakeId}`),
+                );
+            }
+            return goTo(
+                getRedirectLink(`/app/summary/operators/${data.datastakeId}`),
+            );
+        },
+    }
+}
+

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/hook.js

@@ -0,0 +1,160 @@
+import { useEffect, useState, useMemo } from "react";
+import { useWidgetFetch } from "../../../../../hooks/useWidgetFetch.js";
+import { leftIcons, leftBackgroundColorLocation, leftBackgroundColorStakeholder, topIcons } from './config.js';
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
+import { getLeft, mapItem as _mapItem } from './helper.js';
+
+
+export const useTradeRelationship = ({
+    id,
+    selectedPartners,
+    options,
+    goTo,
+    getRedirectLink,
+    filters,
+}) => {
+    const { positionSupplyChainOptions, locationCategories } = options || {};
+    const [graphData, setGraphData] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [fetchedProducts, setFetchedProducts] = useState(false);
+
+    const config = useMemo(() => ({
+        basepath: "analytics",
+        url: "/widgets/trade-connection-map",
+        filters: {
+            product: filters?.products,
+            sources: selectedPartners?.partners || [],
+        },
+    }), [id, filters?.products, selectedPartners?.partners]);
+    
+    const { data } = useWidgetFetch({config: config});
+
+    const mapItem = (data) => {
+        return _mapItem(data, options, goTo, getRedirectLink);
+    }
+
+
+
+    useEffect(() => {
+		if (id && selectedPartners?.partners?.length > 0 && fetchedProducts) {
+			const _fetch = async () => {
+				setLoading(true);
+
+				try {
+					let supplierLocations = [];
+					const sources = {};
+					const dataSources = [];
+
+					const mapChildren = (children, parentId, type = "left") => {
+						return children?.map((child) => {
+							const childData = mapItem(child);
+
+							if (type === "left") {
+								supplierLocations.push(
+									...(child?.locations || []).map((location) => {
+										return {
+											...location,
+											type: "mineSite",
+											sources: child.sources || 1,
+											suppliers: [],
+											clients: [],
+											connect: child.datastakeId,
+										};
+									}),
+								);
+							}
+							const children =
+								type === "left" ? [...child.suppliers] : [...child.clients];
+
+							if (child.datastakeId === data.datastakeId) {
+								dataSources.push(parentId);
+								return null;
+							}
+
+							if (sources[child.datastakeId]) {
+								if (!sources[child.datastakeId].includes(parentId)) {
+									sources[child.datastakeId].push(parentId);
+								}
+								return null;
+							} else {
+								sources[child.datastakeId] = [parentId];
+							}
+
+							if (
+								type === "left" &&
+								children?.length === 0 &&
+								supplierLocations?.length > 0
+							) {
+								const storeLocation = supplierLocations;
+								supplierLocations = [];
+
+								const children = storeLocation?.map((location) => {
+									return mapChildren([location], location.connect, "left");
+								});
+
+								return {
+									...childData,
+									sources: sources[child.datastakeId] || [],
+									children: children.flat()?.filter((d) => !!d),
+								};
+							}
+
+							return {
+								...childData,
+								sources: sources[child.datastakeId] || [],
+								children:
+									children.length > 0
+										? mapChildren(children, child.datastakeId, type)?.filter(
+												(d) => !!d,
+										  )
+										: [],
+							};
+						});
+					};
+
+					supplierLocations.push(
+						...(data?.locations || []).map((location) => {
+							return {
+								...location,
+								type: "mineSite",
+								suppliers: [],
+								clients: [],
+								connect: data?.datastakeId,
+							};
+						}),
+					);
+					const graphData = {
+						...mapItem(data),
+						onClick: undefined,
+						sources: dataSources,
+						right: mapChildren(data.clients, data.datastakeId, "right")?.filter(
+							(d) => !!d,
+						),
+						left: getLeft(data, mapChildren, supplierLocations),
+					};
+
+					console.log({graphData})
+
+					setGraphData(graphData);
+				} catch (err) {
+					setGraphData({});
+					console.log(err);
+				}
+
+				setLoading(false);
+			};
+
+			_fetch();
+		}
+	}, [filters?.products, id, selectedPartners, fetchedProducts]);
+
+    return {
+        graphData,
+        loading,
+        fetchedProducts,
+        setFetchedProducts,
+        setGraphData,
+        setLoading,
+        data,
+    }
+}

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/index.js

@@ -0,0 +1,83 @@
+import React, { useState, useMemo, useEffect } from 'react'
+import { getFilterConfig } from './helper.js';
+import { useTradeRelationship } from './hook.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import TradeRelationship from '../../../../../core/components/Graphs/TradeRelationship/index.jsx';
+
+const TradeRelationships = ({
+    t = () => {},
+    goTo = () => {},
+    operatorData = {},
+    selectedPartners = {},
+    id,
+    options = {},
+    getRedirectLink = () => {},
+}) => {
+    const [filters, setFilters] = useState({});
+
+    const onFilterChange = (filters) => {
+		setFilters((p) => ({ ...p, ...filters }));
+	};
+
+    const filterConfig = useMemo(() => {
+        return getFilterConfig({operatorData, options, filters, t});
+	}, [filters.products, t, options?.minerals, operatorData]);
+
+    const { graphData, loading, fetchedProducts, setFetchedProducts } = useTradeRelationship({
+        id,
+        selectedPartners,
+        options,
+        goTo,
+        getRedirectLink,
+        filters,
+    });
+
+    useEffect(() => {
+		const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
+
+		if (!filters.products && defaultProduct) {
+			setFilters((prev) => {
+				const data = { ...prev, products: defaultProduct };
+				return data;
+			});
+		}
+
+		if (!fetchedProducts) {
+			setFetchedProducts(true);
+		}
+	}, [filterConfig]);
+
+    return (
+        <Widget
+            title={t("Trade Relationships")}
+            className="flex flex-1 with-border-header no-p-body"
+            loading={loading}
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+				<div style={{ height: 600 }} className="flex flex-column">
+					<TradeRelationship
+						data={graphData}
+						goTo={goTo}
+						t={t}
+						getTotal={(c) => {
+							return c.totalSources || 0;
+						}}
+						renderTooltipItems={(data) => [
+							{
+								label: "Volume",
+								value: data?.volume || "--",
+							},
+						]}
+						maxZoom={1.2}
+						minZoom={0.4}
+						tooltipTitle="Trade"
+						filtersConfig={filterConfig}
+						onFilterChange={onFilterChange}
+					/>
+				</div>
+			</div>
+        </Widget>
+    )
+}
+
+export default TradeRelationships