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
cb6df171
Commit
cb6df171
authored
Oct 03, 2018
by
David Anderson
Browse files
Merge branch 'develop'
parents
30e06206
88911b25
Changes
124
Hide whitespace changes
Inline
Side-by-side
.vscode/tasks.json
View file @
cb6df171
...
...
@@ -19,7 +19,8 @@
"group"
:
{
"kind"
:
"build"
,
"isDefault"
:
true
}
},
"problemMatcher"
:
[]
}
]
}
\ No newline at end of file
demo-angularIO/src/app/app-routing.module.ts
View file @
cb6df171
import
{
ResizeableChartDemoComponent
}
from
'
./resizeable-demo/resizeable-demo.component
'
;
import
{
RadialChartDemoComponent
}
from
'
./radialchart-demo/radialchart-demo.component
'
;
import
{
BoxplotDemoComponent
}
from
'
./boxplot-demo/boxplot-demo.component
'
;
import
{
PlaygroundDemoComponent
}
from
'
./playground-demo/playground-demo.component
'
;
import
{
HeatmapChartDemoComponent
}
from
'
./heatmapchart-demo/heatmapchart-demo.component
'
;
import
{
BarChartDemoComponent
}
from
'
./barchart-demo/barchart-demo.component
'
;
import
{
ScatterChartDemoComponent
}
from
'
./scatterchart-demo/scatterchart-demo.component
'
;
...
...
@@ -37,10 +37,6 @@ import { RouterModule, Routes } from '@angular/router';
path
:
'
heatMap
'
,
component
:
HeatmapChartDemoComponent
,
},
{
path
:
'
playground
'
,
component
:
PlaygroundDemoComponent
,
},
{
path
:
'
boxplot
'
,
component
:
BoxplotDemoComponent
,
...
...
@@ -48,6 +44,10 @@ import { RouterModule, Routes } from '@angular/router';
{
path
:
'
radial
'
,
component
:
RadialChartDemoComponent
,
},
{
path
:
'
resize
'
,
component
:
ResizeableChartDemoComponent
,
},
{
path
:
'
**
'
,
...
...
demo-angularIO/src/app/app.component.html
View file @
cb6df171
...
...
@@ -10,10 +10,6 @@
mat-raised-button
routerLinkActive=
"active-link"
routerLink=
"gistcharts"
>
All
</a>
<a
fxFlex=
"initial"
mat-raised-button
routerLinkActive=
"active-link"
routerLink=
"playground"
>
Playground
</a>
<a
fxFlex=
"initial"
mat-raised-button
routerLinkActive=
"active-link"
...
...
@@ -42,6 +38,11 @@
mat-raised-button
routerLinkActive=
"active-link"
routerLink=
"radial"
>
Radial
</a>
<a
fxFlex=
"initial"
mat-raised-button
routerLinkActive=
"active-link"
routerLink=
"resize"
>
Resize Test
</a>
</nav>
</mat-toolbar>
<div
fxLayout=
"column"
...
...
demo-angularIO/src/app/app.module.ts
View file @
cb6df171
import
{
ResizeableChartDemoComponent
}
from
'
./resizeable-demo/resizeable-demo.component
'
;
import
{
BrowserModule
}
from
'
@angular/platform-browser
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
...
...
@@ -8,7 +9,6 @@ import { BoxplotDemoComponent } from './boxplot-demo/boxplot-demo.component';
import
{
DemoAppComponent
}
from
'
./demo-app/demo-app.component
'
;
import
{
HeatmapChartDemoComponent
}
from
'
./heatmapchart-demo/heatmapchart-demo.component
'
;
import
{
LineChartDemoComponent
}
from
'
./linechart-demo/linechart-demo.component
'
;
import
{
PlaygroundDemoComponent
}
from
'
./playground-demo/playground-demo.component
'
;
import
{
RadialChartDemoComponent
}
from
'
./radialchart-demo/radialchart-demo.component
'
;
import
{
ScatterChartDemoComponent
}
from
'
./scatterchart-demo/scatterchart-demo.component
'
;
import
{
AppRoutingModule
}
from
'
.//app-routing.module
'
;
...
...
@@ -18,6 +18,7 @@ import {MatCardModule} from '@angular/material/card';
let
materialItems
=
[
MatToolbarModule
,
MatCardModule
];
import
{
FlexLayoutModule
}
from
'
@angular/flex-layout
'
;
import
{
FormsModule
}
from
'
@angular/forms
'
;
@
NgModule
({
declarations
:
[
...
...
@@ -28,12 +29,13 @@ import {FlexLayoutModule} from '@angular/flex-layout';
DemoAppComponent
,
HeatmapChartDemoComponent
,
LineChartDemoComponent
,
PlaygroundDemoComponent
,
RadialChartDemoComponent
,
ScatterChartDemoComponent
ScatterChartDemoComponent
,
ResizeableChartDemoComponent
],
imports
:
[
BrowserModule
,
FormsModule
,
AppRoutingModule
,
FlexLayoutModule
].
concat
(
materialItems
),
...
...
demo-angularIO/src/app/areachart-demo/areachart-demo.component.ts
View file @
cb6df171
import
{
CanvasStyle
,
LineChartData
,
AreaChart
Config
,
ContinuousAxis
Config
,
Gist
Chart
,
AreaChart
,
ContinuousAxis
,
Chart
Canvas
,
GetDataAtMouseEvent
,
DataPoint
}
from
'
gist-charts
'
;
...
...
@@ -27,15 +27,17 @@ export class AreaChartDemoComponent {
ngAfterViewInit
()
{
let
me
=
this
;
let
leftAxis
:
ContinuousAxis
Config
=
new
ContinuousAxis
Config
(
'
left
'
);
let
bottomAxis
:
ContinuousAxis
Config
=
new
ContinuousAxis
Config
(
'
bottom
'
);
let
leftAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
left
'
);
let
bottomAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
bottom
'
);
let
gistChart
=
new
Gist
Chart
(
me
.
drawspace
.
nativeElement
);
let
activeChart
=
new
AreaChart
Config
();
let
gistChart
=
new
Chart
Canvas
(
me
.
drawspace
.
nativeElement
);
let
activeChart
=
new
AreaChart
();
gistChart
.
background
=
'
#ccc
'
;
activeChart
.
getAreaStyle
=
(
dp
:
LineChartData
)
=>
{
activeChart
.
axisOrigin
=
yMin
;
activeChart
.
getStyle
=
(
dp
:
LineChartData
)
=>
{
let
ret
=
new
CanvasStyle
();
ret
.
stroke
=
dp
.
data
.
stroke
;
ret
.
fill
=
dp
.
data
.
fill
;
...
...
@@ -43,8 +45,8 @@ export class AreaChartDemoComponent {
return
ret
;
};
leftAxis
.
should
DrawGridLines
=
true
;
bottomAxis
.
should
DrawGridLines
=
true
;
leftAxis
.
should
ExtendTicksAcrossChart
=
true
;
bottomAxis
.
should
ExtendTicksAcrossChart
=
true
;
bottomAxis
.
getValue
=
(
dp
)
=>
{
return
dp
.
data
.
x
;
};
leftAxis
.
getValue
=
(
dp
)
=>
{
return
dp
.
data
.
y
;
};
...
...
@@ -55,15 +57,12 @@ export class AreaChartDemoComponent {
leftAxis
.
label
=
'
left axis
'
;
bottomAxis
.
label
=
'
bottom axis
'
;
bottomAxis
.
explicitMinValue
=
0
;
bottomAxis
.
explicitMaxValue
=
pointCount
;
leftAxis
.
explicitMinValue
=
yMin
;
leftAxis
.
explicitMaxValue
=
yMax
;
bottomAxis
.
explicitBounds
=
[
0
,
pointCount
];
leftAxis
.
explicitBounds
=
[
yMin
,
yMax
];
leftAxis
.
registerChart
Config
(
activeChart
);
bottomAxis
.
registerChart
Config
(
activeChart
);
leftAxis
.
registerChart
(
activeChart
);
bottomAxis
.
registerChart
(
activeChart
);
gistChart
.
addChart
(
activeChart
);
gistChart
.
addAxis
(
[
leftAxis
...
...
@@ -73,10 +72,14 @@ export class AreaChartDemoComponent {
gistChart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
config
:
activeChart
,
onEvent
:
(
dpl
:
DataPoint
[]
)
=>
{
let
first
=
dpl
[
0
];
if
(
!
first
)
{
chart
:
activeChart
,
onEvent
:
(
reports
)
=>
{
let
dpl
:
DataPoint
[]
=
[];
reports
.
forEach
(
r
=>
{
dpl
=
dpl
.
concat
(
r
.
dpl
);
});
if
(
!
dpl
.
length
)
{
console
.
info
(
'
no data
'
);
return
;
}
...
...
@@ -85,7 +88,7 @@ export class AreaChartDemoComponent {
},
)
);
activeChart
.
datalist
(
randomLineData
(
)
);
gistChart
.
r
ender
All
();
gistChart
.
beginR
ender
();
function
draw
()
{
activeChart
.
datalist
().
push
(
...
randomLineData
()
);
...
...
demo-angularIO/src/app/barchart-demo/barchart-demo.component.ts
View file @
cb6df171
import
{
CanvasStyle
,
GetDataAtMouseEvent
,
DataPoint
,
BarChart
Config
,
ContinuousAxis
Config
,
CategoricalAxis
Config
,
Gist
Chart
}
from
'
gist-charts
'
;
,
BarChart
,
ContinuousAxis
,
CategoricalAxis
,
Chart
Canvas
}
from
'
gist-charts
'
;
import
{
Component
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
...
...
@@ -16,44 +16,46 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
export
class
BarChartDemoComponent
{
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
chart
:
Gist
Chart
;
chart
:
Chart
Canvas
;
ngAfterViewInit
()
{
let
me
=
this
;
let
barChart
=
new
BarChart
Config
();
barChart
.
get
Bar
Style
=
(
dp
)
=>
{
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
Config
<
string
>
=
new
CategoricalAxis
Config
<
string
>
(
'
left
'
);
let
topAxis
:
ContinuousAxis
Config
=
new
ContinuousAxis
Config
(
'
top
'
);
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
Gist
Chart
(
me
.
drawspace
.
nativeElement
);
me
.
chart
=
new
Chart
Canvas
(
me
.
drawspace
.
nativeElement
);
me
.
chart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
config
:
barChart
,
onEvent
:
(
dpl
:
DataPoint
[]
)
=>
{
let
first
=
dpl
[
0
];
if
(
!
first
)
{
return
;
}
console
.
info
(
dpl
);
chart
:
barChart
,
onEvent
:
(
reports
)
=>
{
let
dpl
:
DataPoint
[]
=
[];
reports
.
forEach
(
r
=>
dpl
.
push
(
...
r
.
dpl
)
);
if
(
!
dpl
.
length
)
{
console
.
info
(
'
no data
'
);
return
;
}
console
.
info
(
dpl
);
}
},
)
);
leftAxis
.
registerChart
Config
(
barChart
);
topAxis
.
registerChart
Config
(
barChart
);
leftAxis
.
registerChart
(
barChart
);
topAxis
.
registerChart
(
barChart
);
topAxis
.
getValue
=
(
dp
:
DataPoint
):
number
=>
{
return
dp
.
data
.
testScore
;
};
leftAxis
.
getValue
=
(
dp
):
any
=>
{
return
dp
.
data
.
groupName
;
};
topAxis
.
explicitMinValue
=
-
5
;
topAxis
.
explicitMaxValue
=
5
;
topAxis
.
explicitBounds
=
[
-
5
,
5
];
topAxis
.
label
=
'
top axis
'
;
me
.
chart
.
addChart
(
[
barChart
]
);
...
...
@@ -61,7 +63,7 @@ export class BarChartDemoComponent {
function
draw
()
{
let
dl
=
randomStacked
();
leftAxis
.
zoomable
=
false
;
leftAxis
.
resetZoom
();
let
hitMap
:
any
=
{};
leftAxis
.
explicitCategories
=
dl
...
...
@@ -73,9 +75,8 @@ export class BarChartDemoComponent {
}
);
barChart
.
datalist
(
randomStacked
()
);
leftAxis
.
reverseOrder
=
!
leftAxis
.
reverseOrder
;
me
.
chart
.
r
ender
All
();
me
.
chart
.
beginR
ender
();
}
draw
();
...
...
demo-angularIO/src/app/boxplot-demo/boxplot-demo.component.ts
View file @
cb6df171
...
...
@@ -3,11 +3,11 @@ import {
,
GetDataAtMouseEvent
,
DataPoint
,
BoxPlotData
,
BoxPlot
Config
,
ContinuousAxis
Config
,
CategoricalAxis
Config
,
Gist
Chart
,
ScatterChart
Config
,
,
BoxPlot
,
ContinuousAxis
,
CategoricalAxis
,
Chart
Canvas
,
ScatterChart
,
ScatterStyle
}
from
'
gist-charts
'
;
import
{
Component
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
...
...
@@ -16,6 +16,8 @@ let min = 0;
let
max
=
1000
;
let
boxCount
=
10
;
let
isVertical
=
false
;
let
isCategorical
=
true
;
let
shouldAxisBeNormal
=
!
true
;
@
Component
({
selector
:
'
app-boxplot-demo
'
,
...
...
@@ -25,52 +27,62 @@ let isVertical = false;
export
class
BoxplotDemoComponent
{
@
ViewChild
(
'
drawSpace
'
)
drawSpace
:
ElementRef
;
protected
chart
:
Gist
Chart
;
protected
chart
:
Chart
Canvas
;
x
ngAfterViewInit
()
{
let
me
=
this
;
me
.
chart
=
new
ChartCanvas
(
me
.
drawSpace
.
nativeElement
);
let
primaryAxis
,
secondaryAxis
;
if
(
isVertical
)
{
primaryAxis
=
new
ContinuousAxisConfig
(
'
left
'
);
secondaryAxis
=
new
CategoricalAxisConfig
<
number
>
(
'
bottom
'
);
// secondaryAxis = new ContinuousAxisConfig( 'bottom' );
primaryAxis
=
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
left
'
:
'
right
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
)
:
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
);
}
else
{
primaryAxis
=
new
ContinuousAxisConfig
(
'
bottom
'
);
secondaryAxis
=
new
CategoricalAxisConfig
<
number
>
(
'
left
'
);
// secondaryAxis = new ContinuousAxisConfig( 'left' );
primaryAxis
=
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
shouldAxisBeNormal
?
'
left
'
:
'
right
'
)
:
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
left
'
:
'
right
'
);
}
secondaryAxis
.
valueToWidth
=
()
=>
{
return
20
;
};
let
boxPlot
=
new
BoxPlotConfig
();
let
boxPlot
=
new
BoxPlot
();
boxPlot
.
primaryAxis
=
primaryAxis
;
boxPlot
.
secondaryAxis
=
secondaryAxis
;
let
scatterChart
=
new
ScatterChartConfig
();
let
scatterChart
=
new
ScatterChart
();
scatterChart
.
margin
=
20
;
me
.
chart
.
background
=
'
#ccc
'
;
boxPlot
.
background
=
'
#333
'
;
scatterChart
.
shouldCenterBandY
=
true
;
// boxPlot.shouldCenterBandY = true;
secondaryAxis
.
color
=
primaryAxis
.
color
=
'
steelblue
'
;
if
(
!
isCategorical
)
{
boxPlot
.
shouldCenterBandY
=
true
;
boxPlot
.
getBandThickness
=
()
=>
{
return
20
;
};
}
primaryAxis
.
explicitBounds
=
[
min
,
max
];
primaryAxis
.
explicitMinValue
=
min
;
primaryAxis
.
explicitMaxValue
=
max
;
secondaryAxis
.
explicitCategories
=
[];
secondaryAxis
.
explicitBounds
=
[
0
,
boxCount
];
secondaryAxis
.
innerPadding
=
0.25
;
secondaryAxis
.
outerPadding
=
0.25
;
while
(
secondaryAxis
.
explicitCategories
.
length
<
boxCount
)
{
secondaryAxis
.
explicitCategories
.
push
(
secondaryAxis
.
explicitCategories
.
length
);
}
me
.
chart
=
new
GistChart
(
me
.
drawSpace
.
nativeElement
);
me
.
chart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
config
:
boxPlot
,
onEvent
:
(
dpl
:
DataPoint
[],
config
:
BoxPlotConfig
)
=>
{
let
first
=
dpl
[
0
];
if
(
!
first
)
{
return
;
}
console
.
info
(
`You are hovering over
${
dpl
.
length
}
points in Chart
${
config
.
id
}
.`
);
chart
:
boxPlot
,
onEvent
:
(
reports
)
=>
{
reports
.
filter
(
r
=>
r
.
dpl
.
length
>
0
)
.
forEach
(
r
=>
console
.
info
(
`You are hovering over
${
r
.
dpl
.
length
}
points in Chart
${
r
.
chart
.
id
}
.`
)
);
}
}
as
any
)
);
...
...
@@ -80,11 +92,11 @@ export class BoxplotDemoComponent {
return
ret
;
};
secondaryAxis
.
getValue
=
(
dp
)
=>
{
let
ret
=
dp
.
data
.
y
;
let
ret
=
dp
.
data
.
y
;
return
ret
;
};
primaryAxis
.
registerChart
Config
(
[
boxPlot
,
scatterChart
]
);
secondaryAxis
.
registerChart
Config
(
[
boxPlot
,
scatterChart
]
);
primaryAxis
.
registerChart
(
[
boxPlot
,
scatterChart
]
);
secondaryAxis
.
registerChart
(
[
boxPlot
,
scatterChart
]
);
me
.
chart
.
addChart
(
[
boxPlot
,
scatterChart
]
);
me
.
chart
.
addAxis
(
[
primaryAxis
,
secondaryAxis
]
);
...
...
@@ -96,7 +108,7 @@ export class BoxplotDemoComponent {
}
)
);
};
boxPlot
.
get
Box
Style
=
(
box
)
=>
{
boxPlot
.
getStyle
=
(
box
)
=>
{
let
ret
=
new
BoxPlotStyle
();
ret
.
stroke
=
box
.
data
.
stroke
;
ret
.
fill
=
box
.
data
.
fill
;
...
...
@@ -105,12 +117,12 @@ export class BoxplotDemoComponent {
};
let
outlierStyle
=
new
ScatterStyle
(
'
#333
'
,
undefined
,
3
);
scatterChart
.
getS
catterS
tyle
=
()
=>
outlierStyle
;
scatterChart
.
getStyle
=
()
=>
outlierStyle
;
function
draw
()
{
boxPlot
.
datalist
(
randomData
()
);
me
.
chart
.
r
ender
All
();
me
.
chart
.
beginR
ender
();
}
draw
();
...
...
demo-angularIO/src/app/demo-app/demo-app.component.html
View file @
cb6df171
...
...
@@ -2,7 +2,6 @@
fxLayoutGap=
"10px "
fxLayoutAlign=
"start stretch"
>
<app-playground-demo
fxFlex=
"auto"
></app-playground-demo>
<app-scatterchart-demo
fxFlex=
"auto"
></app-scatterchart-demo>
<app-barchart-demo
fxFlex=
"auto"
></app-barchart-demo>
<app-heatmapchart-demo
fxFlex=
"auto"
></app-heatmapchart-demo>
...
...
demo-angularIO/src/app/heatmapchart-demo/heatmapchart-demo.component.ts
View file @
cb6df171
import
{
CanvasStyle
,
GistChartLayout
,
GetDataAtMouseEvent
,
CategoricalAxis
Config
,
CategoricalAxis
,
DataPoint
,
Gist
Chart
,
BarChart
Config
,
Chart
Canvas
,
BarChart
}
from
'
gist-charts
'
;
import
{
ViewChild
,
Component
,
ElementRef
}
from
'
@angular/core
'
;
/* cSpell:words bcdp heatmapchart */
...
...
@@ -21,14 +20,14 @@ let yLimit = 100;
export
class
HeatmapChartDemoComponent
{
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
chart
:
Gist
Chart
;
chart
:
Chart
Canvas
;
ngAfterViewInit
()
{
let
me
=
this
;
me
.
chart
=
new
Gist
Chart
(
me
.
drawspace
.
nativeElement
);
me
.
chart
=
new
Chart
Canvas
(
me
.
drawspace
.
nativeElement
);
let
barChart
=
new
BarChart
Config
();
barChart
.
get
Bar
Style
=
(
dp
)
=>
{
let
barChart
=
new
BarChart
();
barChart
.
getStyle
=
(
dp
)
=>
{
let
ret
=
new
CanvasStyle
();
ret
.
stroke
=
dp
.
data
.
stroke
;
ret
.
fill
=
dp
.
data
.
fill
;
...
...
@@ -40,38 +39,39 @@ export class HeatmapChartDemoComponent{
// me.chart.debugLogger.isEnabled = true;
me
.
chart
.
debugLogger
.
logPrefix
=
'
HeatMapDemo gistChart
'
;
let
leftAxis
:
CategoricalAxis
Config
<
string
>
=
new
CategoricalAxis
Config
<
string
>
(
'
left
'
);
let
rightAxis
:
CategoricalAxis
Config
<
string
>
=
new
CategoricalAxis
Config
<
string
>
(
'
right
'
);
let
topAxis
:
CategoricalAxis
Config
<
number
>
=
new
CategoricalAxis
Config
<
number
>
(
'
top
'
);
let
bottomAxis
:
CategoricalAxis
Config
<
number
>
=
new
CategoricalAxis
Config
<
number
>
(
'
bottom
'
);
let
leftAxis
:
CategoricalAxis
<
string
>
=
new
CategoricalAxis
<
string
>
(
'
left
'
);
let
rightAxis
:
CategoricalAxis
<
string
>
=
new
CategoricalAxis
<
string
>
(
'
right
'
);
let
topAxis
:
CategoricalAxis
<
number
>
=
new
CategoricalAxis
<
number
>
(
'
top
'
);
let
bottomAxis
:
CategoricalAxis
<
number
>
=
new
CategoricalAxis
<
number
>
(
'
bottom
'
);
me
.
chart
.
layout
=
new
GistChartLayout
();
me
.
chart
.
background
=
'
#333
'
;
me
.
chart
.
layout
.
min
Height
=
1000
;
me
.
chart
.
layout
.
min
Width
=
1000
;
me
.
chart
.
layout
.
minMargin
.
setValue
s
(
100
);
me
.
chart
.
layout
.
chart
Height
.
min
=
1000
;
me
.
chart
.
layout
.
chart
Width
.
min
=
1000
;
me
.
chart
.
layout
.
setAllMargin
s
(
100
);
let
axisList
=
[
topAxis
,
bottomAxis
,
leftAxis
,
rightAxis
];
me
.
chart
.
addBehavior
(
new
GetDataAtMouseEvent
(
'
click
'
,
{
config
:
barChart
,
onEvent
:
(
dpl
:
DataPoint
[]
)
=>
{
let
first
=
dpl
[
0
];
if
(
!
first
)
{
return
;
}
console
.
info
(
first
.
getExtent
(
barChart
)
);
chart
:
barChart
,
onEvent
:
(
reports
)
=>
{
let
dpl
:
DataPoint
[]
=
[];
reports
.
forEach
(
r
=>
dpl
.
push
(
...
r
.
dpl
)
);
if
(
!
dpl
.
length
)
{
console
.
info
(
'
no data
'
);
return
;
}
console
.
info
(
dpl
);
}
},
)
);
axisList
.
forEach
(
axis
=>
{
axis
.
getCategorySize
=
()
=>
30
;
axis
.
registerChart
Config
(
barChart
);
axis
.
registerChart
(
barChart
);
}
);
bottomAxis
.
getValue
=
topAxis
.
getValue
=
(
dp
):
number
=>
{
return
dp
.
data
.
y
;
};
...
...
@@ -102,9 +102,7 @@ export class HeatmapChartDemoComponent{
function
draw
()
{
let
data
=
randomData
().
sort
(
function
()
{
return
0
;
}
);
barChart
.
datalist
(
data
);
me
.
chart
.
renderAll
();
console
.
log
(
'
render all
'
);
me
.
chart
.
renderAll
();
me
.
chart
.
beginRender
();
}
draw
();
...
...
demo-angularIO/src/app/linechart-demo/linechart-demo.component.spec.ts
View file @
cb6df171
import
{
LineChartDemoComponent
}
from
'
./linechart-demo.component
'
;
import
{
async
,
ComponentFixture
,
TestBed
}
from
'
@angular/core/testing
'
;
import
{
LinechartDemoComponent
}
from
'
./linechart-demo.component
'
;
describe
(
'
Line
c
hartDemoComponent
'
,
()
=>
{
let
component
:
Line
c
hartDemoComponent
;
let
fixture
:
ComponentFixture
<
Line
c
hartDemoComponent
>
;
describe
(
'
Line
C
hartDemoComponent
'
,
()
=>
{
let
component
:
Line
C
hartDemoComponent
;
let
fixture
:
ComponentFixture
<
Line
C
hartDemoComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
Line
c
hartDemoComponent
]
declarations
:
[
Line
C
hartDemoComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
Line
c
hartDemoComponent
);
fixture
=
TestBed
.
createComponent
(
Line
C
hartDemoComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
...
...
demo-angularIO/src/app/linechart-demo/linechart-demo.component.ts
View file @
cb6df171
/* cSpell:words lcdp */