feat: some fixes for the gains chart
This commit is contained in:
parent
3b3ad80dd0
commit
8a7b2b377c
|
@ -126,6 +126,7 @@ function updateChartData({
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawLabels(t: any, ctx: any, leverage: number, priceChange: number) {
|
function drawLabels(t: any, ctx: any, leverage: number, priceChange: number) {
|
||||||
|
console.log('drawing');
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.font = 'normal normal bold 15px /1.5 Muli';
|
ctx.font = 'normal normal bold 15px /1.5 Muli';
|
||||||
ctx.textBaseline = 'bottom';
|
ctx.textBaseline = 'bottom';
|
||||||
|
@ -161,23 +162,33 @@ function drawLabels(t: any, ctx: any, leverage: number, priceChange: number) {
|
||||||
|
|
||||||
export default function GainsChart({ item, priceChange }: { item: Position; priceChange: number }) {
|
export default function GainsChart({ item, priceChange }: { item: Position; priceChange: number }) {
|
||||||
const chartRef = useRef<any>();
|
const chartRef = useRef<any>();
|
||||||
|
const [booted, setBooted] = useState<boolean>(false);
|
||||||
|
const [canvas, setCanvas] = useState<any>();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (chartRef.current.chartInstance) updateChartData({ item, priceChange, chartRef });
|
if (chartRef.current.chartInstance) updateChartData({ item, priceChange, chartRef });
|
||||||
}, [priceChange, item.leverage]);
|
}, [priceChange, item.leverage]);
|
||||||
|
|
||||||
return useMemo(
|
useEffect(() => {
|
||||||
() => (
|
if (chartRef.current && !booted && canvas) {
|
||||||
<Line
|
//@ts-ignore
|
||||||
ref={chartRef}
|
const originalController = window.Chart.controllers.line;
|
||||||
data={(canvas: any) => {
|
//@ts-ignore
|
||||||
const originalController = chartRef.current?.chartInstance?.controllers?.line;
|
window.Chart.controllers.line = Chart.controllers.line.extend({
|
||||||
if (originalController)
|
|
||||||
chartRef.current.chartInstance.controllers.line = chartRef.current.chartInstance.controllers.line.extend({
|
|
||||||
draw: function () {
|
draw: function () {
|
||||||
originalController.prototype.draw.call(this, arguments);
|
originalController.prototype.draw.call(this, arguments);
|
||||||
drawLabels(this, canvas.getContext('2d'), item.leverage, priceChange);
|
drawLabels(this, canvas.getContext('2d'), item.leverage, priceChange);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
setBooted(true);
|
||||||
|
}
|
||||||
|
}, [chartRef, canvas]);
|
||||||
|
|
||||||
|
const chart = useMemo(
|
||||||
|
() => (
|
||||||
|
<Line
|
||||||
|
ref={chartRef}
|
||||||
|
data={(canvas: any) => {
|
||||||
|
setCanvas(canvas);
|
||||||
return getChartData({ item, priceChange });
|
return getChartData({ item, priceChange });
|
||||||
}}
|
}}
|
||||||
options={{
|
options={{
|
||||||
|
@ -227,4 +238,22 @@ export default function GainsChart({ item, priceChange }: { item: Position; pric
|
||||||
),
|
),
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch', justifyContent: 'center' }}>
|
||||||
|
{chart}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>past</span>
|
||||||
|
<span>today</span>
|
||||||
|
<span>future</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue