mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-06 05:40:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5699] refactor: update styling and classnames of charts according to new design system (#8345)

Browse Source 
* refactor: update styling and class names according to new design system in charts

* refactor: clean up
This commit is contained in:
Jayash Tripathy
2025-12-16 16:30:29 +05:30
committed by GitHub
parent e7974afd8b
commit be1113b170
7 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,7 +67,7 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
{workspaceProjectIds && (
<>
{workspaceProjectIds.length > 0 || loader === "init-loader" ? (
<div className="flex h-full overflow-hidden bg-surface-1 ">
<div className="flex h-full overflow-hidden ">
<Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
<div className={"flex flex-col w-full h-full"}>
<div
@@ -75,7 +75,7 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between"
)}
>
<Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
<Tabs.List background="layer-2" className={"my-2 overflow-x-auto flex w-fit"}>
{ANALYTICS_TABS.map((tab) => (
<Tabs.Trigger
key={tab.key}
@@ -83,6 +83,11 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
disabled={tab.isDisabled}
size="md"
className="px-3"
onClick={() => {
if (!tab.isDisabled) {
handleTabChange(tab.key);
}
}}
>
{tab.label}
</Tabs.Trigger>

6
apps/web/core/components/analytics/overview/project-insights.tsx
View File

@@ -65,15 +65,15 @@ const ProjectInsights = observer(function ProjectInsights() {
{projectInsightsData && (
<Suspense fallback={<ProjectInsightsLoader />}>
<RadarChart
className="h-[350px] w-full lg:w-3/5"
className="h-[350px] w-full lg:w-3/5 text-accent-primary"
data={projectInsightsData}
dataKey="key"
radars={[
{
key: "count",
name: "Count",
fill: "rgba(var(--color-primary-300))",
stroke: "rgba(var(--color-primary-300))",
fill: "var(--color-brand-default)",
stroke: "var(--color-brand-default)",
fillOpacity: 0.6,
dot: {
r: 4,

12
packages/propel/src/charts/bar-chart/bar.tsx
View File

@@ -10,6 +10,7 @@ const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
const DEFAULT_BAR_FILL_COLOR = "#000000"; // Default color when fill is a function - black
// Types
interface TShapeProps {
@@ -66,7 +67,7 @@ function PercentageText({
className?: string;
}) {
return (
<text x={x} y={y} textAnchor="middle" className={cn("text-11 font-medium", className)} fill="currentColor">
<text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
{percentage}%
</text>
);
@@ -109,9 +110,12 @@ const CustomBar = React.memo(function CustomBar(props: TBarProps) {
<g>
<path
d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
className="transition-opacity duration-200"
fill={fill}
opacity={opacity}
style={{
transition: "opacity 200ms",
fill: fill,
}}
/>
{showText && (
<PercentageText x={x + width / 2} y={textY} percentage={currentBarPercentage} className={textClassName} />
@@ -172,11 +176,13 @@ const createShapeVariant =
);
};
export { DEFAULT_BAR_FILL_COLOR };
export const barShapeVariants: Record<
TBarChartShapeVariant,
(props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
> = {
bar: createShapeVariant(CustomBar), // Standard bar with rounded-sm corners
bar: createShapeVariant(CustomBar), // Standard bar with rounded corners
lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top
"lollipop-dotted": createShapeVariant(CustomBarLollipop, { dotted: true }), // Dotted line lollipop variant
};

10
packages/propel/src/charts/bar-chart/root.tsx
View File

@@ -17,9 +17,7 @@ import type { TBarChartProps } from "@plane/types";
import { getLegendProps } from "../components/legend";
import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
import { CustomTooltip } from "../components/tooltip";
import { barShapeVariants } from "./bar";
const DEFAULT_BAR_FILL_COLOR = "#000000";
import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
const {
@@ -129,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
barSize={barSize}
className="recharts-wrapper"
>
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {
@@ -176,8 +174,8 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
{showTooltip && (
<Tooltip
cursor={{
fill: "currentColor",
className: "text-custom-background-90/80 cursor-pointer",
fill: "var(--color-alpha-black-300)",
className: "bg-layer-1 cursor-pointer",
}}
wrapperStyle={{
pointerEvents: "auto",

4
packages/propel/src/charts/pie-chart/root.tsx
View File

@@ -77,7 +77,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
showLabel
? ({ payload, ...props }) => (
<text
className="text-13 font-medium transition-opacity duration-200"
className="text-sm font-medium transition-opacity duration-200"
cx={props.cx}
cy={props.cy}
x={props.x}
@@ -123,7 +123,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
<Tooltip
cursor={{
fill: "currentColor",
className: "text-custom-background-90/80 cursor-pointer",
className: "bg-layer-1-hover cursor-pointer",
}}
wrapperStyle={{
pointerEvents: "none",

4
packages/propel/src/charts/tree-map/root.tsx
View File

@@ -17,7 +17,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
nameKey="name"
dataKey="value"
stroke="currentColor"
className="text-custom-background-100 bg-surface-1"
className="bg-layer-1 cursor-pointer"
content={<CustomTreeMapContent />}
animationEasing="ease-out"
isUpdateAnimationActive={isAnimationActive}
@@ -29,7 +29,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
content={({ active, payload }) => <TreeMapTooltip active={active} payload={payload} />}
cursor={{
fill: "currentColor",
className: "text-custom-background-90/80 cursor-pointer",
className: "bg-layer-1 cursor-pointer",
}}
wrapperStyle={{
pointerEvents: "auto",

22
packages/propel/src/tabs/tabs.tsx
View File

@@ -2,11 +2,15 @@ import * as React from "react";
import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
import { cn } from "../utils/classname";
type BackgroundVariant = "layer-1" | "layer-2" | "layer-3" | "layer-transparent";
type TabsCompound = React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
> & {
List: React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.List> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
React.ComponentProps<typeof TabsPrimitive.List> & {
background?: BackgroundVariant;
} & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
>;
Trigger: React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
@@ -34,14 +38,26 @@ const TabsRoot = React.forwardRef(function TabsRoot(
});
const TabsList = React.forwardRef(function TabsList(
{ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>,
{
className,
background = "layer-1",
...props
}: React.ComponentProps<typeof TabsPrimitive.List> & {
background?: BackgroundVariant;
},
ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1/60 relative overflow-auto",
"flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 relative overflow-auto",
{
"bg-layer-1": background === "layer-1",
"bg-layer-2": background === "layer-2",
"bg-layer-3": background === "layer-3",
"bg-layer-transparent": background === "layer-transparent",
},
className
)}
{...props}