<commit_before>import { number, text } from '@storybook/addon-knobs';
import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
import { Props } from './BarGauge';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import mdx from './BarGauge.mdx';

const getKnobs = () => {
  return {
    value: number('value', 70),
    title: text('title', 'Title'),
    minValue: number('minValue', 0),
    maxValue: number('maxValue', 100),
    threshold1Value: number('threshold1Value', 40),
    threshold1Color: text('threshold1Color', 'orange'),
    threshold2Value: number('threshold2Value', 60),
    threshold2Color: text('threshold2Color', 'red'),
  };
};

export default {
  title: 'Visualizations/BarGauge',
  component: BarGauge,
  decorators: [withCenteredStory],
  parameters: {
    docs: {
      page: mdx,
    },
  },
};

function addBarGaugeStory(overrides: Partial<Props>) {
  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 const gradientVertical = addBarGaugeStory({
  displayMode: BarGaugeDisplayMode.Gradient,<commit_msg>BarGauge: Fix story for BarGauge, caused knobs to show for other stories (#29232)<commit_after>import React from 'react';
import { number, text } from '@storybook/addon-knobs';
import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
import { Props } from './BarGauge';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './BarGauge.mdx';
import { useTheme } from '../../themes';

const getKnobs = () => {
  return {
    value: number('value', 70),
    title: text('title', 'Title'),
    minValue: number('minValue', 0),
    maxValue: number('maxValue', 100),
    threshold1Value: number('threshold1Value', 40),
    threshold1Color: text('threshold1Color', 'orange'),
    threshold2Value: number('threshold2Value', 60),
    threshold2Color: text('threshold2Color', 'red'),
  };
};

export default {
  title: 'Visualizations/BarGauge',
  component: BarGauge,
  decorators: [withCenteredStory],
  parameters: {
    docs: {
      page: mdx,
    },
  },
};

function addBarGaugeStory(overrides: Partial<Props>) {
  return () => {
    const theme = useTheme();

    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,
      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 <BarGauge {...props} />;
  };
}

export const gradientVertical = addBarGaugeStory({
  displayMode: BarGaugeDisplayMode.Gradient,
{'fraction_non_alphanumeric': 0.13465303458777464, 'fraction_numerical': 0.015009788992821405, 'mean_word_length': 3.076241134751773, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2767927', 'n_tokens_mistral': 1459, 'n_tokens_neox': 1382, 'n_words': 319}