datastake-daf 0.6.746 → 0.6.748

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

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

@@ -0,0 +1,176 @@
+import { useState, useMemo, useCallback, useEffect } from "react"
+import { debounce } from "lodash";
+import { StorageManager } from "../../../../helpers/StorageManager.js";
+
+export const useSummary = ({
+    getOne, 
+    getMultiple, 
+    id, 
+    hasSelect = false, 
+    storageKey, 
+    data, 
+    isPdf, 
+    params,
+    partners, 
+    selectedPartners,
+    user,
+    t,
+    theme = {},
+    service
+}) => {
+    const [search, setSearch] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const [singleItemData, setSingleItemData] = useState();
+	const [loading, setLoading] = useState(false);
+    const [_partners, _setPartners] = useState();
+
+	const [selectedItem, setSelectedItem] = useState(undefined);
+
+	const dataOptions = useMemo(() => {		
+		const mappedData = data?.map((item) => ({
+			label: item?.name,
+			value: item?.datastakeId
+		})) || [];
+		
+		const storedData = StorageManager.get(storageKey);
+		if (storedData) {
+			try {
+				const parsedStoredData = JSON.parse(storedData);
+				const existsInData = mappedData?.find(item => item.value === parsedStoredData.value);
+
+				if (!existsInData) {
+					return [...mappedData, parsedStoredData];
+				}
+			} catch (error) {
+				console.log('Error parsing stored data:', error);
+			}
+		}
+		
+		return mappedData;
+	}, [data, hasSelect, storageKey])
+
+	useEffect(() => {
+		if (hasSelect && dataOptions && dataOptions.length > 0 && !debouncedSearch && !hasInitialized) {
+			let selectedValue;
+			
+			if (isPdf) {
+				selectedValue = id;
+			} else {
+				const storedData = StorageManager.get(storageKey);
+				if (storedData) {
+					try {
+						const parsedData = JSON.parse(storedData);
+						const existsInOptions = dataOptions?.find((item) => item?.value === parsedData?.value);
+						selectedValue = existsInOptions ? parsedData?.value : (Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined);
+					} catch (error) {
+						console.log('Error parsing stored data:', error);
+						selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+					}
+				} else {
+					selectedValue = Array.isArray(dataOptions) ? dataOptions[0]?.value : undefined;
+				}
+			}
+			
+			setSelectedItem(selectedValue);
+			setHasInitialized(true);
+		}
+	}, [hasSelect, storageKey, isPdf, id, debouncedSearch, hasInitialized, dataOptions]);
+
+    useEffect(() => {
+		if (selectedItem) {
+			const selectedData = data?.find((item) => item?.datastakeId === selectedItem);
+			if(selectedData) {
+				const saved = {
+					label: selectedData.name,
+					value: selectedData.datastakeId,
+				}
+				StorageManager.set(storageKey, JSON.stringify(saved));
+			}
+		}
+	}, [selectedItem, storageKey]);
+
+    const debouncedSetSearch = useMemo(
+		() => debounce((value) => setDebouncedSearch(value), 300),
+		[]
+	  );
+
+	  const onSearch = useCallback((value) => {
+		setSearch(value);         
+		debouncedSetSearch(value);
+	  }, [debouncedSetSearch]);
+
+	
+	  useEffect(() => {
+		setDebouncedSearch("");
+	  }, [selectedItem]);
+
+      const filters = useMemo(() => {
+		return {
+		  pagination: { size: 20, page: 1 },
+		  ...(debouncedSearch
+			? { search: { qs: debouncedSearch, fields: ["name","datastakeId","orgShortName"] } }
+			: {}),
+		};
+	  }, [debouncedSearch]);
+
+      useEffect(() => {
+		if (_partners !== undefined) {
+			if ((params?.id !== null || (isPdf && id !== null)) && !hasSelect) {
+				getOne(params?.id || id, { sources: _partners });
+			}
+		}
+		if (hasSelect && !params?.id) {
+			getMultiple(filters);
+		}
+	}, [params?.id, hasSelect, getOne, getMultiple, _partners, isPdf, id, filters]);
+
+    	useEffect(() => {
+		if (selectedItem && _partners !== undefined) {
+			const fetchSingleItem = async () => {
+				setLoading(true);
+				try {
+					const { data } = await service.getOne(selectedItem, { sources: _partners });
+					setSingleItemData(data);
+				} catch (error) {
+					console.log(error);
+				} finally {
+					setLoading(false);
+				}
+			};
+			fetchSingleItem();
+		}
+	}, [selectedItem, service, _partners]);
+
+    useEffect(() => {
+		_setPartners(selectedPartners?.partners);
+	}, [selectedPartners]);
+
+    const sourceOptions = useMemo(() => {
+		return partners?.map((partner) => {
+			const isOwnData = partner.id === user?.company?.id;
+
+			return {
+				label: isOwnData ? t("Own Data") : partner.nickName,
+				value: partner.id,
+				avatar: isOwnData ? <span>OWN</span> : undefined,
+				background: isOwnData ? theme.colorPrimary7 : undefined,
+				color: isOwnData ? "white" : undefined,
+			};
+		});
+	}, [partners, user]);
+
+    return {
+        selectedItem,
+        setSelectedItem,
+        dataOptions,
+        search,
+        debouncedSearch,
+        onSearch,
+        setSearch,
+        setDebouncedSearch,
+        sourceOptions,
+        singleItemData,
+        loading,
+    }
+}

package/src/@daf/pages/Summary/Operator/index.jsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import DashboardLayout from '../../../core/components/Dashboard/DashboardLayout/index.jsx'
+import { Select, Spin } from 'antd'
+import { useSummary } from '../hook.js'
+import Header from '../../../core/components/Header/index.jsx'
+import Multiselect from '../../../core/components/Select/MultiSelect/index.jsx'
+import KeyInformation from './components/KeyInformation/index.js'
+import InformationAvailability from '../components/InformationAvailability/index.js'
+import TradeRelationships from './components/TradeRelationships/index.js'
+import Governance from './components/Governance/index.js'
+
+const OperatorSummary = ({
+    hasSelect = false,
+    loading = false,
+    getSingleData = () => {},
+    getMultipleData = () => {},
+    data = [],
+    id = '',
+    storageKey = '',
+    isPdf = false,
+    params = {},
+    partners = [],
+    selectedPartners = {},
+    user = {},
+    t = () => {},
+    theme = {},
+    service,
+    options = {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+    goBack = () => {},
+    onIdChange = () => {}
+}) => {
+    const { 
+        selectedItem, 
+        setSelectedItem, 
+        dataOptions,
+        search,
+        debouncedSearch,
+        onSearch,
+        setSearch,
+        setDebouncedSearch,
+        sourceOptions,
+        setSelectedPartners,
+        singleItemData,
+        loading: loadingData,
+    } = useSummary({
+            getOne: getSingleData,
+            getMultiple: getMultipleData, 
+            id, 
+            hasSelect, 
+            storageKey, 
+            data,
+            isPdf: false,
+            params,
+            partners,
+            selectedPartners,
+            user,
+            t,
+            theme,
+            service,
+            onIdChange,
+    });
+    
+    return (
+        <DashboardLayout
+            header={
+                <Header 
+                    title={t('Operator Summary')}
+                    className="with-border-header h-w-btn-header no-px-body"
+                    goBackTo={!hasSelect && goBack}
+                    addedHeaderFirst
+					actionButtons={[
+                        {
+							tooltip: t("Details"),
+							icon: "FileEdit",
+							onClick: () => {
+								goTo(getRedirectLink(`/app/view/operators/${params?.id ? params?.id : selectedItem}`));
+							},
+						},
+						{
+							tooltip: t("Find Data"),
+							icon: "Search",
+							onClick: () => {},
+							disabled: true,
+						},
+					]}
+                    addedHeader={
+						<div className="flex flex-row gap-4" style={{ marginRight: 8 }}>
+							<Multiselect
+								options={[...sourceOptions]}
+								isAvatarGroup
+								selectionType="checkbox"
+								key={partners?.length}
+								canUnselectLast={false}
+								onChange={(selected) => {
+									setSelectedPartners((prev) => ({
+										...prev,
+										partners: selected,
+										loading: false,
+									}));
+								}}
+								dropDownWidth={200}
+								defaultSelected={(partners || []).map((p) => p.id) || []}
+							/>
+						</div>
+					}
+                />
+            }
+        >
+            {hasSelect && (
+				<section>
+					<Select
+						showSearch
+						debounceTimeout={300}
+						onSearch={onSearch}
+						isSingle
+						style={{ height: "40px", width: "100%" }}
+						value={selectedItem}
+						onChange={setSelectedItem}
+						options={dataOptions}
+						filterOption={false}
+						loading={loading}
+						notFoundContent={loading ? <Spin size="small" /> : null}
+					/>
+				</section>
+			)}
+            <KeyInformation
+                options={options}
+                selectedPartners={selectedPartners}
+                t={t}
+                id={params?.id || selectedItem}
+                data={hasSelect ? singleItemData : data}
+                loading={loading}
+            />
+            <section>
+                <InformationAvailability
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                />
+            </section>
+            <section>
+                <TradeRelationships
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                    options={options}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                    operatorData={hasSelect ? singleItemData : data}
+                />
+            </section>
+            <section>
+                <Governance
+                    selectedPartners={selectedPartners}
+                    t={t}
+                    id={params?.id || selectedItem}
+                    options={options}
+                    goTo={goTo}
+                    getRedirectLink={getRedirectLink}
+                    operatorData={hasSelect ? singleItemData : data}
+                />
+            </section>
+
+        </DashboardLayout>
+    )
+}
+
+export default OperatorSummary

package/src/@daf/pages/Summary/components/InformationAvailability/components/Contributions/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Widget from '../../../../../../core/components/Dashboard/Widget/index.jsx';
+import BarChart from '../../../../../../core/components/Charts/BarChart/index.jsx';
+
+const Contributions = ({
+    data = {},
+    loading = false,
+    t = () => {},
+}) => {
+    return (
+        <Widget
+            title={t("Contributions")}
+            className="with-border-header h-w-btn-header"
+            loading={loading}
+        >
+            <BarChart
+                data={data?.stakeholders || []}
+                xFieldKey="completedDatapoints"
+                yFieldKey="author"
+                renderTooltipContent={(title, item) => {
+                    return {
+                        title: title,
+                        items: [
+                            {
+                                label: t("Datapoints"),
+                                value: item?.[0]?.data?.completedDatapoints || 0,
+                            },
+                        ],
+                    };
+                }}
+            />
+        </Widget>
+    )
+}
+
+export default Contributions

package/src/@daf/pages/Summary/components/InformationAvailability/components/InformationCompleteness/index.js

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../../core/components/Dashboard/Widget/index.jsx';
+import RadialBarChart from '../../../../../../core/components/Charts/RadialBarChart/index.jsx';
+
+const InformationCompleteness = ({
+    data = {},
+    loading = false,
+    t = () => {},
+}) => {
+
+    const graphData = useMemo(() => {
+        const keys = {
+          ownDataCompletion: data?.ownDataCompletion || 0,
+          consolidatedCompletion: data?.consolidatedCompletion || 0,
+        };
+    
+        const _data = Object.keys(keys).map((key) => {
+          const item = keys[key];
+    
+          if (!Array.isArray(item)) {
+            return {
+              label: key?.includes("own") ? t("Own Data") : t("Consolidated"),
+              value: item,
+            };
+          }
+        });
+    
+        return _data.filter((item) => item !== undefined);
+      }, [data]);
+
+    return (
+        <Widget
+            title={t("Information Completeness")}
+            loading={loading}
+            className="with-border-header h-w-btn-header"
+        >
+            <RadialBarChart
+                data={graphData}
+                renderTooltipContent={(title, item) => {
+                const value =
+                    item?.[0]?.data?.value > 100 ? 100 : item?.[0]?.data?.value || 0;
+
+                return {
+                    title: title,
+                    items: [
+                    {
+                        label: t("Completion"),
+                        value: `${value}%`,
+                    },
+                    ],
+                };
+                }}
+            />
+        </Widget>
+    )
+}
+
+export default InformationCompleteness