kobsio · ricoberger · Jul 9, 2022 · Jul 9, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,8 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 
 ### Fixed
 
+- [#387](https://github.com/kobsio/kobs/pull/#387): [app] Fix tooltip in charts.
+
 ### Changed
 
 ## [v0.9.1](https://github.com/kobsio/kobs/releases/tag/v0.9.1) (2022-07-08)

diff --git a/plugins/plugin-azure/package.json b/plugins/plugin-azure/package.json
@@ -8,6 +8,7 @@
     "@azure/arm-containerinstance": "^8.1.0",
     "@azure/arm-containerservice": "^16.1.0",
     "@kobsio/react-scripts": "5.0.1-1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@nivo/pie": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",

diff --git a/plugins/plugin-istio/package.json b/plugins/plugin-istio/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@nivo/scales": "^0.79.0",
     "@patternfly/patternfly": "^4.194.4",

diff --git a/plugins/plugin-jaeger/package.json b/plugins/plugin-jaeger/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
+    "@nivo/core": "^0.79.0",
     "@nivo/scatterplot": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",
     "@patternfly/react-core": "^4.214.1",

diff --git a/plugins/plugin-kiali/package.json b/plugins/plugin-kiali/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",
     "@patternfly/react-core": "^4.214.1",

diff --git a/plugins/plugin-klogs/package.json b/plugins/plugin-klogs/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
     "@nivo/bar": "^0.79.1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@nivo/pie": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",

diff --git a/plugins/plugin-prometheus/package.json b/plugins/plugin-prometheus/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
     "@nivo/bar": "^0.79.1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",
     "@patternfly/react-core": "^4.214.1",

diff --git a/plugins/plugin-prometheus/src/components/page/PageToolbarAutocomplete.tsx b/plugins/plugin-prometheus/src/components/page/PageToolbarAutocomplete.tsx
@@ -126,7 +126,7 @@ const PageToolbarAutocomplete: React.FunctionComponent<IPageToolbarAutocomplete>
         {inputFocused && data && data.length > 0 && !(data.length === 1 && data[0] === query) && (
           <div
             className="pf-c-search-input__menu"
-            style={{ height: '50vh', overflowX: 'auto' }}
+            style={{ maxHeight: '50vh', overflowX: 'auto' }}
             onMouseEnter={(): void => setHovering(true)}
             onMouseLeave={(): void => setHovering(false)}
           >

diff --git a/plugins/plugin-prometheus/src/components/panel/Chart.tsx b/plugins/plugin-prometheus/src/components/panel/Chart.tsx
@@ -66,7 +66,6 @@ export const Chart: React.FunctionComponent<IChartProps> = ({
       enableGridX={false}
       enableGridY={true}
       enablePoints={false}
-      xFormat="time:%Y-%m-%d %H:%M:%S"
       lineWidth={1}
       margin={{ bottom: 25, left: 50, right: 0, top: 0 }}
       theme={CHART_THEME}
@@ -86,9 +85,10 @@ export const Chart: React.FunctionComponent<IChartProps> = ({
           />
         );
       }}
+      xFormat="time:%Y-%m-%d %H:%M:%S"
       xScale={{ max: new Date(endTime), min: new Date(startTime), type: 'time' }}
-      yScale={getYScale(options.yAxis, options.stacked, min, max)}
       yFormat=" >-.4f"
+      yScale={getYScale(options.yAxis, options.stacked, min, max)}
     />
   );
 };

diff --git a/plugins/plugin-sql/package.json b/plugins/plugin-sql/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@kobsio/react-scripts": "5.0.1-1",
+    "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@nivo/pie": "^0.79.1",
     "@patternfly/patternfly": "^4.194.4",

diff --git a/plugins/shared/src/components/chart/ChartTooltip.tsx b/plugins/shared/src/components/chart/ChartTooltip.tsx
@@ -22,26 +22,23 @@ export const ChartTooltip: React.FunctionComponent<IChartTooltipProps> = ({
 
   return (
     <TooltipWrapper anchor={anchorDefault} position={positionDefault}>
-      <div style={{ minWidth: '25vw' }}>
-        <div
-          style={{
-            background: '#151515',
-            color: '#f0f0f0',
-            fontFamily: '"RedHatText", "Overpass", overpass, helvetica, arial, sans-serif',
-            fontSize: '14px',
-            padding: '8px',
-            whiteSpace: 'nowrap',
-            width: 'fit-content',
-          }}
-        >
-          {title && (
-            <div>
-              <b>{title}</b>
-            </div>
-          )}
-          <div className="pf-u-text-break-word pf-u-text-wrap">
-            <SquareIcon color={color} /> {label}
+      <div
+        style={{
+          background: '#151515',
+          color: '#f0f0f0',
+          fontFamily: '"RedHatText", "Overpass", overpass, helvetica, arial, sans-serif',
+          fontSize: '14px',
+          padding: '8px',
+          width: '25vw',
+        }}
+      >
+        {title && (
+          <div>
+            <b>{title}</b>
           </div>
+        )}
+        <div className="pf-u-text-break-word pf-u-text-wrap">
+          <SquareIcon color={color} /> {label}
         </div>
       </div>
     </TooltipWrapper>