datastake-daf 0.6.382 → 0.6.384

package/src/@daf/core/components/Charts/PieChart/chart.jsx

@@ -2,8 +2,6 @@ import PropTypes from 'prop-types'
 import React, { useCallback, useMemo, useRef, useState, Fragment } from 'react';
 import Tooltip from './tooltip.jsx';
 import { ChartStyle, LegendStyle } from './style.js';
-import { useLegendConfig } from '../helper.js';
-import CustomLegend from '../components/CustomLegend/index.js';
 
 const Chart = ({
   data = [],
@@ -20,7 +18,6 @@ const Chart = ({
   children = null,
   legend,
   isPdf = false,
-  legendConfig = {},
   isPercentage = false,
 }) => {
   const [hoveredGroup, setHoveredGroup] = useState(null);
@@ -30,15 +27,6 @@ const Chart = ({
   const [mouseX, setMouseX] = useState(0);
   const [mouseLocked, setMouseLocked] = useState(false);
 
-  const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
-
   const getCoordinatesForPercent = useCallback((percent) => [
     Math.cos(2 * Math.PI * percent),
     Math.sin(2 * Math.PI * percent),
@@ -69,6 +57,41 @@ const Chart = ({
     }
   }, [svgRef, containerRef, hoveredGroup, mouseLocked]);
 
+  const legendConfig = useMemo(() => {
+    if (legend === false || legend === null) {
+      return isPdf ? {} : null;
+    }
+  
+    if (typeof legend === 'object') {
+      return legend;
+    }
+  
+    if (legend === true || isPdf) {
+      return {};
+    }
+  
+    return null;
+  }, [legend, isPdf]);
+  
+  
+  const legendItems = useMemo(() => {
+    const items = Array.isArray(data) ? data : [];
+
+    if (!legendConfig) {
+      return [];
+    }
+
+    const { itemName } = legendConfig;
+    const getName = typeof itemName?.formatter === 'function'
+      ? (item, index) => itemName.formatter(item.name || item.label || `Item ${index + 1}`, item, index)
+      : (item, index) => item.name || item.label || `Item ${index + 1}`;
+
+    return items.map((item, index) => ({
+      ...item,
+      label: getName(item, index),
+    }));
+  }, [data, legendConfig]);
+
   const dataToShow = useMemo(() => {
     let cumulativePercent = 0;
     function getRotationAngle(percent) {
@@ -196,14 +219,61 @@ const Chart = ({
         {dataToShow}
       </svg>
       {tooltip}
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
+      {!!legendConfig && legendItems.length > 0 && (
+        <LegendStyle className={legendConfig?.className} data-position={legendConfig?.position || 'bottom'}>
+          {legendItems.map((item, index) => {
+            const markerStyle = legendConfig?.marker || {};
+
+            return (
+              <li
+                key={item.id ?? index}
+                className={item.className}
+                onMouseEnter={() => {
+                  if (mouseLocked) {
+                    return;
+                  }
+
+                  setHoveredGroup({ ...item, id: index, fromLegend: true });
+                }}
+                onMouseLeave={() => {
+                  if (mouseLocked) {
+                    return;
+                  }
+
+                  setHoveredGroup(null);
+                }}
+                onClick={() => {
+                  if (!changeOpacityOnHover) {
+                    return;
+                  }
+
+                  if (hoveredGroup?.id === index && hoveredGroup?.fromLegend) {
+                    setHoveredGroup(null);
+                    setMouseLocked(false);
+                    return;
+                  }
+
+                  setHoveredGroup({ ...item, id: index, fromLegend: true });
+                  setMouseLocked((prev) => !prev);
+                }}
+              >
+                <span
+                  className="legend-marker"
+                  style={{
+                    backgroundColor: item.color,
+                    width: markerStyle?.size || 12,
+                    height: markerStyle?.size || 12,
+                    borderRadius: markerStyle?.shape === 'square' ? 2 : '50%',
+                    border: markerStyle?.style === 'line' ? `2px solid ${item.color}` : undefined,
+                    background: markerStyle?.style === 'line' ? 'transparent' : item.color,
+                  }}
+                />
+                <span>{item.label}</span>
+              </li>
+            );
+          })}
+        </LegendStyle>
+      )}
       {children}
     </ChartStyle>
   );

package/src/@daf/core/components/Charts/RadarChart/RadarChart.stories.jsx

@@ -77,55 +77,3 @@ export const WithMultipleSeries = {
     </Widget>
   ),
 };
-
-export const Pdf = {
-  args: {
-    data: [
-      { item: "Category 1", score: 70, type: "Series 1" },
-      { item: "Category 2", score: 30, type: "Series 1" },
-      { item: "Category 3", score: 60, type: "Series 1" },
-      { item: "Category 4", score: 90, type: "Series 1" },
-      { item: "Category 5", score: 50, type: "Series 1" },
-      { item: "Category 6", score: 80, type: "Series 1" },
-      { item: "Category 1", score: 40, type: "Series 2" },
-      { item: "Category 2", score: 80, type: "Series 2" },
-      { item: "Category 3", score: 35, type: "Series 2" },
-      { item: "Category 4", score: 55, type: "Series 2" },
-      { item: "Category 5", score: 75, type: "Series 2" },
-      { item: "Category 6", score: 0, type: "Series 2" },
-    ],
-    seriesField: "type",
-    color: ["#1890FF", "#2FC25B"], // Added two distinct colors for the series
-    height: 300,
-    legendConfig: {
-			enabled: false,
-			position: 'bottom',
-			layout: 'horizontal',
-			items: [
-				{
-					id: 'baseline',
-					label: 'Baseline',
-					color: '#96b1ff',
-				},
-				{
-					id: 'improvement',
-					label: 'Improvement',
-					color: '#4b6ae7',
-				},
-				{
-					id: 'profit',
-					label: 'Net Profit',
-					color: '#52c41a',
-				}
-			]
-		},
-    isPdf: true,
-  },
-  render: (args) => (
-    <Widget title="Pdf">
-      <div style={{ height: "800px", width: "100%" }}>
-        <RadarChart {...args} />
-      </div>
-    </Widget>
-  ),
-};

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

@@ -3,8 +3,6 @@ import { Radar } from "@antv/g2plot";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
 import Container from "../style";
-import { useLegendConfig } from "../helper";
-import CustomLegend from "../components/CustomLegend/index.js";
 
 const { useToken } = theme;
 
@@ -22,23 +20,12 @@ const RadarChart = ({
 	// fillOpacity = 0.5,
 	score = { min: 0, max: 100 },
 	height,
-	isPdf = false,
-	legendConfig = {},
 	...rest
 }) => {
 	const containerRef = useRef(null);
 	const chartRef = useRef(null);
 	const { token } = useToken();
 
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
-
 	useEffect(() => {
 		if (!containerRef.current) {
 			return;
@@ -146,14 +133,6 @@ const RadarChart = ({
 			<div className="flex justify-content-center">
 				<Container ref={containerRef} height={height}></Container>
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 };

package/src/@daf/core/components/Charts/RadialBarChart/RadialBarChart.stories.jsx

@@ -47,8 +47,6 @@ export const Primary = {
 	},
 };
 
-
-
 export const Empty = {
 	name: "Empty",
 	args: {
@@ -116,57 +114,3 @@ export const WithColor = {
 		);
 	},
 };
-
-
-export const Pdf = {
-	name: "Pdf",
-	args: {
-		data: [
-			{ label: "X6", value: 57 },
-			{ label: "G", value: 0 },
-			{ label: "AVA", value: 5 },
-			{ label: "G2Plot", value: 78 },
-		],
-
-		renderTooltipContent: (title, data) => {
-			console.log("title", title, data);
-			return {
-				title,
-				items: data.map((item) => ({
-					label: "TEXT",
-					value: item.value,
-				})),
-			};
-		},
-		isPdf: true,
-		legendConfig: {
-			enabled: false,
-			position: 'bottom',
-			layout: 'horizontal',
-			items: [
-				{
-					id: 'baseline',
-					label: 'Baseline',
-					color: '#96b1ff',
-				},
-				{
-					id: 'improvement',
-					label: 'Improvement',
-					color: '#4b6ae7',
-				},
-				{
-					id: 'profit',
-					label: 'Net Profit',
-					color: '#52c41a',
-				}
-			]
-		},
-	},
-	render: (args) => {
-		return (
-			<Widget title="Radial Bar Chart" className={"with-border-header"}>
-				<RadialBarChart {...args} />
-			</Widget>
-		);
-	},
-};

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

@@ -3,9 +3,6 @@ import { RadialBar } from "@antv/g2plot";
 import React, { useMemo, useRef, useEffect } from "react";
 import { renderTooltip } from "../../../../utils/tooltip";
 import { theme } from "antd";
-import { useLegendConfig } from "../helper";
-import CustomLegend from "../components/CustomLegend/index.js";
-
 //Just renders a chart with 2 bars with 0 value as empty state.
 const EMPTY_STATE_ARRAY = [
 	{ label: "1", value: 0 },
@@ -65,22 +62,11 @@ export default function RadialBarChart({
 	animation = false,
 	isPercentage = true,
 	color,
-	isPdf = false,
-	legendConfig = {},
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
 
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
-
 	const formattedData = useMemo(() => {
 		return data.map((item) => ({
 			...item,
@@ -194,14 +180,6 @@ export default function RadialBarChart({
 			<div className="flex justify-content-center">
 				<Container ref={containerRef}></Container>
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 }

package/src/@daf/core/components/Charts/StackChart/StackChart.stories.jsx

@@ -418,28 +418,6 @@ export const WithCustomObject = {
 			environmental: "#f9b836",
 		},
 		isPdf: true,
-		legendConfig: {
-			enabled: false,
-			position: 'bottom',
-			layout: 'horizontal',
-			items: [
-				{
-					id: 'baseline',
-					label: 'Baseline',
-					color: '#96b1ff',
-				},
-				{
-					id: 'improvement',
-					label: 'Improvement',
-					color: '#4b6ae7',
-				},
-				{
-					id: 'profit',
-					label: 'Net Profit',
-					color: '#52c41a',
-				}
-			]
-		},
 	},
 	render: (args) => {
 		return <StackChart {...args} />;

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

@@ -3,9 +3,6 @@ import { Style, StyleWrapper } from "./classes.js";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import { Popover, theme } from "antd";
 import { renderTooltipJsx as renderDafTooltip } from "../../../../utils/tooltip.js";
-import { useLegendConfig } from "../helper.js";
-import CustomLegend from "../components/CustomLegend/index.js";
-
 const { useToken } = theme;
 /**
  * StackChart Component
@@ -88,7 +85,6 @@ export default function StackChart({
 	height = 300,
 	isPdf = false,
 	t = (s) => s,
-	legendConfig = {},
 }) {
 	const ref = React.useRef();
 	const { token } = useToken();
@@ -106,15 +102,6 @@ export default function StackChart({
 		return Array.from(uniqueLabels);
 	}, [data, xFieldKey]);
 
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
-
 	const groupedByLabel = React.useMemo(() => {
 		return data.reduce((acc, item) => {
 			const label = item[xFieldKey];
@@ -243,7 +230,7 @@ export default function StackChart({
 	);
 
 	return (
-		<>
+		<StyleWrapper>
 		<Style
 			{...(isEmpty
 				? {
@@ -271,14 +258,19 @@ export default function StackChart({
 				{content()}
 			</div>
 		</Style>
-		{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
+			{isPdf && (
+				<div className="legend">
+					{Object.entries(seriesColors).map(([series, color]) => (
+						<div key={series} className="legend-item">
+							<span
+								className="legend-color"
+								style={{ backgroundColor: color || token.colorPrimary7 }}
+							/>
+							<span className="legend-label">{t(series)}</span>
+						</div>
+					))}
+				</div>
 			)}
-		</>
+		</StyleWrapper>
 	);
 }

package/src/@daf/core/components/Screens/Admin/AdminModals/AddUser/index.jsx

@@ -24,6 +24,8 @@ export default function AddUserModal({ isOpen, defaultData = {}, userRoles = [],
 			.catch(() => {});
 	};
 
+	console.log("hellooooooooooooooooooooooooo");
+
 	return (
 		<Modal
 			open={isOpen}
@@ -55,7 +57,7 @@ export default function AddUserModal({ isOpen, defaultData = {}, userRoles = [],
 						}}
 					/>
 				</Form.Item>
-				{accountUsed && (
+				{/* {accountUsed && (
 					<Alert
 						message={t("FB00001")}
 						type="error"
@@ -64,7 +66,7 @@ export default function AddUserModal({ isOpen, defaultData = {}, userRoles = [],
 						closable
 						onClose={() => setAccountUsed(false)}
 					/>
-				)}
+				)} */}
 
 				<Form.Item name="role" label={t("Role")} rules={[{ required: true }]}>
 					<Select

package/src/@daf/core/components/Screens/Admin/AdminModals/NewUser/index.jsx

@@ -2,7 +2,7 @@ import Modal from "../../../../Modal/index.jsx";
 import { Form, Select, Alert, Input } from "antd";
 import { useState, useEffect } from "react";
 
-export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [] }) {
+export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [], addUser = () => {} }) {
 	const [MainForm] = Form.useForm();
 	const [accountUsed, setAccountUsed] = useState(false);
 
@@ -18,8 +18,26 @@ export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [
 	const onSubmit = () => {
 		MainForm.validateFields()
 			.then((val) => {
-				console.log(val);
-				setAccountUsed(true);
+				// Create user object with the form data
+				const userData = {
+					firstName: val.firstName,
+					lastName: val.lastName,
+					email: val.email,
+					role: val.role,
+					apps: {
+						straatos: {
+							role: val.role,
+							access: true
+						}
+					}
+				};
+				
+				// Add user to local state
+				addUser(userData);
+				
+				// Close modal and reset form
+				onClose();
+				MainForm.resetFields();
 			})
 			.catch(() => {});
 	};
@@ -45,7 +63,7 @@ export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [
 						}}
 					/>
 				</Form.Item>
-				{accountUsed && (
+				{/* {accountUsed && (
 					<Alert
 						message={t("FB00001")}
 						type="error"
@@ -54,7 +72,7 @@ export default function NewUser({ t, isOpen, onClose, defaultData, userRoles = [
 						closable
 						onClose={() => setAccountUsed(false)}
 					/>
-				)}
+				)} */}
 
 				<Form.Item name="role" label={t("Role")} rules={[{ required: true }]}>
 					<Select

package/src/@daf/core/components/Screens/Admin/AdminViews/components/Edit/index.jsx

@@ -58,6 +58,16 @@ export default function Edit({
 		}));
 	}, []);
 
+	const addUser = useCallback((userData) => {
+		setIsChanged(true);
+		setData((prev) => ({
+			...prev,
+			users: [...(prev.users || []), {
+				...userData,
+			}]
+		}));
+	}, []);
+
 	const onSuspend = () => {
 		Modal.confirm({
 			title: t("sbg-admin::suspend-title"),
@@ -105,7 +115,7 @@ export default function Edit({
 			onCancel: () => {},
 		});
 	};
-
+console.log("good morning",module);
 	const renderItem = (item) => {
 		if (item.type === "users") {
 			return (
@@ -118,6 +128,7 @@ export default function Edit({
 					userRoles={userRoles}
 					deleteUser={deleteUser}
 					updateUser={updateUser}
+					addUser={addUser}
 					goTo={goTo}
 					accountStatuses={accountStatuses}
 					transferAdmin={transferAdmin}

package/src/@daf/core/components/Screens/Admin/AdminViews/components/Users/helper.js

@@ -86,6 +86,8 @@ export const getColumns = ({
 				);
 
 				if (isView) {
+					console.log("role--------------",role)
+					console.log("options--------------",options)
 					const title = findOptions(role, options);
 					return <Tooltip title={title}>{title}</Tooltip>;
 				}

package/src/@daf/core/components/Screens/Admin/AdminViews/components/Users/index.jsx

@@ -29,6 +29,7 @@ export default function Users({
 	accountStatuses,
 	deleteUser = () => {},
 	updateUser = () => {},
+	addUser = () => {},
 	transferAdmin = () => {},
 }) {
 	const [hasError, setHasError] = useState(false);
@@ -177,6 +178,7 @@ export default function Users({
 				isOpen={newUserModalVisible}
 				onClose={() => setNewUserModalVisible(false)}
 				userRoles={userRoles}
+				addUser={addUser}
 			/>
 		</div>
 	);

package/src/helpers/StringHelper.js

@@ -164,32 +164,3 @@ export const renderTemplateStringInObject = (obj, variables) => {
 export const truncateString = (str, n) => {
 	return str?.length > n ? `${str.slice(0, n)}...` : str || "";
 };
-
-
-export const splitStringInMultipleLines = (s, limit = 20) => {
-    if (!s) return "";
-    
-    let result = "";
-    let line = "";
-    
-    for (let word of s.split(" ")) {
-      if ((line + word).length <= limit) {
-      line += (line ? " " : "") + word;
-      } else if (word.length > limit) {
-      // break long word with hyphen
-      while (word.length > limit) {
-        result += word.slice(0, limit - 1) + "-\n";
-        word = word.slice(limit - 1);
-      }
-      line = word;
-      } else {
-      // move current line into result
-      if (line) result += line + "\n";
-      line = word;
-      }
-    }
-    
-    if (line) result += line;
-    
-    return result;
-}

package/src/utils.js

@@ -9,7 +9,7 @@ export { renderTooltip, renderTooltipJsx } from './@daf/utils/tooltip'
 export { getRangeOfTicks } from './helpers/chart'
 
 export { propHasValue } from './helpers/deepFind'
-export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString, splitStringInMultipleLines } from './helpers/StringHelper'
+export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString } from './helpers/StringHelper'
 export { getNkey, groupSubsections, getImageUploadViewValue } from './@daf/core/components/ViewForm/helper'
 export { renderRows } from './@daf/core/components/Table/helper'
 export { filterOptions, filterString, hasNotChanged, filterSelectOptions, mapSubGroupsInSubmit, mapSubGroupsInGet, filterCreateData, changeInputMeta, renderDateFormatted } from './helpers/Forms'