mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
a015bb3a23
commit
17305ccda3
@ -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.
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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';
|
||||
|
@ -50,6 +50,15 @@ export enum BarAlignment {
|
||||
After = 1,
|
||||
}
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
export enum BarValueVisibility {
|
||||
Auto = 'auto',
|
||||
Never = 'never',
|
||||
Always = 'always',
|
||||
}
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
|
@ -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;
|
||||
|
@ -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
|
@ -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> {}
|
||||
|
||||
|
@ -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;
|
@ -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({
|
||||
|
@ -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
|
@ -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({
|
@ -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,
|
@ -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
|
||||
|
@ -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({
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user