diff --git a/package-lock.json b/package-lock.json index 92a09a3e3..506cee4bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@gisce/react-ooui", - "version": "2.40.0", + "version": "2.41.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gisce/react-ooui", - "version": "2.40.0", + "version": "2.41.0", "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", @@ -3370,9 +3370,9 @@ } }, "node_modules/@gisce/ooui": { - "version": "2.18.0", - "resolved": "https://registry.npmjs.org/@gisce/ooui/-/ooui-2.18.0.tgz", - "integrity": "sha512-f5bHBjruxJQ+Xb77RvQgp22TfeTz5HeL45MO4+Jl32UdWzCkAtzxSAwA/INPPaTCrvhE5N14HpS2PdCdBLqhBA==", + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/@gisce/ooui/-/ooui-2.19.0.tgz", + "integrity": "sha512-zG5Ta8I/sBCiKpjfs05rPo8z/9mhuHvG4qiaZiqIxvtcTAdi7HY9a6hEJLKx4wfexisR+bl8/uxiSiDmc/YiQw==", "dependencies": { "@gisce/conscheck": "1.0.9", "html-entities": "^2.3.3", diff --git a/package.json b/package.json index 7c1dbc74b..39b4a7c64 100644 --- 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 index 68c2cff18..15475c222 100644 --- 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} /> )} diff --git a/src/widgets/views/Graph/Graph.tsx b/src/widgets/views/Graph/Graph.tsx index 5e15ec8ab..f96fb5f42 100644 --- 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 index 8f182d0c5..b001e5b21 100644 --- 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 index 3b1681476..d49978032 100644 --- 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, }} >
@@ -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 index a41c71fbc..a823f9490 100644 --- 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(); @@ -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 index 64075f320..21b22ae98 100644 --- 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(0); const [width, setWidth] = useState(0); - const { value, totalValue, percent, color, icon, suffix, showPercent } = - props; + const { + value, + totalValue, + percent, + color, + icon, + suffix, + showPercent, + fixedHeight, + } = props; return ( { }} > {({ measureRef }) => { - if (showPercent) { - return ( - - ); - } else { - return ( - - ); - } + const content = showPercent ? ( + + ) : ( + + ); + + return fixedHeight ? ( +
{content}
+ ) : ( + content + ); }}
); diff --git a/src/widgets/views/Graph/GraphServer.tsx b/src/widgets/views/Graph/GraphServer.tsx index 1be2170bd..ddfeb15af 100644 --- 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} /> ); }