Skip to content

Commit

Permalink
[ML] Fix colours in the Anomaly swim lane and Annotations chart (elas…
Browse files Browse the repository at this point in the history
…tic#110001)

* [ML] use current theme

* [ML] use current theme in annotations chart
  • Loading branch information
darnautov authored and kibanamachine committed Aug 25, 2021
1 parent f2b9938 commit ea30565
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand All @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>();
Expand Down Expand Up @@ -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],
Expand All @@ -298,7 +301,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
},
stroke: {
width: 1,
color: '#D3DAE6',
color: euiTheme.euiBorderColor,
},
},
cell: {
Expand All @@ -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,
},
Expand All @@ -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;
Expand All @@ -368,7 +368,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
onCellsSelection(payload);
},
[swimlaneType, swimlaneData?.fieldName, swimlaneData?.interval, onCellsSelection]
);
) as ElementClickListener;

const tooltipOptions: TooltipSettings = useMemo(
() => ({
Expand Down

0 comments on commit ea30565

Please sign in to comment.