@grafana/ui/dist/cjs/components/Table/TableNG/Cells/SparklineCell.cjs.map

Grafana Components Library

{"version":3,"file":"SparklineCell.cjs","sources":["../../../../../../src/components/Table/TableNG/Cells/SparklineCell.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport memoize from 'micro-memoize';\nimport * as React from 'react';\n\nimport { type FieldConfig, getMinMaxAndDelta, type Field, isDataFrameWithValue } from '@grafana/data';\nimport { t } from '@grafana/i18n';\nimport {\n  BarAlignment,\n  GraphDrawStyle,\n  type GraphFieldConfig,\n  GraphGradientMode,\n  LineInterpolation,\n  type TableSparklineCellOptions,\n  TableCellDisplayMode,\n  VisibilityMode,\n} from '@grafana/schema';\n\nimport { measureText } from '../../../../utils/measureText';\nimport { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay';\nimport { Sparkline } from '../../../Sparkline/Sparkline';\nimport { MaybeWrapWithLink } from '../components/MaybeWrapWithLink';\nimport { isTableCellStylesKeyEqual } from '../styles';\nimport { type SparklineCellProps, type TableCellStyles } from '../types';\nimport { getAlignmentFactor, getCellOptions, prepareSparklineValue } from '../utils';\n\nconst defaultSparklineCellConfig: TableSparklineCellOptions = {\n  type: TableCellDisplayMode.Sparkline,\n  drawStyle: GraphDrawStyle.Line,\n  lineInterpolation: LineInterpolation.Smooth,\n  lineWidth: 1,\n  fillOpacity: 17,\n  gradientMode: GraphGradientMode.Hue,\n  pointSize: 2,\n  barAlignment: BarAlignment.Center,\n  showPoints: VisibilityMode.Never,\n  hideValue: false,\n};\n\nexport const SparklineCell = (props: SparklineCellProps) => {\n  const { field, value, theme, timeRange, rowIdx, width } = props;\n  const sparkline = prepareSparklineValue(value, field);\n\n  if (!sparkline) {\n    return (\n      <MaybeWrapWithLink field={field} rowIdx={rowIdx}>\n        {field.config.noValue || t('grafana-ui.table.sparkline.no-data', 'no data')}\n      </MaybeWrapWithLink>\n    );\n  }\n\n  // Get the step from the first two values to null-fill the x-axis based on timerange\n  if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {\n    sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];\n  }\n\n  // Remove non-finite values, e.g: NaN, +/-Infinity\n  sparkline.y.values = sparkline.y.values.map((v) => {\n    if (!Number.isFinite(v)) {\n      return null;\n    } else {\n      return v;\n    }\n  });\n\n  const range = getMinMaxAndDelta(sparkline.y);\n  sparkline.y.config.min = range.min;\n  sparkline.y.config.max = range.max;\n  sparkline.y.state = { range };\n  sparkline.timeRange = timeRange;\n\n  const cellOptions = getTableSparklineCellOptions(field);\n\n  const config: FieldConfig<GraphFieldConfig> = {\n    color: field.config.color,\n    custom: {\n      ...defaultSparklineCellConfig,\n      ...cellOptions,\n    },\n  };\n\n  const hideValue = cellOptions.hideValue;\n  let valueWidth = 0;\n  let valueElement: React.ReactNode = null;\n  if (!hideValue) {\n    const newValue = isDataFrameWithValue(value) ? value.value : null;\n    const displayValue = field.display!(newValue);\n    const alignmentFactor = getAlignmentFactor(field, displayValue, rowIdx!);\n\n    valueWidth =\n      measureText(`${alignmentFactor.prefix ?? ''}${alignmentFactor.text}${alignmentFactor.suffix ?? ''}`, 16).width +\n      theme.spacing.gridSize;\n\n    valueElement = <FormattedValueDisplay style={{ width: valueWidth }} value={displayValue} />;\n  }\n\n  return (\n    <MaybeWrapWithLink field={field} rowIdx={rowIdx}>\n      {valueElement}\n      <Sparkline width={width - valueWidth} height={25} sparkline={sparkline} config={config} theme={theme} />\n    </MaybeWrapWithLink>\n  );\n};\n\nfunction getTableSparklineCellOptions(field: Field): TableSparklineCellOptions {\n  let options = getCellOptions(field);\n  if (options.type === TableCellDisplayMode.Auto) {\n    options = { ...options, type: TableCellDisplayMode.Sparkline };\n  }\n  if (options.type === TableCellDisplayMode.Sparkline) {\n    return options;\n  }\n  throw new Error(`Expected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);\n}\n\nexport const getStyles: TableCellStyles = memoize(\n  (theme, { textAlign }) =>\n    css({\n      '&, & > a': {\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: theme.spacing(1),\n        ...(textAlign === 'right' && { flexDirection: 'row-reverse' }),\n      },\n    }),\n  { isMatchingKey: isTableCellStylesKeyEqual }\n);\n"],"names":["TableCellDisplayMode","GraphDrawStyle","LineInterpolation","GraphGradientMode","BarAlignment","VisibilityMode","prepareSparklineValue","jsx","MaybeWrapWithLink","t","getMinMaxAndDelta","isDataFrameWithValue","getAlignmentFactor","measureText","FormattedValueDisplay","jsxs","Sparkline","getCellOptions","memoize","css","isTableCellStylesKeyEqual"],"mappings":"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"}