import { ScatterChart } from "@/components/dithercharts/scatter-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"
const chartData = [
{ minutes: 2.2, depth: 20 },
{ minutes: 10.9, depth: 55 },
{ minutes: 17.8, depth: 79 },
{ minutes: 4.5, depth: 19 },
{ minutes: 12, depth: 63 },
{ minutes: 18.1, depth: 69 },
{ minutes: 3.4, depth: 30 },
{ minutes: 8.4, depth: 44 },
{ minutes: 17.5, depth: 86 },
{ minutes: 1.9, depth: 14 },
{ minutes: 9.9, depth: 51 },
{ minutes: 19.7, depth: 83 },
{ minutes: 4.5, depth: 15 },
{ minutes: 10, depth: 55 },
{ minutes: 15.7, depth: 77 },
{ minutes: 2.3, depth: 22 },
{ minutes: 13.1, depth: 57 },
{ minutes: 14.9, depth: 70 },
{ minutes: 4.1, depth: 18 },
{ minutes: 9.7, depth: 49 },
{ minutes: 18.2, depth: 88 },
{ minutes: 3, depth: 13 },
{ minutes: 10.1, depth: 46 },
{ minutes: 17.1, depth: 82 },
{ minutes: 6.3, depth: 29 },
{ minutes: 11, depth: 43 },
{ minutes: 18.8, depth: 83 },
{ minutes: 2.6, depth: 32 },
{ minutes: 12.5, depth: 42 },
{ minutes: 18.9, depth: 82 },
{ minutes: 2.4, depth: 21 },
{ minutes: 11, depth: 41 },
{ minutes: 17.2, depth: 77 },
{ minutes: 3.5, depth: 35 },
{ minutes: 10.7, depth: 61 },
{ minutes: 14.7, depth: 61 },
{ minutes: 3.6, depth: 13 },
{ minutes: 10.5, depth: 55 },
{ minutes: 16.3, depth: 88 },
{ minutes: 3.2, depth: 12 },
{ minutes: 7.4, depth: 53 },
{ minutes: 18, depth: 63 },
{ minutes: 1, depth: 34 },
{ minutes: 12, depth: 58 },
{ minutes: 17.3, depth: 84 },
{ minutes: 4.4, depth: 38 },
{ minutes: 11, depth: 49 },
{ minutes: 19.2, depth: 94 },
{ minutes: 2.3, depth: 25 },
{ minutes: 11, depth: 56 },
{ minutes: 18.9, depth: 73 },
{ minutes: 3.6, depth: 25 },
{ minutes: 9.5, depth: 43 },
{ minutes: 17, depth: 77 },
{ minutes: 3.9, depth: 9 },
{ minutes: 11.7, depth: 45 },
{ minutes: 19.6, depth: 90 },
{ minutes: 1, depth: 19 },
{ minutes: 8.9, depth: 53 },
{ minutes: 18.4, depth: 85 },
{ minutes: 3.9, depth: 24 },
{ minutes: 12.4, depth: 57 },
{ minutes: 16.7, depth: 87 },
{ minutes: 2.4, depth: 29 },
{ minutes: 7.9, depth: 43 },
{ minutes: 16, depth: 69 },
{ minutes: 4.3, depth: 21 },
{ minutes: 12.3, depth: 61 },
{ minutes: 16.8, depth: 84 },
{ minutes: 2.8, depth: 2 },
{ minutes: 8.4, depth: 40 },
{ minutes: 18.6, depth: 75 },
{ minutes: 4.6, depth: 16 },
{ minutes: 8.9, depth: 53 },
{ minutes: 19.1, depth: 74 },
{ minutes: 4.3, depth: 28 },
{ minutes: 12.4, depth: 57 },
{ minutes: 19.1, depth: 82 },
{ minutes: 4.5, depth: 14 },
{ minutes: 8.1, depth: 62 },
{ minutes: 19, depth: 79 },
{ minutes: 3.8, depth: 15 },
{ minutes: 10.7, depth: 49 },
{ minutes: 18.9, depth: 85 },
{ minutes: 1.5, depth: 14 },
{ minutes: 11.1, depth: 41 },
{ minutes: 15.8, depth: 74 },
{ minutes: 1.6, depth: 19 },
{ minutes: 8, depth: 48 },
{ minutes: 19.4, depth: 83 },
{ minutes: 5, depth: 25 },
{ minutes: 9, depth: 58 },
{ minutes: 18, depth: 80 },
{ minutes: 4.5, depth: 17 },
{ minutes: 11, depth: 49 },
{ minutes: 20.8, depth: 79 },
{ minutes: 3.4, depth: 21 },
{ minutes: 11.4, depth: 59 },
{ minutes: 16.4, depth: 73 },
{ minutes: 3.6, depth: 18 },
{ minutes: 7.8, depth: 49 },
{ minutes: 17.9, depth: 94 },
{ minutes: 5.1, depth: 23 },
{ minutes: 7, depth: 45 },
{ minutes: 17.1, depth: 76 },
{ minutes: 2.7, depth: 35 },
{ minutes: 9.2, depth: 50 },
{ minutes: 18.4, depth: 80 },
{ minutes: 2.9, depth: 9 },
{ minutes: 11.5, depth: 59 },
{ minutes: 18, depth: 78 },
{ minutes: 3.2, depth: 27 },
{ minutes: 8.5, depth: 48 },
{ minutes: 18.4, depth: 73 },
{ minutes: 3.8, depth: 11 },
{ minutes: 9.7, depth: 52 },
{ minutes: 20, depth: 84 },
{ minutes: 0.6, depth: 8 },
{ minutes: 7.9, depth: 45 },
{ minutes: 19.7, depth: 77 },
]
const chartConfig = {
minutes: { label: "Minutes" },
depth: { label: "Scroll %" },
} satisfies ChartConfig
export function ChartScatterDensity() {
return (
<ScatterChart
data={chartData}
config={chartConfig}
xKey="minutes"
yKey="depth"
density
label="Session length vs scroll depth"
/>
)
}
