Rename: Piechart -> PieChart

packages/grafana-ui/src/components/PieChart/PieChart.tsx

@@ -4,12 +4,12 @@ import { select, pie, arc, event } from 'd3';
 import { GrafanaThemeType } from '../../types';
 import { Themeable } from '../../index';
 
-export enum PiechartType {
+export enum PieChartType {
   PIE = 'pie',
   DONUT = 'donut',
 }
 
-export interface PiechartDataPoint {
+export interface PieChartDataPoint {
   value: number;
   name: string;
   color: string;
@@ -18,14 +18,14 @@ export interface PiechartDataPoint {
 export interface Props extends Themeable {
   height: number;
   width: number;
-  datapoints: PiechartDataPoint[];
+  datapoints: PieChartDataPoint[];
 
   unit: string;
-  pieType: PiechartType;
+  pieType: PieChartType;
   strokeWidth: number;
 }
 
-export class Piechart extends PureComponent<Props> {
+export class PieChart extends PureComponent<Props> {
   containerElement: any;
 
   static defaultProps = {
@@ -56,7 +56,7 @@ export class Piechart extends PureComponent<Props> {
     const radius = Math.min(width, height) / 2;
 
     const outerRadius = radius - radius / 10;
-    const innerRadius = pieType === PiechartType.PIE ? 0 : radius - radius / 3;
+    const innerRadius = pieType === PieChartType.PIE ? 0 : radius - radius / 3;
 
     select('.piechart-container svg').remove();
     const svg = select('.piechart-container')
@@ -127,4 +127,4 @@ export class Piechart extends PureComponent<Props> {
   }
 }
 
-export default Piechart;
+export default PieChart;

packages/grafana-ui/src/components/index.ts

@@ -26,5 +26,5 @@ export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
-export { Piechart, PiechartDataPoint, PiechartType } from './Piechart/Piechart';
+export { PieChart, PieChartDataPoint, PieChartType } from './PieChart/PieChart';
 export { UnitPicker } from './UnitPicker/UnitPicker';

public/app/plugins/panel/piechart/PieChartOptionsBox.tsx

@@ -6,14 +6,14 @@ import { Select, FormLabel, PanelOptionsGroup } from '@grafana/ui';
 
 // Types
 import { FormField, PanelEditorProps } from '@grafana/ui';
-import { PiechartType } from '@grafana/ui';
-import { PiechartOptions } from './types';
+import { PieChartType } from '@grafana/ui';
+import { PieChartOptions } from './types';
 
 const labelWidth = 8;
 
-const piechartOptions = [{ value: PiechartType.PIE, label: 'Pie' }, { value: PiechartType.DONUT, label: 'Donut' }];
+const pieChartOptions = [{ value: PieChartType.PIE, label: 'Pie' }, { value: PieChartType.DONUT, label: 'Donut' }];
 
-export class PiechartOptionsBox extends PureComponent<PanelEditorProps<PiechartOptions>> {
+export class PieChartOptionsBox extends PureComponent<PanelEditorProps<PieChartOptions>> {
   onPieTypeChange = pieType => this.props.onOptionsChange({ ...this.props.options, pieType: pieType.value });
   onStrokeWidthChange = ({ target }) =>
     this.props.onOptionsChange({ ...this.props.options, strokeWidth: target.value });
@@ -23,14 +23,14 @@ export class PiechartOptionsBox extends PureComponent<PanelEditorProps<PiechartO
     const { pieType, strokeWidth } = options;
 
     return (
-      <PanelOptionsGroup title="Piechart">
+      <PanelOptionsGroup title="PieChart">
         <div className="gf-form">
           <FormLabel width={labelWidth}>Type</FormLabel>
           <Select
             width={12}
-            options={piechartOptions}
+            options={pieChartOptions}
             onChange={this.onPieTypeChange}
-            value={piechartOptions.find(option => option.value === pieType)}
+            value={pieChartOptions.find(option => option.value === pieType)}
           />
         </div>
         <div className="gf-form">

public/app/plugins/panel/piechart/PieChartPanel.tsx

@@ -5,20 +5,20 @@ import React, { PureComponent } from 'react';
 import { processTimeSeries, ThemeContext } from '@grafana/ui';
 
 // Components
-import { Piechart, PiechartDataPoint } from '@grafana/ui';
+import { PieChart, PieChartDataPoint } from '@grafana/ui';
 
 // Types
-import { PiechartOptions } from './types';
+import { PieChartOptions } from './types';
 import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 
-interface Props extends PanelProps<PiechartOptions> {}
+interface Props extends PanelProps<PieChartOptions> {}
 
-export class PiechartPanel extends PureComponent<Props> {
+export class PieChartPanel extends PureComponent<Props> {
   render() {
     const { panelData, width, height, options } = this.props;
     const { valueOptions } = options;
 
-    const datapoints: PiechartDataPoint[] = [];
+    const datapoints: PieChartDataPoint[] = [];
     if (panelData.timeSeries) {
       const vmSeries = processTimeSeries({
         timeSeries: panelData.timeSeries,
@@ -41,7 +41,7 @@ export class PiechartPanel extends PureComponent<Props> {
     return (
       <ThemeContext.Consumer>
         {theme => (
-          <Piechart
+          <PieChart
             width={width}
             height={height}
             datapoints={datapoints}

public/app/plugins/panel/piechart/PieChartPanelEditor.tsx

@@ -0,0 +1,27 @@
+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>> {
+  onValueOptionsChanged = (valueOptions: PieChartValueOptions) =>
+    this.props.onOptionsChange({
+      ...this.props.options,
+      valueOptions,
+    });
+
+  render() {
+    const { onOptionsChange, options } = this.props;
+
+    return (
+      <>
+        <PanelOptionsGrid>
+          <PieChartValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
+          <PieChartOptionsBox onOptionsChange={onOptionsChange} options={options} />
+        </PanelOptionsGrid>
+      </>
+    );
+  }
+}

public/app/plugins/panel/piechart/PieChartValueEditor.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FormLabel, PanelOptionsGroup, Select, UnitPicker } from '@grafana/ui';
-import { PiechartValueOptions } from './types';
+import { PieChartValueOptions } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -13,11 +13,11 @@ const statOptions = [
 const labelWidth = 6;
 
 export interface Props {
-  options: PiechartValueOptions;
-  onChange: (valueOptions: PiechartValueOptions) => void;
+  options: PieChartValueOptions;
+  onChange: (valueOptions: PieChartValueOptions) => void;
 }
 
-export default class PiechartValueEditor extends PureComponent<Props> {
+export default class PieChartValueEditor extends PureComponent<Props> {
   onUnitChange = unit =>
     this.props.onChange({
       ...this.props.options,

public/app/plugins/panel/piechart/PiechartPanelEditor.tsx

@@ -1,27 +0,0 @@
-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>> {
-  onValueOptionsChanged = (valueOptions: PiechartValueOptions) =>
-    this.props.onOptionsChange({
-      ...this.props.options,
-      valueOptions,
-    });
-
-  render() {
-    const { onOptionsChange, options } = this.props;
-
-    return (
-      <>
-        <PanelOptionsGrid>
-          <PiechartValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
-          <PiechartOptionsBox onOptionsChange={onOptionsChange} options={options} />
-        </PanelOptionsGrid>
-      </>
-    );
-  }
-}

public/app/plugins/panel/piechart/module.tsx

@@ -1,10 +1,10 @@
 import { ReactPanelPlugin } from '@grafana/ui';
 
-import PiechartPanelEditor from './PiechartPanelEditor';
-import { PiechartPanel } from './PiechartPanel';
-import { PiechartOptions, defaults } from './types';
+import PieChartPanelEditor from './PieChartPanelEditor';
+import { PieChartPanel } from './PieChartPanel';
+import { PieChartOptions, defaults } from './types';
 
-export const reactPanel = new ReactPanelPlugin<PiechartOptions>(PiechartPanel);
+export const reactPanel = new ReactPanelPlugin<PieChartOptions>(PieChartPanel);
 
-reactPanel.setEditor(PiechartPanelEditor);
+reactPanel.setEditor(PieChartPanelEditor);
 reactPanel.setDefaults(defaults);

public/app/plugins/panel/piechart/types.ts

@@ -1,20 +1,20 @@
-import { PiechartType } from '@grafana/ui';
+import { PieChartType } from '@grafana/ui';
 
-export interface PiechartOptions {
-  pieType: PiechartType;
+export interface PieChartOptions {
+  pieType: PieChartType;
   strokeWidth: number;
 
-  valueOptions: PiechartValueOptions;
+  valueOptions: PieChartValueOptions;
   // TODO: Options for Legend / Combine components
 }
 
-export interface PiechartValueOptions {
+export interface PieChartValueOptions {
   unit: string;
   stat: string;
 }
 
-export const defaults: PiechartOptions = {
-  pieType: PiechartType.PIE,
+export const defaults: PieChartOptions = {
+  pieType: PieChartType.PIE,
   strokeWidth: 1,
   valueOptions: {
     unit: 'short',