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
a6fe78c5
Commit
a6fe78c5
authored
Jul 31, 2019
by
David Anderson
Browse files
added folded
parent
9a5eb02d
Changes
4
Hide whitespace changes
Inline
Side-by-side
demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.css
0 → 100644
View file @
a6fe78c5
demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.html
0 → 100644
View file @
a6fe78c5
<mat-card>
<mat-card-title>
Zoom and Pan Demo
</mat-card-title>
<mat-card-subtitle>
For when you actually care about details
</mat-card-subtitle>
<mat-card-content>
<div
fxLayout=
"row"
fxLayoutGap=
"10px "
fxLayoutAlign=
"start stretch"
>
<div
xFlex=
"initial"
class=
"chart"
#drawspace
>
</div>
</div>
</mat-card-content>
</mat-card>
demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.spec.ts
0 → 100644
View file @
a6fe78c5
import
{
async
,
ComponentFixture
,
TestBed
}
from
'
@angular/core/testing
'
;
import
{
ZoomPanDemmoComponent
}
from
'
./zoom-pan-demmo.component
'
;
describe
(
'
ZoomPanDemmoComponent
'
,
()
=>
{
let
component
:
ZoomPanDemmoComponent
;
let
fixture
:
ComponentFixture
<
ZoomPanDemmoComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
ZoomPanDemmoComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
ZoomPanDemmoComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'
should create
'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
demo-angularIO/src/app/zoom-pan-demmo/zoom-pan-demmo.component.ts
0 → 100644
View file @
a6fe78c5
import
{
AfterViewInit
,
Component
,
ElementRef
,
OnDestroy
,
ViewChild
}
from
'
@angular/core
'
;
import
{
ChartCanvas
,
ContinuousAxis
,
DataPoint
,
PanBehavior
,
ScatterChart
,
ScatterStyle
,
ZoomBehavior
}
from
'
gist-charts
'
;
@
Component
(
{
selector
:
'
app-zoom-pan-demmo
'
,
templateUrl
:
'
./zoom-pan-demmo.component.html
'
,
styleUrls
:
[
'
./zoom-pan-demmo.component.css
'
]
}
)
export
class
ZoomPanDemmoComponent
implements
AfterViewInit
,
OnDestroy
{
@
ViewChild
(
'
drawspace
'
)
drawspace
:
ElementRef
;
chart
:
ChartCanvas
;
intervals
:
number
[]
=
[];
ngAfterViewInit
()
{
const
me
=
this
;
me
.
chart
=
new
ChartCanvas
(
me
.
drawspace
.
nativeElement
);
(
window
as
any
).
chart
=
me
.
chart
;
console
.
log
(
(
window
as
any
).
chart
);
const
pointCount
=
20
;
const
baseChart
=
new
ScatterChart
();
const
selectionChart
=
new
ScatterChart
();
baseChart
.
margin
=
5
;
selectionChart
.
margin
=
15
;
// selectionChart.debugLogger.isEnabled = true;
selectionChart
.
background
=
'
rgba(255,255,255,0.5)
'
;
selectionChart
.
isActive
=
false
;
baseChart
.
getStyle
=
(
dp
:
DataPoint
<
ScatterData
>
)
=>
{
const
style
=
dp
.
data
as
ScatterData
;
return
new
ScatterStyle
(
'
#333
'
,
'
#333
'
,
style
.
radius
);
};
selectionChart
.
getStyle
=
(
dp
:
DataPoint
<
ScatterData
>
)
=>
{
const
style
=
dp
.
data
as
ScatterData
;
return
new
ScatterStyle
(
style
.
stroke
,
style
.
fill
,
style
.
radius
*
2
);
};
const
leftAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
left
'
);
const
bottomAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
bottom
'
);
const
rightAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
right
'
);
const
topAxis
:
ContinuousAxis
=
new
ContinuousAxis
(
'
top
'
);
const
axis
=
[
bottomAxis
,
leftAxis
];
axis
.
forEach
(
a
=>
{
a
.
registerChart
(
baseChart
);
a
.
registerChart
(
selectionChart
);
a
.
explicitBounds
=
[
0
,
pointCount
];
// a.fill = 'white';
}
);
topAxis
.
getValue
=
bottomAxis
.
getValue
=
(
dp
)
=>
dp
.
data
.
x
;
rightAxis
.
getValue
=
leftAxis
.
getValue
=
(
dp
)
=>
dp
.
data
.
y
;
leftAxis
.
label
=
'
left
'
;
bottomAxis
.
label
=
'
bottom
'
;
rightAxis
.
label
=
'
right
'
;
topAxis
.
label
=
'
top
'
;
leftAxis
.
shouldExtendTicksAcrossChart
=
true
;
bottomAxis
.
shouldExtendTicksAcrossChart
=
true
;
let
selectedData
:
DataPoint
[]
=
[];
baseChart
.
margin
=
5
;
selectionChart
.
datalist
(
selectedData
);
me
.
chart
.
addChart
(
[
baseChart
,
selectionChart
]
);
me
.
chart
.
addAxis
(
axis
);
let
zoom
=
new
ZoomBehavior
();
zoom
.
limitZoom
(
axis
,
0.5
,
1.5
);
let
pan
=
new
PanBehavior
(
'
wheel
'
);
// use wheel because we want to click on the data
pan
.
limitPan
(
bottomAxis
,
pointCount
*
-
0.25
,
pointCount
*
1.25
);
me
.
chart
.
addBehavior
(
[
zoom
,
pan
]
);
const
dataList
=
testDataX
(
pointCount
);
baseChart
.
datalist
(
dataList
);
me
.
chart
.
beginRender
();
}
ngOnDestroy
()
{
this
.
intervals
.
forEach
(
int
=>
{
window
.
clearInterval
(
int
);
}
);
}
}
function
testDataX
(
pointCount
:
number
=
10000
):
Array
<
DataPoint
>
{
const
scdp
:
Array
<
DataPoint
>
=
[];
for
(
let
i
=
0
;
i
<=
pointCount
;
i
++
)
{
scdp
.
push
(
new
DataPoint
(
{
x
:
i
,
y
:
i
,
radius
:
3
,
fill
:
'
red
'
,
}
)
);
}
for
(
let
i
=
0
;
i
<=
pointCount
;
i
++
)
{
scdp
.
push
(
new
DataPoint
(
{
x
:
i
,
y
:
pointCount
-
i
,
radius
:
3
,
fill
:
'
red
'
,
}
)
);
}
for
(
let
i
=
0
;
i
<=
pointCount
;
i
++
)
{
scdp
.
push
(
new
DataPoint
(
{
x
:
i
,
y
:
pointCount
/
2
,
radius
:
3
,
fill
:
'
red
'
,
}
)
);
}
for
(
let
i
=
0
;
i
<=
pointCount
;
i
++
)
{
scdp
.
push
(
new
DataPoint
(
{
x
:
pointCount
/
2
,
y
:
i
,
radius
:
3
,
fill
:
'
red
'
,
}
)
);
}
return
scdp
;
}
function
randomInt
(
min
:
number
,
max
:
number
):
number
{
const
diff
=
max
-
min
;
return
Math
.
round
(
Math
.
random
()
*
diff
+
min
);
}
class
ScatterData
{
x
=
0
;
y
=
0
;
radius
=
0
;
fill
=
''
;
stroke
=
''
;
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment