fix(pie): fix pie stories

plouc · Dec 18, 2020 · 4c8cde1 · 4c8cde1
1 parent 0fb7756
commit 4c8cde1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/packages/pie/src/PieCanvas.tsx b/packages/pie/src/PieCanvas.tsx
@@ -201,7 +201,7 @@ const InnerPieCanvas = <RawDatum,>({
 
         ctx.save()
         ctx.translate(margin.left, margin.top)
-        ;(arcGenerator as any).context(ctx)
+        arcGenerator.context(ctx)
 
         ctx.save()
         ctx.translate(centerX, centerY)

diff --git a/packages/pie/stories/pie.stories.js → packages/pie/stories/pie.stories.tsx b/packages/pie/stories/pie.stories.js → packages/pie/stories/pie.stories.tsx
@@ -13,6 +13,7 @@ const commonProperties = {
         ...d,
     })),
     animate: true,
+    activeOuterRadiusOffset: 20,
 }
 
 const legends = [
@@ -139,10 +140,11 @@ stories.add('adding a metric in the center using a custom layer', () => (
     />
 ))
 
-stories.add('formatted tooltip values', () => (
+stories.add('formatted values', () => (
     <Pie
         {...commonProperties}
-        tooltipFormat={value =>
+        sliceLabelsRadiusOffset={0.7}
+        valueFormat={value =>
             `${Number(value).toLocaleString('ru-RU', {
                 minimumFractionDigits: 2,
             })} ₽`

diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js
@@ -519,6 +519,7 @@ const props = [
     },
     {
         key: 'activeInnerRadiusOffset',
+        flavors: ['svg', 'canvas'],
         help: `Skip label if corresponding slice's angle is lower than provided value.`,
         type: 'number',
         required: false,
@@ -533,6 +534,7 @@ const props = [
     },
     {
         key: 'activeOuterRadiusOffset',
+        flavors: ['svg', 'canvas'],
         help: `Skip label if corresponding slice's angle is lower than provided value.`,
         type: 'number',
         required: false,

diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
@@ -56,7 +56,10 @@ const initialProperties = {
     sliceLabel: 'formattedValue',
     sliceLabelsRadiusOffset: 0.5,
     sliceLabelsSkipAngle: 10,
-    sliceLabelsTextColor: '#333333',
+    sliceLabelsTextColor: {
+        from: 'color',
+        modifiers: [['darker', 2]],
+    },
 
     isInteractive: true,
     'custom tooltip example': false,