Skip to content

Commit

Permalink
fix: full size chart
Browse files Browse the repository at this point in the history
  • Loading branch information
jacovinus committed Sep 7, 2022
1 parent 8b01d3b commit 40362bc
Show file tree
Hide file tree
Showing 26 changed files with 176 additions and 98 deletions.
9 changes: 4 additions & 5 deletions src/actions/helpers/parseMatrixResponse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,11 @@ export function getMatrixTableResult(data: any[]) {
dataRows.push(row.rows);
}

const length = rows.length;

const dr = sortBy(dataRows.flat(), (row) => row.time)
return {
columnsData: headers,
dataRows: sortBy(dataRows.flat(), (row) => row.time),
length,
dataRows: dr,
total: dr.length
};
}

Expand Down Expand Up @@ -114,7 +113,7 @@ export function parseMatrixResponse(responseProps: QueryResult) {
}
dispatch(setIsEmptyView(false));
});

// get table total as chart total is less that table total rows
const panelResult = {
id,
type: "matrix",
Expand Down
2 changes: 2 additions & 0 deletions src/actions/helpers/processResponse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export async function processResponse(
type: "streams",
panel,
id,
ts: Date.now()
};

parseResponse(resultQuery);
Expand All @@ -47,6 +48,7 @@ export async function processResponse(
type,
panel,
id,
ts: Date.now()
};

parseResponse(resultQuery);
Expand Down
1 change: 1 addition & 0 deletions src/actions/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type QueryResult = {
type: QueryResultType;
panel: string;
id: string
ts: number
};

export type Message = {
Expand Down
8 changes: 4 additions & 4 deletions src/components/DataViews/components/Charts/FlotChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { ChartCont } from "./styled";


export function FlotChart(props) {

const {
theme,
matrixData,
Expand All @@ -30,18 +29,19 @@ export function FlotChart(props) {
isSpliced={isSpliced}
onSetChartType={onSetChartType}
/>

<div className="chart-cont">
<div
ref={chartRef}
id={"chart-container"}
style={{
flex: "1",
height: "180px",
minHeight:'180px',
height:'100%',
display: "block",
position: "relative",
}}
></div>

</div>
<ChartLabelsList onLabelClick={onLabelClick} labels={labels} />
</ChartCont>
</ThemeProvider>
Expand Down
20 changes: 12 additions & 8 deletions src/components/DataViews/components/Charts/helpers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function formatDateRange(data) {
}

export function formatTs(values) {
return values.map(([ts, val]) => [ts * 1000, val]);
return values?.map(([ts, val]) => [ts * 1000, val]) || [];
}

export function getSeriesFromChartType(type) {
Expand Down Expand Up @@ -132,13 +132,17 @@ export function setTypeToLocal(type) {
}

export function formatLabel(labels) {
return (
"{ " +
Object.entries(labels)
.map(([key, value]) => `${key}="${value}"`)
.join(", ") +
" }"
);
if(labels) {
return (
"{ " +
Object.entries(labels)
.map(([key, value]) => `${key}="${value}"`)
.join(", ") +
" }"
);
}
else return ''

}

export function hideSeries(series) {
Expand Down
1 change: 1 addition & 0 deletions src/components/DataViews/components/Charts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ export default function ClokiChart(props) {

if (matrixData) {
const flotChartProps = {
height: props.vHeight,
theme,
matrixData,
chartType,
Expand Down
17 changes: 13 additions & 4 deletions src/components/DataViews/components/Charts/styled/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@ export const LabelsContainer = styled("div")`
display: flex;
flex-wrap: wrap;
max-height: calc(100% - 285px);
max-height:60px;
overflow-y: auto;
margin: 10px 20px;
margin: 10px;
padding-bottom: 10px;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: ${(props) => props.theme.scrollbarThumb};
Expand Down Expand Up @@ -116,5 +119,11 @@ export const ShowSeries = styled.div`

export const ChartCont = styled.div`
height: inherit;
background: ${({theme})=>theme.chartBg}
display:flex;
flex-direction:column;
flex:1;
background: ${({theme})=>theme.chartBg};
.chart-cont {
flex:1;
}
`;
32 changes: 18 additions & 14 deletions src/components/DataViews/components/DataViewItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { VectorView } from "../views/VectorView";

export function DataViewItem(props) {
// add a header for table view / json view
const { dataView, name } = props;

const { dataView, name, vHeight } = props;
const { type, total } = dataView;

const viewRef = useRef(null);
Expand Down Expand Up @@ -51,12 +52,17 @@ export function DataViewItem(props) {
setPanelSize((prev) => (prev !== "max" ? "max" : "regular"));
};

const theight = useTableHeight({ total, panelSize });

const viewHeight = useViewHeight({ type, actualQuery, total });

if (actualQuery && type === "stream" && streamData.length > 0) {
const logsProps = {
const theight = useTableHeight({ total, panelSize, dataView });

const viewHeight = useViewHeight({ type, actualQuery, total, dataView});


if (actualQuery && type === "matrix" && streamData.length > 0) {
// return matrix type component
const { limit } = actualQuery;
const matrixProps = {
viewRef,
panelSize,
viewHeight,
Expand All @@ -68,17 +74,16 @@ export function DataViewItem(props) {
type,
theight,
tableData,
viewWidth,
limit,
streamData,
...props,
};

return <LogsView {...logsProps} />;
return <MatrixView {...matrixProps}/>;
}

if (actualQuery && type === "matrix" && streamData.length > 0) {
// return matrix type component
const { limit } = actualQuery;
const matrixProps = {
if (actualQuery && type === "stream" && streamData.length > 0) {
const logsProps = {
viewRef,
panelSize,
viewHeight,
Expand All @@ -90,12 +95,11 @@ export function DataViewItem(props) {
type,
theight,
tableData,
viewWidth,
limit,
streamData,
...props,
};
return <MatrixView {...matrixProps} />;

return <LogsView {...logsProps} />;
}

if (actualQuery && type === "vector" && streamData?.dataRows?.length > 0) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,21 @@ import { useMemo, memo, useEffect, useState } from "react";
import { TableStyles } from "./styles";
import { Table } from "./Table";

export const VectorTable = memo(({ data: { columnsData, dataRows },actualQuery,height}) => {

const cols = useMemo(() => columnsData, [columnsData]);
const data = useMemo(() => dataRows, [dataRows]);
return (
<TableStyles>
{columnsData && dataRows &&
<Table actQuery={actualQuery} columns={cols} data={data} height={height} />}
</TableStyles>
);
});
export const VectorTable = memo(
({ data: { columnsData, dataRows }, actualQuery, height }) => {
const cols = useMemo(() => columnsData, [columnsData]);
const data = useMemo(() => dataRows, [dataRows]);
return (
<TableStyles>
{columnsData && dataRows && (
<Table
actQuery={actualQuery}
columns={cols}
data={data}
height={height}
/>
)}
</TableStyles>
);
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ export const TableStyles = styled.div`
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: ${(props) => props.theme.scrollbarThumb};
Expand All @@ -21,7 +23,9 @@ export const TableStyles = styled.div`
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: ${(props) => props.theme.scrollbarThumb};
Expand Down
32 changes: 24 additions & 8 deletions src/components/DataViews/hooks/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,35 @@
import { useMemo } from "react";

export const useViewHeight = ({ type, actualQuery, total }) => {
export const useViewHeight = ({ type, actualQuery, total, dataView }) => {
const viewHeight = useMemo(() => {
const isMatrixTable = type === "matrix" && actualQuery?.tableView;
const isStreamTable = type === "stream" && actualQuery?.tableView;
let regularCont = "",
maxCont = "",
regularView = "",
maxView = "";
if (type === "vector" || isMatrixTable || isStreamTable) {
const regRows = total * 20;
if (isMatrixTable) {
const regRows = dataView?.tableData?.total * 25;
const regCalc = regRows < 330 ? regRows : 330;

regularCont = `${regCalc + 20}px`;
regularCont = `${regCalc + 25}px`;
regularView = `${regCalc}px`;
maxCont = "fit-content";
maxView = "fit-content";
}

if (type === "vector" || isStreamTable) {
const regRows = total * 25;
const regCalc = regRows < 330 ? regRows : 330;

regularCont = `${regCalc + 25}px`;
regularView = `${regCalc}px`;
maxCont = "fit-content";
maxView = "fit-content";
}

if (type === "stream" && !actualQuery?.tableView) {
const regRows = total * 20;
const regRows = total * 25;
const regCalc = regRows < 350 ? "fit-content" : "350px";
regularCont = regCalc;
regularView = regCalc;
Expand All @@ -29,7 +39,7 @@ export const useViewHeight = ({ type, actualQuery, total }) => {

if (type === "matrix" && !actualQuery?.tableView) {
regularCont = "fit-content";
regularView = "350px";
regularView = "400px";
maxCont = "fit-content";
maxView = "fit-content";
}
Expand All @@ -39,9 +49,15 @@ export const useViewHeight = ({ type, actualQuery, total }) => {
return viewHeight;
};

export const useTableHeight = ({ total, panelSize }) => {
export const useTableHeight = ({ total, panelSize, dataView }) => {
let tableTotal = 0;
if (dataView.type === "matrix") {
tableTotal = dataView?.tableData?.total;
} else {
tableTotal = total;
}
const theight = useMemo(() => {
const totalRows = total * 20;
const totalRows = tableTotal * 25;

if (panelSize === "max") {
return totalRows;
Expand Down
19 changes: 13 additions & 6 deletions src/components/DataViews/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
import { ThemeProvider } from "@emotion/react";
import { useState } from "react";
import { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { themes } from "../../theme/themes";
import { DataViewItem } from "./components/DataViewItem";
import { DataviewsContainer } from "./styled";

export default function DataViews(props) {
const { name } = props;

const { name} = props;
const theme = useSelector((store) => store.theme);
const [side] = useState(name);
const dataViews = useSelector((store) => store[`${side}DataView`]);
if (dataViews.length > 0) {
const viewsMemo = useMemo(()=>{
return dataViews
},[dataViews])
if (viewsMemo.length > 0 ) {

return (
<ThemeProvider theme={themes[theme]}>
<DataviewsContainer>
{dataViews?.map((dv, index) => (
<DataViewItem key={index} {...props} dataView={dv} />
{viewsMemo?.map((dv, index) => (
<DataViewItem
key={index}
{...props}
dataView={dv}
/>
))}
</DataviewsContainer>
</ThemeProvider>
Expand Down
Loading

0 comments on commit 40362bc

Please sign in to comment.