Storybook + website

plouc · May 3, 2024 · 416d4e5 · 416d4e5
1 parent 9a6fb1f
commit 416d4e5
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 1 deletion.
diff --git a/storybook/stories/bar/Bar.stories.tsx b/storybook/stories/bar/Bar.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { generateCountriesData, sets } from '@nivo/generators'
 import { random, range } from 'lodash'
 import { useTheme } from '@nivo/core'
-import { Bar, BarDatum, BarItemProps } from '@nivo/bar'
+import { Bar, BarCanvas, BarDatum, BarItemProps } from '@nivo/bar'
 import { AxisTickProps } from '@nivo/axes'
 
 const meta: Meta<typeof Bar> = {
@@ -298,6 +298,19 @@ export const WithTotals: Story = {
     render: () => <Bar {...commonProps} enableTotals={true} totalsOffset={10} />,
 }
 
+export const WithTopLabels: Story = {
+    render: () => (
+        <Bar
+            {...commonProps}
+            data={generateCountriesData(keys, { size: 2 }) as BarDatum[]}
+            labelPosition="end"
+            layout="vertical"
+            labelOffset={-10}
+            groupMode="grouped"
+        />
+    ),
+}
+
 const DataGenerator = (initialIndex, initialState) => {
     let index = initialIndex
     let state = initialState

diff --git a/website/src/data/components/bar/meta.yml b/website/src/data/components/bar/meta.yml
@@ -36,6 +36,8 @@ Bar:
       link: bar--with-annotations
     - label: Using totals
       link: bar--with-totals
+    - label: Using top labels
+      link: bar--with-top-labels
   description: |
     Bar chart which can display multiple data series, stacked or side by side. Also
     supports both vertical and horizontal layout, with negative values descending

diff --git a/website/src/data/components/bar/props.ts b/website/src/data/components/bar/props.ts
@@ -416,6 +416,38 @@ const props: ChartProperty[] = [
         control: { type: 'inheritedColor' },
         group: 'Labels',
     },
+    {
+        key: 'labelPosition',
+        help: 'Defines the position of the label relative to its bar.',
+        type: `'start' | 'center' | 'end'`,
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.labelPosition,
+        control: {
+            type: 'radio',
+            choices: [
+                { label: 'start', value: 'start' },
+                { label: 'center', value: 'center' },
+                { label: 'end', value: 'end' },
+            ],
+        },
+        group: 'Labels',
+    },
+    {
+        key: 'labelOffset',
+        help: 'Defines the vertical or horizontal (depends on layout) offset of the label.',
+        type: 'number',
+        flavors: ['svg', 'canvas', 'api'],
+        required: false,
+        defaultValue: svgDefaultProps.labelOffset,
+        control: {
+            type: 'range',
+            unit: 'px',
+            min: -16,
+            max: 16,
+        },
+        group: 'Labels',
+    },
     {
         key: 'enableTotals',
         help: 'Enable/disable totals labels.',

diff --git a/website/src/pages/bar/api.tsx b/website/src/pages/bar/api.tsx
@@ -117,6 +117,8 @@ const BarApi = () => {
                         from: 'color',
                         modifiers: [['darker', 1.6]],
                     },
+                    labelPosition: 'center',
+                    labelOffset: 0,
                 }}
             />
         </>

diff --git a/website/src/pages/bar/canvas.js b/website/src/pages/bar/canvas.js
@@ -97,6 +97,8 @@ const initialProperties = {
         from: 'color',
         modifiers: [['darker', 1.6]],
     },
+    labelPosition: 'center',
+    labelOffset: 0,
 
     isInteractive: true,
     'custom tooltip example': false,

diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js
@@ -115,6 +115,8 @@ const initialProperties = {
         from: 'color',
         modifiers: [['darker', 1.6]],
     },
+    labelPosition: 'center',
+    labelOffset: 0,
 
     legends: [
         {