* [ML] use current theme * [ML] use current theme in annotations chart Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
This commit is contained in:
parent
8ebbac7860
commit
a5a96ab920
|
@ -12,11 +12,11 @@ import { i18n } from '@kbn/i18n';
|
|||
import { formatHumanReadableDateTimeSeconds } from '../../../common/util/date_utils';
|
||||
import { AnnotationsTable } from '../../../common/types/annotations';
|
||||
import { ChartTooltipService } from '../components/chart_tooltip';
|
||||
import { useCurrentEuiTheme } from '../components/color_range_legend';
|
||||
|
||||
export const X_AXIS_RIGHT_OVERFLOW = 50;
|
||||
export const Y_AXIS_LABEL_WIDTH = 170;
|
||||
export const Y_AXIS_LABEL_PADDING = 8;
|
||||
export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
|
||||
const ANNOTATION_CONTAINER_HEIGHT = 12;
|
||||
const ANNOTATION_MIN_WIDTH = 8;
|
||||
|
||||
|
@ -38,6 +38,8 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
|
|||
}) => {
|
||||
const canvasRef = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const { euiTheme } = useCurrentEuiTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (canvasRef.current !== null && Array.isArray(annotationsData)) {
|
||||
const chartElement = d3.select(canvasRef.current);
|
||||
|
@ -67,8 +69,8 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
|
|||
)
|
||||
.attr('x', Y_AXIS_LABEL_WIDTH + Y_AXIS_LABEL_PADDING)
|
||||
.attr('y', ANNOTATION_CONTAINER_HEIGHT)
|
||||
.style('fill', Y_AXIS_LABEL_FONT_COLOR)
|
||||
.style('font-size', '12px');
|
||||
.style('fill', euiTheme.euiTextSubduedColor)
|
||||
.style('font-size', euiTheme.euiFontSizeXS);
|
||||
|
||||
// Add border
|
||||
svg
|
||||
|
@ -77,7 +79,7 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
|
|||
.attr('y', 0)
|
||||
.attr('height', ANNOTATION_CONTAINER_HEIGHT)
|
||||
.attr('width', endingXPos - startingXPos)
|
||||
.style('stroke', '#cccccc')
|
||||
.style('stroke', euiTheme.euiBorderColor)
|
||||
.style('fill', 'none')
|
||||
.style('stroke-width', 1);
|
||||
|
||||
|
|
|
@ -47,10 +47,10 @@ import { useUiSettings } from '../contexts/kibana';
|
|||
import {
|
||||
Y_AXIS_LABEL_WIDTH,
|
||||
Y_AXIS_LABEL_PADDING,
|
||||
Y_AXIS_LABEL_FONT_COLOR,
|
||||
X_AXIS_RIGHT_OVERFLOW,
|
||||
} from './swimlane_annotation_container';
|
||||
import { AnnotationsTable } from '../../../common/types/annotations';
|
||||
import { useCurrentEuiTheme } from '../components/color_range_legend';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
@ -192,6 +192,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
const [chartWidth, setChartWidth] = useState<number>(0);
|
||||
|
||||
const isDarkTheme = !!useUiSettings().get('theme:darkMode');
|
||||
const { euiTheme } = useCurrentEuiTheme();
|
||||
|
||||
// Holds the container height for previously fetched data
|
||||
const containerHeightRef = useRef<number>();
|
||||
|
@ -284,6 +285,8 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
|
||||
return {
|
||||
onBrushEnd: (e: HeatmapBrushEvent) => {
|
||||
if (!e.cells.length) return;
|
||||
|
||||
onCellsSelection({
|
||||
lanes: e.y as string[],
|
||||
times: e.x.map((v) => (v as number) / 1000) as [number, number],
|
||||
|
@ -298,7 +301,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
color: '#D3DAE6',
|
||||
color: euiTheme.euiBorderColor,
|
||||
},
|
||||
},
|
||||
cell: {
|
||||
|
@ -308,31 +311,29 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
visible: false,
|
||||
},
|
||||
border: {
|
||||
stroke: '#D3DAE6',
|
||||
stroke: euiTheme.euiBorderColor,
|
||||
strokeWidth: 0,
|
||||
},
|
||||
},
|
||||
yAxisLabel: {
|
||||
visible: true,
|
||||
width: Y_AXIS_LABEL_WIDTH,
|
||||
// eui color subdued
|
||||
fill: Y_AXIS_LABEL_FONT_COLOR,
|
||||
fill: euiTheme.euiTextSubduedColor,
|
||||
padding: Y_AXIS_LABEL_PADDING,
|
||||
formatter: (laneLabel: string) => {
|
||||
return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : laneLabel;
|
||||
},
|
||||
fontSize: 12,
|
||||
fontSize: parseInt(euiTheme.euiFontSizeXS, 10),
|
||||
},
|
||||
xAxisLabel: {
|
||||
visible: true,
|
||||
// eui color subdued
|
||||
fill: `#98A2B3`,
|
||||
fill: euiTheme.euiTextSubduedColor,
|
||||
formatter: (v: number) => {
|
||||
timeBuckets.setInterval(`${swimlaneData.interval}s`);
|
||||
const scaledDateFormat = timeBuckets.getScaledDateFormat();
|
||||
return moment(v).format(scaledDateFormat);
|
||||
},
|
||||
fontSize: 12,
|
||||
fontSize: parseInt(euiTheme.euiFontSizeXS, 10),
|
||||
// Required to calculate where the swimlane ends
|
||||
width: X_AXIS_RIGHT_OVERFLOW * 2,
|
||||
},
|
||||
|
@ -354,8 +355,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
onCellsSelection,
|
||||
]);
|
||||
|
||||
// @ts-ignore
|
||||
const onElementClick: ElementClickListener = useCallback(
|
||||
const onElementClick = useCallback(
|
||||
(e: HeatmapElementEvent[]) => {
|
||||
const cell = e[0][0];
|
||||
const startTime = (cell.datum.x as number) / 1000;
|
||||
|
@ -368,7 +368,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
|
|||
onCellsSelection(payload);
|
||||
},
|
||||
[swimlaneType, swimlaneData?.fieldName, swimlaneData?.interval, onCellsSelection]
|
||||
);
|
||||
) as ElementClickListener;
|
||||
|
||||
const tooltipOptions: TooltipSettings = useMemo(
|
||||
() => ({
|
||||
|
|
Loading…
Reference in a new issue