-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(marimekko): add to website and improve bars
- Loading branch information
Showing
13 changed files
with
698 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
| import { BasicTooltip } from '@nivo/tooltip' | ||
| import { DimensionDatum } from './types' | ||
|
|
||
| export const BarTooltip = <RawDatum,>({ datum }: { datum: DimensionDatum<RawDatum> }) => ( | ||
| <BasicTooltip | ||
| id={`${datum.datum.id} - ${datum.id}`} | ||
| value={datum.value} | ||
| enableChip={true} | ||
| color={datum.color} | ||
| /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, { createElement, useMemo, MouseEvent } from 'react' | ||
| // import { useTransition } from 'react-spring' | ||
| // @ts-ignore | ||
| import { useTheme } from '@nivo/core' | ||
| import { InheritedColorConfig, useInheritedColor } from '@nivo/colors' | ||
| import { useTooltip } from '@nivo/tooltip' | ||
| import { ComputedDatum, DimensionDatum } from './types' | ||
| import { BarTooltip } from './BarTooltip' | ||
|
|
||
| interface NodesProps<RawDatum> { | ||
| data: ComputedDatum<RawDatum>[] | ||
| borderWidth: number | ||
| borderColor: InheritedColorConfig<DimensionDatum<RawDatum>> | ||
| } | ||
|
|
||
| interface BarData<RawDatum> extends DimensionDatum<RawDatum> { | ||
| key: string | ||
| borderColor: string | ||
| } | ||
|
|
||
| export const Bars = <RawDatum,>({ data, borderWidth, borderColor }: NodesProps<RawDatum>) => { | ||
| const theme = useTheme() | ||
| const getBorderColor = useInheritedColor<DimensionDatum<RawDatum>>(borderColor, theme) | ||
|
|
||
| const allBars = useMemo(() => { | ||
| const all: BarData<RawDatum>[] = [] | ||
| data.forEach(datum => { | ||
| datum.dimensions.forEach(dimension => { | ||
| all.push({ | ||
| key: `${datum.id}-${dimension.id}`, | ||
| ...dimension, | ||
| borderColor: getBorderColor(dimension), | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| return all | ||
| }, [data, borderWidth, getBorderColor]) | ||
|
|
||
| const { showTooltipFromEvent, hideTooltip } = useTooltip() | ||
|
|
||
| const handle = (datum: DimensionDatum<RawDatum>, event: MouseEvent) => { | ||
| showTooltipFromEvent( | ||
| createElement<{ datum: DimensionDatum<RawDatum> }>(BarTooltip, { datum }), | ||
| event | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {allBars.map(bar => { | ||
| return ( | ||
| <rect | ||
| key={bar.key} | ||
| id={bar.key} | ||
| x={bar.x} | ||
| y={bar.y} | ||
| width={bar.width} | ||
| height={bar.height} | ||
| fill={bar.color} | ||
| stroke={bar.borderColor} | ||
| strokeWidth={borderWidth} | ||
| onMouseEnter={event => handle(bar, event)} | ||
| onMouseMove={event => handle(bar, event)} | ||
| onMouseLeave={hideTooltip} | ||
| /> | ||
| ) | ||
| })} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from './Marimekko' | ||
| export * from './ResponsiveMarimekko' | ||
| export * from './types' | ||
| export * from './props' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
| import { patternDotsDef, patternLinesDef } from '@nivo/core' | ||
| import { mapFormat, settingsMapper } from '../../../lib/settings' | ||
|
|
||
| const TooltipWrapper = styled.div` | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| grid-column-gap: 12px; | ||
| background: #333; | ||
| padding: 12px 16px; | ||
| font-size: 12px; | ||
| border-radius: 2px; | ||
| ` | ||
| const TooltipKey = styled.span`` | ||
| const TooltipValue = styled.span` | ||
| font-weight: 600; | ||
| ` | ||
|
|
||
| const CustomTooltip = ({ datum }) => ( | ||
| <TooltipWrapper style={{ color: datum.color }}> | ||
| <TooltipKey>id</TooltipKey> | ||
| <TooltipValue>{datum.id}</TooltipValue> | ||
| <TooltipKey>value</TooltipKey> | ||
| <TooltipValue>{datum.value}</TooltipValue> | ||
| <TooltipKey>formattedValue</TooltipKey> | ||
| <TooltipValue>{datum.formattedValue}</TooltipValue> | ||
| <TooltipKey>color</TooltipKey> | ||
| <TooltipValue>{datum.color}</TooltipValue> | ||
| </TooltipWrapper> | ||
| ) | ||
|
|
||
| export default settingsMapper( | ||
| { | ||
| valueFormat: mapFormat, | ||
| radialLabel: value => { | ||
| if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})` | ||
| return value | ||
| }, | ||
| sliceLabel: value => { | ||
| if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})` | ||
| return value | ||
| }, | ||
| tooltip: (value, values) => { | ||
| if (!values['custom tooltip example']) return undefined | ||
|
|
||
| return CustomTooltip | ||
| }, | ||
| theme: (value, values) => { | ||
| if (!values['custom tooltip example']) return value | ||
|
|
||
| return { | ||
| ...values.theme, | ||
| tooltip: { | ||
| container: { | ||
| ...values.theme.tooltip.container, | ||
| background: '#333', | ||
| }, | ||
| }, | ||
| } | ||
| }, | ||
| defs: (value, values) => { | ||
| if (!values['showcase pattern usage']) return | ||
|
|
||
| return [ | ||
| patternDotsDef('dots', { | ||
| background: 'inherit', | ||
| color: 'rgba(255, 255, 255, 0.3)', | ||
| size: 4, | ||
| padding: 1, | ||
| stagger: true, | ||
| }), | ||
| patternLinesDef('lines', { | ||
| background: 'inherit', | ||
| color: 'rgba(255, 255, 255, 0.3)', | ||
| rotation: -45, | ||
| lineWidth: 6, | ||
| spacing: 10, | ||
| }), | ||
| ] | ||
| }, | ||
| fill: (value, values) => { | ||
| if (!values['showcase pattern usage']) return | ||
|
|
||
| return [ | ||
| { match: { id: 'ruby' }, id: 'dots' }, | ||
| { match: { id: 'c' }, id: 'dots' }, | ||
| { match: { id: 'go' }, id: 'dots' }, | ||
| { match: { id: 'python' }, id: 'dots' }, | ||
| { match: { id: 'scala' }, id: 'lines' }, | ||
| { match: { id: 'lisp' }, id: 'lines' }, | ||
| { match: { id: 'elixir' }, id: 'lines' }, | ||
| { match: { id: 'javascript' }, id: 'lines' }, | ||
| ] | ||
| }, | ||
| }, | ||
| { | ||
| exclude: ['custom tooltip example', 'showcase pattern usage'], | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| flavors: | ||
| - flavor: svg | ||
| path: /marimekko/ | ||
|
|
||
| Marimekko: | ||
| package: '@nivo/marimekko' | ||
| tags: | ||
| - svg | ||
| - isomorphic | ||
| stories: [] | ||
| description: | | ||
| The `Marimekko` component is somehow similar to a bar chart, | ||
| but it allows you to use an extra dimension to compute the | ||
| thickness of each bar. | ||
| The responsive alternative of this component is `ResponsiveMarimekko`. | ||
| You can also see more example usages in | ||
| [the storybook](storybook:marimekko--default). | ||
| See the [dedicated guide](self:/guides/legends) on how to setup | ||
| legends for this component. |
Oops, something went wrong.