Add Pie chart (#593)

* WIP

* clean up

.editorconfig

@@ -1,7 +1,7 @@
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 max_line_length = 110
@@ -16,6 +16,7 @@ ij_visual_guides = none
 ij_wrap_on_typing = false
 
 [*.css]
+indent_size = 2
 ij_css_align_closing_brace_with_properties = false
 ij_css_blank_lines_around_nested_selector = 1
 ij_css_blank_lines_between_blocks = 1

.stylelintrc.json

@@ -6,6 +6,9 @@
       "custom-properties",
       "declarations"
     ],
+    "custom-property-pattern": ["^[a-z][a-zA-Z0-9]+$", {
+      "message":  "Expected \"%s\" variable name to be lower camelCase"
+    }],
     "order/properties-alphabetical-order": true,
     "selector-pseudo-class-no-unknown": [true, {
       "ignorePseudoClasses": ["global"]

package.json

@@ -43,6 +43,7 @@
     "react-dom": "18.2.0",
     "react-modal": "^3.16.1",
     "react-redux": "^8.0.5",
+    "recharts": "^2.2.0",
     "redux": "^4.2.0",
     "the-new-css-reset": "^1.8.2"
   },

src/components/Node/Stats/Stats.js → src/components/Node/Ancestry/Ancestry.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import classes from './Stats.module.css';
+import classes from './Ancestry.module.css';
 
-const Stats = ({completion, nodeChildrenAmount, tier}) => (
-  <div className={classes.stats}>
-    <h3>Stats</h3>
-    <div className={classes.chart}>{completion}</div>
+export const Ancestry = ({nodeChildrenAmount, tier}) => (
+  <div className={classes.ancestry}>
+    <h3>Ancestry</h3>
     <div>
       <div className={classes.tier}>
         <h4>Tier</h4>
@@ -20,10 +19,7 @@ const Stats = ({completion, nodeChildrenAmount, tier}) => (
   </div>
 );
 
-Stats.propTypes = {
+Ancestry.propTypes = {
   nodeChildrenAmount: PropTypes.number.isRequired,
-  completion: PropTypes.number.isRequired,
   tier: PropTypes.number.isRequired,
 };
-
-export default Stats;

src/components/Node/Stats/Stats.module.css → src/components/Node/Ancestry/Ancestry.module.css

@@ -1,32 +1,19 @@
-.stats {
+.ancestry {
   display: flex;
   flex-wrap: wrap;
-  padding: var(--baseUnit) calc(2 * var(--baseUnit)) calc(4 * var(--baseUnit));
+  padding: var(--baseUnit) calc(2 * var(--baseUnit)) calc(2 * var(--baseUnit));
 
   & h3 {
     color: var(--darkColor);
     font-size: 16px;
     font-weight: 300;
     letter-spacing: 1px;
     margin-bottom: var(--baseUnit);
-    text-align: center;
+    text-align: left;
     text-transform: uppercase;
     width: 100%;
   }
 
-  & .chart {
-    --size: calc(16 * var(--baseUnit));
-
-    background: var(--iconColor);
-    border-radius: var(--size);
-    color: white;
-    height: var(--size);
-    line-height: var(--size);
-    margin-right: calc(2 * var(--baseUnit));
-    text-align: center;
-    width: var(--size);
-  }
-
   & .tier,
   & .ancestors {
     align-items: center;

src/components/Node/Ancestry/index.js

@@ -0,0 +1 @@
+export {Ancestry} from './Ancestry';

src/components/Node/Description/Description.module.css

@@ -1,5 +1,6 @@
 .description {
   padding: var(--baseMargin) calc(2 * var(--baseUnit));
+  width: 100%;
 
   & h3 {
     color: var(--darkColor);

src/components/Node/Node.js

@@ -7,8 +7,9 @@ import {useDeleteNodeModal, useEditNodeModal} from '@/components/ModalManager';
 import {useNodeData, useChildrenCompletion} from '@/features/structure';
 import {Button} from '@/ui/Button';
 import {FooterSeparator} from '@/ui/FooterSeparator';
+import {PieChart} from '@/components/PieChart';
 
-import Stats from './Stats';
+import {Ancestry} from './Ancestry';
 import Description from './Description';
 import NodeHeader from './NodeHeader';
 import NodeActions from './NodeActions';
@@ -69,7 +70,10 @@ const Node = ({id, toggleNode, activeNode}) => {
         {isOpen && (
           <main>
             {description && <Description text={description} />}
-            <Stats completion={completion} tier={generation} nodeChildrenAmount={childNodes.length} />
+            <div className={classes.stats}>
+              <PieChart color={color} completion={completion} />
+              <Ancestry tier={generation} nodeChildrenAmount={childNodes.length} />
+            </div>
             <NodeActions deleteNode={handleDelete} />
           </main>
         )}

src/components/Node/Node.module.css

@@ -4,6 +4,10 @@
   overflow: hidden;
   position: relative;
 
+  & .stats {
+    display: flex;
+  }
+
   & main,
   & .header {
     background-color: var(--backgroundHighColor);

src/components/PieChart/PieChart.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Cell, Pie, PieChart as PieChartGeneric} from 'recharts';
+import {useVariable} from 'css-vars-hook';
+
+import {useChartData} from './useChartData';
+import classes from './PieChart.module.css';
+
+const normalizeColor = color => {
+  return color === '' ? '#4a90e2' : color;
+};
+
+export const PieChart = ({completion, color}) => {
+  const chartData = useChartData(completion);
+  const {setRef} = useVariable('color', color);
+  return (
+    <div className={classes.chart}>
+      <PieChartGeneric width={96} height={96}>
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={24}
+          outerRadius={48}
+          stroke="none"
+          label={false}>
+          {chartData.map((entry, index) => {
+            const segmentColor = index === 0 ? normalizeColor(color) : 'rgba(66, 66, 66, 0.33)';
+            return <Cell key={`cell-${index}`} fill={segmentColor} />;
+          })}
+        </Pie>
+      </PieChartGeneric>
+      <div ref={setRef} className={classes.completion}>
+        {completion}%
+      </div>
+    </div>
+  );
+};
+
+PieChart.propTypes = {
+  completion: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+};

src/components/PieChart/PieChart.module.css

@@ -0,0 +1,23 @@
+.chart {
+  --size: calc(16 * var(--baseUnit));
+
+  height: var(--size);
+  margin-left: calc(2 * var(--baseUnit));
+  margin-right: calc(2 * var(--baseUnit));
+  position: relative;
+  width: var(--size);
+}
+
+.completion {
+  --size: var(--chartLabelFontSize);
+  --color: black;
+
+  color: var(--color);
+  font-size: var(--size);
+  height: var(--size);
+  left: 50%;
+  line-height: var(--size);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

src/components/PieChart/index.js

@@ -0,0 +1 @@
+export {PieChart} from './PieChart';

src/components/PieChart/useChartData.js

@@ -0,0 +1,17 @@
+/**
+ * React hook converts completion to chart compatible format
+ * @param {Number} completion
+ * @return {Array.<{name: String, value: Number}>}
+ */
+export const useChartData = completion => {
+  return [
+    {
+      name: 'Completed',
+      value: completion,
+    },
+    {
+      name: 'Non-completed',
+      value: 100 - completion,
+    },
+  ];
+};

src/ui/ThemeProvider/rootTheme.css

@@ -1,28 +1,29 @@
 :root {
-  --name: 'default';
+  --name: "default";
   --baseUnit: 6px;
   --bgColor: #4a90e2;
   --accentColor: #cc8110;
-  --secondaryColor: rgba(255, 211, 110, 0.33);
+  --secondaryColor: rgb(255 211 110 / 33%);
   --darkColor: #424242;
   --dangerColor: #f23005;
-  --actionColor: rgba(46, 56, 255, 1);
+  --actionColor: rgb(46 56 255 / 100%);
   --confirmColor: #639423;
-  --modalBgColor: rgba(66, 66, 66, 0.66);
-  --iconColor: rgba(66, 66, 66, 0.66);
-  --iconLightColor: rgba(66, 66, 66, 0.33);
+  --modalBgColor: rgb(66 66 66 / 66%);
+  --iconColor: rgb(66 66 66 / 66%);
+  --iconLightColor: rgb(66 66 66 / 33%);
   --headerHeight: 56px;
   --footerHeight: calc(6 * var(--baseUnit));
   --columnHeight: calc(100 * var(--baseUnit));
   --baseMargin: 12px;
   --baseBorderRadius: 6px;
-  --backgroundLowColor: rgba(242, 242, 242, 0.8);
-  --backgroundMiddleColor: rgba(242, 242, 242, 0.66);
-  --backgroundMiddleColorHover: rgba(242, 242, 242, 1);
-  --backgroundHighColor: rgba(255, 255, 255, 0.66);
-  --backgroundFullColor: rgba(242, 242, 242, 1);
+  --backgroundLowColor: rgb(242 242 242 / 80%);
+  --backgroundMiddleColor: rgb(242 242 242 / 66%);
+  --backgroundMiddleColorHover: rgb(242 242 242 / 100%);
+  --backgroundHighColor: rgb(255 255 255 / 66%);
+  --backgroundFullColor: rgb(242 242 242 / 100%);
   --headerFontSize: 16px;
   --modalWidth: calc(66 * var(--baseUnit));
-  --modalButtonColor: rgba(230, 230, 230, 1);
+  --modalButtonColor: rgb(230 230 230 / 100%);
   --imageTitleColor: var(--iconColor);
+  --chartLabelFontSize: 14px;
 }

src/ui/ThemeProvider/theme.js

@@ -24,4 +24,5 @@ export const theme = {
   modalWidth: 'calc(66 * var(--baseUnit))',
   modalButtonColor: 'rgba(230, 230, 230, 1)',
   imageTitleColor: 'var(--iconColor)',
+  chartLabelFontSize: '14px',
 };