mz-health/OMOP
mz-health
/
OMOP
mirror of https://github.com/OHDSI/CommonDataModel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add zoom function to erd

This commit is contained in:
Clair Blacketer 2023-02-21 12:59:28 -05:00
parent c61839c26b
commit eeb4f27985
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/cdm54erd.html
View File

@ -423,14 +423,33 @@ $(document).ready(function () {
</div> </div>
<style type="text/css">
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
</style>
<script type="text/javascript">
$(document).ready(function() {
$('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
// onClick function for all plots (img's)
$('img:not(.zoomImg)').click(function() {
$('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
$('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
});
// onClick function for zoomImg
$('img.zoomImg').click(function() {
$('.zoomDiv').css({opacity: '0', width: '0%'});
});
});
</script>
<p>Late in 2022 we held a community contest to find the best <p>Late in 2022 we held a community contest to find the best
entity-relationship diagram and we crowned two winners! Martijn Schuemie entity-relationship diagram and we crowned two winners! Martijn Schuemie
and Renske Los created the best printable version and Vishnu and Renske Los created the best printable version and Vishnu
Chandrabalan created the best <a Chandrabalan created the best <a
href="http://omop-erd.surge.sh/">interactive version</a>.</p> href="http://omop-erd.surge.sh/">interactive version</a>.</p>
<div class="figure"> <div class="figure">
<img src="images/erd.jpg" alt="" /> <img src="images/erd.jpg" style="width:150.0%" alt="" />
<p class="caption">CDM v5.4 Printable ERD</p> <p class="caption">CDM v5.4 Printable ERD - <a
href="https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg">click
here to download</a></p>
</div> </div>

21
rmd/cdm54erd.Rmd
View File

@ -4,6 +4,25 @@ output:
html_document html_document
--- ---
```{css zoom-lib-src, echo = FALSE}
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
```
```{js zoom-jquery, echo = FALSE}
$(document).ready(function() {
$('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
// onClick function for all plots (img's)
$('img:not(.zoomImg)').click(function() {
$('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
$('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
});
// onClick function for zoomImg
$('img.zoomImg').click(function() {
$('.zoomDiv').css({opacity: '0', width: '0%'});
});
});
```
Late in 2022 we held a community contest to find the best entity-relationship diagram and we crowned two winners! Martijn Schuemie and Renske Los created the best printable version and Vishnu Chandrabalan created the best [interactive version](http://omop-erd.surge.sh/). Late in 2022 we held a community contest to find the best entity-relationship diagram and we crowned two winners! Martijn Schuemie and Renske Los created the best printable version and Vishnu Chandrabalan created the best [interactive version](http://omop-erd.surge.sh/).
![CDM v5.4 Printable ERD](images/erd.jpg) ![CDM v5.4 Printable ERD - [click here to download](https://github.com/OHDSI/CommonDataModel/raw/main/rmd/images/erd.jpg)](images/erd.jpg){width=150%}