railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove custom grid

Browse Source
This commit is contained in:
Loewy 2024-01-09 15:42:38 -08:00
parent c0723665af
commit 2903207670
3 changed files with 6 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

@ -0,0 +1,2 @@
# .env.development
API_URI=https://api-dev.railbird.ai/graphql

18
App.tsx
View File

@ -2,30 +2,12 @@ import React from "react";
import { Text } from "react-native";
import ClientProvider from "./graphql/client";
import ShotsContainer from "./component/shot";
import { CustomGrid } from "./component/custom-grid";
import * as scale from 'd3-scale';
// TODO: restructure into object
const graphHeight = 300;
const innerGraphRowContainerPadding = 10;
const xAxisMarginTop = -15;
const topInset = 30;
const adjustedGraphHeight = graphHeight - innerGraphRowContainerPadding - xAxisMarginTop - topInset;
// Usable for mock testing
const domain = [0, 140];
const range = [adjustedGraphHeight, 30];
export const defaultTicks = [0, 20, 40, 60, 80, 100, 120, 140];
export const defaultScaleLinear = scale.scaleLinear().domain(domain).range(range);
const App: React.FC = () => {
return (
<ClientProvider>
<ShotsContainer />
<Text>test</Text>
<CustomGrid y={defaultScaleLinear} ticks={defaultTicks} />
</ClientProvider>
);
};

8
component/custom-grid.tsx
View File

@ -1,16 +1,16 @@
import React from 'react';
import { G, Line } from 'react-native-svg';
import * as scale from 'd3-scale'
import { ScaleLinear } from 'd3-scale'
import { colors } from '../styles';
type scaleFunction = (value: number) => number;
type scaleFunction = ScaleLinear<number, number>;
interface CustomGridProps {
y: scaleFunction;
ticks: number[];
ticks: Array<number>;
}
export const CustomGrid: React.FC = ({ y, ticks }: Partial<CustomGridProps>) => {
export const CustomGrid: React.FC<CustomGridProps> = ({ y, ticks }) => {
const [firstTick, ...remainingTicks] = ticks;
const dashArray = [1, 3];
const strokeSolidWidth = 0.2;