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

[Lens] Revisit Random sampling UI (#143929)

Browse source 
* 💄 Revisit settings ui

* Design suggestions (#18)

Co-authored-by: Michael Marcialis <michael@marcial.is>
This commit is contained in:
Marco Liberati 2022-10-27 16:16:57 +02:00 • committed by GitHub
parent 028fa94e2c
commit 83e85bd960
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 86 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

120
x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
View file

@ -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 (
<EuiFormRow
display="columnCompressed"
display="rowCompressed"
data-test-subj="lns-indexPattern-random-sampling-row"
fullWidth
helpText={i18n.translate('xpack.lens.xyChart.randomSampling.help', {
defaultMessage: 'Change the sampling probability to see how your chart is affected',
})}
helpText={
<>
<EuiSpacer size="s" />
<p>
<FormattedMessage
id="xpack.lens.xyChart.randomSampling.help"
defaultMessage="Lower sampling percentages increase speed at the cost of accuracy. It is recommended that lower sampling percentages only be used for large datasets. {link}"
values={{
link: (
<EuiLink
href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
target="_blank"
external
>
<FormattedMessage
id="xpack.lens.xyChart.randomSampling.learnMore"
defaultMessage="View documentation"
/>
</EuiLink>
),
}}
/>
</p>
</>
}
label={
<>
{i18n.translate('xpack.lens.xyChart.randomSampling.label', {
defaultMessage: 'Sampling',
defaultMessage: 'Random sampling',
})}{' '}
<EuiBetaBadge
css={css`
vertical-align: middle;
`}
iconType="beaker"
label={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
defaultMessage: 'Technical preview',
})}
color="hollow"
iconType="beaker"
size="s"
tooltipContent={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
defaultMessage: 'Technical preview',
})}
/>
</>
}
>
<EuiRange
data-test-subj="lns-indexPattern-random-sampling"
value={currentSamplingIndex}
onChange={(e) => {
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 }))}
/>
<EuiFlexGroup gutterSize="none">
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.lens.xyChart.randomSampling.speedLabel"
defaultMessage="Speed"
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiRange
data-test-subj="lns-indexPattern-random-sampling"
value={currentSamplingIndex}
onChange={(e) => {
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 }))}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="xs">
<FormattedMessage
id="xpack.lens.xyChart.randomSampling.accuracyLabel"
defaultMessage="Accuracy"
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
);
}