import { Chart, zyplot } from '@hzblj/zyplot'

const chart = zyplot(z => ({
  categories,
  series: [
    z.series({
      id: 'price',
      label: 'Price',
      values: prices,
      style: {
        color: '#7b61ff',
        fill: z.fill({ baseline: openingPrice, pattern: 'dots', spacing: 5, fadeTo: 0.15 }),
        strokeWidth: 2,
      },
    }),
  ],
  axis: { x: false, y: false },
  interaction: z.interaction.scrub({
    dimOpacity: 0.28,
    marker: z.marker.trail({ dot: true, glow: z.glow({ opacity: 0.3, radius: 10 }) }),
  }),
}))

export function PriceChart() {
  return <Chart.Line {...chart} />
}