Restore Custom Scales feature

Author: asimonok

src/TimeSeriesPanel.tsx

@@ -1,38 +1,19 @@
 import { config } from 'app/core/config';
 import React, { useCallback, useMemo, useState } from 'react';
-import {
-  CartesianCoords2D,
-  DashboardCursorSync,
-  DataFrame,
-  DataFrameType,
-  PanelProps,
-  toDataFrame,
-  VizOrientation,
-} from '@grafana/data';
+import { DashboardCursorSync, DataFrame, DataFrameType, PanelProps, toDataFrame, VizOrientation } from '@grafana/data';
 import { getAppEvents, getBackendSrv, PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
-import {
-  EventBusPlugin,
-  KeyboardPlugin,
-  MenuItemProps,
-  TooltipPlugin,
-  TooltipPlugin2,
-  usePanelContext,
-  ZoomPlugin,
-} from '@grafana/ui';
+import { Button, EventBusPlugin, KeyboardPlugin, TooltipPlugin2, usePanelContext } from '@grafana/ui';
 import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
 import { Options } from './panelcfg.gen';
-import { AnnotationEditorPlugin } from './plugins/AnnotationEditorPlugin';
-import { AnnotationsPlugin } from './plugins/AnnotationsPlugin';
-import { ContextMenuPlugin } from './plugins/ContextMenuPlugin';
 import { ExemplarsPlugin, getVisibleLabels } from './plugins/ExemplarsPlugin';
 import { OutsideRangePlugin } from './plugins/OutsideRangePlugin';
 import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
 import { TimescaleEditor } from './plugins/timescales/TimescaleEditor';
 import { TimescaleItem } from './plugins/timescales/TimescaleEditorForm';
 import { getPrepareTimeseriesSuggestion } from './suggestions';
 import { useRuntimeVariables } from './hooks';
-import { getTimezones, prepareGraphableFields, regenerateLinksSupplier } from './utils';
+import { getTimezones, prepareGraphableFields } from './utils';
 import { TimeRange2, TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 import { TimeSeriesTooltip } from './TimeSeriesTooltip';
 import { AnnotationsPlugin2 } from './plugins/AnnotationsPlugin2';
@@ -63,10 +44,7 @@ export const TimeSeriesPanel = ({
   } = usePanelContext();
 
   const [isAddingTimescale, setAddingTimescale] = useState(false);
-  const [timescaleTriggerCoords, setTimescaleTriggerCoords] = useState<{
-    viewport: CartesianCoords2D;
-    plotCanvas: CartesianCoords2D;
-  } | null>(null);
+  const [timescaleTriggerCoords, setTimescaleTriggerCoords] = useState<{ left: number; top: number } | null>(null);
 
   const isVerticallyOriented = options.orientation === VizOrientation.Vertical;
   const frames = useMemo(() => prepareGraphableFields(data.series, config.theme2, timeRange), [data.series, timeRange]);
@@ -273,6 +251,27 @@ export const TimeSeriesPanel = ({
                       isPinned={isPinned}
                       annotate={enableAnnotationCreation ? annotate : undefined}
                       maxHeight={options.tooltip.maxHeight}
+                      footerContent={
+                        <>
+                          <Button
+                            icon="channel-add"
+                            variant="secondary"
+                            size="sm"
+                            id="custom-scales"
+                            onClick={() => {
+                              setTimescaleTriggerCoords({
+                                left: u.rect.left + (u.cursor.left ?? 0),
+                                top: u.rect.top + (u.cursor.top ?? 0),
+                              });
+                              setAddingTimescale(true);
+                              getTimescales();
+                              dismiss();
+                            }}
+                          >
+                            Custom scales
+                          </Button>
+                        </>
+                      }
                     />
                   );
                 }}
@@ -306,6 +305,19 @@ export const TimeSeriesPanel = ({
                 )}
               </>
             )}
+            {isAddingTimescale && (
+              <TimescaleEditor
+                onSave={onUpsertTimescales}
+                onDismiss={() => setAddingTimescale(false)}
+                scales={scales}
+                style={{
+                  position: 'absolute',
+                  left: timescaleTriggerCoords?.left,
+                  top: timescaleTriggerCoords?.top,
+                }}
+                timescalesFrame={timescalesFrame}
+              />
+            )}
           </>
         );
       }}

src/TimeSeriesTooltip.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React, { ReactNode } from 'react';
 
-import { DataFrame, Field, FieldType, formattedValueToString } from '@grafana/data';
+import { DataFrame, Field, FieldType, formattedValueToString, GrafanaTheme2 } from '@grafana/data';
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen';
 import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
@@ -36,6 +36,11 @@ export interface TimeSeriesTooltipProps {
 
   annotate?: () => void;
   maxHeight?: number;
+
+  /**
+   * Footer Content
+   */
+  footerContent?: ReactNode;
 }
 
 export const TimeSeriesTooltip = ({
@@ -48,6 +53,7 @@ export const TimeSeriesTooltip = ({
   isPinned,
   annotate,
   maxHeight,
+  footerContent = null,
 }: TimeSeriesTooltipProps) => {
   const styles = useStyles2(getStyles);
 
@@ -80,7 +86,12 @@ export const TimeSeriesTooltip = ({
     const dataIdx = dataIdxs[seriesIdx]!;
     const links = getDataLinks(field, dataIdx);
 
-    footer = <VizTooltipFooter dataLinks={links} annotate={annotate} />;
+    footer = (
+      <>
+        <VizTooltipFooter dataLinks={links} annotate={annotate} />
+        {footerContent && <div className={styles.footerContent}>{footerContent}</div>}
+      </>
+    );
   }
 
   const headerItem: VizTooltipItem | null = xField.config.custom?.hideFrom?.tooltip
@@ -104,9 +115,13 @@ export const TimeSeriesTooltip = ({
   );
 };
 
-export const getStyles = () => ({
+export const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
   }),
+  footerContent: css({
+    borderTop: `1px solid ${theme.colors.border.medium}`,
+    padding: theme.spacing(1),
+  }),
 });