export const DataVizGradientPalette = {
  gradient1: 'default.1',
  gradient2: 'default.2',
  gradient3: 'default.3',
  gradient4: 'default.4',
  gradient5: 'default.5',
  gradient6: 'default.6',
  gradient7: 'default.7',
  gradient8: 'default.8',
  gradient9: 'default.9',
  gradient10: 'default.10',
  // status gradients
  success: 'semantic.success',
  highSuccess: 'semantic.highSuccess',
  warning: 'semantic.warning',
  error: 'semantic.error',
  highError: 'semantic.highError',
  disabled: 'semantic.disabled',
};

export interface ChartProps{
  // ... existing props
  /* Used to enable gradient fill for the chart.  */
  enableGradient?: boolean;
  /* Used to enable rounded corners for the chart. */
  roundCorners?: boolean;
}

const data: IChartProps = {
  chartTitle: 'Donut chart basic example',
  chartData: [
    {
      legend: 'first',
      data: 20000,
      // new `gradient` prop for chart data interfaces
      // use instead of `color` prop, when `enableGradient` is true for the chart
      gradient: getGradientFromToken(DataVizGradientPalette.gradient1),
      xAxisCalloutData: '2020/04/30',
    },
    {
      legend: 'second',
      data: 39000,
      gradient: getGradientFromToken(DataVizGradientPalette.gradient2),
      xAxisCalloutData: '2020/04/20',
    },
  ],
};

// ... in render method
<DonutChart
  data={data}
  valueInsideDonut={39000}
  enableGradient={true} // new prop
  roundCorners={true} // new prop
  // ... other props
/>