Skip to content

Commit

Permalink
comment out time series labels and increase width of bar chart
Browse files Browse the repository at this point in the history
  • Loading branch information
davye committed Oct 18, 2024
1 parent c3beb2e commit 51b9c73
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 120 deletions.
254 changes: 135 additions & 119 deletions source/frontend/pages/pricewatch.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,27 @@
import { Text, View, Dimensions, FlatList, TouchableOpacity, Button} from "react-native";
import React, {Component} from "react";
import {
Text,
View,
Dimensions,
FlatList,
TouchableOpacity,
Button,
} from "react-native";
import React, { Component } from "react";
import { NavigationProp, RouteProp } from "@react-navigation/native";
import { PriceWatchStackParamList } from "../app/StackParamList";
import { InnerStyledContainer, StyledContainer, Colors, Spacer} from "../components/style";
import {
InnerStyledContainer,
StyledContainer,
Colors,
Spacer,
} from "../components/style";
import { TextInput } from "react-native-gesture-handler";
import {VictoryChart, VictoryTheme, VictoryBar, VictoryAxis} from "victory-native";
import {
VictoryChart,
VictoryTheme,
VictoryBar,
VictoryAxis,
} from "victory-native";

interface PriceWatchProps {
navigation: NavigationProp<PriceWatchStackParamList, "PriceWatch">;
Expand All @@ -16,7 +33,7 @@ interface PriceWatchState {
itemList: any[];
filterList: any[];
zipCode: string;
barData: any[]
barData: any[];
}

export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
Expand All @@ -27,7 +44,7 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
itemList: [],
filterList: [],
zipCode: "",
barData: []
barData: [],
};
}

Expand All @@ -50,20 +67,20 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
>
Search Items
</Text>
<Spacer/>
<Spacer/>
<Spacer />
<Spacer />
<View
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 20
marginBottom: 20,
}}
>
<Text
style={{
fontSize: 15,
paddingHorizontal: 15,
width: 100
width: 100,
}}
>
Zip Code:
Expand All @@ -78,7 +95,7 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
flex: 1
flex: 1,
}}
/>
</View>
Expand All @@ -87,14 +104,14 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 20
marginBottom: 20,
}}
>
<Text
style={{
fontSize: 15,
paddingHorizontal: 15,
width: 100
width: 100,
}}
>
Items:
Expand All @@ -109,9 +126,9 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
flex: 1
flex: 1,
}}
/>
/>
</View>

<Button
Expand All @@ -120,166 +137,165 @@ export class PriceWatch extends Component<PriceWatchProps, PriceWatchState> {
color={Colors.blue}
/>

{this.state.filterList.length > 0 &&
{this.state.filterList.length > 0 && (
<FlatList
data={this.state.filterList}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => this.setState({ item: item, filterList: [] })}>
<Text
style={{
padding: 10,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "lightgray"
}}
data={this.state.filterList}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => this.setState({ item: item, filterList: [] })}
>
<Text
style={{
padding: 10,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "lightgray",
}}
>
{item}
</Text>
</TouchableOpacity>
)}
style={{
maxHeight: 150,
borderColor: "gray",
borderWidth: 1,
borderRadius: 5,
position: "absolute",
zIndex: 1,
width: "68.5%",
backgroundColor: "white",
top: 186,
left: 124,
}}
{item}
</Text>
</TouchableOpacity>
)}
style={{
maxHeight: 150,
borderColor: "gray",
borderWidth: 1,
borderRadius: 5,
position: "absolute",
zIndex: 1,
width: "68.5%",
backgroundColor: "white",
top: 186,
left: 124,
}}
/>
}
)}

<Spacer/>
<Spacer/>
<Spacer/>
{this.state.barData.length > 0 &&
<View
style={{
alignItems: "center",
marginLeft: 10
}}
>
<VictoryChart
width={Dimensions.get("window").width}
height={300}
scale={{x: "linear", y: "linear"}}
theme={VictoryTheme.material}
padding={{top: 50, bottom: 50, left: 70, right: 30}}
domainPadding={{x: 80, y:10}}
<Spacer />
<Spacer />
<Spacer />
{this.state.barData.length > 0 && (
<View
style={{
alignItems: "center",
marginLeft: 10,
}}
>
<VictoryAxis
label="STORES"
style={{
axis: {stroke: "#756f6a"},
axisLabel: {padding: 30, fontSize: 16}
}}
/>
<VictoryAxis
dependentAxis
label="PRICE"
style={{
axis: {stroke: "#756f6a"},
axisLabel: {padding: 40, fontSize: 16}
}}
/>
<VictoryBar
style={{data: {fill: "#44576D"}}}
data={this.state.barData}
barWidth={20}
labels={({datum}) => datum.y}
sortKey={"y"}
/>
</VictoryChart>
</View>
}
<VictoryChart
width={Dimensions.get("window").width}
height={300}
scale={{ x: "linear", y: "linear" }}
theme={VictoryTheme.material}
padding={{ top: 50, bottom: 50, left: 70, right: 30 }}
domainPadding={{ x: 80, y: 10 }}
>
<VictoryAxis
label="STORES"
style={{
axis: { stroke: "#756f6a" },
axisLabel: { padding: 30, fontSize: 16 },
}}
/>
<VictoryAxis
dependentAxis
label="PRICE"
style={{
axis: { stroke: "#756f6a" },
axisLabel: { padding: 40, fontSize: 16 },
}}
/>
<VictoryBar
style={{ data: { fill: "#44576D" } }}
data={this.state.barData}
barWidth={24}
labels={({ datum }) => datum.y}
sortKey={"y"}
/>
</VictoryChart>
</View>
)}
</InnerStyledContainer>
</StyledContainer>
);
}
};

handleZipCode = (value: string) => {
this.setState({zipCode: value}, () => {
this.setState({ zipCode: value }, () => {
if (value.length == 5) {
this.fetchItemList();
}
});
};

fetchItemList = () => {

const args= {zip_code: this.state.zipCode};
const args = { zip_code: this.state.zipCode };

fetch("https://receiptplus.pythonanywhere.com/api/get_items_by_zipcode", {
method: "POST",
body: JSON.stringify(args),
headers: { "Content-Type": "application/json" },
credentials: "include",
})
.then(this.handleSearch)
.catch((error) => {
console.error("Error fetching api/get_items_by_zipcode")
});
}
.then(this.handleSearch)
.catch((error) => {
console.error("Error fetching api/get_items_by_zipcode");
});
};

handleSearch = (res: Response) => {
if (res.ok) {
res.json().then((data) => {

this.setState({itemList: data});
})
this.setState({ itemList: data });
});
} else {
console.error("Error receiving item list");
}
}
};

handleSearchInput = (value: string) => {
this.setState({item: value});
this.setState({ item: value });

const filter = this.state.itemList.filter((item) =>
const filter = this.state.itemList.filter((item) =>
item.toLowerCase().startsWith(value.toLowerCase())
);

this.setState({filterList: filter});
}
this.setState({ filterList: filter });
};

fetchBarData = () => {

const args = {zip_code: this.state.zipCode, item_name: this.state.item};
const args = { zip_code: this.state.zipCode, item_name: this.state.item };

fetch("https://receiptplus.pythonanywhere.com/api/receipt_info", {
method: "POST",
body: JSON.stringify(args),
headers: { "Content-Type": "application/json" },
credentials: "include",
})
.then(this.handleBarData)
.catch((error) => {
console.error("Error fetching api/receipt_date_brackets")
});
}
.then(this.handleBarData)
.catch((error) => {
console.error("Error fetching api/receipt_date_brackets");
});
};

handleBarData = (res: Response) => {
if (res.ok) {
res.json().then((data) => {
this.processBarData(data);
})
});
} else {
console.error("Error receiving price information");
}
}
};

processBarData = (data: {address:string, data:string,
price:number, store_name:string}[]) => {
const newData = data.map(({store_name, price}) => ({
processBarData = (
data: { address: string; data: string; price: number; store_name: string }[]
) => {
const newData = data.map(({ store_name, price }) => ({
x: store_name,
y: price
y: price,
}));

this.setState({barData: newData});
}
this.setState({ barData: newData });
};
}
2 changes: 1 addition & 1 deletion source/frontend/pages/summary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export class Summary extends Component<SummaryProps, SummaryState> {
/>
<VictoryLine
data={this.state.lineData}
labels={({ datum }) => datum.y}
// labels={({ datum }) => datum.y}
labelComponent={<VictoryLabel renderInPortal dy={-20} />}
style={{
data: { stroke: "#44576D", strokeWidth: 2 },
Expand Down

0 comments on commit 51b9c73

Please sign in to comment.