britecharts / britecharts/britecharts-react

Move implementation into Hooks

Open
#206 1 comment 1 reaction 0 assignees View on GitHub
enhancement good first issue help wanted ready to go
Dominant language
JavaScript
Stars
112
Forks
19
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior

Component wrapper should be a hooks based implementation

## Difference from Current Behavior
Right now we have classes

## Possible Implementation
I have a good example here:
```
/* eslint-disable */
import React, { useState, useEffect, useRef } from 'react';

import bullet from './bulletChartWrapper';

export interface BulletChartProps {
/**
* Internally used, do not overwrite.
*/
data: {
ranges: number[];
measure: number;
}[];

/**
* Gets or Sets the height of the chart
*/
height?: number;

/**
* Gets or Sets the margin of the chart
*/
margin?: { top?: number; bottom?: number; left?: number; right?: number };

/**
* Gets or Sets the number format of the bar chart
* See examples in https://observablehq.com/@d3/d3-format
*/
numberFormat?: string;

/**
* Gets or Sets the distance between the range labels and the chart
*/
paddingBetweenLabelsAndChart?: number;

/**
* Gets or Sets the width of the chart
*/
width?: number;

/**
* Internally used, do not overwrite.
*
* @ignore
*/
chart?: any;
}

const getChartConfiguration = (props: BulletChartProps) => {
let configuration: Partial = { ...props };

delete configuration.data;
delete configuration.chart;

return configuration;
};

type ChartFileType = {
destroy: (node: HTMLElement) => void;
create: () => ChartFileType;
update: () => void;
} | null;

export const Bullet: React.FC = (props) => {
const { data, chart } = props;
const rootRef = useRef(null);
let [chartInstance, setChartInstance] = useState(null);

useEffect(() => {
if (!chartInstance && data !== null) {
console.log('Bullet:::Create!');
const chartI = chart.create(
rootRef.current,
data,
getChartConfiguration(props)
);

// We cannot save functions using useState directly
// See https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
setChartInstance(() => chartI);
}

return function cleanup() {
console.log('Bullet:::Clean up');
if (chartInstance && rootRef && rootRef.current) {
console.log('Bullet:::Destroy!');
chart.destroy(rootRef.current);
}
};
}, []);

useEffect(() => {
if (chartInstance) {
console.log('Bullet:::Update!');
chart.update(
rootRef.current,
data,
getChartConfiguration(props),
chartInstance
);
}
}, [data, rootRef, props]);

return

;
};

Bullet.defaultProps = {
chart: bullet,
};

export default Bullet;

```

## Context
Modernizing the library

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.