Skip to content

Web build #10

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
mis-fe-denyst merged 10 commits into from
Oct 30, 2025
Merged

Web build #10

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
661121e
Add initial HTML and metadata files for the web build
DevinMprz Jun 16, 2025
cc8fdae
static build
DevinMprz Jun 16, 2025
d6de102
tweaks
DevinMprz Jun 16, 2025
d198e1b
tweaks2
DevinMprz Jun 16, 2025
d0336de
tweaks3
DevinMprz Jun 16, 2025
505b976
tweaks3
DevinMprz Jun 16, 2025
e2c8c2b
tweaks3
DevinMprz Jun 16, 2025
81b9776
tweaks4
DevinMprz Jun 16, 2025
eca337e
Merge branch 'main' into web-build
DevinMprz Oct 30, 2025
4683173
feat(docs): ✨ update README with live demo link and usage note
mis-fe-denyst Oct 30, 2025
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
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ node_modules/

# Expo
.expo/
dist/
web-build/
dist/
expo-env.d.ts

# Native
Expand Down
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
# Statistics Analysis App

## 🚀 Live Demo

**Try the app now:** [https://devinmprz.github.io/Statistics-Analysis-App](https://devinmprz.github.io/Statistics-Analysis-App)

No installation required! Access the app directly in your browser to explore all features.

---

## Contents

- [Live Demo](#-live-demo)
- [Features](#features)
- [Requirements](#requirements)
- [Build & Run](#build--run)
Expand All @@ -21,6 +30,9 @@

## Requirements

> **Note:** If you just want to use the app, visit the [live demo](https://devinmprz.github.io/Statistics-Analysis-App) instead of setting up a development environment.

For local development:
- **Node.js** v14 or higher
- **npm** v6 or higher

Expand Down
11 changes: 7 additions & 4 deletions app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@
}
},
"web": {
"favicon": ""
"favicon": "",
"bundler": "metro",
"output": "static"
},
"plugins": [
"expo-router"
]
"experiments": {
"baseUrl": "/Statistics-Analysis-App"
},
"plugins": ["expo-router"]
}
}
211 changes: 170 additions & 41 deletions app/(Minitool_one)/minitool_1.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,42 +621,139 @@ const Minitool_1 = () => {
animatedProps={animatedRangeRightLineProps}
/>

{/* --- Reactangles - gesture handlers --- */}
<GestureDetector
gesture={leftHandlePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedLeftHandleProps}
/>
</GestureDetector>
<GestureDetector
gesture={rightHandlePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedRightHandleProps}
/>
</GestureDetector>
<GestureDetector
gesture={movePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y="0"
height={chartHeight}
fill="transparent"
animatedProps={animatedMoveHandleProps}
/>
</GestureDetector>
{/* --- Rectangles - gesture handlers --- */}
{Platform.OS === 'web' && rangeToolActive ? (
<>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedLeftHandleProps}
onMouseDown={(e) => {
e.stopPropagation();
const startX = e.nativeEvent.pageX;
const initialStart = rangeStartX.value;

const handleMouseMove = (moveEvent) => {
const deltaX = moveEvent.pageX - startX;
rangeStartX.value = clamp(
initialStart + deltaX,
0,
rangeEndX.value - RANGE_HANDLE_SIZE
);
};

const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};

document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}}
/>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedRightHandleProps}
onMouseDown={(e) => {
e.stopPropagation();
const startX = e.nativeEvent.pageX;
const initialEnd = rangeEndX.value;

const handleMouseMove = (moveEvent) => {
const deltaX = moveEvent.pageX - startX;
rangeEndX.value = clamp(
initialEnd + deltaX,
rangeStartX.value + RANGE_HANDLE_SIZE,
chartWidth
);
};

const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};

document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}}
/>
<AnimatedRect
y="0"
height={chartHeight}
fill="transparent"
animatedProps={animatedMoveHandleProps}
onMouseDown={(e) => {
e.stopPropagation();
const startX = e.nativeEvent.pageX;
const initialStart = rangeStartX.value;
const initialEnd = rangeEndX.value;
const rangeWidth = initialEnd - initialStart;

const handleMouseMove = (moveEvent) => {
const deltaX = moveEvent.pageX - startX;
const newStart = clamp(
initialStart + deltaX,
0,
chartWidth - rangeWidth
);
rangeStartX.value = newStart;
rangeEndX.value = newStart + rangeWidth;
};

const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};

document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}}
/>
</>
) : (
<>
<GestureDetector
gesture={leftHandlePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedLeftHandleProps}
/>
</GestureDetector>
<GestureDetector
gesture={rightHandlePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y={chartHeight}
width={RANGE_HANDLE_SIZE}
height={RANGE_HANDLE_SIZE}
fill={RANGE_TOOL_COLOR}
animatedProps={animatedRightHandleProps}
/>
</GestureDetector>
<GestureDetector
gesture={movePanGesture}
enabled={rangeToolActive}
>
<AnimatedRect
y="0"
height={chartHeight}
fill="transparent"
animatedProps={animatedMoveHandleProps}
/>
</GestureDetector>
</>
)}
</AnimatedG>

{/* --- Value tool(1 line, 1 rectangle) --- */}
Expand All @@ -668,18 +765,50 @@ const Minitool_1 = () => {
strokeWidth="2"
animatedProps={animatedValueLineProps}
/>
<GestureDetector
gesture={panGesture}
enabled={valueToolActive}
>
{Platform.OS === 'web' && valueToolActive ? (
<AnimatedRect
y={chartHeight}
height="15"
width="15"
fill={TOOL_COLOR}
animatedProps={animatedToolProps}
onMouseDown={(e) => {
e.stopPropagation();
const startX = e.nativeEvent.pageX;
const initialTranslate = translateX.value;

const handleMouseMove = (moveEvent) => {
const deltaX = moveEvent.pageX - startX;
translateX.value = clamp(
initialTranslate + deltaX,
0,
chartWidth
);
};

const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};

document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}}
/>
</GestureDetector>
) : (
<GestureDetector
gesture={panGesture}
enabled={valueToolActive}
>
<AnimatedRect
y={chartHeight}
height="15"
width="15"
fill={TOOL_COLOR}
animatedProps={animatedToolProps}
/>
</GestureDetector>
)}
</AnimatedG>
</G>
{/* Y-Axis */}
Expand Down
6 changes: 0 additions & 6 deletions app/(Minitool_two)/_layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@ const Minitool_2_layout = () => {
return (
<>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen
name="minitool_2"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="minitool_2_index"
options={{ title: "Minitool Two Menu" }}
Expand Down
Loading
Loading