diff --git a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx index 7d02ac98f23a4..ec161ef996737 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx @@ -5,9 +5,20 @@ * 2.0. */ -import { EuiFormRow, EuiRange, EuiBetaBadge } from '@elastic/eui'; +import { + EuiFormRow, + EuiRange, + EuiFlexGroup, + EuiFlexItem, + EuiBetaBadge, + EuiText, + EuiLink, + EuiSpacer, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; import React from 'react'; +import { FormattedMessage } from '@kbn/i18n-react'; import type { DatasourceLayerSettingsProps } from '../../types'; import type { FormBasedPrivateState } from './types'; @@ -22,54 +33,95 @@ export function LayerSettingsPanel({ const currentSamplingIndex = samplingIndex > -1 ? samplingIndex : samplingValue.length - 1; return ( + +

+ + + + ), + }} + /> +

+ + } label={ <> {i18n.translate('xpack.lens.xyChart.randomSampling.label', { - defaultMessage: 'Sampling', + defaultMessage: 'Random sampling', })}{' '} } > - { - setState({ - ...state, - layers: { - ...state.layers, - [layerId]: { - ...state.layers[layerId], - sampling: samplingValue[Number(e.currentTarget.value)], - }, - }, - }); - }} - showInput={false} - showRange={false} - showTicks - step={1} - min={0} - max={samplingValue.length - 1} - ticks={samplingValue.map((v, i) => ({ label: `${v}`, value: i }))} - /> + + + + + + + + { + setState({ + ...state, + layers: { + ...state.layers, + [layerId]: { + ...state.layers[layerId], + sampling: samplingValue[Number(e.currentTarget.value)], + }, + }, + }); + }} + showInput={false} + showRange={false} + showTicks + step={1} + min={0} + max={samplingValue.length - 1} + ticks={samplingValue.map((v, i) => ({ label: `${v * 100}%`, value: i }))} + /> + + + + + + +
); }