Add Histograms

src/canvas/Canvas.ts

@@ -91,8 +91,9 @@ export abstract class Canvas {
         this.context.restore();
     }
 
-    protected drawBox(topLeft: Position, bottomRight: Position, strokeColor: string = null, backgroundColor: string = null) {
+    protected drawBox(topLeft: Position, bottomRight: Position, strokeColor: string = null, backgroundColor: string = null, opacity: number = 1) {
         this.context.save();
+        this.context.globalAlpha = opacity;
         this.context.beginPath();
         this.context.translate(0.5, 0.5);
         if(backgroundColor)

src/canvas/ChartCanvas.ts

@@ -111,14 +111,15 @@ export class ChartCanvas extends Canvas {
         )
     }
 
-    realDrawBox(topLeft: Position, bottomRight: Position, strokeColor: string = null, backgroundColor: string = null, margin: Margin = new Margin()) {
+    realDrawBox(topLeft: Position, bottomRight: Position, strokeColor: string = null, backgroundColor: string = null, opacity: number = 1, margin: Margin = new Margin()) {
         let screenTopLeft = this.realToScreenPos(topLeft);
         let screenBottomRight = this.realToScreenPos(bottomRight);
         screenTopLeft.x += margin.left;
         screenTopLeft.y += margin.top;
         screenBottomRight.x -= margin.right;
         screenBottomRight.y -= margin.bottom;
-        return this.drawBox(screenTopLeft, screenBottomRight, strokeColor, backgroundColor)
+        console.log(opacity)
+        return this.drawBox(screenTopLeft, screenBottomRight, strokeColor, backgroundColor, opacity)
     }
 
     getStyle(){

src/index.ts

@@ -3,5 +3,6 @@ export { Chart } from "./Chart";
 export { CandlestickLayer, Candlestick } from "./layers/Candlestick"
 export { Point, LineLayer, LineStyle } from "./layers/Line"
 export { BandStep, BandLayer } from "./layers/Band"
+export { Bar, HistogramLayer } from "./layers/Hist"
 export { Util } from "./Util"
 

src/layers/Hist.ts

@@ -0,0 +1,78 @@
+import { Layer } from "./Layer";
+
+export class Bar {
+    x: number;
+    delta: number;
+    y: number;
+}
+
+export class HistogramStyle {
+    color: string;
+    opacity: number;
+}
+
+let histDefaultStyle: HistogramStyle = {
+    color: "#fff",
+    opacity: 1,
+}
+
+export class HistogramLayer extends Layer {
+
+    constructor(private barList: Array<Bar> = new Array<Bar>(), private style = histDefaultStyle) {
+        super();
+        console.log(style);
+    }
+
+    update (barList: Array<Bar>) {
+        this.barList = barList;
+        if(this.chartCanvas)
+            this.chartCanvas.draw();
+    }
+
+    getMax(){
+        return Math.max(...this.barList.map(x => x.y));
+    }
+
+    getMin(){
+        return Math.min(...this.barList.map(x => x.y));
+    }
+
+    getFirstX() {
+        return this.barList[0].x
+    }
+
+    getSecondX() {
+        return this.barList[1].x
+    }
+
+    getLastX() {
+        return this.barList[this.barList.length - 1].x
+    }
+
+    add (bar: Bar) {
+        this.barList.push(bar);
+        if(this.chartCanvas)
+            this.chartCanvas.draw();
+    }
+
+    draw(): any {
+        if (!this.chartCanvas) {
+            console.log("can't draw without ChartCanvas, please use setChartCanvas to set it.")
+            return
+        }
+        for (let bar of this.barList)
+            this.chartCanvas.realDrawBox(
+                {
+                    x: bar.x - bar.delta / 2,
+                    y: bar.y,
+                },
+                {
+                    x: bar.x + bar.delta / 2,
+                    y: 0,
+                },
+                null,
+                this.style.color,
+                this.style.opacity
+            )
+    }
+}

src/layers/candlestick.ts

@@ -103,6 +103,7 @@ export class CandlestickLayer extends Layer {
                 },
                 null,
                 color,
+                this.candlestickStyle.opacity,
                 {
                     left: 2,
                     right: 2,

www/main.js

@@ -1,15 +1,16 @@
 let chartContainer = new SimpleTimeChart.ChartContainer(
     "myChart", // Div ID of the containing the chart
-    1300,  // Width of the chart
+    800,  // Width of the chart
     70,  // Axis Tickness
     {
         color: "#D0D0D0", // Color of axis text
         backgroundColor: "#292F33" // Background of the container
     }
 );
 
-let chart = chartContainer.newChart(500);
-let secondChart = chartContainer.newChart(300);
+let chart = chartContainer.newChart(300);
+let secondChart = chartContainer.newChart(200);
+let volumeChart = chartContainer.newChart(100);
 
 let data = [{"date":1546300800,"high":0.01232199,"low":0.012105,"open":0.01227412,"close":0.01224702,"volume":11.47474031,"quoteVolume":938.52999477,"weightedAverage":0.01222629},{"date":1546315200,"high":0.01235758,"low":0.01218015,"open":0.01225446,"close":0.01223056,"volume":6.96543437,"quoteVolume":567.59424307,"weightedAverage":0.01227185},{"date":1546329600,"high":0.01234246,"low":0.01217325,"open":0.012231,"close":0.01228311,"volume":7.10957659,"quoteVolume":578.44708528,"weightedAverage":0.01229079},{"date":1546344000,"high":0.01237977,"low":0.0122487,"open":0.01229189,"close":0.0122911,"volume":9.1454552,"quoteVolume":743.25528044,"weightedAverage":0.01230459},{"date":1546358400,"high":0.01245827,"low":0.01225163,"open":0.01228001,"close":0.01245827,"volume":20.97501172,"quoteVolume":1696.31090129,"weightedAverage":0.01236507},{"date":1546372800,"high":0.01264831,"low":0.01239196,"open":0.01242936,"close":0.01249544,"volume":29.14045482,"quoteVolume":2322.77559678,"weightedAverage":0.01254553},{"date":1546387200,"high":0.01259999,"low":0.01243199,"open":0.01249549,"close":0.01247901,"volume":10.03136424,"quoteVolume":799.56105322,"weightedAverage":0.01254608},{"date":1546401600,"high":0.01278436,"low":0.01247901,"open":0.01247901,"close":0.01275239,"volume":19.83723467,"quoteVolume":1564.66915417,"weightedAverage":0.01267822},{"date":1546416000,"high":0.01286514,"low":0.01257456,"open":0.01275239,"close":0.01276012,"volume":60.39925402,"quoteVolume":4744.76267984,"weightedAverage":0.01272966},{"date":1546430400,"high":0.01317618,"low":0.01269283,"open":0.01276022,"close":0.013,"volume":99.55834375,"quoteVolume":7678.08091916,"weightedAverage":0.01296656},{"date":1546444800,"high":0.01392092,"low":0.01299499,"open":0.01299499,"close":0.01357587,"volume":159.00918413,"quoteVolume":11686.69623364,"weightedAverage":0.01360599},{"date":1546459200,"high":0.0138,"low":0.0131613,"open":0.01357594,"close":0.01329,"volume":62.60722674,"quoteVolume":4677.28089524,"weightedAverage":0.01338538},{"date":1546473600,"high":0.01336862,"low":0.0130804,"open":0.01329,"close":0.01315601,"volume":30.40567552,"quoteVolume":2309.02992227,"weightedAverage":0.01316816},{"date":1546488000,"high":0.013234,"low":0.01309201,"open":0.01315614,"close":0.01315417,"volume":8.46794783,"quoteVolume":643.58521631,"weightedAverage":0.01315746},{"date":1546502400,"high":0.0133,"low":0.01291811,"open":0.01315427,"close":0.01297533,"volume":45.1276967,"quoteVolume":3451.78777749,"weightedAverage":0.01307371},{"date":1546516800,"high":0.01307378,"low":0.0129,"open":0.01297533,"close":0.01301303,"volume":35.38764064,"quoteVolume":2729.50167879,"weightedAverage":0.01296487},{"date":1546531200,"high":0.01307383,"low":0.01290545,"open":0.01301306,"close":0.01294501,"volume":24.56854066,"quoteVolume":1894.35815331,"weightedAverage":0.01296932},{"date":1546545600,"high":0.01304533,"low":0.01290801,"open":0.01294501,"close":0.0129384,"volume":25.84994651,"quoteVolume":1996.31989333,"weightedAverage":0.01294879},{"date":1546560000,"high":0.01304456,"low":0.01291751,"open":0.01294203,"close":0.01293006,"volume":24.69899588,"quoteVolume":1906.56640573,"weightedAverage":0.0129547},{"date":1546574400,"high":0.01317,"low":0.01292005,"open":0.0129301,"close":0.01309309,"volume":17.05415543,"quoteVolume":1307.2199068,"weightedAverage":0.01304612},{"date":1546588800,"high":0.0131965,"low":0.01301421,"open":0.01309309,"close":0.013102,"volume":18.51389502,"quoteVolume":1416.80141678,"weightedAverage":0.01306738},{"date":1546603200,"high":0.013304,"low":0.01294911,"open":0.01315083,"close":0.01322899,"volume":20.63029394,"quoteVolume":1574.23005377,"weightedAverage":0.013105},{"date":1546617600,"high":0.0132984,"low":0.01310965,"open":0.01322902,"close":0.01320501,"volume":19.06424701,"quoteVolume":1443.14755571,"weightedAverage":0.01321018},{"date":1546632000,"high":0.0132792,"low":0.01295671,"open":0.01319002,"close":0.01305004,"volume":24.87041766,"quoteVolume":1899.11915962,"weightedAverage":0.01309576},{"date":1546646400,"high":0.01327921,"low":0.01304031,"open":0.01305003,"close":0.01319001,"volume":16.09959947,"quoteVolume":1221.53356545,"weightedAverage":0.01317982}]
 
@@ -22,6 +23,7 @@ let candlesticks = data.map(x => {
 })
 let pointList = candlesticks.map(x => {return {x: x.date.getTime(), y: x.weightedAverage}});
 let bandStepList = candlesticks.map(x => {return {x: x.date.getTime(), top: x.high, bottom:x.low}});
+let barList = candlesticks.map(x => {return {x: x.date.getTime(), y: x.volume, delta:deltaSecond * 1000}});
 
 // Define all layers
 let candlestickLayer = new SimpleTimeChart.CandlestickLayer(candlesticks, {
@@ -41,10 +43,16 @@ let bandLayer = new SimpleTimeChart.BandLayer(bandStepList, {
     opacity: 0.2,
 });
 
+let histLayer = new SimpleTimeChart.HistogramLayer(barList, {
+    color: "#FFFFFF",
+    opacity: 0.5,
+});
+
 // Add Layers to the Chart you want
 chart.addLayer(candlestickLayer);
 secondChart.addLayer(lineLayer);
 secondChart.addLayer(bandLayer);
+volumeChart.addLayer(histLayer);
 
 chartContainer.setTimeScale(
     SimpleTimeChart.Util.getTimeScaleFromLayer(chart, candlestickLayer)
@@ -56,6 +64,9 @@ chart.setDataScale(
 secondChart.setDataScale(
     SimpleTimeChart.Util.getDataScaleFromLayer(secondChart, lineLayer)
 );
+volumeChart.setDataScale(
+    SimpleTimeChart.Util.getDataScaleFromLayer(volumeChart, histLayer, 5)
+);
 
 
 chartContainer.draw();