@spinnaker/kayenta 2025.4.0 → 2025.4.1

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

@@ -1,45 +0,0 @@
-.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

@@ -1,283 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,5 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,160 +0,0 @@
-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

@@ -1,17 +0,0 @@
-.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;
-      }
-    }
-  }
-}