@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/theme';\nimport { UPlotChart } from '../uPlot/Plot';\nimport { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';\nimport { preparePlotData2, getStackingGroups } from '../uPlot/utils';\n\nimport { getYRange, 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    return getYRange(field, this.state.alignedDataFrame);\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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"}