unageanu/jiji2

View on GitHub
sites/src/js/view/components/chart/candle-sticks.js

Summary

Maintainability
B
6 hrs
Test Coverage
import CreateJS               from "easeljs"
import AbstractChartComponent from "./abstract-chart-component"

export default class CandleSticks extends AbstractChartComponent {

  constructor( chartModel, slidableMask, devicePixelRatio ) {
    super(chartModel, devicePixelRatio);
    this.initSprite(slidableMask);
  }

  addObservers() {
    this.chartModel.candleSticks.addObserver(
      "propertyChanged", this.onCandlePropertyChanged.bind(this), this);
    this.chartModel.slider.addObserver(
      "propertyChanged", this.onSliderPropertyChanged.bind(this), this);
  }
  attach( stage, stageUpdater ) {
    this.stage = stage;
    this.stageUpdater = stageUpdater;
    this.stage.addChild(this.sticksShape);
  }

  unregisterObservers() {
    this.chartModel.candleSticks.removeAllObservers(this);
    this.chartModel.slider.removeAllObservers(this);
  }

  onCandlePropertyChanged(name, event) {
    if (event.key === "sticks") {
      this.update();
    }
  }
  onSliderPropertyChanged(name, event) {
    if (event.key === "temporaryCurrentRange") {
      if (!event.newValue || !event.newValue.start) return;
      this.slideTo(event.newValue.start);
    }
  }
  slideTo( temporaryStart ) {
    const x = this.calculateSlideX( temporaryStart );
    this.sticksShape.x = x;
    this.stageUpdater.requestUpdate();
  }

  initSprite(slidableMask) {
    this.sticksShape      = this.initializeElement(new CreateJS.Shape());
    this.sticksShape.mask = slidableMask;
  }

  update() {
    this.clearScreen();
    this.renderSticks( this.chartModel.candleSticks.sticks );
    this.cache();
    this.stageUpdater.requestUpdate();
  }

  clearScreen() {
    const stageSize = this.chartModel.candleSticks.stageSize;
    this.sticksShape.graphics.clear();
    this.sticksShape.x = this.sticksShape.y = 0;
  }

  renderSticks( sticks ) {
    const g = this.sticksShape.graphics;
    sticks.reduce( (g, s)=>{
      g = g.beginFill("#AAAAAA")
           .drawRect( s.x-2, s.open, 5, s.close - s.open || 1 )
           .drawRect( s.x,   s.high, 1, Math.min(s.open, s.close) - s.high)
           .drawRect( s.x,   Math.max(s.open, s.close), 1, s.low - Math.max(s.open, s.close))
           .endFill();
      if ( s.isUp && (s.open-s.close) > 2) {
        g = g.beginFill("#FFFFFF").drawRect( s.x-1, s.close+1, 3, (s.open-s.close)-2 ).endFill();
      }
      return g;
    }, g);
  }

  cache() {
    const stageSize = this.chartModel.coordinateCalculator.stageSize;
    const dpr = this.devicePixelRatio;
    this.sticksShape.cache( 0, 0, stageSize.w, stageSize.h, dpr);
  }
}