### Fetch Whale Chart Data

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Constructs a URL with query parameters from various input fields for whale analysis and fetches the chart data. Includes comprehensive parameter collection and API request setup.

```javascript
function fetchChartWhale(){
  // Make query param string using the following parameters
  queryParam = new URLSearchParams();
  const stockcode = document.getElementById('stockcode').value;
  const startdate = document.getElementById('startdate').value;
  const enddate = document.getElementById('enddate').value;
  const clustering_method = document.getElementById('whale_clustering_method').value;
  const n_selected_cluster = document.getElementById('whale_n_selected_cluster').value;
  const period_mf = document.getElementById('whale_period_mf').value;
  const period_prop = document.getElementById('whale_period_prop').value;
  const period_pricecorrel = document.getElementById('whale_period_pricecorrel').value;
  const period_mapricecorrel = document.getElementById('whale_period_mapricecorrel').value;
  const period_vwap = document.getElementById('whale_period_vwap').value;
  const pow_high_prop = document.getElementById('whale_pow_high_prop').value;
  const pow_high_pricecorrel = document.getElementById('whale_pow_high_pricecorrel').value;
  const pow_high_mapricecorrel = document.getElementById('whale_pow_high_mapricecorrel').value;
  const pow_medium_prop = document.getElementById('whale_pow_medium_prop').value;
  const pow_medium_pricecorrel = document.getElementById('whale_pow_medium_pricecorrel').value;
  const pow_medium_mapricecorrel = document.getElementById('whale_pow_medium_mapricecorrel').value;
  const training_start_index = document.getElementById('whale_training_start_index').value;
  const training_end_index = document.getElementById('whale_training_end_index').value;
  const min_n_cluster = document.getElementById('whale_min_n_cluster').value;
  const max_n_cluster = document.getElementById('whale_max_n_cluster').value;
  const splitted_min_n_cluster = document.getElementById('whale_splitted_min_n_cluster').value;
  const splitted_max_n_cluster = document.getElementById('whale_splitted_max_n_cluster').value;
  const stepup_n_cluster_threshold = document.getElementById('whale_stepup_n_cluster_threshold').value;
  if (stockcode) queryParam.append('stockcode', stockcode);
  if (startdate) queryParam.append('startdate', startdate);
  if (enddate) queryParam.append('enddate', enddate);
  if (clustering_method) queryParam.append('clustering_method', clustering_method);
  if (n_selected_cluster) queryParam.append('n_selected_cluster', n_selected_cluster);
  if (period_mf) queryParam.append('period_mf', period_mf);
  if (period_prop) queryParam.append('period_prop', period_prop);
  if (period_pricecorrel) queryParam.append('period_pricecorrel', period_pricecorrel);
  if (period_mapricecorrel) queryParam.append('period_mapricecorrel', period_mapricecorrel);
  if (period_vwap) queryParam.append('period_vwap', period_vwap);
  if (pow_high_prop) queryParam.append('pow_high_prop', pow_high_prop);
  if (pow_high_pricecorrel) queryParam.append('pow_high_pricecorrel', pow_high_pricecorrel);
  if (pow_high_mapricecorrel) queryParam.append('pow_high_mapricecorrel', pow_high_mapricecorrel);
  if (pow_medium_prop) queryParam.append('pow_medium_prop', pow_medium_prop);
  if (pow_medium_pricecorrel) queryParam.append('pow_medium_pricecorrel', pow_medium_pricecorrel);
  if (pow_medium_mapricecorrel) queryParam.append('pow_medium_mapricecorrel', pow_medium_mapricecorrel);
  if (training_start_index) queryParam.append('training_start_index', training_start_index);
  if (training_end_index) queryParam.append('training_end_index', training_end_index);
  if (min_n_cluster) queryParam.append('min_n_cluster', min_n_cluster);
  if (max_n_cluster) queryParam.append('max_n_cluster', max_n_cluster);
  if (splitted_min_n_cluster) queryParam.append('splitted_min_n_cluster', splitted_min_n_cluster);
  if (splitted_max_n_cluster) queryParam.append('splitted_max_n_cluster', splitted_max_n_cluster);
  if (stepup_n_cluster_threshold) queryParam.append('stepup_n_cluster_threshold', stepup_n_cluster_threshold);
  url = `${API_ENDPOINT}/whaleanalysis/chart/whale?media_type=json&${queryParam.toString()}`;
  return fetch( url,
    {
      method:'GET',
      headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-API-KEY': API_KEY
      }
    }
  ).then(response => {
    if (!response.ok) {
      throw response;
    }
    return response;
  }).catch( error => {
    throw error;
  } );
};
```

--------------------------------

### Fetch and Render Whale Chart

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Fetches whale chart and cluster data, then renders both using the renderChart function. Manages visibility of cluster card.

```javascript
function getChartWhale(chartDiv){
 chartDiv = document.getElementById('chart');
 clusterDiv = document.getElementById('cluster');
 fetchChartWhale().then(response => {
 response.json().then(responseJson => {
 chartJson = responseJson["flow"]
 clusterJson = responseJson["cluster"]
 renderChart(chartDiv,chartJson);
 clusterCard = document.getElementById('clusterCard');
 clusterCard.classList.remove('opacity-0')
 clusterCard.classList.remove('hidden')
 clusterCard.classList.add('opacity-100')
 renderChart(clusterDiv,clusterJson);
 }).catch(error => {
 throw error;
 });
 }).catch(error => {
 console.log(error);
 });
 };
```

--------------------------------

### Fetch and Render Foreign Chart

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Fetches foreign chart data and renders it using the renderChart function. Includes error handling.

```javascript
function getChartForeign(){
 chartDiv = document.getElementById('chart');
 fetchChartForeign().then(response => {
 response.json().then(plotlyJson => {
 renderChart(chartDiv,plotlyJson);
 }).catch(error => {
 throw error;
 });
 }).catch(error => {
 console.log(error);
 });
 };
```

--------------------------------

### Initial Chart Load on DOMContentLoaded

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Fetches and renders the foreign chart when the DOM is fully loaded. Assumes 'chart' div is available.

```javascript
document.addEventListener('DOMContentLoaded', () => {
 chartDiv = document.getElementById('chart');
 getChartForeign();
 });
```

--------------------------------

### Event Listener for Chart Type Selection

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Handles click events on the 'getChart' button to switch between 'whale' and 'foreign' chart types. Updates loading and chart visibility accordingly.

```javascript
document.getElementById('getChart').addEventListener('click', () => {
 document.getElementById('chartCard').classList.add('opacity-0')
 document.getElementById('chartCard').classList.remove('opacity-100')
 document.getElementById('loadingDiv').classList.remove('opacity-0')
 document.getElementById('loadingDiv').classList.add('opacity-100')
 document.getElementById('clusterCard').classList.add('opacity-0')
 document.getElementById('clusterCard').classList.add('hidden')
 document.getElementById('clusterCard').classList.remove('opacity-100')
 analysismethod = document.getElementById('analysismethod').checked ? 'whale' : 'foreign';
 if (analysismethod == 'foreign') {
 getChartForeign();
 } else if (analysismethod == 'whale') {
 getChartWhale();
 }
 });
```

--------------------------------

### Render Chart with Plotly.js

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Renders a chart using Plotly.js given a chart div element and Plotly JSON data. Updates loading and chart visibility.

```javascript
function renderChart(chartDiv,plotlyJson){
 plotData = plotlyJson["data"]
 plotLayout = plotlyJson["layout"]
 Plotly.setPlotConfig(plotConfig);
 Plotly.react(chartDiv, plotData, plotLayout,{});
 document.getElementById('loadingDiv').classList.add('opacity-0')
 document.getElementById('loadingDiv').classList.remove('opacity-100')
 document.getElementById('chartCard').classList.remove('opacity-0')
 document.getElementById('chartCard').classList.add('opacity-100')
 }
```

--------------------------------

### Fetch Foreign Chart Data

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Constructs a URL with query parameters from input field values and fetches foreign chart data from the API. Includes error handling for the fetch request.

```javascript
function fetchChartForeign(){
  // Make query param string using the following parameters
  queryParam = new URLSearchParams();
  const stockcode = document.getElementById('stockcode').value;
  const startdate = document.getElementById('startdate').value;
  const enddate = document.getElementById('enddate').value;
  const period_mf = document.getElementById('foreign_period_mf').value;
  const period_prop = document.getElementById('foreign_period_prop').value;
  const period_pricecorrel = document.getElementById('foreign_period_pricecorrel').value;
  const period_mapricecorrel = document.getElementById('foreign_period_mapricecorrel').value;
  const period_vwap = document.getElementById('foreign_period_vwap').value;
  if (stockcode) queryParam.append('stockcode', stockcode);
  if (startdate) queryParam.append('startdate', startdate);
  if (enddate) queryParam.append('enddate', enddate);
  if (period_mf) queryParam.append('period_mf', period_mf);
  if (period_prop) queryParam.append('period_prop', period_prop);
  if (period_pricecorrel) queryParam.append('period_pricecorrel', period_pricecorrel);
  if (period_mapricecorrel) queryParam.append('period_mapricecorrel', period_mapricecorrel);
  if (period_vwap) queryParam.append('period_vwap', period_vwap);
  url = `${API_ENDPOINT}/whaleanalysis/chart/foreign?media_type=json&${queryParam.toString()}`;
  return fetch( url,
    {
      method:'GET',
      headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-API-KEY': API_KEY
      }
    }
  ).then(response => {
    if (!response.ok) {
      throw response;
    }
    return response;
  }).catch( error => {
    throw error;
  } );
};
```

--------------------------------

### Fetch Whale Chart Data

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Constructs API query parameters from HTML input values and fetches whale chart data. Handles response and errors.

```javascript
function fetchChartWhale() {
 let max_n_cluster = document.getElementById('whale_max_n_cluster').value;
 const splitted_min_n_cluster = document.getElementById('whale_splitted_min_n_cluster').value;
 const splitted_max_n_cluster = document.getElementById('whale_splitted_max_n_cluster').value;
 const stepup_n_cluster_threshold = document.getElementById('whale_stepup_n_cluster_threshold').value;
 if (stockcode) queryParam.append('stockcode', stockcode);
 if (startdate) queryParam.append('startdate', startdate);
 if (enddate) queryParam.append('enddate', enddate);
 if (clustering_method) queryParam.append('clustering_method', clustering_method)
 if (n_selected_cluster) queryParam.append('n_selected_cluster', n_selected_cluster)
 if (period_mf) queryParam.append('period_mf', period_mf)
 if (period_prop) queryParam.append('period_prop', period_prop)
 if (period_pricecorrel) queryParam.append('period_pricecorrel', period_pricecorrel)
 if (period_mapricecorrel) queryParam.append('period_mapricecorrel', period_mapricecorrel)
 if (period_vwap) queryParam.append('period_vwap', period_vwap)
 if (pow_high_prop) queryParam.append('pow_high_prop', pow_high_prop)
 if (pow_high_pricecorrel) queryParam.append('pow_high_pricecorrel', pow_high_pricecorrel)
 if (pow_high_mapricecorrel) queryParam.append('pow_high_mapricecorrel', pow_high_mapricecorrel)
 if (pow_medium_prop) queryParam.append('pow_medium_prop', pow_medium_prop)
 if (pow_medium_pricecorrel) queryParam.append('pow_medium_pricecorrel', pow_medium_pricecorrel)
 if (pow_medium_mapricecorrel) queryParam.append('pow_medium_mapricecorrel', pow_medium_mapricecorrel)
 if (training_start_index) queryParam.append('training_start_index', training_start_index)
 if (training_end_index) queryParam.append('training_end_index', training_end_index)
 if (min_n_cluster) queryParam.append('min_n_cluster', min_n_cluster)
 if (max_n_cluster) queryParam.append('max_n_cluster', max_n_cluster)
 if (splitted_min_n_cluster) queryParam.append('splitted_min_n_cluster', splitted_min_n_cluster)
 if (splitted_max_n_cluster) queryParam.append('splitted_max_n_cluster', splitted_max_n_cluster)
 if (stepup_n_cluster_threshold) queryParam.append('stepup_n_cluster_threshold', stepup_n_cluster_threshold)
 url = `${API_ENDPOINT}/whaleanalysis/chart/broker?media_type=json&api_type=all&${queryParam.toString()}`;
 return fetch( url, {
 method:'GET',
 headers:{
 'Content-Type': 'application/json',
 'Accept': 'application/json',
 'X-API-KEY': API_KEY
 }
 } ).then(response => {
 if (!response.ok) {
 throw response;
 }
 return response;
 }).catch( error => {
 throw error;
 } );
 };
```

--------------------------------

### Global Variables for API and Plot Configuration

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Defines global constants for API endpoint and key, and configures plot behavior including image export and interactive features. Ensure API_ENDPOINT and API_KEY are correctly set in your environment.

```javascript
const API_ENDPOINT = '{{ "undefined"|getenv("API_SCHEME") }}://{{ "undefined"|getenv("API_HOST") }}';
const API_KEY = '{{ "undefined"|getenv("WEB_API_KEY") }}';
const plotConfig = {
  "toImageButtonOptions":{
    "format":"png",
    "filename":"Quantist.io",
    "scale":1
  },
  "modeBarButtonsToAdd":["drawline","drawopenpath","drawclosedpath","drawcircle","drawrect","eraseshape"],
  "scrollZoom": true,
  "responsive": true
};
```

--------------------------------

### Navbar Search Focus Shortcut

Source: https://github.com/katagambar/quantist_test/blob/master/pages/_partials/_navbar.html

This JavaScript code snippet adds a keyboard shortcut (Ctrl+K) to focus the search input in the navbar. It prevents the default browser behavior for this key combination.

```javascript
document.addEventListener('keydown', function (event) { if (event.ctrlKey && event.key === 'k') { event.preventDefault(); document.getElementById('search-navbar').focus(); } });
```

--------------------------------

### Event Listeners for Resetting Parameters

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

Attaches click event listeners to buttons that trigger the 'eraseAllInputValues' function for specific parameter modals. This allows users to reset input fields easily.

```javascript
document.getElementById('resetParamForeign').addEventListener('click', function(){
  eraseAllInputValues('paramForeignModal');
});
document.getElementById('resetParamWhale').addEventListener('click', function(){
  eraseAllInputValues('paramWhaleModal');
});
```

--------------------------------

### Allow Only Numeric Input in JavaScript

Source: https://github.com/katagambar/quantist_test/blob/master/pages/_partials/_script.html

Use this function to prevent non-numeric characters from being entered into an input field. Attach it to the 'onkeypress' event of the input element.

```javascript
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
```

--------------------------------

### Function to Erase Input Values

Source: https://github.com/katagambar/quantist_test/blob/master/pages/index.html

A utility function to clear all input field values within a specified HTML element. This is useful for resetting forms or parameter sections.

```javascript
function eraseAllInputValues(id){
  var inputElements = document.getElementById(id).getElementsByTagName('input');
  for (var i = 0; i < inputElements.length; i++) {
    inputElements[i].value = '';
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.