github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[charts] Replace usage of linear xScaleType in barchart [skip-ci] (#114778)

Browse source
This commit is contained in:
Marco Vettorello 2021-10-20 14:03:45 +02:00 • committed by GitHub
parent 3f12a90766
commit 73566ad285
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 91 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/apm/public/components/alerting/chart_preview/index.tsx
View file

@ -103,7 +103,7 @@ export function ChartPreview({
data={data}
id="chart_preview_bar_series"
xAccessor="x"
xScaleType={ScaleType.Linear}
xScaleType={ScaleType.Time}
yAccessors={['y']}
yScaleType={ScaleType.Linear}
/>

2
x-pack/plugins/data_visualizer/public/application/common/components/field_data_row/action_menu/lens_utils.ts
View file

@ -153,7 +153,7 @@ export function getKeywordSettings(item: FieldVisConfig) {
accessors: ['col2'],
layerId: 'layer1',
layerType: 'data',
seriesType: 'bar',
seriesType: 'bar_horizontal',
xAccessor: 'col1',
};

6
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
View file

@ -7,7 +7,7 @@
import React, { FC, ReactNode, useMemo } from 'react';
import { EuiBasicTable, EuiSpacer, RIGHT_ALIGNMENT, HorizontalAlignment } from '@elastic/eui';
import { Axis, BarSeries, Chart, Settings } from '@elastic/charts';
import { Axis, BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
@ -137,9 +137,9 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
splitSeriesAccessors={['x']}
stackAccessors={['x']}
xAccessor="x"
xScaleType="ordinal"
xScaleType={ScaleType.Ordinal}
yAccessors={['count']}
yScaleType="linear"
yScaleType={ScaleType.Linear}
/>
</Chart>
</ExpandedRowPanel>

1
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/boolean_content_preview.tsx
View file

@ -37,6 +37,7 @@ export const BooleanContentPreview: FC<FieldDataRowProps> = ({ config }) => {
chartData={chartData}
columnType={columnType}
hideLabel={true}
maxChartColumns={10}
/>
);
};

12
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.tsx
View file

@ -22,7 +22,7 @@ interface Props {
columnType: EuiDataGridColumn;
dataTestSubj: string;
hideLabel?: boolean;
maxChartColumns?: number;
maxChartColumns: number;
}
const zeroSize = { bottom: 0, left: 0, right: 0, top: 0 };
@ -42,8 +42,12 @@ export const ColumnChart: FC<Props> = ({
{!isUnsupportedChartData(chartData) && data.length > 0 && (
<Chart size={size}>
<Settings
xDomain={{ min: 0, max: 9 }}
theme={{ chartMargins: zeroSize, chartPaddings: zeroSize }}
xDomain={Array.from({ length: maxChartColumns }, (_, i) => i)}
theme={{
chartMargins: zeroSize,
chartPaddings: zeroSize,
crosshair: { band: { visible: false } },
}}
/>
<Axis
id="bottom"
@ -55,7 +59,7 @@ export const ColumnChart: FC<Props> = ({
/>
<BarSeries
id={'count'}
xScaleType={ScaleType.Linear}
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['doc_count']}

85
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx
View file

@ -103,63 +103,78 @@ describe('isUnsupportedChartData()', () => {
describe('getLegendText()', () => {
it('should return the chart legend text for unsupported chart types', () => {
expect(getLegendText(validUnsupportedChartData)).toBe('Chart not supported.');
expect(getLegendText(validUnsupportedChartData, 20)).toBe('Chart not supported.');
});
it('should return the chart legend text for empty datasets', () => {
expect(getLegendText(validNumericChartData)).toBe('0 documents contain field.');
expect(getLegendText(validNumericChartData, 20)).toBe('0 documents contain field.');
});
it('should return the chart legend text for boolean chart types', () => {
const { getByText } = render(
<>
{getLegendText({
cardinality: 2,
data: [
{ key: 'true', key_as_string: 'true', doc_count: 10 },
{ key: 'false', key_as_string: 'false', doc_count: 20 },
],
id: 'the-id',
type: 'boolean',
})}
{getLegendText(
{
cardinality: 2,
data: [
{ key: 'true', key_as_string: 'true', doc_count: 10 },
{ key: 'false', key_as_string: 'false', doc_count: 20 },
],
id: 'the-id',
type: 'boolean',
},
20
)}
</>
);
expect(getByText('t')).toBeInTheDocument();
expect(getByText('f')).toBeInTheDocument();
});
it('should return the chart legend text for ordinal chart data with less than max categories', () => {
expect(getLegendText({ ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] })).toBe(
'10 categories'
);
expect(
getLegendText({ ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] }, 20)
).toBe('10 categories');
});
it('should return the chart legend text for ordinal chart data with more than max categories', () => {
expect(
getLegendText({
...validOrdinalChartData,
cardinality: 30,
data: [{ key: 'cat', doc_count: 10 }],
})
getLegendText(
{
...validOrdinalChartData,
cardinality: 30,
data: [{ key: 'cat', doc_count: 10 }],
},
20
)
).toBe('top 20 of 30 categories');
});
it('should return the chart legend text for numeric datasets', () => {
expect(
getLegendText({
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [1, 100],
})
getLegendText(
{
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [1, 100],
},
20
)
).toBe('1 - 100');
expect(
getLegendText({
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [100, 100],
})
getLegendText(
{
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [100, 100],
},
20
)
).toBe('100');
expect(
getLegendText({
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [1.2345, 6.3456],
})
getLegendText(
{
...validNumericChartData,
data: [{ key: 1, doc_count: 10 }],
stats: [1.2345, 6.3456],
},
20
)
).toBe('1.23 - 6.35');
});
});
@ -167,7 +182,7 @@ describe('getLegendText()', () => {
describe('useColumnChart()', () => {
it('should return the column chart hook data', () => {
const { result } = renderHook(() =>
useColumnChart(validNumericChartData, { id: 'the-id', schema: 'numeric' })
useColumnChart(validNumericChartData, { id: 'the-id', schema: 'numeric' }, 20)
);
expect(result.current.data).toStrictEqual([]);

8
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.tsx
View file

@ -32,7 +32,6 @@ export const hoveredRow$ = new BehaviorSubject<any | null>(null);
export const BAR_COLOR = euiPaletteColorBlind()[0];
const BAR_COLOR_BLUR = euiPaletteColorBlind({ rotations: 2 })[10];
const MAX_CHART_COLUMNS = 20;
type XScaleType = 'ordinal' | 'time' | 'linear' | undefined;
export const getXScaleType = (kbnFieldType: KBN_FIELD_TYPES | undefined): XScaleType => {
@ -76,10 +75,7 @@ export const getFieldType = (schema: EuiDataGridColumn['schema']): KBN_FIELD_TYP
};
type LegendText = string | JSX.Element;
export const getLegendText = (
chartData: ChartData,
maxChartColumns = MAX_CHART_COLUMNS
): LegendText => {
export const getLegendText = (chartData: ChartData, maxChartColumns: number): LegendText => {
if (chartData.type === 'unsupported') {
return i18n.translate('xpack.dataVisualizer.dataGridChart.histogramNotAvailable', {
defaultMessage: 'Chart not supported.',
@ -146,7 +142,7 @@ interface ColumnChart {
export const useColumnChart = (
chartData: ChartData,
columnType: EuiDataGridColumn,
maxChartColumns?: number
maxChartColumns: number
): ColumnChart => {
const fieldType = getFieldType(columnType.schema);

2
x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
View file

@ -224,7 +224,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
<Chart>
<BarSeries
id="criterion-preview"
xScaleType={ScaleType.Linear}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor="timestamp"
yAccessors={['value']}

8
x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useMemo } from 'react';
import { Chart, Settings, AreaSeries } from '@elastic/charts';
import { Chart, Settings, AreaSeries, ScaleType, TooltipType } from '@elastic/charts';
import {
EUI_CHARTS_THEME_LIGHT,
EUI_SPARKLINE_THEME_PARTIAL,
@ -53,12 +53,12 @@ export const SingleMetricSparkline: React.FunctionComponent<{
return (
<Chart size={sparklineSize}>
<Settings showLegend={false} theme={theme} tooltip="none" xDomain={xDomain} />
<Settings showLegend={false} theme={theme} tooltip={TooltipType.None} xDomain={xDomain} />
<AreaSeries
data={metric}
id="metric"
data={metric}
xAccessor={timestampAccessor}
xScaleType="time"
xScaleType={ScaleType.Time}
yAccessors={valueAccessor}
/>
</Chart>

6
x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
View file

@ -27,7 +27,7 @@ import {
} from '@elastic/eui';
import {
Axis,
BarSeries,
HistogramBarSeries,
Chart,
niceTimeFormatter,
Position,
@ -636,7 +636,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
showOverlappingTicks={true}
/>
<BarSeries
<HistogramBarSeries
data={histogram.buckets}
id={specId}
xAccessor={'key'}
@ -664,7 +664,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
tickFormat={(d) => formatter.convert(d)}
/>
<BarSeries
<HistogramBarSeries
data={histogram.buckets}
id={specId}
xAccessor={'key'}

8
x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx
View file

@ -8,7 +8,7 @@
import React, { FC } from 'react';
import classNames from 'classnames';
import { BarSeries, Chart, Settings } from '@elastic/charts';
import { BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';
import { EuiDataGridColumn } from '@elastic/eui';
import './column_chart.scss';
@ -48,7 +48,7 @@ export const ColumnChart: FC<Props> = ({
hideLabel,
maxChartColumns,
}) => {
const { data, legendText, xScaleType } = useColumnChart(chartData, columnType, maxChartColumns);
const { data, legendText } = useColumnChart(chartData, columnType, maxChartColumns);
return (
<div data-test-subj={dataTestSubj}>
@ -59,8 +59,8 @@ export const ColumnChart: FC<Props> = ({
<BarSeries
id="histogram"
name="count"
xScaleType={xScaleType}
yScaleType="linear"
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor={'key_as_string'}
yAccessors={['doc_count']}
styleAccessor={(d) => d.datum.color}

11
x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
View file

@ -12,6 +12,7 @@ import {
Position,
Settings,
ChartSizeArray,
ScaleType,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
import React, { useMemo } from 'react';
@ -42,7 +43,7 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
data,
from,
legendItems,
legendPosition = 'right',
legendPosition = Position.Right,
loading,
showLegend,
to,
@ -81,14 +82,14 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
theme={theme}
/>
<Axis id={xAxisId} position="bottom" tickFormat={tickFormat} />
<Axis id={xAxisId} position={Position.Bottom} tickFormat={tickFormat} />
<Axis id={yAxisId} position="left" />
<Axis id={yAxisId} position={Position.Left} />
<HistogramBarSeries
id={id}
xScaleType="time"
yScaleType="linear"
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={yAccessors}
splitSeriesAccessors={splitSeriesAccessors}

6
x-pack/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { LineSeries, CurveType, Fit } from '@elastic/charts';
import { LineSeries, CurveType, Fit, ScaleType } from '@elastic/charts';
import { LocationDurationLine } from '../../../../common/types';
import { microToMilli, microToSec } from '../../../lib/formatting';
import { MS_LABEL, SEC_LABEL } from '../translations';
@ -27,9 +27,9 @@ export const DurationLineSeriesList = ({ monitorType, lines }: Props) => (
key={`loc-line-${name}`}
name={name}
xAccessor={0}
xScaleType="time"
xScaleType={ScaleType.Time}
yAccessors={[1]}
yScaleType="linear"
yScaleType={ScaleType.Linear}
fit={Fit.Linear}
tickFormat={(d) =>
monitorType === 'browser'

5
x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx
View file

@ -15,6 +15,7 @@ import {
BrushEndListener,
XYChartElementEvent,
ElementClickListener,
ScaleType,
} from '@elastic/charts';
import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -182,9 +183,9 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
splitSeriesAccessors={['type']}
timeZone="local"
xAccessor="x"
xScaleType="time"
xScaleType={ScaleType.Time}
yAccessors={['y']}
yScaleType="linear"
yScaleType={ScaleType.Linear}
/>
</Chart>
</ChartWrapper>

2
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
View file

@ -52,7 +52,7 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
<BarSeries
aria-hidden={true}
id="waterfallItems"
xScaleType={ScaleType.Linear}
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y']}