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

fix(heatmap): remove duplicate legend items (#109338)

Browse source
This commit is contained in:
Marco Vettorello 2021-08-20 17:09:22 +02:00 • committed by GitHub
parent 7323cdbbb9
commit 958a3ba28a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -95,7 +95,7 @@
"dependencies": {
"@elastic/apm-rum": "^5.8.0",
"@elastic/apm-rum-react": "^1.2.11",
"@elastic/charts": "34.0.0",
"@elastic/charts": "34.1.1",
"@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.17",
"@elastic/ems-client": "7.15.0",

18
x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx
View file

@ -174,6 +174,17 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
minMaxByColumnId[args.valueAccessor!]
);
const bands = ranges.map((start, index, array) => {
return {
// with the default continuity:above the every range is left-closed
start,
// with the default continuity:above the last range is right-open
end: index === array.length - 1 ? Infinity : array[index + 1],
// the current colors array contains a duplicated color at the beginning that we need to skip
color: colors[index + 1],
};
});
const onElementClick = ((e: HeatmapElementEvent[]) => {
const cell = e[0][0];
const { x, y } = cell.datum;
@ -331,9 +342,10 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
<Heatmap
id={tableId}
name={valueColumn.name}
colorScale={ScaleType.Threshold}
colors={colors}
ranges={ranges}
colorScale={{
type: 'bands',
bands,
}}
data={chartData}
xAccessor={args.xAccessor}
yAccessor={args.yAccessor || 'unifiedY'}

46
x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file

@ -427,22 +427,36 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
<Heatmap
id={id}
colorScale={ScaleType.Threshold}
ranges={[
ANOMALY_THRESHOLD.LOW,
ANOMALY_THRESHOLD.WARNING,
ANOMALY_THRESHOLD.MINOR,
ANOMALY_THRESHOLD.MAJOR,
ANOMALY_THRESHOLD.CRITICAL,
]}
colors={[
SEVERITY_COLORS.BLANK,
SEVERITY_COLORS.LOW,
SEVERITY_COLORS.WARNING,
SEVERITY_COLORS.MINOR,
SEVERITY_COLORS.MAJOR,
SEVERITY_COLORS.CRITICAL,
]}
colorScale={{
type: 'bands',
bands: [
{
start: ANOMALY_THRESHOLD.LOW,
end: ANOMALY_THRESHOLD.WARNING,
color: SEVERITY_COLORS.LOW,
},
{
start: ANOMALY_THRESHOLD.WARNING,
end: ANOMALY_THRESHOLD.MINOR,
color: SEVERITY_COLORS.WARNING,
},
{
start: ANOMALY_THRESHOLD.MINOR,
end: ANOMALY_THRESHOLD.MAJOR,
color: SEVERITY_COLORS.MINOR,
},
{
start: ANOMALY_THRESHOLD.MAJOR,
end: ANOMALY_THRESHOLD.CRITICAL,
color: SEVERITY_COLORS.MAJOR,
},
{
start: ANOMALY_THRESHOLD.CRITICAL,
end: Infinity,
color: SEVERITY_COLORS.CRITICAL,
},
],
}}
data={swimLanePoints}
xAccessor="time"
yAccessor="laneLabel"

9
x-pack/test/functional/apps/lens/chart_data.ts
View file

@ -125,11 +125,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend
expect(debugState.legend!.items).to.eql([
{ color: '#6092c0', key: '≥ 5,722.775', name: '≥ 5,722.775' },
{ color: '#6092c0', key: '≥ 5,722.77', name: '≥ 5,722.77' },
{ color: '#a8bfda', key: '≥ 8,529.22', name: '≥ 8,529.22' },
{ color: '#ebeff5', key: '≥ 11,335.66', name: '≥ 11,335.66' },
{ color: '#ecb385', key: '≥ 14,142.11', name: '≥ 14,142.11' },
{ color: '#6092c0', key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22' },
{ color: '#a8bfda', key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66' },
{ color: '#ebeff5', key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11' },
{ color: '#ecb385', key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55' },
{ color: '#e7664c', key: '≥ 16,948.55', name: '≥ 16,948.55' },
]);
});

54
x-pack/test/functional/apps/lens/heatmap.ts
View file

@ -60,11 +60,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
{ key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#6092c0' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
{ key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#6092c0' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
]);
});
@ -85,11 +84,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend has changed
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
{ key: '≥ 7,126', name: '≥ 7,126', color: '#6092c0' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
{ key: '7,126 - 8,529.22', name: '7,126 - 8,529.22', color: '#6092c0' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
]);
});
@ -106,11 +104,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend has changed
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
{ key: '≥ 7,126', name: '≥ 7,126', color: '#6092c0' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
{ key: '7,126 - 8,529.22', name: '7,126 - 8,529.22', color: '#6092c0' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
]);
});
@ -129,11 +126,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend has changed
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
{ key: '≥ 0', name: '≥ 0', color: '#6092c0' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
{ key: '0 - 8,529.22', name: '0 - 8,529.22', color: '#6092c0' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#a8bfda' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#ebeff5' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#ecb385' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
]);
});
@ -150,11 +146,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend has changed
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#209280' },
{ key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#209280' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#54b399' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#d6bf57' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#e7664c' },
{ key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#209280' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#54b399' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#d6bf57' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#e7664c' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' },
]);
});
@ -171,11 +166,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
// assert legend has not changed
expect(debugState.legend!.items).to.eql([
{ key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#209280' },
{ key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#209280' },
{ key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#54b399' },
{ key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#d6bf57' },
{ key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#e7664c' },
{ key: '5,722.77 - 8,529.22', name: '5,722.77 - 8,529.22', color: '#209280' },
{ key: '8,529.22 - 11,335.66', name: '8,529.22 - 11,335.66', color: '#54b399' },
{ key: '11,335.66 - 14,142.11', name: '11,335.66 - 14,142.11', color: '#d6bf57' },
{ key: '14,142.11 - 16,948.55', name: '14,142.11 - 16,948.55', color: '#e7664c' },
{ key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' },
]);
});

27
yarn.lock
View file

@ -1389,10 +1389,10 @@
dependencies:
object-hash "^1.3.0"
"@elastic/charts@34.0.0":
version "34.0.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-34.0.0.tgz#42288a6b3a303ccc61385b786f2ccf3549c3b43a"
integrity sha512-gXekMH6iWIo5DaUzPJLjbn02CuPaxwGIOOF2cz/UH9zRY2A5UZ8CDICysDgriK1PcJfKPCa7Yk5cntn590coyg==
"@elastic/charts@34.1.1":
version "34.1.1"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-34.1.1.tgz#ad0a614448d7a3b28a77cc6d3a5ef5c89530ea34"
integrity sha512-9HFqjGZALURKg0uwuo0t91IMDUY1lnRTovnJJgTrE0zIkUtEIX/yL1gKJlVKLECJO6KrwIO1LcGhobtkVQkR/A==
dependencies:
"@popperjs/core" "^2.4.0"
chroma-js "^2.1.0"
@ -1404,7 +1404,6 @@
d3-interpolate "^1.4.0"
d3-scale "^1.0.7"
d3-shape "^1.3.4"
newtype-ts "^0.2.4"
prop-types "^15.7.2"
re-reselect "^3.4.0"
react-redux "^7.1.0"
@ -14210,11 +14209,6 @@ forwarded@~0.1.2:
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
fp-ts@^1.0.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.12.0.tgz#d333310e4ac104cdcb6bea47908e381bb09978e7"
integrity sha512-fWwnAgVlTsV26Ruo9nx+fxNHIm6l1puE1VJ/C0XJ3nRQJJJIgRHYw6sigB3MuNFZL1o4fpGlhwFhcbxHK0RsOA==
fp-ts@^2.3.1:
version "2.8.6"
resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-2.8.6.tgz#1a0e6c3f29f5b0fbfa3120f034ea266aa73c811b"
@ -19817,11 +19811,6 @@ monitor-event-loop-delay@^1.0.0:
resolved "https://registry.yarnpkg.com/monitor-event-loop-delay/-/monitor-event-loop-delay-1.0.0.tgz#b5ab78165a3bb93f2b275c50d01430c7f155d1f7"
integrity sha512-YRIr1exCIfBDLZle8WHOfSo7Xg3M+phcZfq9Fx1L6Abo+atGp7cge5pM7PjyBn4s1oZI/BRD4EMrzQBbPpVb5Q==
monocle-ts@^1.0.0:
version "1.7.1"
resolved "https://registry.yarnpkg.com/monocle-ts/-/monocle-ts-1.7.1.tgz#03a615938aa90983a4fa29749969d30f72d80ba1"
integrity sha512-X9OzpOyd/R83sYex8NYpJjUzi/MLQMvGNVfxDYiIvs+QMXMEUDwR61MQoARFN10Cqz5h/mbFSPnIQNUIGhYd2Q==
moo-color@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
@ -20106,14 +20095,6 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
newtype-ts@^0.2.4:
version "0.2.4"
resolved "https://registry.yarnpkg.com/newtype-ts/-/newtype-ts-0.2.4.tgz#a02a8f160a3d179f871848d687a93de73a964a41"
integrity sha512-HrzPdG0+0FK1qHbc3ld/HXu252OYgmN993bFxUtZ6NFCLUk1eq+yKwdvP07BblXQibGqMWNXBUrNoLUq23Ma2Q==
dependencies:
fp-ts "^1.0.0"
monocle-ts "^1.0.0"
next-line@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/next-line/-/next-line-1.1.0.tgz#fcae57853052b6a9bae8208e40dd7d3c2d304603"