datastake-daf 0.6.699 → 0.6.701

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.699",
+	"version": "0.6.701",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/rollup.config.js

@@ -119,6 +119,26 @@ export default [
 			}),
 		],
 	},	
+	{
+		input: "src/pages.js",
+		output: [
+			{
+				file: "dist/pages/index.js",
+				format: "cjs",
+			},
+		],
+		external,
+		plugins: [
+			nodePolyfills(),
+			resolve({ browser: true }),
+			babel({ exclude: "node_modules/**", babelrc: true }),
+			peerDep(),
+			commonjs({
+				include: /node_modules/,
+				requireReturnsDefault: "auto",
+			}),
+		],
+	},	
 	{
 		input: "src/layouts.js",
 		output: [

package/src/@daf/core/components/Icon/configs/Onboarding.js

@@ -0,0 +1,12 @@
+const config = {
+    viewBox: '0 0 19 19',
+    children: (
+        <>
+            <path d="M9.08333 17.4167C13.6857 17.4167 17.4167 13.6857 17.4167 9.08333C17.4167 4.48096 13.6857 0.75 9.08333 0.75C4.48096 0.75 0.75 4.48096 0.75 9.08333C0.75 13.6857 4.48096 17.4167 9.08333 17.4167Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M7 6.55444C7 6.15671 7 5.95784 7.08312 5.84681C7.15555 5.75006 7.26643 5.68953 7.38698 5.68092C7.52532 5.67104 7.6926 5.77858 8.02717 5.99366L11.961 8.52255C12.2513 8.70918 12.3965 8.8025 12.4466 8.92116C12.4904 9.02484 12.4904 9.14183 12.4466 9.24551C12.3965 9.36417 12.2513 9.45748 11.961 9.64412L8.02717 12.173C7.6926 12.3881 7.52532 12.4956 7.38698 12.4857C7.26643 12.4771 7.15555 12.4166 7.08312 12.3199C7 12.2088 7 12.01 7 11.6122V6.55444Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </>
+    )
+  }
+  
+  export default config;
+  

package/src/@daf/core/components/Icon/configs/index.js

@@ -212,9 +212,11 @@ import MagicWand from "./MagicWant";
 import Straatos from "./Straatos";
 import ArcGis from "./ArcGis";
 import AppAdmin from "./AppAdmin";
+import Onboarding from "./Onboarding";
 
 const config = {
 	AppAdmin,
+	Onboarding,
 	Right,
 	ApplicationForm,
 	Alert,

package/src/@daf/hooks/useSources.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import SourceService from "../services/SourceService.js";
 
 export default function useSource({ user = {}, t = () => {}, getData = () => {}, id }) {
 	const [loading, setLoading] = useState(true);
@@ -78,3 +79,31 @@ export default function useSource({ user = {}, t = () => {}, getData = () => {},
 		onSelectPartnersChange: handleSelectedPartnersChange,
 	};
 }
+
+export const useSources = ({type, id, user, t = () => {}}) => {
+	function getData(params) {
+		if(id) {
+			return SourceService.getSources({type, id});
+		} else {
+			return SourceService.get(null, params);
+		}
+	}
+
+	const { onSelectPartnersChange, partners, selectedPartners, setSelectedPartners } = useSource({
+		user,
+		t,
+		getData: getData,
+		id,
+	});
+
+	const informationSources = partners?.length > 0 ? partners?.length - 1 : 0;
+
+	return {
+		partners,
+		selectedPartners,
+		setSelectedPartners,
+		user,
+		informationSources: informationSources,
+		onSelectPartnersChange,
+	};
+}

package/src/@daf/hooks/useWidgetFetch.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import DashboardService from "../services/DashboardService.js";
+
+// config: {
+//     stop: boolean,
+//     defaultData: object,
+//     filters: object
+//     url: string
+//     basePath: string,
+// }
+
+export const useWidgetFetch = ({config, getData = DashboardService.getWidget, onFetch = () => {}}) => {
+    const { stop, defaultData, ...rest} = config;
+    const [ data, setData ] = useState(defaultData || {});
+    const [ loading, setLoading ] = useState(false);
+
+
+	const fetchData = async () => {
+		// if (stop) {
+		// 	return;
+		// }
+
+		setLoading(true);
+
+		try {
+			const { data } = await getData(rest);
+			setData(data || defaultData);
+            onFetch()
+		} catch (err) {
+			console.log(err);
+		}
+
+		setLoading(false);
+	};
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    return {
+        data,
+        loading,
+    }
+} 

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/GenderDistribution/config.js

@@ -0,0 +1,17 @@
+
+export const config = [
+	{ key: "male", label: "Male", color: "#4683DE" },
+	{ key: "female", label: "Female", color: "#A6C3EF" },
+	{ key: "other", label: "Other", color: "#B6CEF2" },
+];
+
+export const getRoleColors = (theme) => {
+    return [
+        theme.colorPrimary4,
+        theme.colorPrimary6,
+        theme.colorPrimary7,
+        theme.colorPrimary8,
+        theme.colorPrimary9,
+        theme.colorPrimary10,
+    ]
+};

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/GenderDistribution/index.js

@@ -0,0 +1,128 @@
+import React, { useMemo, useCallback } from 'react'
+import { getRoleColors, config } from './config';
+import PropTypes from 'prop-types';
+import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
+import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
+import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
+
+function GenderDistribution({
+    selectedSources = {},
+    isTradeActions = false,
+    loading = false,
+    data = [],
+    t = () => {},
+    theme = {},
+    options = {},
+}) {
+    const roleColors = getRoleColors(theme);
+
+    const pieData = useMemo(() => {
+		const total = Object.values(data).reduce((all, val) => all + (val || 0), 0);
+
+		if (isTradeActions) {
+			return Object.keys(data).map((key, index) => {
+				return {
+					percent: (data[key] || 0) / total,
+					color: roleColors[index % roleColors.length],
+					key: key,
+				};
+			});
+		} else {
+			return config.map((conf) => ({
+				percent: (data[conf.key] || 0) / total,
+				color: conf.color,
+				key: conf.key,
+			}));
+		}
+	}, [data, isTradeActions]);
+
+    const isEmpty = useMemo(() => Object.keys(data).filter((k) => !!data[k]).length === 0, [data]);
+
+	const getTooltipChildren = useCallback(
+		(item) => {
+			if (isTradeActions) {
+				if (isEmpty) {
+					return;
+				}
+
+				return renderTooltipJsx({
+					title: t("Role"),
+					items: [
+						{
+							label:
+								options?.optionPositionSupplyChain.find((o) => {
+									return o.value === item.key;
+								}).label || item.key,
+							value: data[item.key] || 0,
+						},
+					],
+				});
+			} else {
+				if (isEmpty) {
+					return renderTooltipJsx({
+						title: t("Gender"),
+						items: config.map((conf) => ({
+							label: t(conf.label),
+							value: 0,
+						})),
+					});
+				}
+
+				const _config = config.find((c) => c.key === item.key);
+
+				if (_config) {
+					return renderTooltipJsx({
+						title: t("Gender"),
+						items: [
+							{
+								label: t(_config.label),
+								value: `${Math.round(item.percent * 100)}%`,
+							},
+						],
+					});
+				}
+
+				return null;
+			}
+		},
+		[t, data, isTradeActions],
+	);
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{isTradeActions ? t("Role") : t("Workforce")}</div>}
+            className="with-border-header h-w-btn-header "
+        >
+            <div
+                style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                }}
+            >
+                <Chart
+                    mouseXOffset={10}
+                    mouseYOffset={10}
+                    changeOpacityOnHover={false}
+                    data={pieData}
+                    doConstraints={false}
+                    isPie
+                    t={t}
+                    isEmpty={isEmpty}
+                    getTooltipChildren={getTooltipChildren}
+                />
+            </div>
+        </Widget>
+    )
+}
+
+GenderDistribution.propTypes = {
+    selectedSources: PropTypes.object,
+    isTradeActions: PropTypes.bool,
+    loading: PropTypes.bool,
+    data: PropTypes.array,
+    t: PropTypes.func,
+    theme: PropTypes.object,
+    options: PropTypes.object,
+}
+export default GenderDistribution

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/Identification/hook.js

@@ -0,0 +1,79 @@
+import { useEffect, useState, useMemo } from "react";
+
+
+export function useIdentification({ data = undefined, theme = {}, options = {} }) {
+    const colors = [
+        theme.colorPrimary10,
+        theme.colorPrimary9,
+        theme.colorPrimary8,
+        theme.colorPrimary7,
+        theme.colorPrimary5,
+        theme.colorPrimary6,
+        theme.colorPrimary4,
+    ];
+
+    const [graphData, setGraphData] = useState([]);
+	const [allSeenProducts, setAllSeenProducts] = useState([]);
+
+	useEffect(() => {
+		const allSeenProducts = new Set();
+
+		Object.keys(data).forEach((date) => {
+			const item = data[date];
+			Object.keys(item).forEach((product) => {
+				allSeenProducts.add(product);
+			});
+		});
+
+		const allProductsArray = Array.from(allSeenProducts);
+		setAllSeenProducts(allProductsArray);
+
+		const _data = Object.keys(data)
+			.map((date) => {
+				const item = data[date];
+
+				return allProductsArray.map((product) => {
+					return {
+						date: date,
+						typeOfProduct: product,
+						value: item[product] || 0,
+					};
+				});
+			})
+			.flat();
+
+		setGraphData(_data);
+	}, [JSON.stringify(data)]);
+
+	const chartConfig = useMemo(() => {
+		return {
+			data: graphData,
+			xFieldKey: "date",
+			yFieldKey: "value",
+			seriesField: "typeOfProduct",
+			color: allSeenProducts.map((_, index) => colors[index % colors.length]),
+			renderTooltipContent: (title, items) => {
+				if (Array.isArray(items) && items[0]) {
+					const title = items[0].title;
+					const values = graphData.filter((d) => d.date === title);
+					return {
+						title: "Products",
+						items: values.map((val) => ({
+							label:
+								options.minerals.find(
+									(mineral) => mineral.value === val.typeOfProduct,
+								)?.label || val.typeOfProduct,
+							color: colors[
+								allSeenProducts.indexOf(val.typeOfProduct) % colors.length
+							],
+							value: val.value.toLocaleString(),
+						})),
+					};
+				}
+				return { title: "", items: [] };
+			},
+		};
+	}, [graphData, allSeenProducts, options.minerals]);
+
+	return chartConfig;
+}

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/Identification/index.js

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
+import LineChart from '../../../../../../../core/components/Charts/LineChart/index.jsx';
+import { Select } from 'antd';
+import { useIdentification } from './hook';
+import PropTypes from 'prop-types';
+
+function Identification({
+    selectedSources = {}, 
+    isTradeActions = false, 
+    loading = false, 
+    data = [], 
+    onChangeRange = () => {}, 
+    selectedRange = 'monthly', 
+    t = () => {},
+    theme = {},
+	options = {}
+}) {
+    const selectOptions = useMemo(
+		() => [
+			{ label: t("Daily"), value: "daily" },
+			{ label: t("Weekly"), value: "weekly" },
+			{ label: t("Monthly"), value: "monthly" },
+		],
+		[t],
+	);
+
+    const chartConfig = useIdentification({ data, theme, options });
+
+    return (
+		<Widget
+			loading={loading}
+			title={t("Identification")}
+			className="with-border-header"
+			addedHeader={
+				<>
+					<div className="flex-1" />
+					<Select
+						value={selectedRange}
+						style={{ width: 100 }}
+						onChange={onChangeRange}
+						options={selectOptions}
+						popupMatchSelectWidth={120}
+					/>
+				</>
+			}
+		>
+			<LineChart {...chartConfig} height="400px" t={t} />
+		</Widget>
+    )
+}
+
+Identification.propTypes = {
+    selectedSources: PropTypes.object,
+    isTradeActions: PropTypes.bool,
+    loading: PropTypes.bool,
+    data: PropTypes.array,
+    onChangeRange: PropTypes.func,
+    selectedRange: PropTypes.string,
+    t: PropTypes.func,
+    theme: PropTypes.object,
+}
+
+export default Identification

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/Locations/config.js

@@ -0,0 +1,9 @@
+export const getColors = (theme) => {
+    return [
+        theme.colorPrimary8,
+        theme.colorPrimary7,
+        theme.colorPrimary5,
+        theme.colorPrimary6,
+        theme.colorPrimary4,
+    ]
+}

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/components/Locations/index.js

@@ -0,0 +1,103 @@
+import React, { useMemo, useCallback } from 'react'
+import PropTypes from 'prop-types';
+import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
+import { findOptions } from '../../../../../../../../helpers/StringHelper.js';
+import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
+import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
+import { getColors } from './config';
+
+function Locations({selectedSources = {}, data = [], loading = false, t = () => {}, options = {}, theme = {}}) {
+    const { countries = [] } = options;
+    const colors = getColors(theme);
+
+    const pieData = useMemo(() => {
+        // eslint-disable-next-line no-shadow-restricted-names
+        const { undefined, ...rest } = data;
+        const total = Object.values(rest).reduce((all, val) => all + (val || 0), 0);
+    
+        return Object.keys(rest).map((key, index) => {
+          const color = colors[index % colors.length];
+        
+          return {
+            value: rest[key] || 0,
+            percent: (rest[key] || 0) / total,
+            color: color,
+            label: findOptions(key, countries),
+            key: key,
+          };
+        });
+    }, [data, countries]);
+
+    const isEmpty = useMemo(
+        () => Object.keys(data).filter((k) => !!data[k]).length === 0,
+        [data],
+    );
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+          if (isEmpty) {
+            if (!Object.keys(data).length) {
+              return null;
+            }
+    
+            return renderTooltipJsx({
+              title: t("Location"),
+              items: Object.keys(data).map((k) => ({
+                label: findOptions(k, countries),
+                value: 0,
+              })),
+            });
+          }
+    
+          return renderTooltipJsx({
+            title: t("Location"),
+            items: [
+              {
+                color: item.color,
+                label: t(item.label),
+                value: `${item.value || 0}`,
+              },
+            ],
+          });
+        },
+        [t, isEmpty, countries],
+      );
+
+
+    return (
+        <Widget
+            loading={loading}
+            title={<div>{t("Location")}</div>}
+            className="with-border-header h-w-btn-header"
+        >
+            <div
+            style={{
+                marginTop: "auto",
+                marginBottom: "auto",
+            }}
+            >
+            <Chart
+                mouseXOffset={10}
+                mouseYOffset={10}
+                changeOpacityOnHover={false}
+                data={pieData}
+                doConstraints={false}
+                isPie
+                t={t}
+                isEmpty={isEmpty}
+                getTooltipChildren={getTooltipChildren}
+            />
+            </div>
+        </Widget>
+    )
+}
+
+Locations.propTypes = {
+    selectedSources: PropTypes.object,
+    data: PropTypes.array,
+    loading: PropTypes.bool,
+    t: PropTypes.func,
+    options: PropTypes.object,
+    theme: PropTypes.object,
+}
+export default Locations

package/src/@daf/pages/dashboards/SupplyChain/components/ChartsContainer/index.js

@@ -0,0 +1,82 @@
+import React, { useState, useMemo } from 'react'
+import { useWidgetFetch } from '../../../../../hooks/useWidgetFetch.js';
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import Identification from './components/Identification';
+import Locations from './components/Locations';
+import PropTypes from 'prop-types';
+import GenderDistribution from './components/GenderDistribution';
+
+function ChartsContainer({selectedSources = {}, isTradeActions = false, t = () => {}, theme = {}, options = {}}) {
+    const [selectedRange, setSelectedRange] = useState("monthly");
+	const [previousRange, setPreviousRange] = useState("monthly");
+
+	function handleRangeChange(range) {
+		setPreviousRange(selectedRange);
+		setSelectedRange(range);
+	}
+
+    const defaultConfig = useMemo(
+		() => ({
+			basepath: "analytics",
+			url: isTradeActions ? "/widgets/supply-chain-trade-actors" : "/widgets/supply-chain-mines",
+			filters: {
+				sources: selectedSources?.partners || [],
+				range: selectedRange,
+			},
+			stop: selectedSources?.loading,
+			defaultData: [],
+		}),
+		[isTradeActions, selectedSources, selectedRange],
+	);
+
+    const { loading, data } = useWidgetFetch({config: defaultConfig, onFetch: () => setPreviousRange(selectedRange)});
+
+    return (
+        <Widget
+            title={isTradeActions ? t("Trade Actors") : t("Mining Sites")}
+            className="with-border-header"
+            loading={loading}
+        >
+            <section>
+                <Identification 
+                    data={data?.identification} 
+                    t={t} 
+                    theme={theme} 
+                    selectedSources={selectedSources} 
+                    isTradeActions={isTradeActions} 
+                    loading={loading} 
+                    onChangeRange={handleRangeChange} 
+                    selectedRange={selectedRange} 
+                    options={options}
+                />
+                <Locations 
+                    data={data?.locations} 
+                    t={t} 
+                    theme={theme} 
+                    selectedSources={selectedSources} 
+                    loading={loading} 
+                    options={options} 
+                />
+                <GenderDistribution
+                    selectedSources={selectedSources}
+                    isTradeActions={isTradeActions}
+                    loading={loading && previousRange === selectedRange}
+                    data={isTradeActions ? data.role : data.workforce}
+                    t={t}
+                    theme={theme}
+                    options={options}
+                />
+            </section>
+        </Widget>
+    )
+}
+
+export default ChartsContainer
+
+ChartsContainer.propTypes = {
+    selectedSources: PropTypes.object,
+    isTradeActions: PropTypes.bool,
+    t: PropTypes.func,
+    theme: PropTypes.object,
+    options: PropTypes.object,
+}