前端练习：雅虎财经

600999.csv

app.js

// vue app

var data = {
  pageState: 'loading',
  deviceInfo: '',
  scroll: {
    x: 0
  },
  tick: [],
  stockList: [{
    code: 'AAPL',
    name: 'Apple Inc.',
    price: 140.58,
    rate: 0.37,
    ratePrev: 0.23
  }, {
    code: '600999.SH',
    name: '招商证券',
    price: 16.23,
    rate: 0.37,
    ratePrev: 0.23
  }, {
    code: 'AAPL',
    name: 'Apple Inc.',
    price: 140.58,
    rate: 0.37,
    ratePrev: 0.23
  }, {
    code: 'AAPL',
    name: 'Apple Inc.',
    price: 140.58,
    rate: 0.37,
    ratePrev: 0.23
  }],
  expList: [{
    name: '^HSI',
    value: 23907.06,
    rate: 0.34
  }, {
    name: '^TWII',
    value: 9632.69,
    rate: -0.08
  }, {
    name: '000001.SS',
    value: 3159.11,
    rate: -0.37
  }, {
    name: '^TWII',
    value: 9632.69,
    rate: -0.08
  }, {
    name: '000001.SS',
    value: 3159.11,
    rate: -0.37
  }],
  states: [{
    name: '基本',
    active: true,
  }, {
    name: '详细',
    active: false
  }, {
    name: '持仓',
    active: false
  }],
  newsList: [{
    keys: ['CMG', 'TSLA', 'AAPL'],
    title: `Chipotle No Amazon, Tesla, Apple or Google and That's Why You Must Dump the Stock`,
    abstract: `Many think Chipotle's stock is overvalued`,
    source: `TheStreet.com - 9 hrs ago`
  }, {
    keys: ['CMG', 'TSLA', 'AAPL'],
    title: `Chipotle No Amazon, Tesla, Apple or Google and That's Why You Must Dump the Stock`,
    abstract: `Many think Chipotle's stock is overvalued`,
    source: `TheStreet.com - 9 hrs ago`
  }]
};

let filters = {
  tradeDate: (t) => {
    if (t <= 120) {
      base = 9.5*60;
    }
    else {
      base = 13*60 - 120;
    }
    let v = base + t;
    let hrs = (v / 60) >> 0;
    let mis = v % 60;
    return `${hrs<10?'0'+hrs:hrs}:${mis<10?'0'+mis:mis}`;
  }
};

var app = new Vue({ data: data, mounted: mounted, filters: filters }).$mount('#app');

function mounted() {
  data.deviceInfo = navigator.userAgent;
  let tickWidth = 5;
  let sliderRBound = 1200;

  let drawVolBar = initDrawVolBar({
    top: 150,
    right: 0,
    bottom: 0,
    left: 0
  });
  let drawKLine = initDrawKLine({
    top: 0,
    right: 0,
    bottom: 55,
    left: 0
  });
  let drawCursorLine = initDrawCursorLine({
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  });

  let parseDate = d3.timeParse('%Y-%m-%d');
  let setCursorLineX = null;
  d3.csv('600999.csv', (d, i) => {
    d.index = i;
    d.date = parseDate(d['日期']);
    d.close = +d['收盘价'];
    d.prevClose = +d['前收盘'];
    d.vol = +d['成交量'];
    return d;
  }, (err, d) => {
    if (err) data.pageState = 'error';
    else {
      d = d.reverse();
      data.tick = d;
      sliderRBound = (d.length - 1) * tickWidth;
      drawVolBar(d);
      drawKLine(d);

      setCursorLineX = drawCursorLine(d);
      data.pageState = 'ready';
    }
  });

  let sliderEventLayer = document.querySelector('#event-layer');
  let sliderSightLayer = document.querySelector('#sight-layer');
  let oldx = 0;
  sliderEventLayer.addEventListener('scroll', (ev) => {
    let x = ev.target.scrollLeft;
    if (x < 0) x = 0;
    if (x > sliderRBound) x = sliderRBound;
    let newx = +((x / tickWidth).toFixed(0));
    if (oldx === newx) return;
    oldx = newx;
    data.scroll.x = newx;
    sliderSightLayer.scrollLeft = newx * tickWidth;

    if (setCursorLineX !== null) {
      setCursorLineX(data.tick[newx].index);
    }
  }, false);

  let kc = document.querySelector('#static-layer');
}



var es6 = true;

default.css

body {
  padding: 0;
  margin: 0;
  user-selection: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.container {
  margin: 0;
  padding: 0;
  position: relative;
}

.fixed-background {
  position: fixed;
  padding-top: 45px;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: #3834b1;
  z-index: 10;
}

.fixed-front {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #3834b1;
  z-index: 30;
}

.header-bar {
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  color: white;
}

.search-bar {
  flex: 1;
  font-size: 14px;
  padding: .3em;
  padding-left: 10px;
  border-radius: 5px;
  width: 100%;
  background-color: rgba(255, 255, 255, .3);
  color: white;
}

.search-bar i,
.search-bar span,
.menu-button i {
  vertical-align: middle;
  line-height: 1.6em;
}

.menu-btn {
  margin-right: 15px;
  padding-top: 0.3em;
}

.horizontal-list {
  width: 100%;
  white-space: nowrap;
  overflow: scroll;
  padding: 18px 0;
  -webkit-overflow-scrolling: touch;
}

.header-list-item {
  display: inline-block;
  width: 5.5em;
  margin-left: 10px;
  border-left: 4px solid white;
  padding-left: 6px;
}

.header-list-item p {
  margin: 0;
  padding: 0;
  color: white;
}

.header-list-item p.h {
  font-size: 15px;
}

.header-list-item p.v,
.header-list-item p.r {
  font-size: 12px;
}

.header-list-item.positive {
  border-color: #eb4844;
}

.header-list-item.negative {
  border-color: #5cc271;
}

.header-list-item.positive p.r {
  color: #eb4844;
}

.header-list-item.negative p.r {
  color: #5cc271;
}

.content-container {
  z-index: 11;
  margin: 0;
  margin-top: 140px;
  position: relative;
  background: #efefef;
  border-radius: 5px;
  /* height: 1000px; */
  overflow: scroll;
}

.list-switcher .list-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}

.list-switcher .list-title .drop-icon {
  background: #ddd;
  padding: 0 .18em;
  /* width: 10px; */
  border-radius: 3px;
  line-height: 10px;
  display: inline-block;
  /* vertical-align: middle; */
}

.list-switcher .list-title .action-btn {
  color: #464646;
  font-size: 14px;
  font-weight: 100;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.list-state-control {
  text-align: center;
  padding: 15px 0;
  /* padding-top: 15px; */
}

ul.states {
  list-style: none;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  display: flex;
  flex-direction: row;
}

ul.states li {
  font-size: 12px;
  display: inline;
  padding: .4em 2em;
  border: 1px solid #3834b1;
  color: #3834b1;
  margin-left: -1px;
  flex: 1;
}

ul.states li:first-child {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

ul.states li:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

ul.states li.active {
  background: #3834b1;
  color: white;
}

ul.basic-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.basic-list li {
  flex: 1;
  border: .5px solid #dcdcdc;
  border-left: none;
  border-right: none;
  margin-top: -.5px;
}

.basic-content-container {
  display: flex;
  flex-direction: row;
}

.list-view {
  padding-bottom: .1px;
}

.stock-name {
  flex: 7;
}

.stock-price {
  flex: 2.5;
}

.stock-rate {
  flex: 4;
}

p.code,
p.price,
p.rate {
  margin: 0;
  padding: .35em 0;
  margin-top: -.5px;
  font-size: 18px;
}

p.price {
  text-align: right;
  padding-right: .5em;
}

p.rate {
  text-align: center;
  color: white;
  background: gray;
}

p.desc,
p.prev {
  font-size: 10px;
  margin: 0;
  margin-bottom: 15px;
}

p.prev {
  text-align: right;
}

.list-container {
  padding: 0 15px;
  box-shadow: 0 2px 4px #aaa;
  z-index: 13;
  /* width: 100%; */
  background: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: .5px;
}

.news-list-container {
  padding-bottom: 10px;
  margin-top: 0px;
  background: #efefef;
  z-index: 12;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li {
  margin: 15px;
  padding: 5px 20px;
  background: white;
  border: .5px solid #ddd;
  border-radius: 2px;
  box-shadow: 2px 2px 3px #ddd;
}

.news-list li p.title {
  font-size: 18px;
  margin: 10px 0;
  font-weight: 600;
}

.news-list li p.abstract {
  font-size: 14px;
  margin: 10px 0;
  font-weight: 300;
}

.news-list li p.source {
  font-size: 14px;
  color: gray;
  margin: 10px 0;
}

p.add-symbol {
  font-size: 14px;
}

p.keys {
  margin: 0;
  margin-top: 10px;
  color: #438df7;
  font-size: 14px;
}

p.keys span.key-item:not(:first-child):before {
  content: '|';
  margin: 6px;
  color: #dcdcdd;
  vertical-align: top;
}

/* slider */

.slider-container {
  position: relative;
}

.proc-slider {
  margin: 0;
  box-shadow: inset 0 0 3px gray;
  overflow: scroll;
  position: relative;
  /*flex-direction: row;*/
  -webkit-overflow-scrolling: touch;
  padding: 5px calc(50% - .5px);
  white-space: nowrap;
}

.proc-slider.event {
  opacity: 0;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  top: 0px;
}

.proc-slider .tick {
  margin: 0 2px;
  border-left: 1px solid #ddd;
  display: inline;
  padding: 5px 0;
  line-height: 40px;
}

.proc-slider .tick-bound {
  padding: 0 10px;
}

.proc-slider .tick:nth-child(5n+1) {
  border-left: 1px solid gray;
}

.proc-slider .tick:first-child {
  margin-left: 0px;
}

.proc-slider .tick:last-child {
  margin-right: 0px;
}

.slider-bg {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 0;
}

.slider-bg .tick {
  border-left: 1px solid red;
  display: inline-block;
  height: 50px;
}

/* canvas 画布 */

.canvas-container {
  position: relative;
  // box-shadow: inset 0 0 3px gray;
  overflow: hidden;
  margin-top: 10px;
}

.canvas-container #animation-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.canvas-container .btn-layer {
  position: absolute;
  left: 0;
  top: 0;
}

svg#static-layer {
  transform-origin: left;
  // transform: scaleX(0.359375);
}

path.k-line {
  fill: none;
  stroke: #4682b4;
  stroke-width: 1px;
}

line.cursor-line {
  stroke:rgb(150,148,109);
  shape-rendering:crispEdges;
  stroke-width:1px;
  stroke-opacity:0.3;
}

.current-label p {
  margin: 5px 0;
  font-size: 10px;
}

draw.js

function initDrawVolBar(margin) {
  let svg = d3.select('svg#static-layer');
  let svgWidth = parseInt(svg.style('width'));
  let svgHeight = parseInt(svg.style('height'));
  let width = svgWidth - margin.left - margin.right;
  let height = svgHeight - margin.top - margin.bottom;

  let x = d3.scaleBand().range([0, width]);
  let y = d3.scaleLinear().rangeRound([height, 0]);

  let g = svg.append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  return function (data) {
    // x.domain(d3.extent(data, d => d.index));
    x.domain(data.map(d => d.index));
    y.domain([0, d3.max(data, d => d.vol)]);

    g.selectAll('.bar')
      .data(data)
      .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', d => x(d.index))
        .attr('y', d => y(d.vol))
        .style('fill', d => (d.close > d.prevClose ? '#eb4844' : '#5cc271'))
        .attr('width', x.bandwidth())
        .attr('height', d => (height - y(d.vol)));
  };
}


function initDrawKLine(margin) {
  let svg = d3.select('svg#static-layer');
  let svgWidth = parseInt(svg.style('width'));
  let svgHeight = parseInt(svg.style('height'));
  let width = svgWidth - margin.left - margin.right;
  let height = svgHeight - margin.top - margin.bottom;

  let x = d3.scaleTime().range([width, 0]);
  let y = d3.scaleLinear().rangeRound([height, 0]);

  let g = svg.append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  let line = d3.line()
    .curve(d3.curveBasis)
    .x(d => x(d.index))
    .y(d => y(d.v));

  return function (data) {
    let min = d3.min(data, d => d.close);
    let max = d3.max(data, d => d.close);
    console.log(min, max);
    x.domain(d3.extent(data, d => d.index));
    y.domain([min, max]);

    let vals = [{
      id: 'k-line',
      values: data.map(d => {
        return {
          index: d.index,
          v: d.close
        };
      })
    }];

    let l = g.selectAll('line')
      .data(vals)
      .enter().append('g')
        .attr('class', 'city');

    l.append('path')
      .attr('class', d => d.id)
      .attr('d', d => line(d.values));
  };
}


function initDrawCursorLine(margin) {
  let svg = d3.select('svg#static-layer');
  let svgWidth = parseInt(svg.style('width'));
  let svgHeight = parseInt(svg.style('height'));
  let width = svgWidth - margin.left - margin.right;
  let height = svgHeight - margin.top - margin.bottom;

  let x = d3.scaleBand().range([0, width]);
  let y1 = margin.top;
  let y2 = y1 + height;

  let g = svg.append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  return function (data) {
    x.domain(data.map(d => d.index));

    let halfBandwidth = x.bandwidth()/2;
    function xx(index) {
      let offset = x(index);
      return offset + halfBandwidth; 
    }

    let d3Line = g.append('line')
      .attr('x1', -1)
      .attr('y1', y1)
      .attr('x2', -1)
      .attr('y2', y2)
      .attr('class', 'cursor-line');

    return function (index) {
      let pos = xx(index);
      d3Line.attr('x1', pos).attr('x2', pos);
    };
  };
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scaleble=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="./default.css">
  <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title>Practice - Yahoo! Finance</title>
</head>

<body>
  <div class="container" id="app">
    <div class="fixed-background">
      <div class="horizontal-list">
        <div class="header-list-item" v-bind:class="e.rate > 0 ? 'positive' : 'negative'" v-for="e in expList">
          <p class="h">{{e.name}}</p>
          <p class="v">{{e.value}}</p>
          <p class="r">{{e.rate}}</p>
        </div>
      </div>
    </div>
    <div class="fixed-front">
      <div class="header-bar">
        <div class="header-item menu-btn"><i class="fa fa-bars"></i></div>
        <div class="header-item search-bar">
          <i class="fa fa-search"></i>
          <span>搜索股票</span>
        </div>
      </div>
    </div>
    <div class="content-container">
      <div class="list-container">
        <div class="list-switcher">
          <p class="list-title">
            <!--<span class="action-btn pull-left"><i class="fa fa-refresh"></i></span>-->
            <span>我的关注 </span>
            <span class="drop-icon"><i class="fa fa-angle-down"></i></span>
            <span class="action-btn pull-right"><i class="fa fa-ellipsis-h"></i></span>
          </p>
        </div>
        <div class="slider-container">
          <div class="canvas-container">
            <!-- <svg id="static-layer" width="960" height="200"></svg> -->
            <svg id="static-layer" height="200" style="width: 100%;"></svg>
            <!-- <svg id="animation-layer" width="345" height="200"></svg> -->
            <!-- <div class="btn-layer">hello, world</div> -->
          </div>
          <div v-show="pageState === 'ready'">
            <!-- 读数 -->
            <div class="current-label" v-if="tick.length > 0">
              <p>时间：{{tick[scroll.x]['日期']}}</p>
              <p>收盘价：{{tick[scroll.x].close}}</p>
              <p>成交量：{{tick[scroll.x].vol}}</p>
            </div>
            <div style="position: relative;">
              <!-- 刻度 -->
              <div class="proc-slider" id="sight-layer">
                <div class="tick" v-for="t in tick"></div>
              </div>
              <!-- 指针 -->
              <div class="slider-bg">
                <div class="tick"></div>
              </div>
              <!-- 滑动层 -->
              <div class="proc-slider event" id="event-layer">
                <div class="tick" v-for="t in tick"></div>
              </div>
            </div>
            <div>
              <p>有bug？欢迎截图反馈:)</p>
              <p id="dev-info">{{deviceInfo}}</p>
            </div>
          </div>
        </div>
        <div v-show="pageState === 'loading'">
          <p style="text-align: center"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i> 正在加载</p>
        </div>
        <div v-show="pageState === 'error'">
          <p style="text-align: center">加载文件“600999.csv”时出现错误</p>
        </div>
        <div class="list-state-control">
          <div class="tabs">
            <ul class="states">
              <li v-for="s in states" v-bind:class="s.active ? 'active' : ''">{{s.name}}</li>
            </ul>
          </div>
        </div>
        <div class="list-view">
          <div class="basic-list-view">
            <ul class="basic-list">
              <li v-for="s in stockList">
                <div class="basic-content-container">
                  <div class="stock-name">
                    <p class="code">{{s.code}}</p>
                    <p class="desc">{{s.name}}</p>
                  </div>
                  <div class="stock-price">
                    <p class="price">{{s.price}}</p>
                  </div>
                  <div class="stock-rate">
                    <p class="rate">{{s.rate}}%</p>
                    <p class="prev">{{s.ratePrev}}%</p>
                  </div>
                </div>
              </li>
            </ul>
            <div>
              <p class="add-symbol"><i class="fa fa-plus"></i> 添加股票</p>
            </div>
          </div>
        </div>
      </div>
      <div class="news-list-container">
        <ul class="news-list">
          <li v-for="n in newsList">
            <p class="keys"><span class="key-item" v-for="key in n.keys">{{key}}</span></p>
            <p class="title">{{n.title}}</p>
            <p class="abstract">{{n.abstract}}</p>
            <p class="source">{{n.source}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="./draw.js"></script>
  <script src="./app.js"></script>
  <script>
    var es6 = es6 || es6
    if (!es6) {
      alert('app.js throw exception');
    }
  </script>
</body>

</html>