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

Grafana Components Library

{"version":3,"file":"SparklineCell.mjs","sources":["../../../../../../src/components/Table/TableNG/Cells/SparklineCell.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport * as React from 'react';\n\nimport {\n  FieldType,\n  FieldConfig,\n  getMinMaxAndDelta,\n  FieldSparkline,\n  isDataFrame,\n  Field,\n  isDataFrameWithValue,\n  GrafanaTheme2,\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 { useStyles2 } from '../../../../themes';\nimport { measureText } from '../../../../utils';\nimport { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay';\nimport { Sparkline } from '../../../Sparkline/Sparkline';\nimport { SparklineCellProps } 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: SparklineCellProps) => {\n  const { field, value, theme, timeRange, rowIdx, justifyContent, width } = props;\n  const styles = useStyles2(getStyles, justifyContent);\n  const sparkline = getSparkline(value);\n\n  if (!sparkline) {\n    return <>{field.config.noValue || 'no data'}</>;\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 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 = (\n      <FormattedValueDisplay\n        style={{\n          width: `${valueWidth - theme.spacing.gridSize}px`,\n          textAlign: 'right',\n          marginRight: theme.spacing(1),\n        }}\n        className={styles.valueContainer}\n        value={displayValue}\n      />\n    );\n  }\n\n  // @TODO update width, height\n  return (\n    <div className={styles.cellContainer}>\n      {valueElement}\n      <Sparkline width={width - valueWidth} height={25} sparkline={sparkline} config={config} theme={theme} />\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\nconst getStyles = (theme: GrafanaTheme2, justifyContent: Property.JustifyContent | undefined) => ({\n  cellContainer: css({\n    display: 'flex',\n    width: '100%',\n    alignItems: 'center',\n    justifyContent,\n  }),\n  valueContainer: css({\n    div: { width: 'inherit' },\n  }),\n});\n"],"names":[],"mappings":"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"}