Updated other graphs
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
bd757f56e9
commit
0f19008405
|
|
@ -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<BarGraphProps, TooltipData>(
|
|||
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
||||
<Bar
|
||||
onMouseMove={(e) => {
|
||||
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<BarGraphProps, TooltipData>(
|
|||
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
||||
<Bar
|
||||
onMouseMove={(e) => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -270,22 +270,16 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
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: {
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<HoverableBar
|
||||
onMouseMove={(e) => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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<LineGraphProps, TooltipData>(
|
|||
<Group key={`line-${i}`}>
|
||||
<LinePath
|
||||
onMouseMove={(e) => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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<PieChartProps>(
|
|||
>
|
||||
<path
|
||||
onMouseMove={(e) => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
<WordCloud
|
||||
data={moreMockCategoricalData.map((word) => ({
|
||||
|
|
@ -270,7 +271,11 @@ export default function SamplePage() {
|
|||
height={defaultGraphHeight}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
<ComponentWrapper heading="What program are you in?" align="center">
|
||||
<ComponentWrapper
|
||||
heading="What program are you in?"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={moreMockCategoricalData.map((word) => ({
|
||||
text: word.key,
|
||||
|
|
@ -317,7 +322,11 @@ export default function SamplePage() {
|
|||
margin={defaultHorizontalBarGraphMargin}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
<ComponentWrapper heading="What program are you in?" align="center">
|
||||
<ComponentWrapper
|
||||
heading="What program are you in?"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<BoxPlot
|
||||
width={600}
|
||||
height={400}
|
||||
|
|
|
|||
Loading…
Reference in New Issue