Skip to content

Commit

Permalink
feat(marimekko): add bar groups position and dimensions to layers con…
Browse files Browse the repository at this point in the history
…text
  • Loading branch information
plouc committed Nov 16, 2020
1 parent d75a395 commit 8ba4c01
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 17 deletions.
23 changes: 20 additions & 3 deletions packages/marimekko/src/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,14 @@ export const useComputedData = <RawDatum>({
...datum,
x: layout === 'vertical' ? position : 0,
y: layout === 'vertical' ? 0 : position,
thickness,
width: layout === 'vertical' ? thickness : 0,
height: layout === 'vertical' ? 0 : thickness,
dimensions: [],
}

const allPositions: number[] = []
let totalSize = 0

position += thickness + innerPadding

dimensionIds.forEach(dimensionId => {
Expand All @@ -211,19 +215,32 @@ export const useComputedData = <RawDatum>({
if (layout === 'vertical') {
dimensionDatum.x = computedDatum.x
dimensionDatum.y = Math.min(position0, position1)
dimensionDatum.width = computedDatum.thickness
dimensionDatum.width = computedDatum.width
dimensionDatum.height = Math.max(position0, position1) - dimensionDatum.y

allPositions.push(dimensionDatum.y)
totalSize += dimensionDatum.height
} else {
dimensionDatum.x = Math.min(position0, position1)
dimensionDatum.y = computedDatum.y
dimensionDatum.width = Math.max(position0, position1) - dimensionDatum.x
dimensionDatum.height = computedDatum.thickness
dimensionDatum.height = computedDatum.height

allPositions.push(dimensionDatum.y)
totalSize += dimensionDatum.width
}

dimensionDatum.color = getColor(dimensionDatum)

computedDatum.dimensions.push(dimensionDatum)
}

if (layout === 'vertical') {
computedDatum.height = totalSize
computedDatum.y = Math.min(...allPositions)
} else {
computedDatum.width = totalSize
}
})

computedData.push(computedDatum)
Expand Down
3 changes: 2 additions & 1 deletion packages/marimekko/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ export interface DimensionDatum<RawDatum> {
export interface ComputedDatum<RawDatum> extends NormalizedDatum<RawDatum> {
x: number
y: number
thickness: number
width: number
height: number
dimensions: DimensionDatum<RawDatum>[]
}

Expand Down
2 changes: 1 addition & 1 deletion packages/marimekko/stories/marimekko.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ stories.add('diverging', () => {
<Marimekko
{...commonProps}
data={data}
layout="vertical"
layout="horizontal"
offset="diverging"
axisLeft={{
format: (v: number) => Math.abs(v),
Expand Down
14 changes: 2 additions & 12 deletions website/src/pages/marimekko/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Fragment } from 'react'
import { ResponsiveMarimekko, defaultProps } from '@nivo/marimekko'
import { random, omit } from 'lodash'
import ComponentTemplate from '../../components/components/ComponentTemplate'
Expand Down Expand Up @@ -94,7 +94,7 @@ const initialProperties = {

valueFormat: { format: '', enabled: false },

colors: ['#ac402f', '#F47560', '#97E3D5', '#58b0a0'],
colors: { scheme: 'spectral' },

borderWidth: 1,
borderColor: {
Expand Down Expand Up @@ -168,15 +168,6 @@ const Marimekko = () => {
})
}

const handleLegendClick = legendItem => {
logAction({
type: 'click',
label: `[legend] ${legendItem.label}: ${legendItem.formattedValue}`,
color: legendItem.color,
data: legendItem,
})
}

return (
<ResponsiveMarimekko
data={data}
Expand All @@ -185,7 +176,6 @@ const Marimekko = () => {
onClick={handleClick}
legends={properties.legends.map(legend => ({
...legend,
onClick: handleLegendClick,
}))}
/>
)
Expand Down

0 comments on commit 8ba4c01

Please sign in to comment.