feat: sync changes from v2 to v2-develop (🚨 CONFLICTS RESOLVED) (#724)…

… [skip ci] * feat: sync changes from v2 to v2-develop * fix: bad conflict resoluytion --------- Co-authored-by: mguellsegarra <[email protected]> Co-authored-by: Marc Güell Segarra <[email protected]>
gisce · Nov 27, 2024 · 8db3627 · 8db3627
1 parent 28edbf6
commit 8db3627
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.40.0",
+  "version": "2.41.0",
   "engines": {
     "node": "20.5.0"
   },
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
-    "@gisce/ooui": "2.18.0",
+    "@gisce/ooui": "2.19.0",
     "@gisce/react-formiga-components": "1.8.0",
     "@gisce/react-formiga-table": "1.8.5",
     "@monaco-editor/react": "^4.4.5",

diff --git a/src/widgets/custom/Indicator.tsx b/src/widgets/custom/Indicator.tsx
@@ -88,7 +88,7 @@ const IndicatorInput = (props: IndicatorInputProps) => {
 
 const GraphIndicatorInput = (props: IndicatorInputProps) => {
   const { ooui } = props;
-  const { actionId } = ooui;
+  const { actionId, height } = ooui;
 
   const { actionData, treeShortcut, loading, error, fetchData } =
     useFormGraphData(actionId!);
@@ -133,7 +133,7 @@ const GraphIndicatorInput = (props: IndicatorInputProps) => {
           context={context}
           domain={domain}
           limit={limit}
-          fixedHeight
+          fixedHeight={height}
         />
       )}
     </GraphCard>

diff --git a/src/widgets/views/Graph/Graph.tsx b/src/widgets/views/Graph/Graph.tsx
@@ -22,6 +22,7 @@ import {
 } from "@/context/ActionViewContext";
 import { useNetworkRequest } from "@/hooks/useNetworkRequest";
 import { CenteredSpinner } from "@/ui/CenteredSpinner";
+import { GRAPH_DEFAULT_HEIGHT } from "./GraphChartComp";
 
 export type GraphProps = {
   view_id: number;
@@ -30,7 +31,7 @@ export type GraphProps = {
   context: any;
   limit?: number;
   manualIds?: number[];
-  fixedHeight?: boolean;
+  fixedHeight?: number;
 };
 
 const GraphComp = (props: GraphProps, ref: any) => {
@@ -107,6 +108,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
           icon={indicator.icon!}
           suffix={indicator.suffix!}
           manualIds={manualIds}
+          fixedHeight={fixedHeight}
           {...indicatorFieldopts}
         />
       );
@@ -122,7 +124,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
           ooui={graphOoui as GraphChartOoui}
           limit={limit}
           manualIds={manualIds}
-          fixedHeight={fixedHeight}
+          fixedHeight={fixedHeight || GRAPH_DEFAULT_HEIGHT}
         />
       );
     }

diff --git a/src/widgets/views/Graph/GraphChart.tsx b/src/widgets/views/Graph/GraphChart.tsx
@@ -13,7 +13,7 @@ export type GraphChartProps = {
   ooui: GraphChartOoui;
   limit?: number;
   manualIds?: number[];
-  fixedHeight?: boolean;
+  fixedHeight?: number;
 };
 
 export const GraphChart = ({

diff --git a/src/widgets/views/Graph/GraphChartComp.tsx b/src/widgets/views/Graph/GraphChartComp.tsx
@@ -10,7 +10,7 @@ import { GraphType, YAxisOpts } from "@gisce/ooui";
 
 const { Text } = Typography;
 
-const DEFAULT_HEIGHT = 400;
+export const GRAPH_DEFAULT_HEIGHT = 400;
 
 // Memoize each chart type
 const MemoizedLine = memo(Line);
@@ -30,7 +30,7 @@ export type GraphCompProps = {
   isStack: boolean;
   numItems: number;
   yAxisOpts?: YAxisOpts;
-  fixedHeight?: boolean;
+  fixedHeight?: number;
 };
 
 export const GraphChartComp = ({
@@ -40,7 +40,7 @@ export const GraphChartComp = ({
   isStack,
   numItems,
   yAxisOpts,
-  fixedHeight = false,
+  fixedHeight,
 }: GraphCompProps) => {
   const { t } = useLocale();
 
@@ -138,7 +138,7 @@ export const GraphChartComp = ({
         flex: 1,
         padding: "1rem",
         gap: "10px",
-        height: fixedHeight ? DEFAULT_HEIGHT : undefined,
+        height: fixedHeight,
       }}
     >
       <div style={{ textAlign: "right" }}>
@@ -169,7 +169,7 @@ type GetGraphPropsType = GraphCompProps & {
   height?: number;
   pieItemValueFormatter?: any;
   pieLabelFormatter?: any;
-  fixedHeight?: boolean;
+  fixedHeight?: number;
 };
 
 function getGraphProps(props: GetGraphPropsType) {
@@ -181,7 +181,7 @@ function getGraphProps(props: GetGraphPropsType) {
     pieItemValueFormatter,
     pieLabelFormatter,
     yAxisOpts = { mode: "default" },
-    fixedHeight = false,
+    fixedHeight,
   } = props;
   let graphProps = { ...(GraphDefaults as any)[type] };
 
@@ -190,7 +190,7 @@ function getGraphProps(props: GetGraphPropsType) {
   }
 
   graphProps.data = data;
-  graphProps.height = fixedHeight ? DEFAULT_HEIGHT : undefined;
+  graphProps.height = fixedHeight;
 
   if (type === "pie") {
     graphProps.colorField = "x";

diff --git a/src/widgets/views/Graph/GraphIndicator.tsx b/src/widgets/views/Graph/GraphIndicator.tsx
@@ -20,6 +20,7 @@ export type GraphInidicatorProps = {
   field?: string;
   operator?: Operator;
   manualIds?: number[];
+  fixedHeight?: number;
 };
 
 export const GraphIndicator = (props: GraphInidicatorProps) => {
@@ -35,6 +36,7 @@ export const GraphIndicator = (props: GraphInidicatorProps) => {
     field,
     operator,
     manualIds,
+    fixedHeight,
   } = props;
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState<number>();
@@ -213,6 +215,7 @@ export const GraphIndicator = (props: GraphInidicatorProps) => {
       icon={icon}
       suffix={suffix}
       showPercent={showPercent}
+      fixedHeight={fixedHeight}
     />
   );
 };
diff --git a/src/widgets/views/Graph/GraphIndicatorComp.tsx b/src/widgets/views/Graph/GraphIndicatorComp.tsx
@@ -15,14 +15,23 @@ export type GraphIndicatorCompProps = {
   icon?: string;
   suffix?: string;
   showPercent?: boolean;
+  fixedHeight?: number;
 };
 
 export const GraphIndicatorComp = (props: GraphIndicatorCompProps) => {
   const [height, setHeight] = useState<number>(0);
   const [width, setWidth] = useState<number>(0);
 
-  const { value, totalValue, percent, color, icon, suffix, showPercent } =
-    props;
+  const {
+    value,
+    totalValue,
+    percent,
+    color,
+    icon,
+    suffix,
+    showPercent,
+    fixedHeight,
+  } = props;
 
   return (
     <Measure
@@ -33,34 +42,36 @@ export const GraphIndicatorComp = (props: GraphIndicatorCompProps) => {
       }}
     >
       {({ measureRef }) => {
-        if (showPercent) {
-          return (
-            <PercentageIndicator
-              value={value!}
-              total={totalValue!}
-              percent={percent!}
-              measureRef={measureRef}
-              height={height}
-              width={width}
-              color={color}
-              icon={icon}
-              suffix={suffix}
-            />
-          );
-        } else {
-          return (
-            <CommonIndicator
-              value={value!}
-              total={totalValue}
-              measureRef={measureRef}
-              height={height}
-              width={width}
-              color={color}
-              icon={icon}
-              suffix={suffix}
-            />
-          );
-        }
+        const content = showPercent ? (
+          <PercentageIndicator
+            value={value!}
+            total={totalValue!}
+            percent={percent!}
+            measureRef={measureRef}
+            height={fixedHeight || height}
+            width={width}
+            color={color}
+            icon={icon}
+            suffix={suffix}
+          />
+        ) : (
+          <CommonIndicator
+            value={value!}
+            total={totalValue}
+            measureRef={measureRef}
+            height={fixedHeight || height}
+            width={width}
+            color={color}
+            icon={icon}
+            suffix={suffix}
+          />
+        );
+
+        return fixedHeight ? (
+          <div style={{ height: fixedHeight }}>{content}</div>
+        ) : (
+          content
+        );
       }}
     </Measure>
   );

diff --git a/src/widgets/views/Graph/GraphServer.tsx b/src/widgets/views/Graph/GraphServer.tsx
@@ -11,7 +11,7 @@ import {
 } from "./useServerGraphData";
 import { GraphIndicatorComp } from "./GraphIndicatorComp";
 import { isNumber } from "./GraphDefaults";
-import { GraphChartComp } from "./GraphChartComp";
+import { GRAPH_DEFAULT_HEIGHT, GraphChartComp } from "./GraphChartComp";
 import { CenteredSpinner } from "@/ui/CenteredSpinner";
 
 export type GraphProps = {
@@ -20,7 +20,7 @@ export type GraphProps = {
   domain: any;
   context: any;
   manualIds?: number[];
-  fixedHeight?: boolean;
+  fixedHeight?: number;
 };
 
 const GraphComp = (props: GraphProps, ref: any) => {
@@ -77,6 +77,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
           icon={icon}
           suffix={suffix}
           showPercent={isNumber(percent)}
+          fixedHeight={fixedHeight}
         />
       );
     }
@@ -92,7 +93,7 @@ const GraphComp = (props: GraphProps, ref: any) => {
           isStack={chart.isStack}
           numItems={chart.num_items}
           yAxisOpts={chart.yAxisOpts}
-          fixedHeight={fixedHeight}
+          fixedHeight={fixedHeight || GRAPH_DEFAULT_HEIGHT}
         />
       );
     }