Skip to content

Commit

Permalink
this is temporal
Browse files Browse the repository at this point in the history
  • Loading branch information
@ognis1205
ognis1205 committed Aug 15, 2021
1 parent 66474e6 commit b9e4251
Show file tree
Hide file tree
Showing 11 changed files with 198 additions and 311 deletions.
11 changes: 5 additions & 6 deletions ...ponents/tweet/trend/Timeseries/styles.tsx → ...c/components/tweet/trend/Count/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@ import * as Themes from "../../../../themes";

const styles = (theme: Themes.Custom.Theme) =>
MaterialStyles.createStyles({
box: {
card: {
width: "100%",
marginLeft: "auto",
marginRight: "auto",
position: "relative",
// height: "50vh",
// width: "90%",
// marginLeft: "auto",
// marginRight: "auto",
// overflow: 'scroll',
background: "rgb(247, 247, 247)",
},
});

Expand Down
165 changes: 91 additions & 74 deletions ...c/components/tweet/trend/Topics/index.tsx → ...rc/components/tweet/trend/Topic/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,37 @@ import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import styles from "./styles";
import * as Context from "../../../../contexts/tweet/trend";

const beginOf = (date: Date): Date => {
const d = new Date(date);
d.setHours(0, 0, 0, 0);
return d;
};

const endOf = (date: Date): Date => {
const d = new Date(date);
d.setHours(24, 0, 0, 0);
return d;
};

const getDateString = (date: Date) =>
date.toLocaleDateString(undefined, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
});

interface Props extends WithStyles<typeof styles> {
from: Date;
to: Date;
date: Date;
}

export default withStyles(styles)((props: Props) => {
const [model, setModel] = React.useState<Context.Topic.Model>(null);

const dummy = {
labels: [...Array(10).keys()].map((n) => "#Hashtag" + n),
datasets: [{
label: "count",
data: [...Array(10).keys()].map((_) => 0),
}],
} as Context.Topic.Model;

React.useEffect(() => {
const query = {
from: props.from.getTime(),
to: props.to.getTime(),
from: beginOf(props.date).getTime(),
to: endOf(props.date).getTime(),
topN: 10,
} as Context.Topic.Query;

Expand All @@ -57,83 +68,88 @@ export default withStyles(styles)((props: Props) => {
.then((json) => {
setModel({
labels: json.map((e: Context.Topic.Response) => "#" + e.name),
datasets: [{
label: "count",
data: json.map((e: Context.Topic.Response) => e.count),
backgroundColor: [
"rgba( 0, 71, 171, 0.7)",
"rgba( 17, 81, 171, 0.7)",
"rgba( 34, 91, 171, 0.7)",
"rgba( 51, 101, 171, 0.7)",
"rgba( 68, 111, 171, 0.7)",
"rgba( 85, 121, 171, 0.7)",
"rgba(103, 131, 171, 0.7)",
"rgba(120, 141, 171, 0.7)",
"rgba(137, 151, 171, 0.7)",
"rgba(154, 161, 171, 0.7)",
],
borderColor: [
"rgb( 0, 71, 171)",
"rgb( 17, 81, 171)",
"rgb( 34, 91, 171)",
"rgb( 51, 101, 171)",
"rgb( 68, 111, 171)",
"rgb( 85, 121, 171)",
"rgb(103, 131, 171)",
"rgb(120, 141, 171)",
"rgb(137, 151, 171)",
"rgb(154, 161, 171)",
],
}],
datasets: [
{
label: "count",
data: json.map((e: Context.Topic.Response) => e.count),
backgroundColor: [
"rgba( 0, 71, 171, 0.7)",
"rgba( 17, 81, 171, 0.7)",
"rgba( 34, 91, 171, 0.7)",
"rgba( 51, 101, 171, 0.7)",
"rgba( 68, 111, 171, 0.7)",
"rgba( 85, 121, 171, 0.7)",
"rgba(103, 131, 171, 0.7)",
"rgba(120, 141, 171, 0.7)",
"rgba(137, 151, 171, 0.7)",
"rgba(154, 161, 171, 0.7)",
],
borderColor: [
"rgb( 0, 71, 171)",
"rgb( 17, 81, 171)",
"rgb( 34, 91, 171)",
"rgb( 51, 101, 171)",
"rgb( 68, 111, 171)",
"rgb( 85, 121, 171)",
"rgb(103, 131, 171)",
"rgb(120, 141, 171)",
"rgb(137, 151, 171)",
"rgb(154, 161, 171)",
],
},
],
});
})
.catch((reason) => {
console.log(reason);
});
}, []);

const getDateString = (date: string) =>
new Date(date).toLocaleDateString(undefined, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
});
const dummy = {
labels: [...Array(10).keys()].map((n) => "#Hashtag" + n),
datasets: [
{
label: "count",
data: [...Array(10).keys()].map((_) => 0),
},
],
} as Context.Topic.Model;

const NotEnoughData = () => (
const emptyTopic = () => (
<Material.Card className={props.classes.card}>
<Material.CardHeader title={getDateString(props.from.toString())} />
<Material.CardHeader title={getDateString(props.date)} />
<Material.Divider />
<Material.CardContent>
<Material.Typography variant="h6" className={props.classes.typography}>
Not Enough Data
</Material.Typography>
<ReactChart.Bar
data={dummy}
options={{
indexAxis: "y",
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
text: "Hashtags [#]",
<Material.Typography variant="h6" className={props.classes.typography}>
Not Enough Data
</Material.Typography>
<ReactChart.Bar
data={dummy}
options={{
indexAxis: "y",
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
text: "Hashtags [#]",
},
},
},
}}/>
}}
/>
</Material.CardContent>
</Material.Card>
);

const EnoughData = () => (
const topic = () => (
<Material.Card className={props.classes.card}>
<Material.CardHeader title={getDateString(props.from.toString())}/>
<Material.Divider/>
<Material.CardHeader title={getDateString(props.date)} />
<Material.Divider />
<Material.CardContent>
<ReactChart.Bar
data={model}
<ReactChart.Bar
data={model}
options={{
indexAxis: "y",
responsive: true,
Expand All @@ -146,11 +162,12 @@ const getDateString = (date: string) =>
text: "Hashtags [#]",
},
},
}}/>
}}
/>
</Material.CardContent>
</Material.Card>
);

if (model?.datasets[0]?.data?.length !== 10) return NotEnoughData();
else return EnoughData();
if (model?.datasets[0]?.data?.length !== 10) return emptyTopic();
else return topic();
});
2 changes: 1 addition & 1 deletion .../components/tweet/trend/Topics/styles.tsx → ...c/components/tweet/trend/Topic/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import * as Themes from "../../../../themes";
const styles = (_: Themes.Custom.Theme) =>
MaterialStyles.createStyles({
card: {
width: "90%",
width: "100%",
marginLeft: "auto",
marginRight: "auto",
position: "relative",
Expand Down
12 changes: 6 additions & 6 deletions react-js-ui/src/contexts/tweet/timeline/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const LOAD = "tweet/timeline/LOAD";
export const DONE = "tweet/timeline/DONE";
export const NEW_QUERY = "tweet/timeline/NEW_QUERY";
export const CLR_QUERY = "tweet/timeline/CLR_QUERY";
export const OPEN = "tweet/timeline/OPEN";
export const CLOSE = "tweet/timeline/CLOSE";
export const LOAD = "tweet/timeline/LOAD";
export const DONE = "tweet/timeline/DONE";
export const NEW_QUERY = "tweet/timeline/NEW_QUERY";
export const CLR_QUERY = "tweet/timeline/CLR_QUERY";
export const OPEN = "tweet/timeline/OPEN";
export const CLOSE = "tweet/timeline/CLOSE";
export const NEW_LATEST = "tweet/timeline/NEW_LATEST";
export const ADD_LATEST = "tweet/timeline/ADD_LATEST";
export const CLR_LATEST = "tweet/timeline/CLR_LATEST";
79 changes: 14 additions & 65 deletions react-js-ui/src/contexts/tweet/trend/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,42 +18,11 @@ import * as Topic from "./topic.d";
import * as Timeseries from "./timeseries.d";
import * as Types from "./types";

export const requestTopics = (dispatch: React.Dispatch<React.ReducerAction<any>>) => {
const to = new Date();
const from = new Date();
from.setMonth(to.getMonth() - 2);
const query = {
from: from.getTime(),
to: to.getTime(),
topN: 10,
} as Topic.Query;

const opts = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(query),
};

fetch(`${process.env.API_ENDPOINT}/tweet/topics`, opts)
.then((res) => {
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
return res.json();
})
.then((json) => {
dispatch(newTopic(json))
dispatch(done())
})
.catch((reason) => {
console.log(reason);
});

return load();
};

export const requestTimeseries = (dispatch: React.Dispatch<React.ReducerAction<any>>) => {
export const requestTimeseries = (
dispatch: React.Dispatch<React.ReducerAction<any>>
) => {
const to = new Date("2021-07-26T02:00:00.000+00:00");
const from = new Date("2021-07-26T00:00:00.000+00:00");
// from.setMonth(to.getMonth() - 2);
const query = {
from: from.getTime(),
to: to.getTime(),
Expand All @@ -67,17 +36,17 @@ export const requestTimeseries = (dispatch: React.Dispatch<React.ReducerAction<a
};

fetch(`${process.env.API_ENDPOINT}/tweet/counts`, opts)
.then((res) => {
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
return res.json();
})
.then((json) => {
dispatch(newTimeseries(json))
dispatch(done())
})
.catch((reason) => {
console.log(reason);
});
.then((res) => {
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
return res.json();
})
.then((json) => {
dispatch(newTimeseries(json));
dispatch(done());
})
.catch((reason) => {
console.log(reason);
});

return load();
};
Expand All @@ -92,27 +61,7 @@ const done = () => ({
payload: false,
});

export const newTopic = (json: Topic.Response[]) => ({
type: Types.NEW_TOPIC,
payload: json,
});

export const clrTopic = () => ({
type: Types.CLR_TOPIC,
payload: [],
});

export const newTimeseries = (json: Timeseries.Response[]) => ({
type: Types.NEW_TIMESERIES,
payload: json,
});

export const addTimeseries = (json: Timeseries.Response[]) => ({
type: Types.ADD_TIMESERIES,
payload: json,
});

export const clrTimeseries = () => ({
type: Types.CLR_TIMESERIES,
payload: [],
});
Loading

0 comments on commit b9e4251

Please sign in to comment.