QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-06-02 06:09:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(theming): fix TimeTable chart issues (#34868)

Browse Source
This commit is contained in:
Gabriel Torres Ruiz
2025-09-02 07:48:13 -03:00
committed by GitHub
parent 4695be5cc5
commit d183969744
64 changed files with 3995 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/TimeSeriesColumnControl.test.tsx
View File

@@ -28,12 +28,12 @@ jest.mock('lodash/debounce', () => (fn: Function & { cancel: Function }) => {
test('renders with default props', () => {
render(<TimeSeriesColumnControl />);
expect(screen.getByText('Time series columns')).toBeInTheDocument();
expect(screen.getByRole('button')).toBeInTheDocument();
expect(screen.getByRole('img', { name: 'edit' })).toBeInTheDocument();
});
test('renders popover on edit', () => {
render(<TimeSeriesColumnControl />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
expect(screen.getByRole('tooltip')).toBeInTheDocument();
expect(screen.getByText('Label')).toBeInTheDocument();
expect(screen.getByText('Tooltip')).toBeInTheDocument();
@@ -42,7 +42,7 @@ test('renders popover on edit', () => {
test('renders time comparison', () => {
render(<TimeSeriesColumnControl colType="time" />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
expect(screen.getByText('Time lag')).toBeInTheDocument();
expect(screen.getAllByText('Type')[1]).toBeInTheDocument();
expect(screen.getByText('Color bounds')).toBeInTheDocument();
@@ -51,14 +51,14 @@ test('renders time comparison', () => {
test('renders contribution', () => {
render(<TimeSeriesColumnControl colType="contrib" />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
expect(screen.getByText('Color bounds')).toBeInTheDocument();
expect(screen.getByText('Number format')).toBeInTheDocument();
});
test('renders sparkline', () => {
render(<TimeSeriesColumnControl colType="spark" />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
expect(screen.getByText('Width')).toBeInTheDocument();
expect(screen.getByText('Height')).toBeInTheDocument();
expect(screen.getByText('Time ratio')).toBeInTheDocument();
@@ -70,7 +70,7 @@ test('renders sparkline', () => {
test('renders period average', () => {
render(<TimeSeriesColumnControl colType="avg" />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
expect(screen.getByText('Time lag')).toBeInTheDocument();
expect(screen.getByText('Color bounds')).toBeInTheDocument();
expect(screen.getByText('Number format')).toBeInTheDocument();
@@ -79,7 +79,7 @@ test('renders period average', () => {
test('triggers onChange when type changes', () => {
const onChange = jest.fn();
render(<TimeSeriesColumnControl onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.click(screen.getByText('Select ...'));
userEvent.click(screen.getByText('Time comparison'));
expect(onChange).not.toHaveBeenCalled();
@@ -93,7 +93,7 @@ test('triggers onChange when time lag changes', () => {
const timeLag = '1';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
const timeLagInput = screen.getByPlaceholderText('Time Lag');
userEvent.clear(timeLagInput);
userEvent.type(timeLagInput, timeLag);
@@ -106,7 +106,7 @@ test('time lag allows negative values', () => {
const timeLag = '-1';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
const timeLagInput = screen.getByPlaceholderText('Time Lag');
userEvent.clear(timeLagInput);
userEvent.type(timeLagInput, timeLag);
@@ -120,7 +120,7 @@ test('triggers onChange when color bounds changes', () => {
const max = 5;
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
const minInput = screen.getByPlaceholderText('Min');
const maxInput = screen.getByPlaceholderText('Max');
userEvent.type(minInput, min.toString());
@@ -135,7 +135,7 @@ test('triggers onChange when color bounds changes', () => {
test('triggers onChange when time type changes', () => {
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.click(screen.getByText('Select ...'));
userEvent.click(screen.getByText('Difference'));
expect(onChange).not.toHaveBeenCalled();
@@ -149,7 +149,7 @@ test('triggers onChange when number format changes', () => {
const numberFormatString = 'Test format';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.type(
screen.getByPlaceholderText('Number format string'),
numberFormatString,
@@ -165,7 +165,7 @@ test('triggers onChange when width changes', () => {
const width = '10';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.type(screen.getByPlaceholderText('Width'), width);
expect(onChange).not.toHaveBeenCalled();
userEvent.click(screen.getByRole('button', { name: 'Save' }));
@@ -176,7 +176,7 @@ test('triggers onChange when height changes', () => {
const height = '10';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.type(screen.getByPlaceholderText('Height'), height);
expect(onChange).not.toHaveBeenCalled();
userEvent.click(screen.getByRole('button', { name: 'Save' }));
@@ -187,7 +187,7 @@ test('triggers onChange when time ratio changes', () => {
const timeRatio = '10';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.type(screen.getByPlaceholderText('Time Ratio'), timeRatio);
expect(onChange).not.toHaveBeenCalled();
userEvent.click(screen.getByRole('button', { name: 'Save' }));
@@ -197,7 +197,7 @@ test('triggers onChange when time ratio changes', () => {
test('triggers onChange when show Y-axis changes', () => {
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.click(screen.getByRole('checkbox'));
expect(onChange).not.toHaveBeenCalled();
userEvent.click(screen.getByRole('button', { name: 'Save' }));
@@ -211,7 +211,7 @@ test('triggers onChange when Y-axis bounds changes', () => {
const max = 5;
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
const minInput = screen.getByPlaceholderText('Min');
const maxInput = screen.getByPlaceholderText('Max');
userEvent.type(minInput, min.toString());
@@ -228,7 +228,7 @@ test('triggers onChange when date format changes', () => {
const dateFormat = 'yy/MM/dd';
const onChange = jest.fn();
render(<TimeSeriesColumnControl colType="spark" onChange={onChange} />);
userEvent.click(screen.getByRole('button'));
userEvent.click(screen.getByRole('img', { name: 'edit' }));
userEvent.type(screen.getByPlaceholderText('Date format string'), dateFormat);
expect(onChange).not.toHaveBeenCalled();
userEvent.click(screen.getByRole('button', { name: 'Save' }));

21
superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
View File

@@ -28,6 +28,7 @@ import {
Select,
} from '@superset-ui/core/components';
import { t, styled } from '@superset-ui/core';
import { Icons } from '@superset-ui/core/components/Icons';
import BoundsControl from '../BoundsControl';
import CheckboxControl from '../CheckboxControl';
import ControlPopover from '../ControlPopover/ControlPopover';
@@ -369,11 +370,21 @@ export default class TimeSeriesColumnControl extends Component {
open={this.state.popoverVisible}
onOpenChange={this.onPopoverVisibleChange}
>
<InfoTooltip
icon="edit"
className="text-primary"
label="edit-ts-column"
/>
<span
css={theme => ({
display: 'inline-block',
cursor: 'pointer',
'& svg path': {
fill: theme.colorIcon,
transition: `fill ${theme.motionDurationMid} ease-out`,
},
'&:hover svg path': {
fill: theme.colorPrimary,
},
})}
>
<Icons.EditOutlined iconSize="s" />
</span>
</ControlPopover>
</span>
);