From a80cd81f2deb623edeb179514a5c7bce1c5bed88 Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Tue, 5 Oct 2021 22:03:01 +0200
Subject: [PATCH] Remove legend from LogsChart and use useDimensions

This commit removes the legend from the LogsChart component, because on
some zoom levels the legend was displayed, which we do not want.

We are also using the useDimensions hook from the core package now,
instead the custom implementation tp determine the height and width of
the chart. For this we also added an option to specify a default for the
width and height, because the Patternfly charts package logs some errors
when the initial width / height is zero and this ways we can set it to
1.
---
 CHANGELOG.md                                  |  1 +
 .../src/components/panel/LogsChart.tsx        | 24 +++++--------------
 plugins/core/src/utils/useDimensions.tsx      |  6 ++---
 3 files changed, 10 insertions(+), 21 deletions(-)

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<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>
   );
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<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,
     };
   };