IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

SparklineCell: Display absolute value (#76125)

Browse Source
This commit is contained in:
Domas
2023-10-13 11:00:42 +03:00
committed by GitHub
parent d72ec22ec2
commit 239bda207e
24 changed files with 253 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/panel/table/TableCellOptionEditor.tsx
View File

@@ -3,7 +3,7 @@ import { merge } from 'lodash';
import React, { useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime';
import { reportInteraction } from '@grafana/runtime';
import { TableCellOptions } from '@grafana/schema';
import { Field, Select, TableCellDisplayMode, useStyles2 } from '@grafana/ui';
@@ -77,14 +77,9 @@ export const TableCellOptionEditor = ({ value, onChange }: Props) => {
);
};
const SparklineDisplayModeOption: SelectableValue<TableCellOptions> = {
value: { type: TableCellDisplayMode.Sparkline },
label: 'Sparkline',
};
const cellDisplayModeOptions: Array<SelectableValue<TableCellOptions>> = [
{ value: { type: TableCellDisplayMode.Auto }, label: 'Auto' },
...(config.featureToggles.timeSeriesTable ? [SparklineDisplayModeOption] : []),
{ value: { type: TableCellDisplayMode.Sparkline }, label: 'Sparkline' },
{ value: { type: TableCellDisplayMode.ColorText }, label: 'Colored text' },
{ value: { type: TableCellDisplayMode.ColorBackground }, label: 'Colored background' },
{ value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' },

21
public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
View File

@@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React, { useMemo } from 'react';
import { createFieldConfigRegistry } from '@grafana/data';
import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
import { VerticalGroup, Field, useStyles2 } from '@grafana/ui';
import { defaultSparklineCellConfig } from '@grafana/ui/src/components/Table/SparklineCell';
@@ -11,7 +11,8 @@ import { TableCellEditorProps } from '../TableCellOptionEditor';
type OptionKey = keyof TableSparklineCellOptions;
const optionIds: Array<keyof GraphFieldConfig> = [
const optionIds: Array<keyof TableSparklineCellOptions> = [
'hideValue',
'drawStyle',
'lineInterpolation',
'barAlignment',
@@ -24,11 +25,25 @@ const optionIds: Array<keyof GraphFieldConfig> = [
'pointSize',
];
function getChartCellConfig(cfg: GraphFieldConfig): SetFieldConfigOptionsArgs<GraphFieldConfig> {
const graphFieldConfig = getGraphFieldConfig(cfg);
return {
...graphFieldConfig,
useCustomConfig: (builder) => {
graphFieldConfig.useCustomConfig?.(builder);
builder.addBooleanSwitch({
path: 'hideValue',
name: 'Hide value',
});
},
};
}
export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSparklineCellOptions>) => {
const { cellOptions, onChange } = props;
const registry = useMemo(() => {
const config = getGraphFieldConfig(defaultSparklineCellConfig);
const config = getChartCellConfig(defaultSparklineCellConfig);
return createFieldConfigRegistry(config, 'ChartCell');
}, []);