From cfcd33626ea5d42dcd9fdc9aa9b7760fecf9900b Mon Sep 17 00:00:00 2001
From: yuqing521 <1581446178@qq.com>
Date: Mon, 23 Aug 2021 22:52:38 +0800
Subject: [PATCH 1/2] feat: add polar-area chart

---
 .../components/charts/polar-area-chart.tsx    | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 packages/admin/src/components/charts/polar-area-chart.tsx

diff --git a/packages/admin/src/components/charts/polar-area-chart.tsx b/packages/admin/src/components/charts/polar-area-chart.tsx
new file mode 100644
index 000000000..d47bda9f0
--- /dev/null
+++ b/packages/admin/src/components/charts/polar-area-chart.tsx
@@ -0,0 +1,117 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+import '../docs/admin-docs'
+import '../components/code-demo'
+import '../components/code-demo/container'
+
+import '@omiu/chart'
+
+interface Props { }
+
+const tagName = 'polar-area-chart'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+  static css = [sheet.target]
+
+  options = {
+    responsive: true,
+    legend: {
+      position: 'top',
+    },
+    title: {
+      display: true,
+      text: 'Omim Pie Chart'
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true
+    }
+  }
+
+  data = {
+    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+    datasets: [{
+      label: '# of Votes',
+      data: [12, 19, 3, 5, 2, 3],
+      backgroundColor: [
+        'rgba(255,99,132,1)',
+        'rgba(54, 162, 235, 1)',
+        'rgba(255, 206, 86, 1)',
+        'rgba(75, 192, 192, 1)',
+        'rgba(153, 102, 255, 1)',
+        'rgba(255, 159, 64, 1)'
+      ],
+      borderColor: 'white',
+      borderWidth: 1
+    }]
+  }
+
+  mdA =
+    `
+  \`\`\`html
+<o-polar-area id="myChart" width="350" height="350"
+  data="{
+    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+    datasets: [{
+      label: '# of Votes',
+      data: [12, 19, 3, 5, 2, 3],
+      backgroundColor: [
+        'rgba(255,99,132,1)',
+        'rgba(54, 162, 235, 1)',
+        'rgba(255, 206, 86, 1)',
+        'rgba(75, 192, 192, 1)',
+        'rgba(153, 102, 255, 1)',
+        'rgba(255, 159, 64, 1)'
+      ],
+      borderColor: 'white',
+      borderWidth: 1
+    }]
+  }"
+
+  options="{
+    responsive: true,
+    legend: {
+      position: 'top',
+    },
+    title: {
+      display: true,
+      text: 'Omim Pie Chart'
+    },
+    animation: {
+      animateScale: true,
+      animateRotate: true
+    }
+  }">
+</o-polar-area>
+  \`\`\`
+  `
+
+  installed() { }
+
+  render() {
+
+    return (
+      <code-demo-container>
+        <code-demo
+          title="极区图"
+          describe={'极区图显示'}
+          code={this.mdA}
+        >
+          <div slot="demo" class={tw`px-3 py-5`}>
+            <o-polar-area id="myChart" width="350" height="350" data={this.data}
+              options={this.options}>
+            </o-polar-area>
+          </div>
+        </code-demo>
+      </code-demo-container>
+    )
+  }
+}

From c511210efedf38475b7cc5d315e695eaee67cbe3 Mon Sep 17 00:00:00 2001
From: yuqing521 <1581446178@qq.com>
Date: Mon, 23 Aug 2021 22:53:10 +0800
Subject: [PATCH 2/2] feat: add scatter chart

---
 .../src/components/charts/scatter-chart.tsx   | 176 ++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 packages/admin/src/components/charts/scatter-chart.tsx

diff --git a/packages/admin/src/components/charts/scatter-chart.tsx b/packages/admin/src/components/charts/scatter-chart.tsx
new file mode 100644
index 000000000..51ff38e77
--- /dev/null
+++ b/packages/admin/src/components/charts/scatter-chart.tsx
@@ -0,0 +1,176 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+import '../docs/admin-docs'
+import '../components/code-demo'
+import '../components/code-demo/container'
+
+import '@omiu/chart'
+
+interface Props { }
+
+const tagName = 'scatter-chart'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+  static css = [sheet.target]
+
+  options = {
+    title: {
+      display: true,
+      text: 'Omim Scatter Chart'
+    }
+  }
+
+  data = {
+    datasets: [{
+      label: 'My First dataset',
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, .2)',
+      data: [{
+        x: 50,
+        y: 32
+      }, {
+        x: 22,
+        y: 10
+      }, {
+        x: 80,
+        y: 44
+      }, {
+        x: 22,
+        y: 77
+      }, {
+        x: 3,
+        y: 9
+      }, {
+        x: 44,
+        y: 11
+      }, {
+        x: 12,
+        y: 100
+      }]
+    }, {
+      label: 'My Second dataset',
+      borderColor: 'rgb(54, 162, 235)',
+      backgroundColor: 'rgba(54, 162, 235, .2)',
+      data: [{
+        x: 20,
+        y: 132
+      }, {
+        x: 32,
+        y: 40
+      }, {
+        x: 80,
+        y: 84
+      }, {
+        x: 32,
+        y: 77
+      }, {
+        x: 13,
+        y: 9
+      }, {
+        x: 24,
+        y: 11
+      }, {
+        x: 12,
+        y: 60
+      }]
+    }]
+  }
+
+  mdA =
+    `
+  \`\`\`html
+<o-scatter id="myScatter" width="560" height="300" data=" {
+  datasets: [{
+      label: 'My First dataset',
+      borderColor: 'rgb(255, 99, 132)',
+      backgroundColor: 'rgba(255, 99, 132, .2)',
+      data: [{
+        x: 50,
+        y: 32
+      }, {
+        x: 22,
+        y: 10
+      }, {
+        x: 80,
+        y: 44
+      }, {
+        x: 22,
+        y: 77
+      }, {
+        x: 3,
+        y: 9
+      }, {
+        x: 44,
+        y: 11
+      }, {
+        x: 12,
+        y: 100
+      }]
+    }, {
+      label: 'My Second dataset',
+      borderColor: 'rgb(54, 162, 235)',
+      backgroundColor: 'rgba(54, 162, 235, .2)',
+      data: [{
+        x: 20,
+        y: 132
+      }, {
+        x: 32,
+        y: 40
+      }, {
+        x: 80,
+        y: 84
+      }, {
+        x: 32,
+        y: 77
+      }, {
+        x: 13,
+        y: 9
+      }, {
+        x: 24,
+        y: 11
+      }, {
+        x: 12,
+        y: 60
+      }]
+    }]
+  }"
+
+  options="{
+    title: {
+      display: true,
+      text: 'Omim Scatter Chart'
+    }
+  }">
+</o-scatter>
+  \`\`\`
+  `
+
+  installed() { }
+
+  render() {
+
+    return (
+      <code-demo-container>
+        <code-demo
+          title="散点图"
+          describe={'散点图显示'}
+          code={this.mdA}
+        >
+          <div slot="demo" class={tw`px-3 py-5`}>
+            <o-scatter id="myScatter" width="560" height="300" data={this.data}
+              options={this.options}>
+            </o-scatter>
+          </div>
+        </code-demo>
+      </code-demo-container>
+    )
+  }
+}