Feat/add line chart

app/docs/components/linechart/LineChart.mdx

@@ -0,0 +1,45 @@
+import { DefaultLineChart, DefaultLineChartCode } from './variant/DefaultLineChart'
+import { ChartWithAxisData, ChartWithAxisDataCode } from './variant/ChartWithAxisData'
+import { ChartWithDoubleData, ChartWithDoubleDataCode } from './variant/ChartWithDoubleData'
+
+import { lineChartAPIData } from './LineChartApi'
+import CodePreview from '../../../components/CodePreview'
+import ComponentApi from '../../../components/ComponentApi'
+
+## Table of Contents
+
+The Line Chart component provides a visual representation of data through lines of varying lengths. It's a graphical representation commonly used to display and compare the values of different categories or groups. The Line Chart component is highly customizable and can be tailored to fit various data visualization needs.
+
+## Default Line Chart
+
+Get started with a simple and clean line chart that provides essential data representation.
+
+<CodePreview github="Chart/LineChart.tsx" code={DefaultLineChartCode}>
+  <DefaultLineChart />
+</CodePreview>
+
+## Chart with X and Y Axis Data
+
+Learn how to populate your line chart with custom data for both the X and Y axes.
+
+<CodePreview github="Chart/LineChart.tsx" code={ChartWithAxisDataCode}>
+  <ChartWithAxisData />
+</CodePreview>
+
+## Line Chart With Double Series Data
+
+Discover how to create a line chart with multiple data series for more detailed insights.
+
+<CodePreview github="Chart/LineChart.tsx" code={ChartWithDoubleDataCode}>
+  <ChartWithDoubleData />
+</CodePreview>
+
+## API Reference
+
+Explore the comprehensive set of props and options available for the Line Chart component.
+
+<ComponentApi data={lineChartAPIData} />
+
+## Reference
+
+To learn more about the Line chart, please see the documentation of [Recharts](https://recharts.org/en-US)

app/docs/components/linechart/LineChartApi.ts

@@ -0,0 +1,122 @@
+export const lineChartAPIData = [
+  {
+    id: 1,
+    propsName: 'chartData',
+    propsType: 'Array',
+    propsDescription: 'Array of data for the chart.',
+    default: 'Array',
+  },
+  {
+    id: 2,
+    propsName: 'dataKey',
+    propsType: 'string',
+    propsDescription: 'Key in the data array for the primary data.',
+    default: 'price',
+  },
+  {
+    id: 3,
+    propsName: 'height',
+    propsType: 'number',
+    propsDescription: 'Height of the chart.',
+    default: '250',
+  },
+  {
+    id: 4,
+    propsName: 'lineColor',
+    propsType: 'string',
+    propsDescription: 'Color of the first line.',
+    default: '#1C222B',
+  },
+  {
+    id: 5,
+    propsName: 'secondaryLineColor',
+    propsType: 'string',
+    propsDescription: 'Color of the secondary line.',
+    default: '#3D4A5C',
+  },
+  {
+    id: 6,
+    propsName: 'secondaryDataKey',
+    propsType: 'string',
+    propsDescription: 'Key in the data array for the secondary data.',
+    default: 'sell',
+  },
+
+  {
+    id: 7,
+    propsName: 'showGridLine',
+    propsType: 'boolean',
+    propsDescription: 'Determines if grid lines are visible.',
+    default: 'false',
+  },
+  {
+    id: 17,
+    propsName: 'showLegend',
+    propsType: 'boolean',
+    propsDescription: 'Determines if the legend is visible.',
+    default: 'false',
+  },
+  {
+    id: 18,
+    propsName: 'showTooltip',
+    propsType: 'boolean',
+    propsDescription: 'Determines if tooltips are visible.',
+    default: 'false',
+  },
+  {
+    id: 19,
+    propsName: 'showXAxis',
+    propsType: 'boolean',
+    propsDescription: 'Determines if the X-axis is visible.',
+    default: 'false',
+  },
+  {
+    id: 20,
+    propsName: 'showYAxis',
+    propsType: 'boolean',
+    propsDescription: 'Determines if the Y-axis is visible.',
+    default: 'false',
+  },
+  {
+    id: 21,
+    propsName: 'width',
+    propsType: 'number',
+    propsDescription: 'Width of the chart.',
+    default: '600',
+  },
+  {
+    id: 22,
+    propsName: 'XAxisDataKey',
+    propsType: 'string',
+    propsDescription: 'Key in the data array for the X-axis data.',
+    default: 'None',
+  },
+  {
+    id: 23,
+    propsName: 'YAxisDataKey',
+    propsType: 'string',
+    propsDescription: 'Key in the data array for the Y-axis data.',
+    default: 'None',
+  },
+  {
+    id: 25,
+    propsName: 'tooltipBtnStyle',
+    propsType: 'string',
+    propsDescription: 'Custom style of the tooltip.',
+    default: 'None',
+  },
+  {
+    id: 26,
+    propsName: 'lineType',
+    propsType: 'CurveType',
+    propsDescription: 'Curve type from recharts.',
+    default: 'monotone',
+  },
+  {
+    id: 27,
+    propsName: 'strokeWidth',
+    propsType: 'number',
+    propsDescription: 'How will be the stoke width of the line.',
+    default: '2',
+  },
+]

app/docs/components/linechart/index.tsx

@@ -0,0 +1,6 @@
+'use client'
+import type { FC } from 'react'
+import LineChartDocsContent from './LineChart.mdx'
+const LineChartDocs: FC = () => <LineChartDocsContent />
+
+export default LineChartDocs

app/docs/components/linechart/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata, NextPage } from 'next'
+import { DocsContentLayout } from '../../../components/DocsContentLayout'
+import LineChartDocs from '.'
+
+export const metadata: Metadata = {
+  description:
+    "The Line Chart component visually displays data trends through connected data points. It's commonly used to track changes over time or across categories. Highly customizable, it adapts to various data visualization needs.",
+  title: 'Line Chart - Keep React',
+}
+
+const page: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <LineChartDocs />
+    </DocsContentLayout>
+  )
+}
+
+export default page

app/docs/components/linechart/variant/ChartWithAxisData.tsx

@@ -0,0 +1,89 @@
+'use client'
+import { LineChart } from '../../../../src'
+import { LinechartData } from './DefaultLineChart'
+
+const ChartWithAxisData = () => {
+  return (
+    <LineChart
+      width={850}
+      dataKey="price"
+      chartData={LinechartData}
+      showTooltip={true}
+      showXAxis={true}
+      showYAxis={true}
+      tooltipBtnColor="error"
+    />
+  )
+}
+
+const ChartWithAxisDataCode = `
+"use client";
+import { LineChart } from "keep-react";
+const LinechartData = [
+  {
+    name: "2",
+    price: 340,
+    sell: 140,
+  },
+  {
+    name: "4",
+    price: 300,
+    sell: 200,
+  },
+  {
+    name: "6",
+    price: 170,
+    sell: 120,
+  },
+  {
+    name: "8",
+    price: 190,
+    sell: 130,
+  },
+  {
+    name: "10",
+    price: 450,
+    sell: 120,
+  },
+  {
+    name: "12",
+    price: 400,
+    sell: 213,
+  },
+  {
+    name: "14",
+    price: 250,
+    sell: 180,
+  },
+  {
+    name: "16",
+    price: 320,
+    sell: 150,
+  },
+  {
+    name: "18",
+    price: 280,
+    sell: 160,
+  },
+  {
+    name: "20",
+    price: 390,
+    sell: 110,
+  },
+];
+
+export const LineChartComponent = () => {
+  return (
+    <LineChart
+      width={850}
+      dataKey="price"
+      chartData={LinechartData}
+      showTooltip={true}
+      showXAxis={true}
+      showYAxis={true}
+    />
+  )
+}
+
+`
+export { ChartWithAxisData, ChartWithAxisDataCode }

app/docs/components/linechart/variant/ChartWithDoubleData.tsx

@@ -0,0 +1,88 @@
+'use client'
+import { LineChart } from '../../../../src'
+import { LinechartData } from './DefaultLineChart'
+
+const ChartWithDoubleData = () => {
+  return (
+    <LineChart
+      width={850}
+      showXAxis={true}
+      showYAxis={true}
+      showTooltip={true}
+      chartData={LinechartData.slice(0, 6)}
+      dataKey="price"
+      secondaryDataKey="sell"
+      showGridLine
+    />
+  )
+}
+
+const ChartWithDoubleDataCode = `
+"use client";
+import { LineChart } from "keep-react";
+const LinechartData = [
+  {
+    name: "2",
+    price: 340,
+    sell: 140,
+  },
+  {
+    name: "4",
+    price: 300,
+    sell: 200,
+  },
+  {
+    name: "6",
+    price: 170,
+    sell: 120,
+  },
+  {
+    name: "8",
+    price: 190,
+    sell: 130,
+  },
+  {
+    name: "10",
+    price: 450,
+    sell: 120,
+  },
+  {
+    name: "12",
+    price: 400,
+    sell: 213,
+  },
+  {
+    name: "14",
+    price: 250,
+    sell: 180,
+  },
+  {
+    name: "16",
+    price: 320,
+    sell: 150,
+  },
+  {
+    name: "18",
+    price: 280,
+    sell: 160,
+  },
+];
+
+export const LineComponent = () => {
+  return (
+    <LineChart
+      width={850}
+      showXAxis={true}
+      showYAxis={true}
+      showTooltip={true}
+      chartData={LinechartData.slice(0, 6)}
+      dataKey="price"
+      secondaryDataKey="sell"
+      showGridLine
+    />
+  )
+}
+
+`
+
+export { ChartWithDoubleData, ChartWithDoubleDataCode }