Add PiechartOptionsBox

This commit is contained in:
corpglory-dev 2019-03-01 21:42:15 +03:00
parent f4f8e0d79a
commit 0ab3a80016
3 changed files with 55 additions and 6 deletions

View 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>
);
}
}

View File

@ -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>
</>
);

View File

@ -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>
);
}