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

GraphNG: Use AxisSide enum (#28320)

Browse Source
This commit is contained in:
Dominik Prokop
2020-10-16 16:21:42 +02:00
committed by GitHub
parent 9305117902
commit 2a08f4bdc2
5 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
View File

@@ -12,7 +12,7 @@ import { timeFormatToTemplate } from '../uPlot/utils';
import { alignAndSortDataFramesByFieldName } from './utils'; import { alignAndSortDataFramesByFieldName } from './utils';
import { Area, Axis, Line, Point, Scale, SeriesGeometry } from '../uPlot/geometries'; import { Area, Axis, Line, Point, Scale, SeriesGeometry } from '../uPlot/geometries';
import { UPlotChart } from '../uPlot/Plot'; import { UPlotChart } from '../uPlot/Plot';
import { GraphCustomFieldConfig, PlotProps } from '../uPlot/types'; import { AxisSide, GraphCustomFieldConfig, PlotProps } from '../uPlot/types';
import { useTheme } from '../../themes'; import { useTheme } from '../../themes';
const timeStampsConfig = [ const timeStampsConfig = [
@@ -103,7 +103,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({ data, children, ...plotProps }
scales.push(<Scale key="scale-x" scaleKey="x" time />); scales.push(<Scale key="scale-x" scaleKey="x" time />);
} }
axes.push(<Axis key="axis-scale--x" scaleKey="x" values={timeStampsConfig} side={2} />); axes.push(<Axis key="axis-scale--x" scaleKey="x" values={timeStampsConfig} side={AxisSide.Bottom} />);
let seriesIdx = 0; let seriesIdx = 0;
const uniqueScales: Record<string, boolean> = {}; const uniqueScales: Record<string, boolean> = {};
@@ -130,7 +130,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({ data, children, ...plotProps }
scaleKey={scale} scaleKey={scale}
label={config.custom?.axis?.label} label={config.custom?.axis?.label}
size={config.custom?.axis?.width} size={config.custom?.axis?.width}
side={config.custom?.axis?.side || 3} side={config.custom?.axis?.side || AxisSide.Left}
grid={config.custom?.axis?.grid} grid={config.custom?.axis?.grid}
formatValue={v => formattedValueToString(fmt(v))} formatValue={v => formattedValueToString(fmt(v))}
/> />

2
packages/grafana-ui/src/components/index.ts
View File

@@ -201,7 +201,7 @@ const LegacyForms = {
export { LegacyForms, LegacyInputStatus }; export { LegacyForms, LegacyInputStatus };
// WIP, need renames and exports cleanup // WIP, need renames and exports cleanup
export { GraphCustomFieldConfig } from './uPlot/types'; export { GraphCustomFieldConfig, AxisSide } from './uPlot/types';
export { UPlotChart } from './uPlot/Plot'; export { UPlotChart } from './uPlot/Plot';
export * from './uPlot/geometries'; export * from './uPlot/geometries';
export { usePlotConfigContext } from './uPlot/context'; export { usePlotConfigContext } from './uPlot/context';

4
packages/grafana-ui/src/components/uPlot/geometries/types.ts
View File

@@ -1,3 +1,5 @@
import { AxisSide } from '../types';
export interface LineProps { export interface LineProps {
scaleKey: string; scaleKey: string;
stroke: string; stroke: string;
@@ -22,7 +24,7 @@ export interface AxisProps {
show?: boolean; show?: boolean;
size?: number; size?: number;
stroke?: string; stroke?: string;
side?: number; side?: AxisSide;
grid?: boolean; grid?: boolean;
formatValue?: (v: any) => string; formatValue?: (v: any) => string;
values?: any; values?: any;

12
packages/grafana-ui/src/components/uPlot/types.ts
View File

@@ -4,16 +4,16 @@ import { DataFrame, FieldColor, TimeRange, TimeZone } from '@grafana/data';
export type NullValuesMode = 'null' | 'connected' | 'asZero'; export type NullValuesMode = 'null' | 'connected' | 'asZero';
export enum MicroPlotAxisSide { export enum AxisSide {
top = 0, Top,
right = 1, Right,
bottom = 2, Bottom,
left = 3, Left,
} }
interface AxisConfig { interface AxisConfig {
label: string; label: string;
side: number; side: AxisSide;
grid: boolean; grid: boolean;
width: number; width: number;
} }

14
public/app/plugins/panel/graph3/module.tsx
View File

@@ -1,5 +1,5 @@
import { FieldConfigProperty, PanelPlugin } from '@grafana/data'; import { FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { GraphCustomFieldConfig } from '@grafana/ui'; import { AxisSide, GraphCustomFieldConfig } from '@grafana/ui';
import { GraphPanel } from './GraphPanel'; import { GraphPanel } from './GraphPanel';
import { Options } from './types'; import { Options } from './types';
@@ -113,11 +113,11 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
path: 'axis.side', path: 'axis.side',
name: 'Y axis side', name: 'Y axis side',
category: ['Axis'], category: ['Axis'],
defaultValue: 3, defaultValue: AxisSide.Left,
settings: { settings: {
options: [ options: [
{ value: 3, label: 'Left' }, { value: AxisSide.Left, label: 'Left' },
{ value: 1, label: 'Right' }, { value: AxisSide.Right, label: 'Right' },
], ],
}, },
}) })
@@ -167,12 +167,6 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
], ],
}, },
}) })
// .addBooleanSwitch({
// path: 'graph.realTimeUpdates',
// name: 'Real time updates',
// description: 'continue to update the graph so the time axis matches the clock.',
// defaultValue: false,
// })
.addBooleanSwitch({ .addBooleanSwitch({
category: ['Legend'], category: ['Legend'],
path: 'legend.isVisible', path: 'legend.isVisible',