radialchart-demo.component.ts 3.46 KB
Newer Older
David Anderson's avatar
David Anderson committed
1
2
import {
  CanvasStyle
3
4
  , RadialChart
  , ContinuousAxis
5
  , ChartCanvas
David Anderson's avatar
David Anderson committed
6
7
  , GetDataAtMouseEvent
  , DataPoint
8
} from 'gist-charts';
David Anderson's avatar
David Anderson committed
9
10
11
import { Component, ViewChild, ElementRef } from '@angular/core';
/* cSpell:words lcdp */

12
13
14
15
16
17
const BUFFER = (Math.PI * 2 ) * 0.01;
// const MIN_ANGLE = Math.PI * 0.75;
// const MAX_ANGLE = Math.PI * 2.25 - BUFFER;
const MIN_ANGLE = Math.PI * 0;
const MAX_ANGLE = Math.PI * 2 - BUFFER;

David Anderson's avatar
David Anderson committed
18
19
20
21
22
23

@Component({
  selector: 'app-radialchart-demo',
  templateUrl: './radialchart-demo.component.html',
  styleUrls: ['./radialchart-demo.component.css']
})
David Anderson's avatar
David Anderson committed
24
25
26
export class RadialChartDemoComponent  {
  @ViewChild( 'drawspace' )
  drawspace: ElementRef;
David Anderson's avatar
David Anderson committed
27

David Anderson's avatar
David Anderson committed
28
29
  ngAfterViewInit() {
      let me = this;
30
31
      let leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
      let bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
David Anderson's avatar
David Anderson committed
32

33
      bottomAxis.explicitBounds = leftAxis.explicitBounds  = [0, 100];
David Anderson's avatar
David Anderson committed
34

35
      let gistChart = new ChartCanvas( me.drawspace.nativeElement );
36
      let activeChart = new RadialChart();
David Anderson's avatar
David Anderson committed
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

      activeChart.centerXValue = 50;
      activeChart.centerYValue = 50;

      activeChart.getStartAngle = ( dp )=>{ return  dp.data.start; };
      activeChart.getStopAngle = ( dp )=> { return dp.data.end; };
      activeChart.getLabel = (dp)=>{ return dp.data.label; };

      activeChart.getInnerRadius = ( dp ) => 10;
      activeChart.getOuterRadius = ( dp ) => 20;

      gistChart.background = '#ccc';

      activeChart.getStyle = ( dp: DataPoint ) => {
          let ret = new CanvasStyle();
          ret.fill = dp.data.color;
          ret.stroke = 'black';
          return ret;
      };

57
58
      leftAxis.shouldRenderTicks = false;
      bottomAxis.shouldRenderTicks = false;
David Anderson's avatar
David Anderson committed
59
60
61

      bottomAxis.getValue = ( x ) => { return x };
      leftAxis.getValue = ( x ) => { return x };
David Anderson's avatar
David Anderson committed
62

63
64
      leftAxis.registerChart( activeChart );
      bottomAxis.registerChart( activeChart );
David Anderson's avatar
David Anderson committed
65
66
67
68
69
70
71
72
73
      gistChart.addChart( activeChart );
      gistChart.addAxis( [
          leftAxis
          , bottomAxis
      ] );

      gistChart.addBehavior( new GetDataAtMouseEvent(
          'click',
          {
74
              chart: activeChart,
75
76
77
78
79
80
81
82
83
              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
84
85
86
              }
          },
      ) );
David Anderson's avatar
David Anderson committed
87
      gistChart.beginRender();
David Anderson's avatar
David Anderson committed
88
89
90
91
92
93

      function draw() {
          activeChart.datalist( randomData() );
      }

      draw();
94
    //   me.intervals.push( window.setInterval( draw, 1000 * 3 ));
David Anderson's avatar
David Anderson committed
95
96
97
98
99
100
101
  }
  intervals: number[] = [];
  ngOnDestroy() {
      this.intervals.forEach( int => {
          window.clearInterval( int );
      } );
  }
David Anderson's avatar
David Anderson committed
102
}
David Anderson's avatar
David Anderson committed
103
104
105
106
107

function randomData(): DataPoint[]{
  let last = MIN_ANGLE;
  let ret: DataPoint[] = [];
  let count = Math.round( Math.random() * 5) +5;
108
    // let count = 1;
David Anderson's avatar
David Anderson committed
109
110
111
112
113
114
115
116
  let totalBuffer = BUFFER * (count-1);
  let totalAngle = MAX_ANGLE- MIN_ANGLE - totalBuffer;

  let size = totalAngle / count;

  let colorList = ['#222','#444', '#666','#888', '#aaa', '#ccc','#eee'];
  for( let i = 0; i < count; i++ ){
      ret.push( new DataPoint({
David Anderson's avatar
David Anderson committed
117
118
          label: 'curve: ' + i,
        //   label: Math.random().toString(),
David Anderson's avatar
David Anderson committed
119
120
121
122
123
124
125
126
127
          color: colorList[ i % colorList.length],
          start: last,
          end: last + size
      }));
      last += size + BUFFER;
  }

  return ret;
}