Back to List

OLED Research Data Chart Editor

Client logo

Chart editor for visualization and regression analysis of OLED material research data
Enables researchers to analyze experimental data and manage polynomial fitting results.

OLED Research Data Chart Editor - Media 1
1 / 4

Roles

PlanningDesignFrontendBackend

Tech Stack

React
TypeScript
Plotly.js
Django
Vite
React Hook Form
Bootstrap

Key Features

  • Various Chart Types: Support for 7 chart types - Scatter, Bar, Pie, Box, Heatmap, Contour, Polar
  • Regression Analysis: Experimental data trend analysis with 2nd/3rd degree polynomial fitting and outlier handling
  • Dual Y-Axis Support: Compare and analyze different scale data in a single chart
  • Real-time Preview: Instant chart updates upon settings changes for immediate result verification
  • Data Table Integration: End-to-end processing from source data selection to analysis result extraction and saving

Key Achievements

  • Web Component Architecture: React app encapsulated as custom element using Shadow DOM for independent integration into existing Django templates without style conflicts
  • Complex Form State Management: React Hook Form managing dynamic option panels for 7 chart types and nested layout settings in a single form
  • Circular Reference Handling: Resolved Plotly.js layout object circular reference issues with flatted library for stable settings save/restore
  • Dynamic Axis Configuration: Automatic overlaying/side configuration when using dual Y-axis to minimize user configuration burden
  • Conditional UI by Chart Type: Simplified complex settings screen by displaying only relevant options based on selected chart type
  • Responsive Chart Resizing: Container size detection on autosize toggle with automatic scaling error prevention for colorbar charts
#Data Visualization
#Chart Editor
#Web Component
#Regression Analysis
#Plotly.js
#Research Tool