Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Anderson, Danny H
gist-charts
Commits
f3a6a630
Commit
f3a6a630
authored
Oct 29, 2018
by
David Anderson
Browse files
tslint
parent
755555f6
Changes
45
Hide whitespace changes
Inline
Side-by-side
demo-angularIO/src/app/app-routing.module.ts
View file @
f3a6a630
...
...
@@ -7,54 +7,54 @@ import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo
import
{
AreaChartDemoComponent
}
from
'
./areachart-demo/areachart-demo.component
'
;
import
{
LineChartDemoComponent
}
from
'
./linechart-demo/linechart-demo.component
'
;
import
{
DemoAppComponent
}
from
'
./demo-app/demo-app.component
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
RouterModule
,
Routes
}
from
'
@angular/router
'
;
@
NgModule
({
imports
:
[
RouterModule
.
forRoot
(
[
{
path
:
'
gistcharts
'
,
component
:
DemoAppComponent
,
},
{
path
:
'
line
'
,
component
:
LineChartDemoComponent
,
},
{
path
:
'
area
'
,
component
:
AreaChartDemoComponent
,
},
{
path
:
'
scatter
'
,
component
:
ScatterChartDemoComponent
,
},
{
path
:
'
bar
'
,
component
:
BarChartDemoComponent
,
},
{
path
:
'
heatMap
'
,
component
:
HeatmapChartDemoComponent
,
},
{
path
:
'
boxplot
'
,
component
:
BoxplotDemoComponent
,
},
{
path
:
'
radial
'
,
component
:
RadialChartDemoComponent
,
},
{
path
:
'
resize
'
,
component
:
ResizeableChartDemoComponent
,
},
{
path
:
'
**
'
,
redirectTo
:
'
gistcharts
'
}
]
)
],
exports
:
[
RouterModule
]
})
export
class
AppRoutingModule
{}
\ No newline at end of file
@
NgModule
(
{
imports
:
[
RouterModule
.
forRoot
(
[
{
path
:
'
gistcharts
'
,
component
:
DemoAppComponent
,
},
{
path
:
'
line
'
,
component
:
LineChartDemoComponent
,
},
{
path
:
'
area
'
,
component
:
AreaChartDemoComponent
,
},
{
path
:
'
scatter
'
,
component
:
ScatterChartDemoComponent
,
},
{
path
:
'
bar
'
,
component
:
BarChartDemoComponent
,
},
{
path
:
'
heatMap
'
,
component
:
HeatmapChartDemoComponent
,
},
{
path
:
'
boxplot
'
,
component
:
BoxplotDemoComponent
,
},
{
path
:
'
radial
'
,
component
:
RadialChartDemoComponent
,
},
{
path
:
'
resize
'
,
component
:
ResizeableChartDemoComponent
,
},
{
path
:
'
**
'
,
redirectTo
:
'
gistcharts
'
}
]
)
],
exports
:
[
RouterModule
]
}
)
export
class
AppRoutingModule
{
}
demo-angularIO/src/app/app.component.css
View file @
f3a6a630
:host
{
display
:
block
;
height
:
100%
;
width
:
100%
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
display
:
block
;
height
:
100%
;
width
:
100%
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
}
.active-link
{
background
:
rgb
(
63
,
81
,
181
);
color
:
white
;
}
.active-link
{
background
:
rgb
(
63
,
81
,
181
);
color
:
white
;
}
\ No newline at end of file
demo-angularIO/src/app/app.component.ts
View file @
f3a6a630
import
{
Component
}
from
'
@angular/core
'
;
@
Component
({
@
Component
(
{
selector
:
'
app-root
'
,
templateUrl
:
'
./app.component.html
'
,
styleUrls
:
[
'
./app.component.css
'
]
})
styleUrls
:
[
'
./app.component.css
'
]
}
)
export
class
AppComponent
{
title
=
'
app
'
;
}
demo-angularIO/src/app/app.module.ts
View file @
f3a6a630
...
...
@@ -13,14 +13,14 @@ import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.co
import
{
ScatterChartDemoComponent
}
from
'
./scatterchart-demo/scatterchart-demo.component
'
;
import
{
AppRoutingModule
}
from
'
.//app-routing.module
'
;
import
{
MatToolbarModule
}
from
'
@angular/material/toolbar
'
;
import
{
MatCardModule
}
from
'
@angular/material/card
'
;
le
t
materialItems
=
[
MatToolbarModule
,
MatCardModule
];
import
{
MatToolbarModule
}
from
'
@angular/material/toolbar
'
;
import
{
MatCardModule
}
from
'
@angular/material/card
'
;
cons
t
materialItems
=
[
MatToolbarModule
,
MatCardModule
];
import
{
FlexLayoutModule
}
from
'
@angular/flex-layout
'
;
import
{
FlexLayoutModule
}
from
'
@angular/flex-layout
'
;
import
{
FormsModule
}
from
'
@angular/forms
'
;
@
NgModule
({
@
NgModule
(
{
declarations
:
[
AppComponent
,
AreaChartDemoComponent
,
...
...
@@ -38,9 +38,9 @@ import { FormsModule } from '@angular/forms';
FormsModule
,
AppRoutingModule
,
FlexLayoutModule
].
concat
(
materialItems
),
].
concat
(
materialItems
),
exports
:
materialItems
,
providers
:
[],
bootstrap
:
[
AppComponent
]
})
bootstrap
:
[
AppComponent
]
}
)
export
class
AppModule
{
}
demo-angularIO/src/app/areachart-demo/areachart-demo.component.ts
View file @
f3a6a630
...
...
@@ -7,38 +7,40 @@ import {
,
GetDataAtMouseEvent
,
DataPoint
}
from
'
gist-charts
'
;
import
{
Component
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
import
{
Component
,
ViewChild
,
ElementRef
,
AfterViewInit
,
OnDestroy
}
from
'
@angular/core
'
;
le
t
yMin
=
0
;
le
t
yMax
=
100
;
le
t
pointCount
=
40
;
le
t
lineCount
=
2
;
cons
t
yMin
=
0
;
cons
t
yMax
=
100
;
cons
t
pointCount
=
40
;
cons
t
lineCount
=
1
;
@
Component
(
{
selector
:
'
app-areachart-demo
'
,
templateUrl
:
'
./areachart-demo.component.html
'
,
styleUrls
:
[
'
./areachart-demo.component.css
'
]
}
)
export
class
AreaChartDemoComponent
{
export
class
AreaChartDemoComponent
implements
AfterViewInit
,
OnDestroy
{
intervals
:
number
[]
=
[];
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
ngAfterViewInit
()
{
le
t
me
=
this
;
le
t
leftAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
left
'
);
le
t
bottomAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
bottom
'
);
cons
t
me
=
this
;
cons
t
leftAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
left
'
);
cons
t
bottomAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
bottom
'
);
le
t
gistChart
=
new
ChartCanvas
(
me
.
drawspace
.
nativeElement
);
le
t
activeChart
=
new
AreaChart
();
cons
t
gistChart
=
new
ChartCanvas
(
me
.
drawspace
.
nativeElement
);
cons
t
activeChart
=
new
AreaChart
();
gistChart
.
background
=
'
#ccc
'
;
activeChart
.
axisOrigin
=
yMin
;
activeChart
.
fillAxis
=
leftAxis
;
activeChart
.
getStyle
=
(
dp
:
LineChartData
)
=>
{
le
t
ret
=
new
CanvasStyle
();
cons
t
ret
=
new
CanvasStyle
();
ret
.
stroke
=
dp
.
data
.
stroke
;
ret
.
fill
=
dp
.
data
.
fill
;
ret
.
lineDash
=
[
3
,
3
];
...
...
@@ -48,16 +50,16 @@ export class AreaChartDemoComponent {
leftAxis
.
shouldExtendTicksAcrossChart
=
true
;
bottomAxis
.
shouldExtendTicksAcrossChart
=
true
;
bottomAxis
.
getValue
=
(
dp
)
=>
{
return
dp
.
data
.
x
;
};
leftAxis
.
getValue
=
(
dp
)
=>
{
return
dp
.
data
.
y
;
};
bottomAxis
.
getValue
=
(
dp
)
=>
dp
.
data
.
x
;
leftAxis
.
getValue
=
(
dp
)
=>
dp
.
data
.
y
;
bottomAxis
.
valueToString
=
(
value
)
=>
{
return
Math
.
round
(
value
).
toString
();
};
leftAxis
.
valueToString
=
(
value
)
=>
{
return
value
.
toString
();
};
bottomAxis
.
valueToString
=
(
value
)
=>
Math
.
round
(
value
).
toString
();
leftAxis
.
valueToString
=
(
value
)
=>
value
.
toString
();
leftAxis
.
label
=
'
left axis
'
;
bottomAxis
.
label
=
'
bottom axis
'
;
bottomAxis
.
explicitBounds
=
[
0
,
pointCount
];
bottomAxis
.
explicitBounds
=
[
0
,
pointCount
];
leftAxis
.
explicitBounds
=
[
yMin
,
yMax
];
...
...
@@ -77,9 +79,9 @@ export class AreaChartDemoComponent {
let
dpl
:
DataPoint
[]
=
[];
reports
.
forEach
(
r
=>
{
dpl
=
dpl
.
concat
(
r
.
dpl
);
});
}
);
if
(
!
dpl
.
length
)
{
if
(
!
dpl
.
length
)
{
console
.
info
(
'
no data
'
);
return
;
}
...
...
@@ -87,7 +89,6 @@ export class AreaChartDemoComponent {
}
},
)
);
activeChart
.
datalist
(
randomLineData
(
)
);
gistChart
.
beginRender
();
function
draw
()
{
...
...
@@ -98,7 +99,6 @@ export class AreaChartDemoComponent {
draw
();
// me.intervals.push( window.setInterval( draw, 1000 * 1 ) );
}
intervals
:
number
[]
=
[];
ngOnDestroy
()
{
this
.
intervals
.
forEach
(
int
=>
{
window
.
clearInterval
(
int
);
...
...
@@ -107,18 +107,18 @@ export class AreaChartDemoComponent {
}
function
randomLineData
():
Array
<
LineChartData
>
{
le
t
ret
:
Array
<
LineChartData
>
=
[];
le
t
yDiff
=
yMax
-
yMin
;
cons
t
ret
:
Array
<
LineChartData
>
=
[];
cons
t
yDiff
=
yMax
-
yMin
;
while
(
ret
.
length
<
lineCount
)
{
le
t
lcdp
=
new
LineChartData
();
cons
t
lcdp
=
new
LineChartData
();
lcdp
.
data
=
{
stroke
:
'
rgb(
'
+
randomInt
(
0
,
255
)
+
'
,
'
+
randomInt
(
0
,
255
)
+
'
,
'
+
randomInt
(
0
,
255
)
+
'
)
'
,
fill
:
'
rgb(
'
+
randomInt
(
0
,
255
)
+
'
,
'
+
randomInt
(
0
,
255
)
+
'
,
'
+
randomInt
(
0
,
255
)
+
'
)
'
};
let
last
=
randomInt
(
yMin
,
yMax
);
while
(
lcdp
.
points
.
length
<
pointCount
)
{
le
t
dp
=
new
DataPoint
();
le
t
diff
=
last
*
0.5
;
cons
t
dp
=
new
DataPoint
();
cons
t
diff
=
last
*
0.5
;
last
=
randomInt
(
last
-
diff
,
last
+
diff
);
if
(
last
>
yMax
)
{
last
=
yMin
+
yDiff
*
0.75
;
...
...
@@ -128,7 +128,7 @@ function randomLineData(): Array<LineChartData> {
}
dp
.
data
=
{
x
:
lcdp
.
points
.
length
,
y
:
l
ast
y
:
l
cdp
.
points
.
length
};
lcdp
.
points
.
push
(
dp
);
...
...
@@ -140,26 +140,26 @@ function randomLineData(): Array<LineChartData> {
function
areaLineData
():
LineChartData
{
le
t
ret
=
new
LineChartData
();
cons
t
ret
=
new
LineChartData
();
ret
.
data
=
{
stroke
:
'
#333
'
,
fill
:
'
ccc
'
}
}
;
le
t
yDiff
=
yMax
-
yMin
;
cons
t
yDiff
=
yMax
-
yMin
;
le
t
topPoints
:
DataPoint
[]
=
[];
le
t
bottomPoints
:
DataPoint
[]
=
[];
cons
t
topPoints
:
DataPoint
[]
=
[];
cons
t
bottomPoints
:
DataPoint
[]
=
[];
for
(
let
i
=
0
;
i
<
pointCount
;
i
++
)
{
topPoints
.
push
(
new
DataPoint
(
{
x
:
i
,
y
:
yMin
+
yMax
*
0.75
})
);
bottomPoints
.
push
(
new
DataPoint
({
}
)
);
bottomPoints
.
push
(
new
DataPoint
(
{
x
:
i
,
y
:
yMin
+
yMax
*
0.25
})
);
}
)
);
}
ret
.
points
=
topPoints
.
concat
(
bottomPoints
.
reverse
()
);
...
...
@@ -169,6 +169,6 @@ function areaLineData(): LineChartData {
}
function
randomInt
(
min
:
number
,
max
:
number
):
number
{
le
t
diff
=
max
-
min
;
cons
t
diff
=
max
-
min
;
return
Math
.
round
(
Math
.
random
()
*
diff
+
min
);
}
\ No newline at end of file
}
demo-angularIO/src/app/barchart-demo/barchart-demo.component.ts
View file @
f3a6a630
import
{
CanvasStyle
,
GetDataAtMouseEvent
,
DataPoint
,
BarChart
,
ContinuousAxis
,
CategoricalAxis
,
ChartCanvas
}
from
'
gist-charts
'
;
import
{
Component
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
@
Component
({
selector
:
'
app-barchart-demo
'
,
templateUrl
:
'
./barchart-demo.component.html
'
,
styleUrls
:
[
'
./barchart-demo.component.css
'
]
})
export
class
BarChartDemoComponent
{
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
chart
:
ChartCanvas
;
ngAfterViewInit
()
{
let
me
=
this
;
let
barChart
=
new
BarChart
();
barChart
.
getStyle
=
(
dp
)
=>
{
let
ret
=
new
CanvasStyle
();
ret
.
stroke
=
dp
.
data
.
stroke
;
ret
.
fill
=
dp
.
data
.
fill
;
return
ret
;
};
let
leftAxis
:
CategoricalAxis
<
string
>
=
new
CategoricalAxis
<
string
>
(
'
left
'
);
let
topAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
top
'
);
barChart
.
getX2
=
(
dp
:
DataPoint
)
=>
{
return
dp
.
data
.
testScore
+
dp
.
data
.
hitCount
;
};
me
.
chart
=
new
ChartCanvas
(
me
.
drawspace
.
nativeElement
);
me
.
chart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
chart
:
barChart
,
onEvent
:
(
reports
)
=>
{
let
dpl
:
DataPoint
[]
=
[];
import
{
CanvasStyle
,
GetDataAtMouseEvent
,
DataPoint
,
BarChart
,
ContinuousAxis
,
CategoricalAxis
,
ChartCanvas
}
from
'
gist-charts
'
;
import
{
Component
,
ViewChild
,
ElementRef
,
AfterViewInit
,
OnDestroy
}
from
'
@angular/core
'
;
@
Component
(
{
selector
:
'
app-barchart-demo
'
,
templateUrl
:
'
./barchart-demo.component.html
'
,
styleUrls
:
[
'
./barchart-demo.component.css
'
]
}
)
export
class
BarChartDemoComponent
implements
AfterViewInit
,
OnDestroy
{
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
chart
:
ChartCanvas
;
intervals
:
number
[]
=
[];
ngAfterViewInit
()
{
const
me
=
this
;
const
barChart
=
new
BarChart
();
barChart
.
getStyle
=
(
dp
)
=>
{
const
ret
=
new
CanvasStyle
();
ret
.
stroke
=
dp
.
data
.
stroke
;
ret
.
fill
=
dp
.
data
.
fill
;
return
ret
;
};
const
leftAxis
:
CategoricalAxis
<
string
>
=
new
CategoricalAxis
<
string
>
(
'
left
'
);
const
topAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
top
'
);
barChart
.
getX2
=
(
dp
:
DataPoint
)
=>
dp
.
data
.
testScore
+
dp
.
data
.
hitCount
;
me
.
chart
=
new
ChartCanvas
(
me
.
drawspace
.
nativeElement
);
me
.
chart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
chart
:
barChart
,
onEvent
:
(
reports
)
=>
{
const
dpl
:
DataPoint
[]
=
[];
reports
.
forEach
(
r
=>
dpl
.
push
(
...
r
.
dpl
)
);
if
(
!
dpl
.
length
)
{
if
(
!
dpl
.
length
)
{
console
.
info
(
'
no data
'
);
return
;
}
console
.
info
(
dpl
);
}
},
)
);
leftAxis
.
registerChart
(
barChart
);
topAxis
.
registerChart
(
barChart
);
topAxis
.
getValue
=
(
dp
:
DataPoint
):
number
=>
{
return
dp
.
data
.
testScore
;
};
leftAxis
.
getValue
=
(
dp
):
any
=>
{
return
dp
.
data
.
groupName
;
};
topAxis
.
explicitBounds
=
[
-
5
,
5
];
topAxis
.
label
=
'
top axis
'
;
me
.
chart
.
addChart
(
[
barChart
]
);
me
.
chart
.
addAxis
(
[
leftAxis
,
topAxis
]
);
function
draw
()
{
let
dl
=
randomStacked
();
leftAxis
.
resetZoom
();
let
hitMap
:
any
=
{};
leftAxis
.
explicitCategories
=
dl
.
map
(
dp
=>
dp
.
data
.
groupName
)
.
filter
(
str
=>
{
let
ret
=
!
hitMap
[
str
];
hitMap
[
str
]
=
true
;
return
ret
;
}
);
barChart
.
datalist
(
randomStacked
()
);
me
.
chart
.
beginRender
();
}
draw
();
// me.intervals.push( window.setInterval( draw, 1000 * 3 ) );
}
intervals
:
number
[]
=
[];
ngOnDestroy
()
{
this
.
intervals
.
forEach
(
int
=>
{
window
.
clearInterval
(
int
);
}
);
}
}
},
)
);
leftAxis
.
registerChart
(
barChart
);
topAxis
.
registerChart
(
barChart
);
topAxis
.
getValue
=
(
dp
:
DataPoint
):
number
=>
dp
.
data
.
testScore
;
leftAxis
.
getValue
=
(
dp
):
any
=>
dp
.
data
.
groupName
;
topAxis
.
explicitBounds
=
[
-
5
,
5
];
topAxis
.
label
=
'
top axis
'
;
me
.
chart
.
addChart
(
[
barChart
]
);
me
.
chart
.
addAxis
(
[
leftAxis
,
topAxis
]
);
function
draw
()
{
const
dl
=
randomStacked
();
leftAxis
.
resetZoom
();
const
hitMap
:
any
=
{};
leftAxis
.
explicitCategories
=
dl
.
map
(
dp
=>
dp
.
data
.
groupName
)
.
filter
(
str
=>
{
const
ret
=
!
hitMap
[
str
];
hitMap
[
str
]
=
true
;
return
ret
;
}
);
barChart
.
datalist
(
randomStacked
()
);
me
.
chart
.
beginRender
();
}
draw
();
// me.intervals.push( window.setInterval( draw, 1000 * 3 ) );
}
ngOnDestroy
()
{
this
.
intervals
.
forEach
(
int
=>
{
window
.
clearInterval
(
int
);
}
);
}
}
function
randomStacked
():
Array
<
DataPoint
>
{
// let groupCount = Math.floor(Math.random() * 20) +k1;
le
t
groupCount
=
5
;
le
t
rects
=
5
;
le
t
bcdp
:
Array
<
DataPoint
>
=
[];
bcdp
.
length
=
rects
*
groupCount
;
le
t
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
++
)
{
le
t
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
;
// let groupCount = Math.floor(Math.random() * 20) +k1;
cons
t
groupCount
=
5
;
cons
t
rects
=
5
;
cons
t
bcdp
:
Array
<
DataPoint
>
=
[];
bcdp
.
length
=
rects
*
groupCount
;
cons
t
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
++
)
{
cons
t
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
)
{