File size: 2,104 Bytes
f52ec6e 2eeba23 1e8952a f52ec6e 68e918f f52ec6e 68e918f f52ec6e 68e918f f52ec6e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import { useRef, useEffect } from 'react'
import * as Plot from '@observablehq/plot'
const HistoryPlot = ({ data }) => {
const containerRef = useRef()
const models = [...data.model_table] // sort copy, not in place
.filter(d => d.average !== null)
.sort((a, b) => new Date(a.creation_date) - new Date(b.creation_date))
.reduce((acc, curr) => {
const last = acc[acc.length - 1]?.maxAverage || 0
acc.push({
...curr,
maxAverage: Math.max(last, curr.average),
newRecord: curr.average > last
})
return acc
}, [])
console.log(models)
useEffect(() => {
const plot = Plot.plot({
width: 750,
height: 500,
subtitle: 'Model performance over time',
x: {
label: 'Date',
type: 'time',
tickFormat: '%Y-%m'
},
y: {
label: 'Language Proficiency Score'
},
symbol: {
legend: true
},
marks: [
Plot.dot(models, {
x: d => d.creation_date,
y: d => d.average,
symbol: "provider_name",
stroke: "provider_name",
title: d =>
`${d.provider_name} - ${d.name} (${
d.size?.toLocaleString('en-US', { notation: 'compact' }) || '?B'
})\nPublished: ${d.creation_date}\nScore: ${d.average.toFixed(2)}`,
tip: true
}),
Plot.line(
[
...models.filter(d => d.newRecord),
{
creation_date: new Date(),
maxAverage: models[models.length - 1].maxAverage
}
],
{
x: d => d.creation_date,
y: d => d.maxAverage,
curve: 'step-after',
strokeOpacity: 0.3
}
)
]
})
containerRef.current.append(plot)
return () => plot.remove()
}, [])
return (
<div
ref={containerRef}
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
/>
)
}
export default HistoryPlot
|