#进阶示例

'use client'
import { HBar } from 'mba/csr'

export default () => {
  return <HBar
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[
      { name: 'Alice', value: 12 },
      { name: 'Bob', value: 28 },
    ]}
    type="rank"
    tip={(row, meta) => {
      return <div>
        <h4>{meta.label}</h4>
        <ul>
          <li><label>Value</label><b>{row.value}</b></li>
        </ul>
      </div>
    }}
  />
}

'use client'
import { MultiBar } from 'mba/csr'

export default () => {
  return <MultiBar
    fillStyle="grid"
    labelField="month"
    valueField={['sales', 'profit']}
    valueLabel={['Sales', 'Profit']}
    data={[
      { month: 'Jan', sales: 100, profit: 20 },
      { month: 'Feb', sales: 150, profit: 35 },
    ]}
    legend={{ postion: 'rt', mode: 'percent' }}
  />
}

'use client'
import { Geo } from 'mba/csr'

export default () => {
  return <Geo
    json="china"
    zoom
    projection="mercator"
    channel={{
      schema: 'interpolateTurbo',
      texture: ['waves', 'grid'],
    }}
  />
}