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

const chart = zyplot(z => ({
  categories,
  series: [
    z.series({
      id: 'price',
      label: 'Price',
      values: prices,
      style: { color: isUp ? '#34c759' : '#ff3b30', fill: z.fill({ fadeTo: 0 }), strokeWidth: 2 },
    }),
  ],
  annotations: prices.map((value, index) =>
    z.annotation.measure({ id: 'grid-' + index, x: categories[index], y: value })
  ),
  interaction: z.interaction.scrub({
    range: true,
    rangeStyle: { color: '#34c759', downColor: '#ff3b30', dimOpacity: 0.32, dot: true },
  }),
  axis: { x: false, y: false },
}))

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