resolve lint
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
e7131529e3
commit
f802dbfd8e
|
@ -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": [
|
||||
|
|
|
@ -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<number>({
|
||||
range: [0, yMax],
|
||||
nice: true,
|
||||
domain: [0, 100],
|
||||
});
|
||||
|
||||
return (
|
||||
<svg width={width} height={svgHeight}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
{actualData.map((lineData, i) => {
|
||||
console.log(lineData);
|
||||
const even = i % 2 === 0;
|
||||
return (
|
||||
<Group key={`line-${i}`}>
|
||||
<LinePath
|
||||
curve={allCurves[curveType]}
|
||||
data={lineData}
|
||||
x={(d) => xScale(getX(d)) ?? 0}
|
||||
y={(d) => yScale(getY(d)) ?? 0}
|
||||
stroke={even ? Color.primaryAccent : Color.secondaryAccent}
|
||||
strokeWidth={2}
|
||||
strokeOpacity={2}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
<AxisBottom
|
||||
scale={xScale}
|
||||
top={margin.top + yMax}
|
||||
left={margin.left}
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
tickLabelProps={() => {
|
||||
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`,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
|
@ -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";
|
||||
|
|
Loading…
Reference in New Issue