feat(heatmap): small multiples

e2e/tests/heatmap_stories.test.ts

@@ -84,6 +84,95 @@ test.describe('Heatmap stories', () => {
     );
   });
 
+  test.describe('Small multiples', () => {
+    const titleOptions = {
+      panel: ' without panel titles',
+      axes: ' without axes titles',
+      both: ' without any titles',
+    };
+
+    pwEach.test<{
+      vSplit: number | null;
+      hSplit: number | null;
+      density?: number;
+      timeData?: boolean;
+      hiddenTitles?: 'panel' | 'axes' | 'both';
+    }>([
+      { vSplit: 2, hSplit: 2 },
+      { vSplit: 2, hSplit: 2, timeData: true },
+      { vSplit: 3, hSplit: 3 },
+      { vSplit: 1, hSplit: 3 },
+      { vSplit: null, hSplit: 3 },
+      { vSplit: 0, hSplit: 3 },
+      { vSplit: 3, hSplit: 1 },
+      { vSplit: 3, hSplit: 0 },
+      { vSplit: 3, hSplit: null },
+      { vSplit: 2, hSplit: 2, hiddenTitles: 'axes' },
+      { vSplit: 2, hSplit: 2, hiddenTitles: 'panel' },
+      { vSplit: 2, hSplit: 2, hiddenTitles: 'both' },
+      { vSplit: 2, hSplit: 2, hiddenTitles: 'both', timeData: true },
+    ])(
+      ({ vSplit, hSplit, hiddenTitles, timeData }) => {
+        const titleText = (hiddenTitles && titleOptions[hiddenTitles]) ?? '';
+        const timeDataText = timeData ? ' - time data' : '';
+        return `should render ${vSplit} x ${hSplit} trellis${titleText}${timeDataText}`;
+      },
+      async (page, { vSplit, hSplit, density = 30, hiddenTitles, timeData = false }) => {
+        const showAxesTitles = hiddenTitles !== 'axes' && hiddenTitles !== 'both';
+        const showPanelTitles = hiddenTitles !== 'panel' && hiddenTitles !== 'both';
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          `http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=background:white;theme:light&knob-Hide_left=true&knob-Hide_right=true&knob-Hide_top=true&knob-Horizontal inner pad=0.1&knob-Horizontal inner pad_SmallMultiples Styles=0.05&knob-Horizontal outer pad=0&knob-Horizontal outer pad_SmallMultiples Styles=0&knob-Persist cells selection=true&knob-Show Legend=true&knob-Show axes title_SmallMultiples Styles=${showAxesTitles}&knob-Show axes panel titles_SmallMultiples Styles=${showPanelTitles}&knob-Show grid line_bottom=true&knob-Show grid line_left=true&knob-Show x axis title_SmallMultiples Styles=true&knob-Show y axis title_SmallMultiples Styles=true&knob-Time data=${timeData}&knob-Title_bottom=Hosts - Bottom&knob-Title_left=Metrics - Left&knob-Title_right=Metrics - Right&knob-Title_top=Hosts - Top&knob-Vertical inner pad=0.3&knob-Vertical inner pad_SmallMultiples Styles=0.1&knob-Vertical outer pad=0&knob-Vertical outer pad_SmallMultiples Styles=0&knob-categories_Data=4&knob-cell%20density(%)_Data=${density}&knob-density(%)_Data=100&knob-density_Data=2&knob-group count_Data=9&knob-h - split count_Data=${
+            hSplit ?? 0
+          }&knob-h - split_Data=${Number.isFinite(hSplit)}&knob-number of groups_Data=4&knob-v - split count_Data=${
+            vSplit ?? 0
+          }&knob-v - split_Data=${Number.isFinite(
+            vSplit,
+          )}&knob-Debug=&knob-Enable debug state=true&knob-cell density(%)_Data=75&knob-xScaleType_Data=linear&knob-Grid stroke_SmallMultiples Styles=1`,
+          {
+            waitSelector: (vSplit ?? 1) * (hSplit ?? 1) === 0 ? '.echReactiveChart_noResults' : undefined,
+          },
+        );
+      },
+    );
+
+    test('should render tooltip over correct panel', async ({ page }) => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=theme:light&knob-Hide_left=true&knob-Hide_right=true&knob-Hide_top=true&knob-Horizontal inner pad=0.1&knob-Horizontal inner pad_SmallMultiples Styles=0.05&knob-Horizontal outer pad=0&knob-Horizontal outer pad_SmallMultiples Styles=0&knob-Persist cells selection=true&knob-Show Legend=true&knob-Show axes title_SmallMultiples Styles=true&knob-Show axis panel titles=true&knob-Show axis panel titles_SmallMultiples Styles=true&knob-Show grid line_bottom=true&knob-Show grid line_left=true&knob-Show x axis title_SmallMultiples Styles=true&knob-Show y axis title_SmallMultiples Styles=true&knob-Time data=true&knob-Title_bottom=Hosts - Bottom&knob-Title_left=Metrics - Left&knob-Title_right=Metrics - Right&knob-Title_top=Hosts - Top&knob-Vertical inner pad=0.3&knob-Vertical inner pad_SmallMultiples Styles=0.1&knob-Vertical outer pad=0&knob-Vertical outer pad_SmallMultiples Styles=0&knob-categories_Data=4&knob-cell%20density(%)_Data[0]=20&knob-cell%20density(%)_Data[1]=20,60,20,20,50,20,5,25,20,25,50,50,50,50,25,20,20&knob-density(%)_Data=100&knob-density_Data=2&knob-group count_Data=9&knob-h - split count_Data=2&knob-h - split_Data=true&knob-number of groups_Data=4&knob-v - split count_Data=2&knob-v - split_Data=true&knob-Debug=&knob-cell density(%)_Data=100',
+        { left: 464, top: 212 },
+      );
+    });
+
+    test('should constrain brush to active panel', async ({ page }) => {
+      await common.expectChartWithDragAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=background:white;theme:light&knob-Enable%20debug%20state=true&knob-Grid%20stroke_SmallMultiples%20Styles=1&knob-Horizontal%20inner%20pad_SmallMultiples%20Styles=0.05&knob-Horizontal%20outer%20pad_SmallMultiples%20Styles=0&knob-Persist%20cells%20selection=true&knob-Show%20axes%20panel%20titles_SmallMultiples%20Styles=true&knob-Show%20axes%20title_SmallMultiples%20Styles=true&knob-Vertical%20inner%20pad_SmallMultiples%20Styles=0.1&knob-Vertical%20outer%20pad_SmallMultiples%20Styles=0&knob-categories_Data=4&knob-cell%20density(%)_Data=75&knob-h%20-%20split%20count_Data=2&knob-h%20-%20split_Data=true&knob-v%20-%20split%20count_Data=2&knob-v%20-%20split_Data=true&knob-xScaleType_Data=linear',
+        { left: 320, top: 100 },
+        { left: 630, top: 245 },
+      );
+    });
+
+    test('should brush panel with time data', async ({ page }) => {
+      await common.expectChartWithDragAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=background:white;theme:light&knob-Hide_left=true&knob-Hide_right=true&knob-Hide_top=true&knob-Horizontal inner pad=0.1&knob-Horizontal inner pad_SmallMultiples Styles=0.05&knob-Horizontal outer pad=0&knob-Horizontal outer pad_SmallMultiples Styles=0&knob-Persist cells selection=true&knob-Show Legend=&knob-Show axes title_SmallMultiples Styles=true&knob-Show axis panel titles=true&knob-Show axis panel titles_SmallMultiples Styles=true&knob-Show grid line_bottom=true&knob-Show grid line_left=true&knob-Show x axis title_SmallMultiples Styles=true&knob-Show y axis title_SmallMultiples Styles=true&knob-Time data=true&knob-Title_bottom=Hosts - Bottom&knob-Title_left=Metrics - Left&knob-Title_right=Metrics - Right&knob-Title_top=Hosts - Top&knob-Vertical inner pad=0.3&knob-Vertical inner pad_SmallMultiples Styles=0.1&knob-Vertical outer pad=0&knob-Vertical outer pad_SmallMultiples Styles=0&knob-categories_Data=4&knob-group count_Data=9&knob-h - split count_Data=2&knob-h - split_Data=true&knob-number of groups_Data=4&knob-v - split count_Data=2&knob-v - split_Data=true&knob-Debug=&knob-Enable debug state=true&knob-xScaleType_Data=linear&knob-Show axes panel titles_SmallMultiples Styles=true&knob-Grid stroke_SmallMultiples Styles=1&knob-cell density(%)_Data=50',
+        { left: 520, top: 210 },
+        { left: 710, top: 280 },
+      );
+    });
+
+    test('should select single cell on click with time data', async ({ page }) => {
+      await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=background:white;theme:light&knob-Enable debug state=true&knob-Grid stroke_SmallMultiples Styles=1&knob-Hide_left=true&knob-Hide_right=true&knob-Hide_top=true&knob-Horizontal inner pad=0.1&knob-Horizontal inner pad_SmallMultiples Styles=0.05&knob-Horizontal outer pad=0&knob-Horizontal outer pad_SmallMultiples Styles=0&knob-Persist cells selection=true&knob-Show axes panel titles_SmallMultiples Styles=true&knob-Show axes title_SmallMultiples Styles=true&knob-Show axis panel titles=true&knob-Show axis panel titles_SmallMultiples Styles=true&knob-Show grid line_bottom=true&knob-Show grid line_left=true&knob-Show x axis title_SmallMultiples Styles=true&knob-Show y axis title_SmallMultiples Styles=true&knob-Time data=true&knob-Title_bottom=Hosts - Bottom&knob-Title_left=Metrics - Left&knob-Title_right=Metrics - Right&knob-Title_top=Hosts - Top&knob-Vertical inner pad=0.3&knob-Vertical inner pad_SmallMultiples Styles=0.1&knob-Vertical outer pad=0&knob-Vertical outer pad_SmallMultiples Styles=0&knob-categories_Data=4&knob-group count_Data=9&knob-h - split count_Data=2&knob-h - split_Data=true&knob-number of groups_Data=4&knob-v - split count_Data=2&knob-v - split_Data=true&knob-xScaleType_Data=linear&knob-Debug=&knob-Show Legend=&knob-cell density(%)_Data=100',
+        { left: 340, top: 250 },
+      );
+    });
+
+    test('should select single cell on click with categorical data', async ({ page }) => {
+      await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/small-multiples-alpha--heatmap&globals=background:white;theme:light&knob-Enable debug state=true&knob-Grid stroke_SmallMultiples Styles=1&knob-Hide_left=true&knob-Hide_right=true&knob-Hide_top=true&knob-Horizontal inner pad=0.1&knob-Horizontal inner pad_SmallMultiples Styles=0.05&knob-Horizontal outer pad=0&knob-Horizontal outer pad_SmallMultiples Styles=0&knob-Persist cells selection=true&knob-Show axes panel titles_SmallMultiples Styles=true&knob-Show axes title_SmallMultiples Styles=true&knob-Show axis panel titles=true&knob-Show axis panel titles_SmallMultiples Styles=true&knob-Show grid line_bottom=true&knob-Show grid line_left=true&knob-Show x axis title_SmallMultiples Styles=true&knob-Show y axis title_SmallMultiples Styles=true&knob-Time data=false&knob-Title_bottom=Hosts - Bottom&knob-Title_left=Metrics - Left&knob-Title_right=Metrics - Right&knob-Title_top=Hosts - Top&knob-Vertical inner pad=0.3&knob-Vertical inner pad_SmallMultiples Styles=0.1&knob-Vertical outer pad=0&knob-Vertical outer pad_SmallMultiples Styles=0&knob-categories_Data=4&knob-group count_Data=9&knob-h - split count_Data=2&knob-h - split_Data=true&knob-number of groups_Data=4&knob-v - split count_Data=2&knob-v - split_Data=true&knob-xScaleType_Data=linear&knob-Debug=&knob-Show Legend=&knob-cell density(%)_Data=100',
+        { left: 340, top: 250 },
+      );
+    });
+  });
+
   eachTheme.describe(({ theme, urlParam }) => {
     test(`should highlight band on legend hover - ${theme}`, async ({ page }) => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(