Skip to content

Commit

Permalink
Merge pull request #13 from MichaelMarcialis/lens/formula-doc-3-mm
Browse files Browse the repository at this point in the history 
[Lens] Custom Formula Docs Search Design Update
  • Loading branch information
@flash1293
flash1293 authored May 26, 2021
2 parents b84faf9 + a8f4ec8 commit 4b4bf18
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 107 deletions.
16 changes: 10 additions & 6 deletions ...ns/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,23 @@
}

.lnsFormula__docsSidebar {
height: 100%;
background: $euiColorLightestShade;
}

.lnsFormula__docsSidebarInner {
min-height: 0;

& > * + * {
border-top: $euiBorderThin;
}
}

.lnsFormula__docsSearch {
border: none;
border-bottom: $euiBorderThin;
box-shadow: none;
border-radius: 0;
padding: $euiSizeS;
}

.lnsFormula__docsNav {
@include euiYScroll;
background: $euiColorLightestShade;
}

.lnsFormula__docsNavGroup {
Expand Down
186 changes: 85 additions & 101 deletions ...ens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import {
EuiText,
EuiListGroupItem,
EuiListGroup,
EuiMarkdownFormat,
EuiTitle,
EuiButtonIcon,
EuiFieldSearch,
EuiHighlight,
} from '@elastic/eui';
import { Markdown } from '../../../../../../../../../src/plugins/kibana_react/public';
import { IndexPattern } from '../../../../types';
import { tinymathFunctions } from '../util';
import { getPossibleFunctions } from './math_completion';
Expand Down Expand Up @@ -56,7 +56,7 @@ function FormulaHelp({

const helpGroups: Array<{
label: string;
description?: JSX.Element;
description?: string;
items: Array<{ label: string; description?: JSX.Element }>;
}> = [];

Expand All @@ -71,14 +71,10 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSection', {
defaultMessage: 'Elasticsearch',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
defaultMessage:
'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
})}
</EuiText>
),
description: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
defaultMessage:
'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
}),
items: [],
});

Expand All @@ -97,15 +93,12 @@ function FormulaHelp({
label: key,
description: (
<>
<EuiTitle size="s">
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>
</EuiTitle>
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>

{operationDefinitionMap[key].documentation?.description ? (
<EuiMarkdownFormat>
{operationDefinitionMap[key].documentation!.description}
</EuiMarkdownFormat>
<Markdown markdown={operationDefinitionMap[key].documentation!.description} />
) : null}
</>
),
Expand All @@ -116,13 +109,12 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSection', {
defaultMessage: 'Column-wise calculation',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
})}
</EuiText>
description: i18n.translate(
'xpack.lens.formulaDocumentation.columnCalculationSectionDescription',
{
defaultMessage:
'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
}
),
items: [],
});
Expand All @@ -140,15 +132,12 @@ function FormulaHelp({
label: key,
description: (
<>
<EuiTitle size="s">
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>
</EuiTitle>
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>

{operationDefinitionMap[key].documentation?.description ? (
<EuiMarkdownFormat>
{operationDefinitionMap[key].documentation!.description}
</EuiMarkdownFormat>
<Markdown markdown={operationDefinitionMap[key].documentation!.description} />
) : null}
</>
),
Expand All @@ -163,14 +152,10 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.mathSection', {
defaultMessage: 'Math',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
})}
</EuiText>
),
description: i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
}),
items: [],
});

Expand All @@ -194,10 +179,9 @@ function FormulaHelp({
label,
description: (
<>
<EuiTitle size="s">
<h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>
</EuiTitle>
<EuiMarkdownFormat>{`${description}${examples}`}</EuiMarkdownFormat>
<h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>

<Markdown markdown={`${description}${examples}`} />
</>
),
};
Expand Down Expand Up @@ -238,16 +222,14 @@ function FormulaHelp({
responsive={false}
alignItems="stretch"
>
<EuiFlexItem grow={1}>
<EuiFlexItem className="lnsFormula__docsSidebar" grow={1}>
<EuiFlexGroup
className="lnsFormula__docsSidebarInner"
direction="column"
gutterSize="none"
responsive={false}
className="lnsFormula__docsSidebar"
>
<EuiFlexItem grow={false}>
<EuiFlexItem className="lnsFormula__docsSearch" grow={false}>
<EuiFieldSearch
className="lnsFormula__docsSearch"
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
Expand All @@ -257,7 +239,8 @@ function FormulaHelp({
})}
/>
</EuiFlexItem>
<EuiFlexItem className="lnsFormula__docsNav" grow={true}>

<EuiFlexItem className="lnsFormula__docsNav">
{helpGroups.map((helpGroup, index) => {
return (
<nav className="lnsFormula__docsNavGroup" key={helpGroup.label}>
Expand Down Expand Up @@ -303,16 +286,18 @@ function FormulaHelp({
</EuiFlexItem>

<EuiFlexItem className="lnsFormula__docsText" grow={2}>
<section
ref={(el) => {
if (el) {
scrollTargets.current[helpGroups[0].label] = el;
}
}}
>
<EuiMarkdownFormat>
{i18n.translate('xpack.lens.formulaDocumentation', {
defaultMessage: `
<EuiText size="s">
<section
className="lnsFormula__docsTextIntro"
ref={(el) => {
if (el) {
scrollTargets.current[helpGroups[0].label] = el;
}
}}
>
<Markdown
markdown={i18n.translate('xpack.lens.formulaDocumentation', {
defaultMessage: `
## How it works
Lens formulas let you do math using a combination of Elasticsearch aggregations and
Expand Down Expand Up @@ -345,47 +330,46 @@ Math functions can take positional arguments, like pow(count(), 3) is the same a
Use the symbols +, -, /, and * to perform basic math.
`,
description:
'Text is in markdown. Do not translate function names or field names like sum(bytes)',
})}
</EuiMarkdownFormat>
</section>

{helpGroups.slice(1).map((helpGroup, index) => {
return (
<section
className="lnsFormula__docsTextGroup"
key={helpGroup.label}
ref={(el) => {
if (el) {
scrollTargets.current[helpGroup.label] = el;
}
}}
>
<EuiTitle size="xxs">
<h2>{helpGroup.label}</h2>
</EuiTitle>

{helpGroup.description}

{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>
);
description:
'Text is in markdown. Do not translate function names or field names like sum(bytes)',
})}
</section>
);
})}
/>
</section>

{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>
</>
Expand Down

0 comments on commit 4b4bf18

Please sign in to comment.