Skip to content

Commit

Permalink
Fixed: Chart tooltip issue fixed.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arifulislam5577
Arifulislam5577 committed Oct 22, 2024
1 parent c4bbab9 commit bae80cf
Show file tree
Hide file tree
Showing 20 changed files with 38 additions and 123 deletions.
2 changes: 1 addition & 1 deletion Contribute.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ Ready to contribute? Here's how to get started:

- [Fork Keep React on GitHub](https://github.com/StaticMania/keep-react/fork)
- [Browse Open Issues](https://github.com/StaticMania/keep-react/issues)
- [Read the Documentation](https://react.keepdesign.io/docs/getting-started/introduction)
- [Read the Documentation](https://react.keepdesign.io/docs/getting-started/installation)

We're excited to have you as part of the Keep React community! Thank you for your support and contributions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export default App

## Components

The Keep React offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://react.keepdesign.io/docs/getting-started/introduction).
The Keep React offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://react.keepdesign.io/docs/getting-started/installation).

## Contributing

Expand Down
2 changes: 1 addition & 1 deletion app/components/Command/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const CommandItem = forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-md text-body-4 outline-none transition-all duration-200 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-metal-50 data-[selected=true]:text-metal-900 data-[disabled=true]:opacity-50 dark:data-[selected='true']:bg-metal-800 dark:data-[selected=true]:text-white",
"relative flex cursor-pointer select-none items-center gap-2 rounded-md text-body-4 outline-none transition-all duration-200 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-metal-50 data-[selected=true]:text-metal-900 data-[disabled=true]:opacity-50 dark:data-[selected='true']:bg-metal-800 dark:data-[selected=true]:text-white",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion app/components/ComponentUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const ComponentUI = () => {
</div>
<div className="mt-9 flex items-center justify-center">
<Link
href="/docs/getting-started/introduction"
href="/docs/getting-started/installation"
className="flex items-center gap-2 rounded-lg border border-dashed border-metal-200 bg-white px-6 py-2.5 transition-all duration-300 hover:bg-metal-900 hover:text-white dark:bg-metal-900 dark:hover:bg-metal-800">
View All Component <ArrowUpRight size={18} />
</Link>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const Header = () => {
)}
</button>
<Link
href="/docs/getting-started/introduction"
href="/docs/getting-started/installation"
className={cn(buttonVariants({ color: 'secondary' }), 'hidden sm:block')}>
get started
</Link>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const Hero = () => {
</button>
</div>
<Link
href="/docs/getting-started/introduction"
href="/docs/getting-started/installation"
className={buttonVariants({ size: 'lg', color: 'secondary' })}>
Get Started
</Link>
Expand Down
4 changes: 2 additions & 2 deletions app/docs/components/areaChart/variant/DefaultAreaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const DefaultAreaChart = () => {
} satisfies ChartConfig

return (
<ChartContainer config={chartConfig} className="mx-auto min-h-[200px] w-[600px]">
<ChartContainer config={chartConfig} className="mx-auto max-h-[250px] w-[600px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down Expand Up @@ -90,7 +90,7 @@ export const AreaChartComponent = () => {
} satisfies ChartConfig
return (
<ChartContainer config={chartConfig} className="min-h-[200px]">
<ChartContainer config={chartConfig} className="max-h-[250px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down
4 changes: 2 additions & 2 deletions app/docs/components/areaChart/variant/FillColoredChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const FillColoredChart = () => {
} satisfies ChartConfig

return (
<ChartContainer config={chartConfig} className="mx-auto min-h-[200px] w-[600px]">
<ChartContainer config={chartConfig} className="mx-auto max-h-[250px] w-[600px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down Expand Up @@ -84,7 +84,7 @@ export const AreaChartComponent = () => {
} satisfies ChartConfig
return (
<ChartContainer config={chartConfig} className="min-h-[200px]">
<ChartContainer config={chartConfig} className="max-h-[250px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down
4 changes: 2 additions & 2 deletions app/docs/components/areaChart/variant/FillColoredSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const FillColoredSeries = () => {
} satisfies ChartConfig

return (
<ChartContainer config={chartConfig} className="mx-auto min-h-[200px] w-[600px]">
<ChartContainer config={chartConfig} className="mx-auto max-h-[250px] w-[600px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down Expand Up @@ -90,7 +90,7 @@ export const AreaChartComponent = () => {
} satisfies ChartConfig
return (
<ChartContainer config={chartConfig} className="min-h-[200px]">
<ChartContainer config={chartConfig} className="max-h-[250px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down
4 changes: 2 additions & 2 deletions app/docs/components/areaChart/variant/GradientColor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const GradientColor = () => {
} satisfies ChartConfig

return (
<ChartContainer config={chartConfig} className="mx-auto min-h-[200px] w-[600px]">
<ChartContainer config={chartConfig} className="mx-auto max-h-[250px] w-[600px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down Expand Up @@ -102,7 +102,7 @@ export const AreaChartComponent = () => {
} satisfies ChartConfig
return (
<ChartContainer config={chartConfig} className="min-h-[200px]">
<ChartContainer config={chartConfig} className="max-h-[250px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down
4 changes: 2 additions & 2 deletions app/docs/components/areaChart/variant/GradientColorSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const GradientColorSeries = () => {
} satisfies ChartConfig

return (
<ChartContainer config={chartConfig} className="mx-auto min-h-[200px] w-[600px]">
<ChartContainer config={chartConfig} className="mx-auto max-h-[250px] w-[600px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down Expand Up @@ -107,7 +107,7 @@ export const AreaChartComponent = () => {
} satisfies ChartConfig
return (
<ChartContainer config={chartConfig} className="min-h-[200px]">
<ChartContainer config={chartConfig} className="max-h-[250px]">
<AreaChart
accessibilityLayer
data={chartData}
Expand Down
3 changes: 2 additions & 1 deletion app/docs/getting-started/installation/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import EditPage from '../../../components/EditPage'
import Installation from './Installation.mdx'

export const metadata: Metadata = {
description: 'Install Keep React in your React application or NextJs Application following step bellow.',
description:
'Keep React is an open-source component library built on top of React and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications. Install Keep React in your React application or NextJs Application following step bellow.',
title: 'Installation - Keep React',
}

Expand Down
33 changes: 0 additions & 33 deletions app/docs/getting-started/introduction/Introduction.mdx
View file

This file was deleted.

25 changes: 0 additions & 25 deletions app/docs/getting-started/introduction/page.tsx
View file

This file was deleted.

18 changes: 12 additions & 6 deletions app/src/components/Charts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,18 @@ const ChartTooltipContent = forwardRef<
const value = !labelKey && typeof label === 'string' ? config[label]?.label || label : itemConfig?.label

if (labelFormatter) {
return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
return (
<div className={cn('font-medium text-metal-900 dark:text-white', labelClassName)}>
{labelFormatter(value, payload)}
</div>
)
}

if (!value) {
return null
}

return <div className={cn('font-medium', labelClassName)}>{value}</div>
return <div className={cn('font-medium text-metal-900 dark:text-white', labelClassName)}>{value}</div>
}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])

if (!active || !payload?.length) {
Expand All @@ -160,7 +164,7 @@ const ChartTooltipContent = forwardRef<
<div
ref={ref}
className={cn(
'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-metal-100 bg-metal-100 px-2.5 py-1.5 text-body-5 font-medium shadow-xl dark:border-metal-800 dark:bg-metal-900',
'grid min-w-[10rem] items-start gap-1.5 rounded-lg border border-metal-100 bg-metal-25 px-3.5 py-2.5 text-body-5 font-medium shadow-xl dark:border-metal-900 dark:bg-black',
className,
)}>
{!nestLabel ? tooltipLabel : null}
Expand All @@ -174,7 +178,7 @@ const ChartTooltipContent = forwardRef<
<div
key={item.dataKey}
className={cn(
'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-metal-600 dark:[&>svg]:text-metal-300',
'flex w-full flex-wrap items-stretch gap-2 text-metal-900 dark:text-white [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-metal-600 dark:[&>svg]:text-metal-300 ',
indicator === 'dot' && 'items-center',
)}>
{formatter && item?.value !== undefined && item.name ? (
Expand Down Expand Up @@ -208,7 +212,7 @@ const ChartTooltipContent = forwardRef<
)}>
<div className="grid gap-1.5">
{nestLabel ? tooltipLabel : null}
<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
<span className="text-metal-600 dark:text-metal-300">{itemConfig?.label || item.name}</span>
</div>
{item.value && (
<span className="font-medium tabular-nums text-metal-600 dark:text-metal-300">
Expand Down Expand Up @@ -255,7 +259,9 @@ const ChartLegendContent = forwardRef<
return (
<div
key={item.value}
className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-metal-600')}>
className={cn(
'flex items-center gap-1.5 text-metal-600 dark:text-metal-300 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-metal-600',
)}>
{itemConfig?.icon && !hideIcon ? (
<itemConfig.icon />
) : (
Expand Down
4 changes: 2 additions & 2 deletions data/blogs/keep-react-v1.5.0.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ We are excited to announce that we are now using the highly popular animation fr

## Installation Process

We have simplified the integration process. You can now import `keepTheme` from `keep-react/keepTheme` to achieve the same functionality. For more details, please check out the installation docs [`here`](docs/getting-started/introduction).
We have simplified the integration process. You can now import `keepTheme` from `keep-react/keepTheme` to achieve the same functionality. For more details, please check out the installation docs [`here`](docs/getting-started/installation).

```tsx {1,8} showLineNumbers
import { keepTheme } from 'keep-react/keepTheme'
Expand Down Expand Up @@ -79,4 +79,4 @@ This release was made possible by the hard work and dedication of our contributo

- [Arifulislam5577](https://github.com/Arifulislam5577)

These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/introduction). Thank you for using Keep React!
These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/installation). Thank you for using Keep React!
2 changes: 1 addition & 1 deletion data/blogs/keep-react-v1.6.0.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,4 +194,4 @@ Thanks to all the contributors for making this release possible! Special shout-o

- [Arifulislam5577](https://github.com/Arifulislam5577)

These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/introduction). Thank you for using Keep React!
These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/installation). Thank you for using Keep React!
4 changes: 2 additions & 2 deletions next.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const nextConfig = {
async redirects() {
return [
{
source: '/introduction',
destination: '/docs/getting-started/introduction',
source: '/installation',
destination: '/docs/getting-started/installation',
permanent: true,
},
{
Expand Down
38 changes: 2 additions & 36 deletions routes/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,11 +419,6 @@ export const routes: routerPath[] = [
]

export const gettingStartedRoutes: routerPath[] = [
{
id: generatedID(),
name: 'Introduction',
href: '/docs/getting-started/introduction',
},
{
id: generatedID(),
name: 'Installation',
Expand All @@ -450,7 +445,7 @@ export const quickAccessRoute: routerPath[] = [
{
id: generatedID(),
name: 'Installation',
href: '/docs/getting-started/introduction',
href: '/docs/getting-started/installation',
target: '_self',
},
{
Expand All @@ -471,12 +466,6 @@ export const quickAccessRoute: routerPath[] = [
href: '/docs/getting-started/colors',
target: '_self',
},
{
id: generatedID(),
name: 'Layout',
href: '/docs/layout/column',
target: '_self',
},
{
id: generatedID(),
name: 'Dark Mode',
Expand All @@ -485,29 +474,6 @@ export const quickAccessRoute: routerPath[] = [
},
]

export const layoutRoutes: routerPath[] = [
// {
// id: generatedID(),
// name: 'Container',
// href: '/docs/layout/container',
// },
// {
// id: generatedID(),
// name: 'Column',
// href: '/docs/layout/column',
// },
// {
// id: generatedID(),
// name: 'Flex',
// href: '/docs/layout/flex',
// },
// {
// id: generatedID(),
// name: 'Grid',
// href: '/docs/layout/grid',
// },
]

export const navbarRoutes: routerPath[] = [
{
id: generatedID(),
Expand All @@ -517,7 +483,7 @@ export const navbarRoutes: routerPath[] = [
},
{
id: generatedID(),
href: '/docs/getting-started/introduction',
href: '/docs/getting-started/installation',
name: 'Documentation',
redirect: false,
},
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.lib.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx",
"module": "ES2015",
"module": "CommonJS",
"outDir": "./lib"
},
"exclude": ["app/**/*.stories.tsx"],
Expand Down

0 comments on commit bae80cf

Please sign in to comment.