mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Lens] Use the language-documentation package for formula (#143649)
* [Lens] Used documentation package for formula * fix * Rename file * Cleanup formula css * Cleanup the documentation.scss * Fixes * More cleanup
This commit is contained in:
parent
3bc40e6111
commit
4349ea70ee
12 changed files with 88 additions and 434 deletions
|
@ -7,4 +7,5 @@
|
|||
*/
|
||||
|
||||
export { LanguageDocumentationPopover } from './src/components/documentation_popover';
|
||||
export { LanguageDocumentationPopoverContent } from './src/components/documentation_content';
|
||||
export type { LanguageDocumentationSections } from './src/components/documentation_content';
|
||||
|
|
|
@ -1,80 +1,11 @@
|
|||
.documentation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
border-top: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
.documentation__editor {
|
||||
|
||||
& > * + * {
|
||||
border-top: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
.documentation__editorHeader,
|
||||
.documentation__editorFooter {
|
||||
padding: $euiSizeS $euiSize;
|
||||
}
|
||||
|
||||
.documentation__editorFooter {
|
||||
// make sure docs are rendered in front of monaco
|
||||
z-index: 1;
|
||||
background-color: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
.documentation__editorHeaderGroup,
|
||||
.documentation__editorFooterGroup {
|
||||
display: block; // Overrides EUI's styling of `display: flex` on `EuiFlexItem` components
|
||||
}
|
||||
|
||||
.documentation__editorContent {
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.documentation__editorPlaceholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: $euiSize;
|
||||
right: 0;
|
||||
color: $euiTextSubduedColor;
|
||||
// Matches monaco editor
|
||||
font-family: Menlo, Monaco, 'Courier New', monospace;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.documentation__warningText + .documentation__warningText {
|
||||
margin-top: $euiSizeS;
|
||||
border-top: $euiBorderThin;
|
||||
padding-top: $euiSizeS;
|
||||
}
|
||||
|
||||
.documentation__editorHelp--inline {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: $euiSizeXS;
|
||||
|
||||
& > * + * {
|
||||
margin-left: $euiSizeXS;
|
||||
}
|
||||
}
|
||||
|
||||
.documentation__editorError {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.documentation__docs {
|
||||
background: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.documentation__docsHeader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.documentation__docs--inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -38,7 +38,7 @@ describe('###Documentation popover content', () => {
|
|||
test('Documentation component has a header element referring to the language given', () => {
|
||||
const component = mountWithIntl(<LanguageDocumentationPopoverContent language="test" />);
|
||||
const title = findTestSubject(component, 'language-documentation-title');
|
||||
expect(title.text()).toEqual('TEST reference');
|
||||
expect(title.text()).toEqual('test reference');
|
||||
});
|
||||
|
||||
test('Documentation component has a sidebar navigation list with all the section labels', () => {
|
||||
|
|
|
@ -76,7 +76,7 @@ function DocumentationContent({ language, sections }: DocumentationProps) {
|
|||
>
|
||||
{i18n.translate('languageDocumentationPopover.header', {
|
||||
defaultMessage: '{language} reference',
|
||||
values: { language: language.toUpperCase() },
|
||||
values: { language },
|
||||
})}
|
||||
</EuiPopoverTitle>
|
||||
<EuiFlexGroup
|
||||
|
|
|
@ -32,14 +32,13 @@ function DocumentationPopover({ language, sections, buttonProps }: Documentation
|
|||
panelPaddingSize="none"
|
||||
isOpen={isHelpOpen}
|
||||
closePopover={() => setIsHelpOpen(false)}
|
||||
ownFocus={false}
|
||||
button={
|
||||
<EuiToolTip
|
||||
position="top"
|
||||
content={i18n.translate('languageDocumentationPopover.tooltip', {
|
||||
defaultMessage: '{lang} reference',
|
||||
values: {
|
||||
lang: String(language).toUpperCase(),
|
||||
lang: language,
|
||||
},
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -438,7 +438,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<LanguageDocumentationPopover
|
||||
language={language}
|
||||
language={String(language).toUpperCase()}
|
||||
sections={documentationSections}
|
||||
buttonProps={{
|
||||
color: 'text',
|
||||
|
@ -550,7 +550,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<LanguageDocumentationPopover
|
||||
language={language}
|
||||
language={String(language).toUpperCase()}
|
||||
sections={documentationSections}
|
||||
buttonProps={{
|
||||
display: 'empty',
|
||||
|
|
|
@ -33,10 +33,6 @@
|
|||
padding: $euiSizeS;
|
||||
}
|
||||
|
||||
.lnsFormula__docsHeader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lnsFormula__editorFooter {
|
||||
// make sure docs are rendered in front of monaco
|
||||
z-index: 1;
|
||||
|
@ -98,76 +94,6 @@
|
|||
background: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.lnsFormula__docs--inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// make sure docs are rendered in front of monaco
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.lnsFormula__docsContent {
|
||||
.lnsFormula__docs--overlay & {
|
||||
height: 40vh;
|
||||
width: #{'min(75vh, 90vw)'};
|
||||
}
|
||||
|
||||
.lnsFormula__docs--inline & {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
border-left: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
.lnsFormula__docsSidebar {
|
||||
background: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
.lnsFormula__docsSidebarInner {
|
||||
min-height: 0;
|
||||
|
||||
& > * + * {
|
||||
border-top: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
.lnsFormula__docsSearch {
|
||||
padding: $euiSize;
|
||||
}
|
||||
|
||||
.lnsFormula__docsNav {
|
||||
@include euiYScroll;
|
||||
}
|
||||
|
||||
.lnsFormula__docsNavGroup {
|
||||
padding: $euiSize;
|
||||
|
||||
& + & {
|
||||
border-top: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
.lnsFormula__docsNavGroupLink {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.lnsFormula__docsText {
|
||||
@include euiYScroll;
|
||||
padding: $euiSize;
|
||||
}
|
||||
|
||||
.lnsFormula__docsTextGroup,
|
||||
.lnsFormula__docsTextItem {
|
||||
margin-top: $euiSizeXXL;
|
||||
}
|
||||
|
||||
.lnsFormula__docsTextGroup {
|
||||
border-top: $euiBorderThin;
|
||||
padding-top: $euiSizeXXL;
|
||||
}
|
||||
|
||||
.lnsFormulaOverflow {
|
||||
// Needs to be higher than the modal and all flyouts
|
||||
z-index: $euiZLevel9 + 1;
|
||||
|
|
|
@ -7,6 +7,10 @@
|
|||
|
||||
import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import {
|
||||
LanguageDocumentationPopover,
|
||||
LanguageDocumentationPopoverContent,
|
||||
} from '@kbn/language-documentation-popover';
|
||||
import { css } from '@emotion/react';
|
||||
import {
|
||||
EuiButtonIcon,
|
||||
|
@ -27,7 +31,7 @@ import { monaco } from '@kbn/monaco';
|
|||
import classNames from 'classnames';
|
||||
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
|
||||
import type { CodeEditorProps } from '@kbn/kibana-react-plugin/public';
|
||||
import { TooltipWrapper, useDebounceWithOptions } from '../../../../../../shared_components';
|
||||
import { useDebounceWithOptions } from '../../../../../../shared_components';
|
||||
import { ParamEditorProps } from '../..';
|
||||
import { getManagedColumnsFrom } from '../../../layer_helpers';
|
||||
import { ErrorWrapper, runASTValidation, tryToParse } from '../validation';
|
||||
|
@ -45,13 +49,13 @@ import {
|
|||
MARKER,
|
||||
} from './math_completion';
|
||||
import { LANGUAGE_ID } from './math_tokenization';
|
||||
import { MemoizedFormulaHelp } from './formula_help';
|
||||
|
||||
import './formula.scss';
|
||||
import { FormulaIndexPatternColumn } from '../formula';
|
||||
import { insertOrReplaceFormulaColumn } from '../parse';
|
||||
import { filterByVisibleOperation, nonNullable } from '../util';
|
||||
import { getColumnTimeShiftWarnings, getDateHistogramInterval } from '../../../../time_shift_utils';
|
||||
import { getDocumentationSections } from './formula_help';
|
||||
|
||||
function tableHasData(
|
||||
activeData: ParamEditorProps<FormulaIndexPatternColumn>['activeData'],
|
||||
|
@ -126,6 +130,15 @@ export function FormulaEditor({
|
|||
[operationDefinitionMap]
|
||||
);
|
||||
|
||||
const documentationSections = useMemo(
|
||||
() =>
|
||||
getDocumentationSections({
|
||||
indexPattern,
|
||||
operationDefinitionMap: visibleOperationsMap,
|
||||
}),
|
||||
[indexPattern, visibleOperationsMap]
|
||||
);
|
||||
|
||||
const baseInterval =
|
||||
'interval' in dateHistogramInterval
|
||||
? dateHistogramInterval.interval?.asMilliseconds()
|
||||
|
@ -831,47 +844,21 @@ export function FormulaEditor({
|
|||
</EuiLink>
|
||||
</EuiToolTip>
|
||||
) : (
|
||||
<TooltipWrapper
|
||||
tooltipContent={i18n.translate(
|
||||
'xpack.lens.formula.editorHelpOverlayToolTip',
|
||||
{
|
||||
defaultMessage: 'Function reference',
|
||||
}
|
||||
)}
|
||||
condition={!isHelpOpen}
|
||||
position="top"
|
||||
delay="regular"
|
||||
>
|
||||
<EuiPopover
|
||||
panelClassName="lnsFormula__docs lnsFormula__docs--overlay"
|
||||
panelPaddingSize="none"
|
||||
anchorPosition="leftCenter"
|
||||
isOpen={isHelpOpen}
|
||||
closePopover={() => setIsHelpOpen(false)}
|
||||
button={
|
||||
<EuiButtonIcon
|
||||
className="lnsFormula__editorHelp lnsFormula__editorHelp--overlay"
|
||||
onClick={() => {
|
||||
setIsHelpOpen(!isHelpOpen);
|
||||
}}
|
||||
iconType="documentation"
|
||||
color="text"
|
||||
aria-label={i18n.translate(
|
||||
'xpack.lens.formula.editorHelpInlineShowToolTip',
|
||||
{
|
||||
defaultMessage: 'Show function reference',
|
||||
}
|
||||
)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<MemoizedFormulaHelp
|
||||
isFullscreen={isFullscreen}
|
||||
indexPattern={indexPattern}
|
||||
operationDefinitionMap={visibleOperationsMap}
|
||||
/>
|
||||
</EuiPopover>
|
||||
</TooltipWrapper>
|
||||
<LanguageDocumentationPopover
|
||||
language="Formula"
|
||||
sections={documentationSections}
|
||||
buttonProps={{
|
||||
color: 'text',
|
||||
className: 'lnsFormula__editorHelp lnsFormula__editorHelp--overlay',
|
||||
'data-test-subj': 'unifiedTextLangEditor-documentation',
|
||||
'aria-label': i18n.translate(
|
||||
'xpack.lens.formula.editorHelpInlineShowToolTip',
|
||||
{
|
||||
defaultMessage: 'Show function reference',
|
||||
}
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
|
||||
|
@ -928,12 +915,12 @@ export function FormulaEditor({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* fix the css here */}
|
||||
{isFullscreen && isHelpOpen ? (
|
||||
<div className="lnsFormula__docs lnsFormula__docs--inline">
|
||||
<MemoizedFormulaHelp
|
||||
isFullscreen={isFullscreen}
|
||||
indexPattern={indexPattern}
|
||||
operationDefinitionMap={visibleOperationsMap}
|
||||
<div className="lnsFormula__docs documentation__docs--inline">
|
||||
<LanguageDocumentationPopoverContent
|
||||
language="Formula"
|
||||
sections={documentationSections}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
@ -5,21 +5,8 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef, useState, useMemo } from 'react';
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiLink,
|
||||
EuiPopoverTitle,
|
||||
EuiText,
|
||||
EuiListGroupItem,
|
||||
EuiListGroup,
|
||||
EuiTitle,
|
||||
EuiFieldSearch,
|
||||
EuiHighlight,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import { Markdown } from '@kbn/kibana-react-plugin/public';
|
||||
import { groupBy } from 'lodash';
|
||||
import type { IndexPattern } from '../../../../../../types';
|
||||
|
@ -35,24 +22,13 @@ import type {
|
|||
} from '../..';
|
||||
import type { FormulaIndexPatternColumn } from '../formula';
|
||||
|
||||
function FormulaHelp({
|
||||
export function getDocumentationSections({
|
||||
indexPattern,
|
||||
operationDefinitionMap,
|
||||
isFullscreen,
|
||||
}: {
|
||||
indexPattern: IndexPattern;
|
||||
operationDefinitionMap: Record<string, GenericOperationDefinition>;
|
||||
isFullscreen: boolean;
|
||||
}) {
|
||||
const [selectedFunction, setSelectedFunction] = useState<string | undefined>();
|
||||
const scrollTargets = useRef<Record<string, HTMLElement>>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFunction && scrollTargets.current[selectedFunction]) {
|
||||
scrollTargets.current[selectedFunction].scrollIntoView();
|
||||
}
|
||||
}, [selectedFunction]);
|
||||
|
||||
const helpGroups: Array<{
|
||||
label: string;
|
||||
description?: string;
|
||||
|
@ -199,18 +175,14 @@ max(system.network.in.bytes, reducedTimeRange="30m")
|
|||
calculation: calculationFunction,
|
||||
math: mathOperations,
|
||||
comparison: comparisonOperations,
|
||||
} = useMemo(
|
||||
() =>
|
||||
groupBy(getPossibleFunctions(indexPattern), (key) => {
|
||||
if (key in operationDefinitionMap) {
|
||||
return operationDefinitionMap[key].documentation?.section;
|
||||
}
|
||||
if (key in tinymathFunctions) {
|
||||
return tinymathFunctions[key].section;
|
||||
}
|
||||
}),
|
||||
[operationDefinitionMap, indexPattern]
|
||||
);
|
||||
} = groupBy(getPossibleFunctions(indexPattern), (key) => {
|
||||
if (key in operationDefinitionMap) {
|
||||
return operationDefinitionMap[key].documentation?.section;
|
||||
}
|
||||
if (key in tinymathFunctions) {
|
||||
return tinymathFunctions[key].section;
|
||||
}
|
||||
});
|
||||
|
||||
// Es aggs
|
||||
helpGroups[2].items.push(
|
||||
|
@ -259,10 +231,6 @@ max(system.network.in.bytes, reducedTimeRange="30m")
|
|||
) : null}
|
||||
</>
|
||||
),
|
||||
checked:
|
||||
selectedFunction === `${key}: ${operationDefinitionMap[key].displayName}`
|
||||
? ('on' as const)
|
||||
: undefined,
|
||||
}))
|
||||
);
|
||||
|
||||
|
@ -277,16 +245,14 @@ max(system.network.in.bytes, reducedTimeRange="30m")
|
|||
items: [],
|
||||
});
|
||||
|
||||
const mathFns = useMemo(() => {
|
||||
return mathOperations.sort().map((key) => {
|
||||
const [description, examples] = tinymathFunctions[key].help.split(`\`\`\``);
|
||||
return {
|
||||
label: key,
|
||||
description: description.replace(/\n/g, '\n\n'),
|
||||
examples: examples ? `\`\`\`${examples}\`\`\`` : '',
|
||||
};
|
||||
});
|
||||
}, [mathOperations]);
|
||||
const mathFns = mathOperations.sort().map((key) => {
|
||||
const [description, examples] = tinymathFunctions[key].help.split(`\`\`\``);
|
||||
return {
|
||||
label: key,
|
||||
description: description.replace(/\n/g, '\n\n'),
|
||||
examples: examples ? `\`\`\`${examples}\`\`\`` : '',
|
||||
};
|
||||
});
|
||||
|
||||
helpGroups[4].items.push(
|
||||
...mathFns.map(({ label, description, examples }) => {
|
||||
|
@ -313,16 +279,14 @@ max(system.network.in.bytes, reducedTimeRange="30m")
|
|||
items: [],
|
||||
});
|
||||
|
||||
const comparisonFns = useMemo(() => {
|
||||
return comparisonOperations.sort().map((key) => {
|
||||
const [description, examples] = tinymathFunctions[key].help.split(`\`\`\``);
|
||||
return {
|
||||
label: key,
|
||||
description: description.replace(/\n/g, '\n\n'),
|
||||
examples: examples ? `\`\`\`${examples}\`\`\`` : '',
|
||||
};
|
||||
});
|
||||
}, [comparisonOperations]);
|
||||
const comparisonFns = comparisonOperations.sort().map((key) => {
|
||||
const [description, examples] = tinymathFunctions[key].help.split(`\`\`\``);
|
||||
return {
|
||||
label: key,
|
||||
description: description.replace(/\n/g, '\n\n'),
|
||||
examples: examples ? `\`\`\`${examples}\`\`\`` : '',
|
||||
};
|
||||
});
|
||||
|
||||
helpGroups[5].items.push(
|
||||
...comparisonFns.map(({ label, description, examples }) => {
|
||||
|
@ -339,119 +303,12 @@ max(system.network.in.bytes, reducedTimeRange="30m")
|
|||
})
|
||||
);
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const normalizedSearchText = searchText.trim().toLocaleLowerCase();
|
||||
|
||||
const filteredHelpGroups = helpGroups
|
||||
.map((group) => {
|
||||
const items = group.items.filter((helpItem) => {
|
||||
return (
|
||||
!normalizedSearchText || helpItem.label.toLocaleLowerCase().includes(normalizedSearchText)
|
||||
);
|
||||
});
|
||||
return { ...group, items };
|
||||
})
|
||||
.filter((group) => {
|
||||
if (group.items.length > 0 || !normalizedSearchText) {
|
||||
return true;
|
||||
}
|
||||
return group.label.toLocaleLowerCase().includes(normalizedSearchText);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiPopoverTitle className="lnsFormula__docsHeader" paddingSize="m">
|
||||
{i18n.translate('xpack.lens.formulaDocumentation.header', {
|
||||
defaultMessage: 'Formula reference',
|
||||
})}
|
||||
</EuiPopoverTitle>
|
||||
|
||||
<EuiFlexGroup
|
||||
className="lnsFormula__docsContent"
|
||||
gutterSize="none"
|
||||
responsive={false}
|
||||
alignItems="stretch"
|
||||
>
|
||||
<EuiFlexItem className="lnsFormula__docsSidebar" grow={1}>
|
||||
<EuiFlexGroup
|
||||
className="lnsFormula__docsSidebarInner"
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem className="lnsFormula__docsSearch" grow={false}>
|
||||
<EuiFieldSearch
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
setSearchText(e.target.value);
|
||||
}}
|
||||
placeholder={i18n.translate('xpack.lens.formulaSearchPlaceholder', {
|
||||
defaultMessage: 'Search functions',
|
||||
})}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem className="lnsFormula__docsNav">
|
||||
{filteredHelpGroups.map((helpGroup, index) => {
|
||||
return (
|
||||
<nav className="lnsFormula__docsNavGroup" key={helpGroup.label}>
|
||||
<EuiTitle size="xxs">
|
||||
<h6>
|
||||
<EuiLink
|
||||
className="lnsFormula__docsNavGroupLink"
|
||||
color="text"
|
||||
onClick={() => {
|
||||
setSelectedFunction(helpGroup.label);
|
||||
}}
|
||||
>
|
||||
<EuiHighlight search={searchText}>{helpGroup.label}</EuiHighlight>
|
||||
</EuiLink>
|
||||
</h6>
|
||||
</EuiTitle>
|
||||
|
||||
{helpGroup.items.length ? (
|
||||
<>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiListGroup gutterSize="none">
|
||||
{helpGroup.items.map((helpItem) => {
|
||||
return (
|
||||
<EuiListGroupItem
|
||||
key={helpItem.label}
|
||||
label={
|
||||
<EuiHighlight search={searchText}>{helpItem.label}</EuiHighlight>
|
||||
}
|
||||
size="s"
|
||||
onClick={() => {
|
||||
setSelectedFunction(helpItem.label);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</EuiListGroup>
|
||||
</>
|
||||
) : null}
|
||||
</nav>
|
||||
);
|
||||
})}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem className="lnsFormula__docsText" grow={2}>
|
||||
<EuiText size="s">
|
||||
<section
|
||||
className="lnsFormula__docsTextIntro"
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
scrollTargets.current[helpGroups[0].label] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Markdown
|
||||
markdown={i18n.translate('xpack.lens.formulaDocumentation.markdown', {
|
||||
defaultMessage: `## How it works
|
||||
const sections = {
|
||||
groups: helpGroups,
|
||||
initialSection: (
|
||||
<Markdown
|
||||
markdown={i18n.translate('xpack.lens.formulaDocumentation.markdown', {
|
||||
defaultMessage: `## How it works
|
||||
|
||||
Lens formulas let you do math using a combination of Elasticsearch aggregations and
|
||||
math functions. There are three main types of functions:
|
||||
|
@ -464,9 +321,9 @@ An example formula that uses all of these:
|
|||
|
||||
\`\`\`
|
||||
round(100 * moving_average(
|
||||
average(cpu.load.pct),
|
||||
window=10,
|
||||
kql='datacenter.name: east*'
|
||||
average(cpu.load.pct),
|
||||
window=10,
|
||||
kql='datacenter.name: east*'
|
||||
))
|
||||
\`\`\`
|
||||
|
||||
|
@ -482,55 +339,17 @@ queries. If your search has a single quote in it, use a backslash to escape, lik
|
|||
Math functions can take positional arguments, like pow(count(), 3) is the same as count() * count() * count()
|
||||
|
||||
Use the symbols +, -, /, and * to perform basic math.
|
||||
`,
|
||||
description:
|
||||
'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)',
|
||||
})}
|
||||
/>
|
||||
</section>
|
||||
`,
|
||||
description:
|
||||
'Text is in markdown. Do not translate function names, special characters, or field names like sum(bytes)',
|
||||
})}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
{helpGroups.slice(1).map((helpGroup, index) => {
|
||||
return (
|
||||
<section
|
||||
className="lnsFormula__docsTextGroup"
|
||||
key={helpGroup.label}
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
scrollTargets.current[helpGroup.label] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<h2>{helpGroup.label}</h2>
|
||||
|
||||
<p>{helpGroup.description}</p>
|
||||
|
||||
{helpGroups[index + 1].items.map((helpItem) => {
|
||||
return (
|
||||
<article
|
||||
className="lnsFormula__docsTextItem"
|
||||
key={helpItem.label}
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
scrollTargets.current[helpItem.label] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{helpItem.description}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
);
|
||||
return sections;
|
||||
}
|
||||
|
||||
export const MemoizedFormulaHelp = React.memo(FormulaHelp);
|
||||
|
||||
export function getFunctionSignatureLabel(
|
||||
name: string,
|
||||
operationDefinitionMap: ParamEditorProps<FormulaIndexPatternColumn>['operationDefinitionMap'],
|
||||
|
|
|
@ -17494,7 +17494,6 @@
|
|||
"xpack.lens.formula.editorHelpInlineHideLabel": "Masquer la référence des fonctions",
|
||||
"xpack.lens.formula.editorHelpInlineHideToolTip": "Masquer la référence des fonctions",
|
||||
"xpack.lens.formula.editorHelpInlineShowToolTip": "Afficher la référence des fonctions",
|
||||
"xpack.lens.formula.editorHelpOverlayToolTip": "Référence des fonctions",
|
||||
"xpack.lens.formula.fullScreenEnterLabel": "Développer",
|
||||
"xpack.lens.formula.fullScreenExitLabel": "Réduire",
|
||||
"xpack.lens.formula.kqlExtraArguments": "[kql]?: string, [lucene]?: string",
|
||||
|
@ -17513,7 +17512,6 @@
|
|||
"xpack.lens.formulaDocumentation.elasticsearchSection": "Elasticsearch",
|
||||
"xpack.lens.formulaDocumentation.elasticsearchSectionDescription": "Ces fonctions seront exécutées sur les documents bruts pour chaque ligne du tableau résultant, en agrégeant tous les documents correspondant aux dimensions de répartition en une seule valeur.",
|
||||
"xpack.lens.formulaDocumentation.filterRatio": "Rapport de filtre",
|
||||
"xpack.lens.formulaDocumentation.header": "Référence de formule",
|
||||
"xpack.lens.formulaDocumentation.mathSection": "Mathématique",
|
||||
"xpack.lens.formulaDocumentation.mathSectionDescription": "Ces fonctions seront exécutées pour chaque ligne du tableau résultant en utilisant des valeurs uniques de la même ligne calculées à l'aide d'autres fonctions.",
|
||||
"xpack.lens.formulaDocumentation.percentOfTotal": "Pourcentage du total",
|
||||
|
@ -17523,7 +17521,6 @@
|
|||
"xpack.lens.formulaExampleMarkdown": "Exemples",
|
||||
"xpack.lens.formulaFrequentlyUsedHeading": "Formules courantes",
|
||||
"xpack.lens.formulaPlaceholderText": "Saisissez une formule en combinant des fonctions avec la fonction mathématique, telle que :",
|
||||
"xpack.lens.formulaSearchPlaceholder": "Rechercher des fonctions",
|
||||
"xpack.lens.functions.collapse.args.byHelpText": "Colonnes selon lesquelles effectuer le regroupement - ces colonnes sont conservées telles quelles",
|
||||
"xpack.lens.functions.collapse.args.fnHelpText": "Fonction agrégée à appliquer",
|
||||
"xpack.lens.functions.collapse.args.metricHelpText": "Colonne pour laquelle calculer la fonction agrégée spécifiée",
|
||||
|
|
|
@ -17477,7 +17477,6 @@
|
|||
"xpack.lens.formula.editorHelpInlineHideLabel": "関数リファレンスを非表示",
|
||||
"xpack.lens.formula.editorHelpInlineHideToolTip": "関数リファレンスを非表示",
|
||||
"xpack.lens.formula.editorHelpInlineShowToolTip": "関数リファレンスを表示",
|
||||
"xpack.lens.formula.editorHelpOverlayToolTip": "機能リファレンス",
|
||||
"xpack.lens.formula.fullScreenEnterLabel": "拡張",
|
||||
"xpack.lens.formula.fullScreenExitLabel": "縮小",
|
||||
"xpack.lens.formula.kqlExtraArguments": "[kql]?:文字列、[lucene]?:文字列",
|
||||
|
@ -17496,7 +17495,6 @@
|
|||
"xpack.lens.formulaDocumentation.elasticsearchSection": "Elasticsearch",
|
||||
"xpack.lens.formulaDocumentation.elasticsearchSectionDescription": "これらの関数は結果テーブルの各行の未加工ドキュメントで実行され、内訳ディメンションと一致するすべてのドキュメントを単一の値に集約します。",
|
||||
"xpack.lens.formulaDocumentation.filterRatio": "フィルター比率",
|
||||
"xpack.lens.formulaDocumentation.header": "式リファレンス",
|
||||
"xpack.lens.formulaDocumentation.mathSection": "数学処理",
|
||||
"xpack.lens.formulaDocumentation.mathSectionDescription": "これらの関数は、他の関数で計算された同じ行の単一の値を使用して、結果テーブルの各行で実行されます。",
|
||||
"xpack.lens.formulaDocumentation.percentOfTotal": "合計の割合",
|
||||
|
@ -17506,7 +17504,6 @@
|
|||
"xpack.lens.formulaExampleMarkdown": "例",
|
||||
"xpack.lens.formulaFrequentlyUsedHeading": "一般的な式",
|
||||
"xpack.lens.formulaPlaceholderText": "関数を演算と組み合わせて式を入力します。例:",
|
||||
"xpack.lens.formulaSearchPlaceholder": "検索関数",
|
||||
"xpack.lens.functions.collapse.args.byHelpText": "グループ化の基準となる列。この列はそのまま保持されます",
|
||||
"xpack.lens.functions.collapse.args.fnHelpText": "適用する集計関数",
|
||||
"xpack.lens.functions.collapse.args.metricHelpText": "指定された集計関数を計算する列",
|
||||
|
|
|
@ -17502,7 +17502,6 @@
|
|||
"xpack.lens.formula.editorHelpInlineHideLabel": "隐藏函数引用",
|
||||
"xpack.lens.formula.editorHelpInlineHideToolTip": "隐藏函数引用",
|
||||
"xpack.lens.formula.editorHelpInlineShowToolTip": "显示函数引用",
|
||||
"xpack.lens.formula.editorHelpOverlayToolTip": "函数引用",
|
||||
"xpack.lens.formula.fullScreenEnterLabel": "展开",
|
||||
"xpack.lens.formula.fullScreenExitLabel": "折叠",
|
||||
"xpack.lens.formula.kqlExtraArguments": "[kql]?: string, [lucene]?: string",
|
||||
|
@ -17521,7 +17520,6 @@
|
|||
"xpack.lens.formulaDocumentation.elasticsearchSection": "Elasticsearch",
|
||||
"xpack.lens.formulaDocumentation.elasticsearchSectionDescription": "在原始文档上结果列表的每行都将执行这些函数,从而将匹配分解维度的所有文档聚合成单值。",
|
||||
"xpack.lens.formulaDocumentation.filterRatio": "筛选比",
|
||||
"xpack.lens.formulaDocumentation.header": "公式参考",
|
||||
"xpack.lens.formulaDocumentation.mathSection": "数学",
|
||||
"xpack.lens.formulaDocumentation.mathSectionDescription": "结果表的每行使用相同行中使用其他函数计算的单值执行这些函数。",
|
||||
"xpack.lens.formulaDocumentation.percentOfTotal": "总计的百分比",
|
||||
|
@ -17531,7 +17529,6 @@
|
|||
"xpack.lens.formulaExampleMarkdown": "示例",
|
||||
"xpack.lens.formulaFrequentlyUsedHeading": "常用公式",
|
||||
"xpack.lens.formulaPlaceholderText": "通过将函数与数学表达式组合来键入公式,如:",
|
||||
"xpack.lens.formulaSearchPlaceholder": "搜索函数",
|
||||
"xpack.lens.functions.collapse.args.byHelpText": "要作为分组依据的列 - 这些列将保持原样",
|
||||
"xpack.lens.functions.collapse.args.fnHelpText": "要应用的聚合函数",
|
||||
"xpack.lens.functions.collapse.args.metricHelpText": "用于计算以下项的指定聚合函数的列",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue