samples/demo/mdayline.html from seerline/clchart

samples/demo/mdayline.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Cousine|Roboto+Mono" rel="stylesheet">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ClChat Demo</title>
  <link rel="stylesheet" href="../css/client.css">
</head>
<body>
  <div id="container" class="container">
  </div>

  <script src="../ClChart.js"></script>
  <script src="../SisClient.js"></script>
  <script src="./config.js"></script>
  <script>
    const container = document.getElementById('container')

    const syscfg = {
      scale: window.devicePixelRatio,
      axisPlatform: 'web', // 'phone' | 'web'
      container: container
    }
    const  mainCanvas ={
      width: container.offsetWidth * window.devicePixelRatio,
      height: container.offsetHeight * window.devicePixelRatio,
    }
    // Create a single stock Chart instance
    const Chart = ClChart.createSingleChart(syscfg)
    let isInited = false;

    function initLayout() {
      if (isInited) return; 
      isInited = true;

      Chart.clearLayout();
      let mainHeight = mainCanvas.height * 2 / 3
      // 设置画布区域布局
      const mainLayoutCfg = {
        layout: ClChart.DEF_CHART.CHART_LAYOUT,
        config: ClChart.DEF_CHART.CHART_MDAY,
        rectMain: {
          left: 0,
          top: 0,
          width: mainCanvas.width,
          height: mainHeight
        }
      }
      Chart.createChart('user.mday.line', 'system.chart', mainLayoutCfg, function (result) {
        //  console.log(result)
      })
      const volumeLayoutCfg = {
        layout: ClChart.DEF_CHART.CHART_LAYOUT,
        config: ClChart.DEF_CHART.CHART_MDAYVOL,
        rectMain: {
          left: 0,
          top: mainHeight,
          width: mainCanvas.width,
          height: mainCanvas.height - mainHeight
        }
      }
      Chart.createChart('user.mday.vol', 'system.chart', volumeLayoutCfg, function (result) {
        //  console.log(result)
      })
    }    
    function paintDrawline() {
      const code = sisdb.code

      let infoData
      Promise.all([
        sisClient.getData(code, 'info'),
        sisClient.getData(code, 'mday', { search:{ start:-1200,stop:-1 } }),
        sisClient.getData(code, 'now')
      ])
      .then(([infoData,  mdayData,  nowData]) => {
        Chart.clear()
        Chart.initData(sisdb.tradeDate, ClChart.DEF_DATA.STOCK_TRADETIME)
        Chart.setData('INFO', ClChart.DEF_DATA.FIELD_INFO, infoData.values)
        Chart.setData('MDAY', ClChart.DEF_DATA.FIELD_TICK, mdayData.values)
        Chart.setData('NOW', ClChart.DEF_DATA.FIELD_NOW, nowData.values)
        
        Chart.bindData(Chart.getChart('user.mday.line'), 'MDAY')
        Chart.bindData(Chart.getChart('user.mday.vol'), 'MDAY')

        Chart.onPaint()

      })
    }
      
    window.onload = () => {
      initLayout()
      paintDrawline()
    }
  </script>
</body>
</html>