Skip to content

Vibe code single boxplot #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hatzen merged 10 commits into from
May 25, 2026
Merged

Vibe code single boxplot #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7e5993d
add dropbox
Hatzen May 20, 2026
726c966
some type optimizations
Hatzen May 24, 2026
7b52d68
add data for last 3 years
Hatzen May 24, 2026
a85abcc
trial fixing responsivness
Hatzen May 24, 2026
ef0b973
trial replacing dropdown with proper one
Hatzen May 24, 2026
50ece1f
trial fixing year selection
Hatzen May 24, 2026
139ac10
some fixes
Hatzen May 24, 2026
a59364b
fixed selecting tabs
Hatzen May 24, 2026
6e734bc
some trials for fixes
Hatzen May 24, 2026
ef49327
update dependencies fixing download issues with memfs
Hatzen May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15,576 changes: 4,272 additions & 11,304 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 21 additions & 25 deletions src/components/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ interface AppState {
usePlot: number
}

class App extends React.Component<any, AppState> {
class App extends React.Component<Record<string, unknown>, AppState> {
private controlPane: React.RefObject<AllotmentHandle>
private uiStore: UiStore

constructor(props: any) {
constructor(props: Record<string, unknown>) {
super(props)
this.controlPane = React.createRef()
this.controlPane = React.createRef<AllotmentHandle>()
this.state ={
components: [0, 1],
usePlot: 0
Expand All @@ -36,7 +36,7 @@ class App extends React.Component<any, AppState> {
}

render(): JSX.Element {
const fitAll = {position: 'absolute' as any, top:0, left:0, bottom: 0, right:0}
const fitAll: React.CSSProperties = {position: 'absolute', top:0, left:0, bottom: 0, right:0}
const stores: StoreProps = {
entryStore,
controlStore,
Expand All @@ -57,17 +57,19 @@ class App extends React.Component<any, AppState> {
if (pane === 0) {
return (
<Allotment.Pane key={pane}>
<div style={{position: 'relative', top: 0, left: 0, right: 0}} >
<Tabs
value={''}
onChange={this.changePlot.bind(this)}>
<Tab label="Salary" />
<Tab label="Participation" />
</Tabs>
</div>
<div style={{position: 'relative', top: 0, left: 0, right: 0, height: 'calc(100% - 48px)'}}>
{this.state.usePlot === 0 ? <BoxPlot></BoxPlot> : <BarPlot></BarPlot>}
</div>
<div style={{position: 'relative', top: 0, left: 0, right: 0}} >
<Tabs
value={this.state.usePlot}
onChange={this.changePlot}>
<Tab label="Salary" />
<Tab label="Participation" />
</Tabs>
</div>
<div style={{position: 'relative', top: 0, left: 0, right: 0, height: 'calc(100% - 48px)', width: '100%'}}>
<div style={{width: '100%', height: '100%'}}>
{this.state.usePlot === 0 ? <BoxPlot></BoxPlot> : <BarPlot></BarPlot>}
</div>
</div>
</Allotment.Pane>
)
} else {
Expand All @@ -85,18 +87,12 @@ class App extends React.Component<any, AppState> {
)
}

private changePlot(): void {
let showPlot: number
if (this.state.usePlot === 1) {
showPlot = 0
} else {
showPlot = 1
}
this.setState({usePlot: showPlot})
}
private changePlot = (event: React.ChangeEvent<{}>, newValue: number | string) => {
this.setState({usePlot: Number(newValue)});
};

private toggleControls(): void {
if ((this.state as any).components.length === 1) {
if (this.state.components.length === 1) {
this.setState({
components: [0 ,1]
})
Expand Down
146 changes: 74 additions & 72 deletions src/components/appBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,21 @@ import Loader from 'react-loader-spinner'
export interface MenuAppBarProps extends StoreProps {
menuClicked: () => void
}

interface NetworkState {
since: string
online: boolean
rtt: number
type: string
saveData: boolean
downLink: number
downLinkMax: number
effectiveType: string
}

// https://medium.com/@vivekjoy/usenetwork-create-a-custom-react-hook-to-detect-online-and-offline-network-status-and-get-network-4a2e12c7e58b
// https://v1.mui.com/demos/app-bar/
class MenuAppBar extends React.Component<MenuAppBarProps> {

/*
constructor(props: MenuAppBarProps) {
super(props)
/*const [state, setState] = useState(() => {
return {
since: undefined,
online: navigator.onLine,
...this.getNetworkConnectionInfo(),
}
})
// const info = this.getNetworkConnectionInfo()
//
}
*/


render(): JSX.Element {
// TODO: Info Button explain all relevant aspects to consider the salary which are not matched by the survey..
Expand All @@ -53,27 +49,42 @@ class MenuAppBar extends React.Component<MenuAppBarProps> {
}

get loader(): JSX.Element {
const maxChunks = Object.values(CHUNK_COUNT_PER_YEAR)
.reduce((previousValue: number, currentValue: number) => {
return 0 + previousValue + currentValue
})
//
const chunksDownloaded = Object.values(this.props.entryStore!.parsedDataByYear)
.map((resultSetForYear) => resultSetForYear.chunksParsed)
.reduce((previousValue: number, currentValue: number) => {
return 0 + previousValue + currentValue
}, 0)
const loadingPercentage = Math.round(chunksDownloaded / maxChunks * 100)
if (loadingPercentage > 99) {
// If entryStore or controlStore is not available, show no loader
if (!this.props.entryStore || !this.props.controlStore) {
return <div></div>
}

// Get the currently selected year
const selectedYearStr = this.props.controlStore.controlState.selectedYear;
if (!selectedYearStr) {
return <div></div>
}

// Get max chunks for the selected year
const maxChunks = CHUNK_COUNT_PER_YEAR[selectedYearStr] || 0;
if (maxChunks === 0) {
return <div></div>
}

// Get chunks parsed for the selected year
const yearData = this.props.entryStore.parsedDataByYear[parseInt(selectedYearStr, 10)];
const chunksDownloaded = yearData ? yearData.chunksParsed : 0;

// Calculate loading percentage
const loadingPercentage = Math.round((chunksDownloaded / maxChunks) * 100);

// Hide loader when loading is complete
if (loadingPercentage >= 100) {
return <div></div>
}

return (
<div style={{padding: 'auto', position: 'absolute', right: '25px'}}>
<Typography variant='body1'>
<div style={{}}>
<div style={{}}>
<Typography variant='body1'>
{loadingPercentage} %
</div>
</Typography>
</Typography>
</div>
<Loader
type="Audio"
color="#F48024"
Expand All @@ -84,13 +95,21 @@ class MenuAppBar extends React.Component<MenuAppBarProps> {
)
}

getNetworkConnectionInfo(): any {
const connection = this.getNetworkConnection()
getNetworkConnectionInfo(): NetworkState {
const defaults: NetworkState = {
since: new Date().toString(),
online: false,
rtt: 0, type: '', saveData: false,
downLink: 0, downLinkMax: 0, effectiveType: '',
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const connection: any = this.getNetworkConnection()
if (!connection) {
return {}
return defaults
}
//
return {
since: new Date().toString(),
online: navigator.onLine,
rtt: connection.rtt,
type: connection.type,
saveData: connection.saveData,
Expand All @@ -99,38 +118,27 @@ class MenuAppBar extends React.Component<MenuAppBarProps> {
effectiveType: connection.effectiveType,
}
}

useNetwork(): any {
const [state, setState] = useState(() => {
return {
since: undefined,
online: navigator.onLine,
...this.getNetworkConnectionInfo(),
}
})

useNetwork(): NetworkState {
const [state, setState] = useState(this.getNetworkConnectionInfo())
useEffect(() => {
const handleOnline = (): void => {
setState(
(prevState: any): any => ({
...prevState,
online: true,
since: new Date().toString(),
}) as any)
setState((prevState: NetworkState): NetworkState => ({
...prevState,
online: true,
}))
}
const handleOffline = (): any => {
setState(
(prevState: any): any => (
{
...prevState,
online: false,
since: new Date().toString(),
})
)
const handleOffline = (): void => {
setState((prevState: NetworkState): NetworkState => ({
...prevState,
online: false,
}))
}
const handleConnectionChange = (): any => {
setState((prevState: any) => ({
const handleConnectionChange = (_event: Event): void => {
const networkInfo = this.getNetworkConnectionInfo()
setState((prevState: NetworkState) => ({
...prevState,
...this.getNetworkConnectionInfo(),
...networkInfo,
}))
}
window.addEventListener('online', handleOnline)
Expand All @@ -146,16 +154,10 @@ class MenuAppBar extends React.Component<MenuAppBarProps> {
return state
}

getNetworkConnection(): NetworkInformation & any {
return (
navigator.connection
// ||
//navigator.mozConnection ||
// navigator.webkitConnection ||
// null
)
getNetworkConnection(): EventTarget {
return null as unknown as EventTarget // navigator.connection!

@Hatzen Hatzen May 25, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: this is not defined anymore needs a valid replacement instead of default

}

}

export default inject(...injectClause)(observer(MenuAppBar))
export default inject(...injectClause)(observer(MenuAppBar))
80 changes: 28 additions & 52 deletions src/components/barplot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,67 +8,43 @@ class BarPlot extends React.Component<StoreProps> {
render(): JSX.Element {
return (
<div style={{position: 'absolute', top: 0, bottom: 0, left:0, right: 0, overflow: 'auto'}}>
<Plot
data={this.data}
layout={ {barmode: 'group', width: this.width, height: this.height, title: '', showlegend: false} }
// TODO: Check Layout.template
// TODO: Check Config.static for temporary disable?
/>
<Plot
data={this.data}
layout={{barmode: 'group', showlegend: false}}
style={{width: '100%', height: '100%'}}
/>
</div>
)
}

private get data(): any { // TODO: Plotty Data
const resultList = this.props.entryStore!.parsedDataByYear
const filteredList = this.props.uiStore!.filteredData
private get data(): Array<Record<string, unknown>> { // TODO: Plotty Data
const selectedYearStr = this.props.controlStore!.controlState.selectedYear;
const selectedYearNum = parseInt(selectedYearStr, 10);

const displayYears = this.props.controlStore?.controlState.selectedYears
const resultList = this.props.entryStore!.parsedDataByYear;
const filteredList = this.props.uiStore!.filteredData;

const invalidNumbers = Object.keys(resultList)
.filter(year => displayYears![year as any] === true)
.map(key => resultList[key as any].invalidEntryCount)
// Get the data for the selected year from entryStore.parsedDataByYear (by number key)
const yearEntrySet = resultList[selectedYearNum];
// Get the data for the selected year from uiStore.filteredData (by string key)
const filteredYearList = filteredList[selectedYearNum];

const overallNumbers = Object.keys(resultList)
.filter(year => displayYears![year as any] === true)
.map(key => resultList[key as any].overallEntryCount)

const matchingFilterNumbers = Object.keys(filteredList)
.filter(year => displayYears![year as any] === true)
.map(key => filteredList[key as any].length)

const trace1 = {
x: displayYears,
y: overallNumbers,
name: 'allParticipations',
type: 'bar'
}

const trace2 = {
x: displayYears,
y: invalidNumbers,
name: 'considered invalid',
type: 'bar'
}

const trace3 = {
x: displayYears,
y: matchingFilterNumbers,
name: 'matching filter',
type: 'bar'
// If we don't have data for the selected year, return empty traces?
if (!yearEntrySet || !filteredYearList) {
return [];
}

return [trace3, trace1, trace2]
}

get width(): number {
return window.innerWidth * 0.8 - 50
}

get height(): number {
const appBarHeight = 50
const diagramSelectionHeight = 30
return window.document.documentElement.clientHeight - (appBarHeight + diagramSelectionHeight)
const overallNumbers = [yearEntrySet.overallEntryCount];
const invalidNumbers = [yearEntrySet.invalidEntryCount];
const matchingFilterNumbers = [filteredYearList.length];

const traces: Array<Record<string, unknown>> = [
{ y: matchingFilterNumbers, name: 'matching filter', type: 'bar' },
{ y: overallNumbers, name: 'allParticipations', type: 'bar' },
{ y: invalidNumbers, name: 'considered invalid', type: 'bar' },
];
return traces;
}
}

export default inject(...injectClause)(observer(BarPlot))
export default inject(...injectClause)(observer(BarPlot))
Loading
Loading