@@ -2,8 +2,9 @@ dc.calendarGraph = function(parent, chartGroup) {
22 // http://bl.ocks.org/peterbsmith2/a37f2b733a75a6f348c2
33
44 var _chart = dc . marginMixin ( dc . colorMixin ( dc . baseMixin ( { } ) ) ) ;
5- var _squareSize = 13 ;
6- var _daysBack = 365 ;
5+ var _squareSize = undefined ;
6+ var _gap = 2 ;
7+ var _daysBack = undefined ;
78 let _tipSelector = ".tip" ;
89
910 // http://stackoverflow.com/questions/11382606
@@ -60,54 +61,63 @@ dc.calendarGraph = function(parent, chartGroup) {
6061 return _chart ;
6162 } ;
6263
63- _chart . width = function ( width ) {
64- if ( ! arguments . length ) {
65- return undefined ;
66- }
67- return _chart ;
68- } ;
64+ _chart . gap = function ( _ ) {
65+ if ( ! arguments . length ) return _gap ;
66+ _gap = _ ;
67+ return _chart ;
68+ } ;
6969
70- _chart . height = function ( height ) {
71- if ( ! arguments . length ) {
72- return undefined ;
73- }
74- return _chart ;
75- } ;
70+ _chart . squareSize = function ( _ ) {
71+ if ( ! arguments . length ) return _squareSize ;
72+ _squareSize = _ ;
73+ return _chart ;
74+ } ;
75+
76+ // _chart.width = function(width) {
77+ // if (!arguments.length) {
78+ // return undefined;
79+ // }
80+ // return _chart;
81+ // };
82+
83+ // _chart.height = function(height) {
84+ // if (!arguments.length) {
85+ // return undefined;
86+ // }
87+ // return _chart;
88+ // };
7689
7790 _chart . _doRedraw = function ( ) {
7891 return _chart . _doRender ( ) ;
7992 } ;
8093
8194 _chart . _doRender = function ( ) {
82- var numCols = Math . ceil ( _daysBack / 7 ) ;
83- var calendar = [ ] ;
95+ // var numCols = Math.ceil(daysBack / 7);
96+ const today = new Date ( ) ;
97+ const squareSize = calculateSquareSize ( today ) ;
98+ const daysBack = calculateDaysBack ( today , squareSize ) ;
99+ const calendar = [ ] ;
84100 var yAxis = [ ] ;
85- var today = new Date ( ) ;
86- var lastYear = addDays ( today , - _daysBack ) ;
101+ var lastYear = addDays ( today , - daysBack ) ;
87102 var col = 0 ;
88103 var month = lastYear . getMonth ( ) ;
89104 var first = true ;
90105 var yAxisFormatter = d3 . time . format ( "%b" ) ;
91106
92- var width = 11 + ( numCols * _squareSize ) ; // 1 square + 53 squares with 2px padding
93- var height = 11 + 6 * _squareSize ; //1 square + 6 squares with 2px padding
94- var legendX = 20 ;
95- var legendY = height + 10 ;
96- var viewboxWidth = width + _chart . margins ( ) . left + _chart . margins ( ) . right ;
97- var viewboxHeight = height + _chart . margins ( ) . top + _chart . margins ( ) . bottom ;
98- var aspect = viewboxWidth / viewboxHeight ;
107+ // var width = 11 + (numCols * squareSize ); // 1 square + 53 squares with 2px padding
108+ // var height = 11 + 6 * squareSize ; //1 square + 6 squares with 2px padding
109+ // var legendX = 20;
110+ // var legendY = height + 10;
111+ // var viewboxWidth = width + _chart.margins().left + _chart.margins().right;
112+ // var viewboxHeight = height + _chart.margins().top + _chart.margins().bottom;
113+ // var aspect = viewboxWidth / viewboxHeight;
99114
100115 _chart . resetSvg ( ) ;
101-
102- _chart . svg ( )
103- . attr ( "viewBox" , "0 0 " + viewboxWidth + " " + viewboxHeight )
104- . attr ( "preserveAspectRatio" , "xMidYMid meet" )
105- . attr ( "style" , "margin: 0.5rem;" ) ;
106116
107117 let g = _chart . svg ( ) . append ( "g" )
108118 . attr ( "transform" , "translate(" + _chart . margins ( ) . left + "," + _chart . margins ( ) . top + ")" ) ;
109119
110- for ( i = 0 ; i <= _daysBack ; i ++ ) {
120+ for ( i = 0 ; i <= daysBack ; i ++ ) {
111121 dateString = lastYear . toJSONLocal ( ) ;
112122 var date = makeUTCDate ( dateString ) ;
113123 var c = date . getDay ( ) ;
@@ -136,31 +146,34 @@ dc.calendarGraph = function(parent, chartGroup) {
136146 . style ( "fill" , "#767676" )
137147 . attr ( "text-anchor" , "middle" )
138148 . attr ( "dx" , "-15" )
139- . attr ( "dy" , "22" ) ;
149+ . attr ( "dy" , ( squareSize * 2 ) - _gap )
150+ . classed ( "axis" , true ) ;
140151
141152 g . append ( "text" )
142153 . text ( "W" )
143154 . style ( "fill" , "#767676" )
144155 . attr ( "text-anchor" , "middle" )
145156 . attr ( "dx" , "-15" )
146- . attr ( "dy" , "48" ) ;
157+ . attr ( "dy" , ( squareSize * 4 ) - _gap )
158+ . classed ( "axis" , true ) ;
147159
148160 g . append ( "text" )
149161 . text ( "F" )
150162 . attr ( "text-anchor" , "middle" )
151163 . style ( "fill" , "#767676" )
152164 . attr ( "dx" , "-15" )
153- . attr ( "dy" , "74" ) ;
165+ . attr ( "dy" , ( squareSize * 6 ) - _gap )
166+ . classed ( "axis" , true ) ;
154167
155168 g . selectAll ( ".cal" )
156169 . data ( calendar )
157170 . enter ( )
158171 . append ( "rect" )
159172 . attr ( "class" , "cal" )
160- . attr ( "width" , _squareSize - 2 )
161- . attr ( "height" , _squareSize - 2 )
162- . attr ( "x" , function ( d , i ) { return d . col * _squareSize ; } )
163- . attr ( "y" , function ( d , i ) { return d . date . getDay ( ) * _squareSize ; } )
173+ . attr ( "width" , squareSize - _gap )
174+ . attr ( "height" , squareSize - _gap )
175+ . attr ( "x" , function ( d , i ) { return d . col * squareSize ; } )
176+ . attr ( "y" , function ( d , i ) { return d . date . getDay ( ) * squareSize ; } )
164177 . attr ( "fill" , "#eeeeee" ) ;
165178
166179 g . selectAll ( ".y" )
@@ -169,33 +182,34 @@ dc.calendarGraph = function(parent, chartGroup) {
169182 . append ( "text" )
170183 . text ( d => d . month )
171184 . attr ( "dy" , - 10 )
172- . attr ( "dx" , d => d . col * _squareSize )
173- . attr ( "fill" , "#767676" ) ;
185+ . attr ( "dx" , d => d . col * squareSize )
186+ . attr ( "fill" , "#767676" )
187+ . classed ( "axis" , true ) ;
174188
175- g . selectAll ( '.legend' )
176- . data ( _chart . colors ( ) . range ( ) )
177- . enter ( )
178- . append ( 'rect' )
179- . attr ( 'class' , 'legend' )
180- . attr ( 'width' , _squareSize - 2 )
181- . attr ( 'height' , _squareSize - 2 )
182- . attr ( 'x' , ( d , i ) => legendX + i * _squareSize + 5 )
183- . attr ( 'y' , legendY )
184- . attr ( 'fill' , d => d ) ;
185-
186- g . append ( 'text' )
187- . attr ( 'class' , 'legend' )
188- . attr ( 'x' , legendX - 35 )
189- . attr ( 'y' , legendY + 10 )
190- . text ( 'Less' )
191- . attr ( 'fill' , '#767676' ) ;
192-
193- g . append ( 'text' )
194- . attr ( 'class' , 'legend' )
195- . attr ( 'x' , legendX + _chart . colors ( ) . range ( ) . length * _squareSize + 10 )
196- . attr ( 'y' , legendY + 10 )
197- . text ( 'More' )
198- . attr ( 'fill' , '#767676' ) ;
189+ // g.selectAll('.legend')
190+ // .data(_chart.colors().range())
191+ // .enter()
192+ // .append('rect')
193+ // .attr('class','legend')
194+ // .attr('width', squareSize - _gap )
195+ // .attr('height', squareSize - _gap )
196+ // .attr('x', (d, i) => legendX + i * squareSize + 5)
197+ // .attr('y', legendY)
198+ // .attr('fill', d => d);
199+
200+ // g.append('text')
201+ // .attr('class','legend')
202+ // .attr('x', legendX - 35)
203+ // .attr('y', legendY + 10)
204+ // .text('Less')
205+ // .attr('fill','#767676');
206+
207+ // g.append('text')
208+ // .attr('class','legend')
209+ // .attr('x', legendX + _chart.colors().range().length * squareSize + 10)
210+ // .attr('y', legendY + 10)
211+ // .text('More')
212+ // .attr('fill','#767676');
199213
200214 var data = _chart . data ( ) ;
201215 var events = { } ;
@@ -232,5 +246,20 @@ dc.calendarGraph = function(parent, chartGroup) {
232246 return _chart ;
233247 } ;
234248
249+ function calculateSquareSize ( today ) {
250+ if ( _squareSize == undefined ) {
251+ return Math . floor ( _chart . effectiveHeight ( ) / 7 ) ;
252+ }
253+ return _squareSize
254+ }
255+
256+ function calculateDaysBack ( today , squareSize ) {
257+ if ( _daysBack === undefined ) {
258+ const cols = Math . floor ( _chart . effectiveWidth ( ) / ( squareSize ) ) ;
259+ return ( cols * 7 ) - ( 7 - ( today . getDay ( ) ) ) ;
260+ }
261+ return _daysBack ;
262+ }
263+
235264 return _chart . anchor ( parent , chartGroup ) ;
236265} ;
0 commit comments