@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/report/detail/graph/semiotic/boxplot.less

@@ -0,0 +1,45 @@
+.boxplot {
+  .tooltip-container {
+    .columns {
+      display: flex;
+      flex-direction: row;
+      .column {
+        padding: 10px;
+        .header {
+          font-weight: 600;
+          padding-left: 0px;
+        }
+      }
+    }
+  }
+
+  .boxplot-annotation {
+    text {
+      fill: var(--color-text-primary);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .annotation-connector {
+      display: none;
+    }
+    .note-line {
+      display: none;
+    }
+  }
+
+  .boxplot-chart {
+    .boxplot-summary {
+      g {
+        opacity: 0.8;
+      }
+      g:nth-child(1),
+      g:nth-child(2),
+      g:nth-child(3) {
+        opacity: 0.3;
+      }
+    }
+    g.pieces {
+      shape-rendering: geometricprecision;
+    }
+  }
+}

package/src/kayenta/report/detail/graph/semiotic/boxplot.tsx

@@ -0,0 +1,283 @@
+import { extent } from 'd3-array';
+import { Force, Node } from 'labella';
+import * as React from 'react';
+import {
+  Annotation,
+  IAnnotationType,
+  IOrFrameHoverArgs,
+  IOrGroup,
+  IOrSummaryPiece,
+  ISemioticAnnotationArgs,
+  OrdinalFrame,
+} from 'semiotic';
+
+import ChartHeader from './chartHeader';
+import ChartLegend from './chartLegend';
+import CircleIcon from './circleIcon';
+import { vizConfig } from './config';
+import { IMargin, ISemioticChartProps, ITooltip } from './semiotic.service';
+import Tooltip from './tooltip';
+import * as utils from './utils';
+
+import './boxplot.less';
+
+interface IChartDataPoint {
+  value: number;
+  group: string;
+  color: string;
+}
+
+interface IHoverData {
+  value: number;
+  label: string;
+}
+
+interface IHoverDataGroup {
+  [group: string]: IHoverData[];
+}
+
+interface IAnnotationData {
+  group: string;
+  summaryKeys: string[];
+  type: string;
+}
+
+interface IBoxPlotState {
+  tooltip: ITooltip;
+}
+
+export default class BoxPlot extends React.Component<ISemioticChartProps, IBoxPlotState> {
+  public state: IBoxPlotState = {
+    tooltip: null,
+  };
+
+  private margin: IMargin = {
+    top: 10,
+    bottom: 20,
+    left: 60,
+    right: 40,
+  };
+
+  private decorateData = (dataPoints: number[], group: string): IChartDataPoint[] => {
+    return dataPoints.map((dp) => ({
+      group,
+      value: dp,
+      color: vizConfig.colors[group],
+    }));
+  };
+
+  private generateChartData = () => {
+    const { metricSetPair } = this.props;
+    const filterFunc = (v: IChartDataPoint) => typeof v.value === 'number';
+    const baselineInput = this.decorateData(metricSetPair.values.control, 'baseline');
+    const canaryInput = this.decorateData(metricSetPair.values.experiment, 'canary');
+    const chartData = baselineInput.concat(canaryInput).filter(filterFunc);
+    return chartData;
+  };
+
+  // Generate tooltip content that shows the summary statistics of a boxplot
+  private createChartHoverHandler = () => {
+    return (d: IOrFrameHoverArgs<IChartDataPoint> & IOrSummaryPiece): void => {
+      if (d && d.type === 'frame-hover') {
+        const points = d.points;
+        const data: IHoverDataGroup = {
+          baseline: [],
+          canary: [],
+        };
+
+        points.forEach((p: IOrSummaryPiece) => {
+          data[p.key].push({ label: p.label, value: p.value });
+        });
+
+        const summaryLabels = data.baseline.map((b: IHoverData) => b.label);
+        const summaryKeysColumn = [
+          <div className={'header'} key={'summary'}>
+            Summary
+          </div>,
+          ...summaryLabels.map((label: string) => {
+            return <div key={label}>{label}</div>;
+          }),
+        ];
+
+        const baselineColumn = [
+          <div className={'header'} key={'baseline'}>
+            <CircleIcon group={'baseline'} />
+            Baseline
+          </div>,
+          data.baseline.map((hd: IHoverData, i: number) => {
+            return <div key={i}>{utils.formatMetricValue(hd.value)}</div>;
+          }),
+        ];
+
+        const canaryColumn = [
+          <div className="header" key="canary">
+            <CircleIcon group="canary" />
+            Canary
+          </div>,
+          data.canary.map((hd: IHoverData, i: number) => {
+            return <div key={i}>{utils.formatMetricValue(hd.value)}</div>;
+          }),
+        ];
+
+        const tooltipContent = (
+          <div className="tooltip-container">
+            <div className="columns">
+              <div className="column">{summaryKeysColumn}</div>
+              <div className="column">{baselineColumn}</div>
+              <div className="column">{canaryColumn}</div>
+            </div>
+          </div>
+        );
+
+        this.setState({
+          tooltip: {
+            content: tooltipContent,
+            x: d.x + this.margin.left,
+            y: d.y + this.margin.top,
+          },
+        });
+      } else {
+        this.setState({ tooltip: null });
+      }
+    };
+  };
+
+  private defineAnnotations = () => {
+    return ['baseline', 'canary'].map((g: string) => {
+      return {
+        type: 'summary-custom',
+        group: g,
+        summaryKeys: ['q1area', 'median', 'q3area'],
+      };
+    });
+  };
+
+  private customAnnotationFunction = (args: ISemioticAnnotationArgs<IAnnotationData, IOrGroup<IChartDataPoint>>) => {
+    const {
+      d,
+      orFrameState: { pieceDataXY },
+      categories,
+    } = args;
+
+    if (d.type === 'summary-custom') {
+      // If no data exists for this group, don't return any annotation elements
+      if (!categories[d.group]) {
+        return null;
+      }
+
+      const summaryData = pieceDataXY.filter((sd: IOrSummaryPiece) => sd.key === d.group);
+      const boxPlotWidth = categories[d.group].width;
+      const statLabelMap: { [stat: string]: string } = {
+        median: 'median',
+        q1area: '25th %-ile',
+        q3area: '75th %-ile',
+      };
+      const createNoteElement = (posY: number, dataPoint: IOrSummaryPiece) => {
+        const name = dataPoint.summaryPieceName;
+        const label = statLabelMap[name];
+        const noteData = {
+          x: dataPoint.x,
+          y: posY,
+          dx: boxPlotWidth / 2,
+          dy: 0,
+          note: {
+            label: `${label}: ${utils.formatMetricValue(dataPoint.value)}`,
+            wrap: 100,
+            lineType: 'vertical',
+            align: 'middle',
+            orientation: 'topBottom',
+            padding: 10,
+          },
+          className: 'boxplot-annotation',
+        };
+        return <Annotation key={name} noteData={noteData} />;
+      };
+
+      const nodes = d.summaryKeys
+        .map((summaryKey: string) => {
+          const pieceData = summaryData.find((sd: IOrSummaryPiece) => sd.summaryPieceName === summaryKey);
+          return pieceData ? new Node<IOrSummaryPiece>(pieceData.y, 20, pieceData) : null;
+        })
+        .map((v: null | Node<IOrSummaryPiece>) => v) as Array<Node<IOrSummaryPiece>>;
+
+      const forceOptions = {
+        minPos: this.margin.top,
+        maxPos: vizConfig.height - this.margin.bottom,
+      };
+      const annotations = new Force<IOrSummaryPiece>(forceOptions)
+        .nodes(nodes)
+        .compute()
+        .nodes()
+        .map((n: Node<IOrSummaryPiece>) => createNoteElement(n.currentPos, n.data));
+
+      return annotations;
+    } else {
+      return null;
+    }
+  };
+
+  private getChartProps = () => {
+    const { parentWidth } = this.props;
+    const chartData = this.generateChartData();
+
+    return {
+      size: [parentWidth, vizConfig.height],
+      margin: this.margin,
+      projection: 'vertical',
+      summaryType: 'boxplot',
+      oLabel: false,
+      oPadding: 160,
+      style: (d: IChartDataPoint) => {
+        return {
+          fill: d.color,
+          fillOpacity: 0.7,
+        };
+      },
+      summaryStyle: (d: IChartDataPoint) => {
+        return {
+          fill: d.color,
+          fillOpacity: 0.4,
+          stroke: '#6a6a6a',
+          strokeWidth: 2,
+        };
+      },
+      pieceClass: (d: IChartDataPoint) => `piece ${d.group}`,
+      type: {
+        type: 'swarm',
+        r: 3,
+        iterations: 50,
+      },
+      rExtent: extent(chartData.map((o) => o.value)),
+      customHoverBehavior: this.createChartHoverHandler(),
+      hoverAnnotation: false,
+      annotations: this.defineAnnotations(),
+      summaryHoverAnnotation: [] as IAnnotationType[],
+      data: chartData,
+      oAccessor: (d: IChartDataPoint) => d.group,
+      rAccessor: (d: IChartDataPoint) => d.value,
+      svgAnnotationRules: this.customAnnotationFunction,
+      summaryClass: 'boxplot-summary',
+      axis: {
+        orient: 'left',
+        label: 'metric value',
+        tickFormat: (d: number) => utils.formatMetricValue(d),
+      },
+    };
+  };
+
+  public render() {
+    const { metricSetPair } = this.props;
+    return (
+      <div className="boxplot">
+        <ChartHeader metric={metricSetPair.name} />
+        <ChartLegend />
+        <div className="graph-container">
+          <div className="boxplot-chart">
+            <OrdinalFrame {...this.getChartProps()} />
+          </div>
+          <Tooltip {...this.state.tooltip} />
+        </div>
+      </div>
+    );
+  }
+}

package/src/kayenta/report/detail/graph/semiotic/chartHeader.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IChartHeaderProps {
+  metric: string;
+}
+
+export default ({ metric }: IChartHeaderProps) => {
+  return (
+    <div className="chart-header">
+      <h6 className="heading-6 color-text-primary">
+        <span className="uppercase prefix">metric name:</span>
+        <span>
+          &nbsp;
+          {metric}
+        </span>
+      </h6>
+    </div>
+  );
+};

package/src/kayenta/report/detail/graph/semiotic/chartLegend.less

@@ -0,0 +1,26 @@
+.chart-legend {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  margin-top: 4px;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin: 0px 40px;
+    font-size: 12px;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+  .deselected {
+    opacity: 0.5;
+  }
+  .legend-icon {
+    height: 12px;
+    width: 40px;
+    border-radius: 6px;
+    margin-right: 8px;
+  }
+}

package/src/kayenta/report/detail/graph/semiotic/chartLegend.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { vizConfig } from './config';
+
+import './chartLegend.less';
+
+interface IChartLegendProps {
+  isClickable?: boolean;
+  onClickHandler?: (group: string) => void;
+  showGroup?: { [group: string]: boolean };
+}
+
+export default (props: IChartLegendProps) => {
+  const { onClickHandler, showGroup = { baseline: true, canary: true }, isClickable = false } = props;
+
+  const baselineIconStyle = {
+    backgroundColor: vizConfig.colors.baseline,
+  };
+
+  const canaryIconStyle = {
+    backgroundColor: vizConfig.colors.canary,
+  };
+
+  const handleClick = (group: string) => (onClickHandler ? () => onClickHandler(group) : undefined);
+
+  const legendItemClass = classNames('legend-item', { clickable: isClickable });
+  const legendItemClassCanary = classNames(legendItemClass, { deselected: !showGroup.canary });
+  const legendItemClassBaseline = classNames(legendItemClass, { deselected: !showGroup.baseline });
+  return (
+    <div className="chart-legend">
+      <div className={legendItemClassBaseline} onClick={handleClick('baseline')}>
+        <div className="legend-icon" style={baselineIconStyle} />
+        <div>Baseline</div>
+      </div>
+      <div className={legendItemClassCanary} onClick={handleClick('canary')}>
+        <div className="legend-icon" style={canaryIconStyle} />
+        <div>Canary</div>
+      </div>
+    </div>
+  );
+};

package/src/kayenta/report/detail/graph/semiotic/circleIcon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { vizConfig } from './config';
+
+export interface ICircleIconProps {
+  group: string;
+}
+
+// simple component to show circle icons in tooltips
+export default ({ group }: ICircleIconProps) => {
+  const iconStyle = {
+    color: vizConfig.colors[group],
+    paddingRight: 4,
+  };
+  return <i className="fas fa-circle" style={iconStyle} />;
+};

package/src/kayenta/report/detail/graph/semiotic/config.less

@@ -0,0 +1,5 @@
+@axis-color: var(--color-text-primary);
+@grid-color: var(--color-dovegray);
+@background-color: var(--color-alabaster);
+@canary-color: #e26a6a;
+@baseline-color: #52b3d9;

package/src/kayenta/report/detail/graph/semiotic/config.ts

@@ -0,0 +1,38 @@
+interface IColorConfig {
+  [propName: string]: string;
+}
+
+interface ITimeSeriesConfig {
+  [propName: string]: any;
+}
+
+interface IDataGroup {
+  [group: string]: string;
+}
+
+interface IVizConfig {
+  readonly colors: IColorConfig;
+  readonly height: number;
+  readonly timeSeries: ITimeSeriesConfig;
+  readonly dataGroupMap: IDataGroup;
+}
+
+export const vizConfig: IVizConfig = {
+  colors: {
+    baseline: '#52b3d9',
+    canary: '#e26a6a',
+    background: '#f8f8f8',
+  },
+  height: 400,
+  timeSeries: {
+    minimapDataPointsThreshold: 240,
+    minimapHeight: 40,
+    axisTickLineHeight: 4,
+    axisTickLabelHeight: 32,
+    axisLabelHeight: 16,
+  },
+  dataGroupMap: {
+    baseline: 'control',
+    canary: 'experiment',
+  },
+};

package/src/kayenta/report/detail/graph/semiotic/customAxisTickLabel.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import * as utils from './utils';
+
+export interface ICustomAxisTickLabel {
+  millis: number;
+}
+
+// custom labels as we want two label rows when showing date + hour at midnight
+export default ({ millis }: ICustomAxisTickLabel) => {
+  const text = utils.dateTimeTickFormatter(millis).map((s: string, i: number) => (
+    <text textAnchor={'middle'} className={'axis-label'} key={i}>
+      {s}
+    </text>
+  ));
+  return <g className={'axis-label'}>{text}</g>;
+};

package/src/kayenta/report/detail/graph/semiotic/declarations/labella.d.ts

@@ -0,0 +1,16 @@
+declare module 'labella' {
+  export class Node<Data> {
+    public readonly idealPos: number;
+    public readonly currentPos: number;
+    public readonly width: number;
+    public readonly data: Data;
+    public readonly layerIndex: number;
+    constructor(idealPos: number, width: number, data?: Data);
+  }
+  export class Force<Data> {
+    constructor(options: { [option: string]: number | string | boolean | null });
+    nodes(nodes: Array<Node<Data>>): this;
+    nodes(): Array<Node<Data>>; // eslint-disable-line no-dupe-class-members
+    compute(): this;
+  }
+}

package/src/kayenta/report/detail/graph/semiotic/declarations/react-container-dimensions.d.ts

@@ -0,0 +1,3 @@
+declare module 'react-container-dimensions' {
+  export default class ContainerDimensions extends React.Component {}
+}

package/src/kayenta/report/detail/graph/semiotic/declarations/semiotic.d.ts

@@ -0,0 +1,160 @@
+declare module 'semiotic' {
+  import { CurveFactory } from 'd3-shape';
+  import { ScaleTime } from 'd3-scale';
+
+  export class XYFrame extends React.Component<IXYFrameProps<DataSet, DataPoint>> {}
+  export class MinimapXYFrame extends React.Component<IMinimapProps<DataSet, DataPoint>> {}
+  export class OrdinalFrame extends React.Component {}
+  export class Annotation extends React.Component<IAnnotationProps> {}
+  export class Axis extends React.Component<IAxisProps> {}
+
+  // Props for the XYFrame component
+  export interface IXYFrameProps<DataSet, DataPoint> {
+    lines?: DataSet[];
+    lineType?: { type: string; interpolator: CurveFactory };
+    lineStyle?: (ds: DataSet) => object;
+    xAccessor?: string | ((d: DataPoint) => Date);
+    yAccessor?: string | ((d: DataPoint) => number);
+    xScaleType?: ScaleTime<number, number>;
+    baseMarkProps?: object;
+    hoverAnnotation?: boolean | Array<object | Function> | object | Function;
+    customHoverBehavior?: (d: IXYFrameHoverBaseArgs<DataPoint> & DataPoint) => void;
+    xExtent?: Date[] | number[];
+    axes?: object[];
+    margin?: IMargin;
+    matte?: boolean;
+    size?: number[];
+    yBrushable?: boolean;
+    brushEnd?: (d: Date[]) => void;
+  }
+
+  // Props for the Minimap component
+  export interface IMinimapProps<DataSet, DataPoint> extends IXYFrameProps<DataSet, DataPoint> {
+    minimap?: IXYFrameProps<DataSet, DataPoint>;
+  }
+
+  // Props for the Annotation component
+  export interface IAnnotationProps {
+    noteData: {
+      x: number;
+      y: number;
+      dx?: number;
+      dy?: number;
+      nx?: number;
+      ny?: number;
+      note: {
+        label: string;
+        wrap?: number;
+        align?: string;
+        orientation?: string;
+        padding?: number;
+        color?: string;
+        lineType?: string;
+      };
+      className?: string;
+    };
+  }
+
+  // Props for the Axis component
+  export interface IAxisProps {
+    className?: string;
+    size: number[];
+    scale: ScaleTime;
+    orient?: string;
+    label?: string | object;
+    tickValues?: number[] | Date[];
+    tickFormat?: (d: number) => JSX.Element | string;
+    ticks?: number;
+  }
+
+  // Args supplied by semiotic's XYFrame to client's hover event callback function
+  export interface IXYFrameHoverBaseArgs<DataPoint> {
+    data: DataPoint;
+    points?: DataPoint[];
+    voronoiX: number;
+    voronoiY: number;
+  }
+
+  /*
+   * Args supplied by semiotic's OrdinalFrame to client's custom hover event callback function
+   */
+  export interface IOrFrameHoverArgs<DataPoint> {
+    column?: IOrGroup<DataPoint>;
+    summary?: Array<IOrPiece<DataPoint>>;
+    type?: string; // type of hover event (e.g. frame-hover)
+    points: undefined | IOrSummaryPiece[]; // used for calculated summary datasets (e.g. boxplot)
+    voronoiX?: number; // x position on the SVG element
+    voronoiY?: number; // y position on the SVG element
+  }
+
+  export interface IOrSummaryPiece {
+    isSummaryData: boolean;
+    key: string; // data group (i.e. baseline or canary)
+    label: string;
+    summaryPieceName: string;
+    type: string; // type of hover event (e.g. frame-hover)
+    value: number;
+    x: number; // x position on the SVG element
+    y: number; // y position on the SVG element
+  }
+
+  export interface IOrPiece<DataPoint> {
+    base: number; // coordinate of the base along the y-axis
+    value: number; // original value of the data point
+    scaledValue: number; // value in pixels
+    data: DataPoint;
+  }
+
+  export interface IOrGroup<DataPoint> {
+    middle: number; // absolute position of the center of the column along the main axis
+    name: string; // ordinal label
+    padding: number;
+    width: number; // width of the column
+    x: number; // starting position of the column (along the main axis)
+    xyData: Array<IOrXyData<DataPoint>>;
+    y: number;
+  }
+
+  export interface IOrXyData<DataPoint> {
+    o: string; // ordinal label for this data
+    xy: {
+      height: number; //height of the data point svg along the y axis
+      width: number; // width of the data point svg (e.g. bar width)
+      x: number; // starting x coordinate of the drawn data svg
+      y: number; // starting y coordinate of the drawn data svg
+
+      // center coordinate of the data point svg along the main (x) axis
+      // relative to x
+      middle: number;
+    };
+    piece: IOrPiece<DataPoint>;
+  }
+
+  /*
+   * Args supplied by semiotic's Frame to client's custom annotation function
+   */
+  export interface ISemioticAnnotationArgs<AnnotationData, CategoryData> {
+    d: AnnotationData; // client-defined custom annotation data
+    i: number; // index
+    categories: {
+      [label: string]: CategoryData;
+    };
+    orFrameState?: ISemioticOrFrameState;
+  }
+
+  export interface ISemioticOrFrameState {
+    pieceDataXY: IOrSummaryPiece[];
+  }
+
+  // Frame prop that specifies any pre-defined semiotic annotation
+  export type IAnnotationType = {
+    type?: string | Function;
+    column?: { name: string };
+    x?: number;
+    y?: number;
+    yTop?: number;
+    yBottom?: number;
+    yMiddle?: number;
+    coordinates?: object[];
+  };
+}

package/src/kayenta/report/detail/graph/semiotic/differenceArea.less

@@ -0,0 +1,17 @@
+.difference-area {
+  margin-top: 20px;
+  .visualization-layer {
+    g.axis.x.bottom {
+      line.axis-baseline {
+        stroke: none;
+      }
+    }
+  }
+  .secondary-ts-x-axis {
+    g.axis.x.bottom {
+      line.axis-baseline {
+        stroke: none;
+      }
+    }
+  }
+}