chore: fixed bug on chart and ui issue in sale page (#11354)
* fixing eslint * chore: fixed bug on chart and ui issue in sale page * chore: fixed all eslint issues * chore: fixed linting * sales page * chore: resolved sales theme * lint
This commit is contained in:
parent
d4178b14af
commit
05eb5a22d3
@ -117,8 +117,8 @@ function Sale ({ relayName }: Props): React.ReactElement<Props> {
|
||||
phaseName={phaseName}
|
||||
saleParams={saleParams}
|
||||
/>}
|
||||
<div style={{ backgroundColor: 'white', borderRadius: '4px', gridColumn: '1 / -1', justifySelf: 'center', padding: '24px', width: '100%' }}>
|
||||
<p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale history information')}</p>
|
||||
<div style={{ borderRadius: '4px', gridColumn: '1 / -1', justifySelf: 'center', padding: '24px', width: '100%' }}>
|
||||
<p style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '1rem' }}>{t('Sale information')}</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<div style={{ maxWidth: '300px' }}>
|
||||
<Dropdown
|
||||
|
||||
@ -3,8 +3,13 @@
|
||||
|
||||
import React, { type ReactNode } from 'react';
|
||||
|
||||
import { useTheme } from '@polkadot/react-hooks';
|
||||
|
||||
export const WhiteBox = ({ children, style }: { children: ReactNode, style?: React.CSSProperties }) => {
|
||||
return <div style={{ backgroundColor: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', justifyItems: 'center', minWidth: '250px', padding: '24px', ...style }}>
|
||||
const { theme } = useTheme();
|
||||
const backgroundColor = theme === 'dark' ? '#333' : 'white';
|
||||
|
||||
return <div style={{ backgroundColor, borderRadius: '4px', display: 'flex', flexDirection: 'column', justifyItems: 'center', minWidth: '250px', padding: '24px', ...style }}>
|
||||
{children}
|
||||
</div>;
|
||||
};
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
// Copyright 2017-2025 @polkadot/react-components authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { ChartType, Plugin } from 'chart.js';
|
||||
|
||||
import { CategoryScale, Chart, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
|
||||
import annotationPlugin from 'chartjs-plugin-annotation';
|
||||
import crosshairPlugin from 'chartjs-plugin-crosshair';
|
||||
@ -9,7 +11,35 @@ import Doughnut from './Doughnut.js';
|
||||
import HorizBar from './HorizBar.js';
|
||||
import Line from './Line.js';
|
||||
|
||||
Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, annotationPlugin, crosshairPlugin);
|
||||
interface CrosshairChart {
|
||||
crosshair?: boolean;
|
||||
}
|
||||
|
||||
function CustomCrosshairPlugin (plugin: Plugin<ChartType>): Plugin<ChartType> {
|
||||
const originalAfterDraw = plugin.afterDraw;
|
||||
|
||||
if (originalAfterDraw) {
|
||||
plugin.afterDraw = function (chart, args): void {
|
||||
if ((chart as CrosshairChart).crosshair) {
|
||||
// @ts-expect-error - Pass exactly what the original plugin expects
|
||||
originalAfterDraw.call(this, chart, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return plugin;
|
||||
}
|
||||
|
||||
Chart.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
annotationPlugin,
|
||||
CustomCrosshairPlugin(crosshairPlugin as Plugin<ChartType>)
|
||||
);
|
||||
|
||||
export default {
|
||||
Doughnut,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user