mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
Update dependency @elastic/charts to v51 (main) (#145286)
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`50.2.1` -> `51.1.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/50.2.1/51.1.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Renovate will not automatically rebase this PR, because other commits have been found. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/elastic/kibana). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4zNC4xIiwidXBkYXRlZEluVmVyIjoiMzQuMzQuMSJ9--> ## Notes for Uptime team As defined with @awahab07 I've updated the current Monitor status custom tooltip to follow a bit more the principles of the tooltip components. The style is slightly changed but not much. This will allow us to continue iterating on improving such components and having an aligned style across visualizations Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: nickofthyme <nicholas.partridge@elastic.co> Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
This commit is contained in:
renovate[bot]
GitHub
parent
c3038f439e
commit
91db82a055
4 changed files with 68 additions and 82 deletions
|
|
@ -103,7 +103,7 @@
|
|||
"@dnd-kit/utilities": "^2.0.0",
|
||||
"@elastic/apm-rum": "^5.12.0",
|
||||
"@elastic/apm-rum-react": "^1.4.2",
|
||||
"@elastic/charts": "50.2.1",
|
||||
"@elastic/charts": "51.1.1",
|
||||
"@elastic/datemath": "5.0.3",
|
||||
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.5.0-canary.1",
|
||||
"@elastic/ems-client": "8.3.3",
|
||||
|
|
|
|||
|
|
@ -7,24 +7,15 @@
|
|||
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { css } from '@emotion/react';
|
||||
import { useEuiTheme, EuiText, EuiProgress } from '@elastic/eui';
|
||||
import { EuiProgress } from '@elastic/eui';
|
||||
|
||||
import {
|
||||
TooltipTable,
|
||||
TooltipTableBody,
|
||||
TooltipHeader,
|
||||
TooltipDivider,
|
||||
TooltipTableRow,
|
||||
TooltipTableCell,
|
||||
} from '@elastic/charts';
|
||||
import { TooltipTable, TooltipHeader, TooltipValue } from '@elastic/charts';
|
||||
|
||||
import { usePingStatusesIsLoading } from '../hooks/use_ping_statuses';
|
||||
import { MonitorStatusTimeBin, SUCCESS_VIZ_COLOR, DANGER_VIZ_COLOR } from './monitor_status_data';
|
||||
import * as labels from './labels';
|
||||
|
||||
export const MonitorStatusCellTooltip = ({ timeBin }: { timeBin?: MonitorStatusTimeBin }) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isLoading = usePingStatusesIsLoading();
|
||||
|
||||
if (!timeBin) {
|
||||
|
|
@ -47,74 +38,50 @@ export const MonitorStatusCellTooltip = ({ timeBin }: { timeBin?: MonitorStatusT
|
|||
? `${Math.round((timeBin.ups / (timeBin.ups + timeBin.downs)) * 100)}%`
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<>
|
||||
<TooltipHeader>
|
||||
<EuiText size="xs" css={css({ border: 0, fontWeight: euiTheme.font.weight.bold })}>
|
||||
{tooltipTitle}
|
||||
</EuiText>
|
||||
</TooltipHeader>
|
||||
|
||||
{isLoading ? <EuiProgress size="xs" /> : <TooltipDivider />}
|
||||
|
||||
<div css={css({ border: 0, padding: euiTheme.size.xs })}>
|
||||
<TooltipTable>
|
||||
<TooltipTableBody>
|
||||
<TooltipTableRow>
|
||||
<TooltipListRow label={labels.AVAILABILITY_LABEL} value={availabilityStr} />
|
||||
</TooltipTableRow>
|
||||
<TooltipTableRow>
|
||||
<TooltipListRow
|
||||
label={labels.COMPLETE_LABEL}
|
||||
value={`${timeBin.ups}` ?? ''}
|
||||
color={SUCCESS_VIZ_COLOR}
|
||||
/>
|
||||
</TooltipTableRow>
|
||||
<TooltipTableRow>
|
||||
<TooltipListRow
|
||||
label={labels.FAILED_LABEL}
|
||||
value={`${timeBin.downs}` ?? ''}
|
||||
color={DANGER_VIZ_COLOR}
|
||||
/>
|
||||
</TooltipTableRow>
|
||||
</TooltipTableBody>
|
||||
</TooltipTable>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TooltipListRow = ({
|
||||
color,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
color?: string;
|
||||
label: string;
|
||||
value: string;
|
||||
}) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
// not currently used but required by current types
|
||||
const commonTooltipValuesProps = {
|
||||
isVisible: true,
|
||||
isHighlighted: false,
|
||||
seriesIdentifier: { specId: '', key: '' },
|
||||
};
|
||||
const tooltipValues: TooltipValue[] = isLoading
|
||||
? []
|
||||
: [
|
||||
{
|
||||
color: 'transparent',
|
||||
label: labels.AVAILABILITY_LABEL,
|
||||
value: availabilityStr,
|
||||
formattedValue: availabilityStr,
|
||||
...commonTooltipValuesProps,
|
||||
},
|
||||
{
|
||||
color: SUCCESS_VIZ_COLOR,
|
||||
label: labels.COMPLETE_LABEL,
|
||||
value: timeBin.ups,
|
||||
formattedValue: `${timeBin.ups}`,
|
||||
...commonTooltipValuesProps,
|
||||
},
|
||||
{
|
||||
color: DANGER_VIZ_COLOR,
|
||||
label: labels.FAILED_LABEL,
|
||||
value: timeBin.downs,
|
||||
formattedValue: `${timeBin.downs}`,
|
||||
...commonTooltipValuesProps,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<TooltipTableCell
|
||||
css={css({
|
||||
outline: 0,
|
||||
border: 0,
|
||||
borderLeft: 4,
|
||||
borderStyle: 'solid',
|
||||
borderColor: color ?? 'transparent',
|
||||
padding: euiTheme.size.s,
|
||||
})}
|
||||
>
|
||||
<EuiText size="xs">{label}</EuiText>
|
||||
</TooltipTableCell>
|
||||
<TooltipTableCell> </TooltipTableCell>
|
||||
<TooltipTableCell css={css({ border: 0, padding: euiTheme.size.xs, textAlign: 'right' })}>
|
||||
<EuiText size="xs" css={css({ border: 0, fontWeight: euiTheme.font.weight.bold })}>
|
||||
{value}
|
||||
</EuiText>
|
||||
</TooltipTableCell>
|
||||
<TooltipHeader>{tooltipTitle}</TooltipHeader>
|
||||
{isLoading && <EuiProgress size="xs" />}
|
||||
<TooltipTable
|
||||
columns={[
|
||||
{ type: 'color' },
|
||||
{ type: 'text', cell: (t) => t.label, style: { textAlign: 'left' } },
|
||||
{ type: 'number', cell: (t) => t.value, style: { textAlign: 'right' } },
|
||||
]}
|
||||
items={tooltipValues}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -377,6 +377,15 @@ exports[`DonutChart component passes correct props without errors for valid prop
|
|||
"width": "auto",
|
||||
},
|
||||
},
|
||||
"highlighter": Object {
|
||||
"point": Object {
|
||||
"fill": "__use__empty__color__",
|
||||
"opacity": 1,
|
||||
"radius": 10,
|
||||
"stroke": "__use__series__color__",
|
||||
"strokeWidth": 4,
|
||||
},
|
||||
},
|
||||
"legend": Object {
|
||||
"horizontalHeight": 64,
|
||||
"labelOptions": Object {
|
||||
|
|
@ -490,6 +499,11 @@ exports[`DonutChart component passes correct props without errors for valid prop
|
|||
"opacity": 0.25,
|
||||
},
|
||||
},
|
||||
"tooltip": Object {
|
||||
"defaultDotColor": "black",
|
||||
"maxTableHeight": 120,
|
||||
"maxWidth": 260,
|
||||
},
|
||||
}
|
||||
}
|
||||
theme={
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -1452,10 +1452,10 @@
|
|||
dependencies:
|
||||
object-hash "^1.3.0"
|
||||
|
||||
"@elastic/charts@50.2.1":
|
||||
version "50.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-50.2.1.tgz#3dde69125fb181306129a48b73bce1f5823d0cad"
|
||||
integrity sha512-LA9EcW1LGAIrlhro3P2Fgtj0BkHQV1ArHCEdJ43EjgaNpJsKaWnFSeYcbuXiUEyLtXbF4Sv6Di90qDppwThu6Q==
|
||||
"@elastic/charts@51.1.1":
|
||||
version "51.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-51.1.1.tgz#005c9fce7a2ef0345ac223d18115ad719c2c15e2"
|
||||
integrity sha512-DJjhHBvovQ/EfAlF7cjAB1fhwjcrt4Iyy/Vxed0BAw6gqoppT7/3Kk8AmUzzj05BK7ZFHlaL/05fe3fUEWuQEw==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.4.0"
|
||||
bezier-easing "^2.1.0"
|
||||
|
|
@ -1476,7 +1476,7 @@
|
|||
resize-observer-polyfill "^1.5.1"
|
||||
ts-debounce "^4.0.0"
|
||||
utility-types "^3.10.0"
|
||||
uuid "^8.3.2"
|
||||
uuid "^9"
|
||||
|
||||
"@elastic/datemath@5.0.3":
|
||||
version "5.0.3"
|
||||
|
|
@ -27011,6 +27011,11 @@ uuid@^8.3.0, uuid@^8.3.2:
|
|||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
|
||||
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
|
||||
|
||||
uuid@^9:
|
||||
version "9.0.0"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
|
||||
integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
|
||||
|
||||
v8-compile-cache-lib@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue