add lineChart

.dumirc.ts

@@ -14,6 +14,12 @@ const themeConfig = {
         {
           description: 'CloudNative Components',
           openExternal: true,
+          title: 'Yunti UI',
+          url: 'https://github.com/yuntijs/yunti-ui',
+        },
+        {
+          description: 'Charts Components',
+          openExternal: true,
           title: 'Yunti Charts',
           url: 'https://github.com/yuntijs/yunti-charts',
         },
@@ -50,7 +56,7 @@ const themeConfig = {
       text: 'Github',
     },
     {
-      link: '/components/action-icon',
+      link: '/components/line-chart',
       text: 'Get Started',
       type: 'primary',
     },
@@ -72,6 +78,8 @@ const themeConfig = {
   name: 'Charts',
   nav: [
     { link: '/components/line-chart', title: 'Components' },
+    { link: '/examples/loading', title: 'Examples' },
+    { link: 'https://g2.antv.antgroup.com/api/overview', title: 'API' },
     { link: '/changelog', title: 'Changelog' },
   ],
   socialLinks: {

README.md

@@ -84,7 +84,22 @@ const nextConfig = {
 import { LineChart } from '@yuntijs/charts';
 
 export default () => (
-  <LineChart/>
+  <LineChart
+    options={{
+      data: [
+        { year: "1991", value: 3 },
+        { year: "1992", value: 4 },
+        { year: "1993", value: 3.5 },
+        { year: "1994", value: 5 },
+        { year: "1995", value: 4.9 },
+        { year: "1996", value: 6 },
+        { year: "1997", value: 7 },
+        { year: "1998", value: 9 },
+        { year: "1999", value: 13 },
+      ],
+      encode: { x: "year", y: "value" },
+    }} 
+  />
 );
 ```
 

docs/Examples/components.md

@@ -0,0 +1,12 @@
+---
+nav: Examples
+group: Components
+title: Tooltip
+description: Tooltip Examples
+---
+
+## Simple usage
+
+<code src="./demos/tooltip.tsx" nopadding></code>
+
+

docs/Examples/demos/loading.tsx

@@ -0,0 +1,24 @@
+import { LineChart } from '@yuntijs/charts';
+
+export default () => {
+  return (
+    <LineChart 
+      loading={true}
+      options={{
+        title: "折线图",
+        data: [
+          { year: "1991", value: 3 },
+          { year: "1992", value: 4 },
+          { year: "1993", value: 3.5 },
+          { year: "1994", value: 5 },
+          { year: "1995", value: 4.9 },
+          { year: "1996", value: 6 },
+          { year: "1997", value: 7 },
+          { year: "1998", value: 9 },
+          { year: "1999", value: 13 },
+        ],
+        encode: { x: "year", y: "value" },
+      }} 
+    />
+  );
+};

docs/Examples/demos/tooltip.tsx

@@ -0,0 +1,24 @@
+import { LineChart } from '@yuntijs/charts';
+
+export default () => {
+  return (
+    <LineChart 
+      loading={true}
+      options={{
+        title: "折线图222",
+        data: [
+          { year: "1991", value: 3 },
+          { year: "1992", value: 4 },
+          { year: "1993", value: 3.5 },
+          { year: "1994", value: 5 },
+          { year: "1995", value: 4.9 },
+          { year: "1996", value: 6 },
+          { year: "1997", value: 7 },
+          { year: "1998", value: 9 },
+          { year: "1999", value: 13 },
+        ],
+        encode: { x: "year", y: "value" },
+      }} 
+    />
+  );
+};

docs/Examples/empty.md

@@ -0,0 +1,12 @@
+---
+nav: Examples
+group: Basic
+title: Empty
+description: Empty Examples
+---
+
+## Simple usage
+
+<code src="./demos/loading.tsx" nopadding></code>
+
+

docs/Examples/loading.md

@@ -0,0 +1,12 @@
+---
+nav: Examples
+group: Basic
+title: Loading
+description: Loading Examples
+---
+
+## Simple usage
+
+<code src="./demos/loading.tsx" nopadding></code>
+
+

docs/index.tsx

@@ -24,11 +24,25 @@ const items: FeaturesProps['items'] = [
   },
 ];
 
-// @todo
 const example = `import { LineChart } from '@yuntijs/charts'
 
 export default () => (
-    <LineChart/>
+  <LineChart
+    options={{
+      data: [
+        { year: "1991", value: 3 },
+        { year: "1992", value: 4 },
+        { year: "1993", value: 3.5 },
+        { year: "1994", value: 5 },
+        { year: "1995", value: 4.9 },
+        { year: "1996", value: 6 },
+        { year: "1997", value: 7 },
+        { year: "1998", value: 9 },
+        { year: "1999", value: 13 },
+      ],
+      encode: { x: "year", y: "value" },
+    }} 
+  />
 )`;
 
 export default () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/charts",
-  "version": "0.1.0.beta.0",
+  "version": "0.1.0-beta.0",
   "description": "☁️ Yunti Charts is an open-source Charts component library for building web apps",
   "keywords": [
     "yuntijs",

src/LineChart/demos/index.tsx

@@ -1,13 +1,40 @@
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { LineChart, LineChartProps } from '@yuntijs/charts';
-
-export default () => {
-  const store = useCreateStore();
-  const control: LineChartProps | any = useControls({}, { store });
+import { LineChart } from '@yuntijs/charts';
 
+const DefaultChart = () => {
   return (
-    <StoryBook levaStore={store}>
-      <LineChart {...control} />
-    </StoryBook>
+    <LineChart
+      key="index"
+      options={{
+        title: "折线图",
+        data: [
+          { month: 'Jan', city: 'Tokyo', temperature: 7 },
+          { month: 'Jan', city: 'London', temperature: 3.9 },
+          { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
+          { month: 'Feb', city: 'London', temperature: 4.2 },
+          { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
+          { month: 'Mar', city: 'London', temperature: 5.7 },
+          { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
+          { month: 'Apr', city: 'London', temperature: 8.5 },
+          { month: 'May', city: 'Tokyo', temperature: 18.4 },
+          { month: 'May', city: 'London', temperature: 11.9 },
+          { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
+          { month: 'Jun', city: 'London', temperature: 15.2 },
+          { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
+          { month: 'Jul', city: 'London', temperature: 17 },
+          { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
+          { month: 'Aug', city: 'London', temperature: 16.6 },
+          { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
+          { month: 'Sep', city: 'London', temperature: 14.2 },
+          { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
+          { month: 'Oct', city: 'London', temperature: 10.3 },
+          { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
+          { month: 'Nov', city: 'London', temperature: 6.6 },
+          { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
+          { month: 'Dec', city: 'London', temperature: 4.8 },
+        ],
+        encode: { x: "month", y: "temperature", color: "city" },
+      }} 
+    />
   );
 };
+export default DefaultChart

src/LineChart/demos/point.tsx

@@ -0,0 +1,28 @@
+import { LineChart } from '@yuntijs/charts';
+
+const PointChart = () => {
+  return (
+    <LineChart
+      key="point"
+      options={{
+        title: "point 折线图",
+        data: [
+          { year: "1991", value: 3 },
+          { year: "1992", value: 4 },
+          { year: "1993", value: 3.5 },
+          { year: "1994", value: 5 },
+          { year: "1995", value: 4.9 },
+          { year: "1996", value: 6 },
+          { year: "1997", value: 7 },
+          { year: "1998", value: 9 },
+          { year: "1999", value: 13 },
+        ],
+        encode: { x: "year", y: "value" },
+    children: [{ type: "line" },
+          { type: "point", style: { fill: "white" }, tooltip: false },
+        ]
+      }} 
+    />
+  );
+};
+export default PointChart

src/LineChart/demos/step.tsx

@@ -0,0 +1,27 @@
+import { LineChart } from '@yuntijs/charts';
+
+export default () => {
+  return (
+    <LineChart 
+      options={{
+        title: "折线图",
+        data: [
+          { month: "Jan", value: 51 },
+          { month: "Feb", value: 91 },
+          { month: "Mar", value: 34 },
+          { month: "Apr", value: 47 },
+          { month: "May", value: 63 },
+          { month: "June", value: 58 },
+          { month: "July", value: 56 },
+          { month: "Aug", value: 77 },
+          { month: "Sep", value: 99 },
+          { month: "Oct", value: 106 },
+          { month: "Nov", value: 88 },
+          { month: "Dec", value: 56 },
+        ],
+        encode: { x: "month", y: "value", shape: "hv" },
+      }} 
+    />
+  );
+};
+

src/LineChart/index.md

@@ -5,10 +5,18 @@ title: LineChart
 description: The LineChart component is ....
 ---
 
-## Default
+## Simple usage
 
 <code src="./demos/index.tsx" nopadding></code>
 
+## Point LineChart
+
+<code src="./demos/point.tsx" nopadding></code>
+
+## Step LineChart
+
+<code src="./demos/step.tsx" nopadding></code>
+
 ## APIs
 
 <API></API>

src/LineChart/index.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
+import Chart, { ChartProps } from '../common/Chart'
+import defaultOptions from './options'
 
-export interface LineChartProps {
-  data: any;
+export interface LineChartProps extends ChartProps {
 }
-export const LineChart = () => {
-  return <div>LineChart</div>;
+
+export const LineChart:React.FC<LineChartProps> = (props) => {
+  return <Chart 
+    {...props}
+    defaultOptions={defaultOptions}
+  />;
 };
 export default LineChart;

src/LineChart/options.ts

@@ -0,0 +1,15 @@
+import type { G2Spec } from "@antv/g2";
+import { axisOptions } from '@/common/Chart/options'
+
+const options: G2Spec = {
+  type: "view",
+  scale: { 
+    x: { range: [0, 1] },
+    y: { domainMin: 0, nice: true } 
+  },
+  axis: axisOptions,
+  children: [
+    { type: "line" },
+  ]
+}
+export default options