JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<script src="https://techanjs.org/techan.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
  <div id="wrapper">
    <main>
      <section class="charts">

      </section>
    </main>
  </div>

CSS

text {
    fill: #000;
  }

  text.symbol {
    fill: #BBBBBB;
  }

  path {
    fill: none;
    stroke-width: 1;
  }

  path.candle {
    stroke: #000000;
  }

  path.candle.body {
    stroke-width: 0;
  }

  path.candle.up {
    fill: #00AA00;
    stroke: #00AA00;
  }

  path.candle.down {
    fill: #FF0000;
    stroke: #FF0000;
  }

  .close.annotation.up path {
    fill: #00AA00;
  }

  path.volume {
    fill: #DDDDDD;
  }

  .indicator-plot path.line {
    fill: none;
    stroke-width: 1;
  }

  .ma-0 path.line {
    stroke: #1f77b4;
  }

  .ma-1 path.line {
    stroke: #aec7e8;
  }

  .ma-2 path.line {
    stroke: #ff7f0e;
  }

  button {
    position: absolute;
    right: 110px;
    top: 25px;
  }

  path.macd {
    stroke: #0000AA;
  }

  path.signal {
    stroke: #FF9999;
  }

  path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 0;
    stroke-opacity: 0.5;
  }

  path.difference {
    fill: #BBBBBB;
    opacity: 0.5;
  }

  path.rsi {
    stroke: #000000;
  }

  path.overbought, path.oversold {
    stroke: #FF9999;
    stroke-dasharray: 5, 5;
  }

  path.middle, path.zero {
    stroke: #BBBBBB;
    stroke-dasharray: 5, 5;
  }

  .analysis path, .analysis circle {
    stroke: blue;
    stroke-width: 0.8;
  }

  .trendline circle {
    stroke-width: 0;
    display: none;
  }

  .mouseover .trendline path {
    stroke-width: 1.2;
  }

  .mouseover .trendline circle {
    stroke-width: 1;
    display: inline;
  }

  .dragging .trendline path, .dragging .trendline circle {
    stroke: darkblue;
  }

  .interaction path, .interaction circle {
    pointer-events: all;
  }

  .interaction .body {
    cursor: move;
  }

  .trendlines .interaction .start, .trendlines .interaction .end {
    cursor: nwse-resize;
  }

  .supstance path {
    stroke-dasharray: 2, 2;
  }

  .supstances .interaction path {
    pointer-events: all;
    cursor: ns-resize;
  }

  .mouseover .supstance path {
    stroke-width: 1.5;
  }

  .dragging .supstance path {
    stroke:...

JavaScript

import * as d3 from 'd3'
//  import {event as currentEvent} from 'd3-selection'
  import techan from 'techan'
  import NavBar from '@/components/NavBar'
  export default {
    name: 'charts',
    components: {
      NavBar
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    },
    mounted () {
      var dim = {
        width: 960,
        height: 500,
        margin: { top: 20, right: 50, bottom: 30, left: 50 },
        ohlc: { height: 305 },
        indicator: { height: 65, padding: 5 }
      }
      dim.plot = {
        width: dim.width - dim.margin.left - dim.margin.right,
        height: dim.height - dim.margin.top - dim.margin.bottom
      }
      dim.indicator.top = dim.ohlc.height + dim.indicator.padding
      dim.indicator.bottom = dim.indicator.top + dim.indicator.height + dim.indicator.padding

      var indicatorTop = d3.scaleLinear()
        .range([dim.indicator.top, dim.indicator.bottom])

      var parseDate = d3.timeParse('%d-%b-%y')

      var zoom = d3.zoom()
        .on('zoom', zoomed)

      var x = techan.scale.financetime()
        .range([0, dim.plot.width])

      var y = d3.scaleLinear()
        .range([dim.ohlc.height, 0])

      var yPercent = y.copy()   // Same as y at this stage, will get a different domain later

      var yInit, yPercentInit, zoomableInit

      var yVolume = d3.scaleLinear()
        .range([y(0), y(0.2)])

      var candlestick = techan.plot.candlestick()
        .xScale(x)
        .yScale(y)

      var tradearrow = techan.plot.tradearrow()
        .xScale(x)
        .yScale(y)
        .y(function (d) {
          // Display the buy and sell arrows a bit above and below the price, so the price is still visible
          if (d.type === 'buy') return y(d.low) + 5
          if (d.type === 'sell') return y(d.high) - 5
          else return y(d.price)
        })

      var sma0 = techan.plot.sma()
        .xScale(x)
        .yScale(y)

      var sma1 = techan.plot.sma()
 ...