chore(website): update bar information

plouc · Jun 28, 2021 · f04e9ea · f04e9ea
1 parent 1295d1f
commit f04e9ea
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 84 deletions.
diff --git a/packages/bar/src/props.ts b/packages/bar/src/props.ts
@@ -30,7 +30,6 @@ export const defaultProps = {
     label: 'formattedValue',
     labelSkipWidth: 0,
     labelSkipHeight: 0,
-    labelLinkColor: 'theme',
     labelTextColor: { from: 'theme', theme: 'labels.text.fill' },
 
     colorBy: 'id' as const,
@@ -58,7 +57,7 @@ export const svgDefaultProps = {
     fill: [],
 
     animate: true,
-    motionConfig: 'gentle',
+    motionConfig: 'default',
 
     role: 'img',
 }

diff --git a/packages/bar/stories/bar.stories.tsx b/packages/bar/stories/bar.stories.tsx
@@ -470,10 +470,6 @@ stories.add('custom legend labels', () => (
     />
 ))
 
-stories.add('with formatted value', () => (
-    <Bar {...commonProps} valueFormat={value => `${value}`.split('').join('.')} />
-))
-
 stories.add('with annotations', () => (
     <Bar
         {...commonProps}

diff --git a/website/src/data/components/bar/mapper.js b/website/src/data/components/bar/mapper.js
@@ -24,19 +24,21 @@ const TooltipKey = styled.span`
 `
 const TooltipValue = styled.span``
 
-const CustomTooltip = node => {
+const CustomTooltip = ({ color, ...bar }) => {
     return (
-        <TooltipWrapper style={{ color: node.color }}>
+        <TooltipWrapper style={{ color: color }}>
             <TooltipKey>id</TooltipKey>
-            <TooltipValue>{node.id}</TooltipValue>
+            <TooltipValue>{bar.id}</TooltipValue>
             <TooltipKey>value</TooltipKey>
-            <TooltipValue>{node.value}</TooltipValue>
+            <TooltipValue>{bar.value}</TooltipValue>
+            <TooltipKey>formattedValue</TooltipKey>
+            <TooltipValue>{bar.formattedValue}</TooltipValue>
             <TooltipKey>index</TooltipKey>
-            <TooltipValue>{node.index}</TooltipValue>
+            <TooltipValue>{bar.index}</TooltipValue>
             <TooltipKey>indexValue</TooltipKey>
-            <TooltipValue>{node.indexValue}</TooltipValue>
+            <TooltipValue>{bar.indexValue}</TooltipValue>
             <TooltipKey>color</TooltipKey>
-            <TooltipValue>{node.color}</TooltipValue>
+            <TooltipValue>{color}</TooltipValue>
         </TooltipWrapper>
     )
 }

diff --git a/website/src/data/components/bar/meta.yml b/website/src/data/components/bar/meta.yml
@@ -30,6 +30,12 @@ Bar:
       link: bar--with-symlog-scale
     - label: Race bar chart
       link: bar--race-chart
+    - label: Initial hidden ids
+      link: bar--initial-hidden-ids
+    - label: Using custom label for legeds
+      link: bar--custom-legend-labels
+    - label: Using annotations
+      link: bar--with-annotations
   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
@@ -57,6 +63,13 @@ BarCanvas:
   package: '@nivo/bar'
   tags:
     - canvas
+  stories:
+    - label: Using custom layer
+      link: barcanvas--custom-layer
+    - label: Using custom bar renderer
+      link: barcanvas--custom-bar-renderer
+    - label: Using annotations
+      link: barcanvas--with-annotations
   description: |
     A variation around the [Bar](self:/bar) component. Well suited for
     large data sets as it does not impact DOM tree depth, however you'll