feat(charts): update charts doc

src/BIMDataComponents/BIMDataSimplePieChart/BIMDataSimplePieChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bimdata-graph" ref="container">
+  <div class="bimdata-simple-pie-chart" ref="container">
     <svg
       :viewBox="viewBox"
       :style="'--graph-draw-time:' + graphDrawTime + 's;'"
@@ -9,17 +9,17 @@
         :cx="center"
         :cy="center"
         :r="barDistanceFromCenter"
-        :stroke="placeholderBarStroke"
-        :stroke-width="placeholderBarStrokeWidth"
+        :stroke-width="placeholderStrokeWidth"
+        :stroke="placeholderColor"
         fill="none"
       />
       <g v-for="(barData, i) of displayedBarsData" :key="i">
         <path
           v-if="barData.percentage > 0"
           class="path"
           :d="getPath(barData)"
-          :stroke="barData.color"
           :stroke-width="barStrokeWidth"
+          :stroke="barData.color"
           fill="none"
         />
       </g>
@@ -30,9 +30,16 @@
 <script>
 export default {
   props: {
-    graphDrawTime: {
-      type: Number,
-      default: 4,
+    barsData: {
+      type: Array,
+      default: () => [],
+      // validator(barsData) {
+      //   return (
+      //     barsData?.every(barData => typeof barData?.color === "string") &&
+      //     barsData?.reduce((sum, barData) => sum + barData.percentage, "0") <=
+      //       "100"
+      //   );
+      // },
     },
     barDistanceFromCenter: {
       type: Number,
@@ -46,24 +53,17 @@ export default {
       type: Boolean,
       default: false,
     },
-    placeholderBarStrokeWidth: {
+    placeholderStrokeWidth: {
       type: Number,
       default: 4,
     },
-    placeholderBarStroke: {
+    placeholderColor: {
       type: String,
       default: "#EBEBEB",
     },
-    barsData: {
-      type: Array,
-      default: () => [],
-      // validator(barsData) {
-      //   return (
-      //     barsData?.every(barData => typeof barData?.color === "string") &&
-      //     barsData?.reduce((sum, barData) => sum + barData.percentage, "0") <=
-      //       "100"
-      //   );
-      // },
+    graphDrawTime: {
+      type: Number,
+      default: 4,
     },
   },
   computed: {

src/BIMDataComponents/BIMDataSimplePieChart/_BIMDataSimplePieChart.scss

@@ -1,10 +1,12 @@
-.bimdata-graph {
+.bimdata-simple-pie-chart {
   position: relative;
+
   .path {
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash var(--graph-draw-time, 2s) ease-in forwards;
   }
+
   @keyframes dash {
     to {
       stroke-dashoffset: 0;

src/web/views/Components/Charts/Charts.vue

@@ -10,9 +10,12 @@
       <ComponentCode language="javascript">
         <template #module>
           <BIMDataSimplePieChart
-            :barsData="values"
             style="heiht: 250px; width: 250px"
-          ></BIMDataSimplePieChart>
+            :barDistanceFromCenter="30"
+            :barStrokeWidth="12"
+            :graphDrawTime="2"
+            :barsData="values"
+          />
         </template>
 
         <template #import>
@@ -22,27 +25,49 @@
 
         <template #code>
           <pre>
-            &lt;BIMDataSimplePieChart&gt;&lt;/BIMDataSimplePieChart&gt;
+            &lt;BIMDataSimplePieChart
+              :barDistanceFromCenter="30"
+              :barStrokeWidth="12"
+              :graphDrawTime="2"
+              :barData="[
+                { percentage: 10, color: 'yellowgreen' },
+                { percentage: 55, color: 'orange' },
+                { percentage: 3, color: 'steelblue' },
+                { percentage: 19, color: 'cadetblue' }
+              ]"
+            /&gt;
           </pre>
         </template>
       </ComponentCode>
+
+      <div class="m-t-24">
+        <BIMDataText component="h5" margin="15px 0 0" color="color-primary">
+          Props:
+        </BIMDataText>
+        <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      </div>
     </div>
   </main>
 </template>
 
 <script>
-import BIMDataSimplePieChart from "@/BIMDataComponents/BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
-import BIMDataText from "@/BIMDataComponents/BIMDataText/BIMDataText.vue";
+import propsData from "./props-data.js";
+
+import BIMDataSimplePieChart from "../../../../BIMDataComponents/BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
+import BIMDataTable from "../../../../BIMDataComponents/BIMDataTable/BIMDataTable.vue";
+import BIMDataText from "../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
 export default {
   components: {
     BIMDataSimplePieChart,
+    BIMDataTable,
     BIMDataText,
     ComponentCode,
   },
   data() {
     return {
+      propsData,
       values: [
         {
           color: "yellowgreen",
@@ -54,11 +79,7 @@ export default {
         },
         {
           color: "steelblue",
-          percentage: 1,
-        },
-        {
-          color: "steelblue",
-          percentage: 15,
+          percentage: 3,
         },
         {
           color: "cadetblue",

src/web/views/Components/Charts/props-data.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+export default [
+  [ "Name", "Type", "Default Value", "Description" ],
+  [
+    "barsData",
+    "Array",
+    "[]",
+    "Pie chart data. This is an array of object of type `{ percentage: Number, color: String }`."
+  ],
+  [
+    "barDistanceFromCenter",
+    "Number",
+    "50",
+    "Internal radius of the pie chart."
+  ],
+  [
+    "barStrokeWidth",
+    "Number",
+    "10",
+    "Width of the bars."
+  ],
+  [
+    "placeholder",
+    "Boolean",
+    "false",
+    "If true a placeholder bar is shown to 'complete' the circle."
+  ],
+  [
+    "placeholderStrokeWidth",
+    "Number",
+    "4",
+    "Width of the placeholder bar."
+  ],
+  [
+    "placeholderColor",
+    "String",
+    "#EBEBEB",
+    "Color of the placeholder bar."
+  ],
+  [
+    "graphDrawTime",
+    "Number",
+    "4",
+    "Duration of the drawing animation in seconds."
+  ],
+];