Barchart: move viz to core (#33947)

* Adds support for Tooltip in BarChartPanel

* Revert some formatting

* Remove BarChart story

* BarChart: move visualization to core

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
This commit is contained in:
Dominik Prokop 2021-05-11 20:57:52 +02:00 committed by GitHub
parent a015bb3a23
commit 17305ccda3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 110 additions and 104 deletions

View File

@ -1,5 +1,5 @@
import { DataFrameFieldIndex, FieldMatcher } from '@grafana/data';
import { SeriesVisibilityChangeMode } from '..';
import { SeriesVisibilityChangeMode } from '../PanelChrome';
/**
* Event being triggered when the user interact with the Graph legend.

View File

@ -1,24 +1,7 @@
import { XYFieldMatchers } from './types';
import {
ArrayVector,
DataFrame,
EventBus,
FieldType,
GrafanaTheme2,
outerJoinDataFrames,
TimeRange,
TimeZone,
} from '@grafana/data';
import { ArrayVector, DataFrame, FieldType, outerJoinDataFrames } from '@grafana/data';
import { nullToUndefThreshold } from './nullToUndefThreshold';
export type PrepConfigOpts<T extends Record<string, any> = {}> = {
frame: DataFrame;
theme: GrafanaTheme2;
timeZone: TimeZone;
getTimeRange: () => TimeRange;
eventBus: EventBus;
} & T;
function applySpanNullsThresholds(frames: DataFrame[]) {
for (const frame of frames) {
let refField = frame.fields.find((field) => field.type === FieldType.time); // this doesnt need to be time, just any numeric/asc join field

View File

@ -13,7 +13,7 @@ import {
getFieldSeriesColor,
} from '@grafana/data';
import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
import { FIXED_UNIT } from '../GraphNG/GraphNG';
import {
AxisPlacement,
@ -25,7 +25,6 @@ import {
ScaleOrientation,
} from '../uPlot/config';
import { collectStackingGroups } from '../uPlot/utils';
import { PrepConfigOpts } from '../GraphNG/utils';
const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
@ -35,9 +34,14 @@ const defaultConfig: GraphFieldConfig = {
axisPlacement: AxisPlacement.Auto,
};
type PrepConfig = (opts: PrepConfigOpts<{ sync: DashboardCursorSync }>) => UPlotConfigBuilder;
export const preparePlotConfigBuilder: PrepConfig = ({ frame, theme, timeZone, getTimeRange, eventBus, sync }) => {
export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursorSync }> = ({
frame,
theme,
timeZone,
getTimeRange,
eventBus,
sync,
}) => {
const builder = new UPlotConfigBuilder(timeZone);
// X is the first field in the aligned frame

View File

@ -196,8 +196,6 @@ export { FormattedValueDisplay } from './FormattedValueDisplay/FormattedValueDis
export { ButtonSelect } from './Dropdown/ButtonSelect';
export { PluginSignatureBadge, PluginSignatureBadgeProps } from './PluginSignatureBadge/PluginSignatureBadge';
// Legacy forms
// Export this until we've figured out a good approach to inline form styles.
export { InlineFormLabel } from './FormLabel/FormLabel';
@ -228,8 +226,9 @@ export { LegacyForms, LegacyInputStatus };
// WIP, need renames and exports cleanup
export * from './uPlot/config';
export { ScaleDistribution } from './uPlot/models.gen';
export { UPlotConfigBuilder } from './uPlot/config/UPlotConfigBuilder';
export { UPlotConfigBuilder, UPlotConfigPrepFn } from './uPlot/config/UPlotConfigBuilder';
export { UPlotChart } from './uPlot/Plot';
export { PlotLegend } from './uPlot/PlotLegend';
export * from './uPlot/geometries';
export * from './uPlot/plugins';
export { usePlotContext } from './uPlot/context';
@ -237,8 +236,6 @@ export { GraphNG, GraphNGProps, FIXED_UNIT } from './GraphNG/GraphNG';
export { TimeSeries } from './TimeSeries/TimeSeries';
export { useGraphNGContext } from './GraphNG/hooks';
export { preparePlotFrame } from './GraphNG/utils';
export { BarChart } from './BarChart/BarChart';
export { BarChartOptions, BarValueVisibility, BarChartFieldConfig } from './BarChart/types';
export { GraphNGLegendEvent } from './GraphNG/types';
export * from './PanelChrome/types';
export * from './NodeGraph';

View File

@ -50,6 +50,15 @@ export enum BarAlignment {
After = 1,
}
/**
* @alpha
*/
export enum BarValueVisibility {
Auto = 'auto',
Never = 'never',
Always = 'always',
}
/**
* @alpha
*/

View File

@ -1,11 +1,19 @@
import uPlot, { Cursor, Band, Hooks, Select } from 'uplot';
import { defaultsDeep } from 'lodash';
import { PlotConfig, TooltipInterpolator } from '../types';
import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
import { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';
import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
import { AxisPlacement } from '../config';
import uPlot, { Cursor, Band, Hooks, Select } from 'uplot';
import { defaultsDeep } from 'lodash';
import { DefaultTimeZone, getTimeZoneInfo, TimeZone } from '@grafana/data';
import {
DataFrame,
DefaultTimeZone,
EventBus,
getTimeZoneInfo,
GrafanaTheme2,
TimeRange,
TimeZone,
} from '@grafana/data';
import { pluginLog } from '../utils';
import { getThresholdsDrawHook, UPlotThresholdOptions } from './UPlotThresholds';
@ -205,3 +213,15 @@ export class UPlotConfigBuilder {
return this.tz ? uPlot.tzDate(date, this.tz) : date;
};
}
/** @alpha */
type UPlotConfigPrepOpts<T extends Record<string, any> = {}> = {
frame: DataFrame;
theme: GrafanaTheme2;
timeZone: TimeZone;
getTimeRange: () => TimeRange;
eventBus: EventBus;
} & T;
/** @alpha */
export type UPlotConfigPrepFn<T extends {} = {}> = (opts: UPlotConfigPrepOpts<T>) => UPlotConfigBuilder;

View File

@ -1,12 +1,8 @@
import React from 'react';
import { DataFrame, TimeRange } from '@grafana/data';
import { GraphNG, GraphNGProps, LegendDisplayMode, PlotLegend, UPlotConfigBuilder, withTheme2 } from '@grafana/ui';
import { BarChartOptions } from './types';
import { withTheme2 } from '../../themes/ThemeContext';
import { preparePlotConfigBuilder, preparePlotFrame } from './utils';
import { LegendDisplayMode } from '../VizLegend/models.gen';
import { PlotLegend } from '../uPlot/PlotLegend';
import { GraphNG, GraphNGProps } from '../GraphNG/GraphNG';
import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
/**
* @alpha

View File

@ -1,7 +1,9 @@
import React, { useCallback, useMemo } from 'react';
import { FieldType, PanelProps, TimeRange, VizOrientation } from '@grafana/data';
import { BarChart, BarChartOptions, GraphNGLegendEvent, TooltipPlugin } from '@grafana/ui';
import { GraphNGLegendEvent, TooltipPlugin } from '@grafana/ui';
import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory';
import { BarChartOptions } from './types';
import { BarChart } from './BarChart';
interface Props extends PanelProps<BarChartOptions> {}

View File

@ -1,8 +1,8 @@
import uPlot, { Axis, Series } from 'uplot';
import { Quadtree, Rect, pointWithin } from './quadtree';
import { distribute, SPACE_BETWEEN } from './distribute';
import { TooltipInterpolator } from '../uPlot/types';
import { ScaleDirection, ScaleOrientation } from '../uPlot/config';
import { TooltipInterpolator } from '@grafana/ui/src/components/uPlot/types';
import { ScaleDirection, ScaleOrientation } from '@grafana/ui/src/components/uPlot/config';
const groupDistr = SPACE_BETWEEN;
const barDistr = SPACE_BETWEEN;

View File

@ -7,16 +7,9 @@ import {
VizOrientation,
} from '@grafana/data';
import { BarChartPanel } from './BarChartPanel';
import {
BarChartFieldConfig,
BarChartOptions,
StackingMode,
BarValueVisibility,
graphFieldOptions,
commonOptionsBuilder,
} from '@grafana/ui';
import { StackingMode, BarValueVisibility, graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
import { defaultBarChartFieldConfig } from '@grafana/ui/src/components/BarChart/types';
import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from 'app/plugins/panel/barchart/types';
export const plugin = new PanelPlugin<BarChartOptions, BarChartFieldConfig>(BarChartPanel)
.useFieldConfig({

View File

@ -1,15 +1,13 @@
import { VizOrientation } from '@grafana/data';
import { AxisConfig, GraphGradientMode, HideableFieldConfig, StackingMode } from '../uPlot/config';
import { OptionsWithLegend, OptionsWithTooltip } from '../../options';
/**
* @alpha
*/
export enum BarValueVisibility {
Auto = 'auto',
Never = 'never',
Always = 'always',
}
import {
AxisConfig,
BarValueVisibility,
GraphGradientMode,
HideableFieldConfig,
OptionsWithLegend,
OptionsWithTooltip,
StackingMode,
} from '@grafana/ui';
/**
* @alpha

View File

@ -9,10 +9,14 @@ import {
MutableDataFrame,
VizOrientation,
} from '@grafana/data';
import { BarChartFieldConfig, BarChartOptions, BarValueVisibility } from './types';
import { GraphGradientMode, StackingMode } from '../uPlot/config';
import { LegendDisplayMode } from '../VizLegend/models.gen';
import { TooltipDisplayMode } from '../VizTooltip';
import { BarChartFieldConfig, BarChartOptions } from './types';
import {
BarValueVisibility,
GraphGradientMode,
LegendDisplayMode,
StackingMode,
TooltipDisplayMode,
} from '@grafana/ui';
function mockDataFrame() {
const df1 = new MutableDataFrame({

View File

@ -1,4 +1,3 @@
import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
import {
DataFrame,
FieldType,
@ -9,14 +8,18 @@ import {
MutableDataFrame,
VizOrientation,
} from '@grafana/data';
import { BarChartFieldConfig, BarChartOptions, BarValueVisibility, defaultBarChartFieldConfig } from './types';
import { AxisPlacement, ScaleDirection, ScaleOrientation } from '../uPlot/config';
import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from './types';
import { BarsOptions, getConfig } from './bars';
import { FIXED_UNIT } from '../GraphNG/GraphNG';
import { ScaleDistribution } from '../uPlot/models.gen';
import { PrepConfigOpts } from '../GraphNG/utils';
type PrepConfig = (opts: PrepConfigOpts<BarChartOptions>) => UPlotConfigBuilder;
import {
AxisPlacement,
BarValueVisibility,
FIXED_UNIT,
ScaleDirection,
ScaleDistribution,
ScaleOrientation,
UPlotConfigBuilder,
} from '@grafana/ui';
import { UPlotConfigPrepFn } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
/** @alpha */
function getBarCharScaleOrientation(orientation: VizOrientation) {
@ -37,7 +40,7 @@ function getBarCharScaleOrientation(orientation: VizOrientation) {
};
}
export const preparePlotConfigBuilder: PrepConfig = ({
export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
frame,
theme,
orientation,

View File

@ -1,8 +1,15 @@
import React from 'react';
import { PanelContext, PanelContextRoot, UPlotConfigBuilder, GraphNG, GraphNGProps } from '@grafana/ui';
import {
PanelContext,
PanelContextRoot,
UPlotConfigBuilder,
GraphNG,
GraphNGProps,
BarValueVisibility,
} from '@grafana/ui';
import { DataFrame, FieldType, TimeRange } from '@grafana/data';
import { preparePlotConfigBuilder } from './utils';
import { BarValueVisibility, TimelineMode } from './types';
import { TimelineMode } from './types';
/**
* @alpha

View File

@ -1,9 +1,7 @@
import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { TimelinePanel } from './TimelinePanel';
import { BarValueVisibility } from '@grafana/ui';
//import { addHideFrom, addLegendOptions } from '../timeseries/config';
//import { defaultBarChartFieldConfig } from '@grafana/ui/src/components/BarChart/types';
import { TimelineOptions, TimelineFieldConfig, TimelineMode } from './types';
import { BarValueVisibility } from '@grafana/ui';
export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(TimelinePanel)
.useFieldConfig({

View File

@ -1,10 +1,10 @@
import uPlot, { Series, Cursor } from 'uplot';
import { FIXED_UNIT } from '@grafana/ui/src/components/GraphNG/GraphNG';
import { Quadtree, Rect, pointWithin } from '@grafana/ui/src/components/BarChart/quadtree';
import { distribute, SPACE_BETWEEN } from '@grafana/ui/src/components/BarChart/distribute';
import { Quadtree, Rect, pointWithin } from 'app/plugins/panel/barchart/quadtree';
import { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute';
import { TimelineMode } from './types';
import { TimeRange } from '@grafana/data';
import { BarValueVisibility } from '@grafana/ui/src/components/BarChart/types';
import { BarValueVisibility } from '@grafana/ui';
const { round, min, ceil } = Math;

View File

@ -1,13 +1,4 @@
import { VizLegendOptions, GraphGradientMode, HideableFieldConfig } from '@grafana/ui';
/**
* @alpha
*/
export enum BarValueVisibility {
Auto = 'auto',
Never = 'never',
Always = 'always',
}
import { VizLegendOptions, GraphGradientMode, HideableFieldConfig, BarValueVisibility } from '@grafana/ui';
/**
* @alpha

View File

@ -9,7 +9,13 @@ import {
classicColors,
Field,
} from '@grafana/data';
import { UPlotConfigBuilder, FIXED_UNIT, SeriesVisibilityChangeMode } from '@grafana/ui';
import {
UPlotConfigBuilder,
FIXED_UNIT,
SeriesVisibilityChangeMode,
BarValueVisibility,
UPlotConfigPrepFn,
} from '@grafana/ui';
import { TimelineCoreOptions, getConfig } from './timeline';
import {
AxisPlacement,
@ -18,9 +24,8 @@ import {
ScaleOrientation,
} from '@grafana/ui/src/components/uPlot/config';
import { measureText } from '@grafana/ui/src/utils/measureText';
import { PrepConfigOpts } from '@grafana/ui/src/components/GraphNG/utils';
import { BarValueVisibility, TimelineFieldConfig, TimelineMode } from './types';
import { TimelineFieldConfig, TimelineMode } from './types';
const defaultConfig: TimelineFieldConfig = {
lineWidth: 0,
@ -44,16 +49,12 @@ export function preparePlotFrame(data: DataFrame[], dimFields: XYFieldMatchers)
});
}
type PrepConfig = (
opts: PrepConfigOpts<{
mode: TimelineMode;
rowHeight: number;
colWidth?: number;
showValue: BarValueVisibility;
}>
) => UPlotConfigBuilder;
export const preparePlotConfigBuilder: PrepConfig = ({
export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
mode: TimelineMode;
rowHeight: number;
colWidth?: number;
showValue: BarValueVisibility;
}> = ({
frame,
theme,
timeZone,