@@ -75,6 +75,7 @@ const niceYTicks = (min: number, max: number, count = 5): number[] => {
7575interface LineSeriesData {
7676 label : string ;
7777 color : string ;
78+ dashArray ?: string ;
7879 points : { x : number ; y : number ; date : string ; value : number } [ ] ;
7980}
8081
@@ -176,14 +177,16 @@ const renderMultiLineChart = (
176177 . join ( " " ) ;
177178 return (
178179 < g key = { si } >
179- < path d = { pathD } fill = "none" stroke = { s . color } strokeWidth = { 2 } />
180+ < path d = { pathD } fill = "none" stroke = { s . color } strokeWidth = { 2 } strokeDasharray = { s . dashArray } />
180181 { sorted . map ( ( p , i ) => (
181182 < circle
182183 key = { i }
183184 cx = { scaleX ( p . x ) }
184185 cy = { scaleY ( p . value ) }
185- r = { 3 }
186+ r = { s . dashArray ? 4 : 3 }
186187 fill = { s . color }
188+ stroke = { s . dashArray ? "#fff" : undefined }
189+ strokeWidth = { s . dashArray ? 1 : undefined }
187190 />
188191 ) ) }
189192 </ g >
@@ -292,7 +295,7 @@ const renderAreaChart = (
292295 ) ;
293296} ;
294297
295- const Legend = ( { items } : { items : { label : string ; color : string } [ ] } ) => (
298+ const Legend = ( { items } : { items : { label : string ; color : string ; dashed ?: boolean } [ ] } ) => (
296299 < div
297300 style = { {
298301 display : "flex" ,
@@ -304,14 +307,20 @@ const Legend = ({ items }: { items: { label: string; color: string }[] }) => (
304307 >
305308 { items . map ( ( item , i ) => (
306309 < div key = { i } style = { { display : "flex" , alignItems : "center" , gap : 4 } } >
307- < div
308- style = { {
309- width : 12 ,
310- height : 12 ,
311- backgroundColor : item . color ,
312- borderRadius : 2 ,
313- } }
314- />
310+ { item . dashed ? (
311+ < svg width = { 16 } height = { 12 } >
312+ < line x1 = { 0 } y1 = { 6 } x2 = { 16 } y2 = { 6 } stroke = { item . color } strokeWidth = { 2 } strokeDasharray = "4,2" />
313+ </ svg >
314+ ) : (
315+ < div
316+ style = { {
317+ width : 12 ,
318+ height : 12 ,
319+ backgroundColor : item . color ,
320+ borderRadius : 2 ,
321+ } }
322+ />
323+ ) }
315324 < span style = { { fontSize : 12 , color : "#343741" } } > { item . label } </ span >
316325 </ div >
317326 ) ) }
@@ -392,9 +401,11 @@ const NumericTimeSeries = ({
392401 label : string ,
393402 color : string ,
394403 accessor : ( m : FeatureMetric ) => number | null ,
404+ dashArray ?: string ,
395405 ) : LineSeriesData => ( {
396406 label,
397407 color,
408+ dashArray,
398409 points : metrics
399410 . filter ( ( m ) => accessor ( m ) !== null )
400411 . map ( ( m ) => ( {
@@ -405,7 +416,7 @@ const NumericTimeSeries = ({
405416 } ) ) ,
406417 } ) ;
407418 return [
408- build ( "Mean" , COLORS [ 0 ] , ( m ) => m . mean ) ,
419+ build ( "Mean" , COLORS [ 0 ] , ( m ) => m . mean , "6,3" ) ,
409420 build ( "P50" , COLORS [ 1 ] , ( m ) => m . p50 ) ,
410421 build ( "P95" , COLORS [ 2 ] , ( m ) => m . p95 ) ,
411422 ] ;
@@ -431,7 +442,7 @@ const NumericTimeSeries = ({
431442 </ div >
432443 < Legend
433444 items = { [
434- { label : "Mean" , color : COLORS [ 0 ] } ,
445+ { label : "Mean" , color : COLORS [ 0 ] , dashed : true } ,
435446 { label : "P50" , color : COLORS [ 1 ] } ,
436447 { label : "P95" , color : COLORS [ 2 ] } ,
437448 ] }
0 commit comments