@grafana/ui/dist/esm/components/Table/Cells/SparklineCell.mjs.map

Grafana Components Library

{"version":3,"file":"SparklineCell.mjs","sources":["../../../../../src/components/Table/Cells/SparklineCell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  FieldType,\n  FieldConfig,\n  getMinMaxAndDelta,\n  FieldSparkline,\n  isDataFrame,\n  Field,\n  isDataFrameWithValue,\n  formattedValueToString,\n} from '@grafana/data';\nimport {\n  BarAlignment,\n  GraphDrawStyle,\n  GraphFieldConfig,\n  GraphGradientMode,\n  LineInterpolation,\n  TableSparklineCellOptions,\n  TableCellDisplayMode,\n  VisibilityMode,\n} from '@grafana/schema';\n\nimport { useTheme2 } from '../../../themes';\nimport { measureText } from '../../../utils';\nimport { FormattedValueDisplay } from '../../FormattedValueDisplay/FormattedValueDisplay';\nimport { Sparkline } from '../../Sparkline/Sparkline';\nimport { TableCellProps } from '../types';\nimport { getAlignmentFactor, getCellOptions } from '../utils';\n\nexport const 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: TableCellProps) => {\n  const { field, innerWidth, tableStyles, cell, cellProps, timeRange } = props;\n  const sparkline = getSparkline(cell.value);\n  const theme = useTheme2();\n\n  if (!sparkline) {\n    return (\n      <div {...cellProps} className={tableStyles.cellContainer}>\n        {field.config.noValue || 'no data'}\n      </div>\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 = field.config.custom?.cellOptions?.hideValue;\n  let valueWidth = 0;\n  let valueElement: React.ReactNode = null;\n  if (!hideValue) {\n    const value = isDataFrameWithValue(cell.value) ? cell.value.value : null;\n    const displayValue = field.display!(value);\n    const alignmentFactor = getAlignmentFactor(field, displayValue, cell.row.index);\n\n    valueWidth = measureText(formattedValueToString(alignmentFactor), 16).width + theme.spacing.gridSize;\n\n    valueElement = (\n      <FormattedValueDisplay\n        style={{\n          width: `${valueWidth - theme.spacing.gridSize}px`,\n          textAlign: 'right',\n          marginRight: theme.spacing(1),\n        }}\n        value={displayValue}\n      />\n    );\n  }\n\n  return (\n    <div {...cellProps} className={tableStyles.cellContainer}>\n      {valueElement}\n      <div>\n        <Sparkline\n          width={innerWidth - valueWidth}\n          height={tableStyles.cellHeightInner}\n          sparkline={sparkline}\n          config={config}\n          theme={tableStyles.theme}\n        />\n      </div>\n    </div>\n  );\n};\n\nfunction getSparkline(value: unknown): FieldSparkline | undefined {\n  if (Array.isArray(value)) {\n    return {\n      y: {\n        name: 'test',\n        type: FieldType.number,\n        values: value,\n        config: {},\n      },\n    };\n  }\n\n  if (isDataFrame(value)) {\n    const timeField = value.fields.find((x) => x.type === FieldType.time);\n    const numberField = value.fields.find((x) => x.type === FieldType.number);\n\n    if (timeField && numberField) {\n      return { x: timeField, y: numberField };\n    }\n  }\n\n  return;\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"],"names":[],"mappings":"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"}