vx replaced with visx

CONTRIBUTING.md

@@ -115,7 +115,7 @@ If you want to go straight to rendering a legend, check if `ColorSwabs` or `Colo
 
 _[Example code for scatterplot](https://github.com/allegro/turnilo/pull/834/files)_
 
-Currently Turnilo supports adding tooltips to visualizations in two ways (please disregard the `TooltipWithBounds` approach from the `@vx/tooltip` package). You will probably want to use `TooltipWithinStage`, where you can pass `stage` and the position to render the tooltip. Use `SegmentBubbleContent` to render content, like so:
+Currently Turnilo supports adding tooltips to visualizations in two ways (please disregard the `TooltipWithBounds` approach from the `@visx/tooltip` package). You will probably want to use `TooltipWithinStage`, where you can pass `stage` and the position to render the tooltip. Use `SegmentBubbleContent` to render content, like so:
 
 ```
 <TooltipWithinStage left={leftPostion} top={topPosition} stage={stage}>

package.json

@@ -54,9 +54,9 @@
   },
   "dependencies": {
     "@sentry/browser": "5.0.6",
-    "@vx/heatmap": "0.0.183",
-    "@vx/scale": "0.0.182",
-    "@vx/tooltip": "0.0.184",
+    "@visx/heatmap": "1.0.0",
+    "@visx/scale": "1.0.0",
+    "@visx/tooltip": "1.0.0",
     "axios": "0.21.2",
     "body-parser": "1.18.2",
     "chronoshift": "0.9.6",

src/client/index.d.ts

@@ -14,61 +14,6 @@
  * limitations under the License.
  */
 
-declare module "@vx/*";
-
-declare module "@vx/heatmap" {
-
-  import { ColorScale, LinearScale } from "./visualizations/heat-map/utils/scales";
-
-  interface Bin {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    color: string;
-    opacity: number;
-    row: number;
-    column: number;
-  }
-
-  export interface HeatmapRectProps {
-    bins(rawDataPoint: any): any;
-    count(rawDataPoint: any): number;
-    data: any[];
-    xScale: LinearScale;
-    yScale: LinearScale;
-    colorScale: ColorScale;
-    binWidth: number;
-    binHeight: number;
-    gap: number;
-    children?: (heatmap: Bin[][]) => React.ReactNode;
-  }
-
-  export class HeatmapRect extends React.Component<HeatmapRectProps> {
-
-  }
-}
-
-declare module "@vx/scale" {
-
-  interface ScaleLinearOptions<Range, Output> {
-    range: [Range, Range];
-    domain: [number, number];
-  }
-
-  export const scaleLinear: <Range = number, Output = number>(options: ScaleLinearOptions<Range, Output>) => d3.ScaleLinear<Range, Output>;
-}
-
-declare module "@vx/tooltip" {
-  interface TooltipWithBoundsProps {
-    key: number | string;
-    top: number;
-    left: number;
-    children: React.ReactNode;
-  }
-  const TooltipWithBounds: React.ComponentType<TooltipWithBoundsProps>;
-}
-
 declare module "react-syntax-highlighter/src/light" {
   export { default } from "react-syntax-highlighter/dist/esm/light";
 }

src/client/visualizations/heat-map/heatmap-hover-tooltip.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TooltipWithBounds } from "@vx/tooltip";
+import { TooltipWithBounds } from "@visx/tooltip";
 import { Datum } from "plywood";
 import React from "react";
 import { Essence } from "../../../common/models/essence/essence";

src/client/visualizations/heat-map/heatmap-rectangle-row.tsx

@@ -15,11 +15,12 @@
  * limitations under the License.
  */
 
-import { Bin } from "@vx/heatmap";
+import { RectCell } from "@visx/heatmap/lib/heatmaps/HeatmapRect";
+import { Datum } from "plywood";
 import React from "react";
 
 interface HeatMapRectangleRowProps {
-  bins: Bin[];
+  bins: Array<RectCell<Datum, Datum>>;
 }
 
 export class HeatMapRectangleRow extends React.PureComponent<HeatMapRectangleRowProps> {

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { HeatmapRect } from "@vx/heatmap";
+import { HeatmapRect } from "@visx/heatmap";
 import { Dataset, Datum } from "plywood";
 import React from "react";
 import { ConcreteSeries } from "../../../common/models/series/concrete-series";

src/client/visualizations/heat-map/utils/get-hover-position.mocha.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { scaleLinear } from "@vx/scale";
+import { scaleLinear } from "@visx/scale";
 import { expect } from "chai";
 import getHoverPosition from "./get-hover-position";
 

src/client/visualizations/heat-map/utils/scales.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { scaleLinear } from "@vx/scale";
+import { scaleLinear } from "@visx/scale";
 import * as d3 from "d3";
 import { Datum } from "plywood";
 import { ConcreteSeries } from "../../../../common/models/series/concrete-series";
@@ -58,7 +58,7 @@ export default function scales(dataset: Datum[], tileSize: number, mainColor: st
   const colorMin = d3.min(dataset, d => d3.min(nestedDataset(d), select));
   const colorMax = d3.max(dataset, d => d3.max(nestedDataset(d), select));
 
-  const color = scaleLinear<string, string>({
+  const color = scaleLinear<string>({
     range: [white, mainColor],
     domain: [Math.min(colorMin, 0), colorMax]
   });