From 0f19008405ebeb09f3d3e3a5e0455be4a300ca84 Mon Sep 17 00:00:00 2001 From: shahanneda Date: Tue, 27 Dec 2022 02:59:42 -0500 Subject: [PATCH] Updated other graphs --- components/BarGraph.tsx | 28 +++++++--------------------- components/Boxplot.tsx | 12 +++--------- components/GroupedBarGraph.tsx | 14 +++----------- components/LineGraph.tsx | 16 ++++------------ components/PieChart.tsx | 16 ++++------------ components/StackedBarGraph.tsx | 17 +++++++---------- pages/samplePage.tsx | 13 +++++++++++-- 7 files changed, 39 insertions(+), 77 deletions(-) diff --git a/components/BarGraph.tsx b/components/BarGraph.tsx index a98acf8..51ad99b 100644 --- a/components/BarGraph.tsx +++ b/components/BarGraph.tsx @@ -1,17 +1,15 @@ import { AxisBottom, AxisLeft } from "@visx/axis"; import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom"; import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft"; -import { localPoint } from "@visx/event"; import { GridColumns, GridRows } from "@visx/grid"; import { Group } from "@visx/group"; -import { Point } from "@visx/point"; import { scaleBand, scaleLinear } from "@visx/scale"; import { Bar } from "@visx/shape"; import { withTooltip } from "@visx/tooltip"; import React from "react"; import { Color } from "utils/Color"; -import { TooltipWrapper } from "./TooltipWrapper"; +import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper"; import styles from "./BarGraph.module.css"; @@ -154,17 +152,11 @@ export const BarGraphHorizontal = withTooltip( { - const eventSvgCoords = localPoint( - // ownerSVGElement is given by visx docs but not recognized by typescript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - e.target.ownerSVGElement as Element, - e - ) as Point; + const tooltipPos = getTooltipPosition(e); showTooltip({ tooltipData: getValue(d).toString(), - tooltipTop: eventSvgCoords.y, - tooltipLeft: eventSvgCoords.x, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} onMouseOut={hideTooltip} @@ -327,17 +319,11 @@ export const BarGraphVertical = withTooltip( { - const eventSvgCoords = localPoint( - // ownerSVGElement is given by visx docs but not recognized by typescript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - e.target.ownerSVGElement as Element, - e - ) as Point; + const tooltipPos = getTooltipPosition(e); showTooltip({ tooltipData: getValue(d).toString(), - tooltipTop: eventSvgCoords.y, - tooltipLeft: eventSvgCoords.x, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} onMouseOut={hideTooltip} diff --git a/components/Boxplot.tsx b/components/Boxplot.tsx index 17fb477..87a2fc4 100644 --- a/components/Boxplot.tsx +++ b/components/Boxplot.tsx @@ -270,22 +270,16 @@ export const BoxPlot = withTooltip( valueScale={yScale} minProps={{ onMouseMove: mouseOverEventHandler(d), - onMouseLeave: () => { - hideTooltip(); - }, + onMouseLeave: hideTooltip, }} maxProps={{ onMouseMove: mouseOverEventHandler(d), - onMouseLeave: () => { - hideTooltip(); - }, + onMouseLeave: hideTooltip, }} boxProps={{ onMouseMove: mouseOverEventHandler(d), strokeWidth: 0, - onMouseLeave: () => { - hideTooltip(); - }, + onMouseLeave: hideTooltip, }} medianProps={{ style: { diff --git a/components/GroupedBarGraph.tsx b/components/GroupedBarGraph.tsx index bfb61e8..4ea148a 100644 --- a/components/GroupedBarGraph.tsx +++ b/components/GroupedBarGraph.tsx @@ -1,11 +1,9 @@ import { AxisBottom, AxisLeft } from "@visx/axis"; import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom"; import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft"; -import { localPoint } from "@visx/event"; import { GridColumns, GridRows } from "@visx/grid"; import { Group } from "@visx/group"; import { LegendOrdinal } from "@visx/legend"; -import { Point } from "@visx/point"; import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale"; import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape"; import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types"; @@ -499,17 +497,11 @@ export const GroupedBarGraphHorizontal = withTooltip< {barGroup.bars.map((bar) => ( { - const eventSvgCoords = localPoint( - // ownerSVGElement is given by visx docs but not recognized by typescript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - e.target.ownerSVGElement as Element, - e - ) as Point; + const tooltipPos = getTooltipPosition(e); showTooltip({ tooltipData: bar.value.toString(), - tooltipTop: eventSvgCoords.y, - tooltipLeft: eventSvgCoords.x, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} onMouseOut={hideTooltip} diff --git a/components/LineGraph.tsx b/components/LineGraph.tsx index 72edb64..28c2ab2 100644 --- a/components/LineGraph.tsx +++ b/components/LineGraph.tsx @@ -1,18 +1,16 @@ import { AxisBottom, AxisLeft } from "@visx/axis"; import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom"; import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft"; -import { localPoint } from "@visx/event"; import { GridColumns, GridRows } from "@visx/grid"; import { Group } from "@visx/group"; import { LegendOrdinal } from "@visx/legend"; -import { Point } from "@visx/point"; import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale"; import { LinePath } from "@visx/shape"; import { withTooltip } from "@visx/tooltip"; import React from "react"; import { Color } from "utils/Color"; -import { TooltipWrapper } from "./TooltipWrapper"; +import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper"; import styles from "./LineGraph.module.css"; @@ -195,17 +193,11 @@ export const LineGraph = withTooltip( { - const eventSvgCoords = localPoint( - // ownerSVGElement is given by visx docs but not recognized by typescript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - e.target.ownerSVGElement as Element, - e - ) as Point; + const tooltipPos = getTooltipPosition(e); showTooltip({ tooltipData: data.lines[i].label, - tooltipTop: eventSvgCoords.y, - tooltipLeft: eventSvgCoords.x, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} onMouseOut={hideTooltip} diff --git a/components/PieChart.tsx b/components/PieChart.tsx index 765e36e..f5041be 100644 --- a/components/PieChart.tsx +++ b/components/PieChart.tsx @@ -1,12 +1,10 @@ -import { localPoint } from "@visx/event"; import { Group } from "@visx/group"; -import { Point } from "@visx/point"; import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie"; import { Text } from "@visx/text"; import { withTooltip } from "@visx/tooltip"; import React from "react"; -import { TooltipWrapper } from "./TooltipWrapper"; +import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper"; import styles from "./PieChart.module.css"; @@ -80,17 +78,11 @@ export const PieChart = withTooltip( > { - const eventSvgCoords = localPoint( - // ownerSVGElement is given by visx docs but not recognized by typescript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - e.target.ownerSVGElement as Element, - e - ) as Point; + const tooltipPos = getTooltipPosition(e); showTooltip({ tooltipData: `${arc.data.category}: ${arc.data.value}%`, - tooltipTop: eventSvgCoords.y, - tooltipLeft: eventSvgCoords.x, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} onMouseOut={hideTooltip} diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx index c9f77fd..d39a351 100644 --- a/components/StackedBarGraph.tsx +++ b/components/StackedBarGraph.tsx @@ -1,5 +1,4 @@ import { AxisLeft, AxisBottom } from "@visx/axis"; -import { localPoint } from "@visx/event"; import { GridRows, GridColumns } from "@visx/grid"; import { Group } from "@visx/group"; import { LegendOrdinal } from "@visx/legend"; @@ -12,7 +11,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti import React from "react"; import { Color } from "utils/Color"; -import { TooltipWrapper } from "./TooltipWrapper"; +import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper"; import styles from "./StackedBarGraph.module.css"; @@ -194,12 +193,11 @@ export const StackedBarGraphVertical = withTooltip< }} onMouseMove={(event) => { if (tooltipTimeout) clearTimeout(tooltipTimeout); - const eventSvgCoords = localPoint(event); - const left = bar.x + bar.width / 2; + const tooltipPos = getTooltipPosition(event); showTooltip({ tooltipData: bar, - tooltipTop: eventSvgCoords?.y, - tooltipLeft: left, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} /> @@ -390,12 +388,11 @@ export const StackedBarGraphHorizontal = withTooltip< }} onMouseMove={(event) => { if (tooltipTimeout) clearTimeout(tooltipTimeout); - const eventSvgCoords = localPoint(event); - const left = bar.x + bar.width / 2; + const tooltipPos = getTooltipPosition(event); showTooltip({ tooltipData: bar, - tooltipTop: eventSvgCoords?.y, - tooltipLeft: left, + tooltipLeft: tooltipPos.x, + tooltipTop: tooltipPos.y, }); }} /> diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx index 8f4cde3..504e666 100644 --- a/pages/samplePage.tsx +++ b/pages/samplePage.tsx @@ -201,6 +201,7 @@ export default function SamplePage() { heading="What program are you in?" bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics." align="center" + noBackground > ({ @@ -270,7 +271,11 @@ export default function SamplePage() { height={defaultGraphHeight} /> - + ({ text: word.key, @@ -317,7 +322,11 @@ export default function SamplePage() { margin={defaultHorizontalBarGraphMargin} /> - +