fix(annotation): annotation rendering with no yDomain or groupId

.playground/playground.tsx

@@ -16,159 +16,133 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/* eslint-disable no-console */
 import React from 'react';
 
-import { Chart, Heatmap, HeatmapConfig, RecursivePartial, ScaleType, Settings } from '../src';
-import { HeatmapSpec } from '../src/chart_types/heatmap/specs';
-import { BABYNAME_DATA } from '../src/utils/data_samples/babynames';
-import { SWIM_LANE_DATA } from '../src/utils/data_samples/test_anomaly_swim_lane';
+import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../src';
+import { Position } from '../src/utils/commons';
 
-export class Playground extends React.Component<any, { highlightedData?: HeatmapSpec['highlightedData'] }> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      highlightedData: {
-        x: [1572908400000, 1572910200000],
-        y: ['i-ca80c01a'],
-      },
-    };
-  }
-
-  onBrushEnd: HeatmapConfig['onBrushEnd'] = (e) => {
-    console.log('___onBrushEnd___', e);
-    this.setState({
-      highlightedData: { x: e.x as any[], y: e.y as any[] },
-    });
-  };
+// export class Playground extends React.Component {
+//   render() {
+//     return (
+//       <div className="chart">
+//         <Chart className="story-chart">
+//           <RectAnnotation
+//             // groupId="nick"
+//             id="rect"
+//             dataValues={[
+//               {
+//                 coordinates: {
+//                   x0: 2,
+//                   x1: 4,
+//                 },
+//                 details: 'Max anomaly score: 7',
+//               },
+//               {
+//                 coordinates: {
+//                   x0: 12,
+//                   x1: 16,
+//                   // y0: 1,
+//                   // y1: 2,
+//                 },
+//                 details: 'Max anomaly score: 8',
+//               },
+//             ]}
+//             style={{ fill: 'red' }}
+//           />
+//           <Settings />
+//           <Axis id="bottom" position={Position.Bottom} title="x-domain axis" />
+//           <Axis
+//             // domain={{ constrainPadding: false, fit: true }}
+//             id="left"
+//             groupId="nick"
+//             title="y-domain axis"
+//             position={Position.Left}
+//           />
+//           <Axis
+//             // domain={{ constrainPadding: false, fit: true }}
+//             id="right"
+//             groupId="nick2"
+//             position={Position.Right}
+//           />
+//           <BarSeries
+//             id="bars"
+//             groupId="nick"
+//             xScaleType={ScaleType.Linear}
+//             yScaleType={ScaleType.Linear}
+//             xAccessor="x"
+//             yAccessors={['y']}
+//             data={[
+//               { x: 0, y: 0 },
+//               { x: 5, y: 0 },
+//               { x: 20, y: 0 },
+//             ]}
+//           />
+//           {/* <BarSeries
+//             id="bars1"
+//             groupId="nick2"
+//             xScaleType={ScaleType.Linear}
+//             yScaleType={ScaleType.Linear}
+//             xAccessor="x"
+//             yAccessors={['y']}
+//             data={[
+//               { x: 0, y: 61 },
+//               { x: 5, y: 43 },
+//               { x: 20, y: 49 },
+//             ]}
+//           /> */}
+//         </Chart>
+//       </div>
+//     );
+//   }
+// }
 
+export class Playground extends React.Component {
   render() {
-    const heatmapConfig: RecursivePartial<HeatmapConfig> = {
-      grid: {
-        cellHeight: {
-          min: 20,
-          max: 20, // 'fill',
-        },
-        stroke: {
-          width: 1,
-          color: '#D3DAE6',
-        },
-      },
-      cell: {
-        maxWidth: 'fill',
-        maxHeight: 'fill',
-        label: {
-          visible: false,
-        },
-        border: {
-          stroke: '#D3DAE6',
-          strokeWidth: 0,
-        },
-      },
-      brushArea: {
-        fill: 'red',
-      },
-      yAxisLabel: {
-        visible: true,
-        width: { max: 50 },
-        padding: 5,
-        fill: '#6a717d',
-      },
-      xAxisLabel: {
-        fill: '#6a717d',
-      },
-      onBrushEnd: this.onBrushEnd,
-    };
-    console.log(
-      BABYNAME_DATA.filter(([year]) => year > 1950).map((d) => {
-        return [d[0], d[1], d[2], -d[3]];
-      }),
-    );
     return (
-      <div>
-        <div className="chart" style={{ height: '500px', overflow: 'auto' }}>
-          <Chart>
-            <Settings
-              onElementClick={console.log}
-              showLegend
-              legendPosition="top"
-              brushAxis="both"
-              xDomain={{ min: 1572825600000, max: 1572912000000, minInterval: 1800000 }}
-            />
-            <Heatmap
-              id="heatmap1"
-              ranges={[0, 3, 25, 50, 75]}
-              colorScale={ScaleType.Threshold}
-              colors={['#ffffff', '#d2e9f7', '#8bc8fb', '#fdec25', '#fba740', '#fe5050']}
-              data={SWIM_LANE_DATA.map((v) => ({ ...v, time: v.time * 1000 }))}
-              highlightedData={this.state.highlightedData}
-              xAccessor="time"
-              yAccessor={(d) => d.laneLabel}
-              valueAccessor="value"
-              valueFormatter={(d) => d.toFixed(0.2)}
-              ySortPredicate="numAsc"
-              xScaleType={ScaleType.Time}
-              config={heatmapConfig}
-            />
-          </Chart>
-        </div>
-        <br />
-        <div className="chart" style={{ height: '500px' }}>
-          <Chart>
-            <Settings
-              onElementClick={console.log}
-              showLegend
-              legendPosition="left"
-              onBrushEnd={console.log}
-              brushAxis="both"
-            />
-            <Heatmap
-              id="heatmap2"
-              colorScale={ScaleType.Linear}
-              colors={['yellow', 'red']}
-              data={
-                BABYNAME_DATA.filter(([year]) => year > 1950)
-                // .map((d, i) => {
-                //   return [d[0], d[1], d[2], d[3] > 20000 ? -d[3] : d[3]];
-                // })
-              }
-              xAccessor={(d) => d[2]}
-              yAccessor={(d) => d[0]}
-              valueAccessor={(d) => d[3]}
-              valueFormatter={(value) => value.toFixed(0.2)}
-              xSortPredicate="alphaAsc"
-              config={{
-                grid: {
-                  cellHeight: {
-                    min: 40,
-                    max: 40, // 'fill',
-                  },
-                  stroke: {
-                    width: 0,
-                  },
-                },
-                cell: {
-                  maxWidth: 'fill',
-                  maxHeight: 20,
-                  label: {
-                    visible: true,
-                  },
-                  border: {
-                    stroke: 'white',
-                    strokeWidth: 1,
-                  },
-                },
-                yAxisLabel: {
-                  visible: true,
-                  width: 'auto',
-                  textColor: '#6a717d',
-                },
-              }}
-            />
-          </Chart>
-        </div>
-      </div>
+      <Chart className="story-chart">
+        <RectAnnotation
+          id="rect"
+          dataValues={[
+            {
+              coordinates: {
+                x0: 2,
+                x1: 4,
+              },
+              details: 'Max anomaly score: 7',
+            },
+            {
+              coordinates: {
+                x0: 12,
+                x1: 16,
+                // y0: 1,
+                // y1: 2,
+              },
+              details: 'Max anomaly score: 8',
+            },
+          ]}
+          style={{ fill: 'red' }}
+        />
+        <Settings />
+        <Axis id="bottom" position={Position.Bottom} title="x-domain axis" />
+        <Axis
+          domain={{ constrainPadding: false, fit: true }}
+          id="left"
+          title="y-domain axis"
+          position={Position.Left}
+        />
+        <BarSeries
+          id="bars"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          data={[
+            { x: 0, y: 10 },
+            { x: 5, y: 10 },
+            { x: 20, y: 10 },
+          ]}
+        />
+      </Chart>
     );
   }
 }
-/* eslint-enable no-console */

src/chart_types/xy_chart/annotations/rect/dimensions.integration.test.ts

@@ -256,4 +256,33 @@ describe('Render rect annotation within', () => {
     expectAnnotationAtPosition(data, 'line', dataValues, rect, 1, ScaleType.Linear);
     expectAnnotationAtPosition(data, 'bar', dataValues, rect, 1, ScaleType.Linear);
   });
+  describe('render annotations', () => {
+    it('annotation with no height will take the chart dimension height', () => {
+      const store = MockStore.default({ top: 0, left: 0, width: 20, height: 200 });
+      const settings = MockGlobalSpec.settingsNoMargins();
+      const annotation = MockAnnotationSpec.rect({
+        dataValues: [
+          { coordinates: { x0: 2, x1: 4 }, details: 'Max anomaly score: 7' },
+          { coordinates: { x0: 12, x1: 16 }, details: 'Max anomaly score: 8' },
+        ],
+      });
+
+      const bar = MockSeriesSpec.bar({
+        xScaleType: ScaleType.Linear,
+        data: [
+          { x: 1, y: 0 },
+          { x: 2, y: 0 },
+          { x: 4, y: 0 },
+        ],
+        xAccessor: 'x',
+        yAccessors: ['y'],
+      });
+      MockStore.addSpecs([settings, annotation, bar], store);
+      const expected = computeAnnotationDimensionsSelector(store.getState());
+      const [resultAnnotation] = expected.get('rect_annotation_1') ?? [];
+      expect(resultAnnotation).toMatchObject({
+        rect: { height: 200 },
+      });
+    });
+  });
 });