@spinnaker/kayenta 0.0.0-main-2

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

@@ -0,0 +1,186 @@
+import { scaleUtc } from 'd3-scale';
+import { curveStepAfter } from 'd3-shape';
+import * as React from 'react';
+import { XYFrame } from 'semiotic';
+
+import { vizConfig } from './config';
+import CustomAxisTickLabel from './customAxisTickLabel';
+import SecondaryTSXAxis from './secondaryTSXAxis';
+import { IMargin, ISemioticChartProps } from './semiotic.service';
+import * as utils from './utils';
+
+import './differenceArea.less';
+
+interface IDataPoint {
+  timestampMillis: number;
+  value: number;
+}
+
+interface IChartDataSet {
+  label: string;
+  color: string;
+  coordinates: IDataPoint[];
+}
+
+interface IInterimDataSet {
+  timestamp: number;
+  canary: number | string;
+  baseline: number | string;
+}
+
+interface IDifferenceAreaProps extends ISemioticChartProps {
+  millisSetBaseline: number[];
+}
+
+/*
+ * Supplemental visualization in the time series view to highlight
+ * Canary difference to baseline at any given timestamp
+ */
+export default class DifferenceArea extends React.Component<IDifferenceAreaProps> {
+  private margin: IMargin = {
+    left: 60,
+    right: 20,
+    top: 8,
+  };
+
+  private chartHeight = 40; // chart height not including axes height
+  private headerHeight = 17;
+
+  private getChartData = () => {
+    const { metricSetPair } = this.props;
+    const {
+      values: { experiment, control },
+      scopes,
+    } = metricSetPair;
+
+    const stepMillis = scopes.control.stepMillis;
+    const maxDataPoints = Math.max(experiment.length, control.length);
+
+    // Align data sets in case canary & baseline have different lengths and/or starting time
+    const intDataSet: IInterimDataSet[] = Array(maxDataPoints)
+      .fill(0)
+      .map((_, i) => {
+        const e = experiment[i];
+        const c = control[i];
+        return {
+          timestamp: scopes.control.startTimeMillis + i * stepMillis,
+          canary: e,
+          baseline: c,
+        };
+      });
+
+    const baselineReferenceDataPoints: IDataPoint[] = intDataSet.map((ds: IInterimDataSet) => ({
+      timestampMillis: ds.timestamp,
+      value: 0,
+    }));
+
+    const differenceDataPoints: IDataPoint[] = intDataSet.map((ds: IInterimDataSet) => ({
+      timestampMillis: ds.timestamp,
+      value: typeof ds.canary === 'number' && typeof ds.baseline === 'number' ? ds.canary - ds.baseline : 0,
+    }));
+
+    return {
+      chartData: [
+        {
+          label: 'difference',
+          color: vizConfig.colors.canary,
+          coordinates: differenceDataPoints,
+        },
+        {
+          label: 'baselineReference',
+          color: vizConfig.colors.baseline,
+          coordinates: baselineReferenceDataPoints,
+        },
+      ],
+    };
+  };
+
+  private getSecondaryAxis = (millisOffset: number, millisSetBaseline: number[]) => {
+    const { parentWidth } = this.props;
+    const millisSetCanary = millisSetBaseline.map((ms: number) => ms + millisOffset);
+
+    return (
+      <SecondaryTSXAxis
+        margin={{ left: this.margin.left, right: this.margin.right, top: 0, bottom: 0 }}
+        width={parentWidth}
+        millisSet={millisSetCanary}
+        axisLabel={'canary'}
+        bottomOffset={0}
+      />
+    );
+  };
+
+  private getXAxisTotalHeight = (shouldUseSecondaryXAxis: boolean) => {
+    const { axisTickLineHeight, axisTickLabelHeight, axisLabelHeight } = vizConfig.timeSeries;
+
+    return shouldUseSecondaryXAxis
+      ? 2 * (axisLabelHeight + axisTickLabelHeight) + axisTickLineHeight
+      : axisTickLabelHeight;
+  };
+
+  public render() {
+    const { metricSetPair, parentWidth, millisSetBaseline } = this.props;
+
+    /*
+     * Generate the data needed for the graph components
+     */
+    const { scopes } = metricSetPair;
+    const { chartData } = this.getChartData();
+    const millisOffset = scopes.experiment.startTimeMillis - scopes.control.startTimeMillis;
+    const shouldUseSecondaryXAxis = millisOffset !== 0;
+
+    /*
+     * Build the visualization components
+     */
+    const xAxisTotalHeight = this.getXAxisTotalHeight(shouldUseSecondaryXAxis);
+    const computedConfig = {
+      lines: chartData,
+      size: [parentWidth, this.chartHeight + xAxisTotalHeight],
+      margin: { ...this.margin, bottom: xAxisTotalHeight },
+      lineType: {
+        type: 'area',
+        interpolator: curveStepAfter,
+      },
+      lineStyle: (ds: IChartDataSet) =>
+        ds.label === 'difference'
+          ? {
+              fill: ds.color,
+              fillOpacity: 0.6,
+            }
+          : {
+              stroke: ds.color,
+              strokeOpacity: 1,
+              strokeWidth: 2,
+              strokeDasharray: 5,
+            },
+      xAccessor: (d: IDataPoint) => new Date(d.timestampMillis),
+      yAccessor: 'value',
+      xScaleType: scaleUtc(),
+      axes: [
+        {
+          orient: 'left',
+          tickFormat: () => `\u0394 = 0`, // Δ = 0
+          tickValues: [0],
+        },
+        {
+          orient: 'bottom',
+          tickValues: utils.calculateDateTimeTicks(millisSetBaseline),
+          tickFormat: (d: number) => <CustomAxisTickLabel millis={d} />,
+          label: shouldUseSecondaryXAxis ? 'Baseline' : undefined,
+          className: shouldUseSecondaryXAxis ? 'baseline-dual-axis' : '',
+        },
+      ],
+      xExtent: [millisSetBaseline[0], millisSetBaseline[millisSetBaseline.length - 1]],
+    };
+
+    return (
+      <div className="difference-area">
+        <div className="chart-title" style={{ height: this.headerHeight }}>
+          Canary Value Differences from Baseline
+        </div>
+        <XYFrame {...computedConfig} />
+        {shouldUseSecondaryXAxis ? this.getSecondaryAxis(millisOffset, millisSetBaseline) : null}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+.histogram {
+  .graph-container {
+    position: relative;
+    .bar-annotation {
+      text {
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .annotation-connector {
+        display: none;
+      }
+      .note-line {
+        display: none;
+      }
+    }
+    g.ordinal-labels {
+      stroke: var(--color-text-primary);
+      font-size: 12px;
+      font-weight: 200;
+    }
+  }
+}

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

@@ -0,0 +1,251 @@
+import { extent, histogram } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import * as React from 'react';
+import {
+  Annotation,
+  IAnnotationType,
+  IOrFrameHoverArgs,
+  IOrGroup,
+  IOrPiece,
+  IOrXyData,
+  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 './histogram.less';
+
+interface IInputDataPoint {
+  value: number;
+  group: string;
+}
+
+interface IChartDataPoint {
+  group: string;
+  count: number;
+  x0: number;
+  x1: number;
+}
+
+interface IAnnotationData extends IChartDataPoint {
+  type: string;
+}
+
+interface IHistogramState {
+  tooltip: ITooltip;
+}
+
+export default class Histogram extends React.Component<ISemioticChartProps, IHistogramState> {
+  public state: IHistogramState = {
+    tooltip: null,
+  };
+
+  private margin: IMargin = {
+    top: 20,
+    bottom: 20,
+    left: 60,
+    right: 10,
+  };
+
+  private decorateData = (dataPoints: number[], group: string): IInputDataPoint[] => {
+    return dataPoints.map((dp) => ({
+      group,
+      value: dp,
+    }));
+  };
+
+  /*
+   * Semiotic actually supports histogram as a "summary type" out of the box, but the customization is
+   * currently limited (e.g. it can't display the y-axis ticks & labels)
+   * Hence we're manually generating histogram data using D3 and display it as
+   * a grouped bar chart in semiotic
+   */
+  private generateChartData = () => {
+    const { metricSetPair } = this.props;
+    const filterFunc = (v: IInputDataPoint) => typeof v.value === 'number';
+    const baselineInput = this.decorateData(metricSetPair.values.control, 'baseline');
+    const canaryInput = this.decorateData(metricSetPair.values.experiment, 'canary');
+    const combinedInput = baselineInput.concat(canaryInput).filter(filterFunc);
+
+    const x = scaleLinear()
+      .domain(extent(combinedInput.map((o) => o.value)))
+      .nice();
+    const domain = x.domain() as [number, number];
+
+    // create histogram bins based on the combined data points
+    const histogramData = histogram<IInputDataPoint, number>()
+      .domain(domain)
+      .value((d: IInputDataPoint) => d.value)(combinedInput);
+
+    const chartData: IChartDataPoint[] = [];
+
+    // Convert it to ordinal data format for bar chart in semiotic
+    histogramData.forEach((h) => {
+      const { x0, x1 } = h;
+      const baselineBin = { group: 'baseline', x0, x1, count: 0 };
+      const canaryBin = { group: 'canary', x0, x1, count: 0 };
+      h.forEach((d) => (d.group === 'baseline' ? baselineBin.count++ : canaryBin.count++));
+      chartData.push(baselineBin);
+      chartData.push(canaryBin);
+    });
+
+    return chartData;
+  };
+
+  // Function factory to handle hover event
+  private createChartHoverHandler = (chartData: IChartDataPoint[]) => {
+    return (d: IOrFrameHoverArgs<IChartDataPoint>): void => {
+      if (d && d.type === 'column-hover') {
+        const x1Max: number = Math.max(...chartData.map((cd: IChartDataPoint) => cd.x1));
+        const xyData = d.column.xyData;
+        const x = xyData[1].xy.x + this.margin.left;
+        const halfHeight1 = xyData[0].xy.height / 2;
+        const halfHeight2 = xyData[1].xy.height / 2;
+        const y = vizConfig.height - this.margin.bottom - Math.min(halfHeight1, halfHeight2);
+        const { x0, x1 } = d.summary[0].data;
+        const tooltipRows = d.summary.map((s: IOrPiece<IChartDataPoint>) => {
+          const { group, count } = s.data;
+          const valueStyle = {
+            fontWeight: 'bold',
+          } as React.CSSProperties;
+
+          return (
+            <div key={group}>
+              <CircleIcon group={group} />
+              <span>{` ${group} count: `}</span>
+              <span style={valueStyle}>{count}</span>
+            </div>
+          );
+        });
+
+        let label = `For metric value more than / equal to ${utils.formatMetricValue(x0)} `;
+        label +=
+          x1 === x1Max
+            ? `and less than / equal to ${utils.formatMetricValue(x1)}`
+            : `and less than ${utils.formatMetricValue(x1)}`;
+
+        const tooltipContent = (
+          <div>
+            <div>{label}</div>
+            {tooltipRows}
+          </div>
+        );
+
+        this.setState({
+          tooltip: {
+            content: tooltipContent,
+            x,
+            y,
+          },
+        });
+      } else {
+        this.setState({ tooltip: null });
+      }
+    };
+  };
+
+  // generate bar value annotations object
+  private defineAnnotations = (chartData: IChartDataPoint[]) => {
+    const annotations = [] as IAnnotationData[];
+    chartData.forEach((d: IChartDataPoint) => {
+      if (d.count > 0) {
+        annotations.push({
+          type: 'bar-value-custom',
+          ...d,
+        });
+      }
+    });
+    return annotations;
+  };
+
+  // function to actually create the JSX elements based on the annotation object
+  private customAnnotationFunction = (
+    args: ISemioticAnnotationArgs<IAnnotationData, IOrGroup<IChartDataPoint>>,
+  ): JSX.Element | null => {
+    const { d, i, categories } = args;
+    if (d.type === 'bar-value-custom') {
+      const { x, y, width } = categories[d.x1].xyData.find(
+        (c: IOrXyData<IChartDataPoint>) => c.piece.data.group === d.group,
+      ).xy;
+      const noteData = {
+        x: x + width / 2,
+        y,
+        nx: x + width / 2,
+        ny: y - 1,
+        note: {
+          label: `${d.count}`,
+          wrap: 100,
+          align: 'middle',
+          orientation: 'topBottom',
+          padding: 0,
+          color: vizConfig.colors[d.group],
+          lineType: 'horizontal',
+        },
+        className: `bar-annotation`,
+      };
+      return <Annotation key={i} noteData={noteData} />;
+    } else {
+      return null;
+    }
+  };
+
+  private getChartProps = () => {
+    const { parentWidth } = this.props;
+    const chartData = this.generateChartData();
+
+    return {
+      size: [parentWidth, vizConfig.height],
+      margin: this.margin,
+      projection: 'vertical',
+      type: 'clusterbar',
+      oLabel: (v: string) => <text textAnchor="middle">{utils.formatMetricValue(parseFloat(v))}</text>,
+      oPadding: 20,
+      oAccessor: (d: IChartDataPoint) => d.x1,
+      style: (d: IChartDataPoint) => {
+        return {
+          fill: vizConfig.colors[d.group],
+          strokeWidth: 1,
+          stroke: vizConfig.colors.background,
+          strokeOpacity: 1,
+        };
+      },
+      customHoverBehavior: this.createChartHoverHandler(chartData),
+      data: this.generateChartData(),
+      axis: [
+        {
+          orient: 'left',
+          label: 'measurement count',
+          tickFormat: (d: number) => (d === 0 ? null : Math.abs(d)),
+        },
+      ],
+      rAccessor: (d: IChartDataPoint) => d.count,
+      annotations: this.defineAnnotations(chartData),
+      svgAnnotationRules: this.customAnnotationFunction,
+      hoverAnnotation: [] as IAnnotationType[],
+    };
+  };
+
+  public render() {
+    const { metricSetPair } = this.props;
+
+    return (
+      <div className="histogram">
+        <ChartHeader metric={metricSetPair.name} />
+        <ChartLegend />
+        <div className="graph-container">
+          <div className="canary-chart">
+            <OrdinalFrame {...this.getChartProps()} />
+          </div>
+          <Tooltip {...this.state.tooltip} />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Suspense } from 'react';
+
+import { Spinner } from '@spinnaker/core';
+
+import { GraphType, IMetricSetPairGraphProps, metricSetPairGraphService } from '../metricSetPairGraph.service';
+const SemioticGraphLazy = React.lazy(() => import(/* webpackChunkName: "Lazy-KayentaGraphs" */ './semioticGraph'));
+
+const supportedGraphTypes: GraphType[] = [GraphType.TimeSeries, GraphType.Histogram, GraphType.BoxPlot];
+// Semiotic component registration
+metricSetPairGraphService.register({
+  name: 'semiotic',
+  handlesGraphType: (type) => supportedGraphTypes.includes(type),
+  getGraph: () => (props: IMetricSetPairGraphProps) => (
+    <Suspense fallback={<Spinner />}>
+      <SemioticGraphLazy {...props} />
+    </Suspense>
+  ),
+});

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

@@ -0,0 +1,5 @@
+.no-data-sign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { vizConfig } from './config';
+import './noValidDataSign.less';
+
+export default () => (
+  <div style={{ height: vizConfig.height }} className="no-data-sign">
+    No Valid Data is Available for This Metric
+  </div>
+);

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

@@ -0,0 +1,6 @@
+.secondary-ts-x-axis {
+  position: absolute;
+  g.axis-title.x.axis.bottom text {
+    transform: translateY(-8px);
+  }
+}

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

@@ -0,0 +1,58 @@
+import { scaleUtc } from 'd3-scale';
+import * as React from 'react';
+import { Axis } from 'semiotic';
+
+import { vizConfig } from './config';
+import CustomAxisTickLabel from './customAxisTickLabel';
+import { IMargin } from './semiotic.service';
+import * as utils from './utils';
+
+import './secondaryTSXAxis.less';
+
+interface ISecondaryTSXAxisProps {
+  margin: IMargin;
+  width: number;
+  millisSet: number[];
+  axisLabel?: string;
+  bottomOffset: number;
+}
+
+/*
+ * Secondary X Axis for Time Series Graph
+ * Used when canary and baseline have different start time. We can overlay this axis component
+ * on the main graph component
+ */
+export default class SecondaryTSXAxis extends React.Component<ISecondaryTSXAxisProps> {
+  public render() {
+    const { margin, width, millisSet, axisLabel, bottomOffset } = this.props;
+
+    const { axisTickLineHeight, axisTickLabelHeight, axisLabelHeight } = vizConfig.timeSeries;
+
+    const extent = [millisSet[0], millisSet[millisSet.length - 1]].map((ms: number) => new Date(ms));
+    const totalAxisHeight = axisTickLabelHeight + axisTickLineHeight + (axisLabel ? axisLabelHeight : 0);
+    const netWidth = width - margin.left - margin.right;
+    const range = [0, netWidth];
+    const containerStyle = {
+      bottom: bottomOffset,
+    };
+
+    const svgWrapperStyle = {
+      transform: `translateX(${margin.left}px)`,
+    };
+    return (
+      <svg className="axis secondary-ts-x-axis" width={width} height={totalAxisHeight} style={containerStyle}>
+        <g className="wrapper" style={svgWrapperStyle}>
+          <Axis
+            className="x axis bottom canary-dual-axis"
+            size={[netWidth, axisTickLineHeight]}
+            scale={scaleUtc().domain(extent).range(range)}
+            orient="bottom"
+            label="Canary"
+            tickValues={utils.calculateDateTimeTicks(millisSet)}
+            tickFormat={(d: number) => <CustomAxisTickLabel millis={d} />}
+          />
+        </g>
+      </svg>
+    );
+  }
+}

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

@@ -0,0 +1,32 @@
+import { IMetricSetPairGraphProps } from '../metricSetPairGraph.service';
+
+export interface ISemioticChartProps extends IMetricSetPairGraphProps {
+  parentWidth: number;
+}
+
+export interface IMargin {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+export interface ITooltip {
+  content: JSX.Element;
+  x: number;
+  y: number;
+}
+
+export interface ISummaryStatistics {
+  [prop: string]: ISummaryStatisticsValue;
+}
+
+export interface ISummaryStatisticsValue {
+  value: number;
+  label: string;
+}
+
+export interface ITimeSeriesDataSets {
+  value: number;
+  label: string;
+}

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

@@ -0,0 +1,53 @@
+@import './config.less';
+
+.semiotic-graph {
+  margin-bottom: 8px;
+  .visualization-layer {
+    shape-rendering: crispedges;
+    .background-graphics {
+      .axis-tick-lines {
+        stroke: @grid-color;
+        opacity: 0.1;
+      }
+      .axis-title text {
+        letter-spacing: 1.5px;
+      }
+    }
+  }
+
+  .axis {
+    font-size: 12px;
+    font-weight: 400;
+    fill: @axis-color;
+    .axis-title.left.y text {
+      letter-spacing: 1.5px;
+    }
+    .x.axis.bottom text.axis-label {
+      transform: translateY(-10px);
+    }
+    .x.axis.bottom text.axis-label:nth-child(2) {
+      transform: translateY(5px);
+    }
+  }
+
+  .chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .prefix {
+      font-weight: 600;
+    }
+  }
+
+  .chart-title {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    font-size: 12px;
+  }
+
+  .graph-container {
+    position: relative;
+  }
+}

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import ContainerDimensions from 'react-container-dimensions';
+
+import BoxPlot from './boxplot';
+import Histogram from './histogram';
+import { GraphType, IMetricSetPairGraphProps } from '../metricSetPairGraph.service';
+import NoValidDataSign from './noValidDataSign';
+import TimeSeries from './timeSeries';
+
+import './semioticGraph.less';
+
+export default class SemioticGraph extends React.Component<IMetricSetPairGraphProps> {
+  private fetchChart = (parentWidth: number) => {
+    const {
+      type,
+      metricSetPair: {
+        values: { control, experiment },
+      },
+    } = this.props;
+    const chartProps = {
+      ...this.props,
+      parentWidth,
+    };
+    const filterInvalidValues = (data: number[]) => data.filter((v) => typeof v === 'number');
+
+    if (filterInvalidValues(control).length === 0 && filterInvalidValues(experiment).length === 0) {
+      return <NoValidDataSign />;
+    }
+
+    switch (type) {
+      case GraphType.TimeSeries:
+        return <TimeSeries {...chartProps} />;
+      case GraphType.Histogram:
+        return <Histogram {...chartProps} />;
+      case GraphType.BoxPlot:
+        return <BoxPlot {...chartProps} />;
+      default:
+        return null;
+    }
+  };
+
+  public render() {
+    return (
+      <div className="semiotic-graph">
+        <ContainerDimensions>{({ width }: { width: number }) => this.fetchChart(width)}</ContainerDimensions>
+      </div>
+    );
+  }
+}