Merge pull request ChartsCSS#9 from ramiy/main

Replace donut chart with radial chart

Author: ramiy

src/.vuepress/components/chart-builder.vue

@@ -159,8 +159,8 @@ export default {
           { id: 'column', label: 'Column', type: 'button' },
           { id: 'area', label: 'Area', type: 'button' },
           { id: 'line', label: 'Line', type: 'button' },
+          { id: 'radial', label: 'Radial', type: 'button', disabled: 'disabled' },
           { id: 'pie', label: 'Pie', type: 'button', disabled: 'disabled' },
-          { id: 'donut', label: 'Donut', type: 'button', disabled: 'disabled' },
           { id: 'radar', label: 'Radar', type: 'button', disabled: 'disabled' },
           { id: 'polar', label: 'Polar', type: 'button', disabled: 'disabled' },
         ],

src/.vuepress/config.js

@@ -105,8 +105,8 @@ module.exports = {
           '/charts/column',
           '/charts/area',
           '/charts/line',
+          '/charts/radial',
           '/charts/pie',
-          '/charts/donut',
           '/charts/polar',
           '/charts/radar',
           '/charts/mixed',

src/charts/README.md

@@ -17,8 +17,8 @@ Before using charts, check the development status. If a chart type is already re
 | [Column](./column/) | <Badge type="tip" vertical="middle" text="Released" />              | `charts-css column` |
 | [Area](./area/)     | <Badge type="tip" vertical="middle" text="Released" />              | `charts-css area  ` |
 | [Line](./line/)     | <Badge type="tip" vertical="middle" text="Released" />              | `charts-css line`   |
+| [Radial](./radial/) | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css radial` |
 | [Pie](./pie/)       | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css pie`    |
-| [Donut](./donut/)   | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css donut`  |
 | [Radar](./radar/)   | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css radar`  |
 | [Polar](./polar/)   | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css polar`  |
 
@@ -33,7 +33,7 @@ The current state of supported feature:
 }
 #features thead tr th:not(:first-of-type) {
   transform: rotate(-90deg);
-  width: 60px;
+  width: 40px;
   height: 80px;
   padding: 0;
   text-align: start;
@@ -52,8 +52,8 @@ The current state of supported feature:
       <th scope="col"> Column </th>
       <th scope="col"> Area </th>
       <th scope="col"> Line </th>
+      <th scope="col"> Radial </th>
       <th scope="col"> Pie </th>
-      <th scope="col"> Donut </th>
       <th scope="col"> Radar </th>
       <th scope="col"> Polar </th>
     </tr>
@@ -77,8 +77,8 @@ The current state of supported feature:
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-v /> </td>
-      <td> <status-d /> </td>
       <td> <status-x /> </td>
+      <td> <status-d /> </td>
       <td> <status-x /> </td>
       <td> <status-x /> </td>
     </tr>
@@ -100,20 +100,20 @@ The current state of supported feature:
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-d /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
     </tr>
     <tr>
       <th scope="row"> <code>show-data-on-hover</code> </th>
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-v /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
     </tr>
     <tr>
       <th scope="row"> <code>reverse</code> </th>
@@ -177,9 +177,9 @@ The current state of supported feature:
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-d /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
     </tr>
     <tr>
       <th scope="row"> <code>show-*-secondary-axes</code> </th>
@@ -188,9 +188,9 @@ The current state of supported feature:
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-d /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
-      <td> <status-x /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
+      <td> <status-d /> </td>
     </tr>
     <tr>
       <th scope="row"> <code>show-data-axes</code> </th>
@@ -231,8 +231,8 @@ The current state of supported feature:
       <td> <status-v /> </td>
       <td> <status-v /> </td>
       <td> <status-v /> </td>
-      <td> <status-d /> </td>
       <td> <status-x /> </td>
+      <td> <status-d /> </td>
       <td> <status-x /> </td>
       <td> <status-x /> </td>
     </tr>

src/charts/donut.md renamed to src/charts/radial.md

@@ -1,8 +1,8 @@
 ---
-permalink: /charts/donut/
+permalink: /charts/radial/
 ---
 
-# Donut <Badge type="warning" vertical="top" text="Under Development" />
+# Radial <Badge type="warning" vertical="top" text="Under Development" />
 
 ::: warning Note
 This chart is still [under development](/development/roadmap/). It's not yet included in the latest release.

src/components/data.md

@@ -405,4 +405,4 @@ Some chart types require not only the `--size` variable but also the `--start` v
 
 All `--size` variables should always be a unitless numbers between `0` to `1`. Why unitless? Because you should be able to change chart types without changing the unit in all the variables.
 
-Rectangular charts use percentage as a unit of measurement while redial charts use degrees. To make it easier for users to switch between chart types, the framework deprecated units. Instead, it multiplies the `--size` by `100%` or by `360deg` depending on the chart type.
+Rectangular charts use percentage as a unit of measurement while radial charts use degrees. To make it easier for users to switch between chart types, the framework deprecated units. Instead, it multiplies the `--size` by `100%` or by `360deg` depending on the chart type.

src/development/roadmap.md

@@ -19,7 +19,7 @@ Planned development and the release of new chart types:
 
 * **Q3 2021** - Pie chart.
 
-* **Q3 2021** - Donut chart.
+* **Q4 2021** - Radial chart.
 
 * **Q4 2021** - Polar Chart.
 

src/examples/README.md

@@ -16,8 +16,8 @@ Examples of different layouts for each chart type:
 * [Column Chart Examples](/examples/column/)
 * [Area Chart Examples](/examples/area/)
 * [Line Chart Examples](/examples/line/)
+* ~~[Radial Chart Examples](/examples/radial/)~~
 * ~~[Pie Chart Examples](/examples/pie/)~~
-* ~~[Donut Chart Examples](/examples/donut/)~~
 * ~~[Radar Chart Examples](/examples/radar/)~~
 * ~~[Polar Chart Examples](/examples/polar/)~~
 

src/examples/donut.md renamed to src/examples/radial.md

@@ -1,14 +1,14 @@
 ---
-permalink: /examples/donut/
+permalink: /examples/radial/
 editLink: false
 prev: false
 next: false
 pageClass: example-page
 ---
 
-# Donut Examples
+# Radial Examples
 
-<table class="charts-css donut">
+<table class="charts-css radial">
   <caption>Years Compared</caption>
   <thead>
     <tr>