-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Lens] Heatmap / Swim lane integration #97978
Changes from 1 commit
d67fad6
381240e
415b567
9fbca6a
c25cf3e
2c65a8d
54e96a0
38a5a6d
cd912c2
c5d02d0
2b40fe3
7aaeccd
bb4910c
48bbad0
398b92f
d25f7e9
1e6d858
a8b3be4
3d89c72
62db0f2
d7b6d01
c252224
5583f3b
b8ac2d3
ab10566
1b9d09f
f7b53ce
75d3440
f402b58
7b57130
4f32606
b9faf1c
deb0436
ed0bee2
b581f1c
c31d336
4548731
e236ff1
6283fb0
cf62bc8
5ed1d2e
356109c
2cde585
60c0caa
1c4ba88
9c0c0ff
abab529
9c97eae
bbb088e
1477b7d
f684b0a
721c9d8
9e0ac07
4f4cb04
1d1c387
9853d29
e7d2637
faf208c
fce4288
017fc97
67e52b4
e8da895
d26f954
224c792
41523c5
067d782
3c645c5
f90fe8f
685a5bf
edd83a3
1021d1c
c7b46b2
cc47903
645e34f
feb2b45
3a4443f
3cb6b14
d699e9e
4cb2f40
9bb03df
ef95471
5a25c36
6d35fb7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,7 @@ | |
* 2.0. | ||
*/ | ||
|
||
import React, { FC, useEffect, useMemo, useState } from 'react'; | ||
import React, { FC, useEffect, useState } from 'react'; | ||
import { | ||
Chart, | ||
Heatmap, | ||
|
@@ -28,59 +28,74 @@ declare global { | |
} | ||
} | ||
|
||
export const HeatmapComponent: FC<HeatmapRenderProps> = ({ data, args }) => { | ||
export const HeatmapComponent: FC<HeatmapRenderProps> = ({ | ||
data, | ||
args, | ||
timeZone, | ||
formatFactory, | ||
}) => { | ||
const isDarkTheme = false; | ||
const onElementClick = () => {}; | ||
|
||
console.log(args, '___args___'); | ||
const table = Object.values(data.tables)[0]; | ||
|
||
const chartData = Object.values(data.tables)[0].rows; | ||
console.log(chartData, '___data___'); | ||
const chartData = table.rows; | ||
|
||
const config: HeatmapSpec['config'] = useMemo(() => { | ||
return { | ||
onBrushEnd: (e: HeatmapBrushEvent) => {}, | ||
grid: { | ||
cellHeight: { | ||
min: 30, | ||
max: 30, | ||
}, | ||
stroke: { | ||
width: 1, | ||
color: '#D3DAE6', | ||
}, | ||
}, | ||
cell: { | ||
maxWidth: 'fill', | ||
maxHeight: 'fill', | ||
label: { | ||
visible: false, | ||
}, | ||
border: { | ||
stroke: '#D3DAE6', | ||
strokeWidth: 0, | ||
}, | ||
}, | ||
yAxisLabel: { | ||
visible: true, | ||
// eui color subdued | ||
fill: `#6a717d`, | ||
padding: 8, | ||
const xAxis = table.columns.find((v) => v.id === args.xAccessor); | ||
|
||
if (!xAxis) { | ||
// Chart is not ready | ||
return null; | ||
} | ||
|
||
const xAxisMeta = xAxis.meta; | ||
const xScaleType = xAxisMeta.type === 'date' ? ScaleType.Time : ScaleType.Ordinal; | ||
|
||
const xValuesFormatter = formatFactory(xAxisMeta.params); | ||
|
||
const config: HeatmapSpec['config'] = { | ||
onBrushEnd: (e: HeatmapBrushEvent) => {}, | ||
grid: { | ||
cellHeight: { | ||
min: 30, | ||
max: 30, | ||
}, | ||
xAxisLabel: { | ||
visible: true, | ||
// eui color subdued | ||
fill: `#98A2B3`, | ||
stroke: { | ||
width: 1, | ||
color: '#D3DAE6', | ||
}, | ||
brushMask: { | ||
fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', | ||
}, | ||
cell: { | ||
maxWidth: 'fill', | ||
maxHeight: 'fill', | ||
label: { | ||
visible: false, | ||
}, | ||
brushArea: { | ||
stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', | ||
border: { | ||
stroke: '#D3DAE6', | ||
strokeWidth: 0, | ||
}, | ||
timeZone: 'UTC', | ||
}; | ||
}, [isDarkTheme]); | ||
}, | ||
yAxisLabel: { | ||
visible: true, | ||
// eui color subdued | ||
fill: `#6a717d`, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be imported from eui and take into account the currently used theme - otherwise it won't render right on dark mode There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed in 4548731 |
||
padding: 8, | ||
}, | ||
xAxisLabel: { | ||
visible: true, | ||
// eui color subdued | ||
fill: `#98A2B3`, | ||
formatter: (v: number | string) => xValuesFormatter.convert(v), | ||
}, | ||
brushMask: { | ||
fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', | ||
}, | ||
brushArea: { | ||
stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', | ||
}, | ||
timeZone, | ||
}; | ||
|
||
return ( | ||
<Chart> | ||
|
@@ -103,7 +118,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({ data, args }) => { | |
xAccessor={args.xAccessor} | ||
yAccessor={args.yAccessor} | ||
valueAccessor={args.valueAccessor} | ||
xScaleType={ScaleType.Time} | ||
xScaleType={xScaleType} | ||
ySortPredicate="dataIndex" | ||
config={config} | ||
/> | ||
|
@@ -124,8 +139,6 @@ export function HeatmapChartReportable(props: HeatmapRenderProps) { | |
setState({ isReady: true }); | ||
}, [setState]); | ||
|
||
console.log(props, '___props___'); | ||
|
||
return ( | ||
<VisualizationContainer | ||
className="lnsHeatmapExpression__container" | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,15 +6,12 @@ | |
*/ | ||
|
||
import { i18n } from '@kbn/i18n'; | ||
import { Position } from '@elastic/charts'; | ||
import { LensIconChartBar } from '../assets/chart_bar'; | ||
import { PaletteRegistry } from '../../../../../src/plugins/charts/public'; | ||
import { AccessorConfig, OperationMetadata, Visualization } from '../types'; | ||
import { HeatmapLayerState, HeatmapVisualizationState } from './types'; | ||
import { OperationMetadata, Visualization } from '../types'; | ||
import { HeatmapVisualizationState } from './types'; | ||
import { suggestions } from './suggestions'; | ||
import { toExpression, toPreviewExpression, getSortedAccessors } from './to_expression'; | ||
import { CHART_NAMES, CHART_SHAPES, FUNCTION_NAME, GROUP_ID, LENS_HEATMAP_ID } from './constants'; | ||
import { ColumnState } from '../datatable_visualization/visualization'; | ||
|
||
const groupLabelForBar = i18n.translate('xpack.lens.heatmapVisualization.heatmapGroupLabel', { | ||
defaultMessage: 'Heatmap', | ||
|
@@ -37,9 +34,11 @@ function getAxisName(axis: 'x' | 'y') { | |
return vertical; | ||
} | ||
|
||
const isTimeBucket = (op: OperationMetadata) => op.dataType === 'date'; | ||
const isBucketed = (op: OperationMetadata) => op.isBucketed; | ||
const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number'; | ||
const filterOperationsXAxis = (op: OperationMetadata) => isTime(op) || isBucketed(op); | ||
|
||
const isTime = (op: OperationMetadata) => op.dataType === 'date'; | ||
const isBucketed = (op: OperationMetadata) => op.isBucketed && op.scale === 'ordinal'; | ||
const isNumericMetric = (op: OperationMetadata) => op.dataType === 'number'; | ||
|
||
export const getHeatmapVisualization = ({ | ||
paletteService, | ||
|
@@ -97,18 +96,14 @@ export const getHeatmapVisualization = ({ | |
return { groups: [] }; | ||
} | ||
|
||
// console.log(originalOrder, '___originalOrder___'); | ||
|
||
// console.log(originalOrder, '___originalOrder___'); | ||
|
||
return { | ||
groups: [ | ||
{ | ||
layerId: state.layerId, | ||
groupId: GROUP_ID.X, | ||
groupLabel: getAxisName(GROUP_ID.X), | ||
accessors: state.xAccessor ? [{ columnId: state.xAccessor }] : [], | ||
filterOperations: isTimeBucket, | ||
filterOperations: filterOperationsXAxis, | ||
supportsMoreColumns: true, | ||
required: true, | ||
dataTestSubj: 'lnsHeatmap_xDimensionPanel', | ||
|
@@ -142,16 +137,7 @@ export const getHeatmapVisualization = ({ | |
}, | ||
|
||
setDimension({ prevState, layerId, columnId, groupId, previousColumn }) { | ||
// if (!newLayer) { | ||
// return prevState; | ||
// } | ||
// | ||
// | ||
// console.log(prevState, '___prevState___'); | ||
// console.log(columnId, '___columnId___'); | ||
// console.log(groupId, '___groupId___'); | ||
|
||
const update = {}; | ||
const update: Partial<HeatmapVisualizationState> = {}; | ||
if (groupId === GROUP_ID.X) { | ||
update.xAccessor = columnId; | ||
} | ||
|
@@ -161,7 +147,6 @@ export const getHeatmapVisualization = ({ | |
if (groupId === GROUP_ID.CELL) { | ||
update.valueAccessor = columnId; | ||
} | ||
|
||
return { | ||
...prevState, | ||
...update, | ||
|
@@ -184,33 +169,16 @@ export const getHeatmapVisualization = ({ | |
return update; | ||
}, | ||
|
||
toExpression: (state, datasourceLayers, attributes) => { | ||
toExpression(state, datasourceLayers, attributes): Ast | null { | ||
const datasource = datasourceLayers[state.layerId]; | ||
|
||
const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId); | ||
// When we add a column it could be empty, and therefore have no order | ||
|
||
console.log(state, '___state___'); | ||
|
||
if (!originalOrder) { | ||
return { groups: [] }; | ||
return null; | ||
} | ||
|
||
const sortedColumns = originalOrder; | ||
|
||
// if ( | ||
// sortedColumns?.length && | ||
// sortedColumns.filter((c) => !datasource!.getOperationForColumnId(c)?.isBucketed).length === 0 | ||
// ) { | ||
// return null; | ||
// } | ||
|
||
// console.log(state, '___state___'); | ||
// console.log(datasource, '___datasource___'); | ||
// console.log(originalOrder, '___originalOrder___'); | ||
|
||
console.log(attributes, '___attributes___'); | ||
|
||
return { | ||
type: 'expression', | ||
chain: [ | ||
|
@@ -229,8 +197,6 @@ export const getHeatmapVisualization = ({ | |
}; | ||
}, | ||
|
||
// toPreviewExpression: (state, layers) => toPreviewExpression(state, layers, paletteService), | ||
|
||
getErrorMessages(state) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The error messages here start as soon as you open the heatmap configuration. There should be a special case for a completely empty chart so that it's only an error if there's partial config, but a fully empty config is fine. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed in c31d336 |
||
// not possible to break it? | ||
return undefined; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dark mode should be set dynamically, not statically, by using
chartsThemeService.useDarkMode()
. Otherwise the text and border color is not high contrast in dark mode.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in 4548731