impaktapps-design 0.2.87 → 0.2.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@emotion/react": "^11.11.4",

package/src/component/PieGraph/DrawPieGraph.tsx

@@ -9,16 +9,24 @@ import ToolTip from "../ToolTip";
 
 const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
   const letters = value?.main?.data;
+  const keys = Object.keys(letters[0]);
   const arr =
     value?.main?.xAxisValue && value?.main?.yAxisValue
       ? [value?.main?.xAxisValue, value?.main?.yAxisValue]
-      : Object.keys(letters[0]);
-  const frequency = (d: any) => d[arr[1]];
-  const getLetterFrequencyColor = scaleOrdinal({
-    domain: letters.map((l:[any]) => l[arr[0]]),
-    range: value?.style?.pieStyle?.colorRange,
-  });
+      : keys;
 
+  const labelKeyIndex = keys.indexOf('label');
+  const valueKeyIndex = (labelKeyIndex === 0) ? 1 : 0;
+  const frequency = (d: any) => d[arr[valueKeyIndex]];
+
+
+  const getLetterFrequencyColor = (letter: any, index: number) =>
+    scaleOrdinal({
+      domain: letters.map((l: any) => l[arr[index]]),
+      range: value?.style?.pieStyle?.colorRange,
+    })(letter);
+    
+  const dataKeyArray = letters.map((data: any) => data.label);
   const {
     tooltipData,
     tooltipLeft,
@@ -47,6 +55,7 @@ const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
       {value?.main?.legendAvailable && (
         <Legend
           value={value}
+          dataKeyArray={dataKeyArray}
         />
       )}
       <svg
@@ -66,10 +75,11 @@ const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
           >
             {(pie) => {
               return pie.arcs.map((arc, index) => {
-                const letter = value?.style?.pieStyle?.showPieLabel?arc.data[arr[0]]:arc.data[arr[1]];
+                const indexParam = value?.style?.pieStyle?.showPieLabel ? labelKeyIndex : valueKeyIndex;
+                const letter = arc.data[arr[indexParam]];
                 const [centriodX, centriodY] = pie.path.centroid(arc);
                 const arcPath = pie.path(arc);
-                const arcFill: any = getLetterFrequencyColor(letter);
+                const arcFill: any = getLetterFrequencyColor(letter,indexParam);
                 return (
                   <g
                     key={`arc-${letter}-${index}`}

package/src/utils/finalDataProvider.ts

@@ -91,7 +91,8 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
         case "PieGraph":
             return {
                 main: {
-                    data: value?.main?.data || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
+                    data: (value?.main?.data && value.main.data.length > 0) ? value?.main?.data 
+                    : [{ label: "Kotak", value: 500 }, { label: "SBI", value: 700 }, { label: "HDFC", value: 900 }],
                     // [{}] ,
                     // || letterFrequency.slice(0, 3),
                     header: "Pie Graph",
@@ -170,6 +171,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                         innerRadius: 60,
                         cornerRadius: 2,
                         padAngle: 0.006,
+                        showPieLabel: true,
                         ...value?.style?.pieStyle,
                     },
                 },