@nivo/bar adjustments, website controls improvements, new scales guide...

Makefile

@@ -239,7 +239,7 @@ website-deps-up: ##@2 website interactive upgrade of website's dependencies
 
 website: ##@2 website start website in dev mode
 	@echo "${YELLOW}Starting website dev server${RESET}"
-	@cd website && pnpm start
+	@cd website && pnpm dev
 
 website-build: ##@2 website build website
 	@echo "${YELLOW}Building website${RESET}"
@@ -290,7 +290,7 @@ storybook-playwright-install: ##@3 storybook install playwright
 	@echo "${YELLOW}Installing playwright${RESET}"
 	@pnpm pnpm exec playwright install chromium
 
-storybook-test-ci: ##@3 start storybook & run playwright tests
+storybook-test-ci: ##@3 storybook start storybook & run playwright tests
 	@echo "${YELLOW}Start storybook and run playwright tests${RESET}"
 	@npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
         "npx http-server storybook/storybook-static --port 6006 --silent" \

conf/rollup.config.mjs

@@ -36,7 +36,9 @@ const common = {
         || id.indexOf('d3') === 0
         || id.indexOf('@nivo') === 0
         || id.indexOf('lodash') === 0
-        || id.indexOf('@react-spring') === 0,
+        || id.indexOf('@react-spring') === 0
+        || id.indexOf('styled-components') === 0
+        || id.indexOf('dedent-js') === 0
 }
 
 const commonPlugins = [

cypress/src/components/icicle/Icicle.cy.tsx

@@ -223,12 +223,16 @@ const testNode = (expectedNode: ExpectedNode) => {
             `translate(${expectedNode.rect.x},${expectedNode.rect.y})`
         )
 
-        if (expectedNode.rect.width !== undefined) {
-            node.should('have.attr', 'width', expectedNode.rect.width)
-        }
-        if (expectedNode.rect.height !== undefined) {
-            node.should('have.attr', 'height', expectedNode.rect.height)
-        }
+        node.its('0')
+            .invoke('getBBox')
+            .then((bbox: DOMRect) => {
+                if (expectedNode?.rect?.width !== undefined) {
+                    expect(bbox.width).to.equal(expectedNode.rect.width)
+                }
+                if (expectedNode?.rect?.height !== undefined) {
+                    expect(bbox.height).to.equal(expectedNode.rect.height)
+                }
+            })
     }
 
     if (expectedNode.color) {

package.json

@@ -76,14 +76,16 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "@react-spring/core": "^10.0.0",
-    "@react-spring/web": "^10.0.0",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
     "@types/eslint": "7.29.0",
     "cheerio": "1.0.0-rc.10",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@types/react": "18.3.20",
+    "react-dom": "18.3.1",
+    "@types/react-dom": "18.3.6",
+    "@react-spring/core": "10.0.0",
+    "@react-spring/web": "10.0.0",
+    "styled-components": "6.1.18",
+    "react-markdown": "10.1.0"
   },
   "scripts": {
     "make:init": "make init",
@@ -101,7 +103,7 @@
     "type": "opencollective",
     "url": "https://opencollective.com/nivo"
   },
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.11.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

packages/bar/src/Bar.tsx

@@ -15,25 +15,26 @@ import { Fragment, ReactNode, createElement, useMemo } from 'react'
 import { BarAnnotations } from './BarAnnotations'
 import { BarLegends } from './BarLegends'
 import { useBar } from './hooks'
-import { svgDefaultProps } from './props'
+import { svgDefaultProps } from './defaults'
 import {
+    BarComponent,
     BarCustomLayerProps,
     BarDatum,
     BarItemProps,
-    BarLayer,
     BarLayerId,
     BarSvgProps,
+    BarTooltipComponent,
     ComputedBarDatumWithValue,
 } from './types'
 import { BarTotals } from './BarTotals'
 import { useComputeLabelLayout } from './compute/common'
 
-type InnerBarProps<RawDatum extends BarDatum> = Omit<
-    BarSvgProps<RawDatum>,
+type InnerBarProps<D extends BarDatum> = Omit<
+    BarSvgProps<D>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerBar = <RawDatum extends BarDatum>({
+const InnerBar = <D extends BarDatum>({
     data,
     indexBy,
     keys,
@@ -42,9 +43,6 @@ const InnerBar = <RawDatum extends BarDatum>({
     height,
     groupMode,
     layout,
-    reverse,
-    minValue,
-    maxValue,
     valueScale,
     indexScale,
     padding,
@@ -57,8 +55,8 @@ const InnerBar = <RawDatum extends BarDatum>({
     enableGridY = svgDefaultProps.enableGridY,
     gridXValues,
     gridYValues,
-    layers = svgDefaultProps.layers as readonly BarLayer<RawDatum>[],
-    barComponent = svgDefaultProps.barComponent,
+    layers = svgDefaultProps.layers as BarLayerId[],
+    barComponent = svgDefaultProps.barComponent as unknown as BarComponent<D>,
     enableLabel = svgDefaultProps.enableLabel,
     label,
     labelSkipWidth = svgDefaultProps.labelSkipWidth,
@@ -79,7 +77,7 @@ const InnerBar = <RawDatum extends BarDatum>({
     tooltipLabel,
     valueFormat,
     isInteractive = svgDefaultProps.isInteractive,
-    tooltip = svgDefaultProps.tooltip,
+    tooltip = svgDefaultProps.tooltip as BarTooltipComponent<D>,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -98,7 +96,7 @@ const InnerBar = <RawDatum extends BarDatum>({
     enableTotals = svgDefaultProps.enableTotals,
     totalsOffset = svgDefaultProps.totalsOffset,
     forwardedRef,
-}: InnerBarProps<RawDatum> & {
+}: InnerBarProps<D> & {
     forwardedRef: Ref<SVGSVGElement>
 }) => {
     const { animate, config: springConfig } = useMotionConfig()
@@ -122,7 +120,7 @@ const InnerBar = <RawDatum extends BarDatum>({
         legendsWithData,
         barTotals,
         getColor,
-    } = useBar<RawDatum>({
+    } = useBar<D>({
         indexBy,
         label,
         tooltipLabel,
@@ -133,11 +131,8 @@ const InnerBar = <RawDatum extends BarDatum>({
         labelTextColor,
         groupMode,
         layout,
-        reverse,
         data,
         keys,
-        minValue,
-        maxValue,
         margin,
         width: innerWidth,
         height: innerHeight,
@@ -154,10 +149,15 @@ const InnerBar = <RawDatum extends BarDatum>({
         totalsOffset,
     })
 
-    const computeLabelLayout = useComputeLabelLayout(layout, reverse, labelPosition, labelOffset)
+    const computeLabelLayout = useComputeLabelLayout(
+        layout,
+        valueScale?.reverse ?? false,
+        labelPosition,
+        labelOffset
+    )
 
     const transition = useTransition<
-        ComputedBarDatumWithValue<RawDatum>,
+        ComputedBarDatumWithValue<D>,
         {
             borderColor: string
             color: string
@@ -169,7 +169,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             opacity: number
             transform: string
             width: number
-            textAnchor: BarItemProps<RawDatum>['style']['textAnchor']
+            textAnchor: BarItemProps<D>['style']['textAnchor']
         }
     >(barsWithValue, {
         keys: bar => bar.key,
@@ -380,46 +380,25 @@ const InnerBar = <RawDatum extends BarDatum>({
         )
     }
 
-    const layerContext: BarCustomLayerProps<RawDatum> = useMemo(
-        () => ({
-            ...commonProps,
-            margin,
-            width,
-            height,
-            innerWidth,
-            innerHeight,
-            bars,
-            legendData: legendsWithData,
-            enableLabel,
-            xScale,
-            yScale,
-            tooltip,
-            getTooltipLabel,
-            onClick,
-            onMouseEnter,
-            onMouseLeave,
-            getColor,
-        }),
-        [
-            commonProps,
-            margin,
-            width,
-            height,
-            innerWidth,
-            innerHeight,
-            bars,
-            legendsWithData,
-            enableLabel,
-            xScale,
-            yScale,
-            tooltip,
-            getTooltipLabel,
-            onClick,
-            onMouseEnter,
-            onMouseLeave,
-            getColor,
-        ]
-    )
+    const layerContext: BarCustomLayerProps<D> = {
+        ...commonProps,
+        margin,
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        bars,
+        legendData: legendsWithData,
+        enableLabel,
+        xScale,
+        yScale,
+        tooltip,
+        getTooltipLabel,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        getColor,
+    }
 
     return (
         <SvgWrapper
@@ -446,15 +425,15 @@ const InnerBar = <RawDatum extends BarDatum>({
 }
 
 export const Bar = forwardRef(
-    <RawDatum extends BarDatum>(
+    <D extends BarDatum>(
         {
             isInteractive = svgDefaultProps.isInteractive,
             animate = svgDefaultProps.animate,
             motionConfig = svgDefaultProps.motionConfig,
             theme,
             renderWrapper,
             ...props
-        }: BarSvgProps<RawDatum>,
+        }: BarSvgProps<D>,
         ref: Ref<SVGSVGElement>
     ) => (
         <Container
@@ -464,9 +443,7 @@ export const Bar = forwardRef(
             renderWrapper={renderWrapper}
             theme={theme}
         >
-            <InnerBar<RawDatum> isInteractive={isInteractive} {...props} forwardedRef={ref} />
+            <InnerBar<D> {...props} isInteractive={isInteractive} forwardedRef={ref} />
         </Container>
     )
-) as <RawDatum extends BarDatum>(
-    props: WithChartRef<BarSvgProps<RawDatum>, SVGSVGElement>
-) => ReactElement
+) as <D extends BarDatum>(props: WithChartRef<BarSvgProps<D>, SVGSVGElement>) => ReactElement

packages/bar/src/BarAnnotations.tsx

@@ -1,7 +1,10 @@
 import { Annotation, useAnnotations } from '@nivo/annotations'
-import { BarAnnotationsProps } from './types'
+import { BarAnnotationsProps, BarDatum } from './types'
 
-export const BarAnnotations = <RawDatum,>({ bars, annotations }: BarAnnotationsProps<RawDatum>) => {
+export const BarAnnotations = <D extends BarDatum>({
+    bars,
+    annotations,
+}: BarAnnotationsProps<D>) => {
     const boundAnnotations = useAnnotations({
         data: bars,
         annotations,