feat(omi): support ignore attrs by props.ignoreAttrs

Tencent · Aug 1, 2021 · ea5d2a3 · ea5d2a3
1 parent 8ae93f9
commit ea5d2a3
Show file tree

Hide file tree

Showing 21 changed files with 13,274 additions and 33,788 deletions.
diff --git a/components/chart-card/index.html b/components/chart-card/index.html
@@ -9,6 +9,6 @@
 
   </head>
   <body style="background-color: #eee">
-    <o-chart-card></o-chart-card>
+    <o-chart-card color="#39f"></o-chart-card>
   </body>
 </html>
diff --git a/components/chart-card/package.json b/components/chart-card/package.json
@@ -18,7 +18,7 @@
     "watch": "sass --watch src/index.scss src/index.css --no-source-map"
   },
   "dependencies": {
-    "@omiu/chart": "^0.0.1"
+    "@omiu/chart": "^0.0.4"
   },
   "devDependencies": {
     "@types/node": "^16.4.7",

diff --git a/components/chart-card/src/index.tsx b/components/chart-card/src/index.tsx
@@ -4,33 +4,50 @@ import * as css from './index.scss'
 
 import '@omiu/chart'
 export interface Props {
-
-  backgroundColor: string
+  color: string
 }
 
 @tag('o-chart-card')
 export default class ChartCard extends WeElement<Props> {
   static css = css.default ? css.default : css
 
   static defaultProps = {
-    disabled: false,
-    value: [],
-    options: [],
-    size: 'default',
-    backgroundColor: 'black'
+    color: 'black'
   }
 
   static propTypes = {
-    disabled: Boolean,
-    value: Array,
-    options: Array,
-    size: String
+    color: String
   }
 
-  render(props: Props) {
+  chartData = {
+    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+    datasets: [{
+      label: '# of Votes',
+      data: [12, 19, 3, 5, 2, 3],
+      segment: {
+        borderColor: 'white',
+      },
+      borderColor: ['white', 'white', 'white', 'white', 'white', 'white'],
+      borderWidth: 1
+    }]
+  }
+
+  chartOptions = {
+    plugins: {
+      legend: {
+        display: false
+      }
+    },
+    maintainAspectRatio: false,
+    scales: {
+      yAxes: { display: false },
+      xAxes: { display: false }
+    }
+  }
 
+  render(props: Props) {
 
-    return <div class="card text-white" style={{ backgroundColor: props.backgroundColor }}>
+    return <div class="card text-white" style={{ backgroundColor: props.color }}>
       <div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
         <div>
           <div class="text-value-lg">9823</div>
@@ -40,57 +57,13 @@ export default class ChartCard extends WeElement<Props> {
           <slot>ICON</slot>
         </div>
       </div>
-      <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
-
-        <o-bar id="myBar" width="600" height="300" data="{
-    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-    datasets: [{
-      label: '# of Votes',
-      data: [12, 19, 3, 5, 2, 3],
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)'
-      ],
-      borderColor: [
-        '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)'
-      ],
-      borderWidth: 1
-    }]
-  }" options="{
-    legend: {
-      display: false
-    },
-    scales: {
-      yAxes: [{
-        ticks: {
-          beginAtZero: true
-        }
-      }]
-    }
-  }"></o-bar>
-        {/* <div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand">
-          <div class=""></div></div><div class="chartjs-size-monitor-shrink">
-            <div class=""></div></div>
-        </div>
-        <canvas class="chart chartjs-render-monitor" id="card-chart1" height="140" style="display: block; height: 70px; width: 315px;" width="630">
+      <div class="c-chart-wrapper mt-3 mx-3" >
+        {/* 
+        https://www.chartjs.org/docs/latest/configuration/responsive.html
+        Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false. 
+        */}
+        <o-line ignoreAttrs={true} height="70" data={this.chartData} options={this.chartOptions}></o-line>
 
-        </canvas>
-        <div id="card-chart1-tooltip" class="c-chartjs-tooltip top bottom" style="opacity: 0; left: 44.3542px; top: 144.662px;">
-          <div class="c-tooltip-header"><div class="c-tooltip-header-item">June</div></div><div class="c-tooltip-body">
-            <div class="c-tooltip-body-item"><span class="c-tooltip-body-item-color" style="background-color: rgb(50, 31, 219);"></span>
-              <span class="c-tooltip-body-item-label">My First dataset</span><span class="c-tooltip-body-item-value">55</span>
-            </div>
-          </div>
-        </div> */}
       </div>
     </div>
 

diff --git a/components/chart/package.json b/components/chart/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@omiu/chart",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Mobile pop-up options list",
   "docsExtend": {
-    "cnName": "弹出式菜单",
-    "cnDescription": "移动端弹出式选项列表",
+    "cnName": "图表",
+    "cnDescription": "图表",
     "codepen": "wvKdoNJ",
     "codepenHeight": 351,
     "codepenDefaultTab": "html,result"
@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "@omiu/common": "latest",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.5.0",
     "omi": "latest"
   }
 }
diff --git a/components/chart/src/index.esm.js b/components/chart/src/index.esm.js
diff --git a/components/chart/src/index.esm.js.map b/components/chart/src/index.esm.js.map