@nivo/rects and @nivo/icicles package

packages/icicles/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) Raphaël Benitte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/icicles/README.md

@@ -0,0 +1,12 @@
+<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
+
+# `@nivo/icicles`
+
+[![version](https://img.shields.io/npm/v/@nivo/icicles?style=for-the-badge)](https://www.npmjs.com/package/@nivo/icicles)
+[![downloads](https://img.shields.io/npm/dm/@nivo/icicles?style=for-the-badge)](https://www.npmjs.com/package/@nivo/icicles)
+
+## Icicles
+
+[documentation](http://nivo.rocks/icicles/)
+
+![Icicles](https://raw.githubusercontent.com/plouc/nivo/master/website/src/assets/captures/icicles.png)

packages/icicles/package.json

@@ -0,0 +1,53 @@
+{
+ "name": "@nivo/icicles",
+ "version": "0.79.1",
+ "license": "MIT",
+ "author": {
+ "name": "Raphaël Benitte",
+ "url": "https://github.com/plouc"
+ },
+ "contributors": [
+ "Lilian Saget-Lethias <[email protected]>",
+ "Mehdi Louraoui <[email protected]>"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/plouc/nivo.git",
+ "directory": "packages/icicles"
+ },
+ "keywords": [
+ "nivo",
+ "dataviz",
+ "react",
+ "d3",
+ "charts",
+ "icicles-chart"
+ ],
+ "main": "./dist/nivo-icicles.cjs.js",
+ "module": "./dist/nivo-icicles.es.js",
+ "typings": "./dist/types/index.d.ts",
+ "files": [
+ "README.md",
+ "LICENSE.md",
+ "dist/",
+ "!dist/tsconfig.tsbuildinfo"
+ ],
+ "dependencies": {
+ "@nivo/rects": "0.79.1",
+ "@nivo/colors": "0.79.1",
+ "@nivo/tooltip": "0.79.0",
+ "d3-hierarchy": "^1.1.8",
+ "lodash": "^4.17.21"
+ },
+ "devDependencies": {
+ "@nivo/core": "0.79.0",
+ "@types/d3-hierarchy": "^1.1.7"
+ },
+ "peerDependencies": {
+ "@nivo/core": "0.79.0",
+ "react": ">= 16.14.0 < 18.0.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}

packages/icicles/src/Icicles.tsx

@@ -0,0 +1,173 @@
+import { InheritedColorConfig } from '@nivo/colors'
+import {
+ // @ts-ignore -- internal function
+ bindDefs,
+ Container,
+ SvgWrapper,
+ useDimensions,
+} from '@nivo/core'
+import { Fragment, ReactNode, createElement, useMemo } from 'react'
+import { Rects } from './Rects'
+import { useIcicles, useIciclesLayerContext } from './hooks'
+import { RectLabelsLayer } from '@nivo/rects'
+import { defaultProps } from './props'
+import { IciclesSvgProps, IciclesLayerId, ComputedDatum } from './types'
+
+type InnerIciclesProps<RawDatum> = Partial<
+ Omit<
+ IciclesSvgProps<RawDatum>,
+ 'data' | 'width' | 'height' | 'isInteractive' | 'animate' | 'motionConfig'
+ >
+> &
+ Pick<IciclesSvgProps<RawDatum>, 'data' | 'width' | 'height' | 'isInteractive'>
+
+const InnerIcicles = <RawDatum,>({
+ data,
+ id = defaultProps.id,
+ value = defaultProps.value,
+ valueFormat,
+ layers = ['rects', 'rectLabels'],
+ colors = defaultProps.colors,
+ colorBy = defaultProps.colorBy,
+ inheritColorFromParent = defaultProps.inheritColorFromParent,
+ childColor = defaultProps.childColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
+ borderWidth = defaultProps.borderWidth,
+ borderColor = defaultProps.borderColor,
+ margin: partialMargin,
+ width,
+ height,
+ enableRectLabels = defaultProps.enableRectLabels,
+ rectLabelsTextColor = defaultProps.rectLabelsTextColor,
+ defs = defaultProps.defs,
+ fill = defaultProps.fill,
+ isInteractive = defaultProps.isInteractive,
+ onClick,
+ onMouseEnter,
+ onMouseLeave,
+ onMouseMove,
+ onWheel,
+ onContextMenu,
+ tooltip = defaultProps.tooltip,
+ role = defaultProps.role,
+ rectLabel = defaultProps.rectLabel,
+ rectLabelsComponent,
+ rectLabelsSkipLength = defaultProps.rectLabelsSkipLength,
+ rectLabelsSkipPercentage = defaultProps.rectLabelsSkipPercentage,
+ direction = defaultProps.direction,
+ rectLabelsOffset = defaultProps.rectLabelsOffset,
+}: InnerIciclesProps<RawDatum>) => {
+ const { margin, outerHeight, outerWidth } = useDimensions(width, height, partialMargin)
+
+ const { nodes, baseOffsetLeft, baseOffsetTop } = useIcicles({
+ data,
+ id,
+ value,
+ valueFormat,
+ colors,
+ colorBy,
+ inheritColorFromParent,
+ childColor,
+ height: outerHeight,
+ width: outerWidth,
+ direction,
+ })
+
+ const boundDefs = bindDefs(defs, nodes, fill, {
+ dataKey: '.',
+ colorKey: 'color',
+ targetKey: 'fill',
+ })
+
+ const layerById: Record<IciclesLayerId, ReactNode> = {
+ rects: null,
+ rectLabels: null,
+ }
+
+ if (layers.includes('rects')) {
+ layerById.rects = (
+ <Rects<RawDatum>
+ key="rects"
+ data={nodes}
+ borderWidth={borderWidth}
+ borderColor={borderColor}
+ isInteractive={isInteractive}
+ tooltip={tooltip}
+ onClick={onClick}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ onMouseMove={onMouseMove}
+ onWheel={onWheel}
+ onContextMenu={onContextMenu}
+ />
+ )
+ }
+
+ const filteredData = useMemo(
+ () =>
+ nodes.filter(datum => {
+ return (
+ datum.rect.percentage >= rectLabelsSkipPercentage &&
+ datum.rect[['left', 'right'].includes(direction) ? 'height' : 'width'] >=
+ rectLabelsSkipLength
+ )
+ }),
+ [nodes, rectLabelsSkipPercentage, rectLabelsSkipLength, direction]
+ )
+
+ if (enableRectLabels && layers.includes('rectLabels')) {
+ layerById.rectLabels = (
+ <RectLabelsLayer<ComputedDatum<RawDatum>>
+ key="rectLabels"
+ data={filteredData}
+ label={rectLabel}
+ textColor={rectLabelsTextColor}
+ component={rectLabelsComponent}
+ offset={rectLabelsOffset}
+ baseOffsetLeft={baseOffsetLeft}
+ baseOffsetTop={baseOffsetTop}
+ />
+ )
+ }
+
+ const layerContext = useIciclesLayerContext<RawDatum>({
+ nodes,
+ baseOffsetLeft,
+ baseOffsetTop,
+ })
+
+ return (
+ <SvgWrapper
+ width={outerWidth}
+ height={outerHeight}
+ defs={boundDefs}
+ margin={margin}
+ role={role}
+ >
+ {layers?.map((layer, i) => {
+ if (layerById[layer as IciclesLayerId] !== undefined) {
+ return layerById[layer as IciclesLayerId]
+ }
+
+ if (typeof layer === 'function') {
+ return <Fragment key={i}>{createElement(layer, layerContext)}</Fragment>
+ }
+
+ return null
+ })}
+ </SvgWrapper>
+ )
+}
+
+export const Icicles = <RawDatum,>({
+ isInteractive = defaultProps.isInteractive,
+ animate = defaultProps.animate,
+ motionConfig = defaultProps.motionConfig,
+ theme,
+ renderWrapper,
+ ...otherProps
+}: Partial<Omit<IciclesSvgProps<RawDatum>, 'data' | 'width' | 'height'>> &
+ Pick<IciclesSvgProps<RawDatum>, 'data' | 'width' | 'height'>) => (
+ <Container {...{ isInteractive, animate, motionConfig, theme, renderWrapper }}>
+ <InnerIcicles<RawDatum> isInteractive={isInteractive} {...otherProps} />
+ </Container>
+)

packages/icicles/src/IciclesTooltip.tsx

@@ -0,0 +1,10 @@
+import { BasicTooltip } from '@nivo/tooltip'
+import { ComputedDatum } from './types'
+
+export const IciclesTooltip = <RawDatum,>({
+ id,
+ formattedValue,
+ color,
+}: ComputedDatum<RawDatum>) => (
+ <BasicTooltip id={id} value={formattedValue} enableChip={true} color={color} />
+)

packages/icicles/src/Rects.tsx

@@ -0,0 +1,100 @@
+import { useTooltip } from '@nivo/tooltip'
+import { createElement, useMemo } from 'react'
+import * as React from 'react'
+import { RectsLayer } from '@nivo/rects'
+import { IciclesCommonProps, ComputedDatum, MouseHandlers } from './types'
+
+export interface RectsProps<RawDatum> {
+ borderColor: IciclesCommonProps<RawDatum>['borderColor']
+ borderWidth: IciclesCommonProps<RawDatum>['borderWidth']
+ data: ComputedDatum<RawDatum>[]
+ isInteractive: IciclesCommonProps<RawDatum>['isInteractive']
+ onClick?: MouseHandlers<RawDatum>['onClick']
+ onMouseEnter?: MouseHandlers<RawDatum>['onMouseEnter']
+ onMouseLeave?: MouseHandlers<RawDatum>['onMouseLeave']
+ onMouseMove?: MouseHandlers<RawDatum>['onMouseMove']
+ onWheel?: MouseHandlers<RawDatum>['onWheel']
+ onContextMenu?: MouseHandlers<RawDatum>['onContextMenu']
+ tooltip: IciclesCommonProps<RawDatum>['tooltip']
+}
+
+export const Rects = <RawDatum,>({
+ data,
+ borderWidth,
+ borderColor,
+ isInteractive,
+ onClick,
+ onMouseEnter,
+ onMouseMove,
+ onMouseLeave,
+ onWheel,
+ onContextMenu,
+ tooltip,
+}: RectsProps<RawDatum>) => {
+ const { showTooltipFromEvent, hideTooltip } = useTooltip()
+
+ const handleClick = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGRectElement>) => {
+ onClick?.(datum, event)
+ }
+ }, [isInteractive, onClick])
+
+ const handleMouseEnter = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGRectElement>) => {
+ showTooltipFromEvent(createElement(tooltip, datum), event)
+ onMouseEnter?.(datum, event)
+ }
+ }, [isInteractive, showTooltipFromEvent, tooltip, onMouseEnter])
+
+ const handleMouseMove = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGRectElement>) => {
+ showTooltipFromEvent(createElement(tooltip, datum), event)
+ onMouseMove?.(datum, event)
+ }
+ }, [isInteractive, showTooltipFromEvent, tooltip, onMouseMove])
+
+ const handleMouseLeave = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGRectElement>) => {
+ hideTooltip()
+ onMouseLeave?.(datum, event)
+ }
+ }, [isInteractive, hideTooltip, onMouseLeave])
+
+ const handleWheel = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.WheelEvent<SVGRectElement>) => {
+ onWheel?.(datum, event)
+ }
+ }, [isInteractive, onWheel])
+
+ const handleContextMenu = useMemo(() => {
+ if (!isInteractive) return undefined
+
+ return (datum: ComputedDatum<RawDatum>, event: React.MouseEvent<SVGRectElement>) => {
+ onContextMenu?.(datum, event)
+ }
+ }, [isInteractive, onContextMenu])
+
+ return (
+ <RectsLayer<ComputedDatum<RawDatum>>
+ data={data}
+ borderWidth={borderWidth}
+ borderColor={borderColor}
+ onClick={handleClick}
+ onMouseEnter={handleMouseEnter}
+ onMouseMove={handleMouseMove}
+ onMouseLeave={handleMouseLeave}
+ onWheel={handleWheel}
+ onContextMenu={handleContextMenu}
+ />
+ )
+}

packages/icicles/src/ResponsiveIcicles.tsx

@@ -0,0 +1,16 @@
+import { ResponsiveWrapper } from '@nivo/core'
+import { Icicles } from './Icicles'
+import { IciclesSvgProps } from './types'
+
+type ResponsiveIciclesProps<RawDatum> = Partial<
+ Omit<IciclesSvgProps<RawDatum>, 'data' | 'width' | 'height'>
+> &
+ Pick<IciclesSvgProps<RawDatum>, 'data'>
+
+export const ResponsiveIcicles = <RawDatum,>(props: ResponsiveIciclesProps<RawDatum>) => (
+ <ResponsiveWrapper>
+ {({ width, height }: { height: number; width: number }) => (
+ <Icicles<RawDatum> width={width} height={height} {...props} />
+ )}
+ </ResponsiveWrapper>
+)