noisymime
/
hyper-tuner-cloud
mirror of https://github.com/noisymime/hyper-tuner-cloud.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show only one graph on smaller screens (#818)

This commit is contained in:
Piotr Rogowski 2022-10-19 23:49:57 +02:00 committed by GitHub
parent 2fe6621adb
commit 72d2b71a8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Logs/LogCanvas.tsx
View File

@ -38,6 +38,7 @@ interface Props {
height: number; height: number;
selectedFields1: SelectedField[]; selectedFields1: SelectedField[];
selectedFields2: SelectedField[]; selectedFields2: SelectedField[];
showSingleGraph: boolean;
}; };
export interface PlottableField { export interface PlottableField {
@ -49,7 +50,7 @@ export interface PlottableField {
format: string; format: string;
}; };
const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Props) => { const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2, showSingleGraph }: Props) => {
const { sm } = useBreakpoint(); const { sm } = useBreakpoint();
const hsl = useCallback((fieldIndex: number, allFields: number) => { const hsl = useCallback((fieldIndex: number, allFields: number) => {
const [hue] = colorHsl(0, allFields - 1, fieldIndex); const [hue] = colorHsl(0, allFields - 1, fieldIndex);
@ -166,11 +167,14 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
setOptions1(result1.options); setOptions1(result1.options);
setPlotData1([result1.xData, ...result1.yData]); setPlotData1([result1.xData, ...result1.yData]);
const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key); if (!showSingleGraph) {
setOptions2(result2.options); const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
setPlotData2([result2.xData, ...result2.yData]); 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) { if (!sm) {
return <LandscapeNotice />; return <LandscapeNotice />;
@ -179,7 +183,7 @@ const LogCanvas = ({ data, width, height, selectedFields1, selectedFields2 }: Pr
return ( return (
<Space direction="vertical" size="large"> <Space direction="vertical" size="large">
<UplotReact options={options1!} data={plotData1!} /> <UplotReact options={options1!} data={plotData1!} />
<UplotReact options={options2!} data={plotData2!} /> {!showSingleGraph && <UplotReact options={options2!} data={plotData2!} />}
</Space> </Space>
); );
}; };

40
src/pages/Logs.tsx
View File

@ -104,6 +104,7 @@ const Logs = ({
const contentRef = useRef<HTMLDivElement | null>(null); const contentRef = useRef<HTMLDivElement | null>(null);
const [canvasWidth, setCanvasWidth] = useState(0); const [canvasWidth, setCanvasWidth] = useState(0);
const [canvasHeight, setCanvasHeight] = useState(0); const [canvasHeight, setCanvasHeight] = useState(0);
const [showSingleGraph, setShowSingleGraph] = useState(false);
const { fetchLogFileWithProgress } = useServerStorage(); const { fetchLogFileWithProgress } = useServerStorage();
const routeMatch = useMatch(Routes.TUNE_LOGS_FILE); const routeMatch = useMatch(Routes.TUNE_LOGS_FILE);
const navigate = useNavigate(); const navigate = useNavigate();
@ -113,9 +114,13 @@ const Logs = ({
if (window.innerHeight > minCanvasHeightInner) { if (window.innerHeight > minCanvasHeightInner) {
setCanvasHeight(Math.round((window.innerHeight - 250) / 2)); setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
setShowSingleGraph(false);
} else { } else {
// not enough space to put 2 graphs
setShowSingleGraph(true);
setCanvasHeight(minCanvasHeightInner / 2); setCanvasHeight(minCanvasHeightInner / 2);
} }
}, []); }, []);
const siderProps = { const siderProps = {
@ -291,7 +296,7 @@ const Logs = ({
key: 'fields', key: 'fields',
children: ( children: (
<> <>
<div style={{ height: '45%' }}> <div style={showSingleGraph ? {} : { height: '45%' }}>
<PerfectScrollbar options={{ suppressScrollX: true }}> <PerfectScrollbar options={{ suppressScrollX: true }}>
<Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}> <Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}>
{fields.map((field) => ( {fields.map((field) => (
@ -304,20 +309,24 @@ const Logs = ({
</Checkbox.Group> </Checkbox.Group>
</PerfectScrollbar> </PerfectScrollbar>
</div> </div>
<Divider /> {!showSingleGraph && (
<div style={{ height: '45%' }}> <>
<PerfectScrollbar options={{ suppressScrollX: true }}> <Divider />
<Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}> <div style={{ height: '45%' }}>
{fields.map((field) => ( <PerfectScrollbar options={{ suppressScrollX: true }}>
<Row key={field.name}> <Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
<Checkbox key={field.name} value={field.name}> {fields.map((field) => (
{isExpression(field.label) ? stripExpression(field.label) : field.label} <Row key={field.name}>
</Checkbox> <Checkbox key={field.name} value={field.name}>
</Row> {isExpression(field.label) ? stripExpression(field.label) : field.label}
))} </Checkbox>
</Checkbox.Group> </Row>
</PerfectScrollbar> ))}
</div> </Checkbox.Group>
</PerfectScrollbar>
</div>
</>
)}
</> </>
), ),
}, },
@ -361,6 +370,7 @@ const Logs = ({
height={canvasHeight} height={canvasHeight}
selectedFields1={prepareSelectedFields(selectedFields1)} selectedFields1={prepareSelectedFields(selectedFields1)}
selectedFields2={prepareSelectedFields(selectedFields2)} selectedFields2={prepareSelectedFields(selectedFields2)}
showSingleGraph={showSingleGraph}
/> />
: :
<Space <Space