feat(pie): add tests for legends

plouc · Nov 4, 2020 · ba4fb4d · ba4fb4d
1 parent d0a104e
commit ba4fb4d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 7 deletions.
diff --git a/packages/pie/tests/Pie.test.js b/packages/pie/tests/Pie.test.js
@@ -342,7 +342,35 @@ describe('Pie', () => {
     })
 
     describe('legends', () => {
-        it('should render legends', () => {})
+        it('should render legends', () => {
+            const wrapper = mount(
+                <Pie
+                    width={400}
+                    height={400}
+                    data={sampleData}
+                    colors={{ datum: 'data.color' }}
+                    legends={[
+                        {
+                            anchor: 'bottom',
+                            direction: 'row',
+                            itemWidth: 100,
+                            itemHeight: 20,
+                        },
+                    ]}
+                />
+            )
+
+            const legendItems = wrapper.find('LegendSvgItem')
+            expect(legendItems).toHaveLength(sampleData.length)
+
+            sampleData.forEach((datum, index) => {
+                const legendItem = legendItems.at(index)
+                expect(legendItem.text()).toEqual(datum.id)
+                expect(legendItem.find('SymbolSquare').find('rect').prop('fill')).toEqual(
+                    datum.color
+                )
+            })
+        })
     })
 
     describe('interactivity', () => {

diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js
@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { PieDefaultProps as defaults } from '@nivo/pie'
-import { themeProperty, defsProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    themeProperty,
+    defsProperties,
+    groupProperties,
+    getLegendsProps,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -44,7 +49,7 @@ const props = [
             Define how to access the ID of each datum,
             by default, nivo will look for the \`id\` property.
         `,
-        type: 'string | (datum: any): string | number',
+        type: 'string | (datum: RawDatum): string | number',
         required: false,
         defaultValue: defaults.id,
     },
@@ -56,7 +61,7 @@ const props = [
             Define how to access the value of each datum,
             by default, nivo will look for the \`value\` property.
         `,
-        type: 'string | (datum: any): number',
+        type: 'string | (datum: RawDatum): number',
         required: false,
         defaultValue: defaults.id,
     },
@@ -72,7 +77,7 @@ const props = [
             which will receive the raw value and should return the formatted one.
         `,
         required: false,
-        type: 'Function | string',
+        type: 'string | (value: number) => string | number',
         controlType: 'valueFormat',
     },
     {
@@ -553,7 +558,7 @@ const props = [
         key: 'tooltip',
         flavors: ['svg', 'canvas'],
         group: 'Interactivity',
-        type: 'Function',
+        type: 'Component',
         required: false,
         help: 'Custom tooltip component',
         description: `
@@ -579,6 +584,37 @@ const props = [
         controlType: 'switch',
         group: 'Interactivity',
     },
+    {
+        key: 'legends',
+        flavors: ['svg', 'canvas'],
+        type: 'Legend[]',
+        help: `Optional chart's legends.`,
+        group: 'Legends',
+        controlType: 'array',
+        controlOptions: {
+            props: getLegendsProps(['svg', 'canvas']),
+            shouldCreate: true,
+            addLabel: 'add legend',
+            shouldRemove: true,
+            getItemTitle: (index, legend) =>
+                `legend[${index}]: ${legend.anchor}, ${legend.direction}`,
+            defaults: {
+                anchor: 'top-left',
+                direction: 'column',
+                justify: false,
+                translateX: 0,
+                translateY: 0,
+                itemWidth: 100,
+                itemHeight: 20,
+                itemsSpacing: 0,
+                symbolSize: 20,
+                itemDirection: 'left-to-right',
+                onClick: data => {
+                    alert(JSON.stringify(data, null, '    '))
+                },
+            },
+        },
+    },
 ]
 
 export const groups = groupProperties(props)
diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js
@@ -79,10 +79,15 @@ const initialProperties = {
         {
             anchor: 'right',
             direction: 'column',
+            justify: false,
             translateX: 140,
+            translateY: 0,
+            itemsSpacing: 2,
             itemWidth: 60,
             itemHeight: 14,
-            itemsSpacing: 2,
+            itemTextColor: '#999',
+            itemDirection: 'left-to-right',
+            itemOpacity: 1,
             symbolSize: 14,
             symbolShape: 'circle',
         },

diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
@@ -76,10 +76,15 @@ const initialProperties = {
         {
             anchor: 'bottom',
             direction: 'row',
+            justify: false,
+            translateX: 0,
             translateY: 56,
+            itemsSpacing: 0,
             itemWidth: 100,
             itemHeight: 18,
             itemTextColor: '#999',
+            itemDirection: 'left-to-right',
+            itemOpacity: 1,
             symbolSize: 18,
             symbolShape: 'circle',
             effects: [