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
0e4df88b
Commit
0e4df88b
authored
Sep 17, 2018
by
David Anderson
Browse files
margins are working
parent
d2ea179e
Changes
10
Expand all
Hide whitespace changes
Inline
Side-by-side
demo-angularIO/src/app/boxplot-demo/boxplot-demo.component.ts
View file @
0e4df88b
...
...
@@ -16,8 +16,8 @@ let min = 0;
let
max
=
1000
;
let
boxCount
=
10
;
let
isVertical
=
false
;
let
isCategoric
al
=
fals
e
;
let
isCategorical
=
true
;
let
shouldAxisBeNorm
al
=
!
tru
e
;
@
Component
({
selector
:
'
app-boxplot-demo
'
,
...
...
@@ -28,27 +28,26 @@ export class BoxplotDemoComponent {
@
ViewChild
(
'
drawSpace
'
)
drawSpace
:
ElementRef
;
protected
chart
:
ChartCanvas
;
x
ngAfterViewInit
()
{
let
me
=
this
;
me
.
chart
=
new
ChartCanvas
(
me
.
drawSpace
.
nativeElement
);
let
primaryAxis
,
secondaryAxis
;
if
(
isVertical
)
{
primaryAxis
=
new
ContinuousAxis
(
'
lef
t
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
'
bottom
'
)
:
new
ContinuousAxis
(
'
bottom
'
);
primaryAxis
=
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
left
'
:
'
righ
t
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
)
:
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
);
}
else
{
primaryAxis
=
new
ContinuousAxis
(
'
bottom
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
'
left
'
)
:
new
ContinuousAxis
(
'
lef
t
'
);
primaryAxis
=
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
bottom
'
:
'
top
'
);
secondaryAxis
=
isCategorical
?
new
CategoricalAxis
<
number
>
(
shouldAxisBeNormal
?
'
left
'
:
'
right
'
)
:
new
ContinuousAxis
(
shouldAxisBeNormal
?
'
left
'
:
'
righ
t
'
);
}
let
boxPlot
=
new
BoxPlot
();
boxPlot
.
primaryAxis
=
primaryAxis
;
boxPlot
.
secondaryAxis
=
secondaryAxis
;
let
scatterChart
=
new
ScatterChart
();
boxPlot
.
margin
=
scatterChart
.
margin
=
20
;
scatterChart
.
margin
=
20
;
me
.
chart
.
background
=
'
#ccc
'
;
boxPlot
.
background
=
'
#333
'
;
...
...
@@ -71,7 +70,9 @@ export class BoxplotDemoComponent {
primaryAxis
.
explicitBounds
=
[
min
,
max
];
secondaryAxis
.
explicitCategories
=
[];
secondaryAxis
.
explicitBounds
=
[
0
,
boxCount
];
secondaryAxis
.
explicitBounds
=
[
0
,
boxCount
];
secondaryAxis
.
innerPadding
=
0.25
;
secondaryAxis
.
outerPadding
=
0.25
;
while
(
secondaryAxis
.
explicitCategories
.
length
<
boxCount
)
{
secondaryAxis
.
explicitCategories
.
push
(
secondaryAxis
.
explicitCategories
.
length
);
...
...
@@ -94,7 +95,7 @@ export class BoxplotDemoComponent {
return
ret
;
};
secondaryAxis
.
getValue
=
(
dp
)
=>
{
let
ret
=
dp
.
data
.
y
;
let
ret
=
dp
.
data
.
y
;
return
ret
;
};
primaryAxis
.
registerChart
(
[
boxPlot
,
scatterChart
]
);
...
...
gist-charts/source/classes/chartCanvas.class.ts
View file @
0e4df88b
...
...
@@ -406,8 +406,13 @@ export class ChartCanvas {
axis
.
debugLogger
.
_log
(
'
Axis Canvas width =
'
+
width
+
'
, height =
'
+
height
);
isValid
=
axis
.
_implementation
.
canvas
.
setSize
(
width
,
height
);
if
(
axis
.
_implementation
.
position
===
'
bottom
'
)
{
if
(
axis
.
_implementation
.
position
===
'
top
'
)
{
y
=
rs
.
chartBounds
.
top
-
rs
.
axisSizes
.
top
;
}
else
if
(
axis
.
_implementation
.
position
===
'
bottom
'
)
{
y
=
rs
.
chartBounds
.
top
+
rs
.
chartHeight
;
}
if
(
axis
.
_implementation
.
position
===
'
left
'
)
{
x
=
rs
.
chartBounds
.
left
-
rs
.
axisSizes
.
left
;
}
else
if
(
axis
.
_implementation
.
position
===
'
right
'
)
{
x
=
rs
.
chartBounds
.
left
+
rs
.
chartWidth
;
}
...
...
gist-charts/source/classes/gistCanvas.class.ts
View file @
0e4df88b
...
...
@@ -43,14 +43,14 @@ export class GistCanvas {
* @param {string} [background]
* @memberof GistCanvas
*/
public
clearCanvas
(
background
?:
string
)
{
public
clearCanvas
(
background
?:
string
,
margin
:
number
=
0
)
{
let
height
:
number
=
parseInt
(
this
.
canvasEle
.
style
.
height
as
any
)
||
0
;
let
width
:
number
=
parseInt
(
this
.
canvasEle
.
style
.
width
as
any
)
||
0
;
if
(
this
.
isSizeValid
()
)
{
this
.
context
.
clearRect
(
0
,
0
,
width
,
height
);
this
.
context
.
clearRect
(
margin
,
margin
,
width
,
height
);
if
(
background
)
{
this
.
context
.
fillStyle
=
background
;
this
.
context
.
fillRect
(
0
,
0
,
width
,
height
);
this
.
context
.
fillRect
(
margin
,
margin
,
width
-
margin
*
2
,
height
-
margin
*
2
);
}
}
}
...
...
gist-charts/source/implementations/axis/baseAxisImplementation.class.ts
View file @
0e4df88b
...
...
@@ -157,13 +157,12 @@ export abstract class BaseAxisImplementation<T> {
setChartSize
(
chartWidth
:
number
,
chartHeight
:
number
,
axisSizes
:
TBLR
<
number
>
,
axisMargin
:
TBLR
<
number
>
)
{
const
me
=
this
;
let
zero
:
number
,
max
:
number
;
let
buffer
=
me
.
getChartBuffer
();
if
(
me
.
isVertical
)
{
zero
=
axisMargin
.
top
+
axisSizes
.
top
+
chartHeight
-
buffer
.
bottom
;
max
=
axisMargin
.
top
+
axisSizes
.
top
+
buffer
.
top
;
max
=
Math
.
max
(
axisMargin
.
top
,
axisSizes
.
top
)
;
zero
=
max
+
chartHeight
;
// y = 0 at the top, so if we want everything else to be 0 at the bottom, we invert the max and zero
}
else
{
zero
=
axisMargin
.
left
+
axisSizes
.
left
+
buffer
.
left
;
max
=
axisMargin
.
left
+
axisSizes
.
left
+
chartWidth
-
buffer
.
right
;
zero
=
Math
.
max
(
axisMargin
.
left
,
axisSizes
.
left
)
;
max
=
zero
+
chartWidth
;
}
me
.
scale
.
range
(
[
zero
,
max
]
);
me
.
chartWidth
=
chartWidth
;
...
...
@@ -519,22 +518,6 @@ export abstract class BaseAxisImplementation<T> {
public
abstract
valueToWidth
(
value
:
T
):
number
;
private
getChartBuffer
():
TBLR
<
number
>
{
const
me
=
this
;
let
buffer
=
new
TBLR
(
0
);
for
(
let
id
in
me
.
charts
)
{
if
(
me
.
charts
[
id
]
)
{
let
chartBuffer
=
me
.
charts
[
id
].
_implementation
.
getMinBuffer
();
buffer
.
top
=
Math
.
max
(
buffer
.
top
,
chartBuffer
.
top
);
buffer
.
bottom
=
Math
.
max
(
buffer
.
bottom
,
chartBuffer
.
bottom
);
buffer
.
left
=
Math
.
max
(
buffer
.
left
,
chartBuffer
.
left
);
buffer
.
right
=
Math
.
max
(
buffer
.
right
,
chartBuffer
.
right
);
}
}
return
buffer
;
}
abstract
getAxisLabels
():
Array
<
AxisLabel
>
;
...
...
gist-charts/source/implementations/charts/baseChartImplementation.class.ts
View file @
0e4df88b
...
...
@@ -120,7 +120,7 @@ export abstract class BaseChartImplementation {
me
.
chart
.
debugLogger
.
_log
(
'
isDirty change
'
,
b
);
}
if
(
b
)
{
me
.
canvas
.
clearCanvas
(
me
.
chart
.
background
);
me
.
canvas
.
clearCanvas
(
me
.
chart
.
background
,
this
.
chart
.
margin
);
me
.
canvas
.
canvasEle
.
style
.
zIndex
=
'
1
'
;
me
.
onDataWipe
();
this
.
clearExtents
();
...
...
@@ -143,7 +143,7 @@ export abstract class BaseChartImplementation {
*/
public
initCanvas
(
width
:
number
,
height
:
number
,
background
?:
string
):
boolean
{
let
isValid
=
this
.
canvas
.
setSize
(
width
,
height
);
this
.
canvas
.
clearCanvas
(
background
);
this
.
canvas
.
clearCanvas
(
background
,
this
.
chart
.
margin
);
this
.
isDirty
=
true
;
this
.
canvas
.
context
.
globalAlpha
=
this
.
chart
.
alpha
;
if
(
isValid
)
{
...
...
@@ -198,17 +198,6 @@ export abstract class BaseChartImplementation {
return
ret
;
}
/**
* How much room is needed beyond the max value
*
* @abstract
* @returns {number}
* @memberof BaseAxisImplementation
*/
public
getMinBuffer
():
TBLR
<
number
>
{
return
new
TBLR
(
0
);
}
/**
* Begin polling config data list to see if we need to drawn more points.
*
...
...
package/classes/gistCanvas.class.d.ts
View file @
0e4df88b
...
...
@@ -29,7 +29,7 @@ export declare class GistCanvas {
* @param {string} [background]
* @memberof GistCanvas
*/
clearCanvas
(
background
?:
string
):
void
;
clearCanvas
(
background
?:
string
,
margin
?:
number
):
void
;
/**
* Draw this canvas on another canvas at the given offset
*
...
...
package/gistCharts.js
View file @
0e4df88b
This source diff could not be displayed because it is too large. You can
view the blob
instead.
package/gistCharts.js.map
View file @
0e4df88b
This diff is collapsed.
Click to expand it.
package/implementations/axis/baseAxisImplementation.class.d.ts
View file @
0e4df88b
...
...
@@ -154,6 +154,5 @@ export declare abstract class BaseAxisImplementation<T> {
getOffset
():
number
;
getMinMargin
():
TBLR
<
number
>
;
abstract
valueToWidth
(
value
:
T
):
number
;
private
getChartBuffer
();
abstract
getAxisLabels
():
Array
<
AxisLabel
>
;
}
package/index.js
View file @
0e4df88b
This diff is collapsed.
Click to expand it.
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