feat(website): add missing BoxPlot properties documentation

website/src/@types/file_types.d.ts

@@ -24,6 +24,15 @@ declare module '*bar/meta.yml' {
     export default meta
 }
 
+declare module '*boxplot/meta.yml' {
+    const meta: {
+        flavors: ChartMetaFlavors
+        BoxPlot: ChartMeta
+    }
+
+    export default meta
+}
+
 declare module '*bullet/meta.yml' {
     const meta: {
         flavors: ChartMetaFlavors

website/src/components/icons/BoxPlotIcon.tsx

@@ -58,7 +58,7 @@ const chartProps: BoxPlotSvgProps<any> = {
     ],
     medianWidth: 2,
     whiskerWidth: 3,
-    whiskerEndSize: .6,
+    whiskerEndSize: 0.6,
     borderRadius: 2,
     isInteractive: false,
     animate: false,

website/src/data/components/boxplot/generator.ts

@@ -0,0 +1,15 @@
+import { generateBoxPlotData } from '@nivo/generators'
+
+export const generateLightDataSet = () =>
+    generateBoxPlotData([
+        { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 },
+        { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 },
+        { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 },
+        { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 },
+        { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 3, n: 20 },
+    ])

website/src/data/components/boxplot/mapper.ts

@@ -0,0 +1,14 @@
+import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
+
+export default settingsMapper(
+    {
+        valueFormat: mapFormat,
+        axisTop: mapAxis('top'),
+        axisRight: mapAxis('right'),
+        axisBottom: mapAxis('bottom'),
+        axisLeft: mapAxis('left'),
+    },
+    {
+        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
+    }
+)

website/src/data/components/boxplot/props.ts

@@ -20,21 +20,90 @@ const allFlavors: Flavor[] = ['svg']
 
 const props: ChartProperty[] = [
     {
-        key: 'layout',
+        key: 'value',
         group: 'Base',
-        help: `Chart layout.`,
-        type: `'horizontal' | 'vertical'`,
         flavors: allFlavors,
+        help: 'Value accessor.',
+        description: `
+            Define how to access the value of each datum,
+            by default, nivo will look for the \`value\` property.
+        `,
+        type: 'string | (datum: RawDatum): number',
         required: false,
-        defaultValue: svgDefaultProps.layout,
+        defaultValue: svgDefaultProps.value,
+    },
+    {
+        key: 'minValue',
+        group: 'Base',
+        help: 'Minimum value.',
+        description: `
+            Minimum value, if 'auto',
+            will use min value from the provided data.
+        `,
+        required: false,
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.minValue,
+        type: `number | 'auto'`,
         control: {
-            type: 'radio',
-            choices: [
-                { label: 'horizontal', value: 'horizontal' },
-                { label: 'vertical', value: 'vertical' },
-            ],
+            type: 'switchableRange',
+            disabledValue: 'auto',
+            defaultValue: 0,
+            min: -10,
+            max: 10,
         },
     },
+    {
+        key: 'maxValue',
+        group: 'Base',
+        help: 'Maximum value.',
+        description: `
+            Maximum value, if 'auto',
+            will use max value from the provided data.
+        `,
+        required: false,
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.maxValue,
+        type: `number | 'auto'`,
+        control: {
+            type: 'switchableRange',
+            disabledValue: 'auto',
+            defaultValue: 10,
+            min: 0,
+            max: 20,
+        },
+    },
+    {
+        key: 'groupBy',
+        help: 'How to group box plots belonging to the same series',
+        type: 'string | function',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.groupBy,
+        group: 'Base',
+    },
+    {
+        key: 'groups',
+        help: 'Specify the groups available, if omitted, it will be inferred from the provided data.',
+        type: 'string[]',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.groups,
+        group: 'Base',
+    },
+    {
+        key: 'subGroupBy',
+        help: 'Used for sub-grouping.',
+        type: 'string | function',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.subGroupBy,
+        group: 'Base',
+    },
+    {
+        key: 'subGroups',
+        help: 'Specify the sub-groups available, if omitted, it will be inferred from the provided data.',
+        type: 'string[]',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.subGroups,
+        group: 'Base',
+    },
     {
         key: 'quantiles',
         group: 'Base',
@@ -93,32 +162,24 @@ const props: ChartProperty[] = [
         },
     },
     {
-        key: 'groupBy',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string | function',
-        flavors: allFlavors,
-        defaultValue: svgDefaultProps.groupBy,
-        group: 'Base',
-    },
-    {
-        key: 'groups',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string[]',
-        flavors: allFlavors,
-        defaultValue: svgDefaultProps.groups,
+        key: 'layout',
         group: 'Base',
-    },
-    {
-        key: 'subGroupBy',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string | function',
+        help: `Chart layout.`,
+        type: `'horizontal' | 'vertical'`,
         flavors: allFlavors,
-        defaultValue: svgDefaultProps.subGroupBy,
-        group: 'Base',
+        required: false,
+        defaultValue: svgDefaultProps.layout,
+        control: {
+            type: 'radio',
+            choices: [
+                { label: 'horizontal', value: 'horizontal' },
+                { label: 'vertical', value: 'vertical' },
+            ],
+        },
     },
     {
         key: 'padding',
-        help: 'Padding between each bar (ratio).',
+        help: 'Padding between each group or boxplot when there is a single group (ratio).',
         type: 'number',
         required: false,
         flavors: allFlavors,
@@ -133,7 +194,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'innerPadding',
-        help: 'Padding between grouped/stacked bars.',
+        help: 'Padding between grouped boxplots.',
         type: 'number',
         required: false,
         flavors: allFlavors,
@@ -152,6 +213,32 @@ const props: ChartProperty[] = [
         flavors: allFlavors,
         defaultValue: svgDefaultProps.colors,
     }),
+    {
+        key: 'colorBy',
+        group: 'Style',
+        help: `How to assign individual colors, also impacts legends.`,
+        type: `'group' | 'subGroup'`,
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.colorBy,
+        control: {
+            type: 'radio',
+            choices: [
+                { label: 'group', value: 'group' },
+                { label: 'subGroup', value: 'subGroup' },
+            ],
+        },
+    },
+    {
+        key: 'opacity',
+        help: 'Opacity.',
+        required: false,
+        defaultValue: svgDefaultProps.opacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Style',
+    },
     {
         key: 'borderRadius',
         help: 'Interquartile Range box border radius.',
@@ -191,6 +278,27 @@ const props: ChartProperty[] = [
         group: 'Style',
         control: { type: 'inheritedColor' },
     },
+    {
+        key: 'medianWidth',
+        help: 'Median line width.',
+        type: 'number',
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.medianWidth,
+        group: 'Style',
+        control: { type: 'lineWidth' },
+    },
+    {
+        key: 'medianColor',
+        help: 'Method to compute the median color.',
+        description: `[see dedicated documentation](self:/guides/colors).`,
+        type: 'string | object | Function',
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.medianColor,
+        group: 'Style',
+        control: { type: 'inheritedColor' },
+    },
     {
         key: 'whiskerWidth',
         help: 'Whisker line width.',
@@ -235,13 +343,70 @@ const props: ChartProperty[] = [
         values: true,
     }),
     ...axes({ flavors: allFlavors }),
+    {
+        key: 'layers',
+        group: 'Customization',
+        help: 'Defines the order of layers and add custom layers.',
+        description: `
+            You can also use this to insert extra layers
+            in the chart, the extra layer should be a valid React component,
+            and will be passed to [\`createElement\`](https://react.dev/reference/react/createElement).
+            
+            It will receive the chart's context & computed data
+            and must return a valid SVG element.
+        `,
+        flavors: allFlavors,
+        required: false,
+        type: 'Array<string | Function>',
+        defaultValue: svgDefaultProps.layers,
+    },
+    {
+        key: 'boxPlotComponent',
+        group: 'Customization',
+        help: 'Override the default box plot component.',
+        required: false,
+        type: 'React.FC<BoxPlotItemProps<RawDatum>>',
+    },
     isInteractive({
         flavors: ['svg'],
         defaultValue: svgDefaultProps.isInteractive,
     }),
+    {
+        key: 'activeOpacity',
+        help: 'Opacity when active.',
+        required: false,
+        defaultValue: svgDefaultProps.activeOpacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Interactivity',
+    },
+    {
+        key: 'inactiveOpacity',
+        help: 'Opacity when inactive.',
+        required: false,
+        defaultValue: svgDefaultProps.inactiveOpacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Interactivity',
+    },
+    {
+        key: 'tooltip',
+        flavors: allFlavors,
+        group: 'Interactivity',
+        type: 'Function',
+        required: false,
+        help: 'Tooltip custom component',
+        description: `
+            A function allowing complete tooltip customisation,
+            it must return a valid HTML element and will receive
+            the boxplot summary.
+        `,
+    },
     {
         key: 'legends',
-        flavors: ['svg', 'canvas'],
+        flavors: allFlavors,
         type: 'object[]',
         help: `Optional chart's legends.`,
         group: 'Legends',
@@ -274,6 +439,39 @@ const props: ChartProperty[] = [
     },
     ...motionProperties(['svg'], svgDefaultProps, 'react-spring'),
     ...commonAccessibilityProps(['svg']),
+    {
+        key: 'isFocusable',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: 'Make the root SVG element and each boxplot item focusable, for keyboard navigation.',
+        type: 'boolean',
+        control: { type: 'switch' },
+    },
+    {
+        key: 'boxPlotAriaLabel',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for boxplot items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'boxPlotAriaLabelledBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for boxplot items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'boxPlotAriaDescribedBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for boxplot items.',
+        type: '(data) => string',
+    },
 ]
 
 export const groups = groupProperties(props)