From a6b1adfd794a0cac99833d19110a12a4d55e4d41 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Mon, 14 Feb 2022 14:03:14 +0100 Subject: [PATCH 01/11] Add state of hovered datum | Fix react keys --- .../visualizations/scatterplot/point.tsx | 5 +- .../scatterplot/scatterplot.scss | 2 + .../scatterplot/scatterplot.tsx | 81 +++++++++++-------- 3 files changed, 55 insertions(+), 33 deletions(-) diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx index ea6e310f7..dda429c06 100644 --- a/src/client/visualizations/scatterplot/point.tsx +++ b/src/client/visualizations/scatterplot/point.tsx @@ -27,15 +27,18 @@ interface PointProps { yScale: LinearScale; xSeries: ConcreteSeries; ySeries: ConcreteSeries; + onHover(datum: Datum): void; } const POINT_RADIUS = 3; -export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries }) => { +export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, onHover }) => { const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); return ( onHover(datum)} + onMouseLeave={() => onHover(null)} cx={xScale(xValue)} cy={yScale(yValue)} r={POINT_RADIUS} diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss index 64febeea9..c94be983f 100644 --- a/src/client/visualizations/scatterplot/scatterplot.scss +++ b/src/client/visualizations/scatterplot/scatterplot.scss @@ -50,6 +50,8 @@ .point { @include css-variable(stroke, brand); @include css-variable(fill, item-dimension); + + cursor: pointer; } .axis-title { diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 1c26686b2..01953f293 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -26,7 +26,7 @@ import { import * as d3 from "d3"; import { Datum } from "plywood"; import { ConcreteSeries } from "../../../common/models/series/concrete-series"; -import { selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; +import { selectFirstSplitDataset, selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; import "./scatterplot.scss"; import { Stage } from "../../../common/models/stage/stage"; @@ -41,39 +41,56 @@ const MARGIN = 40; const X_AXIS_HEIGHT = 50; const Y_AXIS_WIDTH = 50; -const Scatterplot: React.SFC = ({ data, essence, stage }) => { - const [xSeries, ySeries] = essence.getConcreteSeries().toArray(); - const scatterplotData = selectFirstSplitDatums(data); - const xExtent = getExtent(scatterplotData, xSeries); - const yExtent = getExtent(scatterplotData, ySeries); +interface ScatterplotState { + hoveredPoint: Datum | null; +} + +export class Scatterplot extends React.Component { + state: ScatterplotState = { + hoveredPoint: null + }; + + hoverOverPoint = (datum: Datum): void => + this.setState({ hoveredPoint: datum }); - const plottingStage = calculatePlottingStage(stage); - const yScale = d3.scale.linear().domain(yExtent).nice().range([plottingStage.height, 0]); - const xScale = d3.scale.linear().domain(xExtent).nice().range([0, plottingStage.width]); - const xTicks = pickTicks(xScale, 10); - const yTicks = pickTicks(yScale, 10); + render() { + const { data, essence, stage } = this.props; + const splitKey = selectFirstSplitDataset(data).keys[0]; + const [xSeries, ySeries] = essence.getConcreteSeries().toArray(); + const scatterplotData = selectFirstSplitDatums(data); + const xExtent = getExtent(scatterplotData, xSeries); + const yExtent = getExtent(scatterplotData, ySeries); - return
- {xSeries.title()} - {ySeries.title()} - - - - - - - {scatterplotData.map(datum => ( - - ))} - - -
; -}; + const plottingStage = calculatePlottingStage(stage); + const yScale = d3.scale.linear().domain(yExtent).nice().range([plottingStage.height, 0]); + const xScale = d3.scale.linear().domain(xExtent).nice().range([0, plottingStage.width]); + const xTicks = pickTicks(xScale, 10); + const yTicks = pickTicks(yScale, 10); + + return
+ {xSeries.title()} + {ySeries.title()} + + + + + + + {scatterplotData.map(datum => { + return ( + + ); } + )} + + +
; + } +} export function ScatterplotVisualization(props: VisualizationProps) { return From e87de998ada4a2ca887c68adb12a4330a9e64691 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Mon, 14 Feb 2022 15:48:09 +0100 Subject: [PATCH 02/11] Add tooltip via TooltipWithinStage | something is not yes --- .../scatterplot/scatterplot.tsx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 01953f293..37ffb81df 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -31,7 +31,9 @@ import "./scatterplot.scss"; import { Stage } from "../../../common/models/stage/stage"; import { GridLines } from "../../components/grid-lines/grid-lines"; -import { pickTicks } from "../../utils/linear-scale/linear-scale"; +import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; +import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage"; +import { LinearScale, pickTicks } from "../../utils/linear-scale/linear-scale"; import { Point } from "./point"; import { XAxis } from "./x-axis"; import { YAxis } from "./y-axis"; @@ -70,6 +72,7 @@ export class Scatterplot extends React.Component { return
{xSeries.title()} {ySeries.title()} + @@ -130,3 +133,25 @@ function calculateYAxisStage(stage: Stage): Stage { height: stage.height }); } + +interface TooltipProps { + title: string; + datum: Datum; + stage: Stage; + xSeries: ConcreteSeries; + ySeries: ConcreteSeries; + xScale: LinearScale; + yScale: LinearScale; +} +const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xScale, yScale, title }) => { + if (!Boolean(datum)) return null; + + const xValue = xSeries.selectValue(datum); + const yValue = ySeries.selectValue(datum); + + return + {xSeries.title()} {xSeries.selectValue(datum)}, {ySeries.title()} {ySeries.selectValue(datum)}}/> + ; +}; From 46153a496d54eb709e35c47b84a8d849c0ee0dc3 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Mon, 14 Feb 2022 16:07:02 +0100 Subject: [PATCH 03/11] Add tooltip via SegmentBubble | need to add left panel and top part sizes --- .../visualizations/scatterplot/scatterplot.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 37ffb81df..e53b91e04 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -31,7 +31,7 @@ import "./scatterplot.scss"; import { Stage } from "../../../common/models/stage/stage"; import { GridLines } from "../../components/grid-lines/grid-lines"; -import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; +import { SegmentBubble, SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage"; import { LinearScale, pickTicks } from "../../utils/linear-scale/linear-scale"; import { Point } from "./point"; @@ -149,9 +149,10 @@ const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xSca const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - return - {xSeries.title()} {xSeries.selectValue(datum)}, {ySeries.title()} {ySeries.selectValue(datum)}}/> - ; + return {xSeries.title()} {xSeries.formatValue(datum)}, {ySeries.title()} {ySeries.formatValue(datum)}} + />; }; From e1a0c5471b0b6614c80e09b3b1b26ed686efa4b8 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 09:02:49 +0100 Subject: [PATCH 04/11] Add tooltip via @vx TooltipWithBounds | why u render tooltip in a different place --- .../scatterplot/scatterplot.tsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index e53b91e04..98d613203 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -29,6 +29,7 @@ import { ConcreteSeries } from "../../../common/models/series/concrete-series"; import { selectFirstSplitDataset, selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; import "./scatterplot.scss"; +import { TooltipWithBounds } from "@vx/tooltip"; import { Stage } from "../../../common/models/stage/stage"; import { GridLines } from "../../components/grid-lines/grid-lines"; import { SegmentBubble, SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; @@ -149,10 +150,20 @@ const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xSca const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - return {xSeries.title()} {xSeries.formatValue(datum)}, {ySeries.title()} {ySeries.formatValue(datum)}} - />; + // return {xSeries.title()} {xSeries.formatValue(datum)}, {ySeries.title()} {ySeries.formatValue(datum)}} + // />; + + return + {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} + /> + ; }; From 8fedc875fd17899aad9e19fbc65166e37975aab4 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 10:19:19 +0100 Subject: [PATCH 05/11] Use TooltipWithinStage and move tooltip by half its width and height --- .../scatterplot/scatterplot.scss | 4 ++- .../scatterplot/scatterplot.tsx | 26 +++++-------------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss index c94be983f..d4544d0b7 100644 --- a/src/client/visualizations/scatterplot/scatterplot.scss +++ b/src/client/visualizations/scatterplot/scatterplot.scss @@ -51,7 +51,9 @@ @include css-variable(stroke, brand); @include css-variable(fill, item-dimension); - cursor: pointer; + &:hover { + @include css-variable(fill, brand); + } } .axis-title { diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 98d613203..eb399aec9 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -29,10 +29,9 @@ import { ConcreteSeries } from "../../../common/models/series/concrete-series"; import { selectFirstSplitDataset, selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; import "./scatterplot.scss"; -import { TooltipWithBounds } from "@vx/tooltip"; import { Stage } from "../../../common/models/stage/stage"; import { GridLines } from "../../components/grid-lines/grid-lines"; -import { SegmentBubble, SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; +import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage"; import { LinearScale, pickTicks } from "../../utils/linear-scale/linear-scale"; import { Point } from "./point"; @@ -73,7 +72,7 @@ export class Scatterplot extends React.Component { return
{xSeries.title()} {ySeries.title()} - + @@ -150,20 +149,9 @@ const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xSca const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - // return {xSeries.title()} {xSeries.formatValue(datum)}, {ySeries.title()} {ySeries.formatValue(datum)}} - // />; - - return - {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} - /> - ; + return + {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} /> + ; }; From c70cf240e69343e5e1ac4153a6af5da6b6ebe868 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 12:29:36 +0100 Subject: [PATCH 06/11] Add tooltip title --- .../visualizations/scatterplot/scatterplot.scss | 4 ---- .../visualizations/scatterplot/scatterplot.tsx | 17 +++++++++++------ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss index d4544d0b7..64febeea9 100644 --- a/src/client/visualizations/scatterplot/scatterplot.scss +++ b/src/client/visualizations/scatterplot/scatterplot.scss @@ -50,10 +50,6 @@ .point { @include css-variable(stroke, brand); @include css-variable(fill, item-dimension); - - &:hover { - @include css-variable(fill, brand); - } } .axis-title { diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index eb399aec9..69d06ed6d 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -26,7 +26,7 @@ import { import * as d3 from "d3"; import { Datum } from "plywood"; import { ConcreteSeries } from "../../../common/models/series/concrete-series"; -import { selectFirstSplitDataset, selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; +import { selectFirstSplitDatums } from "../../utils/dataset/selectors/selectors"; import "./scatterplot.scss"; import { Stage } from "../../../common/models/stage/stage"; @@ -57,7 +57,7 @@ export class Scatterplot extends React.Component { render() { const { data, essence, stage } = this.props; - const splitKey = selectFirstSplitDataset(data).keys[0]; + const splitKey = essence.splits.splits.first().toKey(); const [xSeries, ySeries] = essence.getConcreteSeries().toArray(); const scatterplotData = selectFirstSplitDatums(data); const xExtent = getExtent(scatterplotData, xSeries); @@ -72,7 +72,7 @@ export class Scatterplot extends React.Component { return
{xSeries.title()} {ySeries.title()} - + @@ -135,7 +135,7 @@ function calculateYAxisStage(stage: Stage): Stage { } interface TooltipProps { - title: string; + splitKey: string; datum: Datum; stage: Stage; xSeries: ConcreteSeries; @@ -143,13 +143,18 @@ interface TooltipProps { xScale: LinearScale; yScale: LinearScale; } -const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xScale, yScale, title }) => { + +const TOOLTIP_OFFSET_Y = 50; +const TOOLTIP_OFFSET_X = 100; + +const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xScale, yScale, splitKey }) => { if (!Boolean(datum)) return null; + const title = datum[splitKey] as string; const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - return + return {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} /> From c91e2afb4da61bf02eec810e44d2de2aa8cdd677 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 12:31:44 +0100 Subject: [PATCH 07/11] Extract tooltip to separate file --- .../scatterplot/scatterplot.tsx | 32 +----------- .../visualizations/scatterplot/tooltip.tsx | 52 +++++++++++++++++++ 2 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 src/client/visualizations/scatterplot/tooltip.tsx diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 69d06ed6d..692c31723 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -31,10 +31,9 @@ import "./scatterplot.scss"; import { Stage } from "../../../common/models/stage/stage"; import { GridLines } from "../../components/grid-lines/grid-lines"; -import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; -import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage"; -import { LinearScale, pickTicks } from "../../utils/linear-scale/linear-scale"; +import { pickTicks } from "../../utils/linear-scale/linear-scale"; import { Point } from "./point"; +import { Tooltip } from "./tooltip"; import { XAxis } from "./x-axis"; import { YAxis } from "./y-axis"; @@ -133,30 +132,3 @@ function calculateYAxisStage(stage: Stage): Stage { height: stage.height }); } - -interface TooltipProps { - splitKey: string; - datum: Datum; - stage: Stage; - xSeries: ConcreteSeries; - ySeries: ConcreteSeries; - xScale: LinearScale; - yScale: LinearScale; -} - -const TOOLTIP_OFFSET_Y = 50; -const TOOLTIP_OFFSET_X = 100; - -const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xScale, yScale, splitKey }) => { - if (!Boolean(datum)) return null; - - const title = datum[splitKey] as string; - const xValue = xSeries.selectValue(datum); - const yValue = ySeries.selectValue(datum); - - return - {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} /> - ; -}; diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx new file mode 100644 index 000000000..485692773 --- /dev/null +++ b/src/client/visualizations/scatterplot/tooltip.tsx @@ -0,0 +1,52 @@ +/* + * 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 { Datum } from "plywood"; +import { ConcreteSeries } from "../../../common/models/series/concrete-series"; +import "./scatterplot.scss"; + +import { Stage } from "../../../common/models/stage/stage"; +import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble"; +import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage"; +import { LinearScale } from "../../utils/linear-scale/linear-scale"; + +interface TooltipProps { + splitKey: string; + datum: Datum; + stage: Stage; + xSeries: ConcreteSeries; + ySeries: ConcreteSeries; + xScale: LinearScale; + yScale: LinearScale; +} + +const TOOLTIP_OFFSET_Y = 50; +const TOOLTIP_OFFSET_X = 100; + +export const Tooltip: React.SFC = ({ datum, stage, xSeries, ySeries, xScale, yScale, splitKey }) => { + if (!Boolean(datum)) return null; + + const title = datum[splitKey] as string; + const xValue = xSeries.selectValue(datum); + const yValue = ySeries.selectValue(datum); + + return + {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} /> + ; +}; From ad0514d152f231e1e49fc0fe49de56f5313f9639 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 13:09:23 +0100 Subject: [PATCH 08/11] Add hover area --- .../visualizations/scatterplot/point.tsx | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx index dda429c06..dd303eec7 100644 --- a/src/client/visualizations/scatterplot/point.tsx +++ b/src/client/visualizations/scatterplot/point.tsx @@ -31,18 +31,29 @@ interface PointProps { } const POINT_RADIUS = 3; +const HOVER_AREA_RADIUS = 9; export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, onHover }) => { const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - return ( onHover(datum)} - onMouseLeave={() => onHover(null)} - cx={xScale(xValue)} - cy={yScale(yValue)} - r={POINT_RADIUS} - className="point" - /> + return ( + <> + + onHover(datum)} + onMouseLeave={() => onHover(null)} + cx={xScale(xValue)} + cy={yScale(yValue)} + r={HOVER_AREA_RADIUS} + stroke="none" + fill="transparent" + /> + ); }; From 73fd3a3fd88bc7c7cb2b0eb89901b272937f16ae Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Tue, 15 Feb 2022 14:45:25 +0100 Subject: [PATCH 09/11] Style tooltip --- src/client/visualizations/scatterplot/scatterplot.scss | 8 ++++++++ src/client/visualizations/scatterplot/tooltip.tsx | 5 ++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/client/visualizations/scatterplot/scatterplot.scss b/src/client/visualizations/scatterplot/scatterplot.scss index 64febeea9..7c3d0fbc5 100644 --- a/src/client/visualizations/scatterplot/scatterplot.scss +++ b/src/client/visualizations/scatterplot/scatterplot.scss @@ -56,4 +56,12 @@ position: absolute; font-weight: $bold; } + + .segment-bubble-text { + .content { + strong { + font-weight: $bold; + } + } + } } diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx index 485692773..435671229 100644 --- a/src/client/visualizations/scatterplot/tooltip.tsx +++ b/src/client/visualizations/scatterplot/tooltip.tsx @@ -47,6 +47,9 @@ export const Tooltip: React.SFC = ({ datum, stage, xSeries, ySerie return {xSeries.title()} {xSeries.formatValue(datum)},
{ySeries.title()} {ySeries.formatValue(datum)}} /> + content={ + {xSeries.title()} {xSeries.formatValue(datum)}
+ {ySeries.title()} {ySeries.formatValue(datum)} + } /> ; }; From cd9acb2b79ae543568c4ae990a925674a14ca488 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Wed, 16 Feb 2022 09:45:02 +0100 Subject: [PATCH 10/11] Adjust hover radius --- src/client/visualizations/scatterplot/point.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx index dd303eec7..f7a4da190 100644 --- a/src/client/visualizations/scatterplot/point.tsx +++ b/src/client/visualizations/scatterplot/point.tsx @@ -31,7 +31,7 @@ interface PointProps { } const POINT_RADIUS = 3; -const HOVER_AREA_RADIUS = 9; +const HOVER_AREA_RADIUS = 6; export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, onHover }) => { const xValue = xSeries.selectValue(datum); From e56f2d9b7de6da9cf946fee1fab5a61900521aa5 Mon Sep 17 00:00:00 2001 From: Katarzyna Zadurska Date: Wed, 16 Feb 2022 11:22:29 +0100 Subject: [PATCH 11/11] Set and reset hover --- src/client/visualizations/scatterplot/point.tsx | 9 +++++---- .../visualizations/scatterplot/scatterplot.tsx | 15 +++++++++++++-- src/client/visualizations/scatterplot/tooltip.tsx | 2 +- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/client/visualizations/scatterplot/point.tsx b/src/client/visualizations/scatterplot/point.tsx index f7a4da190..1600ac5d8 100644 --- a/src/client/visualizations/scatterplot/point.tsx +++ b/src/client/visualizations/scatterplot/point.tsx @@ -27,13 +27,14 @@ interface PointProps { yScale: LinearScale; xSeries: ConcreteSeries; ySeries: ConcreteSeries; - onHover(datum: Datum): void; + setHover(datum: Datum): void; + resetHover(): void; } const POINT_RADIUS = 3; const HOVER_AREA_RADIUS = 6; -export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, onHover }) => { +export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, ySeries, setHover, resetHover }) => { const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); @@ -46,8 +47,8 @@ export const Point: React.SFC = ({ datum, xScale, yScale, xSeries, y className="point" /> onHover(datum)} - onMouseLeave={() => onHover(null)} + onMouseEnter={() => setHover(datum)} + onMouseLeave={() => resetHover()} cx={xScale(xValue)} cy={yScale(yValue)} r={HOVER_AREA_RADIUS} diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx index 692c31723..55d6a8552 100644 --- a/src/client/visualizations/scatterplot/scatterplot.tsx +++ b/src/client/visualizations/scatterplot/scatterplot.tsx @@ -51,9 +51,12 @@ export class Scatterplot extends React.Component { hoveredPoint: null }; - hoverOverPoint = (datum: Datum): void => + setPointHover = (datum: Datum): void => this.setState({ hoveredPoint: datum }); + resetPointHover = (): void => + this.setState({ hoveredPoint: null }); + render() { const { data, essence, stage } = this.props; const splitKey = essence.splits.splits.first().toKey(); @@ -85,7 +88,15 @@ export class Scatterplot extends React.Component { {scatterplotData.map(datum => { return ( - + ); } )} diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx index 435671229..32fe52e3a 100644 --- a/src/client/visualizations/scatterplot/tooltip.tsx +++ b/src/client/visualizations/scatterplot/tooltip.tsx @@ -44,7 +44,7 @@ export const Tooltip: React.SFC = ({ datum, stage, xSeries, ySerie const xValue = xSeries.selectValue(datum); const yValue = ySeries.selectValue(datum); - return + return