import { scaleOrdinal } from '@vx/scale';
import { LegendOrdinal } from '@vx/legend';

import { colors } from '@data-ui/theme';
import { RadialChart, ArcSeries, ArcLabel } from '@data-ui/radial-chart';

const colorScale = scaleOrdinal({ range: colors.categories });

export default () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <RadialChart
      ariaLabel="This is a radial-chart chart of..."
      width={width}
      height={height}
      margin={{ top, right, bottom, left }}
    >
      <ArcSeries
        data={data}
        pieValue={d => d.value}
        fill={arc => colorScale(arc.data.label)}
        stroke="#fff"
        strokeWidth={1}
        label{arc => `${(arc.data.value).toFixed(1)}%`}
        labelComponent={<ArcLabel />}
        innerRadius={radius => 0.35 * radius}
        outerRadius={radius => 0.6 * radius}
        labelRadius={radius => 0.75 * radius}
      />
    </RadialChart>
    <LegendOrdinal
      direction="column"
      scale={colorScale}
      shape="rect"
      fill={({ datum }) => colorScale(datum)}
      labelFormat={label => label}
    />
  </div>
);