Feature/scatterplot heatmap

cypress/integration/scatterplot.spec.js

@@ -1,6 +1,9 @@
 
 context("Scatterplot", () => {
-    const URL = "http://localhost:9090/#2016-rio/4/N4IgbglgzgrghgGwgLzgFwgewHYgFwhQDG6aApgE4AOCmaIANONPEqhjgMplobYDmUfNhgIETDAFsyyHGXwgAomiIB6AKoAVAMKMQAMwgJyFIXgDaoNAE8q8glPlMKZfQoD67x3scAFSlgAJmaWIIEwFOhYuAS+AIwAsnpQ5FT4ALRxErb2IAjoZCkgAL4AumVMUDQQaCFWOQopFBACeoEQ0thQ0QrYUTiINdbJmBT0eKAubgT8mAiBPg0EUAGFbRAuRBwxYYVEZNjtrUx2zZgLBCVMSJI1+ACsAAwVhKt1IFOUB/sKs/N6+lGknQ+HqdgUgVccFE9CYYEQMFyVxANnBBGkcFgLiuk1cX2wP2WRjAlABQJBExRS12+mhxj08IQiIUyNRuQxWPkLyoLWwZECABEOgdujgQq8AB7JKijeilE68/mcWW/OYLYpAA==="
+    const urls = {
+        defaultView: "http://localhost:9090/#2016-rio/4/N4IgbglgzgrghgGwgLzgFwgewHYgFwhQDG6aApgE4AOCmaIANONPEqhjgMplobYDmUfNhgIETDAFsyyHGXwgAomiIB6AKoAVAMKMQAMwgJyFIXgDaoNAE8q8glPlMKZfQoD67x3scAFSlgAJmaWIIEwFOhYuAS+AIwAsnpQ5FT4ALRxErb2IAjoZCkgAL4AumVMUDQQaCFWOQopFBACeoEQ0thQ0QrYUTiINdbJmBT0eKAubgT8mAiBPg0EUAGFbRAuRBwxYYVEZNjtrUx2zZgLBCVMSJI1+ACsAAwVhKt1IFOUB/sKs/N6+lGknQ+HqdgUgVccFE9CYYEQMFyVxANnBBGkcFgLiuk1cX2wP2WRjAlABQJBExRS12+mhxj08IQiIUyNRuQxWPkLyoLWwZECABEOgdujgQq8AB7JKijeilE68/mcWW/OYLYpAA===",
+        withSummary: "http://localhost:9090/#2016-rio/4/N4IgbglgzgrghgGwgLzgFwgewHYgFwhQDG6aApgE4AOCmaIANONPEqhjgMplobYDmUfKCgALTAHdOMALYy4FAJ740FGGQC+TDDLLIcZfCACiaIgHoAqgBUAwoxAAzCAnIUheANqg0iqoYIdQyYKMkcjAH0IoIcggAVKLAATD28QJJgKdCxcAjiARgBZByhyKnwAWnztPwCQBHQyUpANAF02pigaCDRUn1qjUooIAQckiF1sKByjbGycRB7lTswKejxQUPCCfkwEJNiBgihEprGIUKIOXPSmojJscdGmf2HMA4IWpiQZHvwAJgArB1CKc+iAtpQHvcjLt9g5HKt5Ot+v4jEkwnAYK4HGBEOojF8QL40QRdHBYKEvpswlDsDDji4wJQEUj0MJiUdbo4sTimHiEATPlpOaSQOTKYYQVQRtgyEkACITB7THCpUEADxKVFW9FaL1l8s4uthewOGiAA==="
+    }
     const scatterplot = () => cy.get(".scatterplot");
     const points = () => scatterplot().find(".point");
     const yAxisTitle = () => scatterplot().find(".axis-title-y");
@@ -10,43 +13,89 @@ context("Scatterplot", () => {
     const gridLines = () => scatterplot().find(".grid-lines");
     const firstHoverableArea = () => scatterplot().find("circle:not(.point):first")
     const tooltip = () => scatterplot().find(".tooltip-within-stage");
+    // heatmap
+    const heatmap = () => scatterplot().find(".heatmap");
+    const heatmapLegend = () => cy.get(".color-legend");
+    const rectangles = () => scatterplot().find("rect");
 
-    beforeEach(() => {
-        cy.visit(URL);
-    });
+    describe("Default properties", () => {
+        beforeEach(() => {
+            cy.visit(urls.defaultView);
+        });
 
-    it('should render', () => {
-        scatterplot().should("exist");
-    })
+        it('should render', () => {
+            scatterplot().should("exist");
+        })
 
-    it("should render 50 points", () => {
-        points().should("have.length", 50);
-    });
+        it("should render 50 points", () => {
+            points().should("have.length", 50);
+        });
 
-    it("should render Y axis title", () => {
-        yAxisTitle().should("have.text", "Silver medals");
-    });
+        it("should render Y axis title", () => {
+            yAxisTitle().should("have.text", "Silver medals");
+        });
 
-    it("should render X axis title", () => {
-        xAxisTitle().should("have.text", "Gold medals");
-    });
+        it("should render X axis title", () => {
+            xAxisTitle().should("have.text", "Gold medals");
+        });
 
-    it("should render horizontal and vertical grid lines", () => {
-        gridLines().should("have.length", 2);
+        it("should render horizontal and vertical grid lines", () => {
+            gridLines().should("have.length", 2);
+        });
+
+        it('should render tooltip on point hover', () => {
+            firstHoverableArea().trigger('mouseover');
+
+            tooltip().should("exist");
+        })
     });
 
-    it("should load 2 ticks on X axis", () => {
-        xAxis().find(".tick").should("have.length", 2);
+    describe("Heatmap summary", () => {
+        beforeEach(() => {
+            cy.visit(urls.withSummary);
+        });
+
+        it('should render heatmap', () => {
+            heatmap().should("exist");
+        })
+
+        it('should render legend', () => {
+            heatmapLegend().should("exist");
+        })
+
+        it('should render rectangles', () => {
+            rectangles().should("have.length", 77);
+        })
     });
 
-    it("should load 2 ticks on Y axis", () => {
-        yAxis().find(".tick").should("have.length", 2);
+    describe("Large screen", () => {
+        beforeEach(() => {
+            cy.visit(urls.defaultView);
+            cy.viewport(1920, 1064);
+        });
+
+        it("should load ticks on X axis", () => {
+            xAxis().find(".tick").should("have.length", 8);
+        });
+
+        it("should load ticks on Y axis", () => {
+            yAxis().find(".tick").should("have.length", 12);
+        });
     });
 
-    it('should render tooltip on point hover', () => {
-        firstHoverableArea().trigger('mouseover');
+    describe("Small screen", () => {
+        beforeEach(() => {
+            cy.visit(urls.defaultView);
+            cy.viewport(1024, 920);
+        });
+
+        it("should load ticks on X axis", () => {
+            xAxis().find(".tick").should("have.length", 4);
+        });
 
-        tooltip().should("exist");
-    })
-})
+        it("should load ticks on Y axis", () => {
+            yAxis().find(".tick").should("have.length", 6);
+        });
+    });
+});
 

src/client/visualizations/heat-map/heatmap-legend.scss → src/client/components/color-legend/color-legend.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2019 Allegro.pl
+ * Copyright 2017-2022 Allegro.pl
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,18 +16,33 @@
 
 @import '../../imports';
 
-.heatmap-legend {
-  .heatmap-legend-stripe-axis,
-  .heatmap-lower-bound-tick,
-  .heatmap-upper-bound-tick {
+.color-legend {
+  .color-legend-header {
+    @extend %module;
+    @include css-variable(color, text-light);
+    margin-bottom: 1px;
+    height: 36px;
+    padding-left: 14px;
+    padding-top: 12px;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+
+  .color-legend-stripe {
+    @extend %module;
+    margin-bottom: 1px;
+    padding: 10px 14px;
+  }
+
+  .color-legend-stripe-axis,
+  .color-lower-bound-tick,
+  .color-upper-bound-tick {
     stroke: #444;
     stroke-width: 1px;
   }
 
-  .heatmap-lower-bound-value,
-  .heatmap-upper-bound-value {
+  .color-lower-bound-value,
+  .color-upper-bound-value {
     fill: #444;
   }
 }
-
-

src/client/components/color-legend/color-legend.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2017-2022 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as d3 from "d3";
+import * as React from "react";
+import { Unary } from "../../../common/utils/functional/functional";
+import "./color-legend.scss";
+
+interface ColorLegendProps {
+  width?: number;
+  height?: number;
+  title: string;
+  formatter: Unary<number, string>;
+  colorScale: d3.scale.Linear<string, string>;
+}
+
+const leftMargin = 5;
+const topMargin = 10;
+const bottomMargin = 5;
+const tickLabelTopOffset = 4;
+const tickLabelLeftOffset = 7;
+const tickLength = 5;
+const stripeWidth = 30;
+const stripeHeight = 200;
+const panelWidth = 100;
+
+export const ColorLegend: React.SFC<ColorLegendProps> = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => {
+  const [min, max] = colorScale.domain();
+  if (isNaN(min) || isNaN(max)) return null;
+
+  const stripeLength = height - topMargin - bottomMargin;
+  const [startColor, endColor] = colorScale.range();
+
+  return <div className="color-legend">
+    <div className="color-legend-header">
+      {title}
+    </div>
+    <div className="color-legend-stripe">
+      <svg
+        className="color-legend"
+        width={`${width}px`}
+        height={`${height}px`}>
+        <defs>
+          <linearGradient id="color-stripe" gradientTransform="rotate(90)">
+            <stop offset="0%" stopColor={endColor}/>
+            <stop offset="10%" stopColor={endColor}/>
+            <stop offset="90%" stopColor={startColor}/>
+            <stop offset="100%" stopColor={startColor}/>
+          </linearGradient>
+        </defs>
+        <g transform={`translate(${leftMargin}, ${topMargin})`}>
+          <rect className="color-legend-stripe"
+            x={0}
+            y={0}
+            width={stripeWidth}
+            height={stripeLength}
+            fill="url(#color-stripe)"/>
+          <line className="color-legend-stripe-axis"
+            x1={0.5}
+            x2={0.5}
+            y1={0}
+            y2={stripeLength}/>
+          <g className="color-upper-bound">
+            <line className="color-upper-bound-tick"
+              x1={0}
+              x2={tickLength + stripeWidth}
+              y1={0.5}
+              y2={0.5}/>
+            <text className="color-upper-bound-value"
+              x={tickLabelLeftOffset + stripeWidth}
+              y={tickLabelTopOffset}>
+              {formatter(max)}
+            </text>
+          </g>
+          <g className="color-lower-bound">
+            <line className="color-lower-bound-tick"
+              x1={0}
+              x2={tickLength + stripeWidth}
+              y1={stripeLength + 0.5}
+              y2={stripeLength + 0.5}/>
+            <text className="color-lower-bound-value"
+              x={tickLabelLeftOffset + stripeWidth}
+              y={stripeLength + tickLabelTopOffset}>
+              {formatter(min)}
+            </text>
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>;
+};

src/client/components/vis-selector/vis-selector-menu.tsx

@@ -23,6 +23,7 @@ import { Fn } from "../../../common/utils/general/general";
 import { ImmutableRecord } from "../../../common/utils/immutable-utils/immutable-utils";
 import { MANIFESTS } from "../../../common/visualization-manifests";
 import { LineChartSettings } from "../../../common/visualization-manifests/line-chart/settings";
+import { ScatterplotSettings } from "../../../common/visualization-manifests/scatterplot/settings";
 import { TableSettings } from "../../../common/visualization-manifests/table/settings";
 import { STRINGS } from "../../config/constants";
 import { settingsComponent } from "../../visualization-settings/settings-component";
@@ -97,7 +98,9 @@ export class VisSelectorMenu extends React.Component<VisSelectorMenuProps, VisSe
         const LineChartSettingsComponent = settingsComponent(visualization.name);
         return <LineChartSettingsComponent onChange={this.changeSettings} settings={visualizationSettings as ImmutableRecord<LineChartSettings>}/>;
       case "scatterplot":
-        return null;
+        const ScatterplotSettingsComponent = settingsComponent(visualization.name);
+        const settings = visualizationSettings as ImmutableRecord<ScatterplotSettings>;
+        return <ScatterplotSettingsComponent onChange={this.changeSettings} settings={settings} />;
     }
   }
 

src/client/visualization-settings/scatterplot/scatterplot-settings.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2017-2022 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { VisualizationSettingsComponent } from "../../../common/models/visualization-settings/visualization-settings";
+import { ScatterplotSettings } from "../../../common/visualization-manifests/scatterplot/settings";
+import { Checkbox } from "../../components/checkbox/checkbox";
+export const ScatterplotSettingsComponent: VisualizationSettingsComponent<ScatterplotSettings> = props => {
+  const { settings, onChange } = props;
+  const toggleSummary = () => onChange(settings.update("showSummary", showSummary => !showSummary));
+  return <div className="settings-row">
+    <Checkbox
+      selected={settings.showSummary}
+      label="Show heatmap summary"
+      onClick={toggleSummary} />
+  </div>;
+};

src/client/visualization-settings/settings-component.ts

@@ -16,6 +16,7 @@
 
 import { Visualization } from "../../common/models/visualization-manifest/visualization-manifest";
 import { LineChartSettingsComponent } from "./line-chart/line-chart-settings";
+import { ScatterplotSettingsComponent } from "./scatterplot/scatterplot-settings";
 import { TableSettingsComponent } from "./table/table-settings";
 
 interface SettingsComponents {
@@ -25,7 +26,7 @@ interface SettingsComponents {
   "heatmap": null;
   "grid": null;
   "totals": null;
-  "scatterplot": null;
+  "scatterplot": typeof ScatterplotSettingsComponent;
 }
 
 const Components: SettingsComponents = {
@@ -35,7 +36,7 @@ const Components: SettingsComponents = {
   "grid": null,
   "totals": null,
   "table": TableSettingsComponent,
-  "scatterplot": null
+  "scatterplot": ScatterplotSettingsComponent
 };
 
 export function settingsComponent<T extends Visualization>(visualization: T): SettingsComponents[T] {

src/client/visualizations/heat-map/heatmap-corner.tsx

@@ -18,39 +18,26 @@ import * as React from "react";
 import { findDimensionByName } from "../../../common/models/dimension/dimensions";
 import { Essence } from "../../../common/models/essence/essence";
 import "./heatmap-corner.scss";
-import { HeatmapLegend } from "./heatmap-legend";
-import { ColorScale } from "./utils/scales";
 
 interface HeatmapCornerProps {
   essence: Essence;
   width: number;
   height: number;
-  colorScale: ColorScale;
 }
 
 const labelMargin = 20;
-const labelOffset = 40;
 // Around half of font-size with handpicked offset to accommodate rounding errors and rotation artifacts
 const rotationAxisOffset = 7;
 
-export const HeatmapCorner: React.SFC<HeatmapCornerProps> = ({ colorScale, width, height, essence }) => {
+export const HeatmapCorner: React.SFC<HeatmapCornerProps> = ({ width, height, essence }) => {
   const { dataCube, splits: { splits } } = essence;
 
   const row = splits.get(0);
   const column = splits.get(1);
   const rowTitle = row.getTitle(findDimensionByName(dataCube.dimensions, row.reference));
   const columnTitle = column.getTitle(findDimensionByName(dataCube.dimensions, column.reference));
-  const series = essence.getConcreteSeries().first();
-
-  const legendHeight = height - labelOffset;
-  const legendWidth = width - labelOffset;
 
   return <div className="heatmap-corner">
-    <HeatmapLegend
-      scale={colorScale}
-      height={legendHeight}
-      width={legendWidth}
-      series={series} />
     <div className="heatmap-corner-row-title">
       <span className="heatmap-corner-overflow-label"
             style={{ width: `${width - labelMargin}px` }}>