Remove legend from LogsChart and use useDimensions

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
 

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<ILogsChartProps> = ({ buckets, changeTime }: ILogsChartProps) => {
   const refChart = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState<number>(1);
-  const [height, setHeight] = useState<number>(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<ILogsChartProps> = ({ 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}
       >
         <ChartAxis
           dependentAxis={false}
@@ -90,7 +78,7 @@ const LogsChart: React.FunctionComponent<ILogsChartProps> = ({ buckets, changeTi
           }
           showGrid={false}
         />
-        <ChartBar data={data} name="count" barWidth={data && width / data.length} />
+        <ChartBar data={data} name="count" barWidth={data && chartSize.width / data.length} />
       </Chart>
     </div>
   );

plugins/core/src/utils/useDimensions.tsx

@@ -5,11 +5,11 @@ export interface IDimensions {
   width: number;
 }
 
-export const useDimensions = (targetRef: React.RefObject<HTMLDivElement>): IDimensions => {
+export const useDimensions = (targetRef: React.RefObject<HTMLDivElement>, 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,
     };
   };