Skip to content

Commit

Permalink
fix(exports): fix missing exports for annotations (#166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 authored Apr 12, 2019
1 parent 3d0a897 commit fe28afb
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 93 deletions.
4 changes: 2 additions & 2 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export * from './specs';
export { Chart } from './components/chart';
export { TooltipType } from './lib/utils/interactions';
export { getAxisId, getGroupId, getSpecId } from './lib/utils/ids';
export { getAxisId, getGroupId, getSpecId, getAnnotationId } from './lib/utils/ids';
export { ScaleType } from './lib/utils/scales/scales';
export { Position, Rendering, Rotation } from './lib/series/specs';
export * from './lib/themes/theme';
Expand All @@ -12,4 +12,4 @@ export { CurveType } from './lib/series/curves';
export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters';
export { DataGenerator } from './utils/data_generators/data_generator';
export { DataSeriesColorsValues } from './lib/series/series';
export { CustomSeriesColorsMap } from './lib/series/specs';
export { CustomSeriesColorsMap, AnnotationDatum, AnnotationDomainTypes } from './lib/series/specs';
171 changes: 82 additions & 89 deletions stories/annotations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@ import { array, boolean, color, number, select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import {
AnnotationDatum,
AnnotationDomainTypes,
Axis,
BarSeries,
Chart,
getAnnotationId,
getAxisId,
getSpecId,
LineAnnotation,
Position,
Rotation,
ScaleType,
Settings,
timeFormatter,
} from '../src';
import {
AnnotationDatum,
AnnotationDomainTypes,
Position,
} from '../src/lib/series/specs';
import { KIBANA_METRICS } from '../src/lib/series/utils/test_dataset_kibana';
import { getAnnotationId, getAxisId } from '../src/lib/utils/ids';

const dateFormatter = timeFormatter('HH:mm:ss');

Expand All @@ -27,7 +27,11 @@ function generateAnnotationData(values: any[]): AnnotationDatum[] {
}

function generateTimeAnnotationData(values: any[]): AnnotationDatum[] {
return values.map((value, index) => ({ dataValue: value, details: `detail-${index}`, header: dateFormatter(value) }));
return values.map((value, index) => ({
dataValue: value,
details: `detail-${index}`,
header: dateFormatter(value),
}));
}

storiesOf('Annotations', module)
Expand All @@ -50,12 +54,16 @@ storiesOf('Annotations', module)
},
};

const chartRotation = select('chartRotation', {
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
}, 0);
const chartRotation = select<Rotation>(
'chartRotation',
{
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
},
0,
);

const isBottom = boolean('x domain axis is bottom', true);
const axisPosition = isBottom ? Position.Bottom : Position.Top;
Expand All @@ -68,18 +76,10 @@ storiesOf('Annotations', module)
domainType={AnnotationDomainTypes.XDomain}
dataValues={dataValues}
style={style}
marker={(<EuiIcon type="alert" />)}
/>
<Axis
id={getAxisId('horizontal')}
position={axisPosition}
title={'x-domain axis'}
/>
<Axis
id={getAxisId('vertical')}
title={'y-domain axis'}
position={Position.Left}
marker={<EuiIcon type="alert" />}
/>
<Axis id={getAxisId('horizontal')} position={axisPosition} title={'x-domain axis'} />
<Axis id={getAxisId('vertical')} title={'y-domain axis'} position={Position.Left} />
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
Expand All @@ -95,12 +95,16 @@ storiesOf('Annotations', module)
.add('basic xDomain ordinal', () => {
const dataValues = generateAnnotationData(array('annotation values', ['a', 'c']));

const chartRotation = select('chartRotation', {
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
}, 0);
const chartRotation = select<Rotation>(
'chartRotation',
{
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
},
0,
);

return (
<Chart renderer="canvas" className={'story-chart'}>
Expand All @@ -109,23 +113,15 @@ storiesOf('Annotations', module)
annotationId={getAnnotationId('anno_1')}
domainType={AnnotationDomainTypes.XDomain}
dataValues={dataValues}
marker={(<EuiIcon type="alert" />)}
/>
<Axis
id={getAxisId('top')}
position={Position.Top}
title={'x-domain axis (top)'}
marker={<EuiIcon type="alert" />}
/>
<Axis id={getAxisId('top')} position={Position.Top} title={'x-domain axis (top)'} />
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
title={'x-domain axis (bottom)'}
/>
<Axis
id={getAxisId('left')}
title={'y-domain axis'}
position={Position.Left}
/>
<Axis id={getAxisId('left')} title={'y-domain axis'} position={Position.Left} />
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Ordinal}
Expand All @@ -142,12 +138,16 @@ storiesOf('Annotations', module)
const data = array('data values', [3.5, 7.2]);
const dataValues = generateAnnotationData(data);

const chartRotation = select('chartRotation', {
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
}, 0);
const chartRotation = select<Rotation>(
'chartRotation',
{
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
},
0,
);

const isLeft = boolean('y-domain axis is Position.Left', true);
const axisTitle = isLeft ? 'y-domain axis (left)' : 'y-domain axis (right)';
Expand All @@ -160,18 +160,10 @@ storiesOf('Annotations', module)
annotationId={getAnnotationId('anno_')}
domainType={AnnotationDomainTypes.YDomain}
dataValues={dataValues}
marker={(<EuiIcon type="alert" />)}
/>
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
title={'x-domain axis'}
/>
<Axis
id={getAxisId('left')}
title={axisTitle}
position={axisPosition}
marker={<EuiIcon type="alert" />}
/>
<Axis id={getAxisId('bottom')} position={Position.Bottom} title={'x-domain axis'} />
<Axis id={getAxisId('left')} title={axisTitle} position={axisPosition} />
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
Expand All @@ -185,15 +177,24 @@ storiesOf('Annotations', module)
);
})
.add('time series', () => {
const dataValues =
generateTimeAnnotationData([1551438150000, 1551438180000, 1551438390000, 1551438450000, 1551438480000]);
const dataValues = generateTimeAnnotationData([
1551438150000,
1551438180000,
1551438390000,
1551438450000,
1551438480000,
]);

const chartRotation = select('chartRotation', {
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
}, 0);
const chartRotation = select<Rotation>(
'chartRotation',
{
'0 deg': 0,
'90 deg': 90,
'-90 deg': -90,
'180 deg': 180,
},
0,
);

return (
<Chart renderer="canvas" className={'story-chart'}>
Expand All @@ -202,19 +203,15 @@ storiesOf('Annotations', module)
annotationId={getAnnotationId('anno_1')}
domainType={AnnotationDomainTypes.XDomain}
dataValues={dataValues}
marker={(<EuiIcon type="alert" />)}
marker={<EuiIcon type="alert" />}
/>
<Axis
id={getAxisId('bottom')}
position={Position.Bottom}
title={'x-domain axis'}
tickFormat={dateFormatter}
/>
<Axis
id={getAxisId('left')}
title={'y-domain axis'}
position={Position.Left}
/>
<Axis id={getAxisId('left')} title={'y-domain axis'} position={Position.Left} />
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
Expand Down Expand Up @@ -248,15 +245,19 @@ storiesOf('Annotations', module)
},
};

const chartRotation = 0;
const chartRotation: Rotation = 0;

const axisPosition = Position.Bottom;

const marker = select('marker icon (examples from EUI)', {
alert: 'alert',
asterisk: 'asterisk',
questionInCircle: 'questionInCircle',
}, 'alert');
const marker = select<'alert' | 'asterisk' | 'questionInCircle'>(
'marker icon (examples from EUI)',
{
alert: 'alert',
asterisk: 'asterisk',
questionInCircle: 'questionInCircle',
},
'alert',
);

const hideLines = boolean('annotation lines hidden', false);
const hideTooltips = boolean('annotation tooltips hidden', false);
Expand All @@ -269,20 +270,12 @@ storiesOf('Annotations', module)
domainType={AnnotationDomainTypes.XDomain}
dataValues={dataValues}
style={style}
marker={(<EuiIcon type={marker} />)}
marker={<EuiIcon type={marker} />}
hideLines={hideLines}
hideTooltips={hideTooltips}
/>
<Axis
id={getAxisId('horizontal')}
position={axisPosition}
title={'x-domain axis'}
/>
<Axis
id={getAxisId('vertical')}
title={'y-domain axis'}
position={Position.Left}
/>
<Axis id={getAxisId('horizontal')} position={axisPosition} title={'x-domain axis'} />
<Axis id={getAxisId('vertical')} title={'y-domain axis'} position={Position.Left} />
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
Expand Down
10 changes: 8 additions & 2 deletions stories/interactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ import {
getSpecId,
LIGHT_THEME,
LineSeries,
niceTimeFormatByDay,
niceTimeFormatter,
Position,
Rotation,
ScaleType,
Settings,
timeFormatter,
TooltipType,
} from '../src/';

Expand All @@ -24,7 +27,6 @@ import { DateTime } from 'luxon';
import { switchTheme } from '../.storybook/theme_service';
import { BARCHART_2Y2G } from '../src/lib/series/utils/test_dataset';
import { KIBANA_METRICS } from '../src/lib/series/utils/test_dataset_kibana';
import { niceTimeFormatByDay, timeFormatter } from '../src/utils/data/formatters';

const onElementListeners = {
onElementClick: action('onElementClick'),
Expand Down Expand Up @@ -557,7 +559,11 @@ storiesOf('Interactions', module)
const className = darkmode ? 'story-chart-dark' : 'story-chart';
const defaultTheme = darkmode ? DARK_THEME : LIGHT_THEME;
switchTheme(darkmode ? 'dark' : 'light');
const chartRotation = select('rotation', { '90': 90, '0': 0, '-90': -90, '180': 180 }, 0);
const chartRotation = select<Rotation>(
'rotation',
{ '90': 90, '0': 0, '-90': -90, '180': 180 },
0,
);
const numberFormatter = (d: any) => Number(d).toFixed(2);

return (
Expand Down

0 comments on commit fe28afb

Please sign in to comment.