Skip to content

Commit be1113b

Browse files
JayashTripathyJayashTripathy
authored
[WEB-5699] refactor: update styling and classnames of charts according to new design system (#8345)
* refactor: update styling and class names according to new design system in charts * refactor: clean up
1 parent e7974af commit be1113b

File tree

7 files changed

+46
-21
lines changed

7 files changed

+46
-21
lines changed

‎apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,22 +67,27 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
6767
{workspaceProjectIds && (
6868
<>
6969
{workspaceProjectIds.length > 0 || loader === "init-loader" ? (
70-
<div className="flex h-full overflow-hidden bg-surface-1 ">
70+
<div className="flex h-full overflow-hidden ">
7171
<Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
7272
<div className={"flex flex-col w-full h-full"}>
7373
<div
7474
className={cn(
7575
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between"
7676
)}
7777
>
78-
<Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
78+
<Tabs.List background="layer-2" className={"my-2 overflow-x-auto flex w-fit"}>
7979
{ANALYTICS_TABS.map((tab) => (
8080
<Tabs.Trigger
8181
key={tab.key}
8282
value={tab.key}
8383
disabled={tab.isDisabled}
8484
size="md"
8585
className="px-3"
86+
onClick={() => {
87+
if (!tab.isDisabled) {
88+
handleTabChange(tab.key);
89+
}
90+
}}
8691
>
8792
{tab.label}
8893
</Tabs.Trigger>

‎apps/web/core/components/analytics/overview/project-insights.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@ const ProjectInsights = observer(function ProjectInsights() {
6565
{projectInsightsData && (
6666
<Suspense fallback={<ProjectInsightsLoader />}>
6767
<RadarChart
68-
className="h-[350px] w-full lg:w-3/5"
68+
className="h-[350px] w-full lg:w-3/5 text-accent-primary"
6969
data={projectInsightsData}
7070
dataKey="key"
7171
radars={[
7272
{
7373
key: "count",
7474
name: "Count",
75-
fill: "rgba(var(--color-primary-300))",
76-
stroke: "rgba(var(--color-primary-300))",
75+
fill: "var(--color-brand-default)",
76+
stroke: "var(--color-brand-default)",
7777
fillOpacity: 0.6,
7878
dot: {
7979
r: 4,

‎packages/propel/src/charts/bar-chart/bar.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
1010
const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
1111
const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
1212
const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
13+
const DEFAULT_BAR_FILL_COLOR = "#000000"; // Default color when fill is a function - black
1314

1415
// Types
1516
interface TShapeProps {
@@ -66,7 +67,7 @@ function PercentageText({
6667
className?: string;
6768
}) {
6869
return (
69-
<text x={x} y={y} textAnchor="middle" className={cn("text-11 font-medium", className)} fill="currentColor">
70+
<text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
7071
{percentage}%
7172
</text>
7273
);
@@ -109,9 +110,12 @@ const CustomBar = React.memo(function CustomBar(props: TBarProps) {
109110
<g>
110111
<path
111112
d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
112-
className="transition-opacity duration-200"
113113
fill={fill}
114114
opacity={opacity}
115+
style={{
116+
transition: "opacity 200ms",
117+
fill: fill,
118+
}}
115119
/>
116120
{showText && (
117121
<PercentageText x={x + width / 2} y={textY} percentage={currentBarPercentage} className={textClassName} />
@@ -172,11 +176,13 @@ const createShapeVariant =
172176
);
173177
};
174178

179+
export { DEFAULT_BAR_FILL_COLOR };
180+
175181
export const barShapeVariants: Record<
176182
TBarChartShapeVariant,
177183
(props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
178184
> = {
179-
bar: createShapeVariant(CustomBar), // Standard bar with rounded-sm corners
185+
bar: createShapeVariant(CustomBar), // Standard bar with rounded corners
180186
lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top
181187
"lollipop-dotted": createShapeVariant(CustomBarLollipop, { dotted: true }), // Dotted line lollipop variant
182188
};

‎packages/propel/src/charts/bar-chart/root.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ import type { TBarChartProps } from "@plane/types";
1717
import { getLegendProps } from "../components/legend";
1818
import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
1919
import { CustomTooltip } from "../components/tooltip";
20-
import { barShapeVariants } from "./bar";
21-
22-
const DEFAULT_BAR_FILL_COLOR = "#000000";
20+
import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
2321

2422
export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
2523
const {
@@ -129,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
129127
barSize={barSize}
130128
className="recharts-wrapper"
131129
>
132-
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
130+
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
133131
<XAxis
134132
dataKey={xAxis.key}
135133
tick={(props) => {
@@ -176,8 +174,8 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
176174
{showTooltip && (
177175
<Tooltip
178176
cursor={{
179-
fill: "currentColor",
180-
className: "text-custom-background-90/80 cursor-pointer",
177+
fill: "var(--color-alpha-black-300)",
178+
className: "bg-layer-1 cursor-pointer",
181179
}}
182180
wrapperStyle={{
183181
pointerEvents: "auto",

‎packages/propel/src/charts/pie-chart/root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
7777
showLabel
7878
? ({ payload, ...props }) => (
7979
<text
80-
className="text-13 font-medium transition-opacity duration-200"
80+
className="text-sm font-medium transition-opacity duration-200"
8181
cx={props.cx}
8282
cy={props.cy}
8383
x={props.x}
@@ -123,7 +123,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
123123
<Tooltip
124124
cursor={{
125125
fill: "currentColor",
126-
className: "text-custom-background-90/80 cursor-pointer",
126+
className: "bg-layer-1-hover cursor-pointer",
127127
}}
128128
wrapperStyle={{
129129
pointerEvents: "none",

‎packages/propel/src/charts/tree-map/root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
1717
nameKey="name"
1818
dataKey="value"
1919
stroke="currentColor"
20-
className="text-custom-background-100 bg-surface-1"
20+
className="bg-layer-1 cursor-pointer"
2121
content={<CustomTreeMapContent />}
2222
animationEasing="ease-out"
2323
isUpdateAnimationActive={isAnimationActive}
@@ -29,7 +29,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
2929
content={({ active, payload }) => <TreeMapTooltip active={active} payload={payload} />}
3030
cursor={{
3131
fill: "currentColor",
32-
className: "text-custom-background-90/80 cursor-pointer",
32+
className: "bg-layer-1 cursor-pointer",
3333
}}
3434
wrapperStyle={{
3535
pointerEvents: "auto",

‎packages/propel/src/tabs/tabs.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@ import * as React from "react";
22
import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
33
import { cn } from "../utils/classname";
44

5+
type BackgroundVariant = "layer-1" | "layer-2" | "layer-3" | "layer-transparent";
6+
57
type TabsCompound = React.ForwardRefExoticComponent<
68
React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
79
> & {
810
List: React.ForwardRefExoticComponent<
9-
React.ComponentProps<typeof TabsPrimitive.List> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
11+
React.ComponentProps<typeof TabsPrimitive.List> & {
12+
background?: BackgroundVariant;
13+
} & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
1014
>;
1115
Trigger: React.ForwardRefExoticComponent<
1216
React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
@@ -34,14 +38,26 @@ const TabsRoot = React.forwardRef(function TabsRoot(
3438
});
3539

3640
const TabsList = React.forwardRef(function TabsList(
37-
{ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>,
41+
{
42+
className,
43+
background = "layer-1",
44+
...props
45+
}: React.ComponentProps<typeof TabsPrimitive.List> & {
46+
background?: BackgroundVariant;
47+
},
3848
ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
3949
) {
4050
return (
4151
<TabsPrimitive.List
4252
data-slot="tabs-list"
4353
className={cn(
44-
"flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1/60 relative overflow-auto",
54+
"flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 relative overflow-auto",
55+
{
56+
"bg-layer-1": background === "layer-1",
57+
"bg-layer-2": background === "layer-2",
58+
"bg-layer-3": background === "layer-3",
59+
"bg-layer-transparent": background === "layer-transparent",
60+
},
4561
className
4662
)}
4763
{...props}

0 commit comments

Comments
 (0)