@@ -6,7 +6,16 @@ const Charts = (() => {
66 d3 . select ( el ) . selectAll ( "*" ) . remove ( ) ;
77 }
88
9- const CHART_HEIGHTS = { "chart-hourly" : 110 , "chart-sog" : 90 , "chart-types" : 160 , "chart-status" : 130 } ;
9+ const CHART_HEIGHTS = {
10+ "chart-hourly" : 110 ,
11+ "chart-hourly-compare" : 110 ,
12+ "chart-sog" : 90 ,
13+ "chart-sog-compare" : 90 ,
14+ "chart-types" : 160 ,
15+ "chart-types-compare" : 160 ,
16+ "chart-status" : 130 ,
17+ "chart-status-compare" : 130 ,
18+ } ;
1019
1120 function getSize ( el ) {
1221 const r = el . getBoundingClientRect ( ) ;
@@ -16,8 +25,9 @@ const Charts = (() => {
1625 return { w : Math . max ( w , 180 ) , h : Math . max ( h , fallbackH ) } ;
1726 }
1827
19- function drawHourly ( data , highlightHour = null ) {
20- const el = sel ( "chart-hourly" ) ;
28+ function drawHourly ( data , highlightHour = null , targetId = "chart-hourly" ) {
29+ const el = sel ( targetId ) ;
30+ if ( ! el ) return ;
2131 clearSvg ( el ) ;
2232 const { w, h } = getSize ( el ) ;
2333 const mg = { top : 6 , right : 6 , bottom : 20 , left : 32 } ;
@@ -58,8 +68,9 @@ const Charts = (() => {
5868 . selectAll ( "text" ) . style ( "fill" , "#8b949e" ) . style ( "font-size" , "10px" ) ;
5969 }
6070
61- function drawSog ( data ) {
62- const el = sel ( "chart-sog" ) ;
71+ function drawSog ( data , targetId = "chart-sog" ) {
72+ const el = sel ( targetId ) ;
73+ if ( ! el ) return ;
6374 clearSvg ( el ) ;
6475 const { w, h } = getSize ( el ) ;
6576 const mg = { top : 4 , right : 6 , bottom : 18 , left : 32 } ;
@@ -78,7 +89,8 @@ const Charts = (() => {
7889 . y0 ( ih ) . y1 ( d => y ( d . count ) )
7990 . curve ( d3 . curveCatmullRom ) ;
8091
81- svg . append ( "linearGradient" ) . attr ( "id" , "sog-grad" )
92+ const gradId = `sog-grad-${ targetId } ;
93+ svg . append ( "linearGradient" ) . attr ( "id" , gradId )
8294 . attr ( "gradientUnits" , "userSpaceOnUse" ) . attr ( "x1" , 0 ) . attr ( "y1" , 0 ) . attr ( "x2" , 0 ) . attr ( "y2" , ih )
8395 . selectAll ( "stop" ) . data ( [
8496 { offset : "0%" , color : "#58a6ff" , opacity : 0.5 } ,
@@ -88,7 +100,7 @@ const Charts = (() => {
88100 . attr ( "stop-color" , d => d . color )
89101 . attr ( "stop-opacity" , d => d . opacity ) ;
90102
91- svg . append ( "path" ) . datum ( data ) . attr ( "fill" , " url(#sog-grad)" ) . attr ( "d" , area ) ;
103+ svg . append ( "path" ) . datum ( data ) . attr ( "fill" , ` url(#${ gradId } )` ) . attr ( "d" , area ) ;
92104
93105 const line = d3 . line ( ) . x ( d => x ( d . bin_center ) ) . y ( d => y ( d . count ) ) . curve ( d3 . curveCatmullRom ) ;
94106 svg . append ( "path" ) . datum ( data ) . attr ( "fill" , "none" ) . attr ( "stroke" , "#58a6ff" )
@@ -101,8 +113,9 @@ const Charts = (() => {
101113 svg . selectAll ( ".domain" ) . style ( "stroke" , "#30363d" ) ;
102114 }
103115
104- function drawVesselTypes ( data , activeTypes = null ) {
105- const el = sel ( "chart-types" ) ;
116+ function drawVesselTypes ( data , activeTypes = null , targetId = "chart-types" ) {
117+ const el = sel ( targetId ) ;
118+ if ( ! el ) return ;
106119 clearSvg ( el ) ;
107120 const { w, h } = getSize ( el ) ;
108121 const mg = { top : 4 , right : 40 , bottom : 6 , left : 4 } ;
@@ -154,8 +167,9 @@ const Charts = (() => {
154167 } ) ;
155168 }
156169
157- function drawStatus ( data ) {
158- const el = sel ( "chart-status" ) ;
170+ function drawStatus ( data , targetId = "chart-status" , centerLabel = "Status" ) {
171+ const el = sel ( targetId ) ;
172+ if ( ! el ) return ;
159173 clearSvg ( el ) ;
160174 const { w, h } = getSize ( el ) ;
161175 const r = Math . min ( w * 0.22 , h * 0.42 ) ;
@@ -171,6 +185,10 @@ const Charts = (() => {
171185 "Restricted maneuverability" : "#ffa657" ,
172186 "Not under command" : "#ff7b72" ,
173187 "Undefined" : "#6e7681" ,
188+ "Inbound" : "#3fb950" ,
189+ "Outbound" : "#2f81f7" ,
190+ "Anchored / Waiting" : "#f0883e" ,
191+ "Coastal" : "#bc8cff" ,
174192 } ;
175193
176194 const top = data . slice ( 0 , 6 ) ;
@@ -188,7 +206,7 @@ const Charts = (() => {
188206 . attr ( "stroke" , "#161b22" ) . attr ( "stroke-width" , 1.5 )
189207 . attr ( "opacity" , 0.9 ) ;
190208
191- g . append ( "text" ) . text ( "Status" ) . attr ( "text-anchor" , "middle" )
209+ g . append ( "text" ) . text ( centerLabel ) . attr ( "text-anchor" , "middle" )
192210 . attr ( "y" , - 6 ) . style ( "font-size" , "10px" ) . style ( "fill" , "#8b949e" ) ;
193211 g . append ( "text" ) . text ( d3 . format ( ".2s" ) ( total ) ) . attr ( "text-anchor" , "middle" )
194212 . attr ( "y" , 8 ) . style ( "font-size" , "13px" ) . style ( "font-weight" , "700" ) . style ( "fill" , "#e6edf3" ) ;
0 commit comments