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

[Lens] Move custom chart icons into lens package (#138413)

Browse source 
* [Lens] Move custom chart icons into lens package (#138101)

* [Lens] Move custom chart icons into lens package

Closes #135230

* add storybook

* fix merge conflicts

* [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest'

* clenaup

* add region_map icon into package

* fix styles

* Update README.md

* fix ci

* try to fix CI

* fix PR comments

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* RegionMap -> LensIconRegionMap

* lensIcons -> lens_icons

* move to x-pack packages

* [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest'

* move to x-pack/packages/lens/icons

* fix jest

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

* fix CI

* use emotion lib

* remove lensAnnotationIconNoFill and lensAnnotationIconFill

* remove duplicated code

* cleanup

* [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest'

* cleanup

* renaming

* fix jest config

* remove extra icons

* move icons out of main chunk

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alexey Antonov 2022-08-17 13:24:18 +03:00 • committed by GitHub
parent 8dfba64acb
commit 5f84d8e071
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
106 changed files with 832 additions and 1002 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.buildkite/scripts/steps/storybooks/build_and_upload.ts
View file

@ -17,6 +17,7 @@ const STORYBOOKS = [
'ci_composite',
'cloud',
'coloring',
'chart_icons',
'controls',
'custom_integrations',
'dashboard_enhanced',

2
package.json
View file

@ -140,6 +140,7 @@
"@kbn/analytics-shippers-fullstory": "link:bazel-bin/packages/analytics/shippers/fullstory",
"@kbn/apm-config-loader": "link:bazel-bin/packages/kbn-apm-config-loader",
"@kbn/apm-utils": "link:bazel-bin/packages/kbn-apm-utils",
"@kbn/chart-icons": "link:bazel-bin/packages/kbn-chart-icons",
"@kbn/coloring": "link:bazel-bin/packages/kbn-coloring",
"@kbn/config": "link:bazel-bin/packages/kbn-config",
"@kbn/config-mocks": "link:bazel-bin/packages/kbn-config-mocks",
@ -779,6 +780,7 @@
"@types/kbn__axe-config": "link:bazel-bin/packages/kbn-axe-config/npm_module_types",
"@types/kbn__bazel-packages": "link:bazel-bin/packages/kbn-bazel-packages/npm_module_types",
"@types/kbn__bazel-runner": "link:bazel-bin/packages/kbn-bazel-runner/npm_module_types",
"@types/kbn__chart-icons": "link:bazel-bin/packages/kbn-chart-icons/npm_module_types",
"@types/kbn__ci-stats-core": "link:bazel-bin/packages/kbn-ci-stats-core/npm_module_types",
"@types/kbn__ci-stats-performance-metrics": "link:bazel-bin/packages/kbn-ci-stats-performance-metrics/npm_module_types",
"@types/kbn__ci-stats-reporter": "link:bazel-bin/packages/kbn-ci-stats-reporter/npm_module_types",

2
packages/BUILD.bazel
View file

@ -133,6 +133,7 @@ filegroup(
"//packages/kbn-babel-preset:build",
"//packages/kbn-bazel-packages:build",
"//packages/kbn-bazel-runner:build",
"//packages/kbn-chart-icons:build",
"//packages/kbn-ci-stats-core:build",
"//packages/kbn-ci-stats-performance-metrics:build",
"//packages/kbn-ci-stats-reporter:build",
@ -393,6 +394,7 @@ filegroup(
"//packages/kbn-axe-config:build_types",
"//packages/kbn-bazel-packages:build_types",
"//packages/kbn-bazel-runner:build_types",
"//packages/kbn-chart-icons:build_types",
"//packages/kbn-ci-stats-core:build_types",
"//packages/kbn-ci-stats-performance-metrics:build_types",
"//packages/kbn-ci-stats-reporter:build_types",

6
src/plugins/chart_expressions/expression_partition_vis/public/icons/index.ts → packages/kbn-chart-icons/.storybook/main.js
View file

@ -6,8 +6,4 @@
* Side Public License, v 1.
*/
export { PieIcon } from './pie';
export { DonutIcon } from './donut';
export { TreemapIcon } from './treemap';
export { MosaicIcon } from './mosaic';
export { WaffleIcon } from './waffle';
module.exports = require('@kbn/storybook').defaultConfig;

138
packages/kbn-chart-icons/BUILD.bazel Normal file
View file

@ -0,0 +1,138 @@
load("@npm//@bazel/typescript:index.bzl", "ts_config")
load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
PKG_DIRNAME = "kbn-chart-icons"
PKG_REQUIRE_NAME = "@kbn/chart-icons"
SOURCE_FILES = glob(
[
"src/**/*.ts",
"src/**/*.tsx"
],
exclude = [
"**/*.test.*",
"**/*.stories.*"
],
)
SRCS = SOURCE_FILES
filegroup(
name = "srcs",
srcs = SRCS,
)
NPM_MODULE_EXTRA_FILES = [
"package.json",
]
# In this array place runtime dependencies, including other packages and NPM packages
# which must be available for this code to run.
#
# To reference other packages use:
# "//repo/relative/path/to/package"
# eg. "//packages/kbn-utils"
#
# To reference a NPM package use:
# "@npm//name-of-package"
# eg. "@npm//lodash"
RUNTIME_DEPS = [
"//packages/kbn-ui-theme",
"@npm//react",
"@npm//@elastic/eui",
"@npm//@emotion/css",
]
# In this array place dependencies necessary to build the types, which will include the
# :npm_module_types target of other packages and packages from NPM, including @types/*
# packages.
#
# To reference the types for another package use:
# "//repo/relative/path/to/package:npm_module_types"
# eg. "//packages/kbn-utils:npm_module_types"
#
# References to NPM packages work the same as RUNTIME_DEPS
TYPES_DEPS = [
"//packages/kbn-ui-theme:npm_module_types",
"@npm//@types/node",
"@npm//@types/jest",
"@npm//@types/react",
"@npm//@elastic/eui",
"@npm//@emotion/css",
]
jsts_transpiler(
name = "target_node",
srcs = SRCS,
build_pkg_name = package_name(),
root_input_dir = "src",
)
jsts_transpiler(
name = "target_web",
srcs = SRCS,
build_pkg_name = package_name(),
root_input_dir = "src",
web = True,
additional_args = [
"--copy-files",
"--quiet"
],
)
ts_config(
name = "tsconfig",
src = "tsconfig.json",
deps = [
"//:tsconfig.base.json",
"//:tsconfig.bazel.json",
],
)
ts_project(
name = "tsc_types",
args = ['--pretty'],
srcs = SRCS,
deps = TYPES_DEPS,
declaration = True,
declaration_map = True,
emit_declaration_only = True,
out_dir = "target_types",
root_dir = "src",
tsconfig = ":tsconfig",
)
js_library(
name = PKG_DIRNAME,
srcs = NPM_MODULE_EXTRA_FILES,
deps = RUNTIME_DEPS + [":target_node", ":target_web"],
package_name = PKG_REQUIRE_NAME,
visibility = ["//visibility:public"],
)
pkg_npm(
name = "npm_module",
deps = [":" + PKG_DIRNAME],
)
filegroup(
name = "build",
srcs = [":npm_module"],
visibility = ["//visibility:public"],
)
pkg_npm_types(
name = "npm_module_types",
srcs = SRCS,
deps = [":tsc_types"],
package_name = PKG_REQUIRE_NAME,
tsconfig = ":tsconfig",
visibility = ["//visibility:public"],
)
filegroup(
name = "build_types",
srcs = [":npm_module_types"],
visibility = ["//visibility:public"],
)

5
packages/kbn-chart-icons/README.md Normal file
View file

@ -0,0 +1,5 @@
# @kbn/chart-icons
This package contains svg shared assets used in charts
It can be removes when the [EuiIllustrations](https://github.com/elastic/eui/discussions/5546) initiative is shipped.

13
packages/kbn-chart-icons/jest.config.js Normal file
View file

@ -0,0 +1,13 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
module.exports = {
preset: '@kbn/test/jest_node',
rootDir: '../..',
roots: ['<rootDir>/packages/kbn-chart-icons'],
};

8
packages/kbn-chart-icons/package.json Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@kbn/chart-icons",
"private": true,
"version": "1.0.0",
"main": "./target_node/index.js",
"browser": "./target_web/index.js",
"license": "SSPL-1.0 OR Elastic License 2.0"
}

221
packages/kbn-chart-icons/src/__stories__/icons.stories.tsx Normal file
View file

@ -0,0 +1,221 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { FC, ComponentType } from 'react';
import { EuiFlexItem, EuiFlexGroup, EuiEmptyPrompt, EuiForm, IconType } from '@elastic/eui';
import { ComponentStory } from '@storybook/react';
import {
IconCircle,
IconTriangle,
EuiIconAxisBottom,
EuiIconAxisLeft,
EuiIconAxisRight,
EuiIconAxisTop,
IconChartArea,
IconChartAreaPercentage,
IconChartAreaStacked,
IconChartBar,
IconChartBarAnnotations,
IconChartBarHorizontal,
IconChartBarHorizontalPercentage,
IconChartBarHorizontalStacked,
IconChartBarPercentage,
IconChartBarReferenceLine,
IconChartBarStacked,
IconChartDatatable,
IconChartDonut,
IconChartLine,
IconChartMetric,
IconChartMixedXy,
IconChartMosaic,
IconChartPie,
IconChartTreemap,
IconChartWaffle,
DropIllustration,
GlobeIllustration,
EuiIconLegend,
IconRegionMap,
IconChartHeatmap,
IconChartHorizontalBullet,
IconChartVerticalBullet,
} from '..';
export default {
title: 'Chart Icons',
decorators: [(story: Function) => <EuiForm>{story()}</EuiForm>],
};
const IconsArray: Array<{
title: string;
Component: ComponentType<{ title: string; titleId: string }>;
}> = [
{
title: 'EuiIconAxisBottom',
Component: EuiIconAxisBottom,
},
{
title: 'EuiIconAxisLeft',
Component: EuiIconAxisLeft,
},
{
title: 'EuiIconAxisRight',
Component: EuiIconAxisRight,
},
{
title: 'EuiIconAxisTop',
Component: EuiIconAxisTop,
},
{
title: 'IconChartArea',
Component: IconChartArea,
},
{
title: 'IconChartAreaPercentage',
Component: IconChartAreaPercentage,
},
{
title: 'IconChartAreaStacked',
Component: IconChartAreaStacked,
},
{
title: 'IconChartBar',
Component: IconChartBar,
},
{
title: 'IconChartBarAnnotations',
Component: IconChartBarAnnotations,
},
{
title: 'IconChartBarHorizontal',
Component: IconChartBarHorizontal,
},
{
title: 'IconChartBarHorizontalPercentage',
Component: IconChartBarHorizontalPercentage,
},
{
title: 'IconChartBarHorizontalStacked',
Component: IconChartBarHorizontalStacked,
},
{
title: 'IconChartBarPercentage',
Component: IconChartBarPercentage,
},
{
title: 'IconChartBarReferenceLine',
Component: IconChartBarReferenceLine,
},
{
title: 'IconChartBarStacked',
Component: IconChartBarStacked,
},
{
title: 'IconChartDatatable',
Component: IconChartDatatable,
},
{
title: 'IconChartDonut',
Component: IconChartDonut,
},
{
title: 'IconChartLine',
Component: IconChartLine,
},
{
title: 'IconChartMetric',
Component: IconChartMetric,
},
{
title: 'IconChartMixedXy',
Component: IconChartMixedXy,
},
{
title: 'IconChartMosaic',
Component: IconChartMosaic,
},
{
title: 'IconChartPie',
Component: IconChartPie,
},
{
title: 'IconChartTreemap',
Component: IconChartTreemap,
},
{
title: 'IconChartWaffle',
Component: IconChartWaffle,
},
{
title: 'DropIllustration',
Component: DropIllustration,
},
{
title: 'GlobeIllustration',
Component: GlobeIllustration,
},
{
title: 'EuiIconLegend',
Component: EuiIconLegend,
},
{
title: 'IconCircle',
Component: IconCircle,
},
{
title: 'IconTriangle',
Component: IconTriangle,
},
{
title: 'IconRegionMap',
Component: IconRegionMap,
},
{
title: 'IconChartHeatmap',
Component: IconChartHeatmap,
},
{
title: 'IconChartHorizontalBullet',
Component: IconChartHorizontalBullet,
},
{
title: 'IconChartVerticalBullet',
Component: IconChartVerticalBullet,
},
];
interface RootComponentProps {
icons: typeof IconsArray;
}
function RootComponent(props: RootComponentProps) {
return (
<EuiFlexGroup direction={'row'} responsive={false} wrap={true}>
{props.icons.map((i) => (
<EuiFlexItem>
<EuiEmptyPrompt
style={{ minWidth: '250px' }}
hasBorder={true}
hasShadow={true}
iconType={i.Component as IconType}
title={<>{i.title}</>}
titleSize={'s'}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
);
}
const Template: ComponentStory<FC<RootComponentProps>> = (args) => <RootComponent {...args} />;
export const Default = Template.bind({});
Default.args = {
icons: IconsArray,
};

7
src/plugins/chart_expressions/expression_xy/public/icons/circle.tsx → packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
View file

@ -8,9 +8,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import classnames from 'classnames';
import { cx } from '@emotion/css';
import { noFill } from '../common_styles';
export const CircleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width={16}
height={16}
@ -25,7 +26,7 @@ export const CircleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'typ
stroke="currentColor"
cx="8"
cy="8"
className={classnames('lensAnnotationIconNoFill', props.className)}
className={cx(noFill, props.className)}
r="7"
/>
</svg>

5
x-pack/plugins/lens/public/assets/annotation_icons/index.tsx → packages/kbn-chart-icons/src/assets/annotation_icons/index.tsx
View file

@ -1,8 +1,9 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
export { IconCircle } from './circle';

7
src/plugins/chart_expressions/expression_xy/public/icons/triangle.tsx → packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
View file

@ -8,9 +8,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import classnames from 'classnames';
import { cx } from '@emotion/css';
import { noFill } from '../common_styles';
export const TriangleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width="16"
height="16"
@ -25,7 +26,7 @@ export const TriangleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
strokeWidth="1"
stroke="currentColor"
d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
className={classnames('lensAnnotationIconNoFill', props.className)}
className={cx(noFill, props.className)}
/>
</svg>
);

7
x-pack/plugins/lens/public/assets/axis_bottom.tsx → packages/kbn-chart-icons/src/assets/axis_bottom.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
export const EuiIconAxisBottom = ({
title,

7
x-pack/plugins/lens/public/assets/axis_left.tsx → packages/kbn-chart-icons/src/assets/axis_left.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
export const EuiIconAxisLeft = ({
title,

7
x-pack/plugins/lens/public/assets/axis_right.tsx → packages/kbn-chart-icons/src/assets/axis_right.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
export const EuiIconAxisRight = ({
title,

7
x-pack/plugins/lens/public/assets/axis_top.tsx → packages/kbn-chart-icons/src/assets/axis_top.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
export const EuiIconAxisTop = ({
title,

7
src/plugins/chart_expressions/expression_xy/public/icons/area.tsx → packages/kbn-chart-icons/src/assets/chart_area.tsx
View file

@ -8,8 +8,9 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const AreaIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -22,11 +23,11 @@ export const AreaIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

12
x-pack/plugins/lens/public/assets/chart_area_percentage.tsx → packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartAreaPercentage = ({
export const IconChartAreaPercentage = ({
title,
titleId,
...props
@ -25,11 +27,11 @@ export const LensIconChartAreaPercentage = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

16
x-pack/plugins/lens/public/assets/chart_area_stacked.tsx → packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
View file

@ -1,18 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartAreaStacked = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={31}
@ -25,11 +23,11 @@ export const LensIconChartAreaStacked = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

7
src/plugins/chart_expressions/expression_xy/public/icons/bar.tsx → packages/kbn-chart-icons/src/assets/chart_bar.tsx
View file

@ -8,8 +8,9 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -22,11 +23,11 @@ export const BarIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

12
x-pack/plugins/lens/public/assets/chart_bar_annotations.tsx → packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartBarAnnotations = ({
export const IconChartBarAnnotations = ({
title,
titleId,
...props
@ -25,11 +27,11 @@ export const LensIconChartBarAnnotations = ({
{title ? <title id={titleId}>{title}</title> : null}
<g>
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M16 8a1 1 0 011-1h4a1 1 0 011 1v13a1 1 0 01-1 1h-4a1 1 0 01-1-1V8zM1 9a1 1 0 00-1 1v11a1 1 0 001 1h4a1 1 0 001-1V10a1 1 0 00-1-1H1zM9 16a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zM25 11a1 1 0 00-1 1v9a1 1 0 001 1h4a1 1 0 001-1v-9a1 1 0 00-1-1h-4z"
/>
<path
className="lensChartIcon__accent"
className={colors.accent}
d="M10 1a1 1 0 011-1h3a1 1 0 011 1h3v4h-3a1 1 0 01-1-1h-2v9a1 1 0 11-2 0V1z"
/>
</g>

11
src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal.tsx → packages/kbn-chart-icons/src/assets/chart_bar_horizontal.tsx
View file

@ -8,8 +8,13 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarHorizontalIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartBarHorizontal = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -22,11 +27,11 @@ export const BarHorizontalIcon = ({ title, titleId, ...props }: Omit<EuiIconProp
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

7
src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_percentage.tsx → packages/kbn-chart-icons/src/assets/chart_bar_horizontal_percentage.tsx
View file

@ -8,8 +8,9 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarHorizontalPercentageIcon = ({
export const IconChartBarHorizontalPercentage = ({
title,
titleId,
...props
@ -26,11 +27,11 @@ export const BarHorizontalPercentageIcon = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M20 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h19zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H17zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H18z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-7v-6h7zm-.222-8C29.453 8 30 8.448 30 9v4c0 .552-.547 1-1.222 1H19V8h9.778zm.18-8C29.534 0 30 .448 30 1v4c0 .552-.466 1-1.042 1H20V0h8.958z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

7
src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_stacked.tsx → packages/kbn-chart-icons/src/assets/chart_bar_horizontal_stacked.tsx
View file

@ -8,8 +8,9 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarHorizontalStackedIcon = ({
export const IconChartBarHorizontalStacked = ({
title,
titleId,
...props
@ -26,11 +27,11 @@ export const BarHorizontalStackedIcon = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M18 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h17zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H15zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H16z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-9v-6h9zm-9.222-8C20.453 8 21 8.448 21 9v4c0 .552-.547 1-1.222 1H17V8h2.778zm3.18-8C23.534 0 24 .448 24 1v4c0 .552-.466 1-1.042 1H18V0h4.958z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

11
src/plugins/chart_expressions/expression_xy/public/icons/bar_percentage.tsx → packages/kbn-chart-icons/src/assets/chart_bar_percentage.tsx
View file

@ -8,8 +8,13 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartBarPercentage = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -22,11 +27,11 @@ export const BarPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProp
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M29 0a1 1 0 011 1v11h-6V1a1 1 0 011-1h4zM5 0a1 1 0 011 1v10H0V1a1 1 0 011-1h4zm16 0a1 1 0 011 1v10h-6V1a1 1 0 011-1h4zm-8 0a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

18
x-pack/plugins/lens/public/assets/chart_bar_reference_line.tsx → packages/kbn-chart-icons/src/assets/chart_bar_reference_line.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartBarReferenceLine = ({
export const IconChartBarReferenceLine = ({
title,
titleId,
...props
@ -25,16 +27,10 @@ export const LensIconChartBarReferenceLine = ({
{title ? <title id={titleId}>{title}</title> : null}
<g>
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M3.2 4.79997C3.2 4.50542 2.96122 4.26663 2.66667 4.26663H0.533333C0.238784 4.26663 0 4.50542 0 4.79997V6.39997H3.2V4.79997ZM3.2 9.59997H0V13.3333C0 13.6279 0.238784 13.8666 0.533333 13.8666H2.66667C2.96122 13.8666 3.2 13.6279 3.2 13.3333V9.59997ZM8.53333 9.59997H11.7333V13.3333C11.7333 13.6279 11.4946 13.8666 11.2 13.8666H9.06667C8.77211 13.8666 8.53333 13.6279 8.53333 13.3333V9.59997ZM11.7333 6.39997H8.53333V2.66663C8.53333 2.37208 8.77211 2.1333 9.06667 2.1333H11.2C11.4946 2.1333 11.7333 2.37208 11.7333 2.66663V6.39997ZM12.8 9.59997V13.3333C12.8 13.6279 13.0388 13.8666 13.3333 13.8666H15.4667C15.7612 13.8666 16 13.6279 16 13.3333V9.59997H12.8ZM16 6.39997V5.86663C16 5.57208 15.7612 5.3333 15.4667 5.3333H13.3333C13.0388 5.3333 12.8 5.57208 12.8 5.86663V6.39997H16ZM7.46667 11.2C7.46667 10.9054 7.22789 10.6666 6.93333 10.6666H4.8C4.50544 10.6666 4.26667 10.9054 4.26667 11.2V13.3333C4.26667 13.6279 4.50544 13.8666 4.8 13.8666H6.93333C7.22789 13.8666 7.46667 13.6279 7.46667 13.3333V11.2Z"
/>
<rect
y="7.4668"
width="16"
height="1.06667"
rx="0.533334"
className="lensChartIcon__accent"
/>
<rect y="7.4668" width="16" height="1.06667" rx="0.533334" className={colors.accent} />
</g>
</svg>
);

7
src/plugins/chart_expressions/expression_xy/public/icons/bar_stacked.tsx → packages/kbn-chart-icons/src/assets/chart_bar_stacked.tsx
View file

@ -8,8 +8,9 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const BarStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartBarStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,12 +22,12 @@ export const BarStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps,
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
/>
<path
d="M29 1a1 1 0 011 1v10h-6V2a1 1 0 011-1h4zM5 7a1 1 0 011 1v3H0V8a1 1 0 011-1h4zm16-4a1 1 0 011 1v7h-6V4a1 1 0 011-1h4zm-8-3a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

16
x-pack/plugins/lens/public/assets/chart_datatable.tsx → packages/kbn-chart-icons/src/assets/chart_datatable.tsx
View file

@ -1,18 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartDatatable = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
export const IconChartDatatable = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -25,11 +23,11 @@ export const LensIconChartDatatable = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M11 18a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V7a1 1 0 011-1h10zm18-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h28z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M20 18a1 1 0 011 1v2a1 1 0 01-.883.993L20 22h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 16h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 10h-5a1 1 0 01-1-1V7a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1V7a1 1 0 011-1h5z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

12
x-pack/plugins/lens/public/assets/chart_donut.tsx → packages/kbn-chart-icons/src/assets/chart_donut.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,11 +23,11 @@ export const LensIconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconPro
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M19.21 21.119a11 11 0 006.595-8.1c.11-.577-.355-1.082-.942-1.082H20.75c-.477 0-.878.342-1.046.788a5.028 5.028 0 11-6.474-6.474c.447-.168.788-.569.788-1.046V1.094c0-.588-.505-1.053-1.082-.943a11 11 0 106.272 20.968h.002z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M22.778 3.176A11 11 0 0017.084.154C16.507.042 16 .507 16 1.095v4.116c0 .475.34.875.784 1.044l.14.055A5.026 5.026 0 0119.7 9.17c.168.445.568.784 1.044.784h4.115c.588 0 1.053-.506.942-1.084a11 11 0 00-3.023-5.694z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

10
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_icon.tsx → packages/kbn-chart-icons/src/assets/chart_heatmap.tsx
View file

@ -8,11 +8,9 @@
import { EuiIconProps } from '@elastic/eui';
import React from 'react';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
import { colors } from './common_styles';
export const IconChartHeatmap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
return (
<svg
width={30}
@ -25,11 +23,11 @@ export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'ty
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
className={colors.subdued}
d="M16 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V1zM0 17a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4zm17-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V9a1 1 0 00-1-1h-4zm-1 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4zm9-17a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1h-4z"
/>
<path
css={chartIcon.accent}
className={colors.accent}
d="M0 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1zm0 8a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9zm9-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1H9zM8 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zm15-7a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"
/>
</svg>

14
src/plugins/chart_expressions/expression_gauge/public/components/icons/horizontal_bullet_icon.tsx → packages/kbn-chart-icons/src/assets/chart_horizontal_bullet.tsx
View file

@ -8,11 +8,13 @@
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
import { colors } from './common_styles';
export const IconChartHorizontalBullet = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => {
return (
<svg
width="30"
@ -25,11 +27,11 @@ export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconP
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
className={colors.subdued}
d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
/>
<path
css={chartIcon.accent}
className={colors.accent}
d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
/>
</svg>

12
x-pack/plugins/lens/public/assets/chart_line.tsx → packages/kbn-chart-icons/src/assets/chart_line.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,11 +23,11 @@ export const LensIconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProp
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

12
x-pack/plugins/lens/public/assets/chart_metric.tsx → packages/kbn-chart-icons/src/assets/chart_metric.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,11 +23,11 @@ export const LensIconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconPr
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M25 0a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V1a1 1 0 011-1h20zm-9.878 3c-1.887 0-3.265 1.107-3.26 2.61-.005 1.054.67 1.938 1.672 2.157v.067l-.155.03a2.453 2.453 0 00-1.879 2.394C11.495 11.84 12.997 13 15.122 13c2.105 0 3.612-1.16 3.617-2.742-.005-1.217-.903-2.234-2.035-2.424v-.067l.162-.042c.896-.275 1.507-1.12 1.511-2.116C18.373 4.112 16.994 3 15.122 3zm0 5.542c1.036 0 1.796.665 1.806 1.592-.01.898-.718 1.507-1.806 1.507-1.103 0-1.816-.609-1.806-1.507-.01-.932.755-1.592 1.806-1.592zm0-4.164c.908 0 1.53.561 1.54 1.398-.01.85-.651 1.43-1.54 1.43-.903 0-1.55-.584-1.54-1.43-.01-.837.618-1.398 1.54-1.398z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M1 18h28a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

14
x-pack/plugins/lens/public/assets/chart_mixed_xy.tsx → packages/kbn-chart-icons/src/assets/chart_mixed_xy.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,15 +23,15 @@ export const LensIconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconP
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M24 16l.186-.002.345-.02.266-.03.334-.058.193-.043.25-.067.223-.07.215-.074.209-.079.305-.124c.166-.07.34-.148.524-.234l.285-.135 1.202-.588c.428-.203.728-.326.966-.396.146-.044.27-.067.384-.076L30 14v7a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-7.994 5.865-7.997L19.032 10l.541 1.205.272.595.29.612c.517 1.069.955 1.842 1.391 2.391.08.1.16.194.241.28.095.101.189.191.283.272l.143.114c.218.164.446.284.69.368.207.071.426.116.662.14l.14.012.154.008L24 16zm6-12v6l-.186.002-.345.02-.266.03-.331.057-.196.044-.25.067-.304.097-.134.047a9.492 9.492 0 00-.386.15l-.128.053c-.166.07-.34.148-.524.234l-.285.135-1.264.618-.352.159-.187.078-.256.095-.178.054a13.872 13.872 0 01-.38-.687l-.16-.311-.233-.47-.016-.472H24c1 0 3-6 6-6z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M30 13c-.507 0-.988.146-1.89.571l-1.209.592C25.621 14.78 24.924 15 24 15c-1.384 0-2.003-.865-3.516-4.206l-.637-1.42-.346-.749-.213-.445C18.572 6.698 18.127 6 18 6c-.466 0-.967.252-1.99.997l-.891.659-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.384 0 2.003.865 3.516 4.206l.637 1.42.346.749.213.445C23.428 12.302 23.873 13 24 13c.507 0 .988-.146 1.89-.571l1.209-.592C28.379 11.22 29.076 11 30 11v2z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M6 13v7.889C6 21.503 5.552 22 5 22H1c-.552 0-1-.497-1-1.111V13a1 1 0 011-1h4a1 1 0 011 1zm8-1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4a1 1 0 011 1zm8 5v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4a1 1 0 011 1zm8 2v2a1 1 0 01-1 1h-4a1 1 0 01-1-1v-2a1 1 0 011-1h4a1 1 0 011 1z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

12
x-pack/plugins/lens/public/assets/chart_mosaic.tsx → packages/kbn-chart-icons/src/assets/chart_mosaic.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -20,11 +22,11 @@ export const LensIconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconPr
>
{title ? <title id={titleId} /> : null}
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M2 0a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1H2zM2 14a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1H2zM11 13a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v-8zM12 0a1 1 0 100 2h6a1 1 0 100-2h-6zM21 15a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01-1-1v-6zM22 0a1 1 0 00-1 1v4a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1h-6z"
/>
<path
className="lensChartIcon__accent"
className={colors.accent}
d="M11 5a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1V5zM1 7a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V7zM22 8a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1h-6z"
/>
</svg>

12
x-pack/plugins/lens/public/assets/chart_pie.tsx → packages/kbn-chart-icons/src/assets/chart_pie.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,11 +23,11 @@ export const LensIconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M17.827 21.189a10.001 10.001 0 005.952-7.148c.124-.578-.343-1.091-.935-1.091H14a1 1 0 01-1-1V3.106c0-.592-.513-1.059-1.092-.935a10 10 0 105.919 19.018z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M22.462 3.538A12.29 12.29 0 0016.094.16C15.512.048 15 .514 15 1.106V10a1 1 0 001 1h8.895c.591 0 1.057-.512.945-1.094a12.288 12.288 0 00-3.378-6.368z"
className="lensChartIcon__accent"
className={colors.accent}
/>
</svg>
);

14
x-pack/plugins/lens/public/assets/chart_treemap.tsx → packages/kbn-chart-icons/src/assets/chart_treemap.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -21,15 +23,15 @@ export const LensIconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconP
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 1a1 1 0 011-1h13a1 1 0 011 1v20a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
<path
d="M17 1a1 1 0 011-1h11a1 1 0 011 1v12a1 1 0 01-1 1H18a1 1 0 01-1-1V1z"
className="lensChartIcon__accent"
className={colors.accent}
/>
<path
d="M29 16H18a1 1 0 00-1 1v4a1 1 0 001 1h11a1 1 0 001-1v-4a1 1 0 00-1-1z"
className="lensChartIcon__subdued"
className={colors.subdued}
/>
</svg>
);

14
src/plugins/chart_expressions/expression_gauge/public/components/icons/vertical_bullet_icon.tsx → packages/kbn-chart-icons/src/assets/chart_vertical_bullet.tsx
View file

@ -8,11 +8,13 @@
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
import { colors } from './common_styles';
export const IconChartVerticalBullet = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => {
return (
<svg
width="30"
@ -25,11 +27,11 @@ export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconPro
>
{title ? <title id={titleId}>{title}</title> : null}
<path
css={chartIcon.subdued}
className={colors.subdued}
d="M16 22a1 1 0 01-1-1V4a1 1 0 011-1h4a1 1 0 011 1v17a1 1 0 01-1 1h-4z"
/>
<path
css={chartIcon.accent}
className={colors.accent}
d="M10 0h2a1 1 0 011 1v20a1 1 0 01-1 1h-2a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1V7h-1a1 1 0 010-2h1V2h-1a1 1 0 010-2z"
/>
</svg>

12
x-pack/plugins/lens/public/assets/chart_waffle.tsx → packages/kbn-chart-icons/src/assets/chart_waffle.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const LensIconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
export const IconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
@ -20,11 +22,11 @@ export const LensIconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconPr
>
{title ? <title id={titleId} /> : null}
<path
className="lensChartIcon__accent"
className={colors.accent}
d="M16 1a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V1zM4 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM17 6a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V7a1 1 0 00-1-1h-2zM23 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM5 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1H5zM4 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V7zM11 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM10 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7zM11 12a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM22 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7z"
/>
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M22 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM4 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM16 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM11 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM23 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2z"
/>
</svg>

23
packages/kbn-chart-icons/src/assets/common_styles.tsx Normal file
View file

@ -0,0 +1,23 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { css } from '@emotion/css';
import { euiThemeVars } from '@kbn/ui-theme';
export const colors = {
subdued: css`
fill: ${euiThemeVars.euiTextSubduedColor};
`,
accent: css`
fill: ${euiThemeVars.euiColorVis0};
`,
};
export const noFill = css`
fill: none;
`;

7
x-pack/plugins/lens/public/assets/drop_illustration.tsx → packages/kbn-chart-icons/src/assets/drop_illustration.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const DropIllustration = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (

7
x-pack/plugins/lens/public/assets/globe_illustration.tsx → packages/kbn-chart-icons/src/assets/globe_illustration.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const GlobeIllustration = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (

42
packages/kbn-chart-icons/src/assets/index.ts Normal file
View file

@ -0,0 +1,42 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
export { IconCircle, IconTriangle } from './annotation_icons';
export { EuiIconAxisBottom } from './axis_bottom';
export { EuiIconAxisLeft } from './axis_left';
export { EuiIconAxisRight } from './axis_right';
export { EuiIconAxisTop } from './axis_top';
export { IconChartArea } from './chart_area';
export { IconChartAreaPercentage } from './chart_area_percentage';
export { IconChartAreaStacked } from './chart_area_stacked';
export { IconChartBar } from './chart_bar';
export { IconChartBarAnnotations } from './chart_bar_annotations';
export { IconChartBarHorizontal } from './chart_bar_horizontal';
export { IconChartBarHorizontalPercentage } from './chart_bar_horizontal_percentage';
export { IconChartBarHorizontalStacked } from './chart_bar_horizontal_stacked';
export { IconChartBarPercentage } from './chart_bar_percentage';
export { IconChartBarReferenceLine } from './chart_bar_reference_line';
export { IconChartBarStacked } from './chart_bar_stacked';
export { IconChartDatatable } from './chart_datatable';
export { IconChartDonut } from './chart_donut';
export { IconChartLine } from './chart_line';
export { IconChartMetric } from './chart_metric';
export { IconChartMixedXy } from './chart_mixed_xy';
export { IconChartMosaic } from './chart_mosaic';
export { IconChartPie } from './chart_pie';
export { IconChartTreemap } from './chart_treemap';
export { IconChartWaffle } from './chart_waffle';
export { DropIllustration } from './drop_illustration';
export { GlobeIllustration } from './globe_illustration';
export { EuiIconLegend } from './legend';
export { IconRegionMap } from './region_map';
export { IconChartHeatmap } from './chart_heatmap';
export { IconChartHorizontalBullet } from './chart_horizontal_bullet';
export { IconChartVerticalBullet } from './chart_vertical_bullet';

7
x-pack/plugins/lens/public/assets/legend.tsx → packages/kbn-chart-icons/src/assets/legend.tsx
View file

@ -1,11 +1,12 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import * as React from 'react';
import React from 'react';
export const EuiIconLegend = ({ title, titleId, ...props }: { title: string; titleId: string }) => (
<svg

14
x-pack/plugins/maps/public/lens/choropleth_chart/icon.tsx → packages/kbn-chart-icons/src/assets/region_map.tsx
View file

@ -1,14 +1,16 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { FunctionComponent } from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
export const Icon: FunctionComponent = ({
export const IconRegionMap: FunctionComponent = ({
title,
titleId,
...props
@ -16,15 +18,15 @@ export const Icon: FunctionComponent = ({
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewBox="0 0 30 22" {...props}>
{title ? <title id={titleId} /> : null}
<path
className="lensChartIcon__accent"
className={colors.accent}
d="M.985.001L1.01 0H7c.325 0 .502.078.602.145.105.07.188.17.254.302A1.46 1.46 0 018 1.01v3.982a1.46 1.46 0 01-.144.562.758.758 0 01-.254.302C7.502 5.922 7.325 6 7 6c-.325 0-.502-.078-.602-.145a.758.758 0 01-.254-.302A1.46 1.46 0 016 4.99v-.012a1.984 1.984 0 00-.006-.135 3.457 3.457 0 00-.35-1.29 2.754 2.754 0 00-.933-1.073C4.248 2.172 3.675 2 3 2H1.009a1.46 1.46 0 01-.562-.144.758.758 0 01-.302-.254C.078 1.502 0 1.325 0 1 0 .675.078.498.145.398A.758.758 0 01.447.144 1.46 1.46 0 01.985.001zM0 21v-5.991l.001-.024a1.46 1.46 0 01.143-.538.757.757 0 01.254-.302C.498 14.078.675 14 1 14h8c.675 0 1.248-.172 1.71-.48.458-.305.75-.704.934-1.073A3.453 3.453 0 0012 11.056v-.046l.002-.025a1.464 1.464 0 01.143-.538.758.758 0 01.254-.302c.1-.067.277-.145.602-.145.325 0 .502.078.602.145.105.07.188.17.254.302a1.464 1.464 0 01.143.538l.001.024V21c0 .325-.078.502-.145.602a.758.758 0 01-.302.254 1.464 1.464 0 01-.538.143h-.013L12.99 22H1.009l-.024-.001a1.464 1.464 0 01-.538-.143.758.758 0 01-.302-.254C.078 21.502 0 21.325 0 21zM27.009 14l-.024.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.255c-.067.099-.145.276-.145.601v1.991l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145h1.991l.024-.001a1.464 1.464 0 00.538-.143.757.757 0 00.302-.254c.067-.1.145-.277.145-.602v-1.991l-.001-.024a1.464 1.464 0 00-.143-.538.757.757 0 00-.254-.302c-.1-.067-.277-.145-.602-.145h-1.991z"
/>
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M18 3V.981.959a1.424 1.424 0 00-.128-.522.7.7 0 00-.242-.29C17.53.081 17.346 0 17 0h-6c-.325 0-.502.078-.602.145a.758.758 0 00-.254.302 1.464 1.464 0 00-.143.538L10 1.01v4.013a1.984 1.984 0 01-.006.135 3.457 3.457 0 01-.35 1.29 2.754 2.754 0 01-.933 1.073C8.248 7.828 7.675 8 7 8s-1.248-.172-1.711-.48a2.754 2.754 0 01-.933-1.073A3.457 3.457 0 014 5.022V5.01a1.46 1.46 0 00-.144-.563.758.758 0 00-.254-.302C3.502 4.078 3.325 4 3 4H1.009l-.024.001a1.46 1.46 0 00-.538.143.758.758 0 00-.302.254C.078 4.498 0 4.675 0 5v5.991l.001.024a1.46 1.46 0 00.143.538.758.758 0 00.254.303c.1.066.277.144.602.144h8c.325 0 .502-.078.602-.145a.757.757 0 00.254-.302 1.46 1.46 0 00.143-.538L10 10.99v-.025l.001-.02c0-.027.003-.061.005-.102a3.453 3.453 0 01.35-1.29c.184-.369.476-.768.933-1.073C11.752 8.172 12.325 8 13 8s1.248.172 1.71.48c.458.305.75.704.934 1.073A3.453 3.453 0 0116 10.978v4.013l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145.325 0 .502-.078.602-.145a.758.758 0 00.254-.302 1.464 1.464 0 00.143-.538v-.012l.001-.012V11c0-.675.172-1.248.48-1.711.305-.457.704-.75 1.073-.933A3.456 3.456 0 0120.944 8H20.99l.025-.002a1.46 1.46 0 00.538-.143.758.758 0 00.302-.254c.067-.1.145-.277.145-.602 0-.325-.078-.502-.145-.602a.758.758 0 00-.302-.254 1.46 1.46 0 00-.538-.143h-.017L20.99 6c-.671-.002-1.24-.173-1.702-.48a2.754 2.754 0 01-.933-1.073A3.453 3.453 0 0118 3.022V3z"
/>
<path
className="lensChartIcon__subdued"
className={colors.subdued}
d="M20 3V1.009l.001-.024a1.464 1.464 0 01.143-.538.758.758 0 01.254-.302C20.498.078 20.675 0 21 0h8c.325 0 .502.078.602.145.105.07.188.17.254.302a1.464 1.464 0 01.143.538L30 1.01V11c0 .325-.078.502-.145.602a.758.758 0 01-.302.254 1.464 1.464 0 01-.538.143H29L28.99 12h-7.982l-.024-.001a1.464 1.464 0 01-.538-.143.758.758 0 01-.302-.254c-.067-.1-.145-.277-.145-.602 0-.325.078-.502.145-.602a.758.758 0 01.302-.254 1.464 1.464 0 01.538-.143L21.01 10h.025l.02-.001c.027 0 .061-.003.102-.005a3.456 3.456 0 001.29-.35 2.755 2.755 0 001.073-.933C23.828 8.248 24 7.675 24 7s-.172-1.248-.48-1.711a2.755 2.755 0 00-1.073-.933A3.456 3.456 0 0021.022 4h-.012a1.46 1.46 0 01-.563-.144.757.757 0 01-.302-.254C20.078 3.502 20 3.325 20 3zM20.998 14l-.013.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.255c-.067.099-.145.276-.145.601 0 .675-.172 1.248-.48 1.71-.305.458-.704.75-1.073.934a3.453 3.453 0 01-1.425.356h-.012l-.025.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.254c-.067.1-.145.277-.145.602v1.991l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145h11.991l.024-.001a1.464 1.464 0 00.538-.143.758.758 0 00.302-.254c.067-.1.145-.277.145-.602 0-.325-.078-.502-.145-.602a.758.758 0 00-.302-.254A1.464 1.464 0 0028.99 20H27c-.675 0-1.248-.172-1.71-.48a2.755 2.755 0 01-.934-1.073A3.453 3.453 0 0124 17.022V15c0-.325-.078-.502-.145-.601a.757.757 0 00-.302-.255A1.464 1.464 0 0022.99 14H20.998z"
/>
</svg>

3
src/plugins/chart_expressions/expression_gauge/public/components/icons/index.ts → packages/kbn-chart-icons/src/index.ts
View file

@ -6,5 +6,4 @@
* Side Public License, v 1.
*/
export { HorizontalBulletIcon } from './horizontal_bullet_icon';
export { VerticalBulletIcon } from './vertical_bullet_icon';
export * from './assets';

19
packages/kbn-chart-icons/tsconfig.json Normal file
View file

@ -0,0 +1,19 @@
{
"extends": "../../tsconfig.bazel.json",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"emitDeclarationOnly": true,
"outDir": "target_types",
"rootDir": "src",
"types": [
"jest",
"node",
"react",
"@emotion/css/types"
],
},
"include": [
"src/**/*",
]
}

1
src/dev/storybook/aliases.ts
View file

@ -13,6 +13,7 @@ export const storybookAliases = {
ci_composite: '.ci/.storybook',
cloud: 'x-pack/plugins/cloud/.storybook',
coloring: 'packages/kbn-coloring/.storybook',
chart_icons: 'packages/kbn-chart-icons/.storybook',
controls: 'src/plugins/controls/storybook',
custom_integrations: 'src/plugins/custom_integrations/storybook',
dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',

2
src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
View file

@ -21,7 +21,6 @@ import {
} from '../../common';
import {
getAccessorsFromArgs,
getIcons,
getMaxValue,
getMinValue,
getValueFromAccessor,
@ -29,6 +28,7 @@ import {
getGoalConfig,
computeMinMax,
} from './utils';
import { getIcons } from './utils/icons';
import './index.scss';
import { GaugeCentralMajorMode } from '../../common/types';
import { isBulletShape, isRoundShape } from '../../common/utils';

6
src/plugins/chart_expressions/expression_gauge/public/components/utils/icons.ts
View file

@ -6,13 +6,13 @@
* Side Public License, v 1.
*/
import { IconChartHorizontalBullet, IconChartVerticalBullet } from '@kbn/chart-icons';
import { GaugeShape, GaugeShapes } from '../../../common';
import { HorizontalBulletIcon } from '../icons';
export const getIcons = (type: GaugeShape) =>
({
[GaugeShapes.HORIZONTAL_BULLET]: HorizontalBulletIcon,
[GaugeShapes.VERTICAL_BULLET]: HorizontalBulletIcon,
[GaugeShapes.HORIZONTAL_BULLET]: IconChartHorizontalBullet,
[GaugeShapes.VERTICAL_BULLET]: IconChartVerticalBullet,
[GaugeShapes.ARC]: 'visGoal',
[GaugeShapes.CIRCLE]: 'visGoal',
}[type]);

1
src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts
View file

@ -7,7 +7,6 @@
*/
export * from './accessors';
export * from './icons';
export * from './gauge_types';
export * from './goal_config';

1
src/plugins/chart_expressions/expression_gauge/public/index.ts
View file

@ -13,4 +13,3 @@ export function plugin() {
}
export { getGoalValue, getMaxValue, getMinValue, getValueFromAccessor } from './components/utils';
export { VerticalBulletIcon, HorizontalBulletIcon } from './components/icons';

8
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
View file

@ -35,6 +35,7 @@ import {
LegendSizeToPixels,
} from '@kbn/visualizations-plugin/common/constants';
import { DatatableColumn } from '@kbn/expressions-plugin/public';
import { IconChartHeatmap } from '@kbn/chart-icons';
import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common';
import {
applyPaletteParams,
@ -47,7 +48,6 @@ import {
LegendColorPickerWrapper,
} from '../utils/get_color_picker';
import { defaultPaletteParams } from '../constants';
import { HeatmapIcon } from './heatmap_icon';
import './index.scss';
declare global {
@ -366,7 +366,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
);
if (!chartData || !chartData.length) {
return <EmptyPlaceholder icon={HeatmapIcon} renderComplete={onRenderChange} />;
return <EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />;
}
if (!yAxisColumn) {
@ -567,7 +567,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
<Chart>
<Settings
onRenderChange={onRenderChange}
noResults={<EmptyPlaceholder icon={HeatmapIcon} renderComplete={onRenderChange} />}
noResults={
<EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />
}
onElementClick={interactive ? (onElementClick as ElementClickListener) : undefined}
showLegend={showLegend ?? args.legend.isVisible}
legendPosition={args.legend.position}

2
src/plugins/chart_expressions/expression_heatmap/public/index.ts
View file

@ -11,5 +11,3 @@ import { ExpressionHeatmapPlugin } from './plugin';
export function plugin() {
return new ExpressionHeatmapPlugin();
}
export { HeatmapIcon } from './components/heatmap_icon';

37
src/plugins/chart_expressions/expression_partition_vis/public/icons/donut.tsx
View file

@ -1,37 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const DonutIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
return (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M19.21 21.119a11 11 0 006.595-8.1c.11-.577-.355-1.082-.942-1.082H20.75c-.477 0-.878.342-1.046.788a5.028 5.028 0 11-6.474-6.474c.447-.168.788-.569.788-1.046V1.094c0-.588-.505-1.053-1.082-.943a11 11 0 106.272 20.968h.002z"
css={chartIcon.subdued}
/>
<path
d="M22.778 3.176A11 11 0 0017.084.154C16.507.042 16 .507 16 1.095v4.116c0 .475.34.875.784 1.044l.14.055A5.026 5.026 0 0119.7 9.17c.168.445.568.784 1.044.784h4.115c.588 0 1.053-.506.942-1.084a11 11 0 00-3.023-5.694z"
css={chartIcon.accent}
/>
</svg>
);
};

37
src/plugins/chart_expressions/expression_partition_vis/public/icons/mosaic.tsx
View file

@ -1,37 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const MosaicIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
return (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId} /> : null}
<path
css={chartIcon.subdued}
d="M2 0a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1H2zM2 14a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1H2zM11 13a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v-8zM12 0a1 1 0 100 2h6a1 1 0 100-2h-6zM21 15a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01-1-1v-6zM22 0a1 1 0 00-1 1v4a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1h-6z"
/>
<path
css={chartIcon.accent}
d="M11 5a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1V5zM1 7a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V7zM22 8a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1h-6z"
/>
</svg>
);
};

37
src/plugins/chart_expressions/expression_partition_vis/public/icons/pie.tsx
View file

@ -1,37 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const PieIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
return (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M17.827 21.189a10.001 10.001 0 005.952-7.148c.124-.578-.343-1.091-.935-1.091H14a1 1 0 01-1-1V3.106c0-.592-.513-1.059-1.092-.935a10 10 0 105.919 19.018z"
css={chartIcon.subdued}
/>
<path
d="M22.462 3.538A12.29 12.29 0 0016.094.16C15.512.048 15 .514 15 1.106V10a1 1 0 001 1h8.895c.591 0 1.057-.512.945-1.094a12.288 12.288 0 00-3.378-6.368z"
css={chartIcon.accent}
/>
</svg>
);
};

41
src/plugins/chart_expressions/expression_partition_vis/public/icons/treemap.tsx
View file

@ -1,41 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const TreemapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
return (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 1a1 1 0 011-1h13a1 1 0 011 1v20a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
css={chartIcon.subdued}
/>
<path
d="M17 1a1 1 0 011-1h11a1 1 0 011 1v12a1 1 0 01-1 1H18a1 1 0 01-1-1V1z"
css={chartIcon.accent}
/>
<path
d="M29 16H18a1 1 0 00-1 1v4a1 1 0 001 1h11a1 1 0 001-1v-4a1 1 0 00-1-1z"
css={chartIcon.subdued}
/>
</svg>
);
};

37
src/plugins/chart_expressions/expression_partition_vis/public/icons/waffle.tsx
View file

@ -1,37 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import type { EuiIconProps } from '@elastic/eui';
import { useCommonChartStyles } from '@kbn/charts-plugin/public';
export const WaffleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
const { chartIcon } = useCommonChartStyles();
return (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId} /> : null}
<path
css={chartIcon.subdued}
d="M16 1a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V1zM4 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM17 6a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V7a1 1 0 00-1-1h-2zM23 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM5 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1H5zM4 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V7zM11 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM10 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7zM11 12a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM22 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7z"
/>
<path
css={chartIcon.accent}
d="M22 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM4 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM16 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM11 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM23 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2z"
/>
</svg>
);
};

18
src/plugins/chart_expressions/expression_partition_vis/public/utils/get_icon.ts
View file

@ -6,14 +6,20 @@
* Side Public License, v 1.
*/
import {
IconChartWaffle,
IconChartMosaic,
IconChartPie,
IconChartDonut,
IconChartTreemap,
} from '@kbn/chart-icons';
import { ChartTypes } from '../../common/types';
import { PieIcon, DonutIcon, TreemapIcon, MosaicIcon, WaffleIcon } from '../icons';
export const getIcon = (chart: ChartTypes) =>
({
[ChartTypes.PIE]: PieIcon,
[ChartTypes.DONUT]: DonutIcon,
[ChartTypes.TREEMAP]: TreemapIcon,
[ChartTypes.MOSAIC]: MosaicIcon,
[ChartTypes.WAFFLE]: WaffleIcon,
[ChartTypes.PIE]: IconChartPie,
[ChartTypes.DONUT]: IconChartDonut,
[ChartTypes.TREEMAP]: IconChartTreemap,
[ChartTypes.MOSAIC]: IconChartMosaic,
[ChartTypes.WAFFLE]: IconChartWaffle,
}[chart]);

49
src/plugins/chart_expressions/expression_xy/public/definitions/visualizations.ts
View file

@ -6,30 +6,33 @@
* Side Public License, v 1.
*/
import { SeriesTypes } from '../../common/constants';
import {
BarIcon,
LineIcon,
AreaIcon,
BarStackedIcon,
AreaStackedIcon,
BarHorizontalIcon,
BarPercentageIcon,
AreaPercentageIcon,
BarHorizontalStackedIcon,
BarHorizontalPercentageIcon,
} from '../icons';
IconChartBarHorizontalPercentage,
IconChartBarHorizontalStacked,
IconChartBarPercentage,
IconChartBarHorizontal,
IconChartAreaStacked,
IconChartBarStacked,
IconChartLine,
IconChartBar,
IconChartArea,
IconChartAreaPercentage,
} from '@kbn/chart-icons';
import { SeriesTypes } from '../../common/constants';
export const visualizationDefinitions = [
{ id: SeriesTypes.BAR, icon: BarIcon },
{ id: `${SeriesTypes.BAR}_stacked`, icon: BarStackedIcon },
{ id: `${SeriesTypes.BAR}_horizontal`, icon: BarHorizontalIcon },
{ id: `${SeriesTypes.BAR}_percentage_stacked`, icon: BarPercentageIcon },
{ id: `${SeriesTypes.BAR}_horizontal_stacked`, icon: BarHorizontalStackedIcon },
{ id: `${SeriesTypes.BAR}_horizontal_percentage_stacked`, icon: BarHorizontalPercentageIcon },
{ id: SeriesTypes.LINE, icon: LineIcon },
{ id: `${SeriesTypes.LINE}_stacked`, icon: LineIcon },
{ id: SeriesTypes.AREA, icon: AreaIcon },
{ id: `${SeriesTypes.AREA}_stacked`, icon: AreaStackedIcon },
{ id: `${SeriesTypes.AREA}_percentage_stacked`, icon: AreaPercentageIcon },
{ id: SeriesTypes.BAR, icon: IconChartBar },
{ id: `${SeriesTypes.BAR}_stacked`, icon: IconChartBarStacked },
{ id: `${SeriesTypes.BAR}_horizontal`, icon: IconChartBarHorizontal },
{ id: `${SeriesTypes.BAR}_percentage_stacked`, icon: IconChartBarPercentage },
{ id: `${SeriesTypes.BAR}_horizontal_stacked`, icon: IconChartBarHorizontalStacked },
{
id: `${SeriesTypes.BAR}_horizontal_percentage_stacked`,
icon: IconChartBarHorizontalPercentage,
},
{ id: `${SeriesTypes.LINE}_stacked`, icon: IconChartLine },
{ id: SeriesTypes.LINE, icon: IconChartLine },
{ id: SeriesTypes.AREA, icon: IconChartArea },
{ id: `${SeriesTypes.AREA}_stacked`, icon: IconChartAreaStacked },
{ id: `${SeriesTypes.AREA}_percentage_stacked`, icon: IconChartAreaPercentage },
];

6
src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts
View file

@ -7,7 +7,7 @@
*/
import { i18n } from '@kbn/i18n';
import { TriangleIcon, CircleIcon } from '../icons';
import { IconTriangle, IconCircle } from '@kbn/chart-icons';
import { AvailableReferenceLineIcons } from '../../common/constants';
export function hasIcon(icon: string | undefined): icon is string {
@ -56,7 +56,7 @@ export const iconSet = [
label: i18n.translate('expressionXY.xyChart.iconSelect.circleIconLabel', {
defaultMessage: 'Circle',
}),
icon: CircleIcon,
icon: IconCircle,
canFill: true,
},
@ -105,7 +105,7 @@ export const iconSet = [
label: i18n.translate('expressionXY.xyChart.iconSelect.triangleIconLabel', {
defaultMessage: 'Triangle',
}),
icon: TriangleIcon,
icon: IconTriangle,
shouldRotate: true,
canFill: true,
},

32
src/plugins/chart_expressions/expression_xy/public/icons/area_percentage.tsx
View file

@ -1,32 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const AreaPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
className="lensChartIcon__accent"
/>
<path
d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
className="lensChartIcon__subdued"
/>
</svg>
);

32
src/plugins/chart_expressions/expression_xy/public/icons/area_stacked.tsx
View file

@ -1,32 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const AreaStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={31}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
className="lensChartIcon__accent"
/>
<path
d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
className="lensChartIcon__subdued"
/>
</svg>
);

37
src/plugins/chart_expressions/expression_xy/public/icons/bar_reference_line.tsx
View file

@ -1,37 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const BarReferenceLineIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 16 12"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<g>
<path
className="lensChartIcon__subdued"
d="M3.2 4.79997C3.2 4.50542 2.96122 4.26663 2.66667 4.26663H0.533333C0.238784 4.26663 0 4.50542 0 4.79997V6.39997H3.2V4.79997ZM3.2 9.59997H0V13.3333C0 13.6279 0.238784 13.8666 0.533333 13.8666H2.66667C2.96122 13.8666 3.2 13.6279 3.2 13.3333V9.59997ZM8.53333 9.59997H11.7333V13.3333C11.7333 13.6279 11.4946 13.8666 11.2 13.8666H9.06667C8.77211 13.8666 8.53333 13.6279 8.53333 13.3333V9.59997ZM11.7333 6.39997H8.53333V2.66663C8.53333 2.37208 8.77211 2.1333 9.06667 2.1333H11.2C11.4946 2.1333 11.7333 2.37208 11.7333 2.66663V6.39997ZM12.8 9.59997V13.3333C12.8 13.6279 13.0388 13.8666 13.3333 13.8666H15.4667C15.7612 13.8666 16 13.6279 16 13.3333V9.59997H12.8ZM16 6.39997V5.86663C16 5.57208 15.7612 5.3333 15.4667 5.3333H13.3333C13.0388 5.3333 12.8 5.57208 12.8 5.86663V6.39997H16ZM7.46667 11.2C7.46667 10.9054 7.22789 10.6666 6.93333 10.6666H4.8C4.50544 10.6666 4.26667 10.9054 4.26667 11.2V13.3333C4.26667 13.6279 4.50544 13.8666 4.8 13.8666H6.93333C7.22789 13.8666 7.46667 13.6279 7.46667 13.3333V11.2Z"
/>
<rect
y="7.4668"
width="16"
height="1.06667"
rx="0.533334"
className="lensChartIcon__accent"
/>
</g>
</svg>
);

22
src/plugins/chart_expressions/expression_xy/public/icons/index.ts
View file

@ -1,22 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
export { BarHorizontalPercentageIcon } from './bar_horizontal_percentage';
export { BarHorizontalStackedIcon } from './bar_horizontal_stacked';
export { BarReferenceLineIcon } from './bar_reference_line';
export { AreaPercentageIcon } from './area_percentage';
export { BarHorizontalIcon } from './bar_horizontal';
export { BarPercentageIcon } from './bar_percentage';
export { AreaStackedIcon } from './area_stacked';
export { BarStackedIcon } from './bar_stacked';
export { TriangleIcon } from './triangle';
export { MixedXyIcon } from './mixed_xy';
export { CircleIcon } from './circle';
export { AreaIcon } from './area';
export { LineIcon } from './line';
export { BarIcon } from './bar';

32
src/plugins/chart_expressions/expression_xy/public/icons/line.tsx
View file

@ -1,32 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LineIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
className="lensChartIcon__subdued"
/>
<path
d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
className="lensChartIcon__accent"
/>
</svg>
);

36
src/plugins/chart_expressions/expression_xy/public/icons/mixed_xy.tsx
View file

@ -1,36 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const MixedXyIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M24 16l.186-.002.345-.02.266-.03.334-.058.193-.043.25-.067.223-.07.215-.074.209-.079.305-.124c.166-.07.34-.148.524-.234l.285-.135 1.202-.588c.428-.203.728-.326.966-.396.146-.044.27-.067.384-.076L30 14v7a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-7.994 5.865-7.997L19.032 10l.541 1.205.272.595.29.612c.517 1.069.955 1.842 1.391 2.391.08.1.16.194.241.28.095.101.189.191.283.272l.143.114c.218.164.446.284.69.368.207.071.426.116.662.14l.14.012.154.008L24 16zm6-12v6l-.186.002-.345.02-.266.03-.331.057-.196.044-.25.067-.304.097-.134.047a9.492 9.492 0 00-.386.15l-.128.053c-.166.07-.34.148-.524.234l-.285.135-1.264.618-.352.159-.187.078-.256.095-.178.054a13.872 13.872 0 01-.38-.687l-.16-.311-.233-.47-.016-.472H24c1 0 3-6 6-6z"
className="lensChartIcon__accent"
/>
<path
d="M30 13c-.507 0-.988.146-1.89.571l-1.209.592C25.621 14.78 24.924 15 24 15c-1.384 0-2.003-.865-3.516-4.206l-.637-1.42-.346-.749-.213-.445C18.572 6.698 18.127 6 18 6c-.466 0-.967.252-1.99.997l-.891.659-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.384 0 2.003.865 3.516 4.206l.637 1.42.346.749.213.445C23.428 12.302 23.873 13 24 13c.507 0 .988-.146 1.89-.571l1.209-.592C28.379 11.22 29.076 11 30 11v2z"
className="lensChartIcon__subdued"
/>
<path
d="M6 13v7.889C6 21.503 5.552 22 5 22H1c-.552 0-1-.497-1-1.111V13a1 1 0 011-1h4a1 1 0 011 1zm8-1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4a1 1 0 011 1zm8 5v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4a1 1 0 011 1zm8 2v2a1 1 0 01-1 1h-4a1 1 0 01-1-1v-2a1 1 0 011-1h4a1 1 0 011 1z"
className="lensChartIcon__subdued"
/>
</svg>
);

19
x-pack/plugins/lens/public/app_plugin/app.scss
View file

@ -19,25 +19,6 @@
flex-grow: 1;
}
.lensChartIcon__subdued {
fill: $euiTextSubduedColor;
.lnsLayerChartSwitch__item-isSelected & {
fill: currentColor;
}
}
.lensChartIcon__accent {
fill: $euiColorVis0;
.lnsLayerChartSwitch__item-isSelected & {
fill: makeGraphicContrastColor($euiColorVis0, $euiColorDarkShade);
}
}
.lensAnnotationIconNoFill {
fill: none;
}
.lensAnnotationIconFill {
fill: $euiColorEmptyShade;
}

31
x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx
View file

@ -1,31 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import * as React from 'react';
import { EuiIconProps } from '@elastic/eui';
import classnames from 'classnames';
export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<circle
strokeWidth="1"
stroke="currentColor"
cx="8"
cy="8"
className={classnames('lensAnnotationIconNoFill', props.className)}
r="7"
/>
</svg>
);

30
x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx
View file

@ -1,30 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import * as React from 'react';
import { EuiIconProps } from '@elastic/eui';
import classnames from 'classnames';
export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
width="16"
height="16"
fill="none"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
strokeWidth="1"
stroke="currentColor"
d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
className={classnames('lensAnnotationIconNoFill', props.className)}
/>
</svg>
);

31
x-pack/plugins/lens/public/assets/chart_area.tsx
View file

@ -1,31 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
className="lensChartIcon__accent"
/>
<path
d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
className="lensChartIcon__subdued"
/>
</svg>
);

31
x-pack/plugins/lens/public/assets/chart_bar.tsx
View file

@ -1,31 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
className="lensChartIcon__subdued"
/>
<path
d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
className="lensChartIcon__accent"
/>
</svg>
);

35
x-pack/plugins/lens/public/assets/chart_bar_horizontal.tsx
View file

@ -1,35 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBarHorizontal = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
className="lensChartIcon__subdued"
/>
<path
d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
className="lensChartIcon__accent"
/>
</svg>
);

35
x-pack/plugins/lens/public/assets/chart_bar_horizontal_percentage.tsx
View file

@ -1,35 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBarHorizontalPercentage = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M20 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h19zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H17zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H18z"
className="lensChartIcon__subdued"
/>
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-7v-6h7zm-.222-8C29.453 8 30 8.448 30 9v4c0 .552-.547 1-1.222 1H19V8h9.778zm.18-8C29.534 0 30 .448 30 1v4c0 .552-.466 1-1.042 1H20V0h8.958z"
className="lensChartIcon__accent"
/>
</svg>
);

35
x-pack/plugins/lens/public/assets/chart_bar_horizontal_stacked.tsx
View file

@ -1,35 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBarHorizontalStacked = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M18 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h17zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H15zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H16z"
className="lensChartIcon__subdued"
/>
<path
d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-9v-6h9zm-9.222-8C20.453 8 21 8.448 21 9v4c0 .552-.547 1-1.222 1H17V8h2.778zm3.18-8C23.534 0 24 .448 24 1v4c0 .552-.466 1-1.042 1H18V0h4.958z"
className="lensChartIcon__accent"
/>
</svg>
);

35
x-pack/plugins/lens/public/assets/chart_bar_percentage.tsx
View file

@ -1,35 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBarPercentage = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
className="lensChartIcon__subdued"
/>
<path
d="M29 0a1 1 0 011 1v11h-6V1a1 1 0 011-1h4zM5 0a1 1 0 011 1v10H0V1a1 1 0 011-1h4zm16 0a1 1 0 011 1v10h-6V1a1 1 0 011-1h4zm-8 0a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
className="lensChartIcon__accent"
/>
</svg>
);

35
x-pack/plugins/lens/public/assets/chart_bar_stacked.tsx
View file

@ -1,35 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
export const LensIconChartBarStacked = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
viewBox="0 0 30 22"
width={30}
height={22}
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="lensChartIcon__subdued"
d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
/>
<path
d="M29 1a1 1 0 011 1v10h-6V2a1 1 0 011-1h4zM5 7a1 1 0 011 1v3H0V8a1 1 0 011-1h4zm16-4a1 1 0 011 1v7h-6V4a1 1 0 011-1h4zm-8-3a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
className="lensChartIcon__accent"
/>
</svg>
);

6
x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
View file

@ -19,7 +19,7 @@ import { ReactExpressionRendererType } from '@kbn/expressions-plugin/public';
import { SuggestionPanel, SuggestionPanelProps, SuggestionPanelWrapper } from './suggestion_panel';
import { getSuggestions } from './suggestion_helpers';
import { EuiIcon, EuiPanel, EuiToolTip, EuiAccordion } from '@elastic/eui';
import { LensIconChartDatatable } from '../../assets/chart_datatable';
import { IconChartDatatable } from '@kbn/chart-icons';
import { mountWithProvider } from '../../mocks';
import {
applyChanges,
@ -286,7 +286,7 @@ describe('suggestion_panel', () => {
getSuggestionsMock.mockReturnValue([
{
datasourceState: {},
previewIcon: LensIconChartDatatable,
previewIcon: IconChartDatatable,
score: 0.5,
visualizationState: suggestion1State,
visualizationId: 'testVis',
@ -317,7 +317,7 @@ describe('suggestion_panel', () => {
expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon)).toHaveLength(1);
expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon).prop('type')).toEqual(
LensIconChartDatatable
IconChartDatatable
);
});

2
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx
View file

@ -10,9 +10,9 @@ import { EuiPageContentBody, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { UiActionsStart, VISUALIZE_GEO_FIELD_TRIGGER } from '@kbn/ui-actions-plugin/public';
import { GlobeIllustration } from '@kbn/chart-icons';
import { getVisualizeGeoFieldMessage } from '../../../utils';
import { DragDrop } from '../../../drag_drop';
import { GlobeIllustration } from '../../../assets/globe_illustration';
import { APP_ID } from '../../../../common/constants';
import './geo_field_workspace_panel.scss';

2
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file

@ -35,6 +35,7 @@ import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
import type { DefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
import type { Datatable } from '@kbn/expressions-plugin/public';
import { DropIllustration } from '@kbn/chart-icons';
import { trackUiCounterEvents } from '../../../lens_ui_telemetry';
import {
FramePublicAPI,
@ -51,7 +52,6 @@ import { DragDrop, DragContext, DragDropIdentifier } from '../../../drag_drop';
import { switchToSuggestion } from '../suggestion_helpers';
import { buildExpression } from '../expression_helpers';
import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
import { DropIllustration } from '../../../assets/drop_illustration';
import applyChangesIllustrationDark from '../../../assets/render_dark@2x.png';
import applyChangesIllustrationLight from '../../../assets/render_light@2x.png';
import {

2
x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
View file

@ -9,7 +9,7 @@ import './toolbar_popover.scss';
import React, { useState } from 'react';
import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui';
import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
import { EuiIconLegend } from '../assets/legend';
import { EuiIconLegend } from '@kbn/chart-icons';
const typeToIconMap: { [type: string]: string | IconType } = {
legend: EuiIconLegend as IconType,

4
x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
View file

@ -14,7 +14,7 @@ import { IAggType } from '@kbn/data-plugin/public';
import { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
import { VisualizationContainer } from '../../../visualization_container';
import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
import { LensIconChartDatatable } from '../../../assets/chart_datatable';
import { IconChartDatatable } from '@kbn/chart-icons';
import { DataContext, DatatableComponent } from './table_basic';
import { DatatableProps } from '../../../../common/expressions';
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
@ -369,7 +369,7 @@ describe('DatatableComponent', () => {
/>
);
expect(component.find(VisualizationContainer)).toHaveLength(1);
expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(LensIconChartDatatable);
expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(IconChartDatatable);
});
test('it renders the table with the given sorting', () => {

4
x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
View file

@ -29,12 +29,12 @@ import {
} from '@elastic/eui';
import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
import { ClickTriggerEvent } from '@kbn/charts-plugin/public';
import { IconChartDatatable } from '@kbn/chart-icons';
import type { LensTableRowContextMenuEvent } from '../../../types';
import type { FormatFactory } from '../../../../common';
import type { LensGridDirection } from '../../../../common/expressions';
import { VisualizationContainer } from '../../../visualization_container';
import { findMinMaxByColumnId } from '../../../shared_components';
import { LensIconChartDatatable } from '../../../assets/chart_datatable';
import type {
DataContextType,
DatatableRenderProps,
@ -413,7 +413,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
if (isEmpty) {
return (
<VisualizationContainer className="lnsDataTableContainer">
<EmptyPlaceholder icon={LensIconChartDatatable} />
<EmptyPlaceholder icon={IconChartDatatable} />
</VisualizationContainer>
);
}

8
x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx
View file

@ -14,13 +14,13 @@ import { PaletteRegistry, CUSTOM_PALETTE } from '@kbn/coloring';
import { ThemeServiceStart } from '@kbn/core/public';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
import { IconChartDatatable } from '@kbn/chart-icons';
import type {
SuggestionRequest,
Visualization,
VisualizationSuggestion,
DatasourceLayers,
} from '../../types';
import { LensIconChartDatatable } from '../../assets/chart_datatable';
import { TableDimensionEditor } from './components/dimension_editor';
import { TableDimensionEditorAdditionalSection } from './components/dimension_editor_addtional_section';
import { LayerType, layerTypes } from '../../../common';
@ -56,7 +56,7 @@ export const getDatatableVisualization = ({
visualizationTypes: [
{
id: 'lnsDatatable',
icon: LensIconChartDatatable,
icon: IconChartDatatable,
label: visualizationLabel,
groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
defaultMessage: 'Tabular',
@ -82,7 +82,7 @@ export const getDatatableVisualization = ({
getDescription() {
return {
icon: LensIconChartDatatable,
icon: IconChartDatatable,
label: visualizationLabel,
};
},
@ -164,7 +164,7 @@ export const getDatatableVisualization = ({
columnId: col.columnId,
})),
},
previewIcon: LensIconChartDatatable,
previewIcon: IconChartDatatable,
// tables are hidden from suggestion bar, but used for drag & drop and chart switching
hide: true,
},

7
x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx
View file

@ -21,9 +21,8 @@ import {
getMaxValue,
getMinValue,
getValueFromAccessor,
VerticalBulletIcon,
HorizontalBulletIcon,
} from '@kbn/expression-gauge-plugin/public';
import { IconChartHorizontalBullet, IconChartVerticalBullet } from '@kbn/chart-icons';
import type { DatasourceLayers, OperationMetadata, Visualization } from '../../types';
import { getSuggestions } from './suggestions';
import {
@ -56,14 +55,14 @@ export const isNumericDynamicMetric = (op: OperationMetadata) =>
export const CHART_NAMES = {
horizontalBullet: {
icon: HorizontalBulletIcon,
icon: IconChartHorizontalBullet,
label: i18n.translate('xpack.lens.gaugeHorizontal.gaugeLabel', {
defaultMessage: 'Gauge horizontal',
}),
groupLabel: groupLabelForGauge,
},
verticalBullet: {
icon: VerticalBulletIcon,
icon: IconChartVerticalBullet,
label: i18n.translate('xpack.lens.gaugeVertical.gaugeLabel', {
defaultMessage: 'Gauge vertical',
}),

4
x-pack/plugins/lens/public/visualizations/heatmap/constants.ts
View file

@ -6,7 +6,7 @@
*/
import { i18n } from '@kbn/i18n';
import { HeatmapIcon } from '@kbn/expression-heatmap-plugin/public';
import { IconChartHeatmap } from '@kbn/chart-icons';
export const LENS_HEATMAP_RENDERER = 'lens_heatmap_renderer';
@ -24,7 +24,7 @@ export const CHART_SHAPES = {
export const CHART_NAMES = {
heatmap: {
shapeType: CHART_SHAPES.HEATMAP,
icon: HeatmapIcon,
icon: IconChartHeatmap,
label: i18n.translate('xpack.lens.heatmap.heatmapLabel', {
defaultMessage: 'Heat map',
}),

3
x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx
View file

@ -10,6 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
import { Position } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { EuiIconAxisLeft, EuiIconAxisBottom } from '@kbn/chart-icons';
import type { VisualizationToolbarProps } from '../../types';
import {
LegendSettingsPopover,
@ -18,8 +19,6 @@ import {
AxisTitleSettings,
TooltipWrapper,
} from '../../shared_components';
import { EuiIconAxisLeft } from '../../assets/axis_left';
import { EuiIconAxisBottom } from '../../assets/axis_bottom';
import type { HeatmapVisualizationState } from './types';
import { getDefaultVisualValuesForLayer } from '../../shared_components/datasource_default_values';
import './toolbar_component.scss';

4
x-pack/plugins/lens/public/visualizations/heatmap/visualization.tsx
View file

@ -11,11 +11,11 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
import { Ast } from '@kbn/interpreter';
import { Position } from '@elastic/charts';
import { IconChartHeatmap } from '@kbn/chart-icons';
import { CUSTOM_PALETTE, PaletteRegistry, CustomPaletteParams } from '@kbn/coloring';
import { ThemeServiceStart } from '@kbn/core/public';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
import { HeatmapIcon } from '@kbn/expression-heatmap-plugin/public';
import type { OperationMetadata, Visualization } from '../../types';
import type { HeatmapVisualizationState } from './types';
import { getSuggestions } from './suggestions';
@ -105,7 +105,7 @@ export const getHeatmapVisualization = ({
visualizationTypes: [
{
id: 'heatmap',
icon: HeatmapIcon,
icon: IconChartHeatmap,
label: i18n.translate('xpack.lens.heatmapVisualization.heatmapLabel', {
defaultMessage: 'Heat map',
}),

4
x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts
View file

@ -5,10 +5,10 @@
* 2.0.
*/
import { IconChartMetric } from '@kbn/chart-icons';
import { SuggestionRequest, VisualizationSuggestion, TableSuggestion } from '../../types';
import type { MetricState } from '../../../common/types';
import { layerTypes } from '../../../common';
import { LensIconChartMetric } from '../../assets/chart_metric';
import { legacyMetricSupportedTypes } from './visualization';
/**
@ -49,7 +49,7 @@ function getSuggestion(table: TableSuggestion): VisualizationSuggestion<MetricSt
return {
title,
score: 0.1,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
state: {
layerId: table.layerId,
accessor: col.columnId,

6
x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
View file

@ -14,8 +14,8 @@ import { ThemeServiceStart } from '@kbn/core/public';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
import { IconChartMetric } from '@kbn/chart-icons';
import { getSuggestions } from './metric_suggestions';
import { LensIconChartMetric } from '../../assets/chart_metric';
import { Visualization, OperationMetadata, DatasourceLayers } from '../../types';
import type { MetricState } from '../../../common/types';
import { layerTypes } from '../../../common';
@ -181,7 +181,7 @@ export const getLegacyMetricVisualization = ({
visualizationTypes: [
{
id: 'lnsMetric',
icon: LensIconChartMetric,
icon: IconChartMetric,
label: i18n.translate('xpack.lens.legacyMetric.label', {
defaultMessage: 'Legacy Metric',
}),
@ -208,7 +208,7 @@ export const getLegacyMetricVisualization = ({
getDescription() {
return {
icon: LensIconChartMetric,
icon: IconChartMetric,
label: i18n.translate('xpack.lens.legacyMetric.label', {
defaultMessage: 'Legacy Metric',
}),

14
x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts
View file

@ -8,7 +8,7 @@
import { getSuggestions } from './suggestions';
import { layerTypes } from '../../../common';
import { MetricVisualizationState } from './visualization';
import { LensIconChartMetric } from '../../assets/chart_metric';
import { IconChartMetric } from '@kbn/chart-icons';
const metricColumn = {
columnId: 'metric-column',
@ -152,7 +152,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.51,
},
]);
@ -182,7 +182,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.51,
},
]);
@ -214,7 +214,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.51,
},
]);
@ -287,7 +287,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.52,
},
]);
@ -319,7 +319,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.52,
},
]);
@ -350,7 +350,7 @@ describe('metric suggestions', () => {
},
title: 'Metric',
hide: true,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.52,
},
]);

4
x-pack/plugins/lens/public/visualizations/metric/suggestions.ts
View file

@ -5,8 +5,8 @@
* 2.0.
*/
import { IconChartMetric } from '@kbn/chart-icons';
import type { TableSuggestion, Visualization } from '../../types';
import { LensIconChartMetric } from '../../assets/chart_metric';
import { layerTypes } from '../../../common';
import { metricLabel, MetricVisualizationState, supportedDataTypes } from './visualization';
@ -59,7 +59,7 @@ export const getSuggestions: Visualization<MetricVisualizationState>['getSuggest
layerType: layerTypes.DATA,
},
title: metricLabel,
previewIcon: LensIconChartMetric,
previewIcon: IconChartMetric,
score: 0.5,
// don't show suggestions since we're in tech preview
hide: true,

6
x-pack/plugins/lens/public/visualizations/metric/visualization.tsx
View file

@ -16,9 +16,9 @@ import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
import { LayoutDirection } from '@elastic/charts';
import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import { IconChartMetric } from '@kbn/chart-icons';
import { LayerType } from '../../../common';
import { getSuggestions } from './suggestions';
import { LensIconChartMetric } from '../../assets/chart_metric';
import { Visualization, OperationMetadata, DatasourceLayers, AccessorConfig } from '../../types';
import { layerTypes } from '../../../common';
import { GROUP_ID, LENS_METRIC_ID } from './constants';
@ -166,7 +166,7 @@ export const getMetricVisualization = ({
visualizationTypes: [
{
id: LENS_METRIC_ID,
icon: LensIconChartMetric,
icon: IconChartMetric,
label: metricLabel,
groupLabel: metricGroupLabel,
showExperimentalBadge: true,
@ -197,7 +197,7 @@ export const getMetricVisualization = ({
getDescription() {
return {
icon: LensIconChartMetric,
icon: IconChartMetric,
label: metricLabel,
};
},

22
x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts
View file

@ -9,11 +9,13 @@ import { i18n } from '@kbn/i18n';
import type { EuiIconProps } from '@elastic/eui';
import type { DatatableColumn } from '@kbn/expressions-plugin/common';
import { LensIconChartDonut } from '../../assets/chart_donut';
import { LensIconChartPie } from '../../assets/chart_pie';
import { LensIconChartTreemap } from '../../assets/chart_treemap';
import { LensIconChartMosaic } from '../../assets/chart_mosaic';
import { LensIconChartWaffle } from '../../assets/chart_waffle';
import {
IconChartDonut,
IconChartPie,
IconChartTreemap,
IconChartMosaic,
IconChartWaffle,
} from '@kbn/chart-icons';
import {
CategoryDisplay,
NumberDisplay,
@ -140,7 +142,7 @@ const emptySizeRatioOptions: PartitionChartMeta['toolbarPopover']['emptySizeRati
export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
donut: {
icon: LensIconChartDonut,
icon: IconChartDonut,
label: i18n.translate('xpack.lens.pie.donutLabel', {
defaultMessage: 'Donut',
}),
@ -156,7 +158,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
},
},
pie: {
icon: LensIconChartPie,
icon: IconChartPie,
label: i18n.translate('xpack.lens.pie.pielabel', {
defaultMessage: 'Pie',
}),
@ -171,7 +173,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
},
},
treemap: {
icon: LensIconChartTreemap,
icon: IconChartTreemap,
label: i18n.translate('xpack.lens.pie.treemaplabel', {
defaultMessage: 'Treemap',
}),
@ -186,7 +188,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
},
},
mosaic: {
icon: LensIconChartMosaic,
icon: IconChartMosaic,
label: i18n.translate('xpack.lens.pie.mosaiclabel', {
defaultMessage: 'Mosaic',
}),
@ -203,7 +205,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
requiredMinDimensionCount: 2,
},
waffle: {
icon: LensIconChartWaffle,
icon: IconChartWaffle,
label: i18n.translate('xpack.lens.pie.wafflelabel', {
defaultMessage: 'Waffle',
}),

4
x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx
View file

@ -13,6 +13,7 @@ import {
isRangeAnnotation,
} from '@kbn/event-annotation-plugin/public';
import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
import { IconChartBarAnnotations } from '@kbn/chart-icons';
import { layerTypes } from '../../../../common';
import type { FramePublicAPI, Visualization } from '../../../types';
import { isHorizontalChart } from '../state_helpers';
@ -24,7 +25,6 @@ import {
getDataLayers,
isAnnotationsLayer,
} from '../visualization_helpers';
import { LensIconChartBarAnnotations } from '../../../assets/chart_bar_annotations';
import { generateId } from '../../../id_generator';
const MAX_DATE = 8640000000000000;
@ -106,7 +106,7 @@ export const getAnnotationsSupportedLayer = (
label: i18n.translate('xpack.lens.xyChart.addAnnotationsLayerLabel', {
defaultMessage: 'Annotations',
}),
icon: LensIconChartBarAnnotations,
icon: IconChartBarAnnotations,
disabled: !hasDateHistogram,
toolTipContent: !hasDateHistogram
? i18n.translate('xpack.lens.xyChart.addAnnotationsLayerLabelDisabledHelp', {

4
x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx
View file

@ -8,6 +8,7 @@
import { groupBy, partition } from 'lodash';
import { i18n } from '@kbn/i18n';
import { Datatable } from '@kbn/expressions-plugin/public';
import { IconChartBarReferenceLine } from '@kbn/chart-icons';
import { layerTypes } from '../../../common';
import type { DatasourceLayers, FramePublicAPI, Visualization } from '../../types';
import { groupAxesByType } from './axes_configuration';
@ -28,7 +29,6 @@ import {
isReferenceLayer,
} from './visualization_helpers';
import { generateId } from '../../id_generator';
import { LensIconChartBarReferenceLine } from '../../assets/chart_bar_reference_line';
import { defaultReferenceLineColor } from './color_assignment';
export interface ReferenceLineBase {
@ -318,7 +318,7 @@ export const getReferenceSupportedLayer = (
label: i18n.translate('xpack.lens.xyChart.addReferenceLineLayerLabel', {
defaultMessage: 'Reference lines',
}),
icon: LensIconChartBarReferenceLine,
icon: IconChartBarReferenceLine,
disabled:
!filledDataLayers.length ||
(!dataLayers.some(layerHasNumberHistogram) &&

42
x-pack/plugins/lens/public/visualizations/xy/types.ts
View file

@ -22,16 +22,18 @@ import type {
YAxisConfig,
} from '@kbn/expression-xy-plugin/common';
import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
import { LensIconChartArea } from '../../assets/chart_area';
import { LensIconChartAreaStacked } from '../../assets/chart_area_stacked';
import { LensIconChartAreaPercentage } from '../../assets/chart_area_percentage';
import { LensIconChartBar } from '../../assets/chart_bar';
import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
import { LensIconChartBarPercentage } from '../../assets/chart_bar_percentage';
import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
import { LensIconChartBarHorizontalStacked } from '../../assets/chart_bar_horizontal_stacked';
import { LensIconChartBarHorizontalPercentage } from '../../assets/chart_bar_horizontal_percentage';
import { LensIconChartLine } from '../../assets/chart_line';
import {
IconChartArea,
IconChartLine,
IconChartAreaStacked,
IconChartBarHorizontalStacked,
IconChartBarHorizontalPercentage,
IconChartAreaPercentage,
IconChartBar,
IconChartBarStacked,
IconChartBarPercentage,
IconChartBarHorizontal,
} from '@kbn/chart-icons';
import type { VisualizationType, Suggestion } from '../../types';
import type { ValueLabelConfig } from '../../../common/types';
@ -168,7 +170,7 @@ const groupLabelForLineAndArea = i18n.translate('xpack.lens.xyVisualization.line
export const visualizationTypes: VisualizationType[] = [
{
id: 'bar',
icon: LensIconChartBar,
icon: IconChartBar,
label: i18n.translate('xpack.lens.xyVisualization.barLabel', {
defaultMessage: 'Bar vertical',
}),
@ -177,7 +179,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'bar_horizontal',
icon: LensIconChartBarHorizontal,
icon: IconChartBarHorizontal,
label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
defaultMessage: 'H. Bar',
}),
@ -188,7 +190,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'bar_stacked',
icon: LensIconChartBarStacked,
icon: IconChartBarStacked,
label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
defaultMessage: 'Bar vertical stacked',
}),
@ -196,7 +198,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'bar_percentage_stacked',
icon: LensIconChartBarPercentage,
icon: IconChartBarPercentage,
label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', {
defaultMessage: 'Bar vertical percentage',
}),
@ -204,7 +206,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'bar_horizontal_stacked',
icon: LensIconChartBarHorizontalStacked,
icon: IconChartBarHorizontalStacked,
label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
defaultMessage: 'H. Stacked bar',
}),
@ -215,7 +217,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'bar_horizontal_percentage_stacked',
icon: LensIconChartBarHorizontalPercentage,
icon: IconChartBarHorizontalPercentage,
label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', {
defaultMessage: 'H. Percentage bar',
}),
@ -229,7 +231,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'area',
icon: LensIconChartArea,
icon: IconChartArea,
label: i18n.translate('xpack.lens.xyVisualization.areaLabel', {
defaultMessage: 'Area',
}),
@ -237,7 +239,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'area_stacked',
icon: LensIconChartAreaStacked,
icon: IconChartAreaStacked,
label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
defaultMessage: 'Area stacked',
}),
@ -245,7 +247,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'area_percentage_stacked',
icon: LensIconChartAreaPercentage,
icon: IconChartAreaPercentage,
label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', {
defaultMessage: 'Area percentage',
}),
@ -253,7 +255,7 @@ export const visualizationTypes: VisualizationType[] = [
},
{
id: 'line',
icon: LensIconChartLine,
icon: IconChartLine,
label: i18n.translate('xpack.lens.xyVisualization.lineLabel', {
defaultMessage: 'Line',
}),

4
x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts
View file

@ -25,7 +25,7 @@ import type {
} from './types';
import { layerTypes } from '../../../common';
import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
import { LensIconChartBar } from '../../assets/chart_bar';
import { IconChartBar } from '@kbn/chart-icons';
import type { VisualizeEditorLayersContext } from '@kbn/visualizations-plugin/public';
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
@ -109,7 +109,7 @@ describe('xy_visualization', () => {
it('should show the preferredSeriesType if there are no layers', () => {
const desc = xyVisualization.getDescription(mixedState());
expect(desc.icon).toEqual(LensIconChartBar);
expect(desc.icon).toEqual(IconChartBar);
expect(desc.label).toEqual('Bar vertical');
});

12
x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx
View file

@ -7,6 +7,7 @@
import { i18n } from '@kbn/i18n';
import { uniq } from 'lodash';
import { IconChartBarHorizontal, IconChartBarStacked, IconChartMixedXy } from '@kbn/chart-icons';
import { DatasourceLayers, OperationMetadata, VisualizationType } from '../../types';
import {
State,
@ -20,9 +21,6 @@ import {
} from './types';
import { isHorizontalChart } from './state_helpers';
import { layerTypes } from '../..';
import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
import { LensIconChartMixedXy } from '../../assets/chart_mixed_xy';
import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
import { LayerType } from '../../../common';
export function getAxisName(
@ -192,7 +190,7 @@ export function getDescription(state?: State) {
if (visualizationType === 'mixed' && isHorizontalChart(state.layers)) {
return {
icon: LensIconChartBarHorizontal,
icon: IconChartBarHorizontal,
label: i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
defaultMessage: 'Mixed bar horizontal',
}),
@ -201,7 +199,7 @@ export function getDescription(state?: State) {
if (visualizationType === 'mixed') {
return {
icon: LensIconChartMixedXy,
icon: IconChartMixedXy,
label: i18n.translate('xpack.lens.xyVisualization.mixedLabel', {
defaultMessage: 'Mixed XY',
}),
@ -214,7 +212,7 @@ export function getDescription(state?: State) {
};
}
export const defaultIcon = LensIconChartBarStacked;
export const defaultIcon = IconChartBarStacked;
export const defaultSeriesType = 'bar_stacked';
export const supportedDataLayer = {
@ -222,7 +220,7 @@ export const supportedDataLayer = {
label: i18n.translate('xpack.lens.xyChart.addDataLayerLabel', {
defaultMessage: 'Visualization',
}),
icon: LensIconChartMixedXy,
icon: IconChartMixedXy,
};
// i18n ids cannot be dynamically generated, hence the function below

Some files were not shown because too many files have changed in this diff Show more