92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import Card from "./Card";
|
|
import StatsStyling from "../styles/stats_styling";
|
|
import type { LinguisticAnalysisResponse } from "../types/ApiTypes";
|
|
|
|
const styles = StatsStyling;
|
|
|
|
type LinguisticStatsProps = {
|
|
data: LinguisticAnalysisResponse;
|
|
};
|
|
|
|
const LinguisticStats = ({ data }: LinguisticStatsProps) => {
|
|
const lexical = data.lexical_diversity;
|
|
const words = data.word_frequencies ?? [];
|
|
const bigrams = data.common_two_phrases ?? [];
|
|
const trigrams = data.common_three_phrases ?? [];
|
|
|
|
const topWords = words.slice(0, 20);
|
|
const topBigrams = bigrams.slice(0, 10);
|
|
const topTrigrams = trigrams.slice(0, 10);
|
|
|
|
return (
|
|
<div style={styles.page}>
|
|
<div style={{ ...styles.container, ...styles.grid }}>
|
|
<div style={{ ...styles.card, gridColumn: "span 12" }}>
|
|
<h2 style={styles.sectionTitle}>Language Overview</h2>
|
|
<p style={styles.sectionSubtitle}>Quick read on how broad and repetitive the wording is.</p>
|
|
</div>
|
|
|
|
<Card
|
|
label="Total Words"
|
|
value={lexical?.total_tokens?.toLocaleString() ?? "—"}
|
|
sublabel="Words after basic filtering"
|
|
style={{ gridColumn: "span 4" }}
|
|
/>
|
|
<Card
|
|
label="Unique Words"
|
|
value={lexical?.unique_tokens?.toLocaleString() ?? "—"}
|
|
sublabel="Different words used"
|
|
style={{ gridColumn: "span 4" }}
|
|
/>
|
|
<Card
|
|
label="Vocabulary Variety"
|
|
value={typeof lexical?.ttr === "number" ? lexical.ttr.toFixed(4) : "—"}
|
|
sublabel="Higher means less repetition"
|
|
style={{ gridColumn: "span 4" }}
|
|
/>
|
|
|
|
<div style={{ ...styles.card, gridColumn: "span 4" }}>
|
|
<h2 style={styles.sectionTitle}>Top Words</h2>
|
|
<p style={styles.sectionSubtitle}>Most used single words.</p>
|
|
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
|
|
{topWords.map((item) => (
|
|
<div key={item.word} style={styles.topUserItem}>
|
|
<div style={styles.topUserName}>{item.word}</div>
|
|
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ ...styles.card, gridColumn: "span 4" }}>
|
|
<h2 style={styles.sectionTitle}>Top Bigrams</h2>
|
|
<p style={styles.sectionSubtitle}>Most used 2-word phrases.</p>
|
|
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
|
|
{topBigrams.map((item) => (
|
|
<div key={item.ngram} style={styles.topUserItem}>
|
|
<div style={styles.topUserName}>{item.ngram}</div>
|
|
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ ...styles.card, gridColumn: "span 4" }}>
|
|
<h2 style={styles.sectionTitle}>Top Trigrams</h2>
|
|
<p style={styles.sectionSubtitle}>Most used 3-word phrases.</p>
|
|
<div style={{ ...styles.topUsersList, maxHeight: 360, overflowY: "auto" }}>
|
|
{topTrigrams.map((item) => (
|
|
<div key={item.ngram} style={styles.topUserItem}>
|
|
<div style={styles.topUserName}>{item.ngram}</div>
|
|
<div style={styles.topUserMeta}>{item.count.toLocaleString()} uses</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LinguisticStats;
|