mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
# Backport This will backport the following commits from `main` to `9.0`: - [[Lens/SCSS] Replace tag cloud expression metric css with js (#209578)](https://github.com/elastic/kibana/pull/209578) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-13T16:41:25Z","message":"[Lens/SCSS] Replace tag cloud expression metric css with js (#209578)\n\n## Summary\r\n\r\nPart of https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to css-in-js.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"623119c15fbf506322622fd6e7c343fae969bccc","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["technical debt","Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Lens/SCSS] Replace tag cloud expression metric css with js","number":209578,"url":"https://github.com/elastic/kibana/pull/209578","mergeCommit":{"message":"[Lens/SCSS] Replace tag cloud expression metric css with js (#209578)\n\n## Summary\r\n\r\nPart of https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to css-in-js.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"623119c15fbf506322622fd6e7c343fae969bccc"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209578","number":209578,"mergeCommit":{"message":"[Lens/SCSS] Replace tag cloud expression metric css with js (#209578)\n\n## Summary\r\n\r\nPart of https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to css-in-js.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Liberati <dej611@users.noreply.github.com>","sha":"623119c15fbf506322622fd6e7c343fae969bccc"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
badb523efc
commit
152dbb0cf2
3 changed files with 30 additions and 35 deletions
|
|
@ -1,28 +0,0 @@
|
|||
// Prefix all styles with "tgc" to avoid conflicts.
|
||||
// Examples
|
||||
// tgcChart
|
||||
// tgcChart__legend
|
||||
// tgcChart__legend--small
|
||||
// tgcChart__legend-isLoading
|
||||
|
||||
.tgcChart__wrapper {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// it is used for rendering at `Canvas`.
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tgcChart__wrapper text {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tgcChart__label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
.tgcChart__warning {
|
||||
width: $euiSize;
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useState, useMemo } from 'react';
|
|||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { throttle } from 'lodash';
|
||||
import { EuiIconTip, EuiResizeObserver } from '@elastic/eui';
|
||||
import { EuiIconTip, EuiResizeObserver, UseEuiTheme } from '@elastic/eui';
|
||||
import { IconChartTagcloud } from '@kbn/chart-icons';
|
||||
import {
|
||||
Chart,
|
||||
|
|
@ -30,12 +30,11 @@ import type { AllowedSettingsOverrides, AllowedChartOverrides } from '@kbn/chart
|
|||
import { getColumnByAccessor, getFormatByAccessor } from '@kbn/visualizations-plugin/common/utils';
|
||||
import { isMultiFieldKey } from '@kbn/data-plugin/common';
|
||||
import { KbnPalettes, useKbnPalettes } from '@kbn/palettes';
|
||||
import { css } from '@emotion/react';
|
||||
import { getFormatService } from '../format_service';
|
||||
import { TagcloudRendererConfig } from '../../common/types';
|
||||
import { ScaleOptions, Orientation } from '../../common/constants';
|
||||
|
||||
import './tag_cloud.scss';
|
||||
|
||||
const MAX_TAG_COUNT = 200;
|
||||
|
||||
export type TagCloudChartProps = TagcloudRendererConfig & {
|
||||
|
|
@ -237,7 +236,7 @@ export const TagCloudChart = ({
|
|||
return (
|
||||
<EuiResizeObserver onResize={updateChart}>
|
||||
{(resizeRef) => (
|
||||
<div className="tgcChart__wrapper" ref={resizeRef} data-test-subj="tagCloudVisualization">
|
||||
<div css={tgcChartCss.wrapper} ref={resizeRef} data-test-subj="tagCloudVisualization">
|
||||
<Chart size="100%" {...getOverridesFor(overrides, 'chart')}>
|
||||
<Settings
|
||||
// TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
|
||||
|
|
@ -269,12 +268,12 @@ export const TagCloudChart = ({
|
|||
/>
|
||||
</Chart>
|
||||
{label && showLabel && (
|
||||
<div className="tgcChart__label" data-test-subj="tagCloudLabel">
|
||||
<div css={tgcChartCss.label} data-test-subj="tagCloudLabel">
|
||||
{label}
|
||||
</div>
|
||||
)}
|
||||
{!visParams.isPreview && warning && (
|
||||
<div className="tgcChart__warning">
|
||||
<div css={tgcChartCss.warning}>
|
||||
<EuiIconTip
|
||||
type="warning"
|
||||
color="warning"
|
||||
|
|
@ -288,7 +287,7 @@ export const TagCloudChart = ({
|
|||
</div>
|
||||
)}
|
||||
{!visParams.isPreview && tagCloudData.length > MAX_TAG_COUNT && (
|
||||
<div className="tgcChart__warning">
|
||||
<div css={tgcChartCss.warning}>
|
||||
<EuiIconTip
|
||||
type="warning"
|
||||
color="warning"
|
||||
|
|
@ -330,3 +329,26 @@ function getColorFromMappingFactory(
|
|||
categories: getColorCategories(rows, tagColumn),
|
||||
});
|
||||
}
|
||||
|
||||
const tgcChartCss = {
|
||||
wrapper: css({
|
||||
flex: '1 1 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
// it is used for rendering at `Canvas`.
|
||||
height: '100%',
|
||||
'& text': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
}),
|
||||
label: ({ euiTheme }: UseEuiTheme) =>
|
||||
css({
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
fontWeight: euiTheme.font.weight.bold,
|
||||
}),
|
||||
warning: ({ euiTheme }: UseEuiTheme) =>
|
||||
css({
|
||||
width: euiTheme.size.base,
|
||||
}),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"common/**/*",
|
||||
"public/**/*",
|
||||
"server/**/*",
|
||||
"../../../../../../typings/emotion.d.ts"
|
||||
],
|
||||
"kbn_references": [
|
||||
{ "path": "../tsconfig.json" },
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue