maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Custom chart type icons (#46967)

Browse source 
* Added custom chart type icons

* Using new stacked glyphs

* Compressed style for button group

* snaps

* Fix TS type

* Trying to use the more encompassing `IconType` for all icons

* Wrap whole chart type in popover anchor

* Fix for truncation

* Update index pattern switchers to use same caret icon instead of `(change)`

* Fixed inital bar icon and added mixed XY icon

* Fix sentence casing

* Remove -> Delete

* Fix accidental passing down of `iconLarge`

* Fix type issue

* Use Lens icon instead of happy face

* Fix broken Lens test

* Fix icons and text
This commit is contained in:
Caroline Horn 2019-10-03 13:30:33 -04:00 committed by Wylie Conlon
parent ef8b2a36d4
commit 8622b497e5
30 changed files with 176 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
x-pack/legacy/plugins/lens/public/assets/chart_area.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#00B3A4" fill-rule="nonzero" d="M33,7 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C4,20 6.5,16 9,16 C11.5,16 14,19 15,19 C16,19 18.2304686,12.0056015 20.8652343,12.0028008 C23.5,12 26,12 27,12 C28,12 30,7 33,7 Z" />
<path fill="#69707D" fill-rule="nonzero" d="M9,2 C12,2 14,8 15,8 C16,8 18.5,5 21,5 C22.6666667,5 23.9443333,7.333 24.833,11.999 L25.1415524,12.0001851 C24.1293204,12.0004181 22.8717636,12.0009441 21.5486098,12.0021318 L20.8652343,12.0028008 C18.2304686,12.0056015 16,19 15,19 C14,19 11.5,16 9,16 C6.5,16 4,20 3,20 L3,20 L3,8 C4,6.5 6,2 9,2 Z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 755 B

6
x-pack/legacy/plugins/lens/public/assets/chart_area_stacked.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#00B3A4" fill-rule="nonzero" d="M2.99988386,16.213 L3.48350681,16.3040885 L4.29647446,16.4500441 L5.05893763,16.5788635 C6.77926265,16.8594426 8.08887915,17 9,17 C9.98588087,17 10.7120234,16.7494439 12.1658521,16.034061 L12.4472136,15.8944272 C13.8017766,15.2171457 14.3808318,15 15,15 C15.5073017,15 15.9876756,15.1457694 16.8897238,15.5709561 L18.0984543,16.1628004 C19.379759,16.7797847 20.0757367,17 21,17 C22.0276746,17 22.7508134,16.6510411 24.1188138,15.6560123 L25.0094553,14.9970972 C26.0333232,14.2521968 26.5335058,14 27,14 C27.5813134,14 28.2313712,14.1853896 29.5976083,14.7184403 L30.6984731,15.1540241 L31.2658691,15.3712127 C31.9862357,15.6400999 32.5222061,15.8086684 33.0013768,15.9027957 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 2.99988386,22.5522847 2.99988386,22 L2.99988386,16.213 Z"/>
<path fill="#69707D" fill-rule="nonzero" d="M27,2 C28.3333333,2 30.3333333,3 33,5 L33.00068,13.8421016 L32.6757803,13.7445294 C32.3298316,13.6337324 31.9168942,13.4822979 31.4023917,13.2815597 L30.3015269,12.8459759 L29.7341309,12.6287873 L29.1977351,12.4356139 C28.276898,12.1184693 27.6761464,12 27,12 C25.9723254,12 25.2491866,12.3489589 23.8811862,13.3439877 L22.9905447,14.0029028 C21.9666768,14.7478032 21.4664942,15 21,15 C20.4926983,15 20.0123244,14.8542306 19.1102762,14.4290439 L17.9015457,13.8371996 C16.620241,13.2202153 15.9242633,13 15,13 C14.0141191,13 13.2879766,13.2505561 11.8341479,13.965939 L11.5527864,14.1055728 C10.1982234,14.7828543 9.61916824,15 9,15 L8.66631874,14.9932033 C7.48347119,14.9479299 5.58607425,14.6764419 3.00069957,14.1775737 L3,10 C5,10 7.66666667,11 9,11 C11,11 13,7 15,7 C17,7 19,8 21,8 C23,8 25,2 27,2 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
x-pack/legacy/plugins/lens/public/assets/chart_bar.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M8,8 C8.55228,8 9,8.44772 9,9 L9,22 C9,22.5523 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,9 C3,8.44772 3.44772,8 4,8 L8,8 Z M24,1 C24.5523,1 25,1.44772 25,2 L25,22 C25,22.5523 24.5523,23 24,23 L20,23 C19.4477,23 19,22.5523 19,22 L19,2 C19,1.44772 19.4477,1 20,1 L24,1 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M16,12 C16.5523,12 17,12.4477 17,13 L17,22 C17,22.5523 16.5523,23 16,23 L12,23 C11.4477,23 11,22.5523 11,22 L11,13 C11,12.4477 11.4477,12 12,12 L16,12 Z M32,5 C32.5523,5 33,5.44772 33,6 L33,22 C33,22.5523 32.5523,23 32,23 L28,23 C27.4477,23 27,22.5523 27,22 L27,6 C27,5.44772 27.4477,5 28,5 L32,5 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 816 B

6
x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M31,17 C31.5523,17 32,17.4477 32,18 L32,22 C32,22.5523 31.5523,23 31,23 L5,23 C4.44771,23 4,22.5523 4,22 L4,18 C4,17.4477 4.44772,17 5,17 L31,17 Z M26,1 C26.5523,1 27,1.44772 27,2 L27,6 C27,6.55228 26.5523,7 26,7 L5,7 C4.44772,7 4,6.55228 4,6 L4,2 C4,1.44772 4.44772,1 5,1 L26,1 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M4,10 C4,9.44772 4.44772,9 5,9 L20,9 C20.5523,9 21,9.44772 21,10 L21,14 C21,14.5523 20.5523,15 20,15 L5,15 C4.44772,15 4,14.5523 4,14 L4,10 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 661 B

6
x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal_stacked.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M22,17 L22,23 L5,23 C4.44771,23 4,22.5523 4,22 L4,18 C4,17.4477 4.44772,17 5,17 L22,17 Z M19,9 L19,15 L5.22222222,15 C4.54721333,15 4,14.5523 4,14 L4,10 C4,9.44772 4.54721333,9 5.22222222,9 L19,9 Z M20,1 L20,7 L5.04166667,7 C4.466375,7 4,6.55228 4,6 L4,2 C4,1.44772 4.466375,1 5.04166667,1 L20,1 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M31,17 C31.5523,17 32,17.4477 32,18 L32,22 C32,22.5523 31.5523,23 31,23 L24,23 L24,17 L31,17 Z M23.7777778,9 C24.4528111,9 25,9.44772 25,10 L25,14 C25,14.5523 24.4528111,15 23.7777778,15 L21,15 L21,9 L23.7777778,9 Z M26.9583333,1 C27.5336458,1 28,1.44772 28,2 L28,6 C28,6.55228 27.5336458,7 26.9583333,7 L22,7 L22,1 L26.9583333,1 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 868 B

6
x-pack/legacy/plugins/lens/public/assets/chart_bar_stacked.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M9,14 L9,22 C9,22.5523 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,14 L9,14 Z M17,10 L17,22 C17,22.5523 16.5523,23 16,23 L12,23 C11.4477,23 11,22.5523 11,22 L11,10 L17,10 Z M25,14 L25,22 C25,22.5523 24.5523,23 24,23 L20,23 C19.4477,23 19,22.5523 19,22 L19,14 L25,14 Z M33,15 L33,22 C33,22.5523 32.5523,23 32,23 L28,23 C27.4477,23 27,22.5523 27,22 L27,15 L33,15 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M32,2 C32.5523,2 33,2.44772 33,3 L33,13 L27,13 L27,3 C27,2.44772 27.4477,2 28,2 L32,2 Z M8,8 C8.55228,8 9,8.44772 9,9 L9,12 L3,12 L3,9 C3,8.44772 3.44772,8 4,8 L8,8 Z M24,4 C24.5523,4 25,4.44772 25,5 L25,12 L19,12 L19,5 C19,4.44772 19.4477,4 20,4 L24,4 Z M16,1 C16.5523,1 17,1.44772 17,2 L17,8 L11,8 L11,2 C11,1.44772 11.4477,1 12,1 L16,1 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 950 B

6
x-pack/legacy/plugins/lens/public/assets/chart_datatable.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M14,19 C14.5523,19 15,19.4477 15,20 L15,22 C15,22.5523 14.5523,23 14,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,20 C3,19.4477 3.44772,19 4,19 L14,19 Z M14,13 C14.5523,13 15,13.4477 15,14 L15,16 C15,16.5523 14.5523,17 14,17 L4,17 C3.44772,17 3,16.5523 3,16 L3,14 C3,13.4477 3.44772,13 4,13 L14,13 Z M14,7 C14.5523,7 15,7.44772 15,8 L15,10 C15,10.5523 14.5523,11 14,11 L4,11 C3.44772,11 3,10.5523 3,10 L3,8 C3,7.44772 3.44772,7 4,7 L14,7 Z M32,1 C32.5523,1 33,1.44772 33,2 L33,4 C33,4.55228 32.5523,5 32,5 L4,5 C3.44772,5 3,4.55228 3,4 L3,2 C3,1.44772 3.44772,1 4,1 L32,1 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M23,19 C23.5523,19 24,19.4477 24,20 L24,22 C24,22.51285 23.613973,22.9355092 23.1166239,22.9932725 L23,23 L18,23 C17.4477,23 17,22.5523 17,22 L17,20 C17,19.4477 17.4477,19 18,19 L23,19 Z M32,19 C32.5523,19 33,19.4477 33,20 L33,22 C33,22.5523 32.5523,23 32,23 L27,23 C26.4477,23 26,22.5523 26,22 L26,20 C26,19.4477 26.4477,19 27,19 L32,19 Z M23,13 C23.5523,13 24,13.4477 24,14 L24,16 C24,16.51285 23.613973,16.9355092 23.1166239,16.9932725 L23,17 L18,17 C17.4477,17 17,16.5523 17,16 L17,14 C17,13.4477 17.4477,13 18,13 L23,13 Z M32,13 C32.5523,13 33,13.4477 33,14 L33,16 C33,16.5523 32.5523,17 32,17 L27,17 C26.4477,17 26,16.5523 26,16 L26,14 C26,13.4477 26.4477,13 27,13 L32,13 Z M23,7 C23.5523,7 24,7.44772 24,8 L24,10 C24,10.51285 23.613973,10.9355092 23.1166239,10.9932725 L23,11 L18,11 C17.4477,11 17,10.5523 17,10 L17,8 C17,7.44772 17.4477,7 18,7 L23,7 Z M32,7 C32.5523,7 33,7.44772 33,8 L33,10 C33,10.5523 32.5523,11 32,11 L27,11 C26.4477,11 26,10.5523 26,10 L26,8 C26,7.44772 26.4477,7 27,7 L32,7 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
x-pack/legacy/plugins/lens/public/assets/chart_line.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#69707D" fill-rule="nonzero" d="M26.4344877,17.4565047 C26.645018,18.0091467 26.8398529,18.4376454 27.0139445,18.7331648 L27.0872705,18.8516486 C27.125032,18.9094709 27.159269,18.9566974 27.1883422,18.9930202 C27.7077421,18.9539174 28.2572038,18.7447839 29.3175699,18.2223667 L29.5527864,18.1055728 C31.1982234,17.2828543 31.9525016,17 33,17 L33,19 C32.4926983,19 32.0123244,19.1457694 31.1102762,19.5709561 L29.9015457,20.1628004 C28.620241,20.7797847 27.9242633,21 27,21 L26.8258382,20.9949604 C25.574689,20.9192339 25.0213871,19.9585786 23.8322417,16.0017929 L25.9297735,16.0009939 C26.1091193,16.564215 26.2653634,17.0125534 26.4344877,17.4565047 Z M9,2 C10.2687578,2 10.9659083,2.68913749 12.4918637,4.93898384 L13.265899,6.08501911 L13.5378436,6.47209062 L13.7986997,6.82959667 C14.4170887,7.6577293 14.7864833,8 15,8 C15.4664942,8 15.9666768,7.74780319 16.9905447,7.00290285 L17.8811862,6.34398766 L18.3387795,6.01914366 C19.4235519,5.27168078 20.0932283,5 21,5 C22.3766521,5 22.9249023,5.86257993 24.1679983,9.99900565 L22.0705386,10 C21.891062,9.43630516 21.7347347,8.98770414 21.5655123,8.54349533 C21.3249062,7.91190445 21.1048003,7.44245987 20.9127295,7.1483514 L20.8617638,7.07355628 L20.8165496,7.01313294 C20.3652655,7.07768487 19.8294645,7.38913892 18.810379,8.14322338 L18.1188138,8.65601234 L17.6612205,8.98085634 C16.5764481,9.72831922 15.9067717,10 15,10 C13.7312422,10 13.0340917,9.31086251 11.5081363,7.06101616 L10.734101,5.91498089 L10.4621564,5.52790938 L10.2013003,5.17040333 C9.58291131,4.3422707 9.2135167,4 9,4 C8.70552018,4 8.11453538,4.65105416 6.9827601,6.32986537 L6.49186371,7.06101616 L6.16583621,7.53564558 C4.85949038,9.40917568 4.17477576,10 3,10 L3,8 C3.29447982,8 3.88546462,7.34894584 5.0172399,5.67013463 L5.50813629,4.93898384 L5.83416379,4.46435442 C7.14050962,2.59082432 7.82522424,2 9,2 Z"/>
<path fill="#00B3A4" fill-rule="nonzero" d="M3,22 C4.12292953,22 4.85242764,21.5230595 6.29512871,20.1146533 L7.05279708,19.365471 L7.39778355,19.0352763 C8.20887781,18.2755754 8.64742016,18 9,18 C9.46649419,18 9.96667676,18.2521968 10.9905447,18.9970972 L11.8811862,19.6560123 L12.3387795,19.9808563 C13.4235519,20.7283192 14.0932283,21 15,21 C16.3246632,21 16.9957891,20.227811 18.5460212,17.5561347 L19.1387229,16.5278934 L19.5237801,15.8818271 C20.3284171,14.5614459 20.7963671,14 21,14 L27,14 C28.3328787,14 28.9781636,13.205228 30.4516519,10.3241353 L31.1438791,8.95355008 L31.5024143,8.26452693 C32.3332975,6.69934793 32.8305201,6 33,6 L33,4 C31.6671213,4 31.0218364,4.79477202 29.5483481,7.67586473 L28.8561209,9.04644992 L28.4975857,9.73547307 C27.6667025,11.3006521 27.1694799,12 27,12 L21,12 C19.6753368,12 19.0042109,12.772189 17.4539788,15.4438653 L16.8612771,16.4721066 L16.4762199,17.1181729 C15.6715829,18.4385541 15.2036329,19 15,19 C14.5335058,19 14.0333232,18.7478032 13.0094553,18.0029028 L12.1188138,17.3439877 L11.6612205,17.0191437 C10.5764481,16.2716808 9.90677174,16 9,16 C7.87707047,16 7.14757236,16.4769405 5.70487129,17.8853467 L4.94720292,18.634529 L4.60221645,18.9647237 C3.79112219,19.7244246 3.35257984,20 3,20 L3,22 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

4
x-pack/legacy/plugins/lens/public/assets/chart_metric.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<path fill="#00B3A4" fill-rule="nonzero" d="M28,1 C28.5522847,1 29,1.44771525 29,2 L29,16 C29,16.5522847 28.5522847,17 28,17 L8,17 C7.44771525,17 7,16.5522847 7,16 L7,2 C7,1.44771525 7.44771525,1 8,1 L28,1 Z M18.121739,4 C16.2349057,4 14.8565724,5.10741667 14.861239,6.60931667 C14.8565724,7.66445 15.5314057,8.54848333 16.534239,8.76711667 L16.534239,8.76711667 L16.534239,8.83365 L16.3790783,8.86464202 C15.3051301,9.11664291 14.4956154,10.0961758 14.5000179,11.2576667 C14.4954057,12.8403333 15.997239,14 18.121739,14 C20.227239,14 21.7339057,12.8403333 21.738739,11.2576667 C21.7339057,10.0408667 20.8355724,9.02376667 19.7044057,8.83365 L19.7044057,8.83365 L19.7044057,8.76711667 L19.8655411,8.72460142 C20.7621964,8.44972932 21.3729983,7.60583148 21.3774057,6.60931667 C21.372739,5.11216667 19.9944057,4 18.121739,4 Z M18.121739,9.54183333 C19.1579057,9.54183333 19.9184057,10.2072167 19.9279057,11.134 C19.9184057,12.0323333 19.210239,12.6406667 18.121739,12.6406667 C17.0190724,12.6406667 16.306239,12.0323333 16.315739,11.134 C16.306239,10.2024667 17.0714057,9.54183333 18.121739,9.54183333 Z M18.121739,5.37833333 C19.0295724,5.37833333 19.652239,5.93916667 19.661739,6.77566667 C19.652239,7.62643333 19.0105724,8.20626667 18.121739,8.20626667 C17.218739,8.20626667 16.5724057,7.62166667 16.5819057,6.77566667 C16.5724057,5.93916667 17.199739,5.37833333 18.121739,5.37833333 Z" />
<path fill="#69707D" d="M4,19 L32,19 C32.5522847,19 33,19.4477153 33,20 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C3,19.4477153 3.44771525,19 4,19 Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

7
x-pack/legacy/plugins/lens/public/assets/chart_mixed_xy.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
<g fill="none" fill-rule="evenodd">
<path fill="#00B3A4" fill-rule="nonzero" d="M27,17 L27.186529,16.9974776 L27.186529,16.9974776 L27.5306489,16.9780319 L27.5306489,16.9780319 L27.7970813,16.9480498 L27.7970813,16.9480498 L28.1314132,16.8902959 L28.1314132,16.8902959 L28.3240687,16.8467882 L28.3240687,16.8467882 L28.5741436,16.7795968 L28.5741436,16.7795968 L28.7972534,16.7101669 L28.7972534,16.7101669 L29.0118952,16.6357956 L29.0118952,16.6357956 L29.2206832,16.5573466 L29.2206832,16.5573466 L29.5257429,16.4328291 L29.5257429,16.4328291 C29.6917615,16.3625772 29.8659214,16.2847405 30.0504789,16.1988116 L30.3353955,16.0637856 L31.5366424,15.4755067 C31.9652048,15.2735009 32.2651595,15.1500775 32.5027091,15.079784 C32.6490036,15.0364082 32.7720846,15.0132176 32.8871051,15.0043333 L33,15 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C4,20 6.5,16 9,16 C11.5,16 14,19 15,19 C16,19 18.2304686,11.0056015 20.8652343,11.0028008 L22.032,11.001 L22.5729797,12.2063372 L22.8453722,12.8006363 L23.1353155,13.4131932 C23.6517923,14.4818141 24.0899456,15.2554854 24.5264765,15.8043369 C24.6066449,15.9049139 24.6868272,15.9982178 24.7674282,16.0843602 C24.8620797,16.185372 24.9556984,16.2752259 25.0500608,16.355767 L25.1925522,16.4698309 C25.4114165,16.6341602 25.6390246,16.7544067 25.8838085,16.8384272 C26.0902723,16.9092634 26.3087339,16.954332 26.5445339,16.9783817 L26.6855542,16.9901593 L26.6855542,16.9901593 L26.8388203,16.9975385 L27,17 Z M33,5 L33,11 L32.813471,11.0025224 L32.813471,11.0025224 L32.4693511,11.0219681 L32.4693511,11.0219681 L32.2029187,11.0519502 L32.2029187,11.0519502 L31.8715657,11.1090897 L31.8715657,11.1090897 L31.6759313,11.1532118 L31.6759313,11.1532118 L31.4258564,11.2204032 L31.4258564,11.2204032 L31.1218141,11.3168815 L31.1218141,11.3168815 L30.9881048,11.3642044 C30.8638886,11.4090134 30.7354373,11.4588632 30.6017511,11.5137699 L30.4742571,11.5671709 C30.3082385,11.6374228 30.1340786,11.7152595 29.9495211,11.8011884 L29.6646045,11.9362144 L28.4012468,12.5538016 L28.4012468,12.5538016 L28.0492427,12.712509 L28.0492427,12.712509 L27.8622668,12.7905874 L27.6054984,12.886256 L27.6054984,12.886256 L27.4284236,12.9397598 C27.3194005,12.758065 27.1915885,12.5277585 27.0479541,12.2534345 L26.8876454,11.9420304 L26.655,11.472 L26.6387264,11 L27,11 C28,11 30,5 33,5 Z"/>
<path fill="#69707D" fill-rule="nonzero" d="M33,14 C32.4926983,14 32.0123244,14.1457694 31.1102762,14.5709561 L29.9015457,15.1628004 C28.620241,15.7797847 27.9242633,16 27,16 C25.6159171,16 24.996673,15.1346903 23.4839445,11.7938531 L22.8470575,10.3738187 L22.5009848,9.62538829 L22.2884925,9.18043954 C21.57063,7.69807401 21.1257654,7 21,7 C20.5335058,7 20.0333232,7.25219681 19.0094553,7.99709715 L18.1188138,8.65601234 L17.6612205,8.98085634 C16.5764481,9.72831922 15.9067717,10 15,10 C13.7312422,10 13.0340917,9.31086251 11.5081363,7.06101616 L10.734101,5.91498089 L10.4621564,5.52790938 L10.2013003,5.17040333 C9.58291131,4.3422707 9.2135167,4 9,4 C8.70552018,4 8.11453538,4.65105416 6.9827601,6.32986537 L6.49186371,7.06101616 L6.16583621,7.53564558 C4.85949038,9.40917568 4.17477576,10 3,10 L3,8 C3.29447982,8 3.88546462,7.34894584 5.0172399,5.67013463 L5.50813629,4.93898384 L5.83416379,4.46435442 C7.14050962,2.59082432 7.82522424,2 9,2 C10.2687578,2 10.9659083,2.68913749 12.4918637,4.93898384 L13.265899,6.08501911 L13.5378436,6.47209062 L13.7986997,6.82959667 C14.4170887,7.6577293 14.7864833,8 15,8 C15.4664942,8 15.9666768,7.74780319 16.9905447,7.00290285 L17.8811862,6.34398766 L18.3387795,6.01914366 C19.4235519,5.27168078 20.0932283,5 21,5 C22.3840829,5 23.003327,5.86530972 24.5160555,9.20614691 L25.1529425,10.6261813 L25.4990152,11.3746117 L25.7115075,11.8195605 C26.42937,13.301926 26.8742346,14 27,14 C27.5073017,14 27.9876756,13.8542306 28.8897238,13.4290439 L30.0984543,12.8371996 C31.379759,12.2202153 32.0757367,12 33,12 L33,14 Z"/>
<path fill="#69707D" fill-rule="nonzero" d="M9,14 L9,21.8888889 C9,22.5025556 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5025556 3,21.8888889 L3,14 C3,13.4477153 3.44771525,13 4,13 L8,13 C8.55228475,13 9,13.4477153 9,14 Z M17,13 L17,22 C17,22.5522847 16.5522847,23 16,23 L12,23 C11.4477153,23 11,22.5522847 11,22 L11,13 C11,12.4477153 11.4477153,12 12,12 L16,12 C16.5522847,12 17,12.4477153 17,13 Z M25,18 L25,22 C25,22.5522847 24.5522847,23 24,23 L20,23 C19.4477153,23 19,22.5522847 19,22 L19,18 C19,17.4477153 19.4477153,17 20,17 L24,17 C24.5522847,17 25,17.4477153 25,18 Z M33,20 L33,22 C33,22.5522847 32.5522847,23 32,23 L28,23 C27.4477153,23 27,22.5522847 27,22 L27,20 C27,19.4477153 27.4477153,19 28,19 L32,19 C32.5522847,19 33,19.4477153 33,20 Z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

10
x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx
View file

@ -19,6 +19,7 @@ import {
} from '../types';
import { generateId } from '../id_generator';
import { NativeRenderer } from '../native_renderer';
import chartTableSVG from '../assets/chart_datatable.svg';
export interface LayerState {
layerId: string;
@ -97,17 +98,18 @@ export const datatableVisualization: Visualization<
{
id: 'lnsDatatable',
icon: 'visTable',
largeIcon: chartTableSVG,
label: i18n.translate('xpack.lens.datatable.label', {
defaultMessage: 'Datatable',
defaultMessage: 'Data table',
}),
},
],
getDescription(state) {
return {
icon: 'visTable',
icon: chartTableSVG,
label: i18n.translate('xpack.lens.datatable.label', {
defaultMessage: 'Datatable',
defaultMessage: 'Data table',
}),
};
},
@ -168,7 +170,7 @@ export const datatableVisualization: Visualization<
},
],
},
previewIcon: 'visTable',
previewIcon: chartTableSVG,
// dont show suggestions for reduced versions or single-line tables
hide: table.changeType === 'reduced' || !table.isMultiRow,
},

11
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss
View file

@ -7,7 +7,18 @@
}
}
.lnsChartSwitch__triggerButton {
@include euiTitle('xs');
line-height: $euiSizeXXL;
}
.lnsChartSwitch__summaryIcon {
margin-right: $euiSizeS;
transform: translateY(-2px);
}
// Targeting img as this won't target normal EuiIcon's only the custom svgs's
img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements
// The large icons aren't square so max out the width to fill the height
width: 100%;
}

5
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss
View file

@ -36,6 +36,11 @@
align-items: center;
justify-content: center;
padding: $euiSizeS;
// Targeting img as this won't target normal EuiIcon's only the custom svgs's
> img {
@include size($euiSize * 4);
}
}
.lnsSuggestionPanel__chartWrapper {

31
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
View file

@ -12,7 +12,6 @@ import {
EuiKeyPadMenu,
EuiKeyPadMenuItemButton,
EuiButtonEmpty,
EuiTitle,
} from '@elastic/eui';
import { flatten } from 'lodash';
import { i18n } from '@kbn/i18n';
@ -64,7 +63,7 @@ function VisualizationSummary(props: Props) {
return (
<>
{description.icon && (
<EuiIcon className="lnsChartSwitch__summaryIcon" type={description.icon} />
<EuiIcon size="xl" className="lnsChartSwitch__summaryIcon" type={description.icon} />
)}
{description.label}
</>
@ -157,6 +156,7 @@ export function ChartSwitch(props: Props) {
v.visualizationTypes.map(t => ({
visualizationId: v.id,
...t,
icon: t.largeIcon || t.icon,
}))
)
).map(visualizationType => ({
@ -178,23 +178,24 @@ export function ChartSwitch(props: Props) {
ownFocus
initialFocus=".lnsChartSwitch__popoverPanel"
panelClassName="lnsChartSwitch__popoverPanel"
anchorClassName="eui-textTruncate"
panelPaddingSize="s"
button={
<EuiButtonEmpty
size="xs"
className="lnsChartSwitch__triggerButton"
onClick={() => setFlyoutOpen(!flyoutOpen)}
data-test-subj="lnsChartSwitchPopover"
flush="left"
iconSide="right"
iconType="arrowDown"
color="text"
>
(
{i18n.translate('xpack.lens.configPanel.changeVisualization', {
defaultMessage: 'change',
})}
)
<VisualizationSummary {...props} />
</EuiButtonEmpty>
}
isOpen={flyoutOpen}
closePopover={() => setFlyoutOpen(false)}
anchorPosition="leftUp"
anchorPosition="downLeft"
>
<EuiPopoverTitle>
{i18n.translate('xpack.lens.configPanel.chooseVisualization', {
@ -225,22 +226,14 @@ export function ChartSwitch(props: Props) {
}
betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined}
>
<EuiIcon type={v.icon || 'empty'} size="l" />
<EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} size="l" />
</EuiKeyPadMenuItemButton>
))}
</EuiKeyPadMenu>
</EuiPopover>
);
return (
<div className="lnsChartSwitch__header">
<EuiTitle size="xs">
<h3>
<VisualizationSummary {...props} /> {popover}
</h3>
</EuiTitle>
</div>
);
return <div className="lnsChartSwitch__header">{popover}</div>;
}
function getTopSuggestion(

3
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts
View file

@ -6,6 +6,7 @@
import _ from 'lodash';
import { Ast } from '@kbn/interpreter/common';
import { IconType } from '@elastic/eui/src/components/icon/icon';
import {
Visualization,
Datasource,
@ -25,7 +26,7 @@ export interface Suggestion {
title: string;
visualizationState: unknown;
previewExpression?: Ast | string;
previewIcon: string;
previewIcon: IconType;
hide?: boolean;
changeType: TableChangeType;
}

5
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx
View file

@ -19,6 +19,7 @@ import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins
import { SuggestionPanel, SuggestionPanelProps } from './suggestion_panel';
import { getSuggestions, Suggestion } from './suggestion_helpers';
import { EuiIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
import chartTableSVG from '../../..assets/chart_datatable.svg';
jest.mock('./suggestion_helpers');
@ -291,7 +292,7 @@ describe('suggestion_panel', () => {
getSuggestionsMock.mockReturnValue([
{
datasourceState: {},
previewIcon: 'visTable',
previewIcon: chartTableSVG,
score: 0.5,
visualizationState: suggestion1State,
visualizationId: 'vis',
@ -319,6 +320,6 @@ describe('suggestion_panel', () => {
const wrapper = mount(<SuggestionPanel {...defaultProps} />);
expect(wrapper.find(EuiIcon)).toHaveLength(1);
expect(wrapper.find(EuiIcon).prop('type')).toEqual('visTable');
expect(wrapper.find(EuiIcon).prop('type')).toEqual(chartTableSVG);
});
});

3
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
View file

@ -17,6 +17,7 @@ import {
EuiFlexItem,
EuiButtonEmpty,
} from '@elastic/eui';
import { IconType } from '@elastic/eui/src/components/icon/icon';
import { Ast, toExpression } from '@kbn/interpreter/common';
import { i18n } from '@kbn/i18n';
import classNames from 'classnames';
@ -108,7 +109,7 @@ const SuggestionPreview = ({
onSelect: () => void;
preview: {
expression?: Ast;
icon: string;
icon: IconType;
title: string;
};
ExpressionRenderer: ExpressionRenderer;

2
x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts
View file

@ -39,7 +39,7 @@ export class EmbeddableFactory extends AbstractEmbeddableFactory {
defaultMessage: 'Lens Visualization',
}),
type: DOC_TYPE,
getIconForSavedObject: () => 'faceHappy',
getIconForSavedObject: () => 'lensApp',
},
});
this.chrome = chrome;

9
x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
View file

@ -11,12 +11,11 @@
align-items: center;
height: $euiSize * 3;
margin-top: -$euiSizeS;
}
& > .lnsInnerIndexPatternDataPanel__changeLink {
flex: 0 0 auto;
margin: 0 (-$euiSizeS) 0 $euiSizeXS;
}
.lnsInnerIndexPatternDataPanel__triggerButton {
@include euiTitle('xs');
line-height: $euiSizeXXL;
}
.lnsInnerIndexPatternDataPanel__filterWrapper {

10
x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx
View file

@ -20,6 +20,7 @@ import { isLayerTransferable } from './state_helpers';
export interface ChangeIndexPatternTriggerProps extends EuiButtonEmptyProps {
label: string;
title?: string;
}
export function ChangeIndexPattern({
@ -48,12 +49,15 @@ export function ChangeIndexPattern({
}));
const createTrigger = function() {
const { label, ...rest } = trigger;
const { label, title, ...rest } = trigger;
return (
<EuiButtonEmpty
flush="left"
className="eui-textTruncate"
size="xs"
flush="left"
color="text"
iconSide="right"
iconType="arrowDown"
title={title}
onClick={() => setPopoverIsOpen(!isPopoverOpen)}
{...rest}
>

44
x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
View file

@ -10,7 +10,6 @@ import {
EuiLoadingSpinner,
EuiFlexGroup,
EuiFlexItem,
EuiTitle,
EuiContextMenuPanel,
EuiContextMenuItem,
EuiContextMenuPanelProps,
@ -324,31 +323,26 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
>
<EuiFlexItem grow={null}>
<div className="lnsInnerIndexPatternDataPanel__header">
<EuiTitle size="xxs" className="eui-textTruncate">
<h4 title={currentIndexPattern.title}>{currentIndexPattern.title} </h4>
</EuiTitle>
<div className="lnsInnerIndexPatternDataPanel__changeLink">
<ChangeIndexPattern
data-test-subj="indexPattern-switcher"
trigger={{
label: i18n.translate('xpack.lens.indexPatterns.changePatternLabel', {
defaultMessage: '(change)',
}),
'data-test-subj': 'indexPattern-switch-link',
}}
currentIndexPatternId={currentIndexPatternId}
indexPatterns={indexPatterns}
onChangeIndexPattern={(newId: string) => {
onChangeIndexPattern(newId);
<ChangeIndexPattern
data-test-subj="indexPattern-switcher"
trigger={{
label: currentIndexPattern.title,
title: currentIndexPattern.title,
'data-test-subj': 'indexPattern-switch-link',
className: 'lnsInnerIndexPatternDataPanel__triggerButton',
}}
currentIndexPatternId={currentIndexPatternId}
indexPatterns={indexPatterns}
onChangeIndexPattern={(newId: string) => {
onChangeIndexPattern(newId);
setLocalState(s => ({
...s,
nameFilter: '',
typeFilter: [],
}));
}}
/>
</div>
setLocalState(s => ({
...s,
nameFilter: '',
typeFilter: [],
}));
}}
/>
</div>
</EuiFlexItem>
<EuiFlexItem>

2
x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.tsx
View file

@ -23,7 +23,9 @@ export function LayerPanel({ state, setState, layerId }: IndexPatternLayerPanelP
data-test-subj="indexPattern-switcher"
trigger={{
label: state.indexPatterns[state.layers[layerId].indexPatternId].title,
title: state.indexPatterns[state.layers[layerId].indexPatternId].title,
'data-test-subj': 'lns_layerIndexPatternLabel',
size: 'xs',
}}
layer={state.layers[layerId]}
indexPatterns={state.indexPatterns}

2
x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts
View file

@ -97,7 +97,7 @@ describe('metric_suggestions', () => {
expect(rest).toHaveLength(0);
expect(suggestion).toMatchInlineSnapshot(`
Object {
"previewIcon": "visMetric",
"previewIcon": "test-file-stub",
"score": 0.5,
"state": Object {
"accessor": "bytes",

3
x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts
View file

@ -6,6 +6,7 @@
import { SuggestionRequest, VisualizationSuggestion, TableSuggestion } from '../types';
import { State } from './types';
import chartMetricSVG from '../assets/chart_metric.svg';
/**
* Generate suggestions for the metric chart.
@ -40,7 +41,7 @@ function getSuggestion(table: TableSuggestion): VisualizationSuggestion<State> {
return {
title,
score: 0.5,
previewIcon: 'visMetric',
previewIcon: chartMetricSVG,
state: {
layerId: table.layerId,
accessor: col.columnId,

4
x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_visualization.tsx
View file

@ -14,6 +14,7 @@ import { MetricConfigPanel } from './metric_config_panel';
import { Visualization, FramePublicAPI } from '../types';
import { State, PersistableState } from './types';
import { generateId } from '../id_generator';
import chartMetricSVG from '../assets/chart_metric.svg';
const toExpression = (
state: State,
@ -46,6 +47,7 @@ export const metricVisualization: Visualization<State, PersistableState> = {
{
id: 'lnsMetric',
icon: 'visMetric',
largeIcon: chartMetricSVG,
label: i18n.translate('xpack.lens.metric.label', {
defaultMessage: 'Metric',
}),
@ -54,7 +56,7 @@ export const metricVisualization: Visualization<State, PersistableState> = {
getDescription() {
return {
icon: 'visMetric',
icon: chartMetricSVG,
label: i18n.translate('xpack.lens.metric.label', {
defaultMessage: 'Metric',
}),

4
x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts
View file

@ -18,7 +18,7 @@ visualizations.types.registerAlias({
description: i18n.translate('xpack.lens.visTypeAlias.description', {
defaultMessage: `Lens is a simpler way to create basic visualizations`,
}),
icon: 'faceHappy',
icon: 'lensApp',
appExtensions: {
visualizations: {
docTypes: ['lens'],
@ -30,7 +30,7 @@ visualizations.types.registerAlias({
id,
title,
editUrl: getEditPath(id),
icon: 'faceHappy',
icon: 'lensApp',
isExperimental: true,
savedObjectType: type,
typeTitle: i18n.translate('xpack.lens.visTypeAlias.type', { defaultMessage: 'Lens' }),

9
x-pack/legacy/plugins/lens/public/types.ts
View file

@ -5,8 +5,8 @@
*/
import { Ast } from '@kbn/interpreter/common';
import { IconType } from '@elastic/eui/src/components/icon/icon';
import { Filter } from '@kbn/es-query';
import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
import { CoreSetup } from 'src/core/public';
import { Query } from 'src/plugins/data/common';
import { SavedQuery } from 'src/legacy/core_plugins/data/public';
@ -281,7 +281,7 @@ export interface VisualizationSuggestion<T = unknown> {
/**
* An EUI icon type shown instead of the preview expression.
*/
previewIcon: string;
previewIcon: IconType;
}
export interface FramePublicAPI {
@ -301,7 +301,8 @@ export interface FramePublicAPI {
export interface VisualizationType {
id: string;
icon?: EuiIconType | string;
icon?: IconType;
largeIcon?: IconType;
label: string;
}
@ -313,7 +314,7 @@ export interface Visualization<T = unknown, P = unknown> {
getDescription: (
state: T
) => {
icon?: EuiIconType | string;
icon?: IconType;
label: string;
};

24
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
View file

@ -10,6 +10,15 @@ import {
ExpressionFunction,
ArgumentType,
} from '../../../../../../src/legacy/core_plugins/interpreter/public';
import chartAreaSVG from '../assets/chart_area.svg';
import chartAreaStackedSVG from '../assets/chart_area_stacked.svg';
import chartBarSVG from '../assets/chart_bar.svg';
import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
import chartBarHorizontalSVG from '../assets/chart_bar_horizontal.svg';
import chartBarHorizontalStackedSVG from '../assets/chart_bar_horizontal_stacked.svg';
import chartLineSVG from '../assets/chart_line.svg';
import { VisualizationType } from '..';
export interface LegendConfig {
@ -222,6 +231,7 @@ export const visualizationTypes: VisualizationType[] = [
{
id: 'bar',
icon: 'visBarVertical',
largeIcon: chartBarSVG,
label: i18n.translate('xpack.lens.xyVisualization.barLabel', {
defaultMessage: 'Bar',
}),
@ -229,20 +239,23 @@ export const visualizationTypes: VisualizationType[] = [
{
id: 'bar_horizontal',
icon: 'visBarHorizontal',
largeIcon: chartBarHorizontalSVG,
label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
defaultMessage: 'Horizontal Bar',
}),
},
{
id: 'bar_stacked',
icon: 'visBarVertical',
label: i18n.translate('xpack.lens.xyVisualization.stackedBar', {
icon: 'visBarVerticalStacked',
largeIcon: chartBarStackedSVG,
label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
defaultMessage: 'Stacked Bar',
}),
},
{
id: 'bar_horizontal_stacked',
icon: 'visBarHorizontal',
icon: 'visBarHorizontalStacked',
largeIcon: chartBarHorizontalStackedSVG,
label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
defaultMessage: 'Stacked Horizontal Bar',
}),
@ -250,6 +263,7 @@ export const visualizationTypes: VisualizationType[] = [
{
id: 'line',
icon: 'visLine',
largeIcon: chartLineSVG,
label: i18n.translate('xpack.lens.xyVisualization.lineLabel', {
defaultMessage: 'Line',
}),
@ -257,13 +271,15 @@ export const visualizationTypes: VisualizationType[] = [
{
id: 'area',
icon: 'visArea',
largeIcon: chartAreaSVG,
label: i18n.translate('xpack.lens.xyVisualization.areaLabel', {
defaultMessage: 'Area',
}),
},
{
id: 'area_stacked',
icon: 'visArea',
icon: 'visAreaStacked',
largeIcon: chartAreaStackedSVG,
label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
defaultMessage: 'Stacked Area',
}),

5
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
View file

@ -107,6 +107,7 @@ function LayerSettings({
idSelected={layer.seriesType}
onChange={seriesType => setSeriesType(seriesType as SeriesType)}
isIconOnly
buttonSize="compressed"
/>
</EuiFormRow>
<EuiPopoverFooter className="eui-textCenter">
@ -117,8 +118,8 @@ function LayerSettings({
data-test-subj="lnsXY_layer_remove"
onClick={removeLayer}
>
{i18n.translate('xpack.lens.xyChart.removeLayer', {
defaultMessage: 'Remove layer',
{i18n.translate('xpack.lens.xyChart.deleteLayer', {
defaultMessage: 'Delete layer',
})}
</EuiButtonEmpty>
</EuiPopoverFooter>

9
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
View file

@ -16,9 +16,11 @@ import { Visualization } from '../types';
import { State, PersistableState, SeriesType, visualizationTypes } from './types';
import { toExpression, toPreviewExpression } from './to_expression';
import { generateId } from '../id_generator';
import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
import chartMixedSVG from '../assets/chart_mixed_xy.svg';
import { isHorizontalChart } from './state_helpers';
const defaultIcon = 'visBarVertical';
const defaultIcon = chartBarStackedSVG;
const defaultSeriesType = 'bar_stacked';
function getDescription(state?: State) {
@ -39,7 +41,10 @@ function getDescription(state?: State) {
const seriesTypes = _.unique(state.layers.map(l => l.seriesType));
return {
icon: visualizationType.icon,
icon:
seriesTypes.length === 1
? visualizationType.largeIcon || visualizationType.icon
: chartMixedSVG,
label:
seriesTypes.length === 1
? visualizationType.label