https://github.com/cheminfo/react-optics-diagrams
React components for displaying optical design diagrams.
Science Score: 26.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (6.9%) to scientific vocabulary
Repository
React components for displaying optical design diagrams.
Basic Info
- Host: GitHub
- Owner: cheminfo
- License: other
- Language: TypeScript
- Default Branch: main
- Homepage: https://cheminfo.github.io/react-optics-diagrams/
- Size: 661 KB
Statistics
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 8
- Releases: 7
Metadata Files
README.md
react-optics-diagrams
React components for displaying optical design diagrams.
Currently the following diagrams are provided:
- SpotDiagram - A single spot diagram for displaying the result of a geometrical ray trace
- SpotDiagramGrid - A grid of spot diagrams, one for each combination of a design's wavelength and field point
Quickstart
Installation
console
npm install react-optics-diagrams
Use
Use the component diagrams like you would any other React component. For example, as a script:
```typescript // ... const rayTraceResults: RayTraceResults = data;
const props = { rayTraceResults, wavelengths: [ { value: 0.4861, units: 'µm' }, { value: 0.5876, units: 'µm' }, { value: 0.6563, units: 'µm' }, ], fieldSpecs: [ { value: 0.0, units: 'deg', type: 'angle' } as const, { value: 5.0, units: 'deg', type: 'angle' } as const, ], };
ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
This will create a grid of spot diagrams that looks like the following, one for each field and wavelength combination.

Development
Demo
See the demo folder for examples.
Common Commands
```console
Run the demo on the development server
npm run dev
Run tests
npm run test ```
Owner
- Name: Cheminfo
- Login: cheminfo
- Kind: organization
- Website: https://www.cheminfo.org/
- Repositories: 242
- Profile: https://github.com/cheminfo
GitHub Events
Total
- Release event: 5
- Watch event: 1
- Delete event: 39
- Member event: 1
- Issue comment event: 68
- Push event: 37
- Pull request review event: 4
- Pull request event: 87
- Create event: 52
Last Year
- Release event: 5
- Watch event: 1
- Delete event: 39
- Member event: 1
- Issue comment event: 68
- Push event: 37
- Pull request review event: 4
- Pull request event: 87
- Create event: 52
Issues and Pull Requests
Last synced: 9 months ago
All Time
- Total issues: 0
- Total pull requests: 49
- Average time to close issues: N/A
- Average time to close pull requests: 6 days
- Total issue authors: 0
- Total pull request authors: 4
- Average comments per issue: 0
- Average comments per pull request: 0.71
- Merged pull requests: 11
- Bot issues: 0
- Bot pull requests: 40
Past Year
- Issues: 0
- Pull requests: 49
- Average time to close issues: N/A
- Average time to close pull requests: 6 days
- Issue authors: 0
- Pull request authors: 4
- Average comments per issue: 0
- Average comments per pull request: 0.71
- Merged pull requests: 11
- Bot issues: 0
- Bot pull requests: 40
Top Authors
Issue Authors
Pull Request Authors
- dependabot[bot] (40)
- cheminfo-bot (4)
- lpatiny (4)
- kmdouglass (1)
Top Labels
Issue Labels
Pull Request Labels
Packages
- Total packages: 1
-
Total downloads:
- npm 24 last-month
- Total dependent packages: 0
- Total dependent repositories: 0
- Total versions: 7
- Total maintainers: 2
npmjs.org: react-optics-diagrams
React components for displaying optical design diagrams.
- Homepage: https://github.com/cheminfo/react-optics-diagrams#readme
- License: BSD-3-Clause
-
Latest release: 3.0.2
published 12 months ago