Skip to content

Commit

Permalink
[Lens] Revisit Random sampling UI (elastic#143929)
Browse files Browse the repository at this point in the history
* 💄 Revisit settings ui

* Design suggestions (#18)

Co-authored-by: Michael Marcialis <michael@marcial.is>
  • Loading branch information
dej611 and Michael Marcialis authored Oct 27, 2022
1 parent 028fa94 commit 83e85bd
Showing 1 changed file with 86 additions and 34 deletions.
120 changes: 86 additions & 34 deletions x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
);
}

0 comments on commit 83e85bd

Please sign in to comment.