From fee5e2c43c2b69616f3a94fed6903b60fc4857ae Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 27 Feb 2020 16:25:32 +0100 Subject: [PATCH] feat: expose Specs types as part of the API close #547 --- .playground/playground.tsx | 8 ++- docs/1-Typesofchart/5-AnnotatingBars.mdx | 2 +- integration/tests/mixed_stories.test.ts | 2 +- src/chart_types/specs.ts | 2 + src/chart_types/xy_chart/utils/specs.ts | 72 ++++++++++++++++--- src/index.ts | 50 ++++++------- src/mocks/series/series_identifiers.ts | 2 +- .../annotations/rects/3_linear_line_chart.tsx | 4 +- stories/bar/23_bar_chart_2y2g.tsx | 3 +- stories/bar/24_tooltip_visibility.tsx | 3 +- stories/mixed/6_fitting.tsx | 15 +++- stories/stylings/13_custom_series_name.tsx | 3 +- .../stylings/13_custom_series_name_config.tsx | 3 +- .../14_custom_series_name_formatting.tsx | 3 +- stories/stylings/16_style_accessor.tsx | 3 +- 15 files changed, 115 insertions(+), 60 deletions(-) diff --git a/.playground/playground.tsx b/.playground/playground.tsx index 84b40279d5..f928282aac 100644 --- a/.playground/playground.tsx +++ b/.playground/playground.tsx @@ -8,6 +8,8 @@ import { LineAnnotation, RectAnnotation, AnnotationDomainTypes, + LineAnnotationDatum, + RectAnnotationDatum, } from '../src'; import { SeededDataGenerator } from '../src/mocks/utils'; @@ -18,6 +20,8 @@ export class Playground extends React.Component<{}, { isSunburstShown: boolean } ...item, y1: item.y + 100, })); + const lineDatum: LineAnnotationDatum[] = [{ dataValue: 321321 }]; + const rectDatum: RectAnnotationDatum[] = [{ coordinates: { x1: 100 } }]; return ( <> @@ -43,8 +47,8 @@ export class Playground extends React.Component<{}, { isSunburstShown: boolean } splitSeriesAccessors={['g']} data={data} /> - - + + diff --git a/docs/1-Typesofchart/5-AnnotatingBars.mdx b/docs/1-Typesofchart/5-AnnotatingBars.mdx index 3676446912..3203e0253f 100644 --- a/docs/1-Typesofchart/5-AnnotatingBars.mdx +++ b/docs/1-Typesofchart/5-AnnotatingBars.mdx @@ -13,11 +13,11 @@ import { ScaleType, Settings, timeFormatter, + Position, } from '../../src'; import { Icon } from '../../src/components/icons/icon'; import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana'; import { BandedAccessorType } from '../../src/utils/geometry'; -import { Position } from '../../src/chart_types/xy_chart/utils/specs'; import { getChartRotationKnob, generateAnnotationData, arrayKnobs } from '../../docs/charts' diff --git a/integration/tests/mixed_stories.test.ts b/integration/tests/mixed_stories.test.ts index 855fa25c23..033ad7e23b 100644 --- a/integration/tests/mixed_stories.test.ts +++ b/integration/tests/mixed_stories.test.ts @@ -1,5 +1,5 @@ import { common } from '../page_objects'; -import { Fit } from '../../src/chart_types/xy_chart/utils/specs'; +import { Fit } from '../../src'; describe('Mixed series stories', () => { describe('Fitting functions', () => { diff --git a/src/chart_types/specs.ts b/src/chart_types/specs.ts index f8e9557a1f..21a842b448 100644 --- a/src/chart_types/specs.ts +++ b/src/chart_types/specs.ts @@ -8,4 +8,6 @@ export { HistogramBarSeries, } from './xy_chart/specs'; +export * from './xy_chart/utils/specs'; + export { Partition } from './partition_chart/specs'; diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index 5c0bddf486..eaf70c4d90 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/src/chart_types/xy_chart/utils/specs.ts @@ -534,14 +534,29 @@ export const AnnotationDomainTypes = Object.freeze({ export type AnnotationDomainType = $Values; +/** + * The descriptive object of a line annotation + */ export interface LineAnnotationDatum { + /** + * The value on the x or y axis accordingly to the domainType configured + */ dataValue: any; + /** + * A textual description of the annotation + */ details?: string; + /** + * An header of the annotation. If undefined, than the formatted dataValue will be used + */ header?: string; } -export type LineAnnotationSpec = BaseAnnotationSpec & { - annotationType: typeof AnnotationTypes.Line; +export type LineAnnotationSpec = BaseAnnotationSpec< + typeof AnnotationTypes.Line, + LineAnnotationDatum, + LineAnnotationStyle +> & { domainType: AnnotationDomainType; /** Custom marker */ marker?: JSX.Element; @@ -565,18 +580,42 @@ export type LineAnnotationSpec = BaseAnnotationSpec & { - annotationType: typeof AnnotationTypes.Rectangle; +export type RectAnnotationSpec = BaseAnnotationSpec< + typeof AnnotationTypes.Rectangle, + RectAnnotationDatum, + RectAnnotationStyle +> & { /** Custom rendering function for tooltip */ renderTooltip?: AnnotationTooltipFormatter; /** z-index of the annotation relative to other elements in the chart @@ -586,24 +625,35 @@ export type RectAnnotationSpec = BaseAnnotationSpec extends Spec { chartType: ChartTypes; specType: typeof SpecTypes.Annotation; - /** Annotation type: line, rectangle, text */ - annotationType: AnnotationType; - /** The ID of the axis group, generated via getGroupId method + /** + * Annotation type: line, rectangle, text + */ + annotationType: T; + /** + * The ID of the axis group, generated via getGroupId method * @default __global__ */ groupId: GroupId; // defaults to __global__; needed for yDomain position - /** Data values defined with coordinates and details */ + /** + * Data values defined with coordinates and details + */ dataValues: D[]; - /** Custom annotation style */ + /** + * Custom annotation style + */ style?: Partial; - /** Toggles tooltip annotation visibility */ + /** + * Toggles tooltip annotation visibility + */ hideTooltips?: boolean; - /** z-index of the annotation relative to other elements in the chart + /** + * z-index of the annotation relative to other elements in the chart * Default specified per specific annotation spec. */ zIndex?: number; diff --git a/src/index.ts b/src/index.ts index 556a7b7d6d..17b91e7019 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,41 +1,20 @@ +// polyfill for Path2D canvas import 'path2d-polyfill'; -export * from './specs'; + +export { ChartTypes } from './chart_types'; export { Chart } from './components/chart'; export { ChartSize, ChartSizeArray, ChartSizeObject } from './utils/chart_size'; + +// DEPRECATED: we will remove these types soon export { SpecId, GroupId, AxisId, AnnotationId, getAxisId, getGroupId, getSpecId, getAnnotationId } from './utils/ids'; -export { ScaleType } from './scales'; -export * from './utils/themes/theme'; -export { LIGHT_THEME } from './utils/themes/light_theme'; -export { DARK_THEME } from './utils/themes/dark_theme'; -export * from './utils/themes/theme_commons'; -export { RecursivePartial } from './utils/commons'; + +// Everything related to the specs types and react-components +export * from './specs'; export { CurveType } from './utils/curves'; export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters'; -export { DataGenerator } from './utils/data_generators/data_generator'; export { SeriesCollectionValue } from './chart_types/xy_chart/utils/series'; -export { ChartTypes } from './chart_types'; export { Datum, Position, Rendering, Rotation } from './utils/commons'; -export { TickFormatter } from './chart_types/xy_chart/utils/specs'; export { SeriesIdentifier, XYChartSeriesIdentifier } from './chart_types/xy_chart/utils/series'; -export { - AnnotationDomainType, - AnnotationDomainTypes, - SeriesColorAccessor, - SeriesColorsArray, - SeriesColorAccessorFn, - HistogramModeAlignment, - HistogramModeAlignments, - LineAnnotationDatum, - LineAnnotationSpec, - RectAnnotationDatum, - RectAnnotationSpec, - SeriesTypes, - SeriesName, - SeriesNameFn, - SeriesNameAccessor, - SeriesNameConfig, - SeriesNameConfigOptions, -} from './chart_types/xy_chart/utils/specs'; export { AnnotationTooltipFormatter } from './chart_types/xy_chart/annotations/annotation_utils'; export { GeometryValue } from './utils/geometry'; export { @@ -46,3 +25,16 @@ export { export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index'; export { AccessorFn, IndexedAccessorFn } from './utils/accessor'; export { SpecTypes } from './specs/settings'; + +// scales +export { ScaleType } from './scales'; + +// theme +export * from './utils/themes/theme'; +export * from './utils/themes/theme_commons'; +export { LIGHT_THEME } from './utils/themes/light_theme'; +export { DARK_THEME } from './utils/themes/dark_theme'; + +// utilities +export { RecursivePartial } from './utils/commons'; +export { DataGenerator } from './utils/data_generators/data_generator'; diff --git a/src/mocks/series/series_identifiers.ts b/src/mocks/series/series_identifiers.ts index 24a91ea9a2..f12b957d01 100644 --- a/src/mocks/series/series_identifiers.ts +++ b/src/mocks/series/series_identifiers.ts @@ -1,4 +1,4 @@ -import { BasicSeriesSpec } from '../../chart_types/xy_chart/utils/specs'; +import { BasicSeriesSpec } from '../../'; import { SeriesCollectionValue, getSplittedSeries, diff --git a/stories/annotations/rects/3_linear_line_chart.tsx b/stories/annotations/rects/3_linear_line_chart.tsx index 2e238526e1..c668aa64ee 100644 --- a/stories/annotations/rects/3_linear_line_chart.tsx +++ b/stories/annotations/rects/3_linear_line_chart.tsx @@ -1,6 +1,6 @@ import { boolean, select } from '@storybook/addon-knobs'; import React from 'react'; -import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings } from '../../../src'; +import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings, RectAnnotationDatum } from '../../../src'; import { getChartRotationKnob } from '../../utils/knobs'; import { BandedAccessorType } from '../../../src/utils/geometry'; import { Position } from '../../../src/utils/commons'; @@ -20,7 +20,7 @@ export const example = () => { 'x0', ); - const dataValues = [ + const dataValues: RectAnnotationDatum[] = [ { coordinates: { x0: 1, diff --git a/stories/bar/23_bar_chart_2y2g.tsx b/stories/bar/23_bar_chart_2y2g.tsx index 6e1b04d377..a9682b5b54 100644 --- a/stories/bar/23_bar_chart_2y2g.tsx +++ b/stories/bar/23_bar_chart_2y2g.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, FilterPredicate } from '../../src'; import * as TestDatasets from '../../src/utils/data_samples/test_dataset'; -import { FilterPredicate } from '../../src/chart_types/xy_chart/utils/specs'; import { SB_SOURCE_PANEL } from '../utils/storybook'; export const example = () => { diff --git a/stories/bar/24_tooltip_visibility.tsx b/stories/bar/24_tooltip_visibility.tsx index 562a9c10f2..13611a3d06 100644 --- a/stories/bar/24_tooltip_visibility.tsx +++ b/stories/bar/24_tooltip_visibility.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, FilterPredicate } from '../../src'; import * as TestDatasets from '../../src/utils/data_samples/test_dataset'; -import { FilterPredicate } from '../../src/chart_types/xy_chart/utils/specs'; import { SB_SOURCE_PANEL } from '../utils/storybook'; export const example = () => { diff --git a/stories/mixed/6_fitting.tsx b/stories/mixed/6_fitting.tsx index 21c164d606..20fb76495c 100644 --- a/stories/mixed/6_fitting.tsx +++ b/stories/mixed/6_fitting.tsx @@ -1,8 +1,19 @@ import { select, number } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings } from '../../src/'; -import { Fit, SeriesTypes } from '../../src/chart_types/xy_chart/utils/specs'; +import { + AreaSeries, + Axis, + Chart, + CurveType, + LineSeries, + Position, + ScaleType, + Settings, + Fit, + SeriesTypes, +} from '../../src/'; + import { SB_KNOBS_PANEL } from '../utils/storybook'; export const example = () => { diff --git a/stories/stylings/13_custom_series_name.tsx b/stories/stylings/13_custom_series_name.tsx index b7de2225b0..fe9d0193ef 100644 --- a/stories/stylings/13_custom_series_name.tsx +++ b/stories/stylings/13_custom_series_name.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn } from '../../src'; import * as TestDatasets from '../../src/utils/data_samples/test_dataset'; -import { SeriesNameFn } from '../../src/chart_types/xy_chart/utils/specs'; import { SB_SOURCE_PANEL } from '../utils/storybook'; export const example = () => { diff --git a/stories/stylings/13_custom_series_name_config.tsx b/stories/stylings/13_custom_series_name_config.tsx index 4fa80dd5b8..4fed5d7909 100644 --- a/stories/stylings/13_custom_series_name_config.tsx +++ b/stories/stylings/13_custom_series_name_config.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameConfigOptions } from '../../src'; import * as TestDatasets from '../../src/utils/data_samples/test_dataset'; -import { SeriesNameConfigOptions } from '../../src/chart_types/xy_chart/utils/specs'; import { SB_SOURCE_PANEL } from '../utils/storybook'; export const example = () => { diff --git a/stories/stylings/14_custom_series_name_formatting.tsx b/stories/stylings/14_custom_series_name_formatting.tsx index cd6b33ddb4..aa6375aea2 100644 --- a/stories/stylings/14_custom_series_name_formatting.tsx +++ b/stories/stylings/14_custom_series_name_formatting.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src'; -import { SeriesNameFn } from '../../src/chart_types/xy_chart/utils/specs'; +import { Axis, BarSeries, Chart, Position, ScaleType, Settings, SeriesNameFn } from '../../src'; import moment from 'moment'; import { DateTime } from 'luxon'; import { SB_SOURCE_PANEL } from '../utils/storybook'; diff --git a/stories/stylings/16_style_accessor.tsx b/stories/stylings/16_style_accessor.tsx index 4b02932e3d..463917dad1 100644 --- a/stories/stylings/16_style_accessor.tsx +++ b/stories/stylings/16_style_accessor.tsx @@ -13,8 +13,9 @@ import { RecursivePartial, BarSeriesStyle, PointStyle, + BarStyleAccessor, + PointStyleAccessor, } from '../../src'; -import { BarStyleAccessor, PointStyleAccessor } from '../../src/chart_types/xy_chart/utils/specs'; export const example = () => { const hasThreshold = boolean('threshold', true);