<commit_before><html>

  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../bower_components/plottable/plottable.css">
    <link rel="stylesheet" type="text/css" href="../dist/omh-web-visualizations-all.css">
    <style>
      body {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #7B7B7B;
      }
      * {
        box-sizing: border-box;
      }
      .page {
        max-width: 900px;
        margin: 0 auto;
      }
      .label {
        display: inline-block;
        width: 70px;
      }
      input[type=text] {
        width: 500px;
      }
      .chart-data-selector {
        border-bottom: 1px solid #eee;
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .demo-chart {
        width: 100%;
        height: 300px;
        margin-top: 20px;
      }
      .demo-chart .table{
        margin-bottom: 0;
      }
      .additional-information {
        padding-bottom: 40px;
        margin-bottom: 40px;
      }
      .datapoint-details {
        padding: 10px;
        white-space: pre;
        width: 100%;
        margin: 0 auto;
        text-align: left;
        border: 1px solid #eee;
        font-family: Courier;
        overflow-x: auto;
      }
      .datapoint-details h3 {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        display: block;
        padding-bottom: 5px;
        margin-top: 0;
        font-weight: normal;
        border-bottom: 1px solid #eee;
      }
      .loading-message {
        font-style: italic;
        padding-top: 150px;
        padding-bottom: 150px;
        text-align: center;
      }
      .loading-message.hidden,
      svg.plottable.hidden {
        display: none;
      }

      .omh-tooltip .value.threshold-above-threshold {
        color:#ce5050;
      }

      .omh-tooltip .value.threshold-warning {
        color:#e8ac4e;
      }

    </style>
  </head>

  <body>
    <div class="page">
      <div class="chart-data-selector">
          <h1>Open mHealth Web Visualization Library: Charts</h1>
          <p>
            This demo shows a chart with Open mHealth's default display settings for several supported measures. Try choosing a measure from the menu below and clicking update. If you would like to test a data file, enter the url before updating.
          </p>

          <p>
            <span class="label">Data URL:</span> <input class="update-url" type="text" value="1yr.json"></input> <button class="update-button">update</button>
          </p>
          <p>
            <span class="label">Measure:</span>
            <select name="measures" class="measure-select">
              <option value="body_weight">Body weight</option>
              <option value="heart_rate">Heart rate</option>
              <option value="systolic_blood_pressure, diastolic_blood_pressure" selected>Blood pressure</option>
              <option value="minutes_moderate_activity, step_count">Physical activity</option>
              <option value="step_count">Just step count</option>
              <option value="distance">Distance</option>
            </select>
          </p>
      </div>
      <div class="demo-chart-container">
          <div class="loading-message">
            Loading data...
          </div>
          <svg class="demo-chart">
          </svg>
      </div>
      <div class="additional-information">
        <div class="datapoint-details">
        </div>
      </div>
    </div>
  </body>

  <script src="../bower_components/d3/d3.min.js"></script>
  <script src="../bower_components/d3-tip/index.js"></script>
  <script src="../bower_components/plottable/plottable.js"></script>
  <script src="../bower_components/moment/moment.js"></script>
  <script src="../dist/omh-web-visualizations-all.js"></script>

  <script>

    /*=================================================================
    =            Variable defninitions and initializations            =
    =================================================================*/

    var chart = null;

    //data is reused if url is not changed
    var currentData = null;
    var currentUrl = '';

    var loadingMessage = d3.select('.loading-message');
    var datapointDetails = d3.select('.datapoint-details');
    var clickInteraction = null;
    var clickInteractionComponent = null;

    //an example of some options for custom chart appearance
    var options = {
        'userInterface':{
          'axes': {
            'yAxis':{
              'visible': true
            },
            'xAxis':{
              'visible': true
            }
          }
        },
        'measures': {
          'distance': {
              'valueKeyPath': 'body.distance.value',
              'range': { 'min':0, 'max':10000 },
              'units': 'm',
              'timeQuantizationLevel': OMHWebVisualizations.QUANTIZE_MONTH,
              'seriesName': 'Distance',
              'chart': {
                  'type' : 'clustered_bar',
                  'daysShownOnTimeline': { 'min': 90, 'max': 365 }
              }
          },
          'systolic_blood_pressure': {
            'thresholds': [
              { 'color':{ 'fill': '#e8ac4e', 'stroke': '#745628' }, 'max': 129, 'name': 'warning' },
              { 'max': 120 },
              { 'color':{ 'fill': '#e8ac4e', 'stroke': '#745628' }, 'min': 107 }
            ],
            'chart': {
              'pointFillColor' : '#4a90e2',
              'pointStrokeColor' : '#0066d6',
              'aboveThesholdPointFillColor' : '#fe0606',
              'aboveThesholdPointStrokeColor' : '#663333',
              'daysShownOnTimeline': { 'min': 0, 'max': Infinity }
            },
            'range': { 'min':60, 'max':140 },
          },
          'diastolic_blood_pressure': {
              'thresholds': { 'max': 80 },
          }
        }
    };

    /*=====  End of Variable defninitions and initializations  ======*/


    /*===================================================
    =            Example UI helper functions            =
    ===================================================*/
    
    var hideLoadingMessage = function(){
      loadingMessage.classed('hidden',true);
    };

    var updateLoadingMessage = function( amountLoaded ){
      loadingMessage.classed('hidden',false);
      loadingMessage.text('Loading data... ' + Math.round( amountLoaded * 100 ) + '%');
    };

    var showLoadingError = function( error ){
      loadingMessage.classed('hidden',false);<commit_msg>Improve examples for thresholds, tooltips, and legends<commit_after><html>

  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../bower_components/plottable/plottable.css">
    <link rel="stylesheet" type="text/css" href="../dist/omh-web-visualizations-all.css">
    <style>
      body {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #7B7B7B;
      }
      * {
        box-sizing: border-box;
      }
      .page {
        max-width: 900px;
        margin: 0 auto;
      }
      .label {
        display: inline-block;
        width: 70px;
      }
      input[type=text] {
        width: 500px;
      }
      .chart-data-selector {
        border-bottom: 1px solid #eee;
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .demo-chart {
        width: 100%;
        height: 300px;
        margin-top: 20px;
      }
      .demo-chart .table{
        margin-bottom: 0;
      }
      .additional-information {
        padding-bottom: 40px;
        margin-bottom: 40px;
      }
      .datapoint-details {
        padding: 10px;
        white-space: pre;
        width: 100%;
        margin: 0 auto;
        text-align: left;
        border: 1px solid #eee;
        font-family: Courier;
        overflow-x: auto;
      }
      .datapoint-details h3 {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        display: block;
        padding-bottom: 5px;
        margin-top: 0;
        font-weight: normal;
        border-bottom: 1px solid #eee;
      }
      .loading-message {
        font-style: italic;
        padding-top: 150px;
        padding-bottom: 150px;
        text-align: center;
      }
      .loading-message.hidden,
      svg.plottable.hidden {
        display: none;
      }

      /* styles for tooltips */
      .omh-tooltip .value.threshold-systolic_blood_pressure-above-threshold {
        color:#ce5050;
      }

      .omh-tooltip .value.threshold-warning,
      .omh-tooltip .value.threshold-diastolic_blood_pressure-above-threshold
       {
        color:#e8ac4e;
      }

    </style>
  </head>

  <body>
    <div class="page">
      <div class="chart-data-selector">
          <h1>Open mHealth Web Visualization Library: Charts</h1>
          <p>
            This demo shows a chart with Open mHealth's default display settings for several supported measures. Try choosing a measure from the menu below and clicking update. If you would like to test a data file, enter the url before updating.
          </p>

          <p>
            <span class="label">Data URL:</span> <input class="update-url" type="text" value="1yr.json"></input> <button class="update-button">update</button>
          </p>
          <p>
            <span class="label">Measure:</span>
            <select name="measures" class="measure-select">
              <option value="body_weight">Body weight</option>
              <option value="heart_rate">Heart rate</option>
              <option value="systolic_blood_pressure, diastolic_blood_pressure" selected>Blood pressure</option>
              <option value="minutes_moderate_activity, step_count">Physical activity</option>
              <option value="step_count">Just step count</option>
              <option value="distance">Distance</option>
            </select>
          </p>
      </div>
      <div class="demo-chart-container">
          <div class="loading-message">
            Loading data...
          </div>
          <svg class="demo-chart">
          </svg>
      </div>
      <div class="additional-information">
        <div class="datapoint-details">
        </div>
      </div>
    </div>
  </body>

  <script src="../bower_components/d3/d3.min.js"></script>
  <script src="../bower_components/d3-tip/index.js"></script>
  <script src="../bower_components/plottable/plottable.js"></script>
  <script src="../bower_components/moment/moment.js"></script>
  <script src="../dist/omh-web-visualizations-all.js"></script>

  <script>

    /*=================================================================
    =            Variable defninitions and initializations            =
    =================================================================*/

    var chart = null;

    //data is reused if url is not changed
    var currentData = null;
    var currentUrl = '';

    var loadingMessage = d3.select('.loading-message');
    var datapointDetails = d3.select('.datapoint-details');
    var clickInteraction = null;
    var clickInteractionComponent = null;

    //an example of some options for custom chart appearance
    var options = {
        'userInterface':{
          'axes': {
            'yAxis':{
              'visible': true
            },
            'xAxis':{
              'visible': true
            }
          },
          'legend': true,
        },
        'measures': {
          'distance': {
              'valueKeyPath': 'body.distance.value',
              'range': { 'min':0, 'max':10000 },
              'units': 'm',
              'timeQuantizationLevel': OMHWebVisualizations.QUANTIZE_MONTH,
              'seriesName': 'Distance',
              'chart': {
                  'type' : 'clustered_bar',
                  'daysShownOnTimeline': { 'min': 90, 'max': 365 }
              }
          },
          'systolic_blood_pressure': {
            'seriesName': 'Blood Pressure',
            'thresholds': [
              { 'color':{ 'fill': '#e8ac4e', 'stroke': '#745628' }, 'max': 129, 'name': 'warning' },
              { 'max': 120 },
              { 'color':{ 'fill': '#e8ac4e', 'stroke': '#745628' }, 'min': 107 }
            ],
            'chart': {
              'pointFillColor' : '#4a90e2',
              'pointStrokeColor' : '#0066d6',
              'aboveThesholdPointFillColor' : '#fe0606',
              'aboveThesholdPointStrokeColor' : '#663333',
              'daysShownOnTimeline': { 'min': 0, 'max': Infinity }
            },
            'range': { 'min':60, 'max':140 },
          },
          'diastolic_blood_pressure': {
              'seriesName': 'Blood Pressure',
              'thresholds': { 'max': 80 },
          }
        }
    };

    /*=====  End of Variable defninitions and initializations  ======*/


    /*===================================================
    =            Example UI helper functions            =
    ===================================================*/
    
    var hideLoadingMessage = function(){
      loadingMessage.classed('hidden',true);
    };

    var updateLoadingMessage = function( amountLoaded ){
      loadingMessage.classed('hidden',false);
      loadingMessage.text('Loading data... ' + Math.round( amountLoaded * 100 ) + '%');
    };

    var showLoadingError = function( error ){
      loadingMessage.classed('hidden',false);
{'fraction_non_alphanumeric': 0.1719316416364578, 'fraction_numerical': 0.019974846489605683, 'mean_word_length': 1.9483097055616139, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '72828', 'n_tokens_mistral': 4180, 'n_tokens_neox': 3824, 'n_words': 806}