Skip to content

[UIK-5830][d3-chart] Rebranding #3160

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

Open
j-mnizhek wants to merge 7 commits into
base: UIK-5351/add-more-variables-to-theme
Choose a base branch
from
Open

[UIK-5830][d3-chart] Rebranding #3160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
011d4a6
[d3-chart] update styles for legend and tooltip
j-mnizhek Aug 28, 2026
651a6ca
[d3-chart] update value for invert tooltip border
j-mnizhek Aug 28, 2026
b7cee65
[d3-chart] update legend item sizes
j-mnizhek Aug 31, 2026
b5ca39e
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5830/d3-…
j-mnizhek Sep 1, 2026
c0f4d1d
[UIK-5830][d3-chart] add legend item highlight state/removed line and…
slizhevskyv-semrush Sep 1, 2026
f84bc24
[theme] add more semantic colors to chart data group vars
j-mnizhek Sep 1, 2026
341a849
[theme] add variables for chart-bg highlights
j-mnizhek Sep 3, 2026
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
2 changes: 1 addition & 1 deletion semcore/base-components/src/components/hint/style/hint.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ SHintPopper {
pointer-events: none;

background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
border-radius: var(--intergalactic-rounded-small, 4px);
Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/Dots.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function Dots(props) {
scale,
duration = 500,
transparent,
radius: radiusBase = 4,
radius: radiusBase = 3,
resolveColor,
patterns,
onClick,
Expand Down Expand Up @@ -97,7 +97,7 @@ function Dots(props) {
typeof display === 'function'
? display(i, i === activeIndex, !isPrev && !isNext)
: display || i === activeIndex || (!isPrev && !isNext);
const radius = radiusBase * (active ? 5 / 4 : 1);
const radius = radiusBase * (active ? 4 / 3 : 1);
if (!d3.defined()(d)) return acc;
if (!visible) return acc;

Expand Down
19 changes: 10 additions & 9 deletions semcore/d3-chart/src/component/Chart/AbstractChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import type { LegendTableProps } from '../ChartLegend/LegendTable/LegendTable.ty

export type ChartState = {
dataDefinitions: Array<LegendItem & { columns: React.ReactNode[] }>;
highlightedLine: number;
highlightedItem: number;
withTrend: boolean;

plotWidth: number;
Expand Down Expand Up @@ -65,7 +65,7 @@ export abstract class AbstractChart<
this.observer = new ResizeObserver(this.handleResize);
}

this.setHighlightedLine = this.setHighlightedLine.bind(this);
this.setHighlightedItem = this.setHighlightedItem.bind(this);
this.handleChangeVisible = this.handleChangeVisible.bind(this);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
Expand All @@ -75,7 +75,7 @@ export abstract class AbstractChart<

this.state = {
dataDefinitions: this.getDefaultDataDefinitions(),
highlightedLine: -1,
highlightedItem: -1,
withTrend: false,
plotWidth: 0,
plotHeight: 0,
Expand Down Expand Up @@ -329,8 +329,8 @@ export abstract class AbstractChart<
return valueScale;
}

protected setHighlightedLine(index: number) {
this.setState({ highlightedLine: index });
protected setHighlightedItem(index: number) {
this.setState({ highlightedItem: index });
}

protected handleChangeVisible(id: string, isVisible: boolean) {
Expand All @@ -352,11 +352,11 @@ export abstract class AbstractChart<
}

protected handleMouseEnter(id: string) {
this.setHighlightedLine(this.state.dataDefinitions.findIndex((line) => line.id === id));
this.setHighlightedItem(this.state.dataDefinitions.findIndex((line) => line.id === id));
}

protected handleMouseLeave() {
this.setHighlightedLine(-1);
this.setHighlightedItem(-1);
}

protected resolveColor(id: string, index: number) {
Expand Down Expand Up @@ -404,13 +404,14 @@ export abstract class AbstractChart<
return null;
}

const { dataDefinitions, withTrend } = this.state;
const { dataDefinitions, withTrend, highlightedItem } = this.state;
const lProps = {
...this.defaultLegendProps(),
...legendProps,
};

const commonLegendProps: LegendFlexProps | LegendTableProps = {
const commonLegendProps: (LegendFlexProps | LegendTableProps) & { highlightedItem: State['highlightedItem'] } = {
highlightedItem,
'dataHints': this.dataHints,
'items': dataDefinitions,
'size': lProps.size,
Expand Down
6 changes: 3 additions & 3 deletions semcore/d3-chart/src/component/Chart/AreaChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class AreaChartComponent extends AbstractChart<

renderChart() {
const { groupKey, curve, showDots, stacked, onClickArea } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

if (stacked) {
return (
Expand All @@ -80,7 +80,7 @@ class AreaChartComponent extends AbstractChart<
y={item.id}
key={item.id}
color={item.color}
transparent={highlightedLine !== -1 && highlightedLine !== index}
transparent={highlightedItem !== -1 && highlightedItem !== index}
curve={curve}
onClick={onClickArea}
>
Expand All @@ -101,7 +101,7 @@ class AreaChartComponent extends AbstractChart<
y={item.id}
key={item.id}
color={item.color}
transparent={highlightedLine !== -1 && highlightedLine !== index}
transparent={highlightedItem !== -1 && highlightedItem !== index}
curve={curve}
onClick={onClickArea}
>
Expand Down
6 changes: 3 additions & 3 deletions semcore/d3-chart/src/component/Chart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ class BarChartComponent extends AbstractChart<

renderChart() {
const { groupKey, type = 'group', invertAxis } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

if (dataDefinitions.length === 1) {
const item = dataDefinitions[0];
Expand Down Expand Up @@ -116,7 +116,7 @@ class BarChartComponent extends AbstractChart<

const commonBarComponentProps: BarProps = {
color: item.color,
transparent: highlightedLine !== -1 && highlightedLine !== index,
transparent: highlightedItem !== -1 && highlightedItem !== index,
onClick: this.handleClickBar,
};

Expand All @@ -143,7 +143,7 @@ class BarChartComponent extends AbstractChart<

const commonBarComponentProps: BarProps = {
color: item.color,
transparent: highlightedLine !== -1 && highlightedLine !== index,
transparent: highlightedItem !== -1 && highlightedItem !== index,
onClick: this.handleClickBar,
};

Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/Chart/CigaretteChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ class CigaretteChartComponent extends AbstractChart<
renderChart() {
const { invertAxis, data, uid, duration, patterns, onClick } =
this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;
const { plotWidth, plotHeight } = this;

this.offset = 0;
Expand Down Expand Up @@ -277,7 +277,7 @@ class CigaretteChartComponent extends AbstractChart<
direction={invertAxis ? 'horizontal' : 'vertical'}
onClick={onClick}
hovered={
highlightedLine === index ? true : highlightedLine === -1 ? undefined : false
highlightedItem === index ? true : highlightedItem === -1 ? undefined : false
}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/Chart/DonutChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class DonutChartComponent extends AbstractChart<

renderChart() {
const { innerRadius, halfsize, innerLabel, onClickPie } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

const checkedLegendItems = dataDefinitions.filter((item) => item.checked);

Expand All @@ -73,7 +73,7 @@ class DonutChartComponent extends AbstractChart<
dataKey={item.id}
name={item.label}
color={item.color}
active={highlightedLine === index}
active={highlightedItem === index}
/>
);
})}
Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/Chart/HistogramChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ class HistogramChartComponent extends AbstractChart<

renderChart() {
const { groupKey, invertAxis } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

if (this.isStack) {
return (
Expand All @@ -124,7 +124,7 @@ class HistogramChartComponent extends AbstractChart<

const commonBarComponentProps: BarProps = {
color: item.color,
transparent: highlightedLine !== -1 && highlightedLine !== index,
transparent: highlightedItem !== -1 && highlightedItem !== index,
};

if (invertAxis) {
Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/Chart/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class LineChartComponent extends AbstractChart<

protected renderChart() {
const { groupKey, curve, showDots, area, areaCurve, onClickLine } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

return dataDefinitions.map((item, index) => {
return (
Expand All @@ -78,7 +78,7 @@ class LineChartComponent extends AbstractChart<
y={item.id}
key={item.id}
color={item.color}
transparent={highlightedLine !== -1 && highlightedLine !== index}
transparent={highlightedItem !== -1 && highlightedItem !== index}
curve={curve}
onClick={onClickLine}
>
Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/Chart/VennChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class VennChartComponent extends AbstractChart<

renderChart() {
const { data, onClickVennItem } = this.asProps;
const { dataDefinitions, highlightedLine } = this.state;
const { dataDefinitions, highlightedItem } = this.state;

const checkedLegendItems = dataDefinitions.filter((item) => item.checked);
const checkedLegendItemsMap = checkedLegendItems.reduce<Record<string, LegendItem>>(
Expand Down Expand Up @@ -102,7 +102,7 @@ class VennChartComponent extends AbstractChart<
dataKey={item.id}
name={item.label}
color={item.color}
transparent={highlightedLine !== -1 && highlightedLine !== index}
transparent={highlightedItem !== -1 && highlightedItem !== index}
/>
);
})}
Expand Down
8 changes: 6 additions & 2 deletions semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ import type { LegendProps } from './BaseLegend.type';
import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type';
import { makeDataHintsHandlers } from '../../a11y/hints';

type InnerProps = {
highlightedItem?: number;
};
export abstract class BaseLegend<
P extends LegendProps,
E extends readonly ((...args: any[]) => any)[] = never[],
DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never,
> extends Component<P, E, never, {}, {}, DP> {
> extends Component<P, E, never, InnerProps, {}, DP> {
componentDidMount() {
this.setHints();
}
Expand Down Expand Up @@ -43,7 +46,7 @@ export abstract class BaseLegend<
_: {},
index: number,
): LegendItemProps & Intergalactic.InternalTypings.ComponentPropsNesting<'div'> {
const { shape = 'Checkbox', size = 'm', patterns } = this.asProps;
const { shape = 'Checkbox', size = 'm', patterns, highlightedItem } = this.asProps;
const line = this.getItem(index);

return {
Expand All @@ -57,6 +60,7 @@ export abstract class BaseLegend<
onMouseLeave: this.bindOnMouseLeaveItem(line.id),
style: { gridRowStart: `${index + 1}`, gridRowEnd: `${index + 2}` },
patterns,
transparent: highlightedItem !== undefined && (highlightedItem !== -1 && highlightedItem !== index),
};
}

Expand Down
4 changes: 2 additions & 2 deletions semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ SLegendFlex[direction='row'] {
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
gap: 8px 16px;
gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px);
}

SLegendFlex[direction='column'] {
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
gap: var(--intergalactic-spacing-content-gap-large, 8px);
}
4 changes: 3 additions & 1 deletion semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ export type LegendItemProps = LegendItem & {
* Handler for focus out legend item
*/
onBlurLegendItem: (id: LegendItemKey) => void;
/** Enables element transparency */
transparent?: boolean;
};

export type LegendItemDefaultProps = {
Expand All @@ -96,7 +98,7 @@ export type ShapeProps = LegendItem &
}
);

export const StaticShapes = ['Circle', 'Line', 'Square', 'Pattern'] as const;
export const StaticShapes = ['Circle', 'Pattern'] as const;

export type ShapeType = 'Checkbox' | typeof StaticShapes[number];

Expand Down
27 changes: 16 additions & 11 deletions semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,32 @@ SLegendItem[disabled]:hover {
cursor: default;
}

SLegendItem[transparent] {
opacity: 0.3;
}

SPointShape[color] {
background-color: var(--color);
margin-right: 8px;
margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
flex-shrink: 0;
}

SPointShape[shape='Circle'][size='l'] {
width: 16px;
height: 16px;
border-radius: 8px;
margin-top: 4px;
margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
}

SPointShape[shape='Circle'][size='m'] {
width: 12px;
height: 12px;
border-radius: 6px;
margin-top: 4px;
margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
}

SPointShape[shape='Line'][size='l'] {
/* TODO: Remove */
/* SPointShape[shape='Line'][size='l'] {
width: 16px;
height: 4px;
border-radius: 3px;
Expand All @@ -57,24 +62,24 @@ SPointShape[shape='Square'][size='m'] {
height: 12px;
border-radius: 2px;
margin-top: 4px;
}
} */

SPointShape[shape='Pattern'] {
background-color: transparent;
margin-right: 4px;
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
}

SIcon {
line-height: 0;
margin-right: 4px;
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
}

SIcon[size='l'] {
margin-top: 4px;
margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
}

SIcon[size='m'] {
margin-top: 2px;
margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px);
}

SLabel {
Expand All @@ -97,7 +102,7 @@ SCount[size='m'] {

SAdditionalLabel,
SCount {
margin-left: 4px;
margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
}

SAdditionalLabel {
Expand All @@ -113,7 +118,7 @@ SAdditionalLabel::before {
height: 4px;
width: 4px;
border-radius: 2px;
margin-right: 4px;
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
}

SAdditionalLabel[size='l']::before {
Expand Down
Loading
Loading