mirror of https://github.com/grafana/grafana
GraphNG: remove graph2 panel (keep the parts needed for explore) (#30124)
Ryan McKinley
5 years ago
committed by
GitHub
parent
0d8d96bdaa
commit
2221a8c5ff
@ -1,71 +0,0 @@ |
||||
import React from 'react'; |
||||
import { GraphWithLegend, Chart } from '@grafana/ui'; |
||||
import { PanelProps } from '@grafana/data'; |
||||
import { Options } from './types'; |
||||
import { GraphPanelController } from './GraphPanelController'; |
||||
|
||||
interface GraphPanelProps extends PanelProps<Options> {} |
||||
|
||||
export const GraphPanel: React.FunctionComponent<GraphPanelProps> = ({ |
||||
data, |
||||
timeRange, |
||||
timeZone, |
||||
width, |
||||
height, |
||||
options, |
||||
fieldConfig, |
||||
onOptionsChange, |
||||
onChangeTimeRange, |
||||
}) => { |
||||
if (!data) { |
||||
return ( |
||||
<div className="panel-empty"> |
||||
<p>No data found in response</p> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const { |
||||
graph: { showLines, showBars, showPoints }, |
||||
legend: legendOptions, |
||||
tooltipOptions, |
||||
} = options; |
||||
|
||||
const graphProps = { |
||||
showBars, |
||||
showLines, |
||||
showPoints, |
||||
tooltipOptions, |
||||
}; |
||||
return ( |
||||
<GraphPanelController |
||||
data={data} |
||||
timeZone={timeZone} |
||||
options={options} |
||||
fieldConfig={fieldConfig} |
||||
onOptionsChange={onOptionsChange} |
||||
onChangeTimeRange={onChangeTimeRange} |
||||
> |
||||
{({ onSeriesToggle, onHorizontalRegionSelected, ...controllerApi }) => { |
||||
return ( |
||||
<GraphWithLegend |
||||
timeRange={timeRange} |
||||
timeZone={timeZone} |
||||
width={width} |
||||
height={height} |
||||
legendDisplayMode={legendOptions.displayMode} |
||||
placement={legendOptions.placement} |
||||
sortLegendBy={legendOptions.sortBy} |
||||
sortLegendDesc={legendOptions.sortDesc} |
||||
onSeriesToggle={onSeriesToggle} |
||||
onHorizontalRegionSelected={onHorizontalRegionSelected} |
||||
{...graphProps} |
||||
{...controllerApi} |
||||
> |
||||
<Chart.Tooltip mode={tooltipOptions.mode} /> |
||||
</GraphWithLegend> |
||||
); |
||||
}} |
||||
</GraphPanelController> |
||||
); |
||||
}; |
||||
@ -1,149 +0,0 @@ |
||||
import React from 'react'; |
||||
import { GraphSeriesToggler } from '@grafana/ui'; |
||||
import { PanelData, GraphSeriesXY, AbsoluteTimeRange, TimeZone, FieldConfigSource } from '@grafana/data'; |
||||
|
||||
import { getGraphSeriesModel } from './getGraphSeriesModel'; |
||||
import { Options, SeriesOptions } from './types'; |
||||
import { SeriesColorChangeHandler, SeriesAxisToggleHandler } from '@grafana/ui/src/components/Graph/GraphWithLegend'; |
||||
|
||||
interface GraphPanelControllerAPI { |
||||
series: GraphSeriesXY[]; |
||||
onSeriesAxisToggle: SeriesAxisToggleHandler; |
||||
onSeriesColorChange: SeriesColorChangeHandler; |
||||
onSeriesToggle: (label: string, event: React.MouseEvent<HTMLElement>) => void; |
||||
onToggleSort: (sortBy: string) => void; |
||||
onHorizontalRegionSelected: (from: number, to: number) => void; |
||||
} |
||||
|
||||
interface GraphPanelControllerProps { |
||||
children: (api: GraphPanelControllerAPI) => JSX.Element; |
||||
options: Options; |
||||
fieldConfig: FieldConfigSource; |
||||
data: PanelData; |
||||
timeZone: TimeZone; |
||||
onOptionsChange: (options: Options) => void; |
||||
onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void; |
||||
} |
||||
|
||||
interface GraphPanelControllerState { |
||||
graphSeriesModel: GraphSeriesXY[]; |
||||
} |
||||
|
||||
export class GraphPanelController extends React.Component<GraphPanelControllerProps, GraphPanelControllerState> { |
||||
constructor(props: GraphPanelControllerProps) { |
||||
super(props); |
||||
|
||||
this.onSeriesColorChange = this.onSeriesColorChange.bind(this); |
||||
this.onSeriesAxisToggle = this.onSeriesAxisToggle.bind(this); |
||||
this.onToggleSort = this.onToggleSort.bind(this); |
||||
this.onHorizontalRegionSelected = this.onHorizontalRegionSelected.bind(this); |
||||
|
||||
this.state = { |
||||
graphSeriesModel: getGraphSeriesModel( |
||||
props.data.series, |
||||
props.timeZone, |
||||
props.options.series || {}, |
||||
props.options.graph, |
||||
props.options.legend, |
||||
props.fieldConfig |
||||
), |
||||
}; |
||||
} |
||||
|
||||
static getDerivedStateFromProps(props: GraphPanelControllerProps, state: GraphPanelControllerState) { |
||||
return { |
||||
...state, |
||||
graphSeriesModel: getGraphSeriesModel( |
||||
props.data.series, |
||||
props.timeZone, |
||||
props.options.series || {}, |
||||
props.options.graph, |
||||
props.options.legend, |
||||
props.fieldConfig |
||||
), |
||||
}; |
||||
} |
||||
|
||||
onSeriesOptionsUpdate(label: string, optionsUpdate: SeriesOptions) { |
||||
const { onOptionsChange, options } = this.props; |
||||
const updatedSeriesOptions: { [label: string]: SeriesOptions } = { ...options.series }; |
||||
updatedSeriesOptions[label] = optionsUpdate; |
||||
onOptionsChange({ |
||||
...options, |
||||
series: updatedSeriesOptions, |
||||
}); |
||||
} |
||||
|
||||
onSeriesAxisToggle(label: string, yAxis: number) { |
||||
const { |
||||
options: { series }, |
||||
} = this.props; |
||||
const seriesOptionsUpdate: SeriesOptions = series[label] |
||||
? { |
||||
...series[label], |
||||
yAxis: { |
||||
...series[label].yAxis, |
||||
index: yAxis, |
||||
}, |
||||
} |
||||
: { |
||||
yAxis: { |
||||
index: yAxis, |
||||
}, |
||||
}; |
||||
this.onSeriesOptionsUpdate(label, seriesOptionsUpdate); |
||||
} |
||||
|
||||
onSeriesColorChange(label: string, color: string) { |
||||
const { |
||||
options: { series }, |
||||
} = this.props; |
||||
const seriesOptionsUpdate: SeriesOptions = series[label] |
||||
? { |
||||
...series[label], |
||||
color, |
||||
} |
||||
: { |
||||
color, |
||||
}; |
||||
|
||||
this.onSeriesOptionsUpdate(label, seriesOptionsUpdate); |
||||
} |
||||
|
||||
onToggleSort(sortBy: string) { |
||||
const { onOptionsChange, options } = this.props; |
||||
onOptionsChange({ |
||||
...options, |
||||
legend: { |
||||
...options.legend, |
||||
sortBy, |
||||
sortDesc: sortBy === options.legend.sortBy ? !options.legend.sortDesc : false, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
onHorizontalRegionSelected(from: number, to: number) { |
||||
const { onChangeTimeRange } = this.props; |
||||
onChangeTimeRange({ from, to }); |
||||
} |
||||
|
||||
render() { |
||||
const { children } = this.props; |
||||
const { graphSeriesModel } = this.state; |
||||
|
||||
return ( |
||||
<GraphSeriesToggler series={graphSeriesModel}> |
||||
{({ onSeriesToggle, toggledSeries }) => { |
||||
return children({ |
||||
series: toggledSeries, |
||||
onSeriesColorChange: this.onSeriesColorChange, |
||||
onSeriesAxisToggle: this.onSeriesAxisToggle, |
||||
onToggleSort: this.onToggleSort, |
||||
onSeriesToggle: onSeriesToggle, |
||||
onHorizontalRegionSelected: this.onHorizontalRegionSelected, |
||||
}); |
||||
}} |
||||
</GraphSeriesToggler> |
||||
); |
||||
} |
||||
} |
||||
@ -1,5 +0,0 @@ |
||||
# Text Panel - Native Plugin |
||||
|
||||
The Text Panel is **included** with Grafana. |
||||
|
||||
The Text Panel is a very simple panel that displays text. The source text is written in the Markdown syntax meaning you can format the text. Read [GitHub's Mastering Markdown](https://guides.github.com/features/mastering-markdown/) to learn more. |
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,61 +0,0 @@ |
||||
import { PanelPlugin } from '@grafana/data'; |
||||
import { GraphPanel } from './GraphPanel'; |
||||
import { Options } from './types'; |
||||
|
||||
export const plugin = new PanelPlugin<Options>(GraphPanel).useFieldConfig().setPanelOptions(builder => { |
||||
builder |
||||
.addBooleanSwitch({ |
||||
path: 'graph.showBars', |
||||
name: 'Show bars', |
||||
description: '', |
||||
defaultValue: false, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'graph.showLines', |
||||
name: 'Show lines', |
||||
description: '', |
||||
defaultValue: true, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'graph.showPoints', |
||||
name: 'Show poins', |
||||
description: '', |
||||
defaultValue: false, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'legend.isVisible', |
||||
name: 'Show legend', |
||||
description: '', |
||||
defaultValue: true, |
||||
}) |
||||
.addBooleanSwitch({ |
||||
path: 'legend.asTable', |
||||
name: 'Display legend as table', |
||||
description: '', |
||||
defaultValue: false, |
||||
}) |
||||
.addRadio({ |
||||
path: 'legend.placement', |
||||
name: 'Legend placement', |
||||
description: '', |
||||
defaultValue: 'under', |
||||
settings: { |
||||
options: [ |
||||
{ value: 'under', label: 'Below graph' }, |
||||
{ value: 'right', label: 'Right to the graph' }, |
||||
], |
||||
}, |
||||
}) |
||||
.addRadio({ |
||||
path: 'tooltipOptions.mode', |
||||
name: 'Tooltip mode', |
||||
description: '', |
||||
defaultValue: 'single', |
||||
settings: { |
||||
options: [ |
||||
{ value: 'single', label: 'Single series' }, |
||||
{ value: 'multi', label: 'All series' }, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
@ -1,17 +0,0 @@ |
||||
{ |
||||
"type": "panel", |
||||
"name": "React graph", |
||||
"id": "graph2", |
||||
"state": "alpha", |
||||
|
||||
"info": { |
||||
"author": { |
||||
"name": "Grafana Labs", |
||||
"url": "https://grafana.com" |
||||
}, |
||||
"logos": { |
||||
"small": "img/icn-graph-panel.svg", |
||||
"large": "img/icn-graph-panel.svg" |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue