github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens/SCSS] Migrate xy_chart.scss file to JS (#210379)

Browse source 
## Summary

Part of https://github.com/elastic/kibana/issues/208908

Replaces scss to css-in-js.

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Maria Iriarte 2025-03-10 19:02:09 +01:00 • committed by GitHub
parent d7df44f308
commit 3cd8a4c007
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 100 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap generated
View file

@ -1140,7 +1140,15 @@ exports[`XYChart component it renders area 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -2703,7 +2711,15 @@ exports[`XYChart component it renders bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -4266,7 +4282,15 @@ exports[`XYChart component it renders horizontal bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -5829,7 +5853,15 @@ exports[`XYChart component it renders line 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -7392,7 +7424,15 @@ exports[`XYChart component it renders stacked area 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -8955,7 +8995,15 @@ exports[`XYChart component it renders stacked bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -10518,7 +10566,15 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -12111,7 +12167,15 @@ exports[`XYChart component split chart should render split chart if both, splitR
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -13912,7 +13976,15 @@ exports[`XYChart component split chart should render split chart if splitColumnA
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>
@ -15706,7 +15778,15 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
locale="en"
noResults={
<EmptyPlaceholder
className="xyChart__empty"
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
icon={[Function]}
renderComplete={[Function]}
/>

7
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.scss
View file

@ -1,7 +0,0 @@
.xyChart__empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

14
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.tsx
View file

@ -113,8 +113,6 @@ import { AxisExtentModes, SeriesTypes, ValueLabelModes, XScaleTypes } from '../.
import { DataLayers } from './data_layers';
import { Tooltip as CustomTooltip } from './tooltip';
import { XYCurrentTime } from './xy_current_time';
import './xy_chart.scss';
import { TooltipHeader } from './tooltip';
import { LegendColorPickerWrapperContext, LegendColorPickerWrapper } from './legend_color_picker';
import { createSplitPoint, getTooltipActions, getXSeriesPoint } from './tooltip/tooltip_actions';
@ -342,7 +340,7 @@ export function XYChart({
if (dataLayers.length === 0) {
return (
<EmptyPlaceholder className="xyChart__empty" icon={icon} renderComplete={onRenderChange} />
<EmptyPlaceholder icon={icon} renderComplete={onRenderChange} css={xyChartEmptyStyles} />
);
}
@ -817,9 +815,9 @@ export function XYChart({
<Settings
noResults={
<EmptyPlaceholder
className="xyChart__empty"
icon={icon}
renderComplete={onRenderChange}
css={xyChartEmptyStyles}
/>
}
onRenderChange={onRenderChange}
@ -1065,3 +1063,11 @@ function getLegendTitle(
? getColumnByAccessor(layer.splitAccessors?.[0], layer?.table.columns)?.name
: defaultLegendTitle;
}
const xyChartEmptyStyles = css({
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
});