Charts

import { LineChart } from '@kition/tessera-ui'

const days = Array.from({ length: 14 }, (_, index) => `10-${String(index + 10).padStart(2, '0')}`)
const DATA = days.flatMap((date, index) => [
  { date, metric: 'Visitors', value: Math.round(420 + Math.sin(index / 2) * 90 + index * 12) },
  { date, metric: 'Downloads', value: Math.round(120 + Math.cos(index / 3) * 30 + index * 6) },
  { date, metric: 'Sign-ups', value: Math.round(40 + Math.sin(index) * 8 + index * 2) },
])

export default function Demo() {
  return <LineChart label="Growth by day" data={DATA} xField="date" yField="value" seriesField="metric" height={260} />
}

import { BarChart, PieChart } from '@kition/tessera-ui'

const STAGES = [
  { stage: 'Backlog', tasks: 14 },
  { stage: 'To do', tasks: 9 },
  { stage: 'Doing', tasks: 6 },
  { stage: 'Review', tasks: 4 },
  { stage: 'Done', tasks: 21 },
]

export default function Demo() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 24 }}>
      <BarChart label="Tasks by stage" data={STAGES} xField="stage" yField="tasks" height={240} />
      <PieChart label="Share of tasks" data={STAGES} labelField="stage" valueField="tasks" innerRadius={0.6} height={200} />
    </div>
  )
}