@grafana/ui/dist/esm/components/Sparkline/Sparkline.mjs.map

Grafana Components Library

{"version":3,"file":"Sparkline.mjs","sources":["../../../../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport { PureComponent } from 'react';\nimport { AlignedData, Range } from 'uplot';\n\nimport {\n  compareDataFrameStructures,\n  DataFrame,\n  Field,\n  FieldConfig,\n  FieldSparkline,\n  FieldType,\n  getFieldColorModeForField,\n  nullToValue,\n} from '@grafana/data';\nimport {\n  AxisPlacement,\n  GraphDrawStyle,\n  GraphFieldConfig,\n  VisibilityMode,\n  ScaleDirection,\n  ScaleOrientation,\n} from '@grafana/schema';\n\nimport { Themeable2 } from '../../types';\nimport { UPlotChart } from '../uPlot/Plot';\nimport { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';\nimport { preparePlotData2, getStackingGroups } from '../uPlot/utils';\n\nimport { preparePlotFrame } from './utils';\n\nexport interface SparklineProps extends Themeable2 {\n  width: number;\n  height: number;\n  config?: FieldConfig<GraphFieldConfig>;\n  sparkline: FieldSparkline;\n}\n\ninterface State {\n  data: AlignedData;\n  alignedDataFrame: DataFrame;\n  configBuilder: UPlotConfigBuilder;\n}\n\nconst defaultConfig: GraphFieldConfig = {\n  drawStyle: GraphDrawStyle.Line,\n  showPoints: VisibilityMode.Auto,\n  axisPlacement: AxisPlacement.Hidden,\n  pointSize: 2,\n};\n\n/** @internal */\nexport class Sparkline extends PureComponent<SparklineProps, State> {\n  constructor(props: SparklineProps) {\n    super(props);\n\n    const alignedDataFrame = preparePlotFrame(props.sparkline, props.config);\n\n    this.state = {\n      data: preparePlotData2(alignedDataFrame, getStackingGroups(alignedDataFrame)),\n      alignedDataFrame,\n      configBuilder: this.prepareConfig(alignedDataFrame),\n    };\n  }\n\n  static getDerivedStateFromProps(props: SparklineProps, state: State) {\n    const _frame = preparePlotFrame(props.sparkline, props.config);\n    const frame = nullToValue(_frame);\n    if (!frame) {\n      return { ...state };\n    }\n\n    return {\n      ...state,\n      data: preparePlotData2(frame, getStackingGroups(frame)),\n      alignedDataFrame: frame,\n    };\n  }\n\n  componentDidUpdate(prevProps: SparklineProps, prevState: State) {\n    const { alignedDataFrame } = this.state;\n\n    if (!alignedDataFrame) {\n      return;\n    }\n\n    let rebuildConfig = false;\n\n    if (prevProps.sparkline !== this.props.sparkline) {\n      const isStructureChanged = !compareDataFrameStructures(this.state.alignedDataFrame, prevState.alignedDataFrame);\n      const isRangeChanged = !isEqual(\n        alignedDataFrame.fields[1].state?.range,\n        prevState.alignedDataFrame.fields[1].state?.range\n      );\n      rebuildConfig = isStructureChanged || isRangeChanged;\n    } else {\n      rebuildConfig = !isEqual(prevProps.config, this.props.config);\n    }\n\n    if (rebuildConfig) {\n      this.setState({ configBuilder: this.prepareConfig(alignedDataFrame) });\n    }\n  }\n\n  getYRange(field: Field): Range.MinMax {\n    let { min, max } = this.state.alignedDataFrame.fields[1].state?.range!;\n    const noValue = +this.state.alignedDataFrame.fields[1].config?.noValue!;\n\n    if (!Number.isNaN(noValue)) {\n      min = Math.min(min!, +noValue);\n      max = Math.max(max!, +noValue);\n    }\n\n    if (min === max) {\n      if (min === 0) {\n        max = 100;\n      } else {\n        min = 0;\n        max! *= 2;\n      }\n\n      return [min, max!];\n    }\n\n    return [Math.max(min!, field.config.min ?? -Infinity), Math.min(max!, field.config.max ?? Infinity)];\n  }\n\n  prepareConfig(data: DataFrame) {\n    const { theme } = this.props;\n    const builder = new UPlotConfigBuilder();\n\n    builder.setCursor({\n      show: false,\n      x: false, // no crosshairs\n      y: false,\n    });\n\n    // X is the first field in the alligned frame\n    const xField = data.fields[0];\n    builder.addScale({\n      scaleKey: 'x',\n      orientation: ScaleOrientation.Horizontal,\n      direction: ScaleDirection.Right,\n      isTime: false, //xField.type === FieldType.time,\n      range: () => {\n        const { sparkline } = this.props;\n        if (sparkline.x) {\n          if (sparkline.timeRange && sparkline.x.type === FieldType.time) {\n            return [sparkline.timeRange.from.valueOf(), sparkline.timeRange.to.valueOf()];\n          }\n          const vals = sparkline.x.values;\n          return [vals[0], vals[vals.length - 1]];\n        }\n        return [0, sparkline.y.values.length - 1];\n      },\n    });\n\n    builder.addAxis({\n      scaleKey: 'x',\n      theme,\n      placement: AxisPlacement.Hidden,\n    });\n\n    for (let i = 0; i < data.fields.length; i++) {\n      const field = data.fields[i];\n      const config: FieldConfig<GraphFieldConfig> = field.config;\n      const customConfig: GraphFieldConfig = {\n        ...defaultConfig,\n        ...config.custom,\n      };\n\n      if (field === xField || field.type !== FieldType.number) {\n        continue;\n      }\n\n      const scaleKey = config.unit || '__fixed';\n      builder.addScale({\n        scaleKey,\n        orientation: ScaleOrientation.Vertical,\n        direction: ScaleDirection.Up,\n        range: () => this.getYRange(field),\n      });\n\n      builder.addAxis({\n        scaleKey,\n        theme,\n        placement: AxisPlacement.Hidden,\n      });\n\n      const colorMode = getFieldColorModeForField(field);\n      const seriesColor = colorMode.getCalculator(field, theme)(0, 0);\n      const pointsMode =\n        customConfig.drawStyle === GraphDrawStyle.Points ? VisibilityMode.Always : customConfig.showPoints;\n\n      builder.addSeries({\n        pxAlign: false,\n        scaleKey,\n        theme,\n        colorMode,\n        thresholds: config.thresholds,\n        drawStyle: customConfig.drawStyle!,\n        lineColor: customConfig.lineColor ?? seriesColor,\n        lineWidth: customConfig.lineWidth,\n        lineInterpolation: customConfig.lineInterpolation,\n        showPoints: pointsMode,\n        pointSize: customConfig.pointSize,\n        fillOpacity: customConfig.fillOpacity,\n        fillColor: customConfig.fillColor,\n        lineStyle: customConfig.lineStyle,\n        gradientMode: customConfig.gradientMode,\n        spanNulls: customConfig.spanNulls,\n      });\n    }\n\n    return builder;\n  }\n\n  render() {\n    const { data, configBuilder } = this.state;\n    const { width, height } = this.props;\n    return <UPlotChart data={data} config={configBuilder} width={width} height={height} />;\n  }\n}\n"],"names":[],"mappings":"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"}