Explore: Moves GraphSeriesXY and DisplayValue to grafana/data (#18400)

* Chore: Move DisplayValue to grafana/data

* Chore: Move GraphSeriesXY to grafana/data

packages/grafana-data/src/types/index.ts

@@ -7,3 +7,5 @@ export * from './time';
 export * from './threshold';
 export * from './utils';
 export * from './valueMapping';
+export * from './displayValue';
+export * from './graph';

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { DisplayValue } from '@grafana/data';
 import {
   BarGauge,
   Props,
@@ -9,7 +10,7 @@ import {
   getTitleStyles,
   getValuePercent,
 } from './BarGauge';
-import { VizOrientation, DisplayValue } from '../../types';
+import { VizOrientation } from '../../types';
 import { getTheme } from '../../themes';
 
 // jest.mock('jquery', () => ({

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

@@ -1,13 +1,13 @@
 // Library
 import React, { PureComponent, CSSProperties, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
+import { Threshold, TimeSeriesValue, getActiveThreshold, DisplayValue } from '@grafana/data';
 
 // Utils
 import { getColorFromHexRgbOrName } from '../../utils';
 
 // Types
-import { DisplayValue, Themeable, VizOrientation } from '../../types';
-import { Threshold, TimeSeriesValue, getActiveThreshold } from '@grafana/data';
+import { Themeable, VizOrientation } from '../../types';
 
 const MIN_VALUE_HEIGHT = 18;
 const MAX_VALUE_HEIGHT = 50;

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

@@ -2,12 +2,13 @@
 import React, { PureComponent, ReactNode, CSSProperties } from 'react';
 import $ from 'jquery';
 import { css } from 'emotion';
+import { DisplayValue } from '@grafana/data';
 
 // Utils
 import { getColorFromHexRgbOrName } from '../../utils';
 
 // Types
-import { Themeable, DisplayValue } from '../../types';
+import { Themeable } from '../../types';
 
 export interface BigValueSparkline {
   data: any[][]; // [[number,number]]

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

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
+import { Threshold, DisplayValue } from '@grafana/data';
+
 import { getColorFromHexRgbOrName } from '../../utils';
-import { DisplayValue, Themeable } from '../../types';
+import { Themeable } from '../../types';
 import { selectThemeVariant } from '../../themes';
-import { Threshold } from '@grafana/data';
 
 export interface Props extends Themeable {
   height: number;

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

@@ -4,8 +4,7 @@ import React, { PureComponent } from 'react';
 import uniqBy from 'lodash/uniqBy';
 
 // Types
-import { GraphSeriesXY } from '../../types';
-import { TimeRange } from '@grafana/data';
+import { TimeRange, GraphSeriesXY } from '@grafana/data';
 
 export interface GraphProps {
   series: GraphSeriesXY[];

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -1,13 +1,13 @@
 // Libraries
 import _ from 'lodash';
 import React from 'react';
-
 import { css } from 'emotion';
+import { GraphSeriesValue } from '@grafana/data';
+
 import { Graph, GraphProps } from './Graph';
 import { LegendRenderOptions, LegendItem, LegendDisplayMode } from '../Legend/Legend';
 import { GraphLegend } from './GraphLegend';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
-import { GraphSeriesValue } from '../../types/graph';
 
 export type SeriesOptionChangeHandler<TOption> = (label: string, option: TOption) => void;
 export type SeriesColorChangeHandler = SeriesOptionChangeHandler<string>;

packages/grafana-ui/src/components/Legend/Legend.story.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { LegendList, LegendPlacement, LegendItem, LegendTable } from './Legend';
 import tinycolor from 'tinycolor2';
-import { DisplayValue } from '../../types/index';
+import { DisplayValue } from '@grafana/data';
 import { number, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { GraphLegendListItem, GraphLegendTableRow, GraphLegendItemProps } from '../Graph/GraphLegendItem';

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

@@ -1,4 +1,4 @@
-import { DisplayValue } from '../../types/index';
+import { DisplayValue } from '@grafana/data';
 
 import { LegendList } from './LegendList';
 import { LegendTable } from './LegendTable';

packages/grafana-ui/src/components/Legend/LegendStatsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InlineList } from '../List/InlineList';
 import { css } from 'emotion';
-import { DisplayValue } from '../../types/displayValue';
+import { DisplayValue } from '@grafana/data';
 import capitalize from 'lodash/capitalize';
 
 const LegendItemStat: React.FunctionComponent<{ stat: DisplayValue }> = ({ stat }) => {

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

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import { select, pie, arc, event } from 'd3';
 import sum from 'lodash/sum';
+import { DisplayValue } from '@grafana/data';
 
-import { GrafanaThemeType, DisplayValue } from '../../types';
+import { GrafanaThemeType } from '../../types';
 import { Themeable } from '../../index';
 import { colors as grafana_colors } from '../../utils/index';
 

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

@@ -3,6 +3,4 @@ export * from './plugin';
 export * from './app';
 export * from './datasource';
 export * from './theme';
-export * from './graph';
 export * from './input';
-export * from './displayValue';

packages/grafana-ui/src/utils/displayValue.test.ts

@@ -1,6 +1,6 @@
+import { MappingType, ValueMapping, DisplayValue } from '@grafana/data';
+
 import { getDisplayProcessor, getColorFromThreshold, DisplayProcessor, getDecimalsForValue } from './displayValue';
-import { DisplayValue } from '../types';
-import { MappingType, ValueMapping } from '@grafana/data';
 
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
   processors.forEach(processor => {

packages/grafana-ui/src/utils/displayValue.ts

@@ -1,13 +1,22 @@
 // Libraries
 import _ from 'lodash';
+import {
+  DateTime,
+  dateTime,
+  Threshold,
+  getMappedValue,
+  Field,
+  DecimalInfo,
+  DisplayValue,
+  DecimalCount,
+} from '@grafana/data';
 
 // Utils
 import { getValueFormat } from './valueFormats/valueFormats';
 import { getColorFromHexRgbOrName } from './namedColorsPalette';
 
 // Types
-import { DecimalInfo, DisplayValue, GrafanaTheme, GrafanaThemeType, DecimalCount } from '../types';
-import { DateTime, dateTime, Threshold, getMappedValue, Field } from '@grafana/data';
+import { GrafanaTheme, GrafanaThemeType } from '../types';
 
 export type DisplayProcessor = (value: any) => DisplayValue;
 

packages/grafana-ui/src/utils/fieldDisplay.ts

@@ -1,10 +1,20 @@
+import {
+  ReducerID,
+  reduceField,
+  FieldType,
+  NullValueMode,
+  DataFrame,
+  Field,
+  DisplayValue,
+  GraphSeriesValue,
+} from '@grafana/data';
+
 import toNumber from 'lodash/toNumber';
 import toString from 'lodash/toString';
 
-import { DisplayValue, GrafanaTheme, InterpolateFunction, ScopedVars, GraphSeriesValue } from '../types/index';
+import { GrafanaTheme, InterpolateFunction, ScopedVars } from '../types/index';
 import { getDisplayProcessor } from './displayValue';
 import { getFlotPairs } from './flotPairs';
-import { ReducerID, reduceField, FieldType, NullValueMode, DataFrame, Field } from '@grafana/data';
 
 export interface FieldDisplayOptions {
   values?: boolean; // If true show each row value

packages/grafana-ui/src/utils/flotPairs.ts

@@ -1,6 +1,5 @@
 // Types
-import { GraphSeriesValue } from '../types/index';
-import { NullValueMode, DataFrame } from '@grafana/data';
+import { NullValueMode, DataFrame, GraphSeriesValue } from '@grafana/data';
 
 export interface FlotPairsOptions {
   series: DataFrame;

packages/grafana-ui/src/utils/valueFormats/arithmeticFormatters.ts

@@ -1,5 +1,6 @@
+import { DecimalCount } from '@grafana/data';
+
 import { toFixed } from './valueFormats';
-import { DecimalCount } from '../../types';
 
 export function toPercent(size: number, decimals: DecimalCount) {
   if (size === null) {

packages/grafana-ui/src/utils/valueFormats/dateTimeFormatters.ts

@@ -1,6 +1,6 @@
+import { toUtc, toDuration as duration, dateTime, DecimalCount } from '@grafana/data';
+
 import { toFixed, toFixedScaled } from './valueFormats';
-import { DecimalCount } from '../../types';
-import { toUtc, toDuration as duration, dateTime } from '@grafana/data';
 
 interface IntervalsInSeconds {
   [interval: string]: number;

packages/grafana-ui/src/utils/valueFormats/symbolFormatters.ts

@@ -1,5 +1,6 @@
+import { DecimalCount } from '@grafana/data';
+
 import { scaledUnits } from './valueFormats';
-import { DecimalCount } from '../../types';
 
 export function currency(symbol: string) {
   const units = ['', 'K', 'M', 'B', 'T'];

packages/grafana-ui/src/utils/valueFormats/valueFormats.ts

@@ -1,5 +1,6 @@
+import { DecimalCount } from '@grafana/data';
+
 import { getCategories } from './categories';
-import { DecimalCount } from '../../types';
 
 export type ValueFormatter = (
   value: number,

public/app/core/time_series2.ts

@@ -1,7 +1,7 @@
 import { getFlotTickDecimals } from 'app/core/utils/ticks';
 import _ from 'lodash';
-import { getValueFormat, ValueFormatter, DecimalCount } from '@grafana/ui';
-import { stringToJsRegex } from '@grafana/data';
+import { getValueFormat, ValueFormatter } from '@grafana/ui';
+import { stringToJsRegex, DecimalCount } from '@grafana/data';
 
 function matchSeriesOverride(aliasOrRegex: string, seriesAlias: string) {
   if (!aliasOrRegex) {

public/app/plugins/panel/graph/jquery.flot.events.ts

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 //@ts-ignore
 import Drop from 'tether-drop';
-import { CreatePlotOverlay } from '@grafana/ui';
+import { CreatePlotOverlay } from '@grafana/data';
 
 /** @ngInject */
 const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {

public/app/plugins/panel/graph2/GraphPanelController.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { GraphSeriesXY, PanelData } from '@grafana/ui';
+import { PanelData } from '@grafana/ui';
+import { GraphSeriesXY } from '@grafana/data';
 import difference from 'lodash/difference';
+
 import { getGraphSeriesModel } from './getGraphSeriesModel';
 import { Options, SeriesOptions } from './types';
 import { SeriesColorChangeHandler, SeriesAxisToggleHandler } from '@grafana/ui/src/components/Graph/GraphWithLegend';

public/app/plugins/panel/graph2/getGraphSeriesModel.ts

@@ -1,13 +1,6 @@
-import {
-  GraphSeriesXY,
-  colors,
-  getFlotPairs,
-  getColorFromHexRgbOrName,
-  getDisplayProcessor,
-  DisplayValue,
-  PanelData,
-} from '@grafana/ui';
-import { NullValueMode, reduceField, FieldCache, FieldType } from '@grafana/data';
+import { colors, getFlotPairs, getColorFromHexRgbOrName, getDisplayProcessor, PanelData } from '@grafana/ui';
+import { NullValueMode, reduceField, FieldCache, FieldType, DisplayValue, GraphSeriesXY } from '@grafana/data';
+
 import { SeriesOptions, GraphOptions } from './types';
 import { GraphLegendEditorLegendOptions } from './GraphLegendEditor';