diff --git a/.playground/playground.tsx b/.playground/playground.tsx index 0201be20ce..f928282aac 100644 --- a/.playground/playground.tsx +++ b/.playground/playground.tsx @@ -1,6 +1,16 @@ import React from 'react'; - -import { Chart, LineSeries, ScaleType, Position, Axis } from '../src'; +import { + Chart, + ScaleType, + Position, + Axis, + LineSeries, + LineAnnotation, + RectAnnotation, + AnnotationDomainTypes, + LineAnnotationDatum, + RectAnnotationDatum, +} from '../src'; import { SeededDataGenerator } from '../src/mocks/utils'; export class Playground extends React.Component<{}, { isSunburstShown: boolean }> { @@ -10,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 ( <> @@ -35,6 +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..86306fc02d 100644 --- a/docs/1-Typesofchart/5-AnnotatingBars.mdx +++ b/docs/1-Typesofchart/5-AnnotatingBars.mdx @@ -5,7 +5,6 @@ import { Axis, BarSeries, Chart, - getAnnotationId, LineAnnotation, LineAnnotationDatum, LineSeries, @@ -13,11 +12,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' @@ -31,22 +30,22 @@ Here is a basic `line` annotation with `x domain continuous` } - style = {{line: { - strokeWidth: 3, - stroke: '#f00', - opacity: 1, - }, - details: { - fontSize: 12, - fontFamily: 'Arial', - fontStyle: 'bold', - fill: 'gray', - padding: 0, - },}} + id="anno_1" + domainType={AnnotationDomainTypes.XDomain} + dataValues={[{dataValue:2.5, details:'detail-0'}, {dataValue: 7.2, details: 'detail-1'}]} + marker={} + style = {{line: { + strokeWidth: 3, + stroke: '#f00', + opacity: 1, + }, + details: { + fontSize: 12, + fontFamily: 'Arial', + fontStyle: 'bold', + fill: 'gray', + padding: 0, + },}} /> @@ -74,22 +73,22 @@ The code sample for the above chart is shown below in the details. What you shou } - style = {{line: { - strokeWidth: 3, - stroke: '#f00', - opacity: 1, - }, - details: { - fontSize: 12, - fontFamily: 'Arial', - fontStyle: 'bold', - fill: 'gray', - padding: 0, - },}} + id="anno_1" + domainType={AnnotationDomainTypes.XDomain} + dataValues={[{dataValue:2.5, details:'detail-0'}, {dataValue: 7.2, details: 'detail-1'}]} + marker={} + style = {{line: { + strokeWidth: 3, + stroke: '#f00', + opacity: 1, + }, + details: { + fontSize: 12, + fontFamily: 'Arial', + fontStyle: 'bold', + fill: 'gray', + padding: 0, + },}} /> @@ -114,7 +113,7 @@ Instead of `continuous` you can use `ordinal` annotations } @@ -144,7 +143,7 @@ The code sample for the above chart can be seen below. } diff --git a/docs/2-ChartPropTables/12-AxisProps.md b/docs/2-ChartPropTables/12-AxisProps.md index 25171aa44b..30769acf1d 100644 --- a/docs/2-ChartPropTables/12-AxisProps.md +++ b/docs/2-ChartPropTables/12-AxisProps.md @@ -6,7 +6,7 @@ The bar chart with axis example in the `Types of charts` section includes only s |:------|:------:|:---------:|:------| | chartType | `typeof ChartTypes.XYAxis` | ChartTypes.XYAxis | | | specType | `typeof SpecTypes.Axis` | SpecTypes.Axis | | -| groupId | GroupId | `__global__` | The ID of the axis group, generated via getGroupId method | +| groupId | GroupId | `__global__` | The ID of the axis group | | hide | boolean | false | Hide this axis | | showOverlappingTicks | boolean | false | Shows all ticks, also the one from the overlapping labels | | showOverlappingLabels | boolean | false | Shows all labels, also the overlapping ones | diff --git a/docs/2-ChartPropTables/14-LineProps.md b/docs/2-ChartPropTables/14-LineProps.md index 699ef4bca2..f91d0dd5ef 100644 --- a/docs/2-ChartPropTables/14-LineProps.md +++ b/docs/2-ChartPropTables/14-LineProps.md @@ -6,7 +6,7 @@ | chartType | `typeof ChartTypes.XYAxis` | ChartTypes.XYAxis | | | specType | `typeof SpecTypes.Series` | SpecTypes.Series | | | seriesTypes | | SeriesTypes.Line | | -| groupId || DEFAULT_GROUP_ID |The ID of the line, generated via getGroupId method| +| groupId || DEFAULT_GROUP_ID |The ID of the line | | xScaleType `(required)`| `ScaleType (ScaleType.Ordinal or ScaleType.Linear or ScaleType.Time)`|ScaleType.Ordinal | The x axis scale type | | yScaleType `(required)`| `ScaleType (ScaleType.Ordinal or ScaleType.Linear or ScaleType.Time)`| ScaleType.Linear | The y axis scale type | | xAccessor `(required)` | Accessor | 'x' | the field name of the x value on the Datum object| diff --git a/docs/charts.tsx b/docs/charts.tsx index 838c1110a8..6f67bbe071 100644 --- a/docs/charts.tsx +++ b/docs/charts.tsx @@ -7,7 +7,6 @@ import { Position, Settings, LineAnnotation, - getAnnotationId, AnnotationDomainTypes, Axis, LineAnnotationDatum, @@ -107,7 +106,7 @@ export const lineBasicXDomainContinous = () => { { 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/annotations/annotation_utils.test.ts b/src/chart_types/xy_chart/annotations/annotation_utils.test.ts index c34257e562..cd33402d72 100644 --- a/src/chart_types/xy_chart/annotations/annotation_utils.test.ts +++ b/src/chart_types/xy_chart/annotations/annotation_utils.test.ts @@ -10,7 +10,7 @@ import { import { Position, Rotation } from '../../../utils/commons'; import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme'; import { Dimensions } from '../../../utils/dimensions'; -import { getAxisId, getGroupId, GroupId, AnnotationId } from '../../../utils/ids'; +import { GroupId, AnnotationId } from '../../../utils/ids'; import { Scale, ScaleType, ScaleBand, ScaleContinuous } from '../../../scales'; import { computeAnnotationDimensions, @@ -64,13 +64,13 @@ describe('annotation utils', () => { left: 15, }; - const groupId = getGroupId('foo-group'); + const groupId = 'foo-group'; const axesSpecs: AxisSpec[] = []; const verticalAxisSpec: AxisSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Axis, - id: getAxisId('vertical_axis'), + id: 'vertical_axis', groupId, hide: false, showOverlappingTicks: false, @@ -84,7 +84,7 @@ describe('annotation utils', () => { const horizontalAxisSpec: AxisSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Axis, - id: getAxisId('horizontal_axis'), + id: 'horizontal_axis', groupId, hide: false, showOverlappingTicks: false, @@ -1356,7 +1356,7 @@ describe('annotation utils', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Annotation, id: 'rect', - groupId: getGroupId('foo'), + groupId: 'foo', annotationType: AnnotationTypes.Rectangle, dataValues: [{ coordinates: { x0: 1, x1: 2, y0: 3, y1: 5 } }], }; diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts index d0c4dc4020..7a9ca5558c 100644 --- a/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts +++ b/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts @@ -1,7 +1,6 @@ import { computeXScale } from '../utils/scales'; import { BasicSeriesSpec, SeriesTypes } from '../utils/specs'; import { Dimensions } from '../../../utils/dimensions'; -import { getGroupId, getSpecId } from '../../../utils/ids'; import { ScaleType } from '../../../scales'; import { getCursorBandPosition, getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from '../state/utils'; @@ -9,16 +8,16 @@ import { ChartTypes } from '../..'; import { SpecTypes } from '../../../specs/settings'; describe('Crosshair utils linear scale', () => { - const barSeries1SpecId = getSpecId('barSeries1'); - const barSeries2SpecId = getSpecId('barSeries2'); - const lineSeries1SpecId = getSpecId('lineSeries1'); - const lineSeries2SpecId = getSpecId('lineSeries2'); + const barSeries1SpecId = 'barSeries1'; + const barSeries2SpecId = 'barSeries2'; + const lineSeries1SpecId = 'lineSeries1'; + const lineSeries2SpecId = 'lineSeries2'; const barSeries1: BasicSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: barSeries1SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Bar, data: [ [0, 0], @@ -35,7 +34,7 @@ describe('Crosshair utils linear scale', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: barSeries2SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Bar, data: [ [0, 2], @@ -52,7 +51,7 @@ describe('Crosshair utils linear scale', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: lineSeries1SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Line, data: [ [0, 0], @@ -69,7 +68,7 @@ describe('Crosshair utils linear scale', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: lineSeries2SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Line, data: [ [0, 2], diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts index e53d6f5e29..2b41887394 100644 --- a/src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts +++ b/src/chart_types/xy_chart/crosshair/crosshair_utils.ordinal_snap.test.ts @@ -1,6 +1,5 @@ import { computeXScale } from '../utils/scales'; import { BasicSeriesSpec, SeriesTypes } from '../utils/specs'; -import { getGroupId, getSpecId } from '../../../utils/ids'; import { ScaleType } from '../../../scales'; import { getSnapPosition } from './crosshair_utils'; import { computeSeriesDomains } from '../state/utils'; @@ -8,16 +7,16 @@ import { ChartTypes } from '../..'; import { SpecTypes } from '../../../specs/settings'; describe('Crosshair utils ordinal scales', () => { - const barSeries1SpecId = getSpecId('barSeries1'); - const barSeries2SpecId = getSpecId('barSeries2'); - const lineSeries1SpecId = getSpecId('lineSeries1'); - const lineSeries2SpecId = getSpecId('lineSeries2'); + const barSeries1SpecId = 'barSeries1'; + const barSeries2SpecId = 'barSeries2'; + const lineSeries1SpecId = 'lineSeries1'; + const lineSeries2SpecId = 'lineSeries2'; const barSeries1: BasicSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: barSeries1SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Bar, data: [ ['a', 0], @@ -34,7 +33,7 @@ describe('Crosshair utils ordinal scales', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: barSeries2SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Bar, data: [ ['a', 2], @@ -51,7 +50,7 @@ describe('Crosshair utils ordinal scales', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: lineSeries1SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Line, data: [ ['a', 0], @@ -68,7 +67,7 @@ describe('Crosshair utils ordinal scales', () => { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, id: lineSeries2SpecId, - groupId: getGroupId('group1'), + groupId: 'group1', seriesType: SeriesTypes.Line, data: [ ['a', 2], diff --git a/src/chart_types/xy_chart/domains/y_domain.ts b/src/chart_types/xy_chart/domains/y_domain.ts index 9f01c0f135..a790df19be 100644 --- a/src/chart_types/xy_chart/domains/y_domain.ts +++ b/src/chart_types/xy_chart/domains/y_domain.ts @@ -1,5 +1,5 @@ import { BasicSeriesSpec, DomainRange, DEFAULT_GLOBAL_ID, SeriesTypes } from '../utils/specs'; -import { GroupId, SpecId, getGroupId } from '../../../utils/ids'; +import { GroupId, SpecId } from '../../../utils/ids'; import { ScaleContinuousType, ScaleType } from '../../../scales'; import { isCompleteBound, isLowerBound, isUpperBound } from '../utils/axis_utils'; import { BaseDomain } from './domain'; @@ -33,7 +33,7 @@ export function mergeYDomain( // group specs by group ids const specsByGroupIds = splitSpecsByGroupId(specs); const specsByGroupIdsEntries = [...specsByGroupIds.entries()]; - const globalId = getGroupId(DEFAULT_GLOBAL_ID); + const globalId = DEFAULT_GLOBAL_ID; const yDomains = specsByGroupIdsEntries.map(([groupId, groupSpecs]) => { const customDomain = domainsByGroupId.get(groupId); diff --git a/src/chart_types/xy_chart/legend/legend.test.ts b/src/chart_types/xy_chart/legend/legend.test.ts index 80b0fd13bd..5d8af08ef8 100644 --- a/src/chart_types/xy_chart/legend/legend.test.ts +++ b/src/chart_types/xy_chart/legend/legend.test.ts @@ -1,4 +1,3 @@ -import { getAxisId, getGroupId, getSpecId } from '../../../utils/ids'; import { ScaleType } from '../../../scales'; import { computeLegend } from './legend'; import { SeriesCollectionValue, getSeriesName } from '../utils/series'; @@ -19,7 +18,7 @@ const nullDisplayValue = { }; const seriesCollectionValue1a = { seriesIdentifier: { - specId: getSpecId('spec1'), + specId: 'spec1', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['y1'], @@ -28,7 +27,7 @@ const seriesCollectionValue1a = { }; const seriesCollectionValue1b = { seriesIdentifier: { - specId: getSpecId('spec1'), + specId: 'spec1', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['a', 'b', 'y1'], @@ -37,7 +36,7 @@ const seriesCollectionValue1b = { }; const seriesCollectionValue2a = { seriesIdentifier: { - specId: getSpecId('spec2'), + specId: 'spec2', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['y1'], @@ -46,7 +45,7 @@ const seriesCollectionValue2a = { }; const seriesCollectionValue2b = { seriesIdentifier: { - specId: getSpecId('spec3'), + specId: 'spec3', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['c', 'd', 'y1'], @@ -56,9 +55,9 @@ const seriesCollectionValue2b = { const spec1: BasicSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec1'), + id: 'spec1', name: 'Spec 1 title', - groupId: getGroupId('group'), + groupId: 'group', seriesType: SeriesTypes.Line, yScaleType: ScaleType.Log, xScaleType: ScaleType.Linear, @@ -71,8 +70,8 @@ const spec1: BasicSeriesSpec = { const spec2: BasicSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec2'), - groupId: getGroupId('group'), + id: 'spec2', + groupId: 'group', seriesType: SeriesTypes.Line, yScaleType: ScaleType.Log, xScaleType: ScaleType.Linear, @@ -87,8 +86,8 @@ const axesSpecs: AxisSpec[] = []; const axisSpec: AxisSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Axis, - id: getAxisId('axis1'), - groupId: getGroupId('group1'), + id: 'axis1', + groupId: 'group1', hide: false, showOverlappingTicks: false, showOverlappingLabels: false, @@ -274,14 +273,14 @@ describe('Legends', () => { }); it('returns the right series name for a color series', () => { const seriesIdentifier1 = { - specId: getSpecId(''), + specId: '', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['y1'], key: '', }; const seriesIdentifier2 = { - specId: getSpecId(''), + specId: '', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['a', 'b', 'y1'], @@ -322,21 +321,21 @@ describe('Legends', () => { }); it('use the splitted value as name if has a single series and splitSeries is used', () => { const seriesIdentifier1 = { - specId: getSpecId(''), + specId: '', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['y1'], key: '', }; const seriesIdentifier2 = { - specId: getSpecId(''), + specId: '', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['a', 'b', 'y1'], key: '', }; const seriesIdentifier3 = { - specId: getSpecId(''), + specId: '', yAccessor: 'y1', splitAccessors: new Map(), seriesKeys: ['a', 'y1'], diff --git a/src/chart_types/xy_chart/specs/line_annotation.tsx b/src/chart_types/xy_chart/specs/line_annotation.tsx index dd88562353..7bcf3910f2 100644 --- a/src/chart_types/xy_chart/specs/line_annotation.tsx +++ b/src/chart_types/xy_chart/specs/line_annotation.tsx @@ -1,7 +1,7 @@ import React, { createRef, CSSProperties, Component } from 'react'; import { deepEqual } from '../../../utils/fast_deep_equal'; import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationTypes } from '../utils/specs'; -import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme'; +import { DEFAULT_ANNOTATION_LINE_STYLE, mergeWithDefaultAnnotationLine } from '../../../utils/themes/theme'; import { bindActionCreators, Dispatch } from 'redux'; import { connect } from 'react-redux'; import { upsertSpec, removeSpec } from '../../../state/actions/specs'; @@ -37,7 +37,9 @@ export class LineAnnotationSpecComponent extends Component { height: offsetHeight, }; } - upsertSpec({ ...config }); + const style = mergeWithDefaultAnnotationLine(config.style); + const spec = { ...config, style }; + upsertSpec(spec); } shouldComponentUpdate(nextProps: LineAnnotationSpec) { @@ -53,7 +55,9 @@ export class LineAnnotationSpecComponent extends Component { height: offsetHeight, }; } - upsertSpec({ ...config }); + const style = mergeWithDefaultAnnotationLine(config.style); + const spec = { ...config, style }; + upsertSpec(spec); } componentWillUnmount() { const { removeSpec, id } = this.props as InjectedProps; diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index c13e734c82..97008027ec 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/src/chart_types/xy_chart/utils/specs.ts @@ -253,7 +253,7 @@ export interface SeriesSpec extends Spec { * The name of the spec. Also a mechanism to provide custom series names. */ name?: SeriesNameAccessor; - /** The ID of the spec group, generated via getGroupId method + /** The ID of the spec group * @default __global__ */ groupId: string; @@ -475,7 +475,7 @@ export interface AxisSpec extends Spec { id: AxisId; /** Style options for grid line */ gridLineStyle?: GridLineConfig; - /** The ID of the axis group, generated via getGroupId method + /** The ID of the axis group * @default __global__ */ groupId: GroupId; @@ -534,19 +534,30 @@ 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; - /** Data values defined with value, details, and header */ - dataValues: LineAnnotationDatum[]; - /** Custom line styles */ - style?: Partial; /** Custom marker */ marker?: JSX.Element; /** @@ -569,55 +580,85 @@ export type LineAnnotationSpec = BaseAnnotationSpec & { zIndex?: number; }; +/** + * The descriptive object of a rectangular annotation + */ export interface RectAnnotationDatum { + /** + * The coordinates for the 4 rectangle points. + */ coordinates: { + /** + * The minuimum value on the x axis. If undefined, the minuimum value of the x domain will be used. + */ x0?: any; + /** + * The maximum value on the x axis. If undefined, the maximum value of the x domain will be used. + */ x1?: any; + /** + * The minimum value on the y axis. If undefined, the minimum value of the y domain will be used. + */ y0?: any; + /** + * The maximum value on the y axis. If undefined, the maximum value of the y domain will be used. + */ y1?: any; }; + /** + * A textual description of the annotation + */ details?: string; } -export type RectAnnotationSpec = BaseAnnotationSpec & { - annotationType: typeof AnnotationTypes.Rectangle; +export type RectAnnotationSpec = BaseAnnotationSpec< + typeof AnnotationTypes.Rectangle, + RectAnnotationDatum, + RectAnnotationStyle +> & { /** Custom rendering function for tooltip */ renderTooltip?: AnnotationTooltipFormatter; - /** Data values defined with coordinates and details */ - dataValues: RectAnnotationDatum[]; - /** Custom annotation style */ - style?: Partial; /** z-index of the annotation relative to other elements in the chart * @default -1 */ zIndex?: number; }; -export interface BaseAnnotationSpec extends Spec { +export interface BaseAnnotationSpec< + T extends typeof AnnotationTypes.Rectangle | typeof AnnotationTypes.Line, + D extends RectAnnotationDatum | LineAnnotationDatum, + S extends RectAnnotationStyle | LineAnnotationStyle +> 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 * @default __global__ */ groupId: GroupId; // defaults to __global__; needed for yDomain position - /** Data values defined with coordinates and details */ - dataValues: AnnotationDatum[]; - /** Custom annotation style */ - style?: Partial; - /** Toggles tooltip annotation visibility */ + /** + * Data values defined with coordinates and details + */ + dataValues: D[]; + /** + * Custom annotation style + */ + style?: Partial; + /** + * 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; } -export type AnnotationDatum = LineAnnotationDatum | RectAnnotationDatum; -export type AnnotationStyle = LineAnnotationStyle | RectAnnotationStyle; - -// TODO: TextAnnotationSpec export type AnnotationSpec = LineAnnotationSpec | RectAnnotationSpec; export function isLineAnnotation(spec: AnnotationSpec): spec is LineAnnotationSpec { diff --git a/src/index.ts b/src/index.ts index 556a7b7d6d..17f4622606 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,41 +1,19 @@ +// 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'; -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'; + +export { SpecId, GroupId, AxisId, AnnotationId } from './utils/ids'; + +// 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 +24,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.ts b/src/mocks/series/series.ts index b5a1ab39d2..214030473c 100644 --- a/src/mocks/series/series.ts +++ b/src/mocks/series/series.ts @@ -1,7 +1,6 @@ import { shuffle } from 'lodash'; import { mergePartial } from '../../utils/commons'; -import { getSpecId } from '../..'; import { DataSeries, DataSeriesDatum, @@ -13,7 +12,7 @@ import { FullDataSeriesDatum, WithIndex } from '../../chart_types/xy_chart/utils export class MockDataSeries { private static readonly base: DataSeries = { - specId: getSpecId('spec1'), + specId: 'spec1', seriesKeys: ['spec1'], yAccessor: 'y', splitAccessors: new Map(), @@ -49,7 +48,7 @@ export class MockDataSeries { export class MockRawDataSeries { private static readonly base: RawDataSeries = { - specId: getSpecId('spec1'), + specId: 'spec1', seriesKeys: ['spec1'], yAccessor: 'y', splitAccessors: new Map(), 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/src/mocks/specs/specs.ts b/src/mocks/specs/specs.ts index e8437b427a..ea4e0584ea 100644 --- a/src/mocks/specs/specs.ts +++ b/src/mocks/specs/specs.ts @@ -10,7 +10,6 @@ import { BasicSeriesSpec, SeriesTypes, } from '../../chart_types/xy_chart/utils/specs'; -import { getSpecId, getGroupId } from '../../utils/ids'; import { ScaleType } from '../../scales'; import { ChartTypes } from '../../chart_types'; import { SettingsSpec, SpecTypes, TooltipType } from '../../specs'; @@ -20,9 +19,9 @@ export class MockSeriesSpec { private static readonly barBase: BarSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec1'), + id: 'spec1', seriesType: SeriesTypes.Bar, - groupId: getGroupId(DEFAULT_GLOBAL_ID), + groupId: DEFAULT_GLOBAL_ID, xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, xAccessor: 'x', @@ -38,9 +37,9 @@ export class MockSeriesSpec { private static readonly histogramBarBase: HistogramBarSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec1'), + id: 'spec1', seriesType: SeriesTypes.Bar, - groupId: getGroupId(DEFAULT_GLOBAL_ID), + groupId: DEFAULT_GLOBAL_ID, xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, xAccessor: 'x', @@ -54,9 +53,9 @@ export class MockSeriesSpec { private static readonly areaBase: AreaSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec1'), + id: 'spec1', seriesType: SeriesTypes.Area, - groupId: getGroupId(DEFAULT_GLOBAL_ID), + groupId: DEFAULT_GLOBAL_ID, xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, xAccessor: 'x', @@ -70,9 +69,9 @@ export class MockSeriesSpec { private static readonly lineBase: LineSeriesSpec = { chartType: ChartTypes.XYAxis, specType: SpecTypes.Series, - id: getSpecId('spec1'), + id: 'spec1', seriesType: SeriesTypes.Line, - groupId: getGroupId(DEFAULT_GLOBAL_ID), + groupId: DEFAULT_GLOBAL_ID, xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, xAccessor: 'x', diff --git a/src/utils/ids.test.ts b/src/utils/ids.test.ts index 79c1e53e74..df4fd4aaec 100644 --- a/src/utils/ids.test.ts +++ b/src/utils/ids.test.ts @@ -1,11 +1,11 @@ -import { AnnotationId, AxisId, getAnnotationId, getAxisId, getGroupId, GroupId } from './ids'; +import { AnnotationId, AxisId, GroupId } from './ids'; describe('IDs', () => { test('ids should differ depending on entity', () => { - const axisId1 = getAxisId('axisId1'); - const axisId2 = getAxisId('axisId2'); - const groupId1 = getGroupId('groupId'); - const groupId2 = getGroupId('groupId'); + const axisId1 = 'axisId1'; + const axisId2 = 'axisId2'; + const groupId1 = 'groupId'; + const groupId2 = 'groupId'; const axisSeries: Map = new Map(); axisSeries.set(axisId1, 'data1'); axisSeries.set(axisId2, 'data2'); @@ -22,8 +22,8 @@ describe('IDs', () => { expect(expectedGroupSeries).toEqual([...groupSeries]); }); test('should be able to identify annotations', () => { - const annotationId1 = getAnnotationId('anno1'); - const annotationId2 = getAnnotationId('anno2'); + const annotationId1 = 'anno1'; + const annotationId2 = 'anno2'; const annotations = new Map(); annotations.set(annotationId1, 'annotations 1'); diff --git a/src/utils/ids.ts b/src/utils/ids.ts index e86a47c69d..c955f7d4e0 100644 --- a/src/utils/ids.ts +++ b/src/utils/ids.ts @@ -1,16 +1,3 @@ -export function getGroupId(id: string): string { - return id; -} -export function getAxisId(id: string): string { - return id; -} -export function getSpecId(id: string): string { - return id; -} -export function getAnnotationId(id: string): string { - return id; -} - export type GroupId = string; export type AxisId = string; export type SpecId = string; 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); diff --git a/wiki/overview.md b/wiki/overview.md index 4d54bca087..9a5aa45620 100644 --- a/wiki/overview.md +++ b/wiki/overview.md @@ -114,11 +114,11 @@ These datasets can be used as input for any type of chart specification. These a ```ts export interface SeriesSpec { - /** The ID of the spec, generated via getSpecId method */ + /** The ID of the spec */ id: SpecId; /** The name or label of the spec */ name?: string; - /** The ID of the spec group, generated via getGroupId method + /** The ID of the spec group * @default __global__ */ groupId: GroupId;