github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update dependency @elastic/charts to v16.0.2 (#52619) (#53978)

Browse source
This commit is contained in:
Marco Vettorello 2020-01-04 18:11:35 +01:00 • committed by GitHub
parent 43edc78140
commit b4f5d890bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 247 additions and 601 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -86,6 +86,7 @@
"**/isomorphic-git/**/base64-js": "^1.2.1",
"**/image-diff/gm/debug": "^2.6.9",
"**/react-dom": "^16.12.0",
"**/react": "^16.12.0",
"**/react-test-renderer": "^16.12.0",
"**/deepmerge": "^4.2.2",
"**/serialize-javascript": "^2.1.1"
@ -110,7 +111,7 @@
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/register": "^7.7.0",
"@elastic/charts": "^14.0.0",
"@elastic/charts": "^16.0.2",
"@elastic/datemath": "5.0.2",
"@elastic/ems-client": "1.0.5",
"@elastic/eui": "17.3.1",

13
src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
View file

@ -30,9 +30,6 @@ import {
Chart,
HistogramBarSeries,
GeometryValue,
getAnnotationId,
getAxisId,
getSpecId,
LineAnnotation,
Position,
ScaleType,
@ -237,20 +234,20 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
theme={chartsTheme}
/>
<Axis
id={getAxisId('discover-histogram-left-axis')}
id="discover-histogram-left-axis"
position={Position.Left}
ticks={5}
title={chartData.yAxisLabel}
/>
<Axis
id={getAxisId('discover-histogram-bottom-axis')}
id="discover-histogram-bottom-axis"
position={Position.Bottom}
title={chartData.xAxisLabel}
tickFormat={this.formatXValue}
ticks={10}
/>
<LineAnnotation
annotationId={getAnnotationId('line-annotation')}
id="line-annotation"
domainType={AnnotationDomainTypes.XDomain}
dataValues={lineAnnotationData}
hideTooltips={true}
@ -258,13 +255,13 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
/>
<RectAnnotation
dataValues={rectAnnotations}
annotationId={getAnnotationId('rect-annotation')}
id="rect-annotation"
zIndex={2}
style={rectAnnotationStyle}
hideTooltips={true}
/>
<HistogramBarSeries
id={getSpecId('discover-histogram')}
id="discover-histogram"
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor="x"

3
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/__mocks__/@elastic/charts.js
View file

@ -38,8 +38,5 @@ export const ScaleType = {
Time: 'time',
};
export const getSpecId = x => `id:${x}`;
export const getGroupId = x => `groupId:${x}`;
export const BarSeries = () => null;
export const AreaSeries = () => null;

13
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap generated
View file

@ -24,12 +24,9 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/
}
curve={9}
customSeriesColors={
Map {
Object {
"colorValues": Array [],
"specId": "id:61ca57f1-469d-11e7-af02-69e470af7417:Rome",
} => "rgb(0, 156, 224)",
}
Array [
"rgb(0, 156, 224)",
]
}
data={
Array [
@ -44,10 +41,10 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/
]
}
enableHistogramMode={true}
groupId="groupId:yaxis_main_group"
groupId="yaxis_main_group"
hideInLegend={false}
histogramModeAlignment="center"
id="id:61ca57f1-469d-11e7-af02-69e470af7417:Rome"
id="61ca57f1-469d-11e7-af02-69e470af7417:Rome"
name="Rome"
stackAsPercentage={false}
timeZone="local"

13
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap generated
View file

@ -16,12 +16,9 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/
}
}
customSeriesColors={
Map {
Object {
"colorValues": Array [],
"specId": "id:61ca57f1-469d-11e7-af02-69e470af7417:Rome",
} => "rgb(0, 156, 224)",
}
Array [
"rgb(0, 156, 224)",
]
}
data={
Array [
@ -36,10 +33,10 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/
]
}
enableHistogramMode={true}
groupId="groupId:yaxis_main_group"
groupId="yaxis_main_group"
hideInLegend={false}
histogramModeAlignment="center"
id="id:61ca57f1-469d-11e7-af02-69e470af7417:Rome"
id="61ca57f1-469d-11e7-af02-69e470af7417:Rome"
name="Rome"
stackAsPercentage={false}
timeZone="local"

10
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js
View file

@ -18,8 +18,8 @@
*/
import React from 'react';
import { getSpecId, getGroupId, ScaleType, AreaSeries } from '@elastic/charts';
import { getSeriesColors, getAreaStyles } from '../utils/series_styles';
import { ScaleType, AreaSeries } from '@elastic/charts';
import { getAreaStyles } from '../utils/series_styles';
import { ChartsEntities } from '../model/charts';
import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
@ -41,9 +41,9 @@ export function AreaSeriesDecorator({
useDefaultGroupDomain,
sortIndex,
}) {
const id = getSpecId(seriesId);
const groupId = getGroupId(seriesGroupId);
const customSeriesColors = getSeriesColors(color, id);
const id = seriesId;
const groupId = seriesGroupId;
const customSeriesColors = [color];
const areaSeriesStyle = getAreaStyles({ points, lines, color });
const seriesSettings = {

10
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
View file

@ -18,8 +18,8 @@
*/
import React from 'react';
import { getSpecId, getGroupId, ScaleType, BarSeries } from '@elastic/charts';
import { getSeriesColors, getBarStyles } from '../utils/series_styles';
import { ScaleType, BarSeries } from '@elastic/charts';
import { getBarStyles } from '../utils/series_styles';
import { ChartsEntities } from '../model/charts';
import { X_ACCESSOR_INDEX, Y_ACCESSOR_INDEXES } from '../../../constants';
@ -40,9 +40,9 @@ export function BarSeriesDecorator({
useDefaultGroupDomain,
sortIndex,
}) {
const id = getSpecId(seriesId);
const groupId = getGroupId(seriesGroupId);
const customSeriesColors = getSeriesColors(color, id);
const id = seriesId;
const groupId = seriesGroupId;
const customSeriesColors = [color];
const barSeriesStyle = getBarStyles(bars, color);
const seriesSettings = {

15
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
View file

@ -25,11 +25,8 @@ import {
Chart,
Position,
Settings,
getAxisId,
getGroupId,
DARK_THEME,
LIGHT_THEME,
getAnnotationId,
AnnotationDomainTypes,
LineAnnotation,
TooltipType,
@ -75,7 +72,7 @@ export const TimeSeries = ({
const chartRef = useRef();
const updateCursor = (_, cursor) => {
if (chartRef.current) {
chartRef.current.dispatchExternalCursorEvent(cursor);
chartRef.current.dispatchExternalPointerEvent(cursor);
}
};
@ -99,7 +96,7 @@ export const TimeSeries = ({
legendPosition={legendPosition}
onBrushEnd={onBrush}
animateData={false}
onCursorUpdate={handleCursorUpdate}
onPointerUpdate={handleCursorUpdate}
theme={
hasBarChart
? {}
@ -126,7 +123,7 @@ export const TimeSeries = ({
return (
<LineAnnotation
key={id}
annotationId={getAnnotationId(id)}
id={id}
domainType={AnnotationDomainTypes.XDomain}
dataValues={dataValues}
marker={<EuiIcon type={ICON_TYPES_MAP[icon] || 'asterisk'} />}
@ -213,8 +210,8 @@ export const TimeSeries = ({
{yAxis.map(({ id, groupId, position, tickFormatter, domain, hide }) => (
<Axis
key={groupId}
groupId={getGroupId(groupId)}
id={getAxisId(id)}
groupId={groupId}
id={id}
position={position}
domain={domain}
hide={hide}
@ -225,7 +222,7 @@ export const TimeSeries = ({
))}
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
title={xAxisLabel}
tickFormat={xAxisFormatter}

9
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/utils/__snapshots__/series_styles.test.js.snap generated
View file

@ -79,12 +79,3 @@ Object {
},
}
`;
exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/utils/series_styles.js getSeriesColors() should match a snapshot 1`] = `
Map {
Object {
"colorValues": Array [],
"specId": "IT",
} => "rgb(224, 0, 221)",
}
`;

9
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/utils/series_styles.js
View file

@ -56,12 +56,3 @@ export const getBarStyles = ({ show = true, lineWidth = 0, fill = 1 }, color) =>
},
},
});
export const getSeriesColors = (color, specId) => {
const map = new Map();
const seriesColorsValues = { specId, colorValues: [] };
map.set(seriesColorsValues, color);
return map;
};

10
src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/utils/series_styles.test.js
View file

@ -17,12 +17,11 @@
* under the License.
*/
import { getBarStyles, getSeriesColors, getAreaStyles } from './series_styles';
import { getBarStyles, getAreaStyles } from './series_styles';
describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/utils/series_styles.js', () => {
let bars;
let color;
let specId;
let points;
let lines;
@ -33,7 +32,6 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
show: true,
};
color = 'rgb(224, 0, 221)';
specId = 'IT';
points = {
lineWidth: 1,
show: true,
@ -60,12 +58,6 @@ describe('src/legacy/core_plugins/metrics/public/visualizations/views/timeseries
});
});
describe('getSeriesColors()', () => {
test('should match a snapshot', () => {
expect(getSeriesColors(color, specId)).toMatchSnapshot();
});
});
describe('getAreaStyles()', () => {
test('should match a snapshot', () => {
expect(getAreaStyles({ points, lines, color })).toMatchSnapshot();

2
test/functional/services/elastic_chart.ts
View file

@ -37,7 +37,7 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
public async getVisualizationRenderingCount(dataTestSubj: string) {
const chart = await testSubjects.find(dataTestSubj);
const visContainer = await chart.findByCssSelector('.echChart');
const visContainer = await chart.findByCssSelector('.echChartStatus');
const renderingCount = await visContainer.getAttribute('data-ech-render-count');
return Number(renderingCount);
}

14
x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart.tsx
View file

@ -6,15 +6,7 @@
import React, { useCallback, useMemo } from 'react';
import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import {
Axis,
Chart,
getAxisId,
niceTimeFormatter,
Position,
Settings,
TooltipValue,
} from '@elastic/charts';
import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
import { first, last } from 'lodash';
import moment from 'moment';
import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
@ -138,13 +130,13 @@ export const MetricsExplorerChart = ({
/>
))}
<Axis
id={getAxisId('timestamp')}
id={'timestamp'}
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis
id={getAxisId('values')}
id={'values'}
position={Position.Left}
tickFormat={yAxisFormater}
domain={domain}

25
x-pack/legacy/plugins/infra/public/components/metrics_explorer/series_chart.tsx
View file

@ -7,9 +7,6 @@
import React from 'react';
import {
ScaleType,
getSpecId,
DataSeriesColorsValues,
CustomSeriesColorsMap,
AreaSeries,
BarSeries,
RecursivePartial,
@ -45,13 +42,6 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr
colorTransformer(MetricsExplorerColor.color0);
const yAccessor = `metric_${id}`;
const specId = getSpecId(yAccessor);
const colors: DataSeriesColorsValues = {
colorValues: [],
specId,
};
const customColors: CustomSeriesColorsMap = new Map();
customColors.set(colors, color);
const chartId = `series-${series.id}-${yAccessor}`;
const seriesAreaStyle: RecursivePartial<AreaSeriesStyle> = {
@ -66,8 +56,8 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr
};
return (
<AreaSeries
id={yAccessor}
key={chartId}
id={specId}
name={createMetricLabel(metric)}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
@ -76,7 +66,7 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr
data={series.rows}
stackAccessors={stack ? ['timestamp'] : void 0}
areaSeriesStyle={seriesAreaStyle}
customSeriesColors={customColors}
customSeriesColors={[color]}
/>
);
};
@ -87,13 +77,6 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) =>
colorTransformer(MetricsExplorerColor.color0);
const yAccessor = `metric_${id}`;
const specId = getSpecId(yAccessor);
const colors: DataSeriesColorsValues = {
colorValues: [],
specId,
};
const customColors: CustomSeriesColorsMap = new Map();
customColors.set(colors, color);
const chartId = `series-${series.id}-${yAccessor}`;
const seriesBarStyle: RecursivePartial<BarSeriesStyle> = {
@ -108,8 +91,8 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) =>
};
return (
<BarSeries
id={yAccessor}
key={chartId}
id={specId}
name={createMetricLabel(metric)}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
@ -118,7 +101,7 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) =>
data={series.rows}
stackAccessors={stack ? ['timestamp'] : void 0}
barSeriesStyle={seriesBarStyle}
customSeriesColors={customColors}
customSeriesColors={[color]}
/>
);
};

21
x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx
View file

@ -9,14 +9,11 @@ import {
Axis,
BarSeries,
Chart,
getAxisId,
getSpecId,
niceTimeFormatter,
Settings,
TooltipValue,
LIGHT_THEME,
DARK_THEME,
getAnnotationId,
RectAnnotation,
} from '@elastic/charts';
import numeral from '@elastic/numeral';
@ -44,7 +41,7 @@ export const AnomaliesChart: React.FunctionComponent<{
[timeRange]
);
const logEntryRateSpecId = getSpecId('averageValues');
const logEntryRateSpecId = 'averageValues';
const tooltipProps = useMemo(
() => ({
@ -67,13 +64,13 @@ export const AnomaliesChart: React.FunctionComponent<{
<div style={{ height: 160, width: '100%' }}>
<Chart className="log-entry-rate-chart">
<Axis
id={getAxisId('timestamp')}
id="timestamp"
position="bottom"
showOverlappingTicks
tickFormat={chartDateFormatter}
/>
<Axis
id={getAxisId('values')}
id="values"
position="left"
tickFormat={value => numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
/>
@ -102,7 +99,7 @@ export const AnomaliesChart: React.FunctionComponent<{
};
interface SeverityConfig {
annotationId: AnnotationId;
id: AnnotationId;
style: {
fill: string;
opacity: number;
@ -111,19 +108,19 @@ interface SeverityConfig {
const severityConfigs: Record<string, SeverityConfig> = {
warning: {
annotationId: getAnnotationId(`anomalies-warning`),
id: `anomalies-warning`,
style: { fill: 'rgb(125, 180, 226)', opacity: 0.7 },
},
minor: {
annotationId: getAnnotationId(`anomalies-minor`),
id: `anomalies-minor`,
style: { fill: 'rgb(255, 221, 0)', opacity: 0.7 },
},
major: {
annotationId: getAnnotationId(`anomalies-major`),
id: `anomalies-major`,
style: { fill: 'rgb(229, 113, 0)', opacity: 0.7 },
},
critical: {
annotationId: getAnnotationId(`anomalies-critical`),
id: `anomalies-critical`,
style: { fill: 'rgb(228, 72, 72)', opacity: 0.7 },
},
};
@ -138,7 +135,7 @@ const renderAnnotations = (
<RectAnnotation
key={`${chartId}:${entry[0]}`}
dataValues={entry[1]}
annotationId={severityConfigs[entry[0]].annotationId}
id={severityConfigs[entry[0]].id}
style={severityConfigs[entry[0]].style}
renderTooltip={renderAnnotationTooltip}
/>

10
x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx
View file

@ -8,8 +8,6 @@ import {
Axis,
BarSeries,
Chart,
getAxisId,
getSpecId,
niceTimeFormatter,
Settings,
TooltipValue,
@ -37,8 +35,6 @@ export const LogEntryRateBarChart: React.FunctionComponent<{
[timeRange]
);
const logEntryRateSpecId = getSpecId('averageValues');
const tooltipProps = useMemo(
() => ({
headerFormatter: (tooltipData: TooltipValue) =>
@ -61,18 +57,18 @@ export const LogEntryRateBarChart: React.FunctionComponent<{
<div style={{ height: 200, width: '100%' }}>
<Chart className="log-entry-rate-chart">
<Axis
id={getAxisId('timestamp')}
id="timestamp"
position="bottom"
showOverlappingTicks
tickFormat={chartDateFormatter}
/>
<Axis
id={getAxisId('values')}
id="values"
position="left"
tickFormat={value => numeral(value.toPrecision(3)).format('0[.][00]a')} // https://github.com/adamwdraper/Numeral-js/issues/194
/>
<BarSeries
id={logEntryRateSpecId}
id="averageValues"
name={i18n.translate('xpack.infra.logs.analysis.logRateSectionLineSeriesName', {
defaultMessage: 'Log entries per 15 minutes (avg)',
})}

14
x-pack/legacy/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx
View file

@ -6,15 +6,7 @@
import React, { useCallback, useMemo } from 'react';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
import {
Axis,
Chart,
getAxisId,
niceTimeFormatter,
Position,
Settings,
TooltipValue,
} from '@elastic/charts';
import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
import { EuiPageContentBody } from '@elastic/eui';
import { getChartTheme } from '../../../components/metrics_explorer/helpers/get_chart_theme';
import { SeriesChart } from './series_chart';
@ -106,12 +98,12 @@ export const ChartSectionVis = ({
<div className="infrastructureChart" style={{ height: 250, marginBottom: 16 }}>
<Chart>
<Axis
id={getAxisId('timestamp')}
id="timestamp"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis id={getAxisId('values')} position={Position.Left} tickFormat={valueFormatter} />
<Axis id="values" position={Position.Left} tickFormat={valueFormatter} />
{metric &&
metric.series.map(series => (
<SeriesChart

23
x-pack/legacy/plugins/infra/public/pages/metrics/components/series_chart.tsx
View file

@ -9,9 +9,6 @@ import {
AreaSeries,
BarSeries,
ScaleType,
getSpecId,
DataSeriesColorsValues,
CustomSeriesColorsMap,
RecursivePartial,
BarSeriesStyle,
AreaSeriesStyle,
@ -46,15 +43,9 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
visible: true,
},
};
const colors: DataSeriesColorsValues = {
colorValues: [],
specId: getSpecId(id),
};
const customColors: CustomSeriesColorsMap = new Map();
customColors.set(colors, color || '#999');
return (
<AreaSeries
id={getSpecId(id)}
id={id}
name={name}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
@ -62,7 +53,7 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
yAccessors={['value']}
data={series.data}
areaSeriesStyle={style}
customSeriesColors={color ? customColors : void 0}
customSeriesColors={color ? [color] : void 0}
stackAccessors={stack ? ['timestamp'] : void 0}
/>
);
@ -79,15 +70,9 @@ export const BarChart = ({ id, color, series, name, type, stack }: Props) => {
opacity: 1,
},
};
const colors: DataSeriesColorsValues = {
colorValues: [],
specId: getSpecId(id),
};
const customColors: CustomSeriesColorsMap = new Map();
customColors.set(colors, color || '#999');
return (
<BarSeries
id={getSpecId(id)}
id={id}
name={name}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
@ -95,7 +80,7 @@ export const BarChart = ({ id, color, series, name, type, stack }: Props) => {
yAccessors={['value']}
data={series.data}
barSeriesStyle={style}
customSeriesColors={customColors}
customSeriesColors={color ? [color] : void 0}
stackAccessors={stack ? ['timestamp'] : void 0}
/>
);

22
x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
View file

@ -26,9 +26,6 @@ import {
Axis,
BarSeries,
Chart,
DataSeriesColorsValues,
getAxisId,
getSpecId,
niceTimeFormatter,
Position,
ScaleType,
@ -391,18 +388,11 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
}
if (histogram && histogram.buckets.length) {
const specId = getSpecId(
i18n.translate('xpack.lens.indexPattern.fieldStatsCountLabel', {
defaultMessage: 'Count',
})
);
const colors: DataSeriesColorsValues = {
colorValues: [],
specId,
};
const specId = i18n.translate('xpack.lens.indexPattern.fieldStatsCountLabel', {
defaultMessage: 'Count',
});
const expectedColor = getColorForDataType(field.type);
const seriesColors = new Map([[colors, expectedColor]]);
const seriesColors = expectedColor ? [expectedColor] : undefined;
if (field.type === 'date') {
return wrapInPopover(
@ -422,7 +412,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
/>
<Axis
id={getAxisId('key')}
id="key"
position={Position.Bottom}
tickFormat={
fromDate && toDate
@ -450,7 +440,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
<Settings rotation={90} tooltip={{ type: TooltipType.None }} theme={chartTheme} />
<Axis
id={getAxisId('key')}
id="key"
position={Position.Left}
showOverlappingTicks={true}
tickFormat={d => formatter.convert(d)}

56
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap generated
View file

@ -4,7 +4,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={0}
showLegend={false}
@ -130,21 +130,21 @@ exports[`xy_expression XYChart component it renders area 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="left"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-AreaSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -190,7 +190,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={0}
showLegend={false}
@ -316,21 +316,21 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="left"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-BarSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -376,7 +376,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={90}
showLegend={false}
@ -502,21 +502,21 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="left"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-BarSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -562,7 +562,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={0}
showLegend={false}
@ -688,21 +688,21 @@ exports[`xy_expression XYChart component it renders line 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="left"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-LineSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -748,7 +748,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={0}
showLegend={false}
@ -874,21 +874,21 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="left"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-AreaSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -938,7 +938,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={0}
showLegend={false}
@ -1064,21 +1064,21 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="left"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-BarSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {
@ -1128,7 +1128,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
legendPosition="top"
rotation={90}
showLegend={false}
@ -1254,21 +1254,21 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="x"
position="left"
showGridLines={false}
tickFormat={[Function]}
title="c"
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
id="y"
position="bottom"
showGridLines={false}
tickFormat={[Function]}
title=""
/>
<inject-BarSeriesSpecComponent-with-chartStore
<Connect(spec)
data={
Array [
Object {

5
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
View file

@ -447,6 +447,11 @@ describe('xy_expression', () => {
.find(Axis)
.first()
.prop('tickFormat');
if (!tickFormatter) {
throw new Error('tickFormatter prop not found');
}
tickFormatter('I');
expect(convertSpy).toHaveBeenCalledWith('I');

8
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
View file

@ -12,8 +12,6 @@ import {
Settings,
Axis,
LineSeries,
getAxisId,
getSpecId,
AreaSeries,
BarSeries,
Position,
@ -205,7 +203,7 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
/>
<Axis
id={getAxisId('x')}
id="x"
position={shouldRotate ? Position.Left : Position.Bottom}
title={xTitle}
showGridLines={false}
@ -214,7 +212,7 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
/>
<Axis
id={getAxisId('y')}
id="y"
position={shouldRotate ? Position.Bottom : Position.Left}
title={args.yTitle}
showGridLines={false}
@ -260,7 +258,7 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
key: index,
splitSeriesAccessors: sanitized.splitAccessor ? [sanitized.splitAccessor] : [],
stackAccessors: seriesType.includes('stacked') ? [xAccessor] : [],
id: getSpecId(idForLegend),
id: idForLegend,
xAccessor,
yAccessors,
data: sanitized.rows,

8
x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/document_count_chart/document_count_chart.tsx
View file

@ -12,8 +12,6 @@ import {
Axis,
BarSeries,
Chart,
getAxisId,
getSpecId,
niceTimeFormatter,
Position,
ScaleType,
@ -76,14 +74,14 @@ export const DocumentCountChart: FC<Props> = ({
}}
/>
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis id={getAxisId('left')} position={Position.Left} />
<Axis id="left" position={Position.Left} />
<BarSeries
id={getSpecId(SPEC_ID)}
id={SPEC_ID}
name={seriesName}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}

13
x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
View file

@ -13,8 +13,6 @@ import {
Axis,
Chart,
CurveType,
getAxisId,
getSpecId,
Position,
ScaleType,
Settings,
@ -99,18 +97,13 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
tooltip={{ headerFormatter }}
/>
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
tickFormat={d => kibanaFieldFormat(d, fieldFormat)}
/>
<Axis
id={getAxisId('left')}
position={Position.Left}
tickFormat={d => d.toFixed(3)}
hide={true}
/>
<Axis id="left" position={Position.Left} tickFormat={d => d.toFixed(3)} hide={true} />
<AreaSeries
id={getSpecId(SPEC_ID)}
id={SPEC_ID}
name={seriesName}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}

12
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomalies.tsx
View file

@ -11,7 +11,7 @@
*/
import React, { Fragment, FC } from 'react';
import { AnnotationDomainTypes, getAnnotationId, LineAnnotation } from '@elastic/charts';
import { AnnotationDomainTypes, LineAnnotation } from '@elastic/charts';
import { Anomaly } from '../../../../common/results_loader';
import { getSeverityColor } from '../../../../../../../../common/util/anomaly_utils';
import { ANOMALY_THRESHOLD } from '../../../../../../../../common/constants/anomalies';
@ -63,35 +63,35 @@ export const Anomalies: FC<Props> = ({ anomalyData }) => {
return (
<Fragment>
<LineAnnotation
annotationId={getAnnotationId('low')}
id="low"
domainType={AnnotationDomainTypes.XDomain}
dataValues={severities.low}
style={getAnomalyStyle(ANOMALY_THRESHOLD.LOW)}
hideTooltips={true}
/>
<LineAnnotation
annotationId={getAnnotationId('warning')}
id="warning"
domainType={AnnotationDomainTypes.XDomain}
dataValues={severities.warning}
style={getAnomalyStyle(ANOMALY_THRESHOLD.WARNING)}
hideTooltips={true}
/>
<LineAnnotation
annotationId={getAnnotationId('minor')}
id="minor"
domainType={AnnotationDomainTypes.XDomain}
dataValues={severities.minor}
style={getAnomalyStyle(ANOMALY_THRESHOLD.MINOR)}
hideTooltips={true}
/>
<LineAnnotation
annotationId={getAnnotationId('major')}
id="major"
domainType={AnnotationDomainTypes.XDomain}
dataValues={severities.major}
style={getAnomalyStyle(ANOMALY_THRESHOLD.MAJOR)}
hideTooltips={true}
/>
<LineAnnotation
annotationId={getAnnotationId('critical')}
id="critical"
domainType={AnnotationDomainTypes.XDomain}
dataValues={severities.critical}
style={getAnomalyStyle(ANOMALY_THRESHOLD.CRITICAL)}

7
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx
View file

@ -5,8 +5,7 @@
*/
import React, { FC } from 'react';
import { LineSeries, getSpecId, ScaleType, CurveType } from '@elastic/charts';
import { getCustomColor } from '../common/utils';
import { LineSeries, ScaleType, CurveType } from '@elastic/charts';
import { seriesStyle, LINE_COLOR } from '../common/settings';
interface Props {
@ -22,7 +21,7 @@ const lineSeriesStyle = {
export const Line: FC<Props> = ({ chartData }) => {
return (
<LineSeries
id={getSpecId(SPEC_ID)}
id={SPEC_ID}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
@ -31,7 +30,7 @@ export const Line: FC<Props> = ({ chartData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
lineSeriesStyle={lineSeriesStyle}
customSeriesColors={getCustomColor(SPEC_ID, LINE_COLOR)}
customSeriesColors={[LINE_COLOR]}
/>
);
};

7
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx
View file

@ -5,9 +5,8 @@
*/
import React, { FC } from 'react';
import { getSpecId, ScaleType, AreaSeries, CurveType } from '@elastic/charts';
import { ScaleType, AreaSeries, CurveType } from '@elastic/charts';
import { ModelItem } from '../../../../common/results_loader';
import { getCustomColor } from '../common/utils';
import { seriesStyle, MODEL_COLOR } from '../common/settings';
interface Props {
@ -33,7 +32,7 @@ export const ModelBounds: FC<Props> = ({ modelData }) => {
const model = modelData === undefined ? [] : modelData;
return (
<AreaSeries
id={getSpecId(SPEC_ID)}
id={SPEC_ID}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
@ -44,7 +43,7 @@ export const ModelBounds: FC<Props> = ({ modelData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
areaSeriesStyle={areaSeriesStyle}
customSeriesColors={getCustomColor(SPEC_ID, MODEL_COLOR)}
customSeriesColors={[MODEL_COLOR]}
/>
);
};

7
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx
View file

@ -5,8 +5,7 @@
*/
import React, { FC } from 'react';
import { LineSeries, getSpecId, ScaleType, CurveType } from '@elastic/charts';
import { getCustomColor } from '../common/utils';
import { LineSeries, ScaleType, CurveType } from '@elastic/charts';
import { seriesStyle, LINE_COLOR } from '../common/settings';
interface Props {
@ -30,7 +29,7 @@ const scatterSeriesStyle = {
export const Scatter: FC<Props> = ({ chartData }) => {
return (
<LineSeries
id={getSpecId(SPEC_ID)}
id={SPEC_ID}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
@ -39,7 +38,7 @@ export const Scatter: FC<Props> = ({ chartData }) => {
yScaleToDataExtent={false}
curve={CurveType.CURVE_MONOTONE_X}
lineSeriesStyle={scatterSeriesStyle}
customSeriesColors={getCustomColor(SPEC_ID, LINE_COLOR)}
customSeriesColors={[LINE_COLOR]}
/>
);
};

11
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/axes.tsx
View file

@ -5,7 +5,7 @@
*/
import React, { FC, Fragment } from 'react';
import { Axis, getAxisId, Position, timeFormatter, niceTimeFormatByDay } from '@elastic/charts';
import { Axis, Position, timeFormatter, niceTimeFormatByDay } from '@elastic/charts';
import { getYRange } from './utils';
import { LineChartPoint } from '../../../../common/chart_loader';
@ -26,17 +26,12 @@ export const Axes: FC<Props> = ({ chartData }) => {
return (
<Fragment>
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis
id={getAxisId('left')}
position={Position.Left}
tickFormat={tickFormatter}
domain={yDomain}
/>
<Axis id="left" position={Position.Left} tickFormat={tickFormatter} domain={yDomain} />
</Fragment>
);
};

11
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/utils.ts
View file

@ -3,17 +3,6 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { getSpecId, CustomSeriesColorsMap, DataSeriesColorsValues } from '@elastic/charts';
export function getCustomColor(specId: string, color: string): CustomSeriesColorsMap {
const lineDataSeriesColorValues: DataSeriesColorsValues = {
colorValues: [],
specId: getSpecId(specId),
};
return new Map([[lineDataSeriesColorValues, color]]);
}
export function getYRange(chartData: any[]) {
if (chartData.length === 0) {
return { min: 0, max: 0 };

9
x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
View file

@ -5,9 +5,8 @@
*/
import React, { FC } from 'react';
import { BarSeries, Chart, getSpecId, ScaleType, Settings, TooltipType } from '@elastic/charts';
import { BarSeries, Chart, ScaleType, Settings, TooltipType } from '@elastic/charts';
import { Axes } from '../common/axes';
import { getCustomColor } from '../common/utils';
import { LineChartPoint } from '../../../../common/chart_loader';
import { EVENT_RATE_COLOR } from '../common/settings';
import { LoadingWrapper } from '../loading_wrapper';
@ -20,8 +19,6 @@ interface Props {
loading?: boolean;
}
const SPEC_ID = 'event_rate';
export const EventRateChart: FC<Props> = ({
eventRateChartData,
height,
@ -40,13 +37,13 @@ export const EventRateChart: FC<Props> = ({
<Settings tooltip={TooltipType.None} />
<BarSeries
id={getSpecId('event_rate')}
id="event_rate"
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={'time'}
yAccessors={['value']}
data={eventRateChartData}
customSeriesColors={getCustomColor(SPEC_ID, EVENT_RATE_COLOR)}
customSeriesColors={[EVENT_RATE_COLOR]}
/>
</Chart>
</LoadingWrapper>

14
x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
View file

@ -9,8 +9,6 @@ import {
Axis,
AreaSeries,
Chart,
getAxisId,
getSpecId,
Position,
ScaleType,
Settings,
@ -26,7 +24,6 @@ import {
ChartSeriesData,
getChartHeight,
getChartWidth,
getSeriesStyle,
WrappedByAutoSizer,
useTheme,
useBrowserTimeZone,
@ -77,8 +74,8 @@ export const AreaChartBaseComponent = ({
const timeZone = useBrowserTimeZone();
const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
const xAxisId = getAxisId(`group-${data[0].key}-x`);
const yAxisId = getAxisId(`group-${data[0].key}-y`);
const xAxisId = `group-${data[0].key}-x`;
const yAxisId = `group-${data[0].key}-y`;
const settings = {
...chartDefaultSettings,
theme,
@ -90,20 +87,19 @@ export const AreaChartBaseComponent = ({
<Settings {...settings} />
{data.map(series => {
const seriesKey = series.key;
const seriesSpecId = getSpecId(seriesKey);
return checkIfAllTheDataInTheSeriesAreValid(series) ? (
<AreaSeries
id={seriesSpecId}
id={seriesKey}
key={seriesKey}
name={series.key.replace('Histogram', '')}
data={series.value || undefined}
data={series.value || []}
xScaleType={getOr(ScaleType.Linear, 'configs.series.xScaleType', chartConfigs)}
yScaleType={getOr(ScaleType.Linear, 'configs.series.yScaleType', chartConfigs)}
timeZone={timeZone}
xAccessor="x"
yAccessors={['y']}
areaSeriesStyle={getSeriesLineStyle()}
customSeriesColors={getSeriesStyle(seriesKey, series.color)}
customSeriesColors={series.color ? [series.color] : undefined}
/>
) : null;
})}

23
x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
View file

@ -5,16 +5,7 @@
*/
import React from 'react';
import {
Chart,
BarSeries,
Axis,
Position,
getAxisId,
getSpecId,
ScaleType,
Settings,
} from '@elastic/charts';
import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
import { getOr, get, isNumber } from 'lodash/fp';
import { AutoSizer } from '../auto_sizer';
import { ChartPlaceHolder } from './chart_place_holder';
@ -25,8 +16,6 @@ import {
checkIfAllValuesAreZero,
getChartHeight,
getChartWidth,
getSeriesStyle,
SeriesType,
WrappedByAutoSizer,
useBrowserTimeZone,
useTheme,
@ -59,8 +48,8 @@ export const BarChartBaseComponent = ({
const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
const tickSize = getOr(0, 'configs.axis.tickSize', chartConfigs);
const xAxisId = getAxisId(`stat-items-barchart-${data[0].key}-x`);
const yAxisId = getAxisId(`stat-items-barchart-${data[0].key}-y`);
const xAxisId = `stat-items-barchart-${data[0].key}-x`;
const yAxisId = `stat-items-barchart-${data[0].key}-y`;
const settings = {
...chartDefaultSettings,
theme,
@ -72,11 +61,9 @@ export const BarChartBaseComponent = ({
<Settings {...settings} />
{data.map(series => {
const barSeriesKey = series.key;
const barSeriesSpecId = getSpecId(barSeriesKey);
const seriesType = SeriesType.BAR;
return checkIfAllTheDataInTheSeriesAreValid ? (
<BarSeries
id={barSeriesSpecId}
id={barSeriesKey}
key={barSeriesKey}
name={series.key}
xScaleType={getOr(ScaleType.Linear, 'configs.series.xScaleType', chartConfigs)}
@ -87,7 +74,7 @@ export const BarChartBaseComponent = ({
splitSeriesAccessors={['g']}
data={series.value!}
stackAccessors={get('configs.series.stackAccessors', chartConfigs)}
customSeriesColors={getSeriesStyle(barSeriesKey, series.color, seriesType)}
customSeriesColors={series.color ? [series.color] : undefined}
/>
) : null;
})}

22
x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx
View file

@ -13,8 +13,6 @@ import {
defaultChartHeight,
getChartHeight,
getChartWidth,
getSeriesStyle,
SeriesType,
WrappedByAutoSizer,
ChartSeriesData,
useTheme,
@ -41,26 +39,6 @@ describe('WrappedByAutoSizer', () => {
});
});
describe('getSeriesStyle', () => {
it('should not create style mapping if color is not given', () => {
const mockSeriesKey = 'mockSeriesKey';
const color = '';
const customSeriesColors = getSeriesStyle(mockSeriesKey, color, SeriesType.BAR);
expect(customSeriesColors).toBeUndefined();
});
it('should create correct style mapping for series of a chart', () => {
const mockSeriesKey = 'mockSeriesKey';
const color = 'red';
const customSeriesColors = getSeriesStyle(mockSeriesKey, color, SeriesType.BAR);
const expectedKey = { colorValues: [mockSeriesKey] };
customSeriesColors!.forEach((value, key) => {
expect(JSON.stringify(key)).toEqual(JSON.stringify(expectedKey));
expect(value).toEqual(color);
});
});
});
describe('getChartHeight', () => {
it('should render customHeight', () => {
const height = getChartHeight(10, 100);

25
x-pack/legacy/plugins/siem/public/components/charts/common.tsx
View file

@ -5,17 +5,14 @@
*/
import {
CustomSeriesColorsMap,
DARK_THEME,
DataSeriesColorsValues,
getSpecId,
LIGHT_THEME,
mergeWithDefaultTheme,
PartialTheme,
Rendering,
Rotation,
ScaleType,
SettingSpecProps,
SettingsSpecProps,
TickFormatter,
} from '@elastic/charts';
import moment from 'moment-timezone';
@ -47,7 +44,7 @@ export interface ChartSeriesConfigs {
xTickFormatter?: TickFormatter | undefined;
yTickFormatter?: TickFormatter | undefined;
};
settings?: Partial<SettingSpecProps>;
settings?: Partial<SettingsSpecProps>;
}
export interface ChartSeriesData {
@ -76,24 +73,6 @@ export enum SeriesType {
LINE = 'line',
}
// Customize colors: https://ela.st/custom-colors
export const getSeriesStyle = (
seriesKey: string,
color: string | undefined,
seriesType?: SeriesType
) => {
if (!color) return undefined;
const customSeriesColors: CustomSeriesColorsMap = new Map();
const dataSeriesColorValues: DataSeriesColorsValues = {
colorValues: seriesType === SeriesType.BAR ? [seriesKey] : [],
specId: getSpecId(seriesKey),
};
customSeriesColors.set(dataSeriesColorValues, color);
return customSeriesColors;
};
// Apply margins and paddings: https://ela.st/charts-spacing
const theme: PartialTheme = {
chartMargins: {

12
x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/index.tsx
View file

@ -9,8 +9,6 @@ import {
Chart,
HistogramBarSeries,
Settings,
getAxisId,
getSpecId,
niceTimeFormatByDay,
timeFormatter,
} from '@elastic/charts';
@ -62,16 +60,12 @@ export const HistogramSignals = React.memo(() => {
theme={npStart.plugins.eui_utils.useChartsTheme()}
/>
<Axis
id={getAxisId('signalAxisX')}
position="bottom"
tickFormat={timeFormatter(niceTimeFormatByDay(1))}
/>
<Axis id="signalAxisX" position="bottom" tickFormat={timeFormatter(niceTimeFormatByDay(1))} />
<Axis id={getAxisId('signalAxisY')} position="left" />
<Axis id="signalAxisY" position="left" />
<HistogramBarSeries
id={getSpecId('signalBar')}
id="signalBar"
xScaleType="time"
yScaleType="linear"
xAccessor="x"

15
x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/__snapshots__/monitor_bar_series.test.tsx.snap generated
View file

@ -13,7 +13,7 @@ exports[`MonitorBarSeries component renders a series when there are down items 1
<Chart
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
<Connect(spec)
xDomain={
Object {
"max": 1548700920000,
@ -21,20 +21,17 @@ exports[`MonitorBarSeries component renders a series when there are down items 1
}
}
/>
<inject-AxisSpec-with-chartStore
<Connect(spec)
hide={true}
id="bottom"
position="bottom"
tickFormat={[Function]}
/>
<inject-BarSeriesSpecComponent-with-chartStore
<Connect(spec)
customSeriesColors={
Map {
Object {
"colorValues": Array [],
"specId": "downSeries",
} => "A danger color",
}
Array [
"A danger color",
]
}
data={
Array [

15
x-pack/legacy/plugins/uptime/public/components/functional/charts/checks_chart.tsx
View file

@ -8,8 +8,6 @@ import {
AreaSeries,
Axis,
Chart,
getAxisId,
getSpecId,
Position,
Settings,
ScaleType,
@ -21,7 +19,6 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { StatusData } from '../../../../common/graphql/types';
import { getChartDateLabel } from '../../../lib/helper';
import { getColorsMap } from './get_colors_map';
import { useUrlParams } from '../../../hooks';
interface ChecksChartProps {
@ -45,8 +42,8 @@ interface ChecksChartProps {
* @param props The props values required by this component.
*/
export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartProps) => {
const upSeriesSpecId = getSpecId('Up');
const downSeriesSpecId = getSpecId('Down');
const upSeriesSpecId = 'Up';
const downSeriesSpecId = 'Down';
const [getUrlParams] = useUrlParams();
const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();
@ -74,7 +71,7 @@ export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartPr
<Chart>
<Settings xDomain={{ min, max }} showLegend={false} />
<Axis
id={getAxisId('checksBottom')}
id="checksBottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={timeFormatter(getChartDateLabel(min, max))}
@ -84,7 +81,7 @@ export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartPr
})}
/>
<Axis
id={getAxisId('left')}
id="left"
position={Position.Left}
tickFormat={d => Number(d).toFixed(0)}
title={i18n.translate('xpack.uptime.monitorChart.checksChart.leftAxis.title', {
@ -93,7 +90,7 @@ export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartPr
})}
/>
<AreaSeries
customSeriesColors={getColorsMap(successColor, upSeriesSpecId)}
customSeriesColors={[successColor]}
data={status.map(({ x, up }) => ({
x,
[upString]: up || 0,
@ -107,7 +104,7 @@ export const ChecksChart = ({ dangerColor, status, successColor }: ChecksChartPr
yScaleType={ScaleType.Linear}
/>
<AreaSeries
customSeriesColors={getColorsMap(dangerColor, downSeriesSpecId)}
customSeriesColors={[downSeriesSpecId]}
data={status.map(({ x, down }) => ({
x,
[downString]: down || 0,

6
x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { Axis, Chart, getAxisId, Position, timeFormatter, Settings } from '@elastic/charts';
import { Axis, Chart, Position, timeFormatter, Settings } from '@elastic/charts';
import { EuiPanel, EuiTitle } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';
@ -69,7 +69,7 @@ export const DurationChart = ({
<Chart>
<Settings xDomain={{ min, max }} showLegend={true} legendPosition={Position.Bottom} />
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={timeFormatter(getChartDateLabel(min, max))}
@ -79,7 +79,7 @@ export const DurationChart = ({
/>
<Axis
domain={{ min: 0 }}
id={getAxisId('left')}
id="left"
position={Position.Left}
tickFormat={d => getTickFormat(d)}
title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {

7
x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_line_series_list.tsx
View file

@ -5,9 +5,8 @@
*/
import React from 'react';
import { LineSeries, CurveType, getSpecId } from '@elastic/charts';
import { LineSeries, CurveType } from '@elastic/charts';
import { LocationDurationLine } from '../../../../common/graphql/types';
import { getColorsMap } from './get_colors_map';
import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
interface Props {
@ -21,9 +20,9 @@ export const DurationLineSeriesList = ({ lines, meanColor }: Props) => (
<LineSeries
curve={CurveType.CURVE_MONOTONE_X}
// this id is used for the line chart representing the average duration length
customSeriesColors={getColorsMap(meanColor, getSpecId(`average-${name}`))}
customSeriesColors={[meanColor]}
data={line.map(({ x, y }) => [x, microsToMillis(y || null)])}
id={getSpecId(`loc-avg-${name}`)}
id={`loc-avg-${name}`}
key={`locline-${name}`}
name={name}
xAccessor={0}

23
x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts
View file

@ -1,23 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { DataSeriesColorsValues, SpecId } from '@elastic/charts';
/**
* This is a helper function used to more easily define a basic map
* for color values for use with elastic charts. Support for multiple
* color values can be added in the future if needed.
* @param color a string containing a valid color value
* @param specId an ID generated by the elastic charts library
*/
export const getColorsMap = (
color: string,
specId: SpecId
): Map<DataSeriesColorsValues, string> => {
const map = new Map<DataSeriesColorsValues, string>();
map.set({ colorValues: [], specId }, color);
return map;
};

11
x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx
View file

@ -8,10 +8,8 @@ import {
Axis,
BarSeries,
Chart,
getSpecId,
ScaleType,
Settings,
getAxisId,
Position,
timeFormatter,
} from '@elastic/charts';
@ -20,7 +18,6 @@ import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiText, EuiToolTip } from '@elastic/eui';
import { SummaryHistogramPoint } from '../../../../common/graphql/types';
import { getColorsMap } from './get_colors_map';
import { getChartDateLabel, seriesHasDownValues } from '../../../lib/helper';
export interface MonitorBarSeriesProps {
@ -53,7 +50,7 @@ export const MonitorBarSeries = ({
dangerColor,
histogramSeries,
}: MonitorBarSeriesProps) => {
const id = getSpecId('downSeries');
const id = 'downSeries';
return seriesHasDownValues(histogramSeries) ? (
<div style={{ height: 50, width: '100%', maxWidth: '1200px' }}>
@ -61,14 +58,14 @@ export const MonitorBarSeries = ({
<Settings xDomain={{ min: absoluteStartDate, max: absoluteEndDate }} />
<Axis
hide
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
/>
<BarSeries
customSeriesColors={getColorsMap(dangerColor, id)}
data={(histogramSeries || []).map(({ timestamp, down }) => [timestamp, down])}
id={id}
customSeriesColors={[dangerColor]}
data={(histogramSeries || []).map(({ timestamp, down }) => [timestamp, down])}
name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
defaultMessage: 'Down checks',
})}

37
x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
View file

@ -4,22 +4,12 @@
* you may not use this file except in compliance with the Elastic License.
*/
import {
Axis,
BarSeries,
Chart,
getAxisId,
getSpecId,
Position,
timeFormatter,
Settings,
} from '@elastic/charts';
import { Axis, BarSeries, Chart, Position, timeFormatter, Settings } from '@elastic/charts';
import { EuiEmptyPrompt, EuiTitle, EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useContext } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import moment from 'moment';
import { getColorsMap } from './get_colors_map';
import { getChartDateLabel } from '../../../lib/helper';
import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
@ -111,13 +101,12 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
const downMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
defaultMessage: 'Down Monitors',
});
const downSpecId = getSpecId(downMonitorsId);
const downSpecId = downMonitorsId;
const upMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {
defaultMessage: 'Up',
});
const upSpecId = getSpecId(upMonitorsId);
const upSpecId = upMonitorsId;
return (
<>
<EuiTitle size="xs">
@ -150,21 +139,17 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
showLegend={false}
/>
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
defaultMessage: 'Snapshot X Axis',
})
)}
id={i18n.translate('xpack.uptime.snapshotHistogram.xAxisId', {
defaultMessage: 'Snapshot X Axis',
})}
position={Position.Bottom}
showOverlappingTicks={false}
tickFormat={timeFormatter(getChartDateLabel(absoluteStartDate, absoluteEndDate))}
/>
<Axis
id={getAxisId(
i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
defaultMessage: 'Snapshot Y Axis',
})
)}
id={i18n.translate('xpack.uptime.snapshotHistogram.yAxisId', {
defaultMessage: 'Snapshot Y Axis',
})}
position="left"
title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
defaultMessage: 'Pings',
@ -173,7 +158,7 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
})}
/>
<BarSeries
customSeriesColors={getColorsMap(danger, downSpecId)}
customSeriesColors={[danger]}
data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
id={downSpecId}
name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
@ -187,7 +172,7 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
yScaleType="linear"
/>
<BarSeries
customSeriesColors={getColorsMap(gray, upSpecId)}
customSeriesColors={[gray]}
data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
id={upSpecId}
name={upMonitorsId}

16
x-pack/legacy/plugins/watcher/public/np_ready/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
View file

@ -8,9 +8,6 @@ import React, { Fragment, useContext, useEffect } from 'react';
import {
AnnotationDomainTypes,
Axis,
getAnnotationId,
getAxisId,
getSpecId,
Chart,
LineAnnotation,
LineSeries,
@ -224,22 +221,17 @@ export const WatchVisualization = () => {
legendPosition={Position.Bottom}
/>
<Axis
id={getAxisId('bottom')}
id="bottom"
position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={dateFormatter}
/>
<Axis
domain={{ max: maxY }}
id={getAxisId('left')}
title={aggLabel}
position={Position.Left}
/>
<Axis domain={{ max: maxY }} id="left" title={aggLabel} position={Position.Left} />
{watchVisualizationDataKeys.map((key: string) => {
return (
<LineSeries
key={key}
id={getSpecId(key)}
id={key}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={watchVisualizationData[key]}
@ -254,7 +246,7 @@ export const WatchVisualization = () => {
return (
<LineAnnotation
key={specId}
annotationId={getAnnotationId(specId)}
id={specId}
domainType={AnnotationDomainTypes.YDomain}
dataValues={[{ dataValue: watch.threshold[i], details: specId }]}
/>

229
yarn.lock
View file

@ -1869,10 +1869,10 @@
debug "^3.1.0"
lodash.once "^4.1.1"
"@elastic/charts@^14.0.0":
version "14.0.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-14.0.0.tgz#410c87e9ae53df5848aae09a210fa7d08510b376"
integrity sha512-cskrD5Yq6yTTqGOKV2/7dw/eRON1GbWkIgSuWXPIBa/TQMUwiWqxFkxSMUJSbu9xXq07KMblDgXLf73yMc0AyQ==
"@elastic/charts@^16.0.2":
version "16.0.2"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-16.0.2.tgz#35068a08a19534da62e9bcad700cc7b2a15bc55a"
integrity sha512-0tVyltAmAPOAfiRU1iKYk3b9++4oTn6IXvyM4SSj7Ukh5Y90XXmOtGEUPnZTiRPmup9MJi4srrm9ra9k/Kq4UQ==
dependencies:
"@types/d3-shape" "^1.3.1"
classnames "^2.2.6"
@ -1880,18 +1880,18 @@
d3-collection "^1.0.7"
d3-scale "^1.0.7"
d3-shape "^1.3.4"
fp-ts "^1.14.2"
konva "^2.6.0"
mobx "^4.9.2"
mobx-react "^5.4.3"
konva "^4.0.18"
newtype-ts "^0.2.4"
prop-types "^15.7.2"
react "^16.8.3"
react-dom "^16.8.3"
react-konva "16.8.3"
re-reselect "^3.4.0"
react-konva "16.10.1-0"
react-redux "^7.1.0"
react-spring "^8.0.8"
redux "^4.0.4"
reselect "^4.0.0"
resize-observer-polyfill "^1.5.1"
ts-debounce "^1.0.0"
utility-types "^3.9.0"
uuid "^3.3.2"
"@elastic/elasticsearch@^7.4.0":
@ -5333,7 +5333,7 @@ acorn-walk@^7.0.0:
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.0.0.tgz#c8ba6f0f1aac4b0a9e32d1f0af12be769528f36b"
integrity sha512-7Bv1We7ZGuU79zZbb6rRqcpxo3OY+zrdtloZWoyD8fmGX+FeXRjE+iuGkZjSXLVovLzrsvMGMy0EkwA0E0umxg==
acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.1.2, acorn@^5.2.1, acorn@^5.5.0:
acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.1.2, acorn@^5.5.0:
version "5.7.3"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
@ -7165,11 +7165,6 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
base62@^1.1.0:
version "1.2.8"
resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
integrity sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==
base64-arraybuffer@0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
@ -9047,11 +9042,6 @@ commander@^2.13.0, commander@^2.15.1, commander@^2.16.0, commander@^2.19.0, comm
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
commander@^2.5.0:
version "2.20.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@^2.8.1:
version "2.18.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
@ -9074,21 +9064,6 @@ commondir@^1.0.1:
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
commoner@^0.10.1:
version "0.10.8"
resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
integrity sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=
dependencies:
commander "^2.5.0"
detective "^4.3.1"
glob "^5.0.15"
graceful-fs "^4.1.2"
iconv-lite "^0.4.5"
mkdirp "^0.5.0"
private "^0.1.6"
q "^1.1.2"
recast "^0.11.17"
compare-versions@3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.5.1.tgz#26e1f5cf0d48a77eced5046b9f67b6b61075a393"
@ -10663,7 +10638,7 @@ define-property@^2.0.2:
is-descriptor "^1.0.2"
isobject "^3.0.1"
defined@^1.0.0, defined@~1.0.0:
defined@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
@ -10912,14 +10887,6 @@ detective-typescript@^5.1.1:
node-source-walk "^4.2.0"
typescript "^3.4.5"
detective@^4.3.1:
version "4.7.1"
resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
integrity sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==
dependencies:
acorn "^5.2.1"
defined "^1.0.0"
dezalgo@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
@ -11631,14 +11598,6 @@ env-variable@0.0.x:
resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
envify@^3.0.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/envify/-/envify-3.4.1.tgz#d7122329e8df1688ba771b12501917c9ce5cbce8"
integrity sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=
dependencies:
jstransform "^11.0.3"
through "~2.3.4"
enzyme-adapter-react-16@^1.15.1:
version "1.15.1"
resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz#8ad55332be7091dc53a25d7d38b3485fc2ba50d5"
@ -12304,11 +12263,6 @@ espree@^6.1.1:
acorn-jsx "^5.0.2"
eslint-visitor-keys "^1.1.0"
esprima-fb@^15001.1.0-dev-harmony-fb:
version "15001.1.0-dev-harmony-fb"
resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz#30a947303c6b8d5e955bee2b99b1d233206a6901"
integrity sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=
esprima@2.7.x, esprima@^2.7.1:
version "2.7.3"
resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
@ -13000,17 +12954,6 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.6.1.tgz#9636b7705f5ba9684d44b72f78321254afc860f7"
integrity sha1-lja3cF9bqWhNRLcveDISVK/IYPc=
dependencies:
core-js "^1.0.0"
loose-envify "^1.0.0"
promise "^7.0.3"
ua-parser-js "^0.7.9"
whatwg-fetch "^0.9.0"
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.16:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@ -13665,11 +13608,6 @@ fp-ts@^1.0.0:
resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.12.0.tgz#d333310e4ac104cdcb6bea47908e381bb09978e7"
integrity sha512-fWwnAgVlTsV26Ruo9nx+fxNHIm6l1puE1VJ/C0XJ3nRQJJJIgRHYw6sigB3MuNFZL1o4fpGlhwFhcbxHK0RsOA==
fp-ts@^1.14.2:
version "1.17.3"
resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.17.3.tgz#5064afc4bee8ddcaea567479bfc62d527e015825"
integrity sha512-r4gHfAWaRrYPsmdzRl1U9CkpbdOi8fPg5F5KiazAadENz5DKdWEaCDPl2Tf92fvkZGD/ekZ3EHu3gtXIVcsXtA==
fp-ts@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-2.0.5.tgz#9560d8a6a4f53cbda9f9b31ed8d1458e41939e07"
@ -15554,13 +15492,6 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
dependencies:
react-is "^16.7.0"
hoist-non-react-statics@^3.1.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
@ -15568,6 +15499,13 @@ hoist-non-react-statics@^3.1.0:
dependencies:
react-is "^16.7.0"
hoist-non-react-statics@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
dependencies:
react-is "^16.7.0"
homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
@ -15871,7 +15809,7 @@ icalendar@0.7.1:
resolved "https://registry.yarnpkg.com/icalendar/-/icalendar-0.7.1.tgz#d0d3486795f8f1c5cf4f8cafac081b4b4e7a32ae"
integrity sha1-0NNIZ5X48cXPT4yvrAgbS056Mq4=
iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.22, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@^0.4.5, iconv-lite@~0.4.13:
iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.22, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -18136,17 +18074,6 @@ jssha@^2.1.0:
resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
jstransform@^11.0.3:
version "11.0.3"
resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-11.0.3.tgz#09a78993e0ae4d4ef4487f6155a91f6190cb4223"
integrity sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=
dependencies:
base62 "^1.1.0"
commoner "^0.10.1"
esprima-fb "^15001.1.0-dev-harmony-fb"
object-assign "^2.0.0"
source-map "^0.4.2"
jstransformer-ejs@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/jstransformer-ejs/-/jstransformer-ejs-0.0.3.tgz#04d9201469274fcf260f1e7efd732d487fa234b6"
@ -18415,10 +18342,10 @@ known-css-properties@^0.3.0:
resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
integrity sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==
konva@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/konva/-/konva-2.6.0.tgz#43165b95e32a4378ce532d9113c914f4998409c3"
integrity sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A==
konva@^4.0.18:
version "4.0.18"
resolved "https://registry.yarnpkg.com/konva/-/konva-4.0.18.tgz#43e614c9b22827183506d4a6b3b474f90187b469"
integrity sha512-Tlq0v7QHr8q73xr1cKjHdQl41oHC06IOldPO+ukjt99G74NgoU0TVouvPIFpW2whA9t3xNk/+/VJcc3XPcboOw==
kopy@^8.2.0:
version "8.2.5"
@ -20273,19 +20200,6 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
dependencies:
minimist "0.0.8"
mobx-react@^5.4.3:
version "5.4.3"
resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.4.3.tgz#6709b7dd89670c40e9815914ac2ca49cc02bfb47"
integrity sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==
dependencies:
hoist-non-react-statics "^3.0.0"
react-lifecycles-compat "^3.0.2"
mobx@^4.9.2:
version "4.9.4"
resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.9.4.tgz#bb37a0e4e05f0b02be89ced9d23445cad73377ad"
integrity sha512-RaEpydw7D1ebp1pdFHrEMZcLk4nALAZyHAroCPQpqLzuIXIxJpLmMIe5PUZwYHqvlcWL6DVqDYCANZpPOi9iXA==
mocha-junit-reporter@^1.23.1:
version "1.23.1"
resolved "https://registry.yarnpkg.com/mocha-junit-reporter/-/mocha-junit-reporter-1.23.1.tgz#ba11519c0b967f404e4123dd69bc4ba022ab0f12"
@ -22973,7 +22887,7 @@ promise.prototype.finally@^3.1.0:
es-abstract "^1.9.0"
function-bind "^1.1.1"
promise@^7.0.1, promise@^7.0.3, promise@^7.1.1:
promise@^7.0.1, promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
@ -23567,6 +23481,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
re-reselect@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-3.4.0.tgz#0f2303f3c84394f57f0cd31fea08a1ca4840a7cd"
integrity sha512-JsecfN+JlckncVXTWFWjn0Vk6uInl8GSf4eEd9tTk5qXHlgqkPdILpnYpgZcISXNYAzvfvsCZviaDk8AxyS5sg==
react-ace@^5.5.0:
version "5.10.0"
resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-5.10.0.tgz#e328b37ac52759f700be5afdb86ada2f5ec84c5e"
@ -23937,20 +23856,20 @@ react-is@~16.3.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
integrity sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==
react-konva@16.8.3:
version "16.8.3"
resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-16.8.3.tgz#e55390040ea54675a0ef0d40b4fa93731e6d7b03"
integrity sha512-gU36TBxcPZANQOV5prAFnpRSNp2ikAT7zCICHTBJvOzAfa8Yhcyaey6EIrD+NTT/4y0PyGFBIkmWq6zdrlNrQg==
react-konva@16.10.1-0:
version "16.10.1-0"
resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-16.10.1-0.tgz#f8cc2c95374933069e891a6c714c70d0fdc77e68"
integrity sha512-N0Zi3TcWmUxb2d7y1DUDQhRA+WIcqk54DQmmUmJSadj+fS0bg6iZDebQSEQC8dMbjnLHc/338xRT4a4718PEiw==
dependencies:
react-reconciler "^0.20.1"
scheduler "^0.13.3"
react-reconciler "^0.22.1"
scheduler "^0.16.1"
react-lib-adler32@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-lib-adler32/-/react-lib-adler32-1.0.3.tgz#63df1aed274eabcc1c5067077ea281ec30888ba7"
integrity sha512-AqFqdt4cP0RPffHNjVHZ7tyIgnoSzNxgFhG8XKMXCtA1dZ72gTPO4iYFwWDKHqvE8sHS14rhltQTdbXU5G4BFA==
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@ -24059,15 +23978,15 @@ react-portal@^3.2.0:
dependencies:
prop-types "^15.5.8"
react-reconciler@^0.20.1:
version "0.20.4"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.20.4.tgz#3da6a95841592f849cb4edd3d38676c86fd920b2"
integrity sha512-kxERc4H32zV2lXMg/iMiwQHOtyqf15qojvkcZ5Ja2CPkjVohHw9k70pdDBwrnQhLVetUJBSYyqU3yqrlVTOajA==
react-reconciler@^0.22.1:
version "0.22.2"
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.22.2.tgz#e8a10374fec8fee7c5cd0cf3cd05626f1b134d3e"
integrity sha512-MLX5Y2pNLsdXzWz/GLNhhYkdLOvxEtw2IGqVCzkiRdSFSHRjujI9gfTOQ3rV5z8toTBxSZ2qrRkRUo97mmEdhA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
scheduler "^0.16.2"
react-redux@^5.0.7:
version "5.0.7"
@ -24094,7 +24013,7 @@ react-redux@^5.1.2:
react-is "^16.6.0"
react-lifecycles-compat "^3.0.0"
react-redux@^7.1.1:
react-redux@^7.1.0, react-redux@^7.1.1:
version "7.1.3"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
@ -24356,15 +24275,7 @@ react-visibility-sensor@^5.1.1:
dependencies:
prop-types "^15.7.2"
react@^0.14.0:
version "0.14.9"
resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1"
integrity sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=
dependencies:
envify "^3.0.0"
fbjs "^0.6.1"
react@^16.12.0:
react@^0.14.0, react@^16.12.0, react@^16.8.3, react@^16.8.5:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
@ -24373,16 +24284,6 @@ react@^16.12.0:
object-assign "^4.1.1"
prop-types "^15.6.2"
react@^16.8.3, react@^16.8.5:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
reactcss@1.2.3, reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
@ -24615,16 +24516,6 @@ realpath-native@^1.1.0:
dependencies:
util.promisify "^1.0.0"
recast@^0.11.17, recast@~0.11.12:
version "0.11.23"
resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
dependencies:
ast-types "0.9.6"
esprima "~3.1.0"
private "~0.1.5"
source-map "~0.5.0"
recast@^0.14.7:
version "0.14.7"
resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
@ -24645,6 +24536,16 @@ recast@^0.17.3:
private "^0.1.8"
source-map "~0.6.1"
recast@~0.11.12:
version "0.11.23"
resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
dependencies:
ast-types "0.9.6"
esprima "~3.1.0"
private "~0.1.5"
source-map "~0.5.0"
rechoir@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@ -25354,6 +25255,11 @@ reselect@3.0.1, reselect@^3.0.1:
resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
reselect@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
resize-observer-polyfill@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
@ -25912,10 +25818,10 @@ saxes@^3.1.9:
dependencies:
xmlchars "^2.1.1"
scheduler@^0.13.3, scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
scheduler@^0.16.1, scheduler@^0.16.2:
version "0.16.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"
integrity sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
@ -29718,7 +29624,7 @@ utila@^0.4.0, utila@~0.4:
resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
utility-types@^3.10.0:
utility-types@^3.10.0, utility-types@^3.9.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
@ -30815,11 +30721,6 @@ whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
whatwg-fetch@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
integrity sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=
whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"