datastake-daf 0.6.382 → 0.6.384

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

@@ -1,7 +1,6 @@
 import ColumnChart from "./index";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../../Dashboard/Widget";
-import { splitStringInMultipleLines } from "../../../../../helpers/StringHelper.js";
 
 export default {
 	title: "Charts/ColumnChart",
@@ -457,29 +456,35 @@ export const Pdf = {
 		renderTooltipContent: renderTooltipContent,
 		showBackground: true,
 		isPercentage: 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',
+		shouldSeperateLegendName: true,
+		formattedXAxis: (s) => {
+			if (!s) return "";
+		  
+			const limit = 20;
+			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);
 				}
-			]
-		},
-		formattedXAxis: (s) => splitStringInMultipleLines(s, 25),
+				line = word;
+			  } else {
+				// move current line into result
+				if (line) result += line + "\n";
+				line = word;
+			  }
+			}
+		  
+			if (line) result += line;
+		  
+			return result;
+		  },
 	},
 	render: (args) => {
 		return <Widget title="Pdf Column Chart" className={"with-border-header"}>

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

@@ -3,8 +3,6 @@ import Container from "../style";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
 import { Column } from "@antv/g2plot";
-import CustomLegend from "../components/CustomLegend/index.js";
-import { useLegendConfig } from "../helper";
 
 const { useToken } = theme;
 
@@ -68,22 +66,9 @@ const { useToken } = theme;
  * - `color` (string | string[] | function):
  *   Custom color or color function for bars. If not provided, falls back to Ant Design's theme primary color.
  *
- * - `legendConfig` (object):
- *   Configuration for the custom legend:
- *   {
- *     enabled: boolean,           // Show/hide the legend (default: false)
- *     position: 'top' | 'bottom', // Legend position (default: 'bottom')
- *     items: Array<{              // Manual legend items (optional, auto-generated from data if not provided)
- *       label: string,            // Display label
- *       color: string,            // Color for this item
- *       description?: string      // Optional description/explanation
- *     }>,
- *     layout: 'horizontal' | 'vertical', // Legend layout (default: 'horizontal')
- *     interactive: boolean,       // Allow clicking to filter data (default: true)
- *     style: object              // Custom CSS styles for legend container
- *   }
  */
 
+
 export default function ColumnChart({
 	data = [],
 	xFieldKey = "label",
@@ -101,23 +86,17 @@ export default function ColumnChart({
 	color,
 	height,
 	groupField,
-	width,
-	legendConfig = {},
+	t = (s) => s,
 	isPdf = false,
+	extraLegendConfig = {},
+	shouldSeperateLegendName = false,
+	width,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
-	
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 
 	React.useEffect(() => {
 		if (!containerRef.current) {
@@ -165,7 +144,19 @@ export default function ColumnChart({
 						: formattedYAxis,
 				},
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => {
+					const textToTranslate = shouldSeperateLegendName ? text.split("-")[1].toLowerCase() : text
+					return t(textToTranslate)
+				  },
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
+			// Add background pattern only when showBackground is true and isPercentage is true
 			...(showBackground && isPercentage && {
 				columnBackground: {
 					style: {},
@@ -210,21 +201,8 @@ export default function ColumnChart({
 	return (
 		<div className="flex flex-1 flex-column justify-content-center">
 			<div className="flex justify-content-center">
-				<Container
-					ref={containerRef}
-					height={height}
-					isPdf={false}
-					width={width}
-				></Container>
+				<Container ref={containerRef} height={height} isPdf={isPdf} width={width}></Container>
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 }

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

@@ -126,59 +126,4 @@ export const MultipleSegments = {
             <DonutPie {...args} />
         </Widget>
     ),
-};
-
-export const Pdf = {
-    name: "Pdf",
-    args: {
-        data: multiData,
-        isPdf: true,
-        angleField: "value",
-        colorField: "type",
-        color: ["#028788", "#E8ED13", "#F68D16", "#5B8F59"],
-        tooltip: true,
-        renderTooltipContent: (title, data) => {
-            console.log("title", title, data);
-            return {
-                title,
-                items: data.map((item) => ({
-                    label: "TEXT",
-                    value: item.value,
-                })),
-            };
-        },
-        tooltipConfig: {
-            showTitle: false,
-        },
-        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',
-				}
-			]
-		},
-        height: 220,
-        innerRadius: 0.78,
-        radius: 1,
-    },
-    render: (args) => (
-        <Widget title="Donut Chart - Multiple Segments" className="with-border-header">
-            <DonutPie {...args} />
-        </Widget>
-    ),
 };

package/src/@daf/core/components/Charts/DonutPie/index.js

@@ -3,8 +3,6 @@ import Container from "../style";
 import { theme } from "antd";
 import { Pie } from "@antv/g2plot";
 import { renderTooltip } from "../../../../utils/tooltip";
-import CustomLegend from "../components/CustomLegend/index.js";
-import { useLegendConfig } from "../helper.js";
 
 const { useToken } = theme;
 
@@ -75,21 +73,13 @@ export default function DonutPie({
 	animation = false,
 	t = (s) => s,
 	isPdf = false,
-	legendConfig = {},
+	extraLegendConfig = {},
 	...rest
 }) {
 	const containerRef = useRef(null);
 	const chartRef = useRef(null);
 	const { token } = useToken();
-
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 	
 	// Memoize processed data for progress mode
 	const processedData = useMemo(() => {
@@ -122,7 +112,15 @@ export default function DonutPie({
 			color: color || [token.colorPrimary7, "#E8EDF3"],
 			radius,
 			innerRadius,
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			label,
 			statistic,
 			tooltip: tooltipOption,
@@ -170,14 +168,6 @@ export default function DonutPie({
 			<div className="flex justify-content-center">
 				<Container ref={containerRef} style={{ height }} isPdf={isPdf} />
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 }

package/src/@daf/core/components/Charts/DualAxes/DualAxes.stories.js

@@ -74,36 +74,3 @@ export const FormattedAxis = {
 	},
 	render: (args) => <DualAxesChart {...args} />,
 };
-
-export const Pdf = {
-	name: " Pdf",
-	args: {
-		formattedLeftAxis: (s) => `${s} units`,
-		formattedRightAxis: (s) => `${s} items`,
-		formattedXAxis: (s) => `Year ${s}`,
-		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) => <DualAxesChart {...args} />,
-};

package/src/@daf/core/components/Charts/DualAxes/index.js

@@ -3,8 +3,6 @@ import Container from "../style";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
 import { DualAxes } from "@antv/g2plot";
-import { useLegendConfig } from "../helper";
-import CustomLegend from "../components/CustomLegend/index.js";
 
 const { useToken } = theme;
 
@@ -20,22 +18,11 @@ export default function DualAxesChart({
 	formattedRightAxis = (s) => s,
 	formattedXAxis = (s) => s,
 	color,
-	legendConfig = {},
-	isPdf = false,
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
 
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
-
 	const _colours = useMemo(() => {
 		const defaultColours = [token.colorPrimary7, token.colorPrimary6, token.colorPrimary8];
 
@@ -133,14 +120,6 @@ export default function DualAxesChart({
 			<div className="flex justify-content-center">
 				<Container ref={containerRef} data-testid="dual-axes-chart"></Container>
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 }

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

@@ -156,8 +156,6 @@ export const MultipleLines = {
 	},
 };
 
-
-
 export const AreaChart = {
 	name: "Area Chart",
 	args: {
@@ -245,82 +243,3 @@ export const AutoHideXLabel = {
 		);
 	},
 };
-
-export const Pdf = {
-	name: "Pdf",
-	args: {
-		data: [
-			{ label: "Jan", value: 30, type: "gold" },
-			{ label: "Feb", value: 20, type: "gold" },
-			{ label: "Mar", value: 50, type: "gold" },
-			{ label: "Apr", value: 40, type: "gold" },
-			{ label: "May", value: 60, type: "gold" },
-			{ label: "Jun", value: 70, type: "gold" },
-			{ label: "Jul", value: 80, type: "gold" },
-			{ label: "Aug", value: 90, type: "gold" },
-			{ label: "Sep", value: 100, type: "gold" },
-			{ label: "Oct", value: 110, type: "gold" },
-			{ label: "Nov", value: 120, type: "gold" },
-			{ label: "Dec", value: 130, type: "gold" },
-
-			{ label: "Jan", value: 130, type: "silver" },
-			{ label: "Feb", value: 120, type: "silver" },
-			{ label: "Mar", value: 150, type: "silver" },
-			{ label: "Apr", value: 140, type: "silver" },
-			{ label: "May", value: 160, type: "silver" },
-			{ label: "Jun", value: 170, type: "silver" },
-			{ label: "Jul", value: 180, type: "silver" },
-			{ label: "Aug", value: 190, type: "silver" },
-			{ label: "Sep", value: 1100, type: "silver" },
-			{ label: "Oct", value: 1110, type: "silver" },
-			{ label: "Nov", value: 1120, type: "silver" },
-			{ label: "Dec", value: 1130, type: "silver" },
-		],
-		xFieldKey: "label",
-		yFieldKey: "value",
-		formattedYAxis: (s) => `${s}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) + "g",
-		renderTooltipContent: (title, data) => {
-			return {
-				title,
-				items: data.map((item) => ({
-					label: item.name,
-					value: item.value,
-					color: item.color,
-				})),
-			};
-		},
-		// isSmooth: true,
-		seriesField: "type",
-		color: ["#1890FF", "#2FC25B"], // Custom colors for different lines
-		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="Multiple Lines Chart" className={"with-border-header"}>
-				<LineChart {...args} />
-			</Widget>
-		);
-	},
-};

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

@@ -3,8 +3,6 @@ import Container from "../style";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
 import { Line } from "@antv/g2plot";
-import { useLegendConfig } from "../helper";
-import CustomLegend from "../components/CustomLegend/index.js";
 
 const { useToken } = theme;
 
@@ -86,22 +84,14 @@ export default function LineChart({
 	autoHideXLabel = true,
 	t = (s) => s,
 	isPdf = false,
-	legendConfig = {},
+	extraLegendConfig = {},
 	width,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
-
-	const {
-		legendEnabled,
-		legendItems, 
-		legendPosition, 
-		legendLayout, 
-		legendInteractive, 
-		legendStyle
-	} = useLegendConfig({legendConfig, isPdf});
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 	
 	React.useEffect(() => {
 		if (!containerRef.current) {
@@ -156,7 +146,15 @@ export default function LineChart({
 					fillOpacity: isArea ? 0.15 : 0,
 				},
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 		};
 
 		if (!chartRef.current) {
@@ -182,6 +180,7 @@ export default function LineChart({
 		renderTooltipContent,
 		tooltipConfig,
 		isPdf,
+		extraLegendConfig,
 		t,
 	]);
 
@@ -199,14 +198,6 @@ export default function LineChart({
 			<div className="flex justify-content-center">
 				<Container ref={containerRef} height={height} isPdf={isPdf} width={width}></Container>
 			</div>
-			{legendEnabled && legendPosition === 'bottom' && (
-				<CustomLegend
-					items={legendItems}
-					layout={legendLayout}
-					interactive={legendInteractive}
-					style={legendStyle}
-				/>
-			)}
 		</div>
 	);
 }

package/src/@daf/core/components/Charts/PieChart/PieChart.stories.js

@@ -44,55 +44,3 @@ export const Primary = {
 		isPercentage: true,
 	},
 };
-
-export const Pdf = {
-	name: "Pdf",
-	args: {
-		data: [
-			{
-				"percent": 0.8333333333333334,
-				"label": "Label 1",
-				"color": "#F5C2AC"
-			},
-			{
-				"percent": 0.06666666666666667,
-				"label": "Label 2",
-				"color": "#F0A888"
-			},
-			{
-				"percent": 0.06666666666666667,
-				"label": "Label 3",
-				"color": "#DF571E"
-			},
-			{
-				"percent": 0.03333333333333333,
-				"label": "Label 4",
-				"color": "#C04B19"
-			}
-		],
-		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',
-				}
-			]
-		},
-		isPercentage: true,
-	},
-};