qn895 · Jul 31, 2023 · Jul 5, 2023 · Jul 5, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -492,6 +492,7 @@ x-pack/packages/ml/data_grid @elastic/ml-ui
 x-pack/packages/ml/date_picker @elastic/ml-ui
 x-pack/packages/ml/date_utils @elastic/ml-ui
 x-pack/packages/ml/error_utils @elastic/ml-ui
+x-pack/packages/ml/in_memory_table @elastic/ml-ui
 x-pack/packages/ml/is_defined @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
 x-pack/packages/ml/kibana_theme @elastic/ml-ui

diff --git a/api_docs/kbn_aiops_components.devdocs.json b/api_docs/kbn_aiops_components.devdocs.json
@@ -124,4 +124,4 @@
     "misc": [],
     "objects": []
   }
-}
+}
diff --git a/package.json b/package.json
@@ -508,6 +508,7 @@
     "@kbn/ml-date-picker": "link:x-pack/packages/ml/date_picker",
     "@kbn/ml-date-utils": "link:x-pack/packages/ml/date_utils",
     "@kbn/ml-error-utils": "link:x-pack/packages/ml/error_utils",
+    "@kbn/ml-in-memory-table": "link:x-pack/packages/ml/in_memory_table",
     "@kbn/ml-is-defined": "link:x-pack/packages/ml/is_defined",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
     "@kbn/ml-kibana-theme": "link:x-pack/packages/ml/kibana_theme",

diff --git a/packages/deeplinks/ml/deep_links.ts b/packages/deeplinks/ml/deep_links.ts
@@ -15,6 +15,7 @@ export type LinkId =
   | 'anomalyDetection'
   | 'anomalyExplorer'
   | 'singleMetricViewer'
+  | 'dataComparison'
   | 'dataFrameAnalytics'
   | 'resultExplorer'
   | 'analyticsMap'

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -978,6 +978,8 @@
       "@kbn/ml-date-utils/*": ["x-pack/packages/ml/date_utils/*"],
       "@kbn/ml-error-utils": ["x-pack/packages/ml/error_utils"],
       "@kbn/ml-error-utils/*": ["x-pack/packages/ml/error_utils/*"],
+      "@kbn/ml-in-memory-table": ["x-pack/packages/ml/in_memory_table"],
+      "@kbn/ml-in-memory-table/*": ["x-pack/packages/ml/in_memory_table/*"],
       "@kbn/ml-is-defined": ["x-pack/packages/ml/is_defined"],
       "@kbn/ml-is-defined/*": ["x-pack/packages/ml/is_defined/*"],
       "@kbn/ml-is-populated-object": ["x-pack/packages/ml/is_populated_object"],

diff --git a/x-pack/packages/ml/aiops_components/index.ts b/x-pack/packages/ml/aiops_components/index.ts
@@ -7,3 +7,5 @@
 
 export { DualBrush, DualBrushAnnotation } from './src/dual_brush';
 export { ProgressControls } from './src/progress_controls';
+export { DocumentCountChart } from './src/document_count_chart';
+export type { DocumentCountChartPoint, DocumentCountChartProps } from './src/document_count_chart';
diff --git a/...tent/document_count_chart/brush_badge.tsx → .../src/document_count_chart/brush_badge.tsx b/...tent/document_count_chart/brush_badge.tsx → .../src/document_count_chart/brush_badge.tsx
@@ -22,6 +22,15 @@ interface BrushBadgeProps {
   width: number;
 }
 
+/**
+ * Badge component
+ * @param label - label
+ * @param marginLeft - margin left
+ * @param timestampFrom - start timestamp
+ * @param timestampTo - ending timestamp
+ * @param width - width of badge
+ * @constructor
+ */
 export const BrushBadge: FC<BrushBadgeProps> = ({
   label,
   marginLeft,

diff --git a/...ment_count_chart/document_count_chart.tsx → ...ment_count_chart/document_count_chart.tsx b/...ment_count_chart/document_count_chart.tsx → ...ment_count_chart/document_count_chart.tsx
@@ -23,14 +23,20 @@ import {
 
 import { i18n } from '@kbn/i18n';
 import { IUiSettingsClient } from '@kbn/core/public';
-import { DualBrush, DualBrushAnnotation } from '@kbn/aiops-components';
 import { getSnappedWindowParameters, getWindowParameters } from '@kbn/aiops-utils';
 import type { WindowParameters } from '@kbn/aiops-utils';
 import { MULTILAYER_TIME_AXIS_STYLE } from '@kbn/charts-plugin/common';
 
-import { useAiopsAppContext } from '../../../hooks/use_aiops_app_context';
+import {
+  BarStyleAccessor,
+  RectAnnotationSpec,
+} from '@elastic/charts/dist/chart_types/xy_chart/utils/specs';
 
+import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { BrushBadge } from './brush_badge';
+import { DualBrush, DualBrushAnnotation } from '../..';
 
 declare global {
   interface Window {
@@ -46,27 +52,79 @@ interface TimeFilterRange {
   to: number;
 }
 
+/**
+ * Datum for the bar chart
+ */
 export interface DocumentCountChartPoint {
+  /**
+   * Time of bucket
+   */
   time: number | string;
+  /**
+   * Number of doc count for that time bucket
+   */
   value: number;
 }
 
-interface DocumentCountChartProps {
-  brushSelectionUpdateHandler?: (d: WindowParameters, force: boolean) => void;
+/**
+ * Brush settings
+ */
+export interface BrushSettings {
+  /**
+   * Optional label name for brush
+   */
+  label?: string;
+  /**
+   * Optional style for brush
+   */
+  annotationStyle?: RectAnnotationSpec['style'];
+  /**
+   * Optional width for brush
+   */
+  badgeWidth?: number;
+}
+
+/**
+ * Props for document count chart
+ */
+export interface DocumentCountChartProps {
+  /** List of Kibana services that are required as dependencies */
+  dependencies: {
+    data: DataPublicPluginStart;
+    charts: ChartsPluginStart;
+    fieldFormats: FieldFormatsStart;
+    uiSettings: IUiSettingsClient;
+  };
+  /** Optional callback function which gets called the brush selection has changed */
+  brushSelectionUpdateHandler?: (windowParameters: WindowParameters, force: boolean) => void;
+  /** Optional width */
   width?: number;
+  /** Data chart points */
   chartPoints: DocumentCountChartPoint[];
+  /** Data chart points split */
   chartPointsSplit?: DocumentCountChartPoint[];
+  /** Start time range for the chart */
   timeRangeEarliest: number;
+  /** Ending time range for the chart */
   timeRangeLatest: number;
+  /** Time interval for the document count buckets */
   interval: number;
+  /** Label to name the adjustedChartPointsSplit histogram */
   chartPointsSplitLabel: string;
+  /** Whether or not brush has been reset */
   isBrushCleared: boolean;
-  /* Timestamp for start of initial analysis */
+  /** Timestamp for start of initial analysis */
   autoAnalysisStart?: number | WindowParameters;
+  /** Optional style to override bar chart  */
+  barStyleAccessor?: BarStyleAccessor;
   /** Optional color override for the default bar color for charts */
   barColorOverride?: string;
   /** Optional color override for the highlighted bar color for charts */
   barHighlightColorOverride?: string;
+  /** Optional settings override for the 'deviation' brush */
+  deviationBrush?: BrushSettings;
+  /** Optional settings override for the 'baseline' brush */
+  baselineBrush?: BrushSettings;
 }
 
 const SPEC_ID = 'document_count';
@@ -102,7 +160,29 @@ function getBaselineBadgeOverflow(
     : 0;
 }
 
+/**
+ * Document count chart with draggable brushes to select time ranges
+ * by default use `Baseline` and `Deviation` for the badge names
+ * @param dependencies - List of Kibana services that are required as dependencies
+ * @param brushSelectionUpdateHandler - Optional callback function which gets called the brush selection has changed
+ * @param width - Optional width
+ * @param chartPoints - Data chart points
+ * @param chartPointsSplit - Data chart points split
+ * @param timeRangeEarliest - Start time range for the chart
+ * @param timeRangeLatest - Ending time range for the chart
+ * @param interval - Time interval for the document count buckets
+ * @param chartPointsSplitLabel - Label to name the adjustedChartPointsSplit histogram
+ * @param isBrushCleared - Whether or not brush has been reset
+ * @param autoAnalysisStart - Timestamp for start of initial analysis
+ * @param barColorOverride - Optional color override for the default bar color for charts
+ * @param barStyleAccessor - Optional style to override bar chart
+ * @param barHighlightColorOverride - Optional color override for the highlighted bar color for charts
+ * @param deviationBrush - Optional settings override for the 'deviation' brush
+ * @param baselineBrush - Optional settings override for the 'baseline' brush
+ * @constructor
+ */
 export const DocumentCountChart: FC<DocumentCountChartProps> = ({
+  dependencies,
   brushSelectionUpdateHandler,
   width,
   chartPoints,
@@ -114,9 +194,12 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
   isBrushCleared,
   autoAnalysisStart,
   barColorOverride,
+  barStyleAccessor,
   barHighlightColorOverride,
+  deviationBrush = {},
+  baselineBrush = {},
 }) => {
-  const { data, uiSettings, fieldFormats, charts } = useAiopsAppContext();
+  const { data, uiSettings, fieldFormats, charts } = dependencies;
 
   const chartTheme = charts.theme.useChartsTheme();
   const chartBaseTheme = charts.theme.useChartsBaseTheme();
@@ -339,22 +422,28 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
         <div className="aiopsHistogramBrushes" data-test-subj="aiopsHistogramBrushes">
           <div css={{ height: BADGE_HEIGHT }}>
             <BrushBadge
-              label={i18n.translate('xpack.aiops.documentCountChart.baselineBadgeLabel', {
-                defaultMessage: 'Baseline',
-              })}
+              label={
+                baselineBrush.label ??
+                i18n.translate('xpack.aiops.documentCountChart.baselineBadgeLabel', {
+                  defaultMessage: 'Baseline',
+                })
+              }
               marginLeft={baselineBadgeMarginLeft - baselineBadgeOverflow}
               timestampFrom={windowParameters.baselineMin}
               timestampTo={windowParameters.baselineMax}
-              width={BADGE_WIDTH}
+              width={baselineBrush.badgeWidth ?? BADGE_WIDTH}
             />
             <BrushBadge
-              label={i18n.translate('xpack.aiops.documentCountChart.deviationBadgeLabel', {
-                defaultMessage: 'Deviation',
-              })}
+              label={
+                deviationBrush.label ??
+                i18n.translate('xpack.aiops.documentCountChart.deviationBadgeLabel', {
+                  defaultMessage: 'Deviation',
+                })
+              }
               marginLeft={mlBrushMarginLeft + (windowParametersAsPixels?.deviationMin ?? 0)}
               timestampFrom={windowParameters.deviationMin}
               timestampTo={windowParameters.deviationMax}
-              width={BADGE_WIDTH}
+              width={deviationBrush.badgeWidth ?? BADGE_WIDTH}
             />
           </div>
           <div
@@ -416,6 +505,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
               timeZone={timeZone}
               color={barColor}
               yNice
+              styleAccessor={barStyleAccessor}
             />
           )}
           {adjustedChartPointsSplit?.length && (
@@ -438,11 +528,13 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
                 id="aiopsBaseline"
                 min={windowParameters.baselineMin}
                 max={windowParameters.baselineMax}
+                style={baselineBrush.annotationStyle}
               />
               <DualBrushAnnotation
                 id="aiopsDeviation"
                 min={windowParameters.deviationMin}
                 max={windowParameters.deviationMax}
+                style={deviationBrush.annotationStyle}
               />
             </>
           )}

diff --git a/...unt_content/document_count_chart/index.ts → ...ponents/src/document_count_chart/index.ts b/...unt_content/document_count_chart/index.ts → ...ponents/src/document_count_chart/index.ts
@@ -6,4 +6,4 @@
  */
 
 export { DocumentCountChart } from './document_count_chart';
-export type { DocumentCountChartPoint } from './document_count_chart';
+export type { DocumentCountChartPoint, DocumentCountChartProps } from './document_count_chart';
diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx
@@ -55,22 +55,71 @@ const BRUSH_HANDLE_SIZE = 4;
 const BRUSH_HANDLE_ROUNDED_CORNER = 2;
 
 interface DualBrushProps {
+  /**
+   * Min and max numeric timestamps for the two brushes
+   */
   windowParameters: WindowParameters;
+  /**
+   * Min timestamp for x domain
+   */
   min: number;
+  /**
+   * Max timestamp for x domain
+   */
   max: number;
+  /**
+   * Callback function whenever the brush changes
+   */
   onChange?: (windowParameters: WindowParameters, windowPxParameters: WindowParameters) => void;
+  /**
+   * Margin left
+   */
   marginLeft: number;
+  /**
+   * Nearest timestamps to snap to the brushes to
+   */
   snapTimestamps?: number[];
+  /**
+   * Width
+   */
   width: number;
 }
 
+/**
+ * DualBrush React Component
+ * Dual brush component that overlays the document count chart
+ * @type {FC<DualBrushProps>}
+ * @param props - `DualBrushProps` component props
+ * @returns {React.ReactElement} The DualBrush component.
+ */
 export function DualBrush({
+  /**
+   * Min and max numeric timestamps for the two brushes
+   */
   windowParameters,
+  /**
+   * Min timestamp for x domain
+   */
   min,
+  /**
+   * Max timestamp for x domain
+   */
   max,
+  /**
+   * Callback function whenever the brush changes
+   */
   onChange,
+  /**
+   * Margin left
+   */
   marginLeft,
+  /**
+   * Nearest timestamps to snap to the brushes to
+   */
   snapTimestamps,
+  /**
+   * Width
+   */
   width,
 }: DualBrushProps) {
   const d3BrushContainer = useRef(null);

diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx
@@ -9,14 +9,23 @@ import React, { FC } from 'react';
 
 import { RectAnnotation } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
+import { RectAnnotationSpec } from '@elastic/charts/dist/chart_types/xy_chart/utils/specs';
 
 interface BrushAnnotationProps {
   id: string;
   min: number;
   max: number;
+  style?: RectAnnotationSpec['style'];
 }
 
-export const DualBrushAnnotation: FC<BrushAnnotationProps> = ({ id, min, max }) => {
+/**
+ * DualBrushAnnotation React Component
+ * Dual brush annotation component that overlays the document count chart
+ * @type {FC<BrushAnnotationProps>}
+ * @param props - `BrushAnnotationProps` component props
+ * @returns {React.ReactElement} The DualBrushAnnotation component.
+ */
+export const DualBrushAnnotation: FC<BrushAnnotationProps> = ({ id, min, max, style }) => {
   const { euiTheme } = useEuiTheme();
   const { colors } = euiTheme;
 
@@ -34,12 +43,14 @@ export const DualBrushAnnotation: FC<BrushAnnotationProps> = ({ id, min, max })
         },
       ]}
       id={`rect_brush_annotation_${id}`}
-      style={{
-        strokeWidth: 0,
-        stroke: colors.lightShade,
-        fill: colors.lightShade,
-        opacity: 0.5,
-      }}
+      style={
+        style ?? {
+          strokeWidth: 0,
+          stroke: colors.lightShade,
+          fill: colors.lightShade,
+          opacity: 0.5,
+        }
+      }
       hideTooltips={true}
     />
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -124,4 +124,4 @@ @@
         "misc": [],
         "objects": []
       }
-    }
+    }