Panel: removes deprecated componets

examples/panel-basic/README.md

@@ -2,9 +2,9 @@
 
 This example provides a template for how to build a basic panel plugin. The definition for the panel is provided in `/src/components/SimplePanel/SimplePanel.tsx`.
 
-The plugin uses `TimeSeries` from the `grafana-ui` package to build a graph with the properties passed to the panel. The plugin also allows a tooltip to be shown when the user hovers over a visualization.
+The plugin uses `Table` from the `grafana-ui` package to show a table with the properties passed to the panel.
 
-Additionally, the plugin is set up to allow custom options such as a gradient mode selector and a list display mode to be configured from the Grafana sidebar.
+Additionally, the plugin is set up to allow custom options such as a show series counter and show table header.
 
 ## What is a Grafana panel plugin?
 

examples/panel-basic/src/components/SimplePanel/SimplePanel.tsx

@@ -1,25 +1,24 @@
 import React from 'react';
 import { PanelProps } from '@grafana/data';
-import { TimeSeries, TooltipPlugin, TooltipDisplayMode, ZoomPlugin } from '@grafana/ui';
+import { PanelDataErrorView } from '@grafana/runtime';
+import { Table } from '@grafana/ui';
+
 import { SimpleOptions } from '../../types';
 import { testIds } from '../testIds';
-import { PanelDataErrorView } from '@grafana/runtime';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
 export function SimplePanel({
   // Takes in a list of props used in this example
   options, // Options declared within module.ts and standard Grafana options
   data,
+  fieldConfig,
+  id,
   width,
   height,
-  timeZone,
   timeRange,
-  onChangeTimeRange,
-  fieldConfig,
-  id,
 }: Props) {
-  if (data.series.length === 0) {
+  if (!data.series.length) {
     return <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />;
   }
 
@@ -29,29 +28,15 @@ export function SimplePanel({
         {options.showSeriesCount && (
           <div data-testid="simple-panel-series-counter">Number of series: {data.series.length}</div>
         )}
+
+        <Table
+          data={data.series[0]}
+          width={width}
+          height={height}
+          timeRange={timeRange}
+          noHeader={!options.showTableHeader}
+        ></Table>
       </div>
-      <TimeSeries
-        width={width}
-        height={height}
-        timeRange={timeRange}
-        timeZone={timeZone}
-        frames={data.series}
-        legend={options.legend}
-      >
-        {(config, alignedDataFrame) => {
-          return (
-            <>
-              <TooltipPlugin
-                config={config}
-                data={alignedDataFrame}
-                mode={TooltipDisplayMode.Multi}
-                timeZone={timeZone}
-              />
-              <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
-            </>
-          );
-        }}
-      </TimeSeries>
     </div>
   );
 }

examples/panel-basic/src/module.ts

@@ -1,8 +1,6 @@
 import { PanelPlugin, FieldColorModeId } from '@grafana/data';
-import { LegendDisplayMode, GraphGradientMode } from '@grafana/schema';
 import { SimpleOptions } from './types';
 import { SimplePanel } from './components';
-import { ariaLabels } from './components/ariaLabels';
 
 export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel)
   .useFieldConfig({
@@ -13,52 +11,6 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel)
         },
       },
     },
-    useCustomConfig: (builder) => {
-      builder
-        .addRadio({
-          path: 'gradientMode',
-          name: 'Gradient mode',
-          defaultValue: GraphGradientMode.Scheme,
-          settings: {
-            options: [
-              {
-                label: 'None',
-                value: GraphGradientMode.None,
-                ariaLabel: ariaLabels.gradientNone,
-              },
-              {
-                label: 'Opacity',
-                value: GraphGradientMode.Opacity,
-                description: 'Enable fill opacity gradient',
-                ariaLabel: ariaLabels.gradientOpacity,
-              },
-              {
-                label: 'Hue',
-                value: GraphGradientMode.Hue,
-                description: 'Small color hue gradient',
-                ariaLabel: ariaLabels.gradientHue,
-              },
-              {
-                label: 'Scheme',
-                value: GraphGradientMode.Scheme,
-                description: 'Use color scheme to define gradient',
-                ariaLabel: ariaLabels.gradientScheme,
-              },
-            ],
-          },
-        })
-        .addSliderInput({
-          path: 'fillOpacity',
-          name: 'Fill opacity',
-          defaultValue: 25,
-          settings: {
-            min: 0,
-            max: 100,
-            step: 1,
-            ariaLabelForHandle: ariaLabels.fillOpacity,
-          },
-        });
-    },
   })
   .setPanelOptions((builder) => {
     return builder
@@ -67,52 +19,9 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel)
         name: 'Show series counter',
         defaultValue: false,
       })
-      .addRadio({
-        path: 'legend.displayMode',
-        name: 'Legend mode',
-        category: ['Legend'],
-        description: '',
-        defaultValue: LegendDisplayMode.List,
-        settings: {
-          options: [
-            {
-              value: LegendDisplayMode.List,
-              label: 'List',
-              ariaLabel: ariaLabels.legendDisplayList,
-            },
-            {
-              value: LegendDisplayMode.Table,
-              label: 'Table',
-              ariaLabel: ariaLabels.legendDisplayTable,
-            },
-            {
-              value: undefined,
-              label: 'Hidden',
-              ariaLabel: ariaLabels.legendDisplayHidden,
-            },
-          ],
-        },
-      })
-      .addRadio({
-        path: 'legend.placement',
-        name: 'Legend placement',
-        category: ['Legend'],
-        description: '',
-        defaultValue: 'bottom',
-        settings: {
-          options: [
-            {
-              value: 'bottom',
-              label: 'Bottom',
-              ariaLabel: ariaLabels.legendPlacementBottom,
-            },
-            {
-              value: 'right',
-              label: 'Right',
-              ariaLabel: ariaLabels.legendPlacementRight,
-            },
-          ],
-        },
-        showIf: (config) => !!config.legend.displayMode,
+      .addBooleanSwitch({
+        path: 'showTableHeader',
+        name: 'Show table header',
+        defaultValue: true,
       });
   });

examples/panel-basic/src/types.ts

@@ -1,9 +1,7 @@
-import { VizLegendOptions } from '@grafana/schema';
-
 type SeriesSize = 'sm' | 'md' | 'lg';
 
 export interface SimpleOptions {
   showSeriesCount: boolean;
   seriesCountSize: SeriesSize;
-  legend: VizLegendOptions;
+  showTableHeader: boolean;
 }