@grafana/data#VizOrientation TypeScript Examples

/**
 * Stat panel custom auto orientation
 */
function getOrientation(width: number, height: number, orientation: VizOrientation): VizOrientation {
  if (orientation !== VizOrientation.Auto) {
    return orientation;
  }

  if (width / height > 2) {
    return VizOrientation.Vertical;
  } else {
    return VizOrientation.Horizontal;
  }
}

defaults: PieChartOptions = {
  pieType: PieChartType.PIE,
  strokeWidth: 1,
  orientation: VizOrientation.Auto,
  fieldOptions: {
    ...standardFieldDisplayOptions,
    calcs: [ReducerID.last],
    defaults: {
      unit: 'short',
    },
  },
}

function getProps(propOverrides?: Partial<Props>): Props {
  const field: Partial<Field> = {
    type: FieldType.number,
    config: {
      min: 0,
      max: 100,
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: 'green' },
          { value: 70, color: 'orange' },
          { value: 90, color: 'red' },
        ],
      },
    },
  };
  const theme = getTheme();
  field.display = getDisplayProcessor({ field, theme });

  const props: Props = {
    displayMode: BarGaugeDisplayMode.Basic,
    field: field.config!,
    display: field.display!,
    height: 300,
    width: 300,
    value: field.display(25),
    theme,
    orientation: VizOrientation.Horizontal,
  };

  Object.assign(props, propOverrides);
  return props;
}

static defaultProps: Partial<Props> = {
    lcdCellWidth: 12,
    value: {
      text: '100',
      numeric: 100,
    },
    displayMode: BarGaugeDisplayMode.Gradient,
    orientation: VizOrientation.Horizontal,
    field: {
      min: 0,
      max: 100,
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [],
      },
    },
    itemSpacing: 10,
    showUnfilled: true,
  };

render() {
    const { height, width, data, renderCounter } = this.props;
    return (
      <VizRepeater
        getValues={this.getValues}
        renderValue={this.renderValue}
        width={width}
        height={height}
        source={data}
        renderCounter={renderCounter}
        orientation={VizOrientation.Auto}
      />
    );
  }

function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<BarGaugeOptions>> {
  const timeRange = createTimeRange();

  const options: BarGaugeOptions = {
    displayMode: BarGaugeDisplayMode.Lcd,
    fieldOptions: {
      calcs: ['mean'],
      defaults: {},
      values: false,
      overrides: [],
    },
    orientation: VizOrientation.Horizontal,
    showUnfilled: true,
  };

  return mount<BarGaugePanel>(
    <BarGaugePanel
      id={1}
      data={data}
      timeRange={timeRange}
      timeZone={'utc'}
      options={options}
      onOptionsChange={() => {}}
      onChangeTimeRange={() => {}}
      replaceVariables={s => s}
      renderCounter={0}
      width={532}
      transparent={false}
      height={250}
    />
  );
}

getOrientation(): VizOrientation {
    const { orientation, width, height } = this.props;

    if (orientation === VizOrientation.Auto) {
      if (width > height) {
        return VizOrientation.Vertical;
      } else {
        return VizOrientation.Horizontal;
      }
    }

    return orientation;
  }

BarGaugeCell: FC<TableCellProps> = props => {
  const { field, column, tableStyles, cell } = props;

  if (!field.display) {
    return null;
  }

  let { config } = field;
  if (!config.thresholds) {
    config = {
      ...config,
      thresholds: defaultScale,
    };
  }

  const displayValue = field.display(cell.value);
  let barGaugeMode = BarGaugeDisplayMode.Gradient;

  if (field.config.custom && field.config.custom.displayMode === TableCellDisplayMode.LcdGauge) {
    barGaugeMode = BarGaugeDisplayMode.Lcd;
  }

  let width;
  if (column.width) {
    width = (column.width as number) - tableStyles.cellPadding * 2;
  } else {
    width = tableStyles.cellPadding * 2;
  }

  return (
    <div className={tableStyles.tableCell}>
      <BarGauge
        width={width}
        height={tableStyles.cellHeightInner}
        field={config}
        value={displayValue}
        orientation={VizOrientation.Horizontal}
        theme={tableStyles.theme}
        itemSpacing={1}
        lcdCellWidth={8}
        displayMode={barGaugeMode}
      />
    </div>
  );
}

defaults: StatPanelOptions = {
  graphMode: BigValueGraphMode.Area,
  colorMode: BigValueColorMode.Value,
  justifyMode: BigValueJustifyMode.Auto,
  fieldOptions: standardFieldDisplayOptions,
  orientation: VizOrientation.Auto,
}

defaults: GaugeOptions = {
  showThresholdMarkers: true,
  showThresholdLabels: false,
  fieldOptions: standardGaugeFieldOptions,
  orientation: VizOrientation.Auto,
}

orientationOptions: Array<SelectableValue<VizOrientation>> = [
  { value: VizOrientation.Auto, label: 'Auto' },
  { value: VizOrientation.Horizontal, label: 'Horizontal' },
  { value: VizOrientation.Vertical, label: 'Vertical' },
]

defaults: BarGaugeOptions = {
  displayMode: BarGaugeDisplayMode.Lcd,
  orientation: VizOrientation.Horizontal,
  fieldOptions: standardGaugeFieldOptions,
  showUnfilled: true,
}

render() {
    const { renderValue, height, width, itemSpacing, getAlignmentFactors } = this.props as PropsWithDefaults<V, D>;
    const { values } = this.state;
    const orientation = this.getOrientation();

    const itemStyles: React.CSSProperties = {
      display: 'flex',
    };

    const repeaterStyle: React.CSSProperties = {
      display: 'flex',
    };

    let vizHeight = height;
    let vizWidth = width;

    if (orientation === VizOrientation.Horizontal) {
      repeaterStyle.flexDirection = 'column';
      itemStyles.marginBottom = `${itemSpacing}px`;
      vizWidth = width;
      vizHeight = height / values.length - itemSpacing + itemSpacing / values.length;
    } else {
      repeaterStyle.flexDirection = 'row';
      repeaterStyle.justifyContent = 'space-between';
      itemStyles.marginRight = `${itemSpacing}px`;
      vizHeight = height;
      vizWidth = width / values.length - itemSpacing + itemSpacing / values.length;
    }

    itemStyles.width = `${vizWidth}px`;
    itemStyles.height = `${vizHeight}px`;

    const dims = getAlignmentFactors ? getAlignmentFactors(values, vizWidth, vizHeight) : ({} as D);
    return (
      <div style={repeaterStyle}>
        {values.map((value, index) => {
          return (
            <div key={index} style={getItemStylesForIndex(itemStyles, index, values.length)}>
              {renderValue(value, vizWidth, vizHeight, dims)}
            </div>
          );
        })}
      </div>
    );
  }

function addBarGaugeStory(name: string, overrides: Partial<Props>) {
  BarGaugeStories.add(name, () => {
    const {
      value,
      title,
      minValue,
      maxValue,
      threshold1Color,
      threshold2Color,
      threshold1Value,
      threshold2Value,
    } = getKnobs();

    const field: Partial<Field> = {
      type: FieldType.number,
      config: {
        min: minValue,
        max: maxValue,
        thresholds: {
          mode: ThresholdsMode.Absolute,
          steps: [
            { value: -Infinity, color: 'green' },
            { value: threshold1Value, color: threshold1Color },
            { value: threshold2Value, color: threshold2Color },
          ],
        },
      },
    };
    field.display = getDisplayProcessor({ field });

    const props: Props = {
      theme: {} as any,
      width: 300,
      height: 300,
      value: {
        text: value.toString(),
        title: title,
        numeric: value,
      },
      orientation: VizOrientation.Vertical,
      displayMode: BarGaugeDisplayMode.Basic,
      field: field.config!,
      display: field.display!,
    };

    Object.assign(props, overrides);
    return renderComponentWithTheme(BarGauge, props);
  });
}

export function sharedSingleStatPanelChangedHandler(
  options: Partial<SingleStatBaseOptions> | any,
  prevPluginId: string,
  prevOptions: any
) {
  // Migrating from angular singlestat
  if (prevPluginId === 'singlestat' && prevOptions.angular) {
    const panel = prevOptions.angular;
    const reducer = fieldReducers.getIfExists(panel.valueName);
    const options = {
      fieldOptions: {
        defaults: {} as FieldConfig,
        overrides: [] as ConfigOverrideRule[],
        calcs: [reducer ? reducer.id : ReducerID.mean],
      },
      orientation: VizOrientation.Horizontal,
    };

    const defaults = options.fieldOptions.defaults;
    if (panel.format) {
      defaults.unit = panel.format;
    }
    if (panel.nullPointMode) {
      defaults.nullValueMode = panel.nullPointMode;
    }
    if (panel.nullText) {
      defaults.noValue = panel.nullText;
    }
    if (panel.decimals || panel.decimals === 0) {
      defaults.decimals = panel.decimals;
    }

    // Convert thresholds and color values
    if (panel.thresholds && panel.colors) {
      const levels = panel.thresholds.split(',').map((strVale: string) => {
        return Number(strVale.trim());
      });

      // One more color than threshold
      const thresholds: Threshold[] = [];
      for (const color of panel.colors) {
        const idx = thresholds.length - 1;
        if (idx >= 0) {
          thresholds.push({ value: levels[idx], color });
        } else {
          thresholds.push({ value: -Infinity, color });
        }
      }
      defaults.thresholds = {
        mode: ThresholdsMode.Absolute,
        steps: thresholds,
      };
    }

    // Convert value mappings
    const mappings = convertOldAngularValueMapping(panel);
    if (mappings && mappings.length) {
      defaults.mappings = mappings;
    }

    if (panel.gauge && panel.gauge.show) {
      defaults.min = panel.gauge.minValue;
      defaults.max = panel.gauge.maxValue;
    }
    return options;
  }

  for (const k of optionsToKeep) {
    if (prevOptions.hasOwnProperty(k)) {
      options[k] = cloneDeep(prevOptions[k]);
    }
  }
  return options;
}

function getValueStyles(
  value: FormattedValue,
  color: string,
  width: number,
  height: number,
  orientation: VizOrientation
): CSSProperties {
  const styles: CSSProperties = {
    color: color,
    height: `${height}px`,
    width: `${width}px`,
    display: 'flex',
    alignItems: 'center',
    lineHeight: VALUE_LINE_HEIGHT,
  };

  // how many pixels in wide can the text be?
  let textWidth = width;
  const formattedValueString = formattedValueToString(value);

  if (isVertical(orientation)) {
    styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
    styles.justifyContent = `center`;
  } else {
    styles.fontSize = calculateFontSize(
      formattedValueString,
      textWidth - VALUE_LEFT_PADDING * 2,
      height,
      VALUE_LINE_HEIGHT
    );
    styles.justifyContent = `flex-end`;
    styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
    styles.paddingRight = `${VALUE_LEFT_PADDING}px`;
    // Need to remove the left padding from the text width constraints
    textWidth -= VALUE_LEFT_PADDING;

    // adjust width of title box
    styles.width = measureText(formattedValueString, styles.fontSize).width + VALUE_LEFT_PADDING * 2;
  }

  return styles;
}

function isVertical(orientation: VizOrientation) {
  return orientation === VizOrientation.Vertical;
}

addBarGaugeStory('LCD Horizontal', {
  displayMode: BarGaugeDisplayMode.Lcd,
  orientation: VizOrientation.Vertical,
  height: 500,
  width: 100,
});

addBarGaugeStory('Gradient Horizontal', {
  displayMode: BarGaugeDisplayMode.Gradient,
  orientation: VizOrientation.Horizontal,
  height: 100,
  width: 500,
});

addBarGaugeStory('Gradient Vertical', {
  displayMode: BarGaugeDisplayMode.Gradient,
  orientation: VizOrientation.Vertical,
  height: 500,
  width: 100,
});

describe('BarGauge', () => {
  describe('Get value color', () => {
    it('should get the threshold color if value is same as a threshold', () => {
      const props = getProps();
      props.value = props.display(70);
      expect(getValueColor(props)).toEqual(orange);
    });
    it('should get the base threshold', () => {
      const props = getProps();
      props.value = props.display(-10);
      expect(getValueColor(props)).toEqual(green);
    });
  });

  describe('Get value percent', () => {
    it('0 to 100 and value 40', () => {
      expect(getValuePercent(40, 0, 100)).toEqual(0.4);
    });

    it('50 to 100 and value 75', () => {
      expect(getValuePercent(75, 50, 100)).toEqual(0.5);
    });

    it('-30 to 30 and value 0', () => {
      expect(getValuePercent(0, -30, 30)).toEqual(0.5);
    });

    it('-30 to 30 and value 30', () => {
      expect(getValuePercent(30, -30, 30)).toEqual(1);
    });
  });

  describe('Vertical bar without title', () => {
    it('should not include title height in height', () => {
      const props = getProps({
        height: 300,
        value: getValue(100),
        orientation: VizOrientation.Vertical,
      });
      const styles = getBasicAndGradientStyles(props);
      expect(styles.bar.height).toBe('270px');
    });
  });

  describe('Vertical bar with title', () => {
    it('should include title height in height', () => {
      const props = getProps({
        height: 300,
        value: getValue(100, 'ServerA'),
        orientation: VizOrientation.Vertical,
      });
      const styles = getBasicAndGradientStyles(props);
      expect(styles.bar.height).toBe('249px');
      expect(styles.emptyBar.bottom).toBe('-3px');
    });
  });

  describe('Horizontal bar', () => {
    it('should stretch items', () => {
      const props = getProps({
        height: 300,
        value: getValue(100, 'ServerA'),
        orientation: VizOrientation.Horizontal,
      });
      const styles = getBasicAndGradientStyles(props);
      expect(styles.wrapper.alignItems).toBe('stretch');
      expect(styles.emptyBar.left).toBe('-3px');
    });
  });

  describe('Horizontal bar with title', () => {
    it('should place above if height > 40', () => {
      const props = getProps({
        height: 41,
        value: getValue(100, 'AA'),
        orientation: VizOrientation.Horizontal,
      });
      const styles = getTitleStyles(props);
      expect(styles.wrapper.flexDirection).toBe('column');
    });
  });

  describe('Horizontal bar with title', () => {
    it('should place below if height < 40', () => {
      const props = getProps({
        height: 30,
        value: getValue(100, 'AA'),
        orientation: VizOrientation.Horizontal,
      });
      const styles = getTitleStyles(props);
      expect(styles.wrapper.flexDirection).toBe('row');
    });

    it('should calculate title width based on title', () => {
      const props = getProps({
        height: 30,
        value: getValue(100, 'AA'),
        orientation: VizOrientation.Horizontal,
      });
      const styles = getTitleStyles(props);
      expect(styles.title.width).toBe('17px');

      const props2 = getProps({
        height: 30,
        value: getValue(120, 'Longer title with many words'),
        orientation: VizOrientation.Horizontal,
      });
      const styles2 = getTitleStyles(props2);
      expect(styles2.title.width).toBe('43px');
    });

    it('should use alignmentFactors if provided', () => {
      const props = getProps({
        height: 30,
        value: getValue(100, 'AA'),
        alignmentFactors: {
          title: 'Super duper long title',
          text: '1000',
        },
        orientation: VizOrientation.Horizontal,
      });
      const styles = getTitleStyles(props);
      expect(styles.title.width).toBe('37px');
    });
  });

  describe('Gradient', () => {
    it('should build gradient based on thresholds', () => {
      const props = getProps({ orientation: VizOrientation.Vertical, value: getValue(100) });
      const gradient = getBarGradient(props, 300);
      expect(gradient).toBe('linear-gradient(0deg, #73BF69, #73BF69 105px, #FF9830 240px, #F2495C)');
    });

    it('should stop gradient if value < threshold', () => {
      const props = getProps({ orientation: VizOrientation.Vertical, value: getValue(70) });
      const gradient = getBarGradient(props, 300);
      expect(gradient).toBe('linear-gradient(0deg, #73BF69, #73BF69 105px, #FF9830)');
    });
  });

  describe('Render with basic options', () => {
    it('should render', () => {
      const { wrapper } = setup();
      expect(wrapper).toMatchSnapshot();
    });
  });
});