import { BarChart } from '@based/ui'
import { generateChartsRandomData } from '../components'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Bar Chart',
  group: 'Charts',
  section: 'components',
  icon: 'bar-chart',
  component: BarChart,
  subtitle:
    'A bar chart component converts numerical data into proportional bars, allowing for straightforward visual comparisons between different categories.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Vertical',
    type: 'component',
    description: 'Displays vertical bars to compare values across categories.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          orientation="vertical"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Ad revenue']}
          xFormat={(x: number) => `${x}`}
          yFormat={(y: number) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
  {
    name: 'Vertical with multiple values',
    type: 'component',
    description:
      'Displays vertical bars divided into segments, representing multiple values within each category.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          variant="separate"
          orientation="vertical"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
          xFormat={(x) => `${x}`}
          yFormat={(y) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
  {
    name: 'Vertical with multiple values stacked',
    type: 'component',
    description:
      'Displays vertical bars with stacked segments, showing cumulative values for each category.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          variant="stacked"
          orientation="vertical"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
          xFormat={(x) => `${x}`}
          yFormat={(y) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
  {
    name: 'Horizontal',
    type: 'component',
    description:
      'Displays horizontal bars to compare values across categories.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          orientation="horizontal"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
          xFormat={(x) => `${x}`}
          yFormat={(y) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
  {
    name: 'Horizontal with multiple values',
    type: 'component',
    description:
      'Displays horizontal bars divided into segments, representing multiple values within each category.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          variant="separate"
          orientation="horizontal"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
          xFormat={(x) => `${x}`}
          yFormat={(y) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
  {
    name: 'Horizontal with multiple values stacked',
    type: 'component',
    description:
      'Displays horizontal bars with stacked segments, showing cumulative values for each category.',
    style: {
      frame: false,
    },
    render: () => {
      return (
        <BarChart
          variant="stacked"
          orientation="horizontal"
          data={generateChartsRandomData()}
          xKey="month"
          yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
          xFormat={(x) => `${x}`}
          yFormat={(y) => `$${Math.round(y).toString()}`}
        />
      )
    },
  },
]
