Avoid usage of deprecated UI theme and style setup. Fixed bug when us…

…ing pixel to specify percentage value size.
nikos · Oct 4, 2022 · 5db1221 · 5db1221
1 parent 1effc76
commit 5db1221
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/PercentPanel.tsx b/src/PercentPanel.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { PanelProps, getValueFormat, formattedValueToString } from '@grafana/data';
 import { PercentPanelOptions } from 'types';
 import { css, cx } from 'emotion';
-import { stylesFactory, useTheme } from '@grafana/ui';
+import { useStyles, useTheme2 } from '@grafana/ui';
 
 interface Props extends PanelProps<PercentPanelOptions> {}
 
@@ -19,10 +19,12 @@ function SpanValue({ className, fontSize, color, lineHeight, children }:
 
 
 export const PercentPanel: React.FC<Props> = ({ options, data, width, height }) => {
-  const theme = useTheme();
-  const styles = getStyles();
+  const theme = useTheme2();
+  const styles = useStyles(getPanelStyles);
 
-  const fontSizePx = (parseInt(options.percentageValueFontSize, 10) / 100) * BASE_FONT_SIZE;
+  const percentageValueFontSize = options.percentageValueFontSize.includes('px')
+      ? options.percentageValueFontSize
+      : ((parseInt(options.percentageValueFontSize, 10) / 100) * BASE_FONT_SIZE) + 'px';
 
   // Get values for calculating percentage
   const percentageValueSerie = data.series.find(serie => serie.fields.find(field => field.name === options.percentageValueField));
@@ -62,14 +64,14 @@ export const PercentPanel: React.FC<Props> = ({ options, data, width, height })
       )}
     >
       <div className={styles.textBox}>
-        <SpanValue className="percenttrend-panel-base" fontSize={fontSizePx + 'px'} lineHeight="1em">
+        <SpanValue className="percenttrend-panel-base" fontSize={percentageValueFontSize} lineHeight="1em">
           {percentageValueFormatted}
         </SpanValue>
         { !options.interpretAsTrend
           ? <SpanValue className="percenttrend-panel-percent" fontSize={options.baseValueFontSize}>{percentFormatted}%</SpanValue>
           : percent >= 0
-            ? <SpanValue className="percenttrend-panel-percent" fontSize={options.baseValueFontSize} color={theme.palette.greenBase}>+{percentFormatted}% &#9650;</SpanValue>
-            : <SpanValue className="percenttrend-panel-percent" fontSize={options.baseValueFontSize} color={theme.palette.redBase}  > {percentFormatted}% &#9660;</SpanValue>
+            ? <SpanValue className="percenttrend-panel-percent" fontSize={options.baseValueFontSize} color={theme.visualization.getColorByName('green')}>+{percentFormatted}% &#9650;</SpanValue>
+            : <SpanValue className="percenttrend-panel-percent" fontSize={options.baseValueFontSize} color={theme.visualization.getColorByName('red')}  > {percentFormatted}% &#9660;</SpanValue>
         }
         <SpanValue className="percenttrend-panel-ref" fontSize={options.referenceTextFontSize}>
           {options.referenceText}
@@ -79,7 +81,7 @@ export const PercentPanel: React.FC<Props> = ({ options, data, width, height })
   );
 };
 
-const getStyles = stylesFactory(() => {
+function getPanelStyles() {
   return {
     wrapper: css`
       position: relative;
@@ -97,4 +99,4 @@ const getStyles = stylesFactory(() => {
        transform: translateY(-50%) translateX(-50%);
     `,
   };
-});
+}
diff --git a/src/plugin.json b/src/plugin.json
@@ -40,7 +40,7 @@
       }
     ],
     "version": "1.0.2",
-    "updated": "2022-09-30"
+    "updated": "2022-10-04"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/types.ts b/src/types.ts
@@ -3,7 +3,7 @@ export interface PercentPanelOptions {
   baseValueField: string;
   unit: string;
   interpretAsTrend: boolean;
-  percentageNrDecimals: number;
+  percentageNrDecimals?: number;
   referenceText: string;
   percentageValueFontSize: string;
   baseValueFontSize: string;