Luiz arthur winter#218
Open
luizarthuur wants to merge 21 commits into
Open
Conversation
…g the json server
…for sensor data fetching
…h /data route and root redirect to /data
- Add SensorChart component with Highcharts and highcharts-react-official - Display acceleration with 3 series (X, Y, Z) on DashboardPage - Display velocity with 3 series (X, Y, Z) - Display temperature with 1 series - Configure charts with datetime x-axis, zoom, tooltips, and legend - Use MUI Paper containers for each chart with responsive grid layout
- Add hoveredTimestamp state to Redux store for cross-chart synchronization - Create setHoveredTimestamp action to update global hover state - Enhance SensorChart component to emit mouse hover events via onHover callback - Make SensorChart react to external hoveredTimestamp to draw crosshair and tooltip - Update DashboardPage to connect hover events from all charts to Redux - Disable Highcharts accessibility module to remove console warning - Fix non-boolean 'item' prop warning in Grid components
…ontext with localStorage persistence and system preference detection
…IGMA styles from reference
…the header titles
Redesign header with two rows: title + machine info with icons and vertical dividers - Add fixed width columns for each machine info item - Implement dark/light theme toggle with localStorage persistence - Switch chart layout from 3 columns to stacked vertical (1 per row) - Apply custom colors to series (Horizontal, Radial, Axial) - Remove vertical grid lines from x-axis - Hide ticks on both axes (tickLength: 0) - Set grid line color to #DFE3E8 for consistency - Add fixed border around chart plot area (plotBorder) - Increase chart height to 430px and adjust legend position (y: 12) - Use Inter font family for modern look - Add responsive breakpoints for mobile and tablet - Enhance overall spacing, padding, and card styling
- Implement ThemeContext with localStorage persistence and system preference detection - Add data-theme attribute to body for CSS dark mode overrides - Make chart axis lines and grid colors transparent to blend with background - Apply dynamic colors using MUI theme for all chart elements (labels, ticks, dividers) - Style header, cards, and containers for dark mode consistency - Ensure seamless transition between light/dark themes
…e reducers (loading, success, error, hover) - Test sensorSaga flows (success and error cases) - Test fetchAllMetrics API calls (success and error) - Configure Vitest with jsdom and testing-library - All 8 tests passing successfully"
Installing Storybook stable version (8.x) with compatible addons - Configure autodocs in main.ts with docs.autodocs: 'tag' - Create custom stories for SensorChart, Header, and DashboardPage - Remove duplicate stories and fix folder structure - Enable automatic documentation for all components"
…check main page important functions
…ing the favicon to a Dynamox icon
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request - Front-end Challenge Dynamox V2
Link do deploy:
https://front-end-challenge-v2-luiz-arthur.vercel.app/data
https://front-end-challenge-v2-luiz-arthur-gb8sx2j0y.vercel.app/data
Resumo
Este PR implementa o dashboard de análise de dados de sensores solicitado no desafio. A aplicação exibe gráficos de séries temporais para aceleração (3 eixos), velocidade (3 eixos) e temperatura, com crosshair sincronizado, tema claro/escuro e suporte a dispositivos móveis.
Funcionalidades implementadas
Rota /data com dashboard completo
Header com informações da máquina (Máquina 1023, Ponto 20192, 200 RPM, 16g, 20 min)
3 gráficos de séries temporais:
Aceleração RMS: 3 séries (Horizontal, Radial, Axial)
Velocidade RMS: 3 séries (Horizontal, Radial, Axial)
Temperatura: 1 série
Crosshair vertical sincronizado entre todos os gráficos ao passar o mouse
Dados carregados ao acessar a rota /data (mock via JSON Server em dev, arquivo estático em produção)
Modo claro/escuro com persistência no localStorage
Layout responsivo (mobile, tablet, desktop)
Requisitos técnicos atendidos
TypeScript - Todos os arquivos com tipagem forte
React - Componentes funcionais com hooks
Redux - Gerenciamento de estado global (sensorSlice)
Redux Saga - Efeitos colaterais assíncronos (fetch de dados)
Vite Build tool configurado
Material UI 5 Interface estilizada com temas e componentes
Highcharts - Gráficos com crosshair e zoom
Testes unitários - 8 testes passando (slice, saga, API)
Bônus implementados
Storybook: Documentação interativa dos componentes (SensorChart, Header, DashboardPage) com autodocs
Cypress: Testes E2E do dashboard (header, cards, containers, dark mode)
Deploy: Aplicação disponível em https://front-end-challenge-v2-luiz-arthur.vercel.app/data
Decisões técnicas
Arquivo JSON estático em produção: Por questões de simplicidade de deploy, a aplicação utiliza o arquivo response-challenge-v2.json na pasta public/ em produção. Localmente, o JSON Server pode ser usado para simular uma API real.
Estado global: O sensorSlice gerencia loading, error, dados dos eixos e o hoveredTimestamp para o crosshair sincronizado.
Saga: Responsável por chamar a API e tratar erros, mantendo a lógica de negócio separada dos componentes.
Crosshair sincronizado: Utiliza o estado global hoveredTimestamp para desenhar a crosshair em todos os gráficos simultaneamente.
Tema: Gerenciado via ThemeContext com persistência no localStorage e detecção da preferência do sistema.