datastake-daf 0.6.382 → 0.6.384

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

@@ -514,447 +514,4 @@ export const FormattedAxes = {
       <AreaChart {...args} />
     </Widget>
   ),
-};
-
-export const Pdf = {
-    name: "Pdf",
-    args: {
-      data: [
-      {
-          "date": "Jun\n24",
-          "Score": 0,
-          "key": 0,
-          "step": "100%"
-      },
-      {
-          "date": "Jun\n24",
-          "Score": 0,
-          "key": 0,
-          "step": "75-99%"
-      },
-      {
-          "date": "Jun\n24",
-          "Score": 0,
-          "key": 0,
-          "step": "50-75%"
-      },
-      {
-          "date": "Jun\n24",
-          "Score": 0,
-          "key": 0,
-          "step": "25-50%"
-      },
-      {
-          "date": "Jun\n24",
-          "Score": 0,
-          "key": 0,
-          "step": "0-25%"
-      },
-      {
-          "date": "Jul\n24",
-          "Score": 0,
-          "key": 1,
-          "step": "100%"
-      },
-      {
-          "date": "Jul\n24",
-          "Score": 0,
-          "key": 1,
-          "step": "75-99%"
-      },
-      {
-          "date": "Jul\n24",
-          "Score": 0,
-          "key": 1,
-          "step": "50-75%"
-      },
-      {
-          "date": "Jul\n24",
-          "Score": 0,
-          "key": 1,
-          "step": "25-50%"
-      },
-      {
-          "date": "Jul\n24",
-          "Score": 0,
-          "key": 1,
-          "step": "0-25%"
-      },
-      {
-          "date": "Aug\n24",
-          "Score": 0,
-          "key": 2,
-          "step": "100%"
-      },
-      {
-          "date": "Aug\n24",
-          "Score": 0,
-          "key": 2,
-          "step": "75-99%"
-      },
-      {
-          "date": "Aug\n24",
-          "Score": 0,
-          "key": 2,
-          "step": "50-75%"
-      },
-      {
-          "date": "Aug\n24",
-          "Score": 0,
-          "key": 2,
-          "step": "25-50%"
-      },
-      {
-          "date": "Aug\n24",
-          "Score": 0,
-          "key": 2,
-          "step": "0-25%"
-      },
-      {
-          "date": "Sep\n24",
-          "Score": 0,
-          "key": 3,
-          "step": "100%"
-      },
-      {
-          "date": "Sep\n24",
-          "Score": 0,
-          "key": 3,
-          "step": "75-99%"
-      },
-      {
-          "date": "Sep\n24",
-          "Score": 0,
-          "key": 3,
-          "step": "50-75%"
-      },
-      {
-          "date": "Sep\n24",
-          "Score": 0,
-          "key": 3,
-          "step": "25-50%"
-      },
-      {
-          "date": "Sep\n24",
-          "Score": 0,
-          "key": 3,
-          "step": "0-25%"
-      },
-      {
-          "date": "Oct\n24",
-          "Score": 0,
-          "key": 4,
-          "step": "100%"
-      },
-      {
-          "date": "Oct\n24",
-          "Score": 0,
-          "key": 4,
-          "step": "75-99%"
-      },
-      {
-          "date": "Oct\n24",
-          "Score": 0,
-          "key": 4,
-          "step": "50-75%"
-      },
-      {
-          "date": "Oct\n24",
-          "Score": 0,
-          "key": 4,
-          "step": "25-50%"
-      },
-      {
-          "date": "Oct\n24",
-          "Score": 0,
-          "key": 4,
-          "step": "0-25%"
-      },
-      {
-          "date": "Nov\n24",
-          "Score": 0,
-          "key": 5,
-          "step": "100%"
-      },
-      {
-          "date": "Nov\n24",
-          "Score": 0,
-          "key": 5,
-          "step": "75-99%"
-      },
-      {
-          "date": "Nov\n24",
-          "Score": 0,
-          "key": 5,
-          "step": "50-75%"
-      },
-      {
-          "date": "Nov\n24",
-          "Score": 0,
-          "key": 5,
-          "step": "25-50%"
-      },
-      {
-          "date": "Nov\n24",
-          "Score": 1,
-          "key": 5,
-          "step": "0-25%"
-      },
-      {
-          "date": "Dec\n24",
-          "Score": 1,
-          "key": 6,
-          "step": "100%"
-      },
-      {
-          "date": "Dec\n24",
-          "Score": 9,
-          "key": 6,
-          "step": "75-99%"
-      },
-      {
-          "date": "Dec\n24",
-          "Score": 11,
-          "key": 6,
-          "step": "50-75%"
-      },
-      {
-          "date": "Dec\n24",
-          "Score": 14,
-          "key": 6,
-          "step": "25-50%"
-      },
-      {
-          "date": "Dec\n24",
-          "Score": 14,
-          "key": 6,
-          "step": "0-25%"
-      },
-      {
-          "date": "Jan\n25",
-          "Score": 14,
-          "key": 7,
-          "step": "100%"
-      },
-      {
-          "date": "Jan\n25",
-          "Score": 18,
-          "key": 7,
-          "step": "75-99%"
-      },
-      {
-          "date": "Jan\n25",
-          "Score": 24,
-          "key": 7,
-          "step": "50-75%"
-      },
-      {
-          "date": "Jan\n25",
-          "Score": 25,
-          "key": 7,
-          "step": "25-50%"
-      },
-      {
-          "date": "Jan\n25",
-          "Score": 25,
-          "key": 7,
-          "step": "0-25%"
-      },
-      {
-          "date": "Feb\n25",
-          "Score": 25,
-          "key": 8,
-          "step": "100%"
-      },
-      {
-          "date": "Feb\n25",
-          "Score": 27,
-          "key": 8,
-          "step": "75-99%"
-      },
-      {
-          "date": "Feb\n25",
-          "Score": 27,
-          "key": 8,
-          "step": "50-75%"
-      },
-      {
-          "date": "Feb\n25",
-          "Score": 28,
-          "key": 8,
-          "step": "25-50%"
-      },
-      {
-          "date": "Feb\n25",
-          "Score": 28,
-          "key": 8,
-          "step": "0-25%"
-      },
-      {
-          "date": "Mar\n25",
-          "Score": 28,
-          "key": 9,
-          "step": "100%"
-      },
-      {
-          "date": "Mar\n25",
-          "Score": 29,
-          "key": 9,
-          "step": "75-99%"
-      },
-      {
-          "date": "Mar\n25",
-          "Score": 29,
-          "key": 9,
-          "step": "50-75%"
-      },
-      {
-          "date": "Mar\n25",
-          "Score": 29,
-          "key": 9,
-          "step": "25-50%"
-      },
-      {
-          "date": "Mar\n25",
-          "Score": 29,
-          "key": 9,
-          "step": "0-25%"
-      },
-      {
-          "date": "Apr\n25",
-          "Score": 29,
-          "key": 10,
-          "step": "100%"
-      },
-      {
-          "date": "Apr\n25",
-          "Score": 29,
-          "key": 10,
-          "step": "75-99%"
-      },
-      {
-          "date": "Apr\n25",
-          "Score": 29,
-          "key": 10,
-          "step": "50-75%"
-      },
-      {
-          "date": "Apr\n25",
-          "Score": 29,
-          "key": 10,
-          "step": "25-50%"
-      },
-      {
-          "date": "Apr\n25",
-          "Score": 29,
-          "key": 10,
-          "step": "0-25%"
-      },
-      {
-          "date": "May\n25",
-          "Score": 29,
-          "key": 11,
-          "step": "100%"
-      },
-      {
-          "date": "May\n25",
-          "Score": 29,
-          "key": 11,
-          "step": "75-99%"
-      },
-      {
-          "date": "May\n25",
-          "Score": 29,
-          "key": 11,
-          "step": "50-75%"
-      },
-      {
-          "date": "May\n25",
-          "Score": 29,
-          "key": 11,
-          "step": "25-50%"
-      },
-      {
-          "date": "May\n25",
-          "Score": 29,
-          "key": 11,
-          "step": "0-25%"
-      },
-      {
-          "date": "Jun\n25",
-          "Score": 29,
-          "key": 12,
-          "step": "100%"
-      },
-      {
-          "date": "Jun\n25",
-          "Score": 29,
-          "key": 12,
-          "step": "75-99%"
-      },
-      {
-          "date": "Jun\n25",
-          "Score": 29,
-          "key": 12,
-          "step": "50-75%"
-      },
-      {
-          "date": "Jun\n25",
-          "Score": 29,
-          "key": 12,
-          "step": "25-50%"
-      },
-      {
-          "date": "Jun\n25",
-          "Score": 29,
-          "key": 12,
-          "step": "0-25%"
-      }
-      ],
-      xFieldKey: "date",
-      yFieldKey: "Score",
-      seriesField: "step",
-      color: fill,
-      animated: true,
-      fillOpacity: 0.7,
-      height: 500,
-      isPdf: true,
-      renderTooltipContent: (title, data) => {
-        return {
-          title,
-          items: data.map((item) => ({
-            label: item.name,
-            value: item.value,
-            color: item.color,
-          })),
-        };
-      },
-      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) => (
-      <Widget title="Multiple Areas Chart" className="with-border-header" style={{height: "500px"}}>
-        <AreaChart {...args} />
-      </Widget>
-    ),
-  };
+};

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

@@ -3,8 +3,6 @@ import { Area } from "@antv/g2plot";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
 import Container from "../style";
-import CustomLegend from "../components/CustomLegend/index.js";
-import { useLegendConfig } from "../helper.js";
 
 const { useToken } = theme;
 
@@ -76,22 +74,14 @@ const AreaChart = ({
 	height,
 	t = (s) => s,
 	isPdf = false,
-	legendConfig = {},
+	extraLegendConfig = {},
 	width,
 	...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;
 
 	useEffect(() => {
 		if (!containerRef.current) {
@@ -132,7 +122,15 @@ const AreaChart = ({
 			areaStyle: {
 				fillOpacity,
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			line: false,
 			...rest,
 		};
@@ -171,21 +169,8 @@ const AreaChart = ({
 	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/BarChart/BarChart.stories.jsx

@@ -211,91 +211,3 @@ export const Percentage = {
 		);
 	},
 };
-
-export const Pdf = {
-	name: "Pdf Bar Chart",
-	args: {
-		data: [
-			{
-				label: "LABEL 1",
-				value: 20,
-				type: "type 1",
-			},
-			{
-				label: "LABEL 2",
-				value: 50,
-				type: "type 1",
-			},
-			{
-				label: "LABEL 3",
-				value: 330,
-				type: "type 1",
-			},
-			{
-				label: "LABEL 1",
-				value: 10,
-				type: "type 2",
-			},
-			{
-				label: "LABEL 2",
-				value: 30,
-				type: "type 2",
-			},
-			{
-				label: "LABEL 3",
-				value: 100,
-				type: "type 2",
-			},
-			{
-				label: "LABEL 3",
-				value: 100,
-				type: "type 3",
-			},
-		],
-		renderTooltipContent: (title, data) => {
-			return {
-				title,
-				items: data.map((item) => ({
-					label: item.name,
-					value: item.value,
-					color: item.color || "black",
-				})),
-			};
-		},
-		xFieldKey: "value",
-		yFieldKey: "label",
-		isStack: true,
-		seriesField: "type",
-		color: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
-		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="Stacked Bar Chart" className={"with-border-header"}>
-				<BarChart {...args} />
-			</Widget>
-		);
-	},
-};

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

@@ -3,8 +3,6 @@ import Container from "../style";
 import { Bar } from "@antv/g2plot";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
-import CustomLegend from "../components/CustomLegend/index.js";
-import { useLegendConfig } from "../helper";
 
 const { useToken } = theme;
 
@@ -88,22 +86,14 @@ export default function BarChart({
 	height,
 	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) {
@@ -145,7 +135,15 @@ export default function BarChart({
 			isStack,
 			color: color || token.colorPrimary7,
 			seriesField,
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			animation: animated,
 		};
 
@@ -184,21 +182,8 @@ export default function BarChart({
 	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>
 	);
 }