barchart-demo.component.ts 3.43 KB
Newer Older
David Anderson's avatar
David Anderson committed
1
2
3
import { CanvasStyle
  , GetDataAtMouseEvent
  , DataPoint
4
5
6
  , BarChart
  , ContinuousAxis
  , CategoricalAxis
7
  , ChartCanvas } from 'gist-charts';
David Anderson's avatar
David Anderson committed
8
9

import { Component, ViewChild, ElementRef } from '@angular/core';
David Anderson's avatar
David Anderson committed
10
11
12
13
14
15

@Component({
  selector: 'app-barchart-demo',
  templateUrl: './barchart-demo.component.html',
  styleUrls: ['./barchart-demo.component.css']
})
David Anderson's avatar
David Anderson committed
16
17
18
export class BarChartDemoComponent {
  @ViewChild( 'drawspace' )
  drawspace: ElementRef;
19
  chart: ChartCanvas;
David Anderson's avatar
David Anderson committed
20
21
22

  ngAfterViewInit() {
      let me = this;
23
      let barChart = new BarChart();
David Anderson's avatar
David Anderson committed
24
      barChart.getStyle = ( dp ) => {
David Anderson's avatar
David Anderson committed
25
26
27
28
29
          let ret = new CanvasStyle();
          ret.stroke = dp.data.stroke;
          ret.fill = dp.data.fill;
          return ret;
      };
30
31
      let leftAxis: CategoricalAxis<string> = new CategoricalAxis<string>( 'left' );
      let topAxis: ContinuousAxis = new ContinuousAxis( 'top' );
David Anderson's avatar
David Anderson committed
32
33
      barChart.getX2 = ( dp: DataPoint ) => { return dp.data.testScore + dp.data.hitCount; };

34
      me.chart = new ChartCanvas( me.drawspace.nativeElement );
David Anderson's avatar
David Anderson committed
35
36
37
      me.chart.addBehavior( new GetDataAtMouseEvent(
          'click',
          {
38
              chart: barChart,
39
40
41
42
43
44
45
46
47
              onEvent: ( reports ) => {
                let dpl: DataPoint[] = [];
                    reports.forEach( r => dpl.push( ...r.dpl ) );

                    if (!dpl.length ) {
                        console.info( 'no data ' );
                        return;
                    }
                    console.info( dpl );
David Anderson's avatar
David Anderson committed
48
49
50
51
              }
          },
      ) );

52
53
      leftAxis.registerChart( barChart );
      topAxis.registerChart( barChart );
David Anderson's avatar
David Anderson committed
54
55
56
57

      topAxis.getValue = ( dp: DataPoint ): number => { return dp.data.testScore; };
      leftAxis.getValue = ( dp ): any => { return dp.data.groupName; };

58
      topAxis.explicitBounds =[ -5, 5 ];
David Anderson's avatar
David Anderson committed
59
60
61
62
      topAxis.label = 'top axis';

      me.chart.addChart( [ barChart ] );
      me.chart.addAxis( [ leftAxis, topAxis ] );
David Anderson's avatar
David Anderson committed
63

David Anderson's avatar
David Anderson committed
64
      function draw() {
65
          let dl = randomStacked();
66

67
          leftAxis.resetZoom();
68
69
70
71
72
73
74
75
          let hitMap:any = {};
          leftAxis.explicitCategories = dl
              .map( dp => dp.data.groupName )
              .filter( str => {
                  let ret = !hitMap[ str ];
                  hitMap[ str ] = true;
                  return ret;
              } );
David Anderson's avatar
David Anderson committed
76

David Anderson's avatar
David Anderson committed
77
78
          barChart.datalist( randomStacked() );

David Anderson's avatar
David Anderson committed
79
          me.chart.beginRender();
David Anderson's avatar
David Anderson committed
80
81
82
      }

      draw();
83
    //   me.intervals.push( window.setInterval( draw, 1000 * 3 ) );
David Anderson's avatar
David Anderson committed
84
85
86
87
88
89
  }
  intervals: number[] = [];
  ngOnDestroy() {
      this.intervals.forEach( int => {
          window.clearInterval( int );
      } );
David Anderson's avatar
David Anderson committed
90
  }
David Anderson's avatar
David Anderson committed
91
92
93
}


David Anderson's avatar
David Anderson committed
94

David Anderson's avatar
David Anderson committed
95
function randomStacked(): Array<DataPoint> {
96
97
//   let groupCount = Math.floor(Math.random() * 20) +k1;
    let groupCount = 5;
David Anderson's avatar
David Anderson committed
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
  let rects = 5;
  let bcdp: Array<DataPoint> = [];
  bcdp.length = rects * groupCount;
  let tmpArr = [ 'blue', 'green', 'grey', 'black', 'brown', 'yellow', 'orange', 'purple', 'pink', 'red' ];
  for ( let i = 0; i < groupCount; i++ ) {
      for ( let j = 0; j < rects; j++ ) {
          let dp = new DataPoint();

          dp.data = {
              groupName: 'Group ' + ( i + 1 ),
              testScore: j,
              hitCount: 1,
              fill: tmpArr[ j % tmpArr.length],
              stroke: tmpArr[ j % tmpArr.length]
          };

          if ( i % 2 ) {
              dp.data.testScore *= -1;
              dp.data.hitCount *= -1;
          }
          bcdp[ i * rects + j ] = dp;
      }
  }
  return bcdp;
David Anderson's avatar
David Anderson committed
122
}
David Anderson's avatar
David Anderson committed
123
124