diff --git a/CHANGELOG.md b/CHANGELOG.md index a944b16b0..8d0e56139 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#135](https://github.com/kobsio/kobs/pull/135): Fix read and write i/o timeouts for web terminal. - [#143](https://github.com/kobsio/kobs/pull/143): Fix a bug in the Jaeger plugin, where results were not refreshed after a user selected another service, operation, etc. - [#146](https://github.com/kobsio/kobs/pull/146): Fix logic for long running requests introduced in [#144](https://github.com/kobsio/kobs/pull/144). +- [#163](https://github.com/kobsio/kobs/pull/163): Remove legend from logs chart and use `useDimensions` hook. ### Changed diff --git a/plugins/clickhouse/src/components/panel/LogsChart.tsx b/plugins/clickhouse/src/components/panel/LogsChart.tsx index 93b58c0c5..73c9ff361 100644 --- a/plugins/clickhouse/src/components/panel/LogsChart.tsx +++ b/plugins/clickhouse/src/components/panel/LogsChart.tsx @@ -6,10 +6,10 @@ import { ChartThemeColor, createContainer, } from '@patternfly/react-charts'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useRef } from 'react'; import { IBucket, IDatum, IDomain, ILabel } from '../../utils/interfaces'; -import { IPluginTimes, formatTime } from '@kobsio/plugin-core'; +import { IPluginTimes, formatTime, useDimensions } from '@kobsio/plugin-core'; interface ILogsChartProps { buckets?: IBucket[]; @@ -18,17 +18,7 @@ interface ILogsChartProps { const LogsChart: React.FunctionComponent = ({ buckets, changeTime }: ILogsChartProps) => { const refChart = useRef(null); - const [width, setWidth] = useState(1); - const [height, setHeight] = useState(1); - - // useEffect is executed on every render of this component. This is needed, so that we are able to use a width of 100% - // and a static height for the chart. - useEffect(() => { - if (refChart && refChart.current) { - setWidth(refChart.current.getBoundingClientRect().width); - setHeight(refChart.current.getBoundingClientRect().height); - } - }, []); + const chartSize = useDimensions(refChart, { height: 1, width: 1 }); const data: IDatum[] = !buckets || buckets.length === 0 @@ -73,13 +63,11 @@ const LogsChart: React.FunctionComponent = ({ buckets, changeTi voronoiPadding={0} /> } - height={height} - legendData={legendData} - legendPosition={undefined} + height={chartSize.height} padding={{ bottom: 30, left: 0, right: 0, top: 0 }} scale={{ x: 'time', y: 'linear' }} themeColor={ChartThemeColor.multiOrdered} - width={width} + width={chartSize.width} > = ({ buckets, changeTi } showGrid={false} /> - + ); diff --git a/plugins/core/src/utils/useDimensions.tsx b/plugins/core/src/utils/useDimensions.tsx index ccfb834b2..571f7590f 100644 --- a/plugins/core/src/utils/useDimensions.tsx +++ b/plugins/core/src/utils/useDimensions.tsx @@ -5,11 +5,11 @@ export interface IDimensions { width: number; } -export const useDimensions = (targetRef: React.RefObject): IDimensions => { +export const useDimensions = (targetRef: React.RefObject, defaults?: IDimensions): IDimensions => { const getDimensions = (): IDimensions => { return { - height: targetRef.current ? targetRef.current.offsetHeight : 0, - width: targetRef.current ? targetRef.current.offsetWidth : 0, + height: targetRef.current ? targetRef.current.offsetHeight : defaults ? defaults.height : 0, + width: targetRef.current ? targetRef.current.offsetWidth : defaults ? defaults.height : 0, }; };