From f802dbfd8e731cc0466c656d4e164842426499d4 Mon Sep 17 00:00:00 2001 From: Rebecca-Chou Date: Tue, 20 Sep 2022 16:13:52 -0400 Subject: [PATCH] resolve lint --- .eslintrc.js | 7 +- components/LineGraph.module.css | 0 components/LineGraph.tsx | 167 -------------------------------- pages/playground.tsx | 1 - 4 files changed, 6 insertions(+), 169 deletions(-) delete mode 100644 components/LineGraph.module.css delete mode 100644 components/LineGraph.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 7beb879..55064d6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -17,7 +17,12 @@ module.exports = { ], plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"], rules: { - "prettier/prettier": "error", + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + }, + ], "import/first": "error", "import/order": [ diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/components/LineGraph.tsx b/components/LineGraph.tsx deleted file mode 100644 index d39b4de..0000000 --- a/components/LineGraph.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { AxisBottom, AxisLeft } from "@visx/axis"; -import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom"; -import * as allCurves from "@visx/curve"; -import { Group } from "@visx/group"; -import { scaleBand, scaleLinear } from "@visx/scale"; -import { LinePath } from "@visx/shape"; -import { extent, max } from "d3-array"; -import { Color } from "utils/Color"; - -type CurveType = keyof typeof allCurves; - -const curveTypes = Object.keys(allCurves); -const lineCount = 2; -// const series = new Array(lineCount).fill(null).map((_, i) => -// // vary each series value deterministically -// generateDateValue(25, /* seed= */ i / 72).sort( -// (a: DateValue, b: DateValue) => a.date.getTime() - b.date.getTime() -// ) -// ); - -interface LineData { - label: string; - yValues: number[]; -} - -interface PointData { - x: string; - y: number; -} - -interface LineGraphData { - xValues: string[]; - lines: LineData[]; -} - -interface LineGraphProps { - data: LineGraphData; - /** Width of the entire graph, in pixels. */ - width: number; - /** Height of the entire graph, in pixels. */ - height: number; - /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */ - margin: { - top: number; - bottom: number; - left: number; - right: number; - }; - className?: string; - /** Font size of the category tick labels, in pixels. Default is 16px. */ - xTickLabelSize?: number; - /** Font size of the value tick labels, in pixels. Default is 16px. */ - yTickLabelSize?: number; - /** Font size of the value that appears when hovering over a bar, in pixels. */ - hoverLabelSize?: number; - /** Label text for the category axis. */ - xAxisLabel?: string; - /** Font size of the label for the cateogry axis, in pixels. */ - xAxisLabelSize?: number; - /** Controls the distance between the category axis label and the category axis. */ - xAxisLabelOffset?: number; - /** Label text for the value axis. */ - yAxisLabel?: string; - /** Font size of the label for the value axis, in pixels. */ - yAxisLabelSize?: number; - /** Controls the distance between the value axis label and the value axis. */ - yAxisLabelOffset?: number; -} - -const DEFAULT_LABEL_SIZE = 16; - -export function LineGraph(props: LineGraphProps) { - const { - width, - height, - margin, - data, - className, - xTickLabelSize = DEFAULT_LABEL_SIZE, - yTickLabelSize = DEFAULT_LABEL_SIZE, - hoverLabelSize, - xAxisLabel, - xAxisLabelSize = DEFAULT_LABEL_SIZE, - xAxisLabelOffset = 0, - yAxisLabel, - yAxisLabelSize = DEFAULT_LABEL_SIZE, - yAxisLabelOffset = 0, - } = props; - - const curveType = "curveLinear"; - const svgHeight = height - 40; - //const allData = data.reduce((rec, d) => rec.concat(d), []); - //console.log(allData); - - // update scale output ranges - - const yMax = height - margin.top - margin.bottom; - const xMax = width - margin.left - margin.right; - - const actualData = data.lines.map((line) => { - return line.yValues.map((val, idx) => { - return { x: data.xValues[idx], y: val }; - }); - }); - - // data accessors - const getX = (d: PointData) => d.x; - const getY = (d: PointData) => d.y; - - // scales - const xScale = scaleBand({ - range: [0, xMax], - domain: data.xValues, - }); - const yScale = scaleLinear({ - range: [0, yMax], - nice: true, - domain: [0, 100], - }); - - return ( - - - {actualData.map((lineData, i) => { - console.log(lineData); - const even = i % 2 === 0; - return ( - - xScale(getX(d)) ?? 0} - y={(d) => yScale(getY(d)) ?? 0} - stroke={even ? Color.primaryAccent : Color.secondaryAccent} - strokeWidth={2} - strokeOpacity={2} - /> - - ); - })} - - { - return { - ...bottomTickLabelProps(), - //className: styles.tickLabel, - dy: "-0.25rem", - fontSize: `${xTickLabelSize / 16}rem`, - //width: categoryScale.bandwidth(), - verticalAnchor: "start", - }; - }} - label={xScale} - // labelClassName={styles.axisLabel} - labelOffset={xAxisLabelOffset} - labelProps={{ - fontSize: `${xAxisLabelSize / 16}rem`, - }} - /> - - ); -} diff --git a/pages/playground.tsx b/pages/playground.tsx index 9b0729e..13c3a6a 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -16,7 +16,6 @@ import { QuotationCarousel } from "@/components/QuotationCarousel"; import { BottomNav } from "../components/BottomNav"; import { CenterWrapper } from "../components/CenterWrapper"; import { ColorPalette } from "../components/ColorPalette"; -import { LineGraph } from "../components/LineGraph"; import { WordCloud } from "../components/WordCloud"; import styles from "./playground.module.css";