datastake-daf 0.6.783 → 0.6.785

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/dist/utils/index.js

@@ -7752,6 +7752,9 @@ function getRedirectPath(user, fallback = '', app, isDatastake) {
 }
 
 const en = {
+  "Site": "Site",
+  "Production Sites": "Production Sites",
+  "Type of account": "Type of account",
   "accounts": "Accounts",
   "users": "Users",
   "subjects": "Subjects",
@@ -9070,6 +9073,9 @@ const en = {
 };
 
 const fr = {
+  "Site": "Site",
+  "Production Sites": "Sites de production",
+  "Type of account": "Type de compte",
   "accounts": "Comptes",
   "users": "Utilisateurs",
   "subjects": "Sujets",
@@ -11022,6 +11028,9 @@ const fr = {
 };
 
 const sp = {
+  "Site": "Sitio",
+  "Production Sites": "Centros de producción",
+  "Type of account": "Tipo de cuenta",
   "Identified Customers": "Clientes identificados",
   "Identified Suppliers": "Proveedores identificados",
   "Associated Mine Sites": "Sitios mineros asociados",
@@ -13125,6 +13134,63 @@ const renderPercentage = val => {
   return val + "%";
 };
 
+/**
+ * Calculates stat change object for StatCard component based on current and previous values
+ * @param {Object} data - Object with current and previous values
+ * @param {number} data.current - Current value
+ * @param {number} data.previous - Previous value
+ * @param {Object} options - Optional configuration
+ * @param {string} options.tooltipText - Custom tooltip text
+ * @param {string} options.format - Format type: 'percentage' (default) or 'absolute'
+ * @param {number} options.decimalPlaces - Number of decimal places for percentage (default: 1)
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+const calculateStatChange = (data, options = {}) => {
+  if (!data || typeof data !== 'object') {
+    return null;
+  }
+  const {
+    current,
+    previous
+  } = data;
+
+  // Validate that both values are numbers
+  if (typeof current !== 'number' || typeof previous !== 'number') {
+    return null;
+  }
+
+  // If previous is 0, we can't calculate percentage change
+  if (previous === 0) {
+    return null;
+  }
+  const {
+    tooltipText,
+    format = 'percentage',
+    decimalPlaces = 1
+  } = options;
+
+  // Calculate the difference
+  const difference = current - previous;
+  const isPositive = difference >= 0;
+  const direction = isPositive ? 'up' : 'down';
+
+  // Format the value
+  let value;
+  if (format === 'absolute') {
+    // Show absolute difference
+    value = Math.abs(difference).toLocaleString();
+  } else {
+    // Show percentage change
+    const percentageChange = Math.abs(difference) / previous * 100;
+    value = `${percentageChange.toFixed(decimalPlaces)}%`;
+  }
+  return {
+    value,
+    direction,
+    tooltipText: tooltipText || undefined
+  };
+};
+
 /**
  * Enum for message types used with Ant Design message component
  * @enum {string}
@@ -14899,6 +14965,7 @@ exports.buildBreadCrumbsHelper = buildBreadCrumbs;
 exports.buildBreadcrumbs = buildBreadcrumbs;
 exports.buildKeyIndicatorsConfig = buildKeyIndicatorsConfig;
 exports.buildQueryString = buildQueryString;
+exports.calculateStatChange = calculateStatChange;
 exports.camelCaseToTitle = camelCaseToTitle;
 exports.capitalize = capitalize;
 exports.capitalizeAll = capitalizeAll;

package/package.json

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

package/src/@daf/core/components/Charts/BarChart/index.jsx

@@ -123,7 +123,7 @@ export default function BarChart({
 							},
 					  }
 					: {}),
-				...xAxisConfig,
+				...(Object.keys(xAxisConfig).length > 0 ? xAxisConfig : {}),
 				label: {
 					formatter: isPercentage
 						? (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) + " %"

package/src/@daf/core/components/Dashboard/Map/ChainIcon/utils.js

@@ -117,13 +117,13 @@ export function getStakeholderPosition({ zoom, totalMarkers, markerIndex }) {
 	return { x, y, center, radius, angleDeg };
 }
 
-function applyAnimationDirect(el, isShortLink) {
+function applyAnimationDirect(el, isShortLink, lineFlow = "downstream") {
 	if (!(el instanceof SVGElement) || isShortLink) return;
   
 	el.style.strokeDasharray = "10, 10";
 	el.style.strokeDashoffset = "0";
   
-	el.style.animation = "dash-flow 1.2s linear infinite";
+	el.style.animation = `dash-flow 1.2s linear infinite ${lineFlow === "upstream" && "reverse"}`;
   
 	el.classList.add('animated-polyline');
 }

package/src/@daf/core/components/Screens/BaseScreen/index.jsx

@@ -150,6 +150,7 @@ const BaseScreen = ({
 						showFilters={showFilters}
 						defaultFilters={defaultFilters}
 						onChange={onTableChange}
+						t={t}
 						{...rest}
 					/>
 					<Pagination

package/src/@daf/core/components/Select/MultiSelect/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { Avatar, Checkbox } from "antd";
 import { theme } from "antd";
 import React from "react";
+import MultiSelectStyled from "./style";
 const { useToken } = theme;
 
 /**
@@ -163,7 +164,7 @@ export default function Multiselect({
 	};
 
 	return (
-		<Select
+		<MultiSelectStyled
 			mode={isSingle ? undefined : "multiple"}
 			value={selectValue}
 			onChange={onSelectChange}
@@ -231,6 +232,7 @@ export default function Multiselect({
 											display: "flex",
 											alignItems: "center",
 											justifyContent: "center",
+											padding: 0,
 										}}
 									>
 										{option?.avatar || getFirstChar(option?.label)}
@@ -289,7 +291,7 @@ export default function Multiselect({
 				}
 			}}
 			{...restProps}
-		></Select>
+		></MultiSelectStyled>
 	);
 }
 

package/src/@daf/core/components/Select/MultiSelect/style.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Select } from 'antd';
+
+const MultiSelectStyled = styled(Select)`
+  &.ant-select-single {
+    .ant-select-selector {
+        padding-inline-end: 24px !important;
+        padding: 0 !important;
+        max-width: 56px !important;
+        width: 56px !important;
+    }
+  }
+`;
+
+export default MultiSelectStyled;

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

@@ -18,7 +18,9 @@ export const useGetQueryParams = ({location}) => {
           },
           otherParams: {
             ...rest,
-          }
+          },
+          sortBy,
+          sortDir,
         };
       }, [queryParams]);
 

package/src/@daf/pages/Dashboards/UserDashboard/components/ContributionsGraph/hook.js

@@ -12,6 +12,7 @@ export const useContributionsGraph = ({
 	}, [data, t]);
 
     const isEmpty = useMemo(() => _data?.length === 0, [_data]);
+    console.log({_data, isEmpty})
 
     const chartConfig = useMemo(() => {
         return {
@@ -20,13 +21,11 @@ export const useContributionsGraph = ({
             yFieldKey: "category",
             seriesField: "type",
             isGroup: true,
-            ...(isEmpty && {
-                xAxisConfig: {
-                    min: 0,
-                    max: 10,
-                    tickCount: 5,
-                }
-            }),
+            xAxisConfig: isEmpty ? {
+                min: 0,
+                max: 10,
+                tickCount: 5,
+            } : {},
             renderTooltipContent: (title, items) => {
 				const tooltipItems = items.map((item) => ({
 					label: item.name,

package/src/@daf/pages/Dashboards/UserDashboard/components/ContributionsGraph/index.jsx

@@ -41,7 +41,7 @@ function ContributionsGraph({
             title={t("Contributions")}
             className="with-border-header h-w-btn-header no-px-body"
         >
-            <BarChart {...chartConfig} height="400px" t={t} />
+            <BarChart {...chartConfig} height="400px" t={t} key={data?.length} />
         </Widget>
     )
 }

package/src/@daf/pages/Documents/config.js

@@ -1,10 +1,10 @@
 export const getFiltersConfig = ({t}) => {
     return {
-   timeframe: {
-		type: "timeframe",
-		label: "Timeframe",
-		style: { flex: 1 },
-	},
+		timeframe: {
+			type: "timeframe",
+			label: "Timeframe",
+			style: { flex: 1 },
+		},
     }
 }
 

package/src/@daf/pages/Events/Activities/columns.js

@@ -14,6 +14,8 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         title: t('ID'),
         ellipsis: true,
         show: true,
+        key: "datastakeId",
+        sorter: () => 0 + 0,
         render: (v, all) => {
           if (all.empty) {
             return <div className="daf-default-cell" />
@@ -27,6 +29,8 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         title: t('Title'),
         ellipsis: true,
         show: true,
+        key: "name",
+        sorter: () => 0 + 0,
         render: (v, all) => {
           if (all.empty) {
             return <div className="daf-default-cell" />
@@ -39,6 +43,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
       title: t("Date"),
       dataIndex: "date",
       key: "date",
+      sorter: () => 0 + 0,
       render: (date, all) => {
           if (all.empty) {
               return <div className="daf-default-cell" />;