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

Add title attribute to all Tiles #791

Merged
merged 2 commits into from
Sep 3, 2021
Merged

Add title attribute to all Tiles #791

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea6fe95
Add title attribute to all Tiles
adrianmroz-allegro Sep 2, 2021
6b6bd92
Merge branch 'master' into feature/title-for-tiles
adrianmroz-allegro Sep 3, 2021
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
54 changes: 34 additions & 20 deletions src/client/components/filter-tile/filter-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,36 @@ import { FilterMenu } from "../filter-menu/filter-menu";
import { SvgIcon } from "../svg-icon/svg-icon";
import { WithRef } from "../with-ref/with-ref";

function timeShiftLabel(dimension: Dimension, essence: Essence) {
if (!isTimeAttribute(essence.dataCube, dimension.expression)) return null;
if (!essence.hasComparison()) return null;
return `(Shift: ${essence.timeShift.getDescription(true)})`;
}

interface LabelProps {
dimension: Dimension;
clause: FilterClause;
essence: Essence;
}

function Label(props: LabelProps) {
const { dimension, clause, essence } = props;
const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
const timeShift = timeShiftLabel(dimension, essence);

return <div className="reading">
{title ? <span className="dimension-title">{title}</span> : null}
<span className="values">{values} {timeShift}</span>
</div>;
}

function tileTitle(dimension: Dimension, clause: FilterClause, essence: Essence): string {
const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
const timeShift = timeShiftLabel(dimension, essence);

return `${title} ${values} ${timeShift || ""}`;
}

interface FilterTileProps {
clause: FilterClause;
open: boolean;
Expand All @@ -48,22 +78,6 @@ interface FilterTileProps {
clicker: Clicker;
}

function renderTimeShiftLabel(dimension: Dimension, essence: Essence): string {
if (!isTimeAttribute(essence.dataCube, dimension.expression)) return null;
if (!essence.hasComparison()) return null;
return `(Shift: ${essence.timeShift.getDescription(true)})`;
}

function renderLabel(dimension: Dimension, clause: FilterClause, essence: Essence): JSX.Element {
const { title, values } = getFormattedClause(dimension, clause, essence.timezone);
const timeShift = renderTimeShiftLabel(dimension, essence);

return <div className="reading">
{title ? <span className="dimension-title">{title}</span> : null}
<span className="values">{values} {timeShift}</span>
</div>;
}

export const FILTER_CLASS_NAME = "filter";

export const FilterTile: React.SFC<FilterTileProps> = props => {
Expand All @@ -84,8 +98,6 @@ export const FilterTile: React.SFC<FilterTileProps> = props => {
clicker
} = props;

const label = renderLabel(dimension, clause, essence);

const excluded = clause && !isTimeFilter(clause) && clause.not;
return <WithRef>
{({ ref: openOn, setRef }) => <React.Fragment>
Expand All @@ -99,8 +111,10 @@ export const FilterTile: React.SFC<FilterTileProps> = props => {
ref={setRef}
onClick={() => openFilterMenu(clause)}
onDragStart={e => dragStart(dimension, clause, e)}
style={style}>
{label}
style={style}
title={tileTitle(dimension, clause, essence)}
>
<Label dimension={dimension} clause={clause} essence={essence} />
{removeClause && <div className="remove" onClick={() => removeClause(clause)}>
<SvgIcon svg={require("../../icons/x.svg")} />
</div>}
Expand Down
4 changes: 3 additions & 1 deletion src/client/components/series-tile/series-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ export const SeriesTile: React.SFC<SeriesTileProps> = props => {
ref={setRef}
onClick={() => openSeriesMenu(definition)}
onDragStart={e => dragStart(measure.title, definition, e)}
style={style}>
style={style}
title={title}
>
<div className="reading">{title}</div>
<div className="remove" onClick={remove}>
<SvgIcon svg={require("../../icons/x.svg")} />
Expand Down
1 change: 1 addition & 0 deletions src/client/components/split-tile/split-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const SplitTile: React.SFC<SplitTileProps> = props => {
onClick={() => openMenu(split)}
onDragStart={e => dragStart(dimension.title, split, e)}
style={style}
title={title}
>
<div className="reading">{title}</div>
<div className="remove"
Expand Down