mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Add PiechartOptionsBox
This commit is contained in:
parent
f4f8e0d79a
commit
0ab3a80016
47
public/app/plugins/panel/piechart/PiechartOptionsBox.tsx
Normal file
47
public/app/plugins/panel/piechart/PiechartOptionsBox.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Components
|
||||
import { Select, FormLabel, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
// Types
|
||||
import { FormField, PanelEditorProps } from '@grafana/ui';
|
||||
import { PiechartType } from '@grafana/ui';
|
||||
import { PiechartOptions } from './types';
|
||||
|
||||
import * as _ from 'lodash';
|
||||
|
||||
|
||||
const labelWidth = 8;
|
||||
|
||||
const piechartOptions = [
|
||||
{ value: PiechartType.PIE, label: 'Pie' },
|
||||
{ value: PiechartType.DONUT, label: 'Donut' },
|
||||
];
|
||||
|
||||
export class PiechartOptionsBox extends PureComponent<PanelEditorProps<PiechartOptions>> {
|
||||
onPieTypeChange = ({ target }) => this.props.onChange({ ...this.props.options, pieType: target.value });
|
||||
onStrokeWidthChange = ({ target }) => this.props.onChange({ ...this.props.options, strokeWidth: target.value });
|
||||
|
||||
render() {
|
||||
const { options } = this.props;
|
||||
const { pieType, strokeWidth } = options;
|
||||
|
||||
return (
|
||||
<PanelOptionsGroup title="Piechart">
|
||||
<div className="gf-form">
|
||||
<FormLabel width={labelWidth}>Type</FormLabel>
|
||||
<Select
|
||||
width={12}
|
||||
options={piechartOptions}
|
||||
onChange={this.onPieTypeChange}
|
||||
value={piechartOptions.find(option => option.value === pieType)}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<FormField label="Divider width" labelWidth={labelWidth} onChange={this.onStrokeWidthChange} value={strokeWidth} />
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
}
|
@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
|
||||
import { PanelEditorProps, PanelOptionsGrid } from '@grafana/ui';
|
||||
|
||||
import PiechartValueEditor from './PiechartValueEditor';
|
||||
import { PiechartOptionsBox } from './PiechartOptionsBox';
|
||||
import { PiechartOptions, PiechartValueOptions } from './types';
|
||||
|
||||
export default class PiechartPanelEditor extends PureComponent<PanelEditorProps<PiechartOptions>> {
|
||||
@ -12,12 +13,13 @@ export default class PiechartPanelEditor extends PureComponent<PanelEditorProps<
|
||||
});
|
||||
|
||||
render() {
|
||||
const { options } = this.props;
|
||||
const { onChange, options } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PanelOptionsGrid>
|
||||
<PiechartValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
|
||||
<PiechartOptionsBox onChange={onChange} options={options} />
|
||||
</PanelOptionsGrid>
|
||||
</>
|
||||
);
|
||||
|
@ -37,7 +37,11 @@ export default class PiechartValueEditor extends PureComponent<Props> {
|
||||
return (
|
||||
<PanelOptionsGroup title="Value">
|
||||
<div className="gf-form">
|
||||
<FormLabel width={labelWidth}>Stat</FormLabel>
|
||||
<FormLabel width={labelWidth}>Unit</FormLabel>
|
||||
<UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<FormLabel width={labelWidth}>Value</FormLabel>
|
||||
<Select
|
||||
width={12}
|
||||
options={statOptions}
|
||||
@ -45,10 +49,6 @@ export default class PiechartValueEditor extends PureComponent<Props> {
|
||||
value={statOptions.find(option => option.value === stat)}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<FormLabel width={labelWidth}>Unit</FormLabel>
|
||||
<UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
|
||||
</div>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user