Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复直方图展示不全bug #1177

Merged
merged 1 commit into from
Dec 6, 2022
Merged

修复直方图展示不全bug #1177

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 32 additions & 37 deletions frontend/packages/core/src/components/StackChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,7 @@

import * as chart from '~/utils/chart';

import type {
EChartsOption,
ECharts,
CustomSeriesOption,
CustomSeriesRenderItem,
AxisPointerComponentOption,
TooltipComponentOption,
GridComponentOption,
Color as ZRColor
} from 'echarts';
import type {EChartsOption as EChartOption, ECharts} from 'echarts';
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {WithStyled, primaryColor, transitionProps} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
Expand All @@ -36,7 +27,6 @@ import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import styled from 'styled-components';
import useThrottleFn from '~/hooks/useThrottleFn';
import type {LinesSeriesOption} from 'echarts/charts';

const Tooltip = styled.div`
position: absolute;
Expand All @@ -48,14 +38,23 @@ const Tooltip = styled.div`
display: none;
${transitionProps(['color', 'background-color'])}
`;

type RenderItem = CustomSeriesRenderItem;
// type RenderItem = EChartOption.SeriesCustom.RenderItem;
type RenderItem = any;
type GetValue = (i: number) => number;
type GetCoord = (p: [number, number]) => [number, number];

export type StackChartProps = {
options?: EChartsOption;
options?: EChartOption;
title?: string;
// data?: Partial<Omit<NonNullable<EChartOption<EChartOption.SeriesCustom>['series']>[number], 'data'>> & {
// minZ: number;
// maxZ: number;
// minX: number;
// maxX: number;
// minY: number;
// maxY: number;
// data: number[][];
// };
data?: any;
loading?: boolean;
zoom?: boolean;
Expand Down Expand Up @@ -116,11 +115,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
[getPoint, rawData]
);

const renderItem = useCallback(
(params, api) => {
const renderItem = useCallback<RenderItem>(
(params: any, api: any) => {
const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord);
return {
type: 'path',
type: 'polygon',
silent: true,
z: api.value?.(1),
shape: {
Expand All @@ -147,9 +146,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
useEffect(() => {
dotsRef.current = dots;
}, [dots]);

const AxisPointer = options?.axisPointer as AxisPointerComponentOption;
const pointerLabelFormatter = AxisPointer.label?.formatter;
const axisPointer: any = options?.axisPointer;
const pointerLabelFormatter = axisPointer?.label?.formatter;

// formatter change will cause echarts rerender axis pointer label
// so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables
Expand All @@ -161,15 +159,14 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
if ('string' === typeof pointerLabelFormatter) {
return pointerLabelFormatter;
}
// return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
return pointerLabelFormatter(params);
return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
},
[pointerLabelFormatter]
);

const theme = useChartTheme();

const chartOptions = useMemo<EChartsOption>(() => {
const chartOptions: any = useMemo<EChartOption>(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {color, colorAlt, toolbox, series, ...defaults} = chart;

Expand Down Expand Up @@ -240,8 +237,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
const mouseout = useCallback(() => {
setHighlight(null);
setDots([]);
const formatters = chartOptions.tooltip as TooltipComponentOption;
if (formatters.formatter) {
if (chartOptions.tooltip?.formatter) {
setTooltip('');
if (tooltipRef.current) {
tooltipRef.current.style.display = 'none';
Expand All @@ -257,13 +253,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}

const {offsetX, offsetY} = e;
if (offsetY < negativeY + ((chartOptions['grid'] as GridComponentOption)?.top as number) ?? 0) {
if (offsetY < negativeY + (chartOptions?.grid?.top as number) ?? 0) {
mouseout();
return;
}
const [x, y] = echarts.convertFromPixel('grid', [offsetX, offsetY]) as [number, number];
const seriesData = echart?.getOption().series as LinesSeriesOption;
const data = (seriesData.data as number[][]) ?? [];
const [x, y] = echarts.convertFromPixel('grid' as any, [offsetX, offsetY]) as [number, number];
const seriesData: any = echarts.getOption().series;
const data = (seriesData[0].data as number[][]) ?? [];

// find right on top step
const steps = data.map(row => row[1]).sort((a, b) => a - b);
Expand Down Expand Up @@ -300,11 +296,10 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}

// set tooltip
const formatters = chartOptions.tooltip as TooltipComponentOption;
if (formatters.formatter) {
if (chartOptions.tooltip?.formatter) {
setTooltip(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
highlight == null ? '' : (formatters.formatter as any)?.(dots[highlight])
highlight == null ? '' : (chartOptions.tooltip?.formatter as any)?.(dots[highlight])
);
if (tooltipRef.current) {
if (step == null) {
Expand Down Expand Up @@ -384,9 +379,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}
});
} else {
const seriesData = echart.getOption().series as LinesSeriesOption;
const data = (seriesData.data as number[][]) ?? [];
const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
const seriesData: any = echart.getOption().series;
const data = (seriesData[0]?.data as number[][]) ?? [];
const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
const getValue: GetValue = i => data[highlight][i];
echart.setOption({
graphic: {
Expand Down Expand Up @@ -430,7 +425,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}
});
} else {
const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
echart.setOption({
graphic: {
elements: dots.map((dot, i) => {
Expand All @@ -449,7 +444,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
},
style: {
fill: '#fff',
stroke: (chartOptions.color as ZRColor[])?.[0],
stroke: chartOptions.color?.[0],
lineWidth: 2
}
};
Expand Down