[UIK-6021][d3-chart] added new Score Donut chart and example with other value in donut

playground/entries/Chart/ScoreDonut.tsx

@@ -0,0 +1,95 @@
+import { Chart } from '@semcore/ui/d3-chart';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+import { getDefaultChartControls } from './common/controls';
+import type { CommonChartProps, LegendChartProps } from './common/controls';
+import type { JSXProps } from '../../types/JSXProps';
+import type { PlaygroundEntry } from '../../types/Playground';
+import createGithubLink from '../../utils/createGHLink';
+
+type DonutChartProps = {
+  commonChartProps: Omit<CommonChartProps, 'showTotalInTooltip'>;
+  legendProps: Omit<LegendChartProps, 'direction'>;
+  donutProps: {
+    halfsize: boolean;
+    innerLabel: string;
+  };
+};
+export type DonutChartJSXProps = JSXProps<DonutChartProps>;
+
+const data = {
+  value: 33,
+};
+
+function getJSX(props: DonutChartJSXProps) {
+  const legendProps = {
+    ...props.legendProps,
+  };
+  return (
+    <Chart.ScoreDonut
+      plotWidth={300}
+      plotHeight={200}
+      data={data}
+      aria-label='Donut chart'
+      {...props.donutProps}
+      innerLabel={(
+        props.donutProps.halfsize
+          ? (
+              <Text tag='tspan' dy='-1em'>
+                {props.donutProps.innerLabel}
+              </Text>
+            )
+          : props.donutProps.innerLabel
+      )}
+      {...props.commonChartProps}
+      {...(props.legendProps && {
+        legendProps,
+        showLegend: props.commonChartProps.showLegend as true,
+      })}
+      {...(props.legendProps?.patterns && { patterns: props.legendProps.patterns })}
+    />
+  );
+}
+
+const entry: PlaygroundEntry<DonutChartJSXProps> = {
+  JSX: (props) => getJSX(props),
+  controls: {
+    donutProps: {
+      type: 'group',
+      groupName: 'Donut props',
+      controls: {
+        halfsize: {
+          type: 'boolean',
+          value: false,
+          displayName: 'Half size',
+        },
+        innerLabel: {
+          type: 'text',
+          value: 'Example',
+          displayName: 'Inner Label',
+        },
+      },
+    },
+    ...getDefaultChartControls({
+      skip: {
+        commonChartProps: ['showTotalInTooltip'],
+        legendProps: ['direction'],
+      },
+      add: {
+        legendProps: {
+          shape: {
+            type: 'select',
+            value: 'Circle',
+            options: ['Checkbox', 'Circle', 'Pattern'],
+            displayName: 'Shape',
+          },
+        },
+      },
+    }),
+  },
+  link: createGithubLink('d3-chart'),
+  filterProps: ['data'],
+};
+
+export default entry;

playground/registry.ts

@@ -13,6 +13,7 @@ import ChartLine from './entries/Chart/Line';
 import MiniChart from './entries/Chart/MiniChart';
 import ChartRadar from './entries/Chart/Radar';
 import ChartScatterPlot from './entries/Chart/ScatterPlot';
+import ChartScoreDonut from './entries/Chart/ScoreDonut';
 import ChartStackedArea from './entries/Chart/StackedArea';
 import ChartStackedBar from './entries/Chart/StackedBar';
 import ChartStackedHorizontalBar from './entries/Chart/StackedHorizontalBar';
@@ -89,6 +90,7 @@ const registry = {
   'Chart.Cigarette': ChartCigarette,
   'ChartLegend': ChartLegend,
   'Chart.Donut': ChartDonut,
+  'Chart.ScoreDonut': ChartScoreDonut,
   'Chart.Histogram': ChartHistogram,
   'Chart.Line': ChartLine,
   'MiniChart': MiniChart,

semcore/d3-chart/__tests__/axe-tests/score-donut-chart.axe-test.tsx

@@ -0,0 +1,17 @@
+import { expect, test, getAccessibilityViolations } from '@semcore/testing-utils/playwright';
+import { loadPage } from '@semcore/testing-utils/shared/helpers';
+import { TAG } from '@semcore/testing-utils/shared/tags';
+
+test.describe(`@d3-chart @score-donut-chart ${TAG.ACCESSIBILITY}`, () => {
+  test('basic-usage', async ({ page }) => {
+    await loadPage(page, 'stories/components/d3-chart/docs/examples/score-donut-chart/basic-usage.tsx', 'en');
+    const violations = await getAccessibilityViolations({ page });
+    expect(violations).toEqual([]);
+  });
+
+  test('semi-donut', async ({ page }) => {
+    await loadPage(page, 'stories/components/d3-chart/docs/examples/score-donut-chart/semi-donut.tsx', 'en');
+    const violations = await getAccessibilityViolations({ page });
+    expect(violations).toEqual([]);
+  });
+});