You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/08/10 18:59:24 UTC
[superset] 01/01: Add tooltip
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch feat/color-schemes-names
in repository https://gitbox.apache.org/repos/asf/superset.git
commit ad39cfb516f25b5b4374e970a6300283874ff7cc
Author: geido <di...@gmail.com>
AuthorDate: Wed Aug 10 21:58:59 2022 +0300
Add tooltip
---
.../ColorSchemeControl/ColorSchemeLabel.test.tsx | 59 ++++++++++++
.../ColorSchemeControl/ColorSchemeLabel.tsx | 102 +++++++++++++++++++++
.../controls/ColorSchemeControl/index.jsx | 36 ++------
3 files changed, 167 insertions(+), 30 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx
new file mode 100644
index 0000000000..e3117d2f77
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.test.tsx
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import ColorSchemeLabel from './ColorSchemeLabel';
+
+const defaultProps = {
+ colors: [
+ '#000000',
+ '#FFFFFF',
+ '#CCCCCC',
+ '#000000',
+ '#FFFFFF',
+ '#CCCCCC',
+ '#000000',
+ '#FFFFFF',
+ '#CCCCCC',
+ '#000000',
+ '#FFFFFF',
+ '#CCCCCC',
+ ],
+ label: 'Superset Colors',
+ id: 'colorScheme',
+};
+
+const setup = (overrides?: Record<string, any>) =>
+ render(<ColorSchemeLabel {...defaultProps} {...overrides} />);
+
+test('should render', async () => {
+ const { container } = setup();
+ await waitFor(() => expect(container).toBeVisible());
+});
+
+test('should render the label', () => {
+ setup();
+ expect(screen.getByText('Superset Colors')).toBeInTheDocument();
+});
+
+test('should render the colors', () => {
+ setup();
+ const allColors = screen.getAllByTestId('color');
+ expect(allColors).toHaveLength(12);
+});
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
new file mode 100644
index 0000000000..4ab725c445
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
@@ -0,0 +1,102 @@
+import { css, SupersetTheme } from '@superset-ui/core';
+import React, { useRef, useState } from 'react';
+import { Tooltip } from 'src/components/Tooltip';
+
+type ColorSchemeLabelProps = {
+ colors: string[];
+ id: string;
+ label: string;
+};
+
+export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
+ const { id, label, colors } = props;
+ const [showTooltip, setShowTooltip] = useState<boolean>(false);
+ const labelNameRef = useRef<HTMLElement>(null);
+ const labelColorsRef = useRef<HTMLElement>(null);
+ const handleShowTooltip = () => {
+ const labelNameElement = labelNameRef.current;
+ const labelColorsElement = labelColorsRef.current;
+ if (
+ labelNameElement &&
+ labelColorsElement &&
+ (labelNameElement.scrollWidth > labelNameElement.offsetWidth ||
+ labelNameElement.scrollHeight > labelNameElement.offsetHeight ||
+ labelColorsElement.scrollWidth > labelColorsElement.offsetWidth ||
+ labelColorsElement.scrollHeight > labelColorsElement.offsetHeight)
+ ) {
+ setShowTooltip(true);
+ }
+ };
+ const handleHideTooltip = () => {
+ setShowTooltip(false);
+ };
+
+ const colorsList = () =>
+ colors.map((color: string, i: number) => (
+ <span
+ data-test="color"
+ key={`${id}-${i}`}
+ css={(theme: { gridUnit: number }) => css`
+ padding-left: ${theme.gridUnit / 2}px;
+ :before {
+ content: '';
+ display: inline-block;
+ background-color: ${color};
+ border: 1px solid ${color === 'white' ? 'black' : color};
+ width: 9px;
+ height: 10px;
+ }
+ `}
+ />
+ ));
+
+ const tooltipContent = () => (
+ <>
+ <span>{label}</span>
+ <div>{colorsList()}</div>
+ </>
+ );
+
+ return (
+ <Tooltip
+ data-testid="tooltip"
+ title={tooltipContent}
+ key={id}
+ visible={showTooltip}
+ >
+ <span
+ title={label}
+ onMouseEnter={handleShowTooltip}
+ onMouseLeave={handleHideTooltip}
+ css={css`
+ display: flex;
+ align-items: center;
+ `}
+ >
+ <span
+ ref={labelNameRef}
+ css={css`
+ min-width: 80px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ `}
+ >
+ {label}
+ </span>
+ <span
+ ref={labelColorsRef}
+ css={(theme: SupersetTheme) => css`
+ padding-left: ${theme.gridUnit}px;
+ min-width: 150px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ `}
+ >
+ {colorsList()}
+ </span>
+ </span>
+ </Tooltip>
+ );
+}
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx
index f0ccc12398..d585520785 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx
@@ -24,6 +24,7 @@ import { Tooltip } from 'src/components/Tooltip';
import { styled, t } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import ControlHeader from 'src/explore/components/ControlHeader';
+import ColorSchemeLabel from './ColorSchemeLabel';
const propTypes = {
hasCustomLabelColors: PropTypes.bool,
@@ -86,36 +87,11 @@ export default class ColorSchemeControl extends React.PureComponent {
}
return (
- <span key={currentScheme.id} title={currentScheme.label}>
- <ul
- css={{
- listStyle: 'none',
- margin: 0,
- padding: 0,
- display: 'flex',
- alignItems: 'center',
-
- '& li': {
- flexBasis: 9,
- height: 10,
- margin: '9px 1px',
- },
- }}
- data-test={currentScheme.id}
- >
- {colors.map((color, i) => (
- <li
- key={`${currentScheme.id}-${i}`}
- css={{
- backgroundColor: color,
- border: `1px solid ${color === 'white' ? 'black' : color}`,
- }}
- >
-
- </li>
- ))}
- </ul>
- </span>
+ <ColorSchemeLabel
+ id={currentScheme.id}
+ label={currentScheme.label}
+ colors={colors}
+ />
);
}