Skip to content

Commit

Permalink
feat(Chart): Implement treemap chart (#188)
Browse files Browse the repository at this point in the history
---------

Co-authored-by: RafaelSzmarowski <[email protected]>
  • Loading branch information
1 parent e2570b7 commit cc3c6da
Show file tree
Hide file tree
Showing 8 changed files with 13,913 additions and 13,743 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { ChartOptions, DataFrame } from '@opendatasoft/visualizations';
import { ChartSeriesType } from '@opendatasoft/visualizations';
import { Meta } from '@storybook/react';
import type { Props } from '../../../src';
import ChartTemplate from '../ChartTemplate';

const meta: Meta = {
title: 'Chart/Treemap',
};

export default meta;

export const TreemapChart = ChartTemplate.bind({});
const DATA = [
{ category: 'a very very very very very very very very very very very very very very very long text', color: 'red', count: 100 },
{ category: 'first category', color: 'green', count: 50 },
{ category: 'second category', color: 'blue', count: 20 },
{ category: 'third category', color: 'red', count: 20 },
{ category: 'fourth category', color: 'purple', count: 10 },
{ category: 'fifth category', color: 'green', count: 10 },
];
const TreemapChartArgs: Props<DataFrame, ChartOptions> = {
data: {
loading: false,
value: DATA,
},
options: {
aspectRatio: 2,
series: [
{
type: ChartSeriesType.Treemap,
keyColumn: 'count',
keyGroups: ['category'],
borderColor: 'white',
colorFormatter: (index: number) => DATA[index].color,
labels: {
align: 'center',
display: true,
maxLength: 10,
labelsFormatter: (index: number ) => [DATA[index].category],
color: ['white'],
font: [{ size: 20 }],
hoverColor: ['white', 'whiteSmoke'],
hoverFont: [{ size: 21, weight: 'bold' }],
position: 'middle',
overflow: 'fit',
}
},
],
},
};
TreemapChart.args = TreemapChartArgs;
Loading

0 comments on commit cc3c6da

Please sign in to comment.