Skip to content

[Lens] Chart switch redesign #187475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mbondyra merged 50 commits into from
Sep 5, 2024
Merged

[Lens] Chart switch redesign #187475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
1d6907f
adding a border for workspace panel, moving to boxesVertical for laye…
mbondyra Jul 3, 2024
c51b103
reorder and flatten visualizations positions
mbondyra Jul 3, 2024
6f5b7f6
add deprecated section for legacy metric
mbondyra Jul 3, 2024
06c32e6
add descriptions
mbondyra Jul 3, 2024
c7994ed
redesign chart switch
mbondyra Jul 4, 2024
ee5220a
redesign add layer
mbondyra Jul 4, 2024
97fc4bd
gauge
mbondyra Jul 11, 2024
8c0b8b3
adding partition changes
mbondyra Jul 11, 2024
54ec813
xy
mbondyra Jul 11, 2024
73c6a30
wip
mbondyra Jul 14, 2024
60c884a
compatibleSubtypes
mbondyra Jul 16, 2024
311947f
gauge and pie
mbondyra Aug 1, 2024
2ff6955
percentage -> bar
mbondyra Aug 1, 2024
a384e8d
adding autoFocus https://github.com/elastic/kibana/pull/191213/files
mbondyra Aug 26, 2024
5d0bffb
correct the vis dimensions
mbondyra Aug 27, 2024
063cb59
code review p1
mbondyra Aug 27, 2024
4c01997
padding fix
mbondyra Aug 28, 2024
f8a4687
divider fix
mbondyra Aug 28, 2024
c427714
fix flipping orientation
mbondyra Aug 28, 2024
3d2b1ae
Merge commit 'dda6cd9d9e892cb328c40125c00d173ce71e16d4' into lens/cha…
mbondyra Aug 28, 2024
1d703c4
Merge branch 'main' into lens/chart_switch_redesign
mbondyra Aug 28, 2024
9681afa
Merge commit '358845ef45e74e2cbe9e28fd0eab8a91a9396778' into lens/cha…
mbondyra Aug 28, 2024
f379275
simplify icons for gauge
mbondyra Aug 28, 2024
fcde6fd
fix i18n
mbondyra Aug 28, 2024
fc8c741
optimize icons
mbondyra Aug 29, 2024
80fc5ac
icon optimization
mbondyra Aug 29, 2024
aa6dfed
description bigger
mbondyra Aug 29, 2024
adab691
gauge and icon fixed
mbondyra Aug 29, 2024
b088966
Add layer button fixes
mbondyra Aug 29, 2024
87e1adb
[Lens] Chart switch redesign no stacked
mbondyra Aug 28, 2024
8cb1347
horizontal bar
mbondyra Aug 29, 2024
92eae1f
Merge commit 'be8de5370cc5af56b8c37a12a54b346bd56905b2' into lens/cha…
mbondyra Aug 29, 2024
a863fb5
test correction
mbondyra Aug 29, 2024
88740a1
simplify paddings
mbondyra Aug 29, 2024
b4d7f0f
toolbar popovers paddings
mbondyra Aug 29, 2024
903a711
add layer hardcoded values removed
mbondyra Aug 29, 2024
af42238
i18n
mbondyra Aug 29, 2024
2ad0c43
i18n
mbondyra Aug 29, 2024
a2b187c
fix popover
mbondyra Aug 30, 2024
d8fed3e
chart switch refactor
mbondyra Aug 30, 2024
e58c5c3
Merge commit '50e46291f8e18dbd90c77b8938a41206b6bf122f' into lens/cha…
mbondyra Sep 1, 2024
14e0c1f
CR
mbondyra Sep 1, 2024
5435f50
i18n
mbondyra Sep 1, 2024
b89d264
Merge commit '1a92a4ba136dc0e3488c06b25d1c96ec01c638cc' into lens/cha…
mbondyra Sep 3, 2024
ff8642f
copy changes
mbondyra Sep 3, 2024
2b8f60d
fix suggestions
mbondyra Sep 3, 2024
14b1f7a
revert
mbondyra Sep 3, 2024
529b174
make the change only for xy
mbondyra Sep 4, 2024
7b2a121
Merge commit 'c5242d7e5bc3a9b4123dfb83e49a568abd3e440d' into lens/cha…
mbondyra Sep 4, 2024
725e266
Merge commit '7cb2a59be5d7c1d6066180a7765c05c777dbbd33' into lens/cha…
mbondyra Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/management/rollups/create_and_manage_rollups.asciidoc
View file
Open in desktop
Copy link
Contributor

@dej611 dej611 Aug 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a couple of questions, in particular related to the new "stacking" behaviour cc @teresaalvarezsoler @MichaelMarcialis :

  • Why the limiting the "stacking" only to those layers with a breakdown dimension?
    • My concern is mostly related to a configuration with single layer with multiple metrics which can benefit for having both stacked and unstacked modes
  • Why introducing the new concept of stacking layers?
    • So far the stacking behaviour was "per layer" with implicit stacking behaviour: i.e. both layers are stacked? Then it's a global stacked. One layer amongst the config is unstacked? Then stack all the others together and keep the unstacked separate.
    • With the new double stacking control (per layer + on the appearance popover when multiple layers) it is not easy to reproduce the last behaviour - while it is possible to produce new ones 🤔
  • I have some concern over the discoverability of the new stacking layers control. I found out about it only looking at the mockups, otherwise I would not watch for it over there.
    I think that the combination of "hide when not useful" pattern combined for both per layer stacked control and in the popover makes it a bit harder to discover this new feature. While I agree to not make the UI too complex, in this case probably it can be an exception?
    • and perhaps also a good opportunity to put some explanation/info about the new stacking behaviour?

Copy link

@teresaalvarezsoler teresaalvarezsoler Aug 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dej611 good points

My concern is mostly related to a configuration with single layer with multiple metrics which can benefit for having both stacked and unstacked modes

This is a very good point and definitely a reason to always show the stacking options.

Why introducing the new concept of stacking layers? With the new double stacking control (per layer + on the appearance popover when multiple layers) it is not easy to reproduce the last behaviour

I agree with the issues for this. We may even hit some backward compatibility issues.

I have some concern over the discoverability of the new stacking layers control.

I also had similar concerns when I was testing it.

@MichaelMarcialis IMO these are strong reasons to always show the stacking options when there is a bar or area chart regardless of whether there is a breakdown dimension. I fully agree with Marco the gains of showing options when they are most relevant to keep the UI cleaner doesn't compensate the lost of functionality for the edge cases mentioned above and the discoverability issues. Any reasons why we shouldn't do it?

Copy link
Contributor

@MichaelMarcialis MichaelMarcialis Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@teresaalvarezsoler: This is a pretty dense topic, so I'd be happy to jump on a Zoom if ya'll want to discuss in person.

In short, I was attempting to accommodate for all possible cases in my designs, including the possibility that users might desire to create a visualization comprised two layers where both layers have stacked breakdowns but the layers themselves are not stacked. In order to do that, we would need to distinguish between layer-level breakdown stacking and visualization-level layer stacking (thus the layer and toolbar controls).

If ya'll are comfortable with not accommodating for such edge cases, then I think I'd be OK with what @dej611 is proposing for the sake of further simplification. Thoughts?

Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ as your source to see both the raw and rolled up data.
[role="screenshot"]
image::images/management-create-rollup-bar-chart.png[Create visualization of rolled up data]

. Select *Bar vertical stacked* in the chart type dropdown.
. Select *Bar* in the chart type dropdown.

. Add the `@timestamp` field to the *Horizontal axis*.

Expand Down
8 changes: 8 additions & 0 deletions packages/kbn-chart-icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,18 @@ export {
EuiIconLegend,
IconRegionMap,
IconChartHeatmap,
IconChartGauge,
IconChartHorizontalBullet,
IconDonutHoleLarge,
IconDonutHoleMedium,
IconDonutHoleSmall,
IconChartVerticalBullet,
IconChartLinearSimple,
IconChartGaugeSemiCircle,
IconChartGaugeSemiCircleSimple,
IconChartGaugeArc,
IconChartGaugeArcSimple,
IconChartGaugeCircle,
IconChartGaugeCircleSimple,
IconChartTagcloud,
} from './src/assets';
11 changes: 11 additions & 0 deletions packages/kbn-chart-icons/src/__stories__/icons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,12 @@ import {
EuiIconLegend,
IconRegionMap,
IconChartHeatmap,
IconChartGauge,
IconChartHorizontalBullet,
IconChartVerticalBullet,
IconDonutHoleLarge,
IconDonutHoleMedium,
IconDonutHoleSmall,
} from '../..';

export default {
Expand Down Expand Up @@ -183,10 +187,17 @@ const IconsArray: Array<{
title: 'IconChartHorizontalBullet',
Component: IconChartHorizontalBullet,
},
{
title: 'IconChartGauge',
Component: IconChartGauge,
},
{
title: 'IconChartVerticalBullet',
Component: IconChartVerticalBullet,
},
{ title: 'IconDonutHoleLarge', Component: IconDonutHoleLarge },
{ title: 'IconDonutHoleMedium', Component: IconDonutHoleMedium },
{ title: 'IconDonutHoleSmall', Component: IconDonutHoleSmall },
];

interface RootComponentProps {
Expand Down
15 changes: 4 additions & 11 deletions packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,10 @@

import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { IconSimpleWrapper } from '../icon_simple_wrapper';

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}
export const IconCircle = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M7.427.522c-.813.081-1.398.21-2.039.45a7.318 7.318 0 0 0-2.67 1.72A7.045 7.045 0 0 0 1.28 4.68 7.241 7.241 0 0 0 .507 8c0 1.196.243 2.24.773 3.32a7.047 7.047 0 0 0 1.425 1.975A7.047 7.047 0 0 0 4.68 14.72a7.254 7.254 0 0 0 3.32.773 7.254 7.254 0 0 0 3.32-.773 7.047 7.047 0 0 0 1.975-1.425 7.047 7.047 0 0 0 1.425-1.975A7.254 7.254 0 0 0 15.493 8a7.254 7.254 0 0 0-.773-3.32 7.045 7.045 0 0 0-1.438-1.988C12.111 1.524 10.695.818 9.027.571 8.773.533 7.659.499 7.427.522m1.426 1.041a6.519 6.519 0 0 1 3.091 1.271c.329.246.976.893 1.222 1.222.561.751.976 1.634 1.164 2.479a6.766 6.766 0 0 1 0 2.93c-.414 1.861-1.725 3.513-3.463 4.363a6.76 6.76 0 0 1-1.987.616c-.424.065-1.336.065-1.76 0-1.948-.296-3.592-1.359-4.627-2.993a7.502 7.502 0 0 1-.634-1.332A6.158 6.158 0 0 1 1.514 8c0-1.039.201-1.925.646-2.84.34-.698.686-1.18 1.253-1.747A5.956 5.956 0 0 1 5.16 2.16a6.452 6.452 0 0 1 3.693-.597" />
</svg>
</IconSimpleWrapper>
);
18 changes: 5 additions & 13 deletions packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,10 @@

import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { IconSimpleWrapper } from '../icon_simple_wrapper';

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 d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />
</svg>
export const IconTriangle = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />{' '}
</IconSimpleWrapper>
);
24 changes: 5 additions & 19 deletions packages/kbn-chart-icons/src/assets/axis_bottom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,12 @@
*/

import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { IconSimpleWrapper } from './icon_simple_wrapper';

export const EuiIconAxisBottom = ({
title,
titleId,
...props
}: {
title: string;
titleId: string;
}) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
export const EuiIconAxisBottom = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M5 1.5a.5.5 0 111 0v7a.5.5 0 01-1 0v-7zM15.39 11.39a1.5 1.5 0 010 2.12l-2.122 2.122a.5.5 0 11-.707-.707l2.121-2.122a.5.5 0 000-.707l-2.121-2.12a.5.5 0 11.707-.708l2.121 2.121zM3.439 9.269a.5.5 0 010 .707l-2.122 2.121a.5.5 0 000 .707l2.122 2.121a.5.5 0 01-.707.708L.61 13.51a1.5 1.5 0 010-2.121l2.122-2.121a.5.5 0 01.707 0zM8 3a.5.5 0 01.5.5v5a.5.5 0 01-1 0v-5A.5.5 0 018 3zM11 5.5a.5.5 0 00-1 0v3a.5.5 0 001 0v-3z" />
<path d="M3.5 12a.5.5 0 000 1h9a.5.5 0 000-1h-9z" />
</svg>
</IconSimpleWrapper>
);
24 changes: 5 additions & 19 deletions packages/kbn-chart-icons/src/assets/axis_left.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,14 @@
* Side Public License, v 1.
*/

import { EuiIconProps } from '@elastic/eui';
import React from 'react';
import { IconSimpleWrapper } from './icon_simple_wrapper';

export const EuiIconAxisLeft = ({
title,
titleId,
...props
}: {
title: string;
titleId: string;
}) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
export const EuiIconAxisLeft = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M7.378 3.585a.5.5 0 00.353-.854L5.61.611a1.5 1.5 0 00-2.121 0L1.367 2.73a.5.5 0 00.708.707l2.12-2.12a.5.5 0 01.708 0l2.121 2.12a.5.5 0 00.354.147z" />
<path d="M5.046 3.088v4.129l.005.04v5.658a.5.5 0 01-.992.09l-.01-.09V8.786l-.004-.04V3.087a.5.5 0 01.992-.09l.01.09z" />
<path d="M4.55 15.829a1.5 1.5 0 001.06-.44l2.122-2.121a.5.5 0 10-.707-.707l-2.121 2.121a.5.5 0 01-.708 0l-2.12-2.121a.5.5 0 00-.708.707l2.121 2.121a1.5 1.5 0 001.061.44zM13.5 4a.5.5 0 01.5.5v7a.5.5 0 11-1 0v-7a.5.5 0 01.5-.5zM10.5 6.5a.5.5 0 011 0v5a.5.5 0 11-1 0v-5zM8.5 8a.5.5 0 00-.5.5v3a.5.5 0 101 0v-3a.5.5 0 00-.5-.5z" />
</svg>
</IconSimpleWrapper>
);
24 changes: 5 additions & 19 deletions packages/kbn-chart-icons/src/assets/axis_right.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,14 @@
* Side Public License, v 1.
*/

import { EuiIconProps } from '@elastic/eui';
import React from 'react';
import { IconSimpleWrapper } from './icon_simple_wrapper';

export const EuiIconAxisRight = ({
title,
titleId,
...props
}: {
title: string;
titleId: string;
}) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
export const EuiIconAxisRight = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M8.622 3.585a.5.5 0 01-.353-.854L10.39.611a1.5 1.5 0 012.121 0l2.122 2.12a.5.5 0 11-.707.707l-2.122-2.12a.5.5 0 00-.707 0l-2.121 2.12a.5.5 0 01-.354.147z" />
<path d="M11.95 12.915V8.786l.005-.04V3.087a.5.5 0 00-.992-.09l-.01.09v4.129l-.004.04v5.658a.5.5 0 00.992.09l.01-.09z" />
<path d="M11.45 15.829a1.5 1.5 0 01-1.06-.44l-2.122-2.121a.5.5 0 11.707-.707l2.121 2.121a.5.5 0 00.707 0l2.122-2.121a.5.5 0 01.707.707l-2.121 2.121a1.5 1.5 0 01-1.061.44zM2.5 4a.5.5 0 00-.5.5v7a.5.5 0 101 0v-7a.5.5 0 00-.5-.5zM5.5 6.5a.5.5 0 00-1 0v5a.5.5 0 101 0v-5zM7.5 8a.5.5 0 01.5.5v3a.5.5 0 11-1 0v-3a.5.5 0 01.5-.5z" />
</svg>
</IconSimpleWrapper>
);
24 changes: 5 additions & 19 deletions packages/kbn-chart-icons/src/assets/axis_top.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,17 @@
* Side Public License, v 1.
*/

import { EuiIconProps } from '@elastic/eui';
import React from 'react';
import { IconSimpleWrapper } from './icon_simple_wrapper';

export const EuiIconAxisTop = ({
title,
titleId,
...props
}: {
title: string;
titleId: string;
}) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
export const EuiIconAxisTop = (props: Omit<EuiIconProps, 'type'>) => (
<IconSimpleWrapper {...props}>
<path d="M4.99991 7.49999C4.99991 7.22384 5.22376 6.99999 5.49991 6.99999C5.77605 6.99999 5.99991 7.22384 5.99991 7.49999V14.5C5.99991 14.7761 5.77605 15 5.49991 15C5.22376 15 4.99991 14.7761 4.99991 14.5V7.49999Z" />
<path d="M15.3893 2.38929C15.6706 2.67059 15.8287 3.05212 15.8287 3.44995C15.8287 3.84777 15.6706 4.2293 15.3893 4.51061L13.268 6.63193C13.1742 6.7257 13.0471 6.77838 12.9145 6.77838C12.7818 6.77838 12.6547 6.7257 12.5609 6.63193C12.4671 6.53816 12.4145 6.41098 12.4145 6.27838C12.4145 6.14577 12.4671 6.01859 12.5609 5.92482L14.6822 3.8035C14.776 3.70973 14.8287 3.58256 14.8287 3.44995C14.8287 3.31734 14.776 3.19016 14.6822 3.09639L12.5609 0.975075C12.4671 0.881307 12.4145 0.754129 12.4145 0.621522C12.4145 0.488914 12.4671 0.361736 12.5609 0.267968C12.6547 0.1742 12.7819 0.121521 12.9145 0.121521C13.0471 0.121521 13.1742 0.1742 13.268 0.267968L15.3893 2.38929Z" />
<path d="M3.43867 0.26864C3.53243 0.362408 3.58511 0.489585 3.58511 0.622193C3.58511 0.754801 3.53243 0.881978 3.43867 0.975746L1.31735 3.09707C1.22358 3.19083 1.1709 3.31801 1.1709 3.45062C1.1709 3.58323 1.22358 3.71041 1.31735 3.80417L3.43867 5.92549C3.53243 6.01926 3.58511 6.14644 3.58511 6.27905C3.58511 6.41166 3.53243 6.53883 3.43867 6.6326C3.3449 6.72637 3.21772 6.77905 3.08511 6.77905C2.9525 6.77905 2.82533 6.72637 2.73156 6.6326L0.610239 4.51128C0.328934 4.22998 0.170898 3.84844 0.170898 3.45062C0.170898 3.0528 0.328934 2.67126 0.610238 2.38996L2.73156 0.26864C2.82533 0.174871 2.9525 0.122192 3.08511 0.122192C3.21772 0.122192 3.3449 0.174871 3.43867 0.26864Z" />
<path d="M7.99991 6.99999C8.27605 6.99999 8.49991 7.22384 8.49991 7.49999V12.5C8.49991 12.7761 8.27605 13 7.99991 13C7.72377 13 7.49991 12.7761 7.49991 12.5V7.49999C7.49991 7.22384 7.72377 6.99999 7.99991 6.99999Z" />
<path d="M10.9999 7.49999C10.9999 7.22384 10.776 6.99999 10.4999 6.99999C10.2238 6.99999 9.99991 7.22384 9.99991 7.49999V10.5C9.99991 10.7761 10.2238 11 10.4999 11C10.776 11 10.9999 10.7761 10.9999 10.5V7.49999Z" />
<path d="M3.50015 2.99999C3.22401 2.99999 3.00015 3.22384 3.00015 3.49999C3.00015 3.77613 3.22401 3.99999 3.50015 3.99999H12.5002C12.7763 3.99999 13.0002 3.77613 13.0002 3.49999C13.0002 3.22384 12.7763 2.99999 12.5002 2.99999H3.50015Z" />
</svg>
</IconSimpleWrapper>
);
16 changes: 4 additions & 12 deletions packages/kbn-chart-icons/src/assets/chart_area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
import { ChartIconWrapper } from './icon_simple_wrapper';

export const IconChartArea = ({ 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}
export const IconChartArea = (props: Omit<EuiIconProps, 'type'>) => (
<ChartIconWrapper {...props}>
<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={colors.accent}
Expand All @@ -29,5 +21,5 @@ export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, '
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={colors.subdued}
/>
</svg>
</ChartIconWrapper>
);
20 changes: 4 additions & 16 deletions packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
import { ChartIconWrapper } from './icon_simple_wrapper';

export const IconChartAreaPercentage = ({
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}
export const IconChartAreaPercentage = (props: Omit<EuiIconProps, 'type'>) => (
<ChartIconWrapper {...props}>
<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={colors.accent}
Expand All @@ -33,5 +21,5 @@ export const IconChartAreaPercentage = ({
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={colors.subdued}
/>
</svg>
</ChartIconWrapper>
);
16 changes: 4 additions & 12 deletions packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
import { ChartIconWrapper } from './icon_simple_wrapper';

export const IconChartAreaStacked = ({ 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}
export const IconChartAreaStacked = (props: Omit<EuiIconProps, 'type'>) => (
<ChartIconWrapper {...props}>
<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={colors.accent}
Expand All @@ -29,5 +21,5 @@ export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconP
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={colors.subdued}
/>
</svg>
</ChartIconWrapper>
);
16 changes: 4 additions & 12 deletions packages/kbn-chart-icons/src/assets/chart_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
import { ChartIconWrapper } from './icon_simple_wrapper';

export const IconChartBar = ({ 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}
export const IconChartBar = (props: Omit<EuiIconProps, 'type'>) => (
<ChartIconWrapper {...props}>
<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={colors.subdued}
Expand All @@ -29,5 +21,5 @@ export const IconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
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={colors.accent}
/>
</svg>
</ChartIconWrapper>
);
20 changes: 4 additions & 16 deletions packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,10 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { colors } from './common_styles';
import { ChartIconWrapper } from './icon_simple_wrapper';

export const IconChartBarAnnotations = ({
title,
titleId,
...props
}: Omit<EuiIconProps, 'type'>) => (
<svg
width="30"
height="22"
viewBox="0 0 30 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
export const IconChartBarAnnotations = (props: Omit<EuiIconProps, 'type'>) => (
<ChartIconWrapper {...props}>
<g>
<path
className={colors.subdued}
Expand All @@ -35,5 +23,5 @@ export const IconChartBarAnnotations = ({
d="M10 1a1 1 0 011-1h3a1 1 0 011 1h3v4h-3a1 1 0 01-1-1h-2v9a1 1 0 11-2 0V1z"
/>
</g>
</svg>
</ChartIconWrapper>
);
Loading