Show only one graph on smaller screens (#818)
This commit is contained in:
parent
2fe6621adb
commit
72d2b71a8f
|
@ -38,6 +38,7 @@ interface Props {
|
|||
height: number;
|
||||
selectedFields1: SelectedField[];
|
||||
selectedFields2: SelectedField[];
|
||||
showSingleGraph: boolean;
|
||||
};
|
||||
|
||||
export interface PlottableField {
|
||||
|
@ -49,7 +50,7 @@ export interface PlottableField {
|
|||
format: string;
|
||||
};
|
||||
|
||||
const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Props) => {
|
||||
const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2, showSingleGraph }: Props) => {
|
||||
const { sm } = useBreakpoint();
|
||||
const hsl = useCallback((fieldIndex: number, allFields: number) => {
|
||||
const [hue] = colorHsl(0, allFields - 1, fieldIndex);
|
||||
|
@ -166,11 +167,14 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
|
|||
setOptions1(result1.options);
|
||||
setPlotData1([result1.xData, ...result1.yData]);
|
||||
|
||||
const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
|
||||
setOptions2(result2.options);
|
||||
setPlotData2([result2.xData, ...result2.yData]);
|
||||
if (!showSingleGraph) {
|
||||
const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
|
||||
setOptions2(result2.options);
|
||||
setPlotData2([result2.xData, ...result2.yData]);
|
||||
}
|
||||
|
||||
}, [data, hsl, width, height, sm, generatePlotConfig, generateFieldsToPlot, selectedFields1, selectedFields2]);
|
||||
|
||||
}, [data, hsl, width, height, sm, generatePlotConfig, generateFieldsToPlot, selectedFields1, selectedFields2, showSingleGraph]);
|
||||
|
||||
if (!sm) {
|
||||
return <LandscapeNotice />;
|
||||
|
@ -179,7 +183,7 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
|
|||
return (
|
||||
<Space direction="vertical" size="large">
|
||||
<UplotReact options={options1!} data={plotData1!} />
|
||||
<UplotReact options={options2!} data={plotData2!} />
|
||||
{!showSingleGraph && <UplotReact options={options2!} data={plotData2!} />}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -104,6 +104,7 @@ const Logs = ({
|
|||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||
const [showSingleGraph, setShowSingleGraph] = useState(false);
|
||||
const { fetchLogFileWithProgress } = useServerStorage();
|
||||
const routeMatch = useMatch(Routes.TUNE_LOGS_FILE);
|
||||
const navigate = useNavigate();
|
||||
|
@ -113,9 +114,13 @@ const Logs = ({
|
|||
|
||||
if (window.innerHeight > minCanvasHeightInner) {
|
||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||
setShowSingleGraph(false);
|
||||
} else {
|
||||
// not enough space to put 2 graphs
|
||||
setShowSingleGraph(true);
|
||||
setCanvasHeight(minCanvasHeightInner / 2);
|
||||
}
|
||||
|
||||
}, []);
|
||||
|
||||
const siderProps = {
|
||||
|
@ -291,7 +296,7 @@ const Logs = ({
|
|||
key: 'fields',
|
||||
children: (
|
||||
<>
|
||||
<div style={{ height: '45%' }}>
|
||||
<div style={showSingleGraph ? {} : { height: '45%' }}>
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }}>
|
||||
<Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}>
|
||||
{fields.map((field) => (
|
||||
|
@ -304,20 +309,24 @@ const Logs = ({
|
|||
</Checkbox.Group>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
<Divider />
|
||||
<div style={{ height: '45%' }}>
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }}>
|
||||
<Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
|
||||
{fields.map((field) => (
|
||||
<Row key={field.name}>
|
||||
<Checkbox key={field.name} value={field.name}>
|
||||
{isExpression(field.label) ? stripExpression(field.label) : field.label}
|
||||
</Checkbox>
|
||||
</Row>
|
||||
))}
|
||||
</Checkbox.Group>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
{!showSingleGraph && (
|
||||
<>
|
||||
<Divider />
|
||||
<div style={{ height: '45%' }}>
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }}>
|
||||
<Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
|
||||
{fields.map((field) => (
|
||||
<Row key={field.name}>
|
||||
<Checkbox key={field.name} value={field.name}>
|
||||
{isExpression(field.label) ? stripExpression(field.label) : field.label}
|
||||
</Checkbox>
|
||||
</Row>
|
||||
))}
|
||||
</Checkbox.Group>
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
@ -361,6 +370,7 @@ const Logs = ({
|
|||
height={canvasHeight}
|
||||
selectedFields1={prepareSelectedFields(selectedFields1)}
|
||||
selectedFields2={prepareSelectedFields(selectedFields2)}
|
||||
showSingleGraph={showSingleGraph}
|
||||
/>
|
||||
:
|
||||
<Space
|
||||
|
|
Loading…
Reference in New Issue