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 { AxisBottom, AxisLeft } from "@visx/axis";
|
||||||
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
||||||
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
||||||
import { localPoint } from "@visx/event";
|
|
||||||
import { GridColumns, GridRows } from "@visx/grid";
|
import { GridColumns, GridRows } from "@visx/grid";
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { Point } from "@visx/point";
|
|
||||||
import { scaleBand, scaleLinear } from "@visx/scale";
|
import { scaleBand, scaleLinear } from "@visx/scale";
|
||||||
import { Bar } from "@visx/shape";
|
import { Bar } from "@visx/shape";
|
||||||
import { withTooltip } from "@visx/tooltip";
|
import { withTooltip } from "@visx/tooltip";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Color } from "utils/Color";
|
import { Color } from "utils/Color";
|
||||||
|
|
||||||
import { TooltipWrapper } from "./TooltipWrapper";
|
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
|
||||||
|
|
||||||
import styles from "./BarGraph.module.css";
|
import styles from "./BarGraph.module.css";
|
||||||
|
|
||||||
|
@ -154,17 +152,11 @@ export const BarGraphHorizontal = withTooltip<BarGraphProps, TooltipData>(
|
||||||
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
||||||
<Bar
|
<Bar
|
||||||
onMouseMove={(e) => {
|
onMouseMove={(e) => {
|
||||||
const eventSvgCoords = localPoint(
|
const tooltipPos = getTooltipPosition(e);
|
||||||
// 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;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: getValue(d).toString(),
|
tooltipData: getValue(d).toString(),
|
||||||
tooltipTop: eventSvgCoords.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: eventSvgCoords.x,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
onMouseOut={hideTooltip}
|
onMouseOut={hideTooltip}
|
||||||
|
@ -327,17 +319,11 @@ export const BarGraphVertical = withTooltip<BarGraphProps, TooltipData>(
|
||||||
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
<Group className={styles.barGroup} key={`bar-${barName}`}>
|
||||||
<Bar
|
<Bar
|
||||||
onMouseMove={(e) => {
|
onMouseMove={(e) => {
|
||||||
const eventSvgCoords = localPoint(
|
const tooltipPos = getTooltipPosition(e);
|
||||||
// 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;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: getValue(d).toString(),
|
tooltipData: getValue(d).toString(),
|
||||||
tooltipTop: eventSvgCoords.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: eventSvgCoords.x,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
onMouseOut={hideTooltip}
|
onMouseOut={hideTooltip}
|
||||||
|
|
|
@ -270,22 +270,16 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
||||||
valueScale={yScale}
|
valueScale={yScale}
|
||||||
minProps={{
|
minProps={{
|
||||||
onMouseMove: mouseOverEventHandler(d),
|
onMouseMove: mouseOverEventHandler(d),
|
||||||
onMouseLeave: () => {
|
onMouseLeave: hideTooltip,
|
||||||
hideTooltip();
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
maxProps={{
|
maxProps={{
|
||||||
onMouseMove: mouseOverEventHandler(d),
|
onMouseMove: mouseOverEventHandler(d),
|
||||||
onMouseLeave: () => {
|
onMouseLeave: hideTooltip,
|
||||||
hideTooltip();
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
boxProps={{
|
boxProps={{
|
||||||
onMouseMove: mouseOverEventHandler(d),
|
onMouseMove: mouseOverEventHandler(d),
|
||||||
strokeWidth: 0,
|
strokeWidth: 0,
|
||||||
onMouseLeave: () => {
|
onMouseLeave: hideTooltip,
|
||||||
hideTooltip();
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
medianProps={{
|
medianProps={{
|
||||||
style: {
|
style: {
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
import { AxisBottom, AxisLeft } from "@visx/axis";
|
import { AxisBottom, AxisLeft } from "@visx/axis";
|
||||||
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
||||||
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
||||||
import { localPoint } from "@visx/event";
|
|
||||||
import { GridColumns, GridRows } from "@visx/grid";
|
import { GridColumns, GridRows } from "@visx/grid";
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { LegendOrdinal } from "@visx/legend";
|
import { LegendOrdinal } from "@visx/legend";
|
||||||
import { Point } from "@visx/point";
|
|
||||||
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
|
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
|
||||||
import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
|
import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
|
||||||
import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
|
import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
|
||||||
|
@ -499,17 +497,11 @@ export const GroupedBarGraphHorizontal = withTooltip<
|
||||||
{barGroup.bars.map((bar) => (
|
{barGroup.bars.map((bar) => (
|
||||||
<HoverableBar
|
<HoverableBar
|
||||||
onMouseMove={(e) => {
|
onMouseMove={(e) => {
|
||||||
const eventSvgCoords = localPoint(
|
const tooltipPos = getTooltipPosition(e);
|
||||||
// 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;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: bar.value.toString(),
|
tooltipData: bar.value.toString(),
|
||||||
tooltipTop: eventSvgCoords.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: eventSvgCoords.x,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
onMouseOut={hideTooltip}
|
onMouseOut={hideTooltip}
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
import { AxisBottom, AxisLeft } from "@visx/axis";
|
import { AxisBottom, AxisLeft } from "@visx/axis";
|
||||||
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
|
||||||
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
|
||||||
import { localPoint } from "@visx/event";
|
|
||||||
import { GridColumns, GridRows } from "@visx/grid";
|
import { GridColumns, GridRows } from "@visx/grid";
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { LegendOrdinal } from "@visx/legend";
|
import { LegendOrdinal } from "@visx/legend";
|
||||||
import { Point } from "@visx/point";
|
|
||||||
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
|
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
|
||||||
import { LinePath } from "@visx/shape";
|
import { LinePath } from "@visx/shape";
|
||||||
import { withTooltip } from "@visx/tooltip";
|
import { withTooltip } from "@visx/tooltip";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Color } from "utils/Color";
|
import { Color } from "utils/Color";
|
||||||
|
|
||||||
import { TooltipWrapper } from "./TooltipWrapper";
|
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
|
||||||
|
|
||||||
import styles from "./LineGraph.module.css";
|
import styles from "./LineGraph.module.css";
|
||||||
|
|
||||||
|
@ -195,17 +193,11 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
|
||||||
<Group key={`line-${i}`}>
|
<Group key={`line-${i}`}>
|
||||||
<LinePath
|
<LinePath
|
||||||
onMouseMove={(e) => {
|
onMouseMove={(e) => {
|
||||||
const eventSvgCoords = localPoint(
|
const tooltipPos = getTooltipPosition(e);
|
||||||
// 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;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: data.lines[i].label,
|
tooltipData: data.lines[i].label,
|
||||||
tooltipTop: eventSvgCoords.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: eventSvgCoords.x,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
onMouseOut={hideTooltip}
|
onMouseOut={hideTooltip}
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
import { localPoint } from "@visx/event";
|
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { Point } from "@visx/point";
|
|
||||||
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
|
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
|
||||||
import { Text } from "@visx/text";
|
import { Text } from "@visx/text";
|
||||||
import { withTooltip } from "@visx/tooltip";
|
import { withTooltip } from "@visx/tooltip";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { TooltipWrapper } from "./TooltipWrapper";
|
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
|
||||||
|
|
||||||
import styles from "./PieChart.module.css";
|
import styles from "./PieChart.module.css";
|
||||||
|
|
||||||
|
@ -80,17 +78,11 @@ export const PieChart = withTooltip<PieChartProps>(
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
onMouseMove={(e) => {
|
onMouseMove={(e) => {
|
||||||
const eventSvgCoords = localPoint(
|
const tooltipPos = getTooltipPosition(e);
|
||||||
// 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;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: `${arc.data.category}: ${arc.data.value}%`,
|
tooltipData: `${arc.data.category}: ${arc.data.value}%`,
|
||||||
tooltipTop: eventSvgCoords.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: eventSvgCoords.x,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
onMouseOut={hideTooltip}
|
onMouseOut={hideTooltip}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { AxisLeft, AxisBottom } from "@visx/axis";
|
import { AxisLeft, AxisBottom } from "@visx/axis";
|
||||||
import { localPoint } from "@visx/event";
|
|
||||||
import { GridRows, GridColumns } from "@visx/grid";
|
import { GridRows, GridColumns } from "@visx/grid";
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { LegendOrdinal } from "@visx/legend";
|
import { LegendOrdinal } from "@visx/legend";
|
||||||
|
@ -12,7 +11,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Color } from "utils/Color";
|
import { Color } from "utils/Color";
|
||||||
|
|
||||||
import { TooltipWrapper } from "./TooltipWrapper";
|
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
|
||||||
|
|
||||||
import styles from "./StackedBarGraph.module.css";
|
import styles from "./StackedBarGraph.module.css";
|
||||||
|
|
||||||
|
@ -194,12 +193,11 @@ export const StackedBarGraphVertical = withTooltip<
|
||||||
}}
|
}}
|
||||||
onMouseMove={(event) => {
|
onMouseMove={(event) => {
|
||||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||||
const eventSvgCoords = localPoint(event);
|
const tooltipPos = getTooltipPosition(event);
|
||||||
const left = bar.x + bar.width / 2;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: bar,
|
tooltipData: bar,
|
||||||
tooltipTop: eventSvgCoords?.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: left,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -390,12 +388,11 @@ export const StackedBarGraphHorizontal = withTooltip<
|
||||||
}}
|
}}
|
||||||
onMouseMove={(event) => {
|
onMouseMove={(event) => {
|
||||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||||
const eventSvgCoords = localPoint(event);
|
const tooltipPos = getTooltipPosition(event);
|
||||||
const left = bar.x + bar.width / 2;
|
|
||||||
showTooltip({
|
showTooltip({
|
||||||
tooltipData: bar,
|
tooltipData: bar,
|
||||||
tooltipTop: eventSvgCoords?.y,
|
tooltipLeft: tooltipPos.x,
|
||||||
tooltipLeft: left,
|
tooltipTop: tooltipPos.y,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -201,6 +201,7 @@ export default function SamplePage() {
|
||||||
heading="What program are you in?"
|
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."
|
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"
|
align="center"
|
||||||
|
noBackground
|
||||||
>
|
>
|
||||||
<WordCloud
|
<WordCloud
|
||||||
data={moreMockCategoricalData.map((word) => ({
|
data={moreMockCategoricalData.map((word) => ({
|
||||||
|
@ -270,7 +271,11 @@ export default function SamplePage() {
|
||||||
height={defaultGraphHeight}
|
height={defaultGraphHeight}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
<ComponentWrapper heading="What program are you in?" align="center">
|
<ComponentWrapper
|
||||||
|
heading="What program are you in?"
|
||||||
|
align="center"
|
||||||
|
noBackground
|
||||||
|
>
|
||||||
<WordCloud
|
<WordCloud
|
||||||
data={moreMockCategoricalData.map((word) => ({
|
data={moreMockCategoricalData.map((word) => ({
|
||||||
text: word.key,
|
text: word.key,
|
||||||
|
@ -317,7 +322,11 @@ export default function SamplePage() {
|
||||||
margin={defaultHorizontalBarGraphMargin}
|
margin={defaultHorizontalBarGraphMargin}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
<ComponentWrapper heading="What program are you in?" align="center">
|
<ComponentWrapper
|
||||||
|
heading="What program are you in?"
|
||||||
|
align="center"
|
||||||
|
noBackground
|
||||||
|
>
|
||||||
<BoxPlot
|
<BoxPlot
|
||||||
width={600}
|
width={600}
|
||||||
height={400}
|
height={400}
|
||||||
|
|
Loading…
Reference in New Issue