linechart-demo.component.ts 4.87 KB
Newer Older
David Anderson's avatar
David Anderson committed
1
/* cSpell:words lcdp */
2
import { CanvasStyle, LineChartData, LineChart, ContinuousAxis, ChartCanvas, DataPoint,GetDataAtMouseEvent } from 'gist-charts';
David Anderson's avatar
David Anderson committed
3
4
5
6
import { Component, ViewChild, ElementRef } from '@angular/core';

let pointCount = 40;

7
8
let lineCount = 1;
let stepCount = 1;
David Anderson's avatar
David Anderson committed
9
10
11
let spikeChance = 0.2;
let spikeJump = 5;

David Anderson's avatar
David Anderson committed
12
13
14
15
16
17

@Component({
  selector: 'app-linechart-demo',
  templateUrl: './linechart-demo.component.html',
  styleUrls: ['./linechart-demo.component.css']
})
David Anderson's avatar
David Anderson committed
18
19
20
21
22
23
24
export class LineChartDemoComponent  {
  @ViewChild( 'drawspace' )
  drawspace: ElementRef;
  intervals: number[] = [];

  ngAfterViewInit() {
      let me = this;
25
26
      let leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
      let bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
David Anderson's avatar
David Anderson committed
27

28
      let gistChart = new ChartCanvas( me.drawspace.nativeElement );
David Anderson's avatar
David Anderson committed
29

30
      let activeChart = new LineChart();
31

32
33
        //       gistChart.debugLogger.isEnabled = true;
        //   activeChart.debugLogger.isEnabled = true;
34
        // leftAxis.debugLogger.isEnabled = true;
35
36
37
38
39


       gistChart.debugLogger.logPrefix = 'LineDemo ChartCanvas';
      leftAxis.debugLogger.logPrefix = ' LineDemo leftAxis';
      activeChart.debugLogger.logPrefix = 'lineDemo activeChart';
40
41


David Anderson's avatar
David Anderson committed
42
      activeChart.getStyle = ( line: LineChartData<LineData> ) => {
David Anderson's avatar
David Anderson committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
          let ret = new CanvasStyle();
          let data = line.data;
          if( !data ){
              return ret;
          }
          ret.stroke = data.stroke;
          ret.lineWidth = data.lineWidth;
          ret.lineDash = data.lineDash;

          return ret;
      };
      activeChart.datalist( [] );


      gistChart.background = '#ccc';

59
60
      leftAxis.shouldExtendTicksAcrossChart = true;
      bottomAxis.shouldExtendTicksAcrossChart = true;
David Anderson's avatar
David Anderson committed
61
62
63
64
      // bottomAxis.tickAngle = Math.PI * 0.25;
      // bottomAxis.tickTextAlign = 'left';
      // bottomAxis.tickTextAlign = 'right';

65
66
      bottomAxis.explicitBounds = [0, pointCount];

David Anderson's avatar
David Anderson committed
67
68
      bottomAxis.tickSkipSteps = [3,4,5];

69
70
      bottomAxis.getValue = ( dp ) => { return dp.data.x; };
      leftAxis.getValue = ( dp ) => { return dp.data.y; };
David Anderson's avatar
David Anderson committed
71
72
73

      bottomAxis.valueToString = ( value ) => { return value.toString() };
      leftAxis.valueToString = ( value ) => { return value.toString(); };
David Anderson's avatar
David Anderson committed
74

David Anderson's avatar
David Anderson committed
75
76
77
      leftAxis.label = 'y axis';
      bottomAxis.label = 'x axis';

78
79
      leftAxis.registerChart( activeChart );
      bottomAxis.registerChart( activeChart );
David Anderson's avatar
David Anderson committed
80
81
82
83
84
85
      gistChart.addChart( activeChart );
      gistChart.addAxis( [
          leftAxis
          , bottomAxis
      ] );
      let minValue = Math.pow( 10, 2 );
86
      leftAxis.explicitBounds = [minValue, minValue * 2 ];
87
88
89
90

      gistChart.addBehavior( new GetDataAtMouseEvent(
          'mousemove',
          {
91
              chart: activeChart,
92
93
94
95
96
97
98
99
100
              onEvent: ( reports ) => {
                let dpl: DataPoint[] = [];
                    reports.forEach( r => dpl.push( ...r.dpl ) );

                    if (!dpl.length ) {
                        console.info( 'no data ' );
                        return;
                    }
                    console.info( dpl );
101
102
103
104
              }
          } as any
      ) );

David Anderson's avatar
David Anderson committed
105
      gistChart.beginRender();
David Anderson's avatar
David Anderson committed
106
      function draw() {
107
          activeChart.datalist().push( ...randomLineData( leftAxis.explicitBounds[0] as number, leftAxis.explicitBounds[1] as number ) );
David Anderson's avatar
David Anderson committed
108
109
110
111
112
113
          if ( activeChart.datalist().length < lineCount ) {
              window.requestAnimationFrame( draw );
          }
      }

      draw();
David Anderson's avatar
David Anderson committed
114
115

  }
David Anderson's avatar
David Anderson committed
116
117
118
119
120
121
122
123
  ngOnDestroy() {
      this.intervals.forEach( int => {
          window.clearInterval( int );
      } );
  }
}

function randomLineData( min: number, max: number ): Array<LineChartData<LineData>> {
124
  let ret: Array<LineChartData<LineData>> = [];
125
  while ( ret.length < Math.min( stepCount, 100 )) {
David Anderson's avatar
David Anderson committed
126
127
128
129
130
131
132
      let lcdp = new LineChartData();
      lcdp.data = {
          lineDash: ret.length % 2 ? [ 5, 15 ] : undefined,
          lineWidth: randomInt( 1, 5 ),
          stroke: 'rgb(' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ' )'
      };
      while ( lcdp.points.length < pointCount ) {
133
          let dp = new DataPoint({
David Anderson's avatar
David Anderson committed
134
135
              x: lcdp.points.length + 1,
              y: Math.random() * ( max - min ) + min
136
          });
David Anderson's avatar
David Anderson committed
137
138

          if ( Math.random() < spikeChance ) {
139
              dp.data.y = max * spikeJump;
David Anderson's avatar
David Anderson committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
          }

          // use this to create an x on the chart. useful for debugging
          // if ( ret.length % 2 === 0 ) {
          //     dp.y = lcdp.points.length;
          // } else {
          //     dp.y = pointCount - lcdp.points.length -1;
          // }

          lcdp.points.push( dp );
      }
      ret.push( lcdp );
  }

  return ret;
}

function randomInt( min: number, max: number ): number {
  let diff = max - min;
  return Math.round( Math.random() * diff + min );
}
David Anderson's avatar
David Anderson committed
161

162
class LineData  extends DataPoint{
David Anderson's avatar
David Anderson committed
163
164
165
  lineDash: number[] | undefined;
  lineWidth: number = 0;
  stroke: string = '';
David Anderson's avatar
David Anderson committed
166
}