Add option for aligning series names to the right

public/app/core/components/TimelineChart/TimelineChart.tsx

@@ -16,6 +16,7 @@ export interface TimelineProps extends Omit<GraphNGProps, 'prepConfig' | 'propsT
   rowHeight?: number;
   showValue: VisibilityMode;
   alignValue?: TimelineValueAlignment;
+  seriesNameAlignment?: 'left' | 'right';
   colWidth?: number;
   legendItems?: VizLegendItem[];
   tooltip?: VizTooltipOptions;
@@ -23,7 +24,16 @@ export interface TimelineProps extends Omit<GraphNGProps, 'prepConfig' | 'propsT
   paginationRev?: string;
 }
 
-const propsToDiff = ['rowHeight', 'colWidth', 'showValue', 'mergeValues', 'alignValue', 'tooltip', 'paginationRev'];
+const propsToDiff = [
+  'rowHeight',
+  'colWidth',
+  'showValue',
+  'mergeValues',
+  'alignValue',
+  'seriesNameAlignment',
+  'tooltip',
+  'paginationRev',
+];
 
 export class TimelineChart extends Component<TimelineProps> {
   getValueColor = (frameIdx: number, fieldIdx: number, value: unknown) => {

public/app/core/components/TimelineChart/utils.ts

@@ -50,6 +50,7 @@ interface UPlotConfigOptions {
   colWidth?: number;
   showValue: VisibilityMode;
   alignValue?: TimelineValueAlignment;
+  seriesNameAlignment?: 'left' | 'right';
   mergeValues?: boolean;
   getValueColor: (frameIdx: number, fieldIdx: number, value: unknown) => string;
   hoverMulti: boolean;
@@ -90,6 +91,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
   colWidth,
   showValue,
   alignValue,
+  seriesNameAlignment,
   mergeValues,
   getValueColor,
   hoverMulti,
@@ -181,11 +183,12 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
   const yCustomConfig = frame.fields[1].config.custom;
   const yAxisWidth = yCustomConfig.axisWidth;
   const yAxisHidden = yCustomConfig.axisPlacement === AxisPlacement.Hidden;
+  const yAxisPlacement = seriesNameAlignment === 'right' ? AxisPlacement.Right : AxisPlacement.Left;
 
   builder.addAxis({
     scaleKey: FIXED_UNIT, // y
     isTime: false,
-    placement: AxisPlacement.Left,
+    placement: yAxisPlacement,
     splits: coreConfig.ySplits,
     values: yAxisHidden ? (u, splits) => splits.map((v) => null) : coreConfig.yValues,
     grid: { show: false },

public/app/plugins/panel/state-timeline/module.tsx

@@ -132,6 +132,18 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StateTimelinePanel)
         },
         defaultValue: defaultOptions.alignValue,
       })
+      .addRadio({
+        path: 'seriesNameAlignment',
+        name: t('state-timeline.name-align-series-names', 'Align series names'),
+        category,
+        settings: {
+          options: [
+            { value: 'left', label: t('state-timeline.align-series-names-options.label-left', 'Left') },
+            { value: 'right', label: t('state-timeline.align-series-names-options.label-right', 'Right') },
+          ],
+        },
+        defaultValue: 'left',
+      })
       .addSliderInput({
         path: 'rowHeight',
         name: t('state-timeline.name-row-height', 'Row height'),

public/app/plugins/panel/state-timeline/panelcfg.cue

@@ -37,6 +37,8 @@ composableKinds: PanelCfg: {
 					mergeValues?: bool | *true
 					//Controls value alignment on the timelines
 					alignValue?: ui.TimelineValueAlignment & (*"left" | _)
+					//Controls series name alignment on the y-axis
+					seriesNameAlignment?: ("left" | "right") & (*"left" | _)
 					//Enables pagination when > 0
 					perPage?: number & >=1 | *20
 				} @cuetsy(kind="interface")

public/app/plugins/panel/state-timeline/panelcfg.gen.ts

@@ -27,6 +27,10 @@ export interface Options extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui
    * Controls the row height
    */
   rowHeight: number;
+  /**
+   * Controls series name alignment on the y-axis
+   */
+  seriesNameAlignment?: 'left' | 'right';
   /**
    * Show timeline values on chart
    */
@@ -38,6 +42,7 @@ export const defaultOptions: Partial<Options> = {
   mergeValues: true,
   perPage: 20,
   rowHeight: 0.9,
+  seriesNameAlignment: 'left',
   showValue: ui.VisibilityMode.Auto,
 };